[Issue] feat: implement service ui page

.github/workflows/ci.yml

@@ -15,16 +15,18 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v4
         with:
           node-version: "25"
-          cache: npm
+          cache: pnpm
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Lint
-        run: npm run lint
+        run: pnpm lint
 
       - name: Unit tests
-        run: npm run test:ci
+        run: pnpm test:ci

app/(authenticated)/layout.tsx

@@ -5,34 +5,36 @@ import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { AppSidebar } from "@/components/app-sidebar";
 
+async function AuthGate({ children }: { children: React.ReactNode }) {
+   const supabase = await createClient();
+   const {
+      data: { user },
+   } = await supabase.auth.getUser();
+
+   if (!user) {
+      redirect("/login");
+   }
+
+   return <>{children}</>;
+}
+
 export default function AuthenticatedLayout({
    children,
 }: {
    children: React.ReactNode;
 }) {
-
    return (
-      <Suspense>
-        <AuthShell>{children}</AuthShell>
-      </Suspense>
-    );
-}
-
-async function AuthShell({ children }: { children: React.ReactNode }) {
-   const supabase = await createClient();
-   const { data: { user } } = await supabase.auth.getUser();
-   if (!user) redirect("/login");
-
-   return (
-     <TooltipProvider>
-       <SidebarProvider>
-         <AppSidebar />
-         <SidebarInset>
-           <div className="flex flex-1 flex-col gap-4 p-4">
-             {children}
-           </div>
-         </SidebarInset>
-       </SidebarProvider>
-     </TooltipProvider>
+      <TooltipProvider>
+         <SidebarProvider>
+            <AppSidebar />
+            <SidebarInset>
+               <div className="flex flex-1 flex-col gap-4 p-4">
+                  <Suspense fallback={null}>
+                     <AuthGate>{children}</AuthGate>
+                  </Suspense>
+               </div>
+            </SidebarInset>
+         </SidebarProvider>
+      </TooltipProvider>
    );
- }
+}

app/(authenticated)/services/page.tsx

@@ -1,7 +1,16 @@
-export default function ServicesPage() {
-  return (
-    <main className="flex min-h-screen flex-col p-8">
-      <h1 className="text-3xl font-bold">Services</h1>
-    </main>
-  )
+import { listCoaches, listServices } from "./queries";
+import { ServicesTable } from "./services-table";
+
+export default async function ServicesPage() {
+   const [services, coaches] = await Promise.all([
+      listServices(),
+      listCoaches(),
+   ]);
+
+   return (
+      <main className="flex min-h-screen flex-col gap-6 p-8">
+         <h1 className="text-3xl font-bold">Services</h1>
+         <ServicesTable services={services} coaches={coaches} />
+      </main>
+   );
 }