feat: enhance dashboard layout and UI components for improved responsiveness

- Introduce new 'xs' screen size in Tailwind configuration for better mobile support
- Update dashboard layout to use a cosmic gradient background for a modern look
- Refactor Quick Actions component for improved styling and layout consistency
- Add Current Open Invoice Card for quick access to ongoing invoices
- Standardize button sizes across various components for a cohesive user experience
- Implement responsive design adjustments in invoice forms and data tables

This update enhances the overall user experience by improving responsiveness and visual appeal across the dashboard and related components.

src/app/dashboard/invoices/[id]/edit/page.tsx

@@ -722,9 +722,10 @@ function InvoiceEditor({ invoiceId }: { invoiceId: string }) {
             variant="outline"
             disabled={isLoading}
             className="border-border/40 hover:bg-accent/50"
+            size="sm"
           >
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Cancel
+            <ArrowLeft className="h-4 w-4 sm:mr-2" />
+            <span className="hidden sm:inline">Cancel</span>
           </Button>
         </Link>
         <Button
@@ -732,25 +733,27 @@ function InvoiceEditor({ invoiceId }: { invoiceId: string }) {
           disabled={isLoading || !isFormValid()}
           variant="outline"
           className="border-border/40 hover:bg-accent/50"
+          size="sm"
         >
           {isLoading ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
           ) : (
-            <Save className="mr-2 h-4 w-4" />
+            <Save className="h-4 w-4 sm:mr-2" />
           )}
-          Save Draft
+          <span className="hidden sm:inline">Save Draft</span>
         </Button>
         <Button
           onClick={handleUpdateInvoice}
           disabled={isLoading || !isFormValid()}
           className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
+          size="sm"
         >
           {isLoading ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
           ) : (
-            <Send className="mr-2 h-4 w-4" />
+            <Send className="h-4 w-4 sm:mr-2" />
           )}
-          Update Invoice
+          <span className="hidden sm:inline">Update Invoice</span>
         </Button>
       </FloatingActionBar>
     </div>

src/app/dashboard/invoices/_components/invoices-data-table.tsx

@@ -79,28 +79,6 @@ const formatCurrency = (amount: number) => {
 };
 
 const columns: ColumnDef<Invoice>[] = [
-  {
-    accessorKey: "invoiceNumber",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Invoice" />
-    ),
-    cell: ({ row }) => {
-      const invoice = row.original;
-      return (
-        <div className="flex items-center gap-3">
-          <div className="bg-status-success-muted hidden rounded-lg p-2 sm:flex">
-            <FileText className="text-status-success h-4 w-4" />
-          </div>
-          <div className="min-w-0">
-            <p className="truncate font-medium">{invoice.invoiceNumber}</p>
-            <p className="text-muted-foreground truncate text-sm">
-              {invoice.items?.length || 0} items
-            </p>
-          </div>
-        </div>
-      );
-    },
-  },
   {
     accessorKey: "client.name",
     header: ({ column }) => (
@@ -109,10 +87,10 @@ const columns: ColumnDef<Invoice>[] = [
     cell: ({ row }) => {
       const invoice = row.original;
       return (
-        <div className="min-w-0">
-          <p className="truncate font-medium">{invoice.client?.name || "—"}</p>
-          <p className="text-muted-foreground truncate text-sm">
-            {invoice.client?.email || "—"}
+        <div className="min-w-0 max-w-[80px] sm:max-w-[200px] lg:max-w-[300px]">
+          <p className="truncate font-medium">{invoice.client?.name ?? "—"}</p>
+          <p className="text-muted-foreground truncate text-xs sm:text-sm">
+            {invoice.invoiceNumber}
           </p>
         </div>
       );
@@ -121,33 +99,18 @@ const columns: ColumnDef<Invoice>[] = [
   {
     accessorKey: "issueDate",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Issue Date" />
-    ),
-    cell: ({ row }) => formatDate(row.getValue("issueDate")),
-    meta: {
-      headerClassName: "hidden md:table-cell",
-      cellClassName: "hidden md:table-cell",
-    },
-  },
-  {
-    accessorKey: "dueDate",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Due Date" />
-    ),
-    cell: ({ row }) => formatDate(row.getValue("dueDate")),
-    meta: {
-      headerClassName: "hidden lg:table-cell",
-      cellClassName: "hidden lg:table-cell",
-    },
-  },
-  {
-    accessorKey: "totalAmount",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Amount" />
+      <DataTableColumnHeader column={column} title="Date" />
     ),
     cell: ({ row }) => {
-      const amount = row.getValue("totalAmount") as number;
-      return <p className="font-semibold">{formatCurrency(amount)}</p>;
+      const date = row.getValue("issueDate") as Date;
+      return (
+        <div className="min-w-0">
+          <p className="truncate text-sm">{formatDate(date)}</p>
+          <p className="text-muted-foreground truncate text-xs">
+            Due {formatDate(new Date(row.original.dueDate))}
+          </p>
+        </div>
+      );
     },
   },
   {
@@ -164,6 +127,31 @@ const columns: ColumnDef<Invoice>[] = [
       const status = getStatusType(invoice);
       return value.includes(status);
     },
+    meta: {
+      headerClassName: "hidden xs:table-cell",
+      cellClassName: "hidden xs:table-cell",
+    },
+  },
+  {
+    accessorKey: "totalAmount",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Amount" />
+    ),
+    cell: ({ row }) => {
+      const amount = row.getValue("totalAmount") as number;
+      return (
+        <div className="text-right">
+          <p className="font-semibold text-sm">{formatCurrency(amount)}</p>
+          <p className="text-muted-foreground text-xs">
+            {row.original.items?.length ?? 0} items
+          </p>
+        </div>
+      );
+    },
+    meta: {
+      headerClassName: "hidden xs:table-cell",
+      cellClassName: "hidden xs:table-cell",
+    },
   },
   {
     id: "actions",

src/app/dashboard/invoices/new/page.tsx

@@ -704,9 +704,10 @@ export default function NewInvoicePage() {
             variant="outline"
             disabled={isLoading}
             className="border-border/40 hover:bg-accent/50"
+            size="sm"
           >
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Cancel
+            <ArrowLeft className="h-4 w-4 sm:mr-2" />
+            <span className="hidden sm:inline">Cancel</span>
           </Button>
         </Link>
         <Button
@@ -714,25 +715,27 @@ export default function NewInvoicePage() {
           disabled={isLoading || !isFormValid()}
           variant="outline"
           className="border-border/40 hover:bg-accent/50"
+          size="sm"
         >
           {isLoading ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
           ) : (
-            <Save className="mr-2 h-4 w-4" />
+            <Save className="h-4 w-4 sm:mr-2" />
           )}
-          Save Draft
+          <span className="hidden sm:inline">Save Draft</span>
         </Button>
         <Button
           onClick={handleCreateInvoice}
           disabled={isLoading || !isFormValid()}
           className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
+          size="sm"
         >
           {isLoading ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
           ) : (
-            <Send className="mr-2 h-4 w-4" />
+            <Send className="h-4 w-4 sm:mr-2" />
           )}
-          Create Invoice
+          <span className="hidden sm:inline">Create Invoice</span>
         </Button>
       </FloatingActionBar>
     </div>