export with one error

frontend-web/src/pages/ClientDashboard.jsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useMemo, useEffect } from "react";
 import { base44 } from "@/api/base44Client";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
@@ -140,6 +139,13 @@ const AVAILABLE_WIDGETS = [
     description: 'Browse vendor marketplace',
     category: 'Actions',
     categoryColor: 'bg-blue-100 text-blue-700',
+  },
+  {
+    id: 'invoices',
+    title: 'Invoices',
+    description: 'View and manage invoices',
+    category: 'Actions',
+    categoryColor: 'bg-blue-100 text-blue-700',
   }
 ];
 
@@ -953,6 +959,19 @@ export default function ClientDashboard() {
     </Link>
   );
 
+  const renderInvoices = () => (
+    <Link to={createPageUrl("Invoices")}>
+      <Card className="bg-white border-2 border-slate-900 shadow-md hover:shadow-lg transition-all cursor-pointer group">
+        <CardContent className="p-5 text-center">
+          <div className="w-12 h-12 mx-auto mb-3 bg-slate-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
+            <FileText className="w-6 h-6 text-white" />
+          </div>
+          <p className="text-slate-900 font-bold text-base">Invoices</p>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+
   const renderWidget = (widgetId) => {
     switch (widgetId) {
       case 'order-now':
@@ -973,6 +992,8 @@ export default function ClientDashboard() {
         return renderSalesAnalytics();
       case 'vendor-marketplace':
         return renderVendorMarketplace();
+      case 'invoices':
+        return renderInvoices();
       default:
         return null;
     }
@@ -982,8 +1003,13 @@ export default function ClientDashboard() {
   const availableToAdd = AVAILABLE_WIDGETS.filter(w => hiddenWidgets.includes(w.id));
 
   const quickActionWidgets = ['order-now', 'rapid-order', 'today-count', 'in-progress', 'needs-attention'];
+  const gridPairWidgets = ['vendor-marketplace', 'invoices'];
   const visibleQuickActions = visibleWidgetIds.filter(id => quickActionWidgets.includes(id));
   const visibleOtherWidgets = visibleWidgetIds.filter(id => !quickActionWidgets.includes(id));
+  
+  // Group grid pair widgets together
+  const gridPairVisible = visibleOtherWidgets.filter(id => gridPairWidgets.includes(id));
+  const otherWidgetsFullWidth = visibleOtherWidgets.filter(id => !gridPairWidgets.includes(id));
 
   return (
     <div className="min-h-screen bg-slate-50 p-6">
@@ -1106,7 +1132,7 @@ export default function ClientDashboard() {
                 ref={provided.innerRef}
                 className="space-y-6"
               >
-                {visibleOtherWidgets.map((widgetId, index) => (
+                {otherWidgetsFullWidth.map((widgetId, index) => (
                   <Draggable
                     key={widgetId}
                     draggableId={widgetId}
@@ -1142,6 +1168,28 @@ export default function ClientDashboard() {
                     )}
                   </Draggable>
                 ))}
+                
+                {gridPairVisible.length > 0 && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {gridPairVisible.map((widgetId) => (
+                      <div key={widgetId} className="relative group">
+                        {isCustomizing && (
+                          <button
+                            onClick={() => handleRemoveWidget(widgetId)}
+                            className="absolute -top-2 -left-2 w-6 h-6 bg-slate-500 hover:bg-slate-600 rounded-full flex items-center justify-center shadow-lg z-20 transition-all hover:scale-110"
+                            title="Remove widget"
+                          >
+                            <Minus className="w-3.5 h-3.5 text-white" />
+                          </button>
+                        )}
+                        <div className={isCustomizing ? 'ring-2 ring-slate-300 rounded-lg' : ''}>
+                          {renderWidget(widgetId)}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                
                 {provided.placeholder}
               </div>
             )}
@@ -1222,4 +1270,4 @@ export default function ClientDashboard() {
       </Dialog>
     </div>
   );
-}
+}