Restructure project to root layout

src/App.tsx

@@ -0,0 +1,48 @@
+import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { DBProvider } from './context/DBProvider';
+import { HomeScreen } from './screens/HomeScreen';
+import { StartPickListScreen } from './screens/StartPickListScreen';
+import { PickListsScreen } from './screens/PickListsScreen';
+import { ActivePickListScreen } from './screens/ActivePickListScreen';
+import { AddItemScreen } from './screens/AddItemScreen';
+import { ManageProductsScreen } from './screens/ManageProductsScreen';
+import { ManageAreasScreen } from './screens/ManageAreasScreen';
+import { BarcodeScannerScreen } from './screens/BarcodeScannerScreen';
+import { useServiceWorker } from './hooks/useServiceWorker';
+
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#0d6efd',
+    },
+  },
+});
+
+const AppRoutes = () => {
+  useServiceWorker();
+  return (
+    <Routes>
+      <Route path="/" element={<HomeScreen />} />
+      <Route path="/start" element={<StartPickListScreen />} />
+      <Route path="/pick-lists" element={<PickListsScreen />} />
+      <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+      <Route path="/pick-lists/:id/add-item" element={<AddItemScreen />} />
+      <Route path="/products" element={<ManageProductsScreen />} />
+      <Route path="/areas" element={<ManageAreasScreen />} />
+      <Route path="/scan" element={<BarcodeScannerScreen />} />
+    </Routes>
+  );
+};
+
+export const App = () => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <BrowserRouter>
+      <DBProvider>
+        <AppRoutes />
+      </DBProvider>
+    </BrowserRouter>
+  </ThemeProvider>
+);