Se agrego la interfaz ProjectsPage

src/App.tsx

@@ -5,22 +5,33 @@ import TopMenu from "./components/layout/TopMenu";
 import Home from "./pages/Home";
 import MetersPage from "./pages/meters/MeterPage";
 import ConcentratorsPage from "./pages/concentrators/ConcentratorsPage";
-import UsersPage from "./pages/UsersPage"; // nueva página
-import RolesPage from "./pages/RolesPage"; // nueva página
+import ProjectsPage from "./pages/projects/ProjectsPage";
+import UsersPage from "./pages/UsersPage";
+import RolesPage from "./pages/RolesPage";
+
+export type Page =
+  | "home"
+  | "projects"
+  | "meters"
+  | "concentrators"
+  | "users"
+  | "roles";
 
 export default function App() {
-  const [page, setPage] = useState("home");
+  const [page, setPage] = useState<Page>("home");
 
   const renderPage = () => {
     switch (page) {
+      case "projects":
+        return <ProjectsPage />;
       case "meters":
         return <MetersPage />;
       case "concentrators":
         return <ConcentratorsPage />;
       case "users":
-        return <UsersPage />; // nueva
+        return <UsersPage />;
       case "roles":
-        return <RolesPage />; // nueva
+        return <RolesPage />;
       case "home":
       default:
         return <Home />;
@@ -32,7 +43,9 @@ export default function App() {
       <Sidebar setPage={setPage} />
       <div className="flex-1 flex flex-col">
         <TopMenu />
-        <main className="flex-1 overflow-auto">{renderPage()}</main>
+        <main className="flex-1 overflow-auto">
+          {renderPage()}
+        </main>
       </div>
     </div>
   );