@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.1

package/src/movethewheels/pages/ImportExportPage.tsx

@@ -1,68 +1,151 @@
 /**
  * Import/Export Page
+ *
+ * Bulk data in/out wired to the backend exportData / importData mutations.
+ * Activity is session-local (reflects actions the operator actually ran) — no
+ * fabricated history is shown; the empty state renders until something happens.
  */
 
-import { Upload, Download, FileText, FileSpreadsheet, Check } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { Upload, Download, FileText, FileSpreadsheet, Check, X } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
 import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { useImportExport } from '../hooks/useImportExport';
+
+interface ImportOption {
+  name: string;
+  description: string;
+  resource: string;
+}
+
+interface ExportOption {
+  name: string;
+  description: string;
+  resource: string;
+  formats: string[];
+}
+
+interface ActivityEntry {
+  type: 'import' | 'export';
+  name: string;
+  at: Date;
+  success: boolean;
+  message: string;
+}
+
+const importOptions: ImportOption[] = [
+  { name: 'Orders', description: 'Import orders from CSV or JSON', resource: 'orders' },
+  { name: 'Customers', description: 'Import customer database', resource: 'customers' },
+  { name: 'Products', description: 'Import product catalog', resource: 'products' },
+  { name: 'Inventory', description: 'Import inventory levels', resource: 'inventory' },
+];
+
+const exportOptions: ExportOption[] = [
+  {
+    name: 'Orders Report',
+    description: 'Export all orders data',
+    resource: 'orders',
+    formats: ['CSV', 'JSON'],
+  },
+  {
+    name: 'Financial Report',
+    description: 'Export revenue and payments',
+    resource: 'finance',
+    formats: ['CSV', 'JSON'],
+  },
+  {
+    name: 'Fleet Report',
+    description: 'Export vehicle and driver data',
+    resource: 'fleet',
+    formats: ['CSV', 'JSON'],
+  },
+  {
+    name: 'Analytics Report',
+    description: 'Export performance metrics',
+    resource: 'analytics',
+    formats: ['CSV', 'JSON'],
+  },
+];
 
 export default function ImportExportPage() {
-  const importOptions = [
-    {
-      name: 'Orders',
-      description: 'Import orders from CSV or Excel',
-      icon: FileSpreadsheet,
-      format: 'CSV, XLSX',
-    },
-    {
-      name: 'Customers',
-      description: 'Import customer database',
-      icon: FileSpreadsheet,
-      format: 'CSV, XLSX',
-    },
-    {
-      name: 'Products',
-      description: 'Import product catalog',
-      icon: FileSpreadsheet,
-      format: 'CSV, XLSX',
-    },
-    {
-      name: 'Inventory',
-      description: 'Import inventory levels',
-      icon: FileSpreadsheet,
-      format: 'CSV, XLSX',
-    },
-  ];
-
-  const exportOptions = [
-    {
-      name: 'Orders Report',
-      description: 'Export all orders data',
-      formats: ['CSV', 'Excel', 'PDF'],
-    },
-    {
-      name: 'Financial Report',
-      description: 'Export revenue and payments',
-      formats: ['CSV', 'Excel', 'PDF'],
-    },
-    {
-      name: 'Fleet Report',
-      description: 'Export vehicle and driver data',
-      formats: ['CSV', 'Excel'],
-    },
-    {
-      name: 'Analytics Report',
-      description: 'Export performance metrics',
-      formats: ['CSV', 'Excel', 'PDF'],
-    },
-  ];
-
-  const recentActivity = [
-    { type: 'export', name: 'Orders Report', date: '2024-01-15', status: 'completed' },
-    { type: 'import', name: 'Customer Data', date: '2024-01-14', status: 'completed' },
-    { type: 'export', name: 'Financial Report', date: '2024-01-13', status: 'completed' },
-  ];
+  const { exportData, importData, isBusy } = useImportExport();
+  const [activity, setActivity] = useState<ActivityEntry[]>([]);
+  const [pendingResource, setPendingResource] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const importTargetRef = useRef<ImportOption | null>(null);
+
+  const record = (entry: ActivityEntry) => setActivity((previous) => [entry, ...previous]);
+
+  const handleExport = async (option: ExportOption, format: string) => {
+    setPendingResource(`${option.resource}:${format}`);
+    try {
+      const result = await exportData(option.resource, format);
+      if (result.success && result.payload) {
+        const contents = JSON.stringify(result.payload, null, 2);
+        const blob = new Blob([contents], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${option.resource}-export.${format.toLowerCase() === 'csv' ? 'csv' : 'json'}`;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(url);
+      }
+      record({
+        type: 'export',
+        name: `${option.name} (${format})`,
+        at: new Date(),
+        success: result.success,
+        message: result.message,
+      });
+    } catch (exportError) {
+      record({
+        type: 'export',
+        name: `${option.name} (${format})`,
+        at: new Date(),
+        success: false,
+        message: exportError instanceof Error ? exportError.message : 'Export failed',
+      });
+    } finally {
+      setPendingResource(null);
+    }
+  };
+
+  const triggerImport = (option: ImportOption) => {
+    importTargetRef.current = option;
+    fileInputRef.current?.click();
+  };
+
+  const handleFileSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    const option = importTargetRef.current;
+    event.target.value = '';
+    if (!file || !option) return;
+    setPendingResource(`import:${option.resource}`);
+    try {
+      const content = await file.text();
+      const result = await importData(option.resource, { filename: file.name, content });
+      record({
+        type: 'import',
+        name: `${option.name} — ${file.name}`,
+        at: new Date(),
+        success: result.success,
+        message: result.message,
+      });
+    } catch (importError) {
+      record({
+        type: 'import',
+        name: `${option.name} — ${file.name}`,
+        at: new Date(),
+        success: false,
+        message: importError instanceof Error ? importError.message : 'Import failed',
+      });
+    } finally {
+      setPendingResource(null);
+    }
+  };
 
   return (
     <PageLayout
@@ -71,11 +154,19 @@ export default function ImportExportPage() {
       icon={<FileText size={24} />}
     >
       <PagePurpose icon={<FileText size={18} />}>
-        Move data in and out in bulk. Import orders, customers, products or inventory from CSV/Excel
+        Move data in and out in bulk. Import orders, customers, products or inventory from CSV/JSON
         to onboard or migrate without re-keying, and export any dataset for accounting, BI tools or
         backups — no manual copy-paste required.
       </PagePurpose>
 
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".csv,.json,application/json,text/csv"
+        className="hidden"
+        onChange={handleFileSelected}
+      />
+
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Import Data — the page's single emphasis zone */}
         <EmphasisPanel className="space-y-4">
@@ -90,7 +181,7 @@ export default function ImportExportPage() {
               >
                 <div className="flex items-center gap-3">
                   <div className="w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center">
-                    <opt.icon size={20} className="text-primary" />
+                    <FileSpreadsheet size={20} className="text-primary" />
                   </div>
                   <div>
                     <p className="font-medium">{opt.name}</p>
@@ -98,8 +189,15 @@ export default function ImportExportPage() {
                   </div>
                 </div>
                 <div className="text-right">
-                  <Badge variant="outline">{opt.format}</Badge>
-                  <Button variant="outline" size="sm" className="ml-2">
+                  <Badge variant="outline">CSV, JSON</Badge>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="ml-2"
+                    aria-label={`Import ${opt.name}`}
+                    disabled={isBusy}
+                    onClick={() => triggerImport(opt)}
+                  >
                     <Upload size={14} />
                   </Button>
                 </div>
@@ -126,7 +224,13 @@ export default function ImportExportPage() {
                 </div>
                 <div className="flex gap-1">
                   {opt.formats.map((f) => (
-                    <Button key={f} variant="outline" size="sm">
+                    <Button
+                      key={f}
+                      variant="outline"
+                      size="sm"
+                      disabled={pendingResource === `${opt.resource}:${f}`}
+                      onClick={() => void handleExport(opt, f)}
+                    >
                       {f}
                     </Button>
                   ))}
@@ -142,7 +246,7 @@ export default function ImportExportPage() {
           <CardTitle>Recent Activity</CardTitle>
         </CardHeader>
         <CardContent>
-          {recentActivity.length === 0 ? (
+          {activity.length === 0 ? (
             <IllustratedEmptyState
               illustration="empty-data"
               title="No import or export activity yet"
@@ -150,26 +254,28 @@ export default function ImportExportPage() {
             />
           ) : (
             <div className="space-y-3">
-              {recentActivity.map((activity, i) => (
+              {activity.map((entry, i) => (
                 <div
                   key={i}
                   className="flex items-center justify-between p-3 bg-bg-sunken/50 rounded-lg"
                 >
                   <div className="flex items-center gap-3">
-                    {activity.type === 'import' ? (
+                    {entry.type === 'import' ? (
                       <Upload size={16} className="text-primary" />
                     ) : (
                       <Download size={16} className="text-primary" />
                     )}
                     <div>
-                      <p className="font-medium">{activity.name}</p>
+                      <p className="font-medium">{entry.name}</p>
                       <p className="text-sm text-text-secondary">
-                        {activity.type === 'import' ? 'Imported' : 'Exported'} on {activity.date}
+                        {entry.type === 'import' ? 'Imported' : 'Exported'} at{' '}
+                        {entry.at.toLocaleTimeString()} — {entry.message}
                       </p>
                     </div>
                   </div>
-                  <Badge variant="default" className="gap-1">
-                    <Check size={12} /> {activity.status}
+                  <Badge variant={entry.success ? 'default' : 'destructive'} className="gap-1">
+                    {entry.success ? <Check size={12} /> : <X size={12} />}
+                    {entry.success ? 'done' : 'failed'}
                   </Badge>
                 </div>
               ))}

package/src/movethewheels/pages/InventoryPage.tsx

@@ -4,7 +4,7 @@
 
 import { Package, Warehouse, AlertTriangle, ChevronRight, Plus } from 'lucide-react';
 import { PageLayout, PageSection } from '../components/PageLayout';
-import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
 import { Card, CardContent, Button, Badge, Progress } from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useInventory, useInventoryStats } from '../hooks/useInventory';
@@ -20,10 +20,16 @@ export default function InventoryPage() {
     return value === key ? fallback : value;
   };
   const { basePath, navigate } = useMoveTheWheels();
-  const { inventory, products, warehouses } = useInventory();
+  const { inventory, products, warehouses, isLoading, error, refetch } = useInventory();
   const { stats } = useInventoryStats();
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
+  const onRowKeyDown = (e: React.KeyboardEvent, action: () => void) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      action();
+    }
+  };
   const lowStockItems = inventory.filter((inv) => inv.availableQuantity <= inv.reorderLevel);
 
   return (
@@ -58,30 +64,50 @@ export default function InventoryPage() {
         )}
       </PagePurpose>
 
-      <MetricGrid columns={4}>
-        <MetricCard
-          label={t('movethewheels.inventory.metrics.totalProducts', 'Total Products')}
-          value={stats.totalProducts}
-          icon={<Package size={20} />}
-          onClick={() => goTo('inventory/products')}
-        />
-        <MetricCard
-          label={t('movethewheels.inventory.metrics.totalItems', 'Total Items')}
-          value={stats.totalItems.toLocaleString()}
-          icon={<Package size={20} />}
-        />
-        <MetricCard
-          label={t('movethewheels.inventory.metrics.inventoryValue', 'Inventory Value')}
-          value={formatCurrency(stats.totalValue)}
-          icon={<Package size={20} />}
-        />
-        <MetricCard
-          label={t('movethewheels.inventory.metrics.warehouses', 'Warehouses')}
-          value={stats.totalWarehouses}
-          icon={<Warehouse size={20} />}
-          onClick={() => goTo('inventory/warehouses')}
-        />
-      </MetricGrid>
+      {error && !isLoading ? (
+        <Card className="border-status-error-border">
+          <CardContent className="p-6 text-center space-y-3">
+            <p className="text-status-error-text font-medium">
+              {t('movethewheels.inventory.error.title', "Couldn't load inventory")}
+            </p>
+            <p className="text-sm text-text-secondary">{error.message}</p>
+            <Button variant="outline" onClick={refetch}>
+              {t('movethewheels.inventory.error.retry', 'Retry')}
+            </Button>
+          </CardContent>
+        </Card>
+      ) : isLoading ? (
+        <MetricGrid columns={4}>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <MetricCardSkeleton key={i} />
+          ))}
+        </MetricGrid>
+      ) : (
+        <MetricGrid columns={4}>
+          <MetricCard
+            label={t('movethewheels.inventory.metrics.totalProducts', 'Total Products')}
+            value={stats.totalProducts}
+            icon={<Package size={20} />}
+            onClick={() => goTo('inventory/products')}
+          />
+          <MetricCard
+            label={t('movethewheels.inventory.metrics.totalItems', 'Total Items')}
+            value={stats.totalItems.toLocaleString()}
+            icon={<Package size={20} />}
+          />
+          <MetricCard
+            label={t('movethewheels.inventory.metrics.inventoryValue', 'Inventory Value')}
+            value={formatCurrency(stats.totalValue)}
+            icon={<Package size={20} />}
+          />
+          <MetricCard
+            label={t('movethewheels.inventory.metrics.warehouses', 'Warehouses')}
+            value={stats.totalWarehouses}
+            icon={<Warehouse size={20} />}
+            onClick={() => goTo('inventory/warehouses')}
+          />
+        </MetricGrid>
+      )}
 
       {lowStockItems.length > 0 && (
         <EmphasisPanel className="space-y-4">
@@ -141,8 +167,14 @@ export default function InventoryPage() {
                 {warehouses.map((warehouse) => (
                   <div
                     key={warehouse.id}
-                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer"
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`View warehouse ${warehouse.name}`}
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg"
                     onClick={() => goTo(`inventory/warehouses/${warehouse.id}`)}
+                    onKeyDown={(e) =>
+                      onRowKeyDown(e, () => goTo(`inventory/warehouses/${warehouse.id}`))
+                    }
                   >
                     <div className="flex items-center justify-between">
                       <div>
@@ -191,8 +223,14 @@ export default function InventoryPage() {
                 {products.slice(0, 5).map((product) => (
                   <div
                     key={product.id}
-                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer"
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`View product ${product.name}`}
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg"
                     onClick={() => goTo(`inventory/products/${product.id}`)}
+                    onKeyDown={(e) =>
+                      onRowKeyDown(e, () => goTo(`inventory/products/${product.id}`))
+                    }
                   >
                     <div className="flex items-center justify-between">
                       <div>

package/src/movethewheels/pages/LiveTrackingPage.tsx

@@ -166,10 +166,19 @@ export default function LiveTrackingPage() {
                       return (
                         <div
                           key={delivery.order.id}
-                          className={`p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors ${
+                          role="button"
+                          tabIndex={0}
+                          aria-label={`Select delivery ${delivery.order.orderNumber}`}
+                          className={`p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg ${
                             selectedDelivery === delivery.order.id ? 'bg-bg-sunken/50' : ''
                           }`}
                           onClick={() => setSelectedDelivery(delivery.order.id)}
+                          onKeyDown={(e) => {
+                            if ((e.key === 'Enter' || e.key === ' ') && delivery.order) {
+                              e.preventDefault();
+                              setSelectedDelivery(delivery.order.id);
+                            }
+                          }}
                         >
                           <div className="flex items-start justify-between">
                             <div>
@@ -317,8 +326,8 @@ export default function LiveTrackingPage() {
                       key={alert.id}
                       className={`p-3 rounded-lg text-sm ${
                         alert.severity === 'critical' || alert.severity === 'high'
-                          ? 'bg-red-50 dark:bg-red-900/20'
-                          : 'bg-yellow-50 dark:bg-yellow-900/20'
+                          ? 'bg-status-error-bg-subtle'
+                          : 'bg-status-warning-bg-subtle'
                       }`}
                     >
                       <p className="font-medium">{alert.message}</p>

package/src/movethewheels/pages/MarketplacePage.tsx

@@ -5,7 +5,16 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Store, Star, MapPin, Clock, Filter, Search } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
-import { Card, CardContent, CardHeader, CardTitle, Button, Badge, Input } from '../components/ui';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Input,
+  Skeleton,
+} from '../components/ui';
 import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
@@ -83,6 +92,8 @@ export default function MarketplacePage() {
   const [providers, setProviders] = useState<ApiServiceProvider[]>([]);
   const [offerings, setOfferings] = useState<ApiServiceOffering[]>([]);
   const [search, setSearch] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
 
   const graphQLOptions = useMemo(
     () => ({
@@ -97,17 +108,31 @@ export default function MarketplacePage() {
   );
 
   const load = useCallback(async () => {
-    const [providersData, offeringsData] = await Promise.all([
-      executeGraphQL<{ serviceProviders: ApiServiceProvider[] }>(graphQLOptions, PROVIDERS_QUERY, {
-        pagination: { limit: 200, offset: 0 },
-      }),
-      executeGraphQL<{ serviceOfferings: ApiServiceOffering[] }>(graphQLOptions, OFFERINGS_QUERY, {
-        pagination: { limit: 200, offset: 0 },
-      }),
-    ]);
+    setIsLoading(true);
+    setError(null);
+    try {
+      const [providersData, offeringsData] = await Promise.all([
+        executeGraphQL<{ serviceProviders: ApiServiceProvider[] }>(
+          graphQLOptions,
+          PROVIDERS_QUERY,
+          { pagination: { limit: 200, offset: 0 } }
+        ),
+        executeGraphQL<{ serviceOfferings: ApiServiceOffering[] }>(
+          graphQLOptions,
+          OFFERINGS_QUERY,
+          {
+            pagination: { limit: 200, offset: 0 },
+          }
+        ),
+      ]);
 
-    setProviders(providersData.serviceProviders);
-    setOfferings(offeringsData.serviceOfferings);
+      setProviders(providersData.serviceProviders);
+      setOfferings(offeringsData.serviceOfferings);
+    } catch (fetchError) {
+      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load marketplace'));
+    } finally {
+      setIsLoading(false);
+    }
   }, [graphQLOptions]);
 
   useEffect(() => {
@@ -173,7 +198,22 @@ export default function MarketplacePage() {
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-4">
           <h3 className="font-semibold">Service Providers ({filteredProviders.length})</h3>
-          {filteredProviders.length === 0 && (
+          {error && !isLoading && (
+            <Card className="border-status-error-border">
+              <CardContent className="p-6 text-center space-y-3">
+                <p className="text-status-error-text font-medium">Couldn&apos;t load providers</p>
+                <p className="text-sm text-text-secondary">{error.message}</p>
+                <Button variant="outline" onClick={() => void load()}>
+                  Retry
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+          {isLoading &&
+            Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton key={i} className="h-32 w-full rounded-lg" />
+            ))}
+          {!isLoading && !error && filteredProviders.length === 0 && (
             <Card>
               <CardContent className="p-0">
                 <IllustratedEmptyState
@@ -188,42 +228,44 @@ export default function MarketplacePage() {
               </CardContent>
             </Card>
           )}
-          {filteredProviders.map((provider) => (
-            <Card key={provider.id} className="hover:shadow-md transition-shadow cursor-pointer">
-              <CardContent className="p-6">
-                <div className="flex items-start justify-between">
-                  <div>
-                    <div className="flex items-center gap-2">
-                      <h4 className="font-semibold text-lg">{provider.name}</h4>
-                      {provider.isVerified && <Badge variant="default">Verified</Badge>}
-                      <Badge variant={provider.isActive ? 'default' : 'secondary'}>
-                        {provider.isActive ? 'active' : 'inactive'}
-                      </Badge>
+          {!isLoading &&
+            !error &&
+            filteredProviders.map((provider) => (
+              <Card key={provider.id} className="hover:shadow-md transition-shadow">
+                <CardContent className="p-6">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <h4 className="font-semibold text-lg">{provider.name}</h4>
+                        {provider.isVerified && <Badge variant="default">Verified</Badge>}
+                        <Badge variant={provider.isActive ? 'default' : 'secondary'}>
+                          {provider.isActive ? 'active' : 'inactive'}
+                        </Badge>
+                      </div>
+                      <p className="text-text-secondary mt-1">{provider.description}</p>
+                      <div className="flex items-center gap-4 mt-3 text-sm text-text-secondary">
+                        <span className="flex items-center gap-1">
+                          <Star size={14} className="text-status-warning-text fill-current" />{' '}
+                          {provider.rating ?? 0}
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <MapPin size={14} /> {provider.type}
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <Clock size={14} /> Listed
+                        </span>
+                      </div>
                     </div>
-                    <p className="text-text-secondary mt-1">{provider.description}</p>
-                    <div className="flex items-center gap-4 mt-3 text-sm text-text-secondary">
-                      <span className="flex items-center gap-1">
-                        <Star size={14} className="text-yellow-500 fill-yellow-500" />{' '}
-                        {provider.rating ?? 0}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <MapPin size={14} /> {provider.type}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <Clock size={14} /> Listed
-                      </span>
+                    <div className="text-right">
+                      <p className="text-sm text-text-secondary">Services</p>
+                      <p className="text-lg font-bold">
+                        {Array.isArray(provider.services) ? provider.services.length : 0}
+                      </p>
                     </div>
                   </div>
-                  <div className="text-right">
-                    <p className="text-sm text-text-secondary">Services</p>
-                    <p className="text-lg font-bold">
-                      {Array.isArray(provider.services) ? provider.services.length : 0}
-                    </p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
+                </CardContent>
+              </Card>
+            ))}
         </div>
 
         {/* Popular Services — the page's single emphasis zone */}