refactor: simplify API routes and add sniffer status functionality

- Updated API routes to remove redundant prefixes.
- Introduced sniffer status fetching in the backend API.
- Added Sniffing page and integrated it into the routing.
- Created a new hook for backend API interactions.
- Implemented sniffer status type definitions.

frontend/src/Layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 // src/components/Sidebar.tsx
-import { ApartmentOutlined, HomeOutlined, InfoCircleOutlined, SettingOutlined } from '@ant-design/icons';
+import { ApartmentOutlined, ApiOutlined, HomeOutlined, InfoCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import { Layout, Menu } from 'antd';
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -11,6 +11,7 @@ const { Sider } = Layout;
 const menuItems = [
   { key: PATHS.HOME, icon: <HomeOutlined style={{ fontSize: '18px' }} />, label: 'Home' },
   { key: PATHS.NETWORK, icon: <ApartmentOutlined style={{ fontSize: '18px' }} />, label: 'Network' },
+  { key: PATHS.SNIFFING, icon: <ApiOutlined style={{ fontSize: '18px' }} />, label: 'Sniffing' },
   { key: '/about', icon: <InfoCircleOutlined style={{ fontSize: '18px' }} />, label: 'About' },
   { key: '/settings', icon: <SettingOutlined style={{ fontSize: '18px' }} />, label: 'Settings' },
 ];