feat(ui): Complete UI redesign with shadcn/ui components

- Add Tailwind CSS and shadcn/ui component library
- Create AppShell with sidebar navigation (fixes #1)
- Redesign ModelList with modern Table and refresh
- Redesign ComplianceDashboard with Recharts visualizations
- Add shadcn components: Button, Card, Badge, Table
- Fix TypeScript path aliases for @ imports
- Dashboard navigation now working correctly

Author: TamTunnel

AIGovHub/frontend/package-lock.json

@@ -13,21 +13,34 @@
     "@emotion/react": "^11.14.0",
     "@mantine/core": "^8.3.10",
     "@mantine/hooks": "^8.3.10",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
     "axios": "^1.13.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.562.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-router-dom": "^7.10.1"
+    "react-router-dom": "^7.10.1",
+    "recharts": "^3.6.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"

AIGovHub/frontend/package.json

@@ -1,17 +1,16 @@
-import { MantineProvider } from "@mantine/core";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import "@mantine/core/styles.css";
 import { ModelList } from "./components/ModelList";
 import { ModelForm } from "./components/ModelForm";
 import { ModelDetail } from "./components/ModelDetail";
 import { ComplianceDashboard } from "./components/ComplianceDashboard";
 import { PolicyList } from "./components/PolicyList";
 import { PolicyViolations } from "./components/PolicyViolations";
+import { AppShell } from "./components/layout/AppShell";
 
 function App() {
   return (
-    <MantineProvider>
-      <BrowserRouter>
+    <BrowserRouter>
+      <AppShell>
         <Routes>
           <Route path="/" element={<ModelList />} />
           <Route path="/dashboard" element={<ComplianceDashboard />} />
@@ -20,8 +19,8 @@ function App() {
           <Route path="/new" element={<ModelForm />} />
           <Route path="/models/:id" element={<ModelDetail />} />
         </Routes>
-      </BrowserRouter>
-    </MantineProvider>
+      </AppShell>
+    </BrowserRouter>
   );
 }