Ananya dev

package.json

@@ -23,6 +23,7 @@
     "qrcode.react": "^4.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-pick-color": "^2.0.0",
     "react-router": "^7.3.0",
     "react-router-dom": "^7.3.0",
     "react-select": "^5.10.1",

src/ListItems.tsx

@@ -7,6 +7,7 @@ import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import SyncIcon from '@mui/icons-material/Sync';
 import HomeIcon from '@mui/icons-material/Home';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
+import EditIcon from '@mui/icons-material/Edit';
 import { ListItemButton } from '@mui/material';
 
 export const mainListItems = (
@@ -18,7 +19,7 @@ export const mainListItems = (
       </ListItemIcon>
       <ListItemText primary='Manage users' />
     </ListItemButton>
-    <ListItemButton onClick={() => window.open('/admin/edit-site', '_self')}>
+    <ListItemButton onClick={() => window.open('/admin/list-sites', '_self')}>
       <ListItemIcon>
         <EditLocationAltIcon />
       </ListItemIcon>

src/admin/AdminBody.tsx

@@ -1,6 +1,8 @@
 import UserPage from './UserPage';
 import EditSite from './EditSite';
 import EditData from './EditData';
+import ListSites from './ListSites';
+import CreateEditSite from './CreateEditSite';
 
 interface AdminBodyProps {
   page: AdminPage;
@@ -14,6 +16,12 @@ export default function AdminBody(props: AdminBodyProps) {
       return <EditSite />;
     case 'edit-data':
       return <EditData />;
+    case 'list-sites':
+      return <ListSites />;
+    case 'create-site':
+      return <CreateEditSite mode='create' />;
+    case 'new-edit-site':
+      return <CreateEditSite mode='edit' />;
     default:
       return <h1>Error</h1>;
   }