Add sport center UI

frontend/src/App.tsx

@@ -7,6 +7,7 @@ const MatchesScreen = lazy(() => import("./screens/matches"));
 const PlayerScreen = lazy(() => import("./screens/players"));
 const HealthScreen = lazy(() => import("./screens/health"));
 const LoginScreen = lazy(() => import("./screens/auth/login"));
+const SportCenters = lazy(() => import("./screens/sportcenter"));
 const PageNotFound = lazy(() => import("./screens/page-not-found"));
 
 function App() {
@@ -16,6 +17,7 @@ function App() {
         <Route path="/" element={<DashboardScreen />} />
         <Route path="/players" element={<PlayerScreen />} />
         <Route path="/matches" element={<MatchesScreen />} />
+        <Route path="/sportcenters" element={<SportCenters />} />
         <Route path="/health" element={<HealthScreen />} />
         <Route path="*" element={<PageNotFound />} />
       </Route>

frontend/src/screens/app-layout.tsx

@@ -5,6 +5,7 @@ import { FiChevronLeft } from "react-icons/fi";
 import { NavLink, Outlet, useNavigate } from "react-router-dom";
 import { Suspense } from "react";
 import {
+  FaBuilding,
   FaChartArea,
   FaFighterJet,
   FaHeartbeat,
@@ -91,6 +92,12 @@ function AppLayout() {
               label="Players"
               icon={<FaUserClock />}
             />
+            <NavItem
+              showLabel={!collapsed}
+              path="/sportcenters"
+              label="Sport Centers"
+              icon={<FaBuilding />}
+            />
             <NavItem
               showLabel={!collapsed}
               path="/health"

frontend/src/screens/sportcenter/index.tsx

@@ -0,0 +1,9 @@
+import Page from "../../components/page";
+
+export default function SportCenter() {
+  return (
+    <Page title="Sport Center">
+      <h3>Test</h3>
+    </Page>
+  );
+}