✨ Modernize Client App UI with TailwindCSS v3 - Cutting Edge Sleek Design

client/package.json

@@ -30,10 +30,13 @@
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
     "vite": "^7.1.2"

client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/src/App.tsx

@@ -1,8 +1,4 @@
-import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import { theme } from './theme';
 import MainLayout from './components/Layout/MainLayout';
 import Dashboard from './pages/Dashboard';
 import ProgrammeList from './pages/Programmes/ProgrammeList';
@@ -16,24 +12,21 @@ import RoutineGenerator from './pages/Routines/RoutineGenerator';
 
 function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Router>
-        <Routes>
-          <Route path="/" element={<MainLayout />}>
-            <Route index element={<Dashboard />} />
-            <Route path="programmes" element={<ProgrammeList />} />
-            <Route path="departments" element={<DepartmentList />} />
-            <Route path="teachers" element={<TeacherList />} />
-            <Route path="subjects" element={<SubjectList />} />
-            <Route path="rooms" element={<RoomList />} />
-            <Route path="sessions" element={<SessionList />} />
-            <Route path="semester-offerings" element={<SemesterOfferingList />} />
-            <Route path="routines" element={<RoutineGenerator />} />
-          </Route>
-        </Routes>
-      </Router>
-    </ThemeProvider>
+    <Router>
+      <Routes>
+        <Route path="/" element={<MainLayout />}>
+          <Route index element={<Dashboard />} />
+          <Route path="programmes" element={<ProgrammeList />} />
+          <Route path="departments" element={<DepartmentList />} />
+          <Route path="teachers" element={<TeacherList />} />
+          <Route path="subjects" element={<SubjectList />} />
+          <Route path="rooms" element={<RoomList />} />
+          <Route path="sessions" element={<SessionList />} />
+          <Route path="semester-offerings" element={<SemesterOfferingList />} />
+          <Route path="routines" element={<RoutineGenerator />} />
+        </Route>
+      </Routes>
+    </Router>
   );
 }
 

client/src/components/Common/LoadingSpinner.tsx

@@ -1,25 +1,18 @@
 import React from 'react';
-import { Box, CircularProgress, Typography } from '@mui/material';
 
 interface LoadingSpinnerProps {
   message?: string;
 }
 
 const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ message = 'Loading...' }) => {
   return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      justifyContent="center"
-      minHeight="200px"
-      gap={2}
-    >
-      <CircularProgress />
-      <Typography variant="body2" color="text.secondary">
-        {message}
-      </Typography>
-    </Box>
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-4">
+      <div className="relative w-16 h-16">
+        <div className="absolute inset-0 border-4 border-blue-200 rounded-full"></div>
+        <div className="absolute inset-0 border-4 border-t-blue-600 border-r-transparent border-b-transparent border-l-transparent rounded-full animate-spin"></div>
+      </div>
+      <p className="text-gray-600 font-medium">{message}</p>
+    </div>
   );
 };