Add initial page structure for Clients, Orders and Services pages

src/modules/clients/pages/ClientsPage.tsx

@@ -1,10 +1,23 @@
-import { useAuth } from "@/modules/auth/hooks";
+import { Button } from "@/shared/components/Button";
+import { PenBox, Plus, Trash } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import type { Client } from "../types";
+import { Table } from "@/shared/components/Table";
 import { getPageTitle } from "@/shared/utils";
 import { Helmet } from "react-helmet-async";
 import { SidebarMenu } from "@/shared/components/Sidebar";
 
+const clients: Client[] = [
+  // TODO: Implement function to gather "clients" from database
+];
+
 export function ClientsPage() {
-  const { user } = useAuth();
+  const navigate = useNavigate();
+  const tableCols = [
+    { key: "name", header: "Name", accessor: (c: Client) => `${c.firstName} ${c.lastName}`, sortable: true },
+    { key: "email", header: "Email", accessor: (c: Client) => c.email ?? "—" },
+    { key: "createdAt", header: "Created At", accessor: (c: Client) => c.createdAt, sortable: true },
+  ];
 
   return (
     <>
@@ -13,18 +26,59 @@ export function ClientsPage() {
       </Helmet>
 
       <SidebarMenu>
-        <main className="bg-background flex min-h-screen flex-col items-center justify-center px-6 text-center lg:px-8">
-          <p className="text-primary text-base font-semibold">
-            Hello, {user?.firstName} {user?.lastName}!
-          </p>
-
-          <h1 className="text-foreground mt-4 text-5xl font-semibold tracking-tight text-balance sm:text-7xl">
-            Clients
-          </h1>
-
-          <p className="text-muted-foreground mt-6 text-lg font-medium text-pretty sm:text-xl/8">
-            There's nothing here yet.
-          </p>
+        <main className="min-h-screen">
+          <div className="mx-auto w-full">
+            <div className="mb-12">
+              <h1 className="text-2xl font-semibold tracking-tight">Clients</h1>
+
+              <p className="text-muted-foreground text-sm">
+                Manage your client base in one place. View all registered clients, create new records, and update or
+                remove existing information as needed.
+              </p>
+            </div>
+
+            <div className="mb-6 flex w-full items-center justify-end">
+              <div className="max-w-40">
+                <Button
+                  type={"button"}
+                  leftAddon={<Plus size={20} />}
+                  onClick={() => navigate("/clients/new")}
+                  // TODO: implement "/clients/new" route to add new clients
+                >
+                  New Client
+                </Button>
+              </div>
+            </div>
+
+            <Table<Client>
+              columns={tableCols}
+              data={clients}
+              context={"clients"}
+              searchable
+              defaultPageSize={10}
+              actions={(client) => (
+                <div className="flex gap-2">
+                  <button
+                    className="text-primary hover:text-primary-hover hover:cursor-pointer"
+                    onClick={() => navigate("/clients/c/:id")}
+                    // TODO: implement "/clients/c/:id" route to edit new clients
+                  >
+                    <PenBox size={16} />
+                  </button>
+
+                  <button
+                    className="text-destructive hover:text-destructive-hover hover:cursor-pointer"
+                    onClick={() => {
+                      console.log("Delete", client.firstName);
+                    }}
+                    // TODO: implement "Delete client" function to delete clients
+                  >
+                    <Trash size={16} />
+                  </button>
+                </div>
+              )}
+            />
+          </div>
         </main>
       </SidebarMenu>
     </>

src/modules/clients/types/Client.types.ts

@@ -0,0 +1,9 @@
+export interface Client {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  createdAt: string;
+  updatedAt: string;
+  [key: string]: string;
+}

src/modules/clients/types/index.ts

@@ -0,0 +1 @@
+export type { Client } from "./Client.types";

src/modules/orders/pages/OrdersPage.tsx

@@ -1,10 +1,23 @@
-import { useAuth } from "@/modules/auth/hooks";
+import { Button } from "@/shared/components/Button";
+import { PenBox, Plus, Trash } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import type { Order } from "../types";
+import { Table } from "@/shared/components/Table";
 import { getPageTitle } from "@/shared/utils";
 import { Helmet } from "react-helmet-async";
 import { SidebarMenu } from "@/shared/components/Sidebar";
 
+const orders: Order[] = [
+  // TODO: Implement function to gather "orders" from database
+];
+
 export function OrdersPage() {
-  const { user } = useAuth();
+  const navigate = useNavigate();
+  const tableCols = [
+    { key: "id", header: "Order ID", accessor: (o: Order) => o.id, sortable: true },
+    { key: "clientId", header: "Client ID", accessor: (o: Order) => o.clientId },
+    { key: "createdAt", header: "Created At", accessor: (o: Order) => o.createdAt, sortable: true },
+  ];
 
   return (
     <>
@@ -13,18 +26,59 @@ export function OrdersPage() {
       </Helmet>
 
       <SidebarMenu>
-        <main className="bg-background flex min-h-screen flex-col items-center justify-center px-6 text-center lg:px-8">
-          <p className="text-primary text-base font-semibold">
-            Hello, {user?.firstName} {user?.lastName}!
-          </p>
-
-          <h1 className="text-foreground mt-4 text-5xl font-semibold tracking-tight text-balance sm:text-7xl">
-            Orders
-          </h1>
-
-          <p className="text-muted-foreground mt-6 text-lg font-medium text-pretty sm:text-xl/8">
-            There's nothing here yet.
-          </p>
+        <main className="min-h-screen">
+          <div className="mx-auto w-full">
+            <div className="mb-12">
+              <h1 className="text-2xl font-semibold tracking-tight">Orders</h1>
+
+              <p className="text-muted-foreground text-sm">
+                Track and manage all orders efficiently. Browse existing orders, create new ones, and edit or delete
+                records to keep everything up to date.
+              </p>
+            </div>
+
+            <div className="mb-6 flex w-full items-center justify-end">
+              <div className="max-w-40">
+                <Button
+                  type={"button"}
+                  leftAddon={<Plus size={20} />}
+                  onClick={() => navigate("/orders/new")}
+                  // TODO: implement "/orders/new" route to add new orders
+                >
+                  New Order
+                </Button>
+              </div>
+            </div>
+
+            <Table<Order>
+              columns={tableCols}
+              data={orders}
+              context={"orders"}
+              searchable
+              defaultPageSize={10}
+              actions={(order) => (
+                <div className="flex gap-2">
+                  <button
+                    className="text-primary hover:text-primary-hover hover:cursor-pointer"
+                    onClick={() => navigate("/orders/o/:id")}
+                    // TODO: implement "/orders/o/:id" route to edit orders
+                  >
+                    <PenBox size={16} />
+                  </button>
+
+                  <button
+                    className="text-destructive hover:text-destructive-hover hover:cursor-pointer"
+                    onClick={() => {
+                      console.log("Delete", order.id);
+                    }}
+                    // TODO: implement "Delete order" function to delete orders
+                  >
+                    <Trash size={16} />
+                  </button>
+                </div>
+              )}
+            />
+          </div>
         </main>
       </SidebarMenu>
     </>

src/modules/orders/types/Order.types.ts

@@ -0,0 +1,7 @@
+export interface Order {
+  id: string;
+  clientId: string;
+  createdAt: string;
+  updatedAt: string;
+  [key: string]: string;
+}

src/modules/orders/types/index.ts

@@ -0,0 +1 @@
+export type { Order } from "./Order.types";

src/modules/services/pages/ServicesPage.tsx

@@ -1,10 +1,23 @@
-import { useAuth } from "@/modules/auth/hooks";
+import { Button } from "@/shared/components/Button";
+import { PenBox, Plus, Trash } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import type { Service } from "../types";
+import { Table } from "@/shared/components/Table";
 import { getPageTitle } from "@/shared/utils";
 import { Helmet } from "react-helmet-async";
 import { SidebarMenu } from "@/shared/components/Sidebar";
 
+const services: Service[] = [
+  // TODO: Implement function to gather "services" from database
+];
+
 export function ServicesPage() {
-  const { user } = useAuth();
+  const navigate = useNavigate();
+  const tableCols = [
+    { key: "name", header: "Service", accessor: (s: Service) => s.name, sortable: true },
+    { key: "description", header: "Description", accessor: (s: Service) => s.description },
+    { key: "createdAt", header: "Created At", accessor: (s: Service) => s.createdAt, sortable: true },
+  ];
 
   return (
     <>
@@ -13,18 +26,59 @@ export function ServicesPage() {
       </Helmet>
 
       <SidebarMenu>
-        <main className="bg-background flex min-h-screen flex-col items-center justify-center px-6 text-center lg:px-8">
-          <p className="text-primary text-base font-semibold">
-            Hello, {user?.firstName} {user?.lastName}!
-          </p>
-
-          <h1 className="text-foreground mt-4 text-5xl font-semibold tracking-tight text-balance sm:text-7xl">
-            Services
-          </h1>
-
-          <p className="text-muted-foreground mt-6 text-lg font-medium text-pretty sm:text-xl/8">
-            There's nothing here yet.
-          </p>
+        <main className="min-h-screen">
+          <div className="mx-auto w-full">
+            <div className="mb-12">
+              <h1 className="text-2xl font-semibold tracking-tight">Services</h1>
+
+              <p className="text-muted-foreground text-sm">
+                Organize the services you offer. Add new services, update details, or remove outdated entries to keep
+                your catalog accurate.
+              </p>
+            </div>
+
+            <div className="mb-6 flex w-full items-center justify-end">
+              <div className="max-w-40">
+                <Button
+                  type={"button"}
+                  leftAddon={<Plus size={20} />}
+                  onClick={() => navigate("/services/new")}
+                  // TODO: implement "/services/new" route to add new services
+                >
+                  New Service
+                </Button>
+              </div>
+            </div>
+
+            <Table<Service>
+              columns={tableCols}
+              data={services}
+              context={"services"}
+              searchable
+              defaultPageSize={10}
+              actions={(service) => (
+                <div className="flex gap-2">
+                  <button
+                    className="text-primary hover:text-primary-hover hover:cursor-pointer"
+                    onClick={() => navigate("/services/s/:id")}
+                    // TODO: implement "/services/s/:id" route to edit services
+                  >
+                    <PenBox size={16} />
+                  </button>
+
+                  <button
+                    className="text-destructive hover:text-destructive-hover hover:cursor-pointer"
+                    onClick={() => {
+                      console.log("Delete", service.id);
+                    }}
+                    // TODO: implement "Delete service" function to delete services
+                  >
+                    <Trash size={16} />
+                  </button>
+                </div>
+              )}
+            />
+          </div>
         </main>
       </SidebarMenu>
     </>

src/modules/services/types/Service.types.ts

@@ -0,0 +1,8 @@
+export interface Service {
+  id: string;
+  name: string;
+  description: string;
+  createdAt: string;
+  updatedAt: string;
+  [key: string]: string;
+}

src/modules/services/types/index.ts

@@ -0,0 +1 @@
+export type { Service } from "./Service.types";