Refactor default page structure and fix minor bugs

src/modules/clients/pages/ClientsPage.tsx

@@ -16,6 +16,8 @@ export function ClientsPage() {
   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: "phone", header: "Phone", accessor: (c: Client) => c.phone ?? "—" },
+    { key: "location", header: "Location", accessor: (c: Client) => `${c.city}, ${c.state}` },
     { key: "createdAt", header: "Created At", accessor: (c: Client) => c.createdAt, sortable: true },
   ];
 
@@ -26,26 +28,26 @@ export function ClientsPage() {
       </Helmet>
 
       <SidebarMenu>
-        <main className="min-h-screen">
+        <main className="pt-10 md:pt-0">
           <div className="mx-auto w-full">
-            <div className="mb-12">
-              <h1 className="text-2xl font-semibold tracking-tight">Clients</h1>
+            <div className="mb-12 flex flex-col items-start justify-between gap-8 md:flex-row md:items-end md:gap-16">
+              <div className="flex flex-col gap-2">
+                <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>
+                <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">
+              <div className="w-full md: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
+                  New&nbsp;Client
                 </Button>
               </div>
             </div>

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

@@ -3,6 +3,14 @@ export interface Client {
   firstName: string;
   lastName: string;
   email: string;
+  phone: string;
+  taxId: string;
+  birthDate: string;
+  gender: string;
+  city: string;
+  state: string;
+  address: string;
+  zipCode: string;
   createdAt: string;
   updatedAt: string;
   [key: string]: string;

src/modules/dashboard/pages/DashboardPage.tsx

@@ -69,7 +69,7 @@ export function DashboardPage() {
       </Helmet>
 
       <SidebarMenu>
-        <main className="min-h-screen">
+        <main className="pt-10 md:pt-0">
           <div className="mx-auto w-full">
             <div className="mb-12">
               <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>

src/modules/orders/pages/OrdersPage.tsx

@@ -26,26 +26,26 @@ export function OrdersPage() {
       </Helmet>
 
       <SidebarMenu>
-        <main className="min-h-screen">
+        <main className="pt-10 md:pt-0">
           <div className="mx-auto w-full">
-            <div className="mb-12">
-              <h1 className="text-2xl font-semibold tracking-tight">Orders</h1>
+            <div className="mb-12 flex flex-col items-start justify-between gap-8 md:flex-row md:items-end md:gap-16">
+              <div className="flex flex-col gap-2">
+                <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>
+                <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">
+              <div className="w-full md: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
+                  New&nbsp;Order
                 </Button>
               </div>
             </div>

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

@@ -1,7 +1,22 @@
 export interface Order {
   id: string;
   clientId: string;
+  vendorId: string;
+  status: string;
   createdAt: string;
   updatedAt: string;
+  canceledAt: string;
+  cancelReason: string;
+  subtotal: string;
+  discount: string;
+  total: string;
+  discountCode: string;
+  paymentMethod: string;
+  paymentStatus: string;
+  paymentDueDate: string;
+  invoiceNumber: string;
+  invoiceUrl: string;
+  invoiceIssuedAt: string;
+  invoiceTaxId: string;
   [key: string]: string;
 }

src/modules/services/pages/ServicesPage.tsx

@@ -26,26 +26,26 @@ export function ServicesPage() {
       </Helmet>
 
       <SidebarMenu>
-        <main className="min-h-screen">
+        <main className="pt-10 md:pt-0">
           <div className="mx-auto w-full">
-            <div className="mb-12">
-              <h1 className="text-2xl font-semibold tracking-tight">Services</h1>
+            <div className="mb-12 flex flex-col items-start justify-between gap-8 md:flex-row md:items-end md:gap-16">
+              <div className="flex flex-col gap-2">
+                <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>
+                <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">
+              <div className="w-full md: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
+                  New&nbsp;Service
                 </Button>
               </div>
             </div>

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

@@ -2,7 +2,14 @@ export interface Service {
   id: string;
   name: string;
   description: string;
+  shortDescription: string;
+  imageUrl: string;
   createdAt: string;
   updatedAt: string;
+  price: string;
+  promotionalPrice: string;
+  promotionalPriceStart: string;
+  promotionalPriceEnd: string;
+  status: string;
   [key: string]: string;
 }

src/shared/components/InputField/InputField.styles.ts

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 
 const defaultClasses = clsx(
-  "w-full appearance-none rounded border py-2 leading-tight shadow-xs shadow-border",
-  "transition-all focus:outline-none bg-card"
+  "appearance-none rounded border py-2 leading-tight shadow-xs shadow-border",
+  "transition-all focus:outline-none"
 );
 
 const stateClasses = {
@@ -34,6 +34,6 @@ export function getInputFieldClasses(
     hasLeftAddon ? "pl-10" : "pl-3",
     hasRightAddon ? "pr-10" : "pr-3",
     disabled && disabledClasses,
-    bgTransparent && bgClass
+    !bgTransparent && bgClass
   );
 }

src/shared/components/Table/Table/Table.tsx

@@ -116,8 +116,8 @@ export function Table<T extends TableRow>(props: TableProps<T>) {
         <TableEmpty context={context} emptyState={emptyState} />
       ) : (
         <>
-          <div className="border-border bg-card overflow-x-auto rounded-md border-2">
-            <table className="divide-border min-w-full table-auto divide-y">
+          <div className="border-border bg-card relative overflow-x-auto rounded-md border-2">
+            <table className="divide-border w-full table-auto divide-y">
               <thead>
                 <tr>
                   {columns.map((col) => {

src/shared/components/Table/TableEmpty/TableEmpty.tsx

@@ -1,9 +1,12 @@
+import { MessageSquareX } from "lucide-react";
 import type { TableEmptyProps } from "./TableEmpty.types";
 
 export function TableEmpty({ context, emptyState }: TableEmptyProps) {
   return (
-    <div className="mt-60 flex flex-col items-center gap-4 text-center">
-      <p className="text-muted-foreground text-center font-medium">
+    <div className="text-placeholder mt-40 flex flex-col items-center gap-4 text-center">
+      <MessageSquareX />
+
+      <p className="text-center font-medium">
         {emptyState ?? (context ? `No ${context} found` : "No registers found")}
       </p>
     </div>

src/shared/components/Table/TableHead/TableHead.tsx

@@ -1,4 +1,4 @@
-import { InputField } from "@/shared/components/InputField";
+import clsx from "clsx";
 import type { TableHeadProps } from "./TableHead.types";
 import { SearchIcon } from "lucide-react";
 
@@ -7,19 +7,30 @@ export function TableHead({ searchable, query, pageSize, pageSizeOptions, setQue
     <div className="mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
       <div className="w-full">
         {searchable && (
-          <InputField
-            placeholder={"Search"}
-            label={"Search"}
-            showLabel={false}
-            type={"text"}
-            leftAddon={<SearchIcon />}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
+          <div className="relative w-full">
+            {!query && (
+              <span className="text-placeholder pointer-events-none absolute top-1/2 left-3 -translate-y-1/2">
+                <SearchIcon className="size-6" />
+              </span>
+            )}
+
+            <input
+              type="text"
+              placeholder="Search"
+              className={clsx(
+                "shadow-border bg-card border-input text-foreground block w-full appearance-none rounded border py-2 pr-3",
+                "leading-tight shadow-xs transition-all disabled:cursor-not-allowed disabled:opacity-50",
+                "focus:border-primary focus:ring-ring placeholder:text-placeholder focus:ring focus:outline-none",
+                query ? "pl-3" : "pl-10"
+              )}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </div>
         )}
       </div>
 
-      <div className="flex w-full items-center justify-end gap-2 md:ml-4 md:w-fit">
+      <div className="flex items-center justify-end gap-2 md:ml-4 md:w-fit">
         <label className="text-muted-foreground">Show</label>
 
         <select