From a7f485e1bb59e8faaed0566e9a6b5eab0e0ba1fc Mon Sep 17 00:00:00 2001
From: Renato Teixeira <renato.gfteixeira@outlook.com>
Date: Sun, 29 Mar 2026 23:34:22 -0300
Subject: [PATCH 1/3] feat: add Client type and initial ClientsPage structure
 with table and actions

---
 src/modules/clients/pages/ClientsPage.tsx | 82 +++++++++++++++++++----
 src/modules/clients/types/Client.types.ts |  9 +++
 src/modules/clients/types/index.ts        |  1 +
 3 files changed, 78 insertions(+), 14 deletions(-)
 create mode 100644 src/modules/clients/types/Client.types.ts
 create mode 100644 src/modules/clients/types/index.ts

diff --git a/src/modules/clients/pages/ClientsPage.tsx b/src/modules/clients/pages/ClientsPage.tsx
index 6ca3210..e8f515a 100644
--- a/src/modules/clients/pages/ClientsPage.tsx
+++ b/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>
     </>
diff --git a/src/modules/clients/types/Client.types.ts b/src/modules/clients/types/Client.types.ts
new file mode 100644
index 0000000..b83d65a
--- /dev/null
+++ b/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;
+}
diff --git a/src/modules/clients/types/index.ts b/src/modules/clients/types/index.ts
new file mode 100644
index 0000000..6666c64
--- /dev/null
+++ b/src/modules/clients/types/index.ts
@@ -0,0 +1 @@
+export type { Client } from "./Client.types";

From e034bdaf17cef1de10f083c702362cc9297154fc Mon Sep 17 00:00:00 2001
From: Renato Teixeira <renato.gfteixeira@outlook.com>
Date: Sun, 29 Mar 2026 23:34:33 -0300
Subject: [PATCH 2/3] feat: add Order type, index export, and initial
 OrdersPage structure with table and actions

---
 src/modules/orders/pages/OrdersPage.tsx | 82 ++++++++++++++++++++-----
 src/modules/orders/types/Order.types.ts |  7 +++
 src/modules/orders/types/index.ts       |  1 +
 3 files changed, 76 insertions(+), 14 deletions(-)
 create mode 100644 src/modules/orders/types/Order.types.ts
 create mode 100644 src/modules/orders/types/index.ts

diff --git a/src/modules/orders/pages/OrdersPage.tsx b/src/modules/orders/pages/OrdersPage.tsx
index eee3729..786a37d 100644
--- a/src/modules/orders/pages/OrdersPage.tsx
+++ b/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>
     </>
diff --git a/src/modules/orders/types/Order.types.ts b/src/modules/orders/types/Order.types.ts
new file mode 100644
index 0000000..5770ec9
--- /dev/null
+++ b/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;
+}
diff --git a/src/modules/orders/types/index.ts b/src/modules/orders/types/index.ts
new file mode 100644
index 0000000..51f65b6
--- /dev/null
+++ b/src/modules/orders/types/index.ts
@@ -0,0 +1 @@
+export type { Order } from "./Order.types";

From 851a9c32e4088bd317df34258467a5f7c7fd4053 Mon Sep 17 00:00:00 2001
From: Renato Teixeira <renato.gfteixeira@outlook.com>
Date: Sun, 29 Mar 2026 23:34:43 -0300
Subject: [PATCH 3/3] feat: add Service type, index export, and initial
 ServicesPage structure with table and actions

---
 src/modules/services/pages/ServicesPage.tsx | 82 +++++++++++++++++----
 src/modules/services/types/Service.types.ts |  8 ++
 src/modules/services/types/index.ts         |  1 +
 3 files changed, 77 insertions(+), 14 deletions(-)
 create mode 100644 src/modules/services/types/Service.types.ts
 create mode 100644 src/modules/services/types/index.ts

diff --git a/src/modules/services/pages/ServicesPage.tsx b/src/modules/services/pages/ServicesPage.tsx
index 454b11b..ec693a7 100644
--- a/src/modules/services/pages/ServicesPage.tsx
+++ b/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>
     </>
diff --git a/src/modules/services/types/Service.types.ts b/src/modules/services/types/Service.types.ts
new file mode 100644
index 0000000..16386b0
--- /dev/null
+++ b/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;
+}
diff --git a/src/modules/services/types/index.ts b/src/modules/services/types/index.ts
new file mode 100644
index 0000000..6e0d59a
--- /dev/null
+++ b/src/modules/services/types/index.ts
@@ -0,0 +1 @@
+export type { Service } from "./Service.types";