Restructure project to root layout

src/screens/ManageAreasScreen.tsx

@@ -0,0 +1,40 @@
+import { Button, Container, List, ListItem, ListItemText, Stack, TextField, Typography } from '@mui/material';
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { useAreas } from '../hooks/dataHooks';
+import { useDatabase } from '../context/DBProvider';
+
+export const ManageAreasScreen = () => {
+  const db = useDatabase();
+  const areas = useAreas();
+  const [name, setName] = useState('');
+
+  const addArea = async () => {
+    if (!name) return;
+    await db.areas.add({ id: uuidv4(), name, created_at: Date.now(), updated_at: Date.now() });
+    setName('');
+  };
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Manage Areas
+      </Typography>
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={1}>
+          <TextField fullWidth label="Area name" value={name} onChange={(event) => setName(event.target.value)} />
+          <Button variant="contained" onClick={addArea} disabled={!name}>
+            Add
+          </Button>
+        </Stack>
+        <List>
+          {areas.map((area) => (
+            <ListItem key={area.id} divider>
+              <ListItemText primary={area.name} />
+            </ListItem>
+          ))}
+        </List>
+      </Stack>
+    </Container>
+  );
+};