@burdenoff/microfe-movethewheels 2026.625.1 → 2026.626.2

package/src/movethewheels/pages/CustomersPage.tsx

@@ -6,8 +6,8 @@ import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { TypeBadge } from '../components/StatusBadge';
-import { Badge, Avatar, AvatarFallback } from '../components/ui';
-import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
+import { Badge, Avatar, AvatarFallback, Button } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useCustomers } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -101,6 +101,35 @@ export default function CustomersPage() {
         />
       }
     >
+      <PagePurpose icon={<Users size={18} />}>
+        The businesses and individuals you deliver for. Keep contact details, locations and
+        satisfaction ratings here, and open a customer to see their order history before booking the
+        next shipment.
+      </PagePurpose>
+
+      {/* Customer base at a glance — the page's single emphasis zone */}
+      <EmphasisPanel>
+        <p className="text-sm font-medium text-text-secondary">Customer base at a glance</p>
+        <div className="mt-3 grid grid-cols-3 gap-4">
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalCustomers}</p>
+            <p className="text-xs text-text-secondary">Total customers</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {customers.filter((c) => c.isActive).length}
+            </p>
+            <p className="text-xs text-text-secondary">Active</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {customers.filter((c) => c.type === 'b2b').length}
+            </p>
+            <p className="text-xs text-text-secondary">Business accounts</p>
+          </div>
+        </div>
+      </EmphasisPanel>
+
       <DataTable
         columns={columns}
         data={customers}
@@ -110,6 +139,15 @@ export default function CustomersPage() {
         searchFields={['name', 'email', 'company'] as (keyof Customer)[]}
         onRowClick={(row) => goTo(`customers/${row.id}`)}
         getRowId={(row) => row.id}
+        emptyIllustration="empty-people"
+        emptyTitle="No customers yet"
+        emptyDescription="Add your first customer to start booking deliveries for them."
+        emptyAction={
+          <Button onClick={() => goTo('customers/new')}>
+            <Plus size={16} className="mr-1.5" />
+            Add Customer
+          </Button>
+        }
       />
     </PageLayout>
   );

package/src/movethewheels/pages/DashboardPage.tsx

@@ -27,7 +27,7 @@ import {
   Badge,
   Progress,
 } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useDashboardMetrics } from '../hooks/useAnalytics';
 import { useOrders, useOrderStats } from '../hooks/useOrders';
 import { useFleetStats } from '../hooks/useFleet';
@@ -80,6 +80,13 @@ export default function DashboardPage() {
         />
       }
     >
+      <PagePurpose icon={<TrendingUp size={18} />}>
+        {t(
+          'movethewheels.dashboard.purpose',
+          'Your logistics command center — a live snapshot of orders, active deliveries, fleet health and revenue. Start here each day to spot what needs attention, then jump straight into an order, the live map or fleet status.'
+        )}
+      </PagePurpose>
+
       {/* Key Metrics */}
       <MetricGrid columns={4}>
         <MetricCard

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -15,6 +15,7 @@ import {
   Badge,
   Progress,
 } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useDriver } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
@@ -26,6 +27,7 @@ export default function DriverDetailsPage() {
   const { driver, isLoading, error, refetch } = useDriver(driverId);
 
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (isLoading) return <LoadingState message="Loading driver details..." />;
   if (error || !driver) return <ErrorState title="Driver not found" onRetry={refetch} />;
@@ -56,35 +58,64 @@ export default function DriverDetailsPage() {
         </div>
       }
     >
+      <PagePurpose icon={<Users size={18} />}>
+        A driver&apos;s full profile — performance ratings, working hours, documents, earnings and
+        live location. Use it to confirm someone is road-ready and compliant before assigning them
+        an order or route.
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-driver-details"
+        steps={[
+          {
+            id: 'assign',
+            label: 'Assign to an order',
+            description: 'Hand a pending delivery to this driver.',
+            icon: <MapPin size={16} />,
+            onClick: () => goTo('orders'),
+          },
+          {
+            id: 'routes',
+            label: 'Plan their route',
+            description: 'Batch nearby drop-offs into an optimized itinerary.',
+            icon: <Clock size={16} />,
+            onClick: () => goTo('routes'),
+          },
+          {
+            id: 'edit',
+            label: 'Update driver record',
+            description: 'Refresh documents, shift or compliance details.',
+            icon: <Edit size={16} />,
+            onClick: () => {},
+          },
+        ]}
+      />
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
-          {/* Ratings */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Star size={18} /> Ratings
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-                {[
-                  { label: 'Punctuality', value: driver.ratings.punctuality },
-                  { label: 'Communication', value: driver.ratings.communication },
-                  { label: 'Handling', value: driver.ratings.carefulHandling },
-                  { label: 'Professionalism', value: driver.ratings.professionalism },
-                  { label: 'On-Time Delivery', value: driver.ratings.onTimeDelivery },
-                ].map((rating) => (
-                  <div key={rating.label}>
-                    <p className="text-sm text-text-secondary">{rating.label}</p>
-                    <div className="flex items-center gap-2 mt-1">
-                      <Progress value={rating.value * 20} className="flex-1 h-2" />
-                      <span className="text-sm font-medium">{rating.value.toFixed(1)}</span>
-                    </div>
+          {/* Ratings — the page's single emphasis zone */}
+          <EmphasisPanel>
+            <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary mb-4">
+              <Star size={18} /> Ratings
+            </h2>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              {[
+                { label: 'Punctuality', value: driver.ratings.punctuality },
+                { label: 'Communication', value: driver.ratings.communication },
+                { label: 'Handling', value: driver.ratings.carefulHandling },
+                { label: 'Professionalism', value: driver.ratings.professionalism },
+                { label: 'On-Time Delivery', value: driver.ratings.onTimeDelivery },
+              ].map((rating) => (
+                <div key={rating.label}>
+                  <p className="text-sm text-text-secondary">{rating.label}</p>
+                  <div className="flex items-center gap-2 mt-1">
+                    <Progress value={rating.value * 20} className="flex-1 h-2" />
+                    <span className="text-sm font-medium">{rating.value.toFixed(1)}</span>
                   </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
+                </div>
+              ))}
+            </div>
+          </EmphasisPanel>
 
           {/* Working Hours */}
           <Card>

package/src/movethewheels/pages/DriversPage.tsx

@@ -7,7 +7,7 @@ import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
 import { Avatar, AvatarFallback } from '../components/ui';
-import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useDrivers } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -100,6 +100,39 @@ export default function DriversPage() {
         />
       }
     >
+      <PagePurpose icon={<Users size={18} />}>
+        Your delivery workforce. Track each driver&apos;s availability, performance rating,
+        completed deliveries and license status here — open a driver to review their history before
+        assigning them to an order or route.
+      </PagePurpose>
+
+      {/* Workforce at a glance — the page's single emphasis zone */}
+      <EmphasisPanel>
+        <p className="text-sm font-medium text-text-secondary">Workforce at a glance</p>
+        <div className="mt-3 grid grid-cols-3 gap-4">
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalDrivers}</p>
+            <p className="text-xs text-text-secondary">Total drivers</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {drivers.filter((d) => d.status === 'available' || d.status === 'busy').length}
+            </p>
+            <p className="text-xs text-text-secondary">On duty / available</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {drivers.length > 0
+                ? (drivers.reduce((sum, d) => sum + d.ratings.overall, 0) / drivers.length).toFixed(
+                    1
+                  )
+                : '—'}
+            </p>
+            <p className="text-xs text-text-secondary">Avg rating</p>
+          </div>
+        </div>
+      </EmphasisPanel>
+
       <DataTable
         columns={columns}
         data={drivers}
@@ -109,6 +142,9 @@ export default function DriversPage() {
         searchFields={['fullName', 'employeeId'] as (keyof Driver)[]}
         onRowClick={(row) => goTo(`fleet/drivers/${row.id}`)}
         getRowId={(row) => row.id}
+        emptyIllustration="empty-people"
+        emptyTitle="No drivers yet"
+        emptyDescription="Add drivers to start assigning deliveries and routes."
       />
     </PageLayout>
   );

package/src/movethewheels/pages/FinancePage.tsx

@@ -6,6 +6,7 @@ import { DollarSign, TrendingUp, CreditCard, FileText, Download } from 'lucide-r
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { Card, CardContent, CardHeader, CardTitle, Button } from '../components/ui';
+import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useAnalytics } from '../hooks/useAnalytics';
 import { useOrderStats } from '../hooks/useOrders';
 import { formatCurrency } from '../utils/formatters';
@@ -33,8 +34,16 @@ export default function FinancePage() {
         </div>
       }
     >
+      <PagePurpose icon={<DollarSign size={18} />}>
+        Follow the money behind your deliveries. See revenue earned, what&apos;s been collected
+        versus still owed, and average order value — use it to chase pending payments, forecast cash
+        flow, and confirm which shipments have actually been paid for.
+      </PagePurpose>
+
       <MetricGrid columns={4}>
         <MetricCard
+          treatment="glass"
+          glow
           label="Total Revenue"
           value={formatCurrency(analytics.overview.totalRevenue)}
           icon={<DollarSign size={20} />}
@@ -81,47 +90,42 @@ export default function FinancePage() {
           </CardContent>
         </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Payment Status</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div className="flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-800 flex items-center justify-center">
-                    <TrendingUp size={20} className="text-green-600" />
-                  </div>
-                  <div>
-                    <p className="font-medium">Paid</p>
-                    <p className="text-sm text-text-secondary">
-                      {stats.byStatus.delivered} orders
-                    </p>
-                  </div>
+        {/* Payment Status — the page's single emphasis zone */}
+        <EmphasisPanel className="space-y-4">
+          <h2 className="text-base font-semibold text-text-primary">Payment Status</h2>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between p-4 bg-status-success-bg/10 rounded-lg">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-status-success-bg/20 flex items-center justify-center">
+                  <TrendingUp size={20} className="text-status-success-text" />
+                </div>
+                <div>
+                  <p className="font-medium">Paid</p>
+                  <p className="text-sm text-text-secondary">{stats.byStatus.delivered} orders</p>
                 </div>
-                <span className="text-xl font-bold text-green-600">
-                  {formatCurrency(completedPayments)}
-                </span>
               </div>
-              <div className="flex items-center justify-between p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-800 flex items-center justify-center">
-                    <CreditCard size={20} className="text-yellow-600" />
-                  </div>
-                  <div>
-                    <p className="font-medium">Pending</p>
-                    <p className="text-sm text-text-secondary">
-                      {stats.byStatus.pending + stats.byStatus.in_transit} orders
-                    </p>
-                  </div>
+              <span className="text-xl font-bold text-status-success-text">
+                {formatCurrency(completedPayments)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between p-4 bg-status-warning-bg/10 rounded-lg">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-status-warning-bg/20 flex items-center justify-center">
+                  <CreditCard size={20} className="text-status-warning-text" />
+                </div>
+                <div>
+                  <p className="font-medium">Pending</p>
+                  <p className="text-sm text-text-secondary">
+                    {stats.byStatus.pending + stats.byStatus.in_transit} orders
+                  </p>
                 </div>
-                <span className="text-xl font-bold text-yellow-600">
-                  {formatCurrency(pendingPayments)}
-                </span>
               </div>
+              <span className="text-xl font-bold text-status-warning-text">
+                {formatCurrency(pendingPayments)}
+              </span>
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </EmphasisPanel>
       </div>
 
       <Card>
@@ -129,11 +133,11 @@ export default function FinancePage() {
           <CardTitle>Recent Transactions</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="text-center py-8 text-text-secondary">
-            <FileText size={48} className="mx-auto mb-4 opacity-50" />
-            <p>Transaction history would be displayed here</p>
-            <p className="text-sm">Integration with payment gateway required</p>
-          </div>
+          <IllustratedEmptyState
+            illustration="empty-data"
+            title="No transactions yet"
+            description="Once payments are processed, your transaction history will appear here. Connect a payment gateway to start recording transactions."
+          />
         </CardContent>
       </Card>
     </PageLayout>

package/src/movethewheels/pages/FleetPage.tsx

@@ -18,7 +18,7 @@ import {
   Avatar,
   AvatarFallback,
 } from '../components/ui';
-import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose, NextSteps } from '@burdenoff/fe-libs/ui';
 import { useFleetStats, useVehicles, useDrivers } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
@@ -63,6 +63,49 @@ export default function FleetPage() {
         />
       }
     >
+      <PagePurpose icon={<Truck size={18} />}>
+        {t(
+          'movethewheels.fleet.purpose',
+          'Your command center for vehicles and drivers. See utilization at a glance, keep an eye on availability and ratings, and act on maintenance alerts so you always have road-ready capacity to fulfil orders.'
+        )}
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-fleet"
+        steps={[
+          {
+            id: 'vehicles',
+            label: t('movethewheels.fleet.nextSteps.vehicles', 'Review your vehicles'),
+            description: t(
+              'movethewheels.fleet.nextSteps.vehiclesDesc',
+              'Check capacity, fuel and maintenance status across the fleet.'
+            ),
+            icon: <Truck size={16} />,
+            onClick: () => goTo('fleet/vehicles'),
+          },
+          {
+            id: 'drivers',
+            label: t('movethewheels.fleet.nextSteps.drivers', 'Review your drivers'),
+            description: t(
+              'movethewheels.fleet.nextSteps.driversDesc',
+              'See availability, ratings and delivery history before assigning work.'
+            ),
+            icon: <Users size={16} />,
+            onClick: () => goTo('fleet/drivers'),
+          },
+          {
+            id: 'assign',
+            label: t('movethewheels.fleet.nextSteps.assign', 'Assign capacity to orders'),
+            description: t(
+              'movethewheels.fleet.nextSteps.assignDesc',
+              'Open an order to assign an available vehicle and driver.'
+            ),
+            icon: <ChevronRight size={16} />,
+            onClick: () => goTo('orders'),
+          },
+        ]}
+      />
+
       {/* Key Metrics */}
       <MetricGrid columns={4}>
         <MetricCard
@@ -80,6 +123,8 @@ export default function FleetPage() {
           onClick={() => goTo('fleet/drivers')}
         />
         <MetricCard
+          treatment="glass"
+          glow
           label={t('movethewheels.fleet.metrics.utilization', 'Fleet Utilization')}
           value={`${stats.utilization.toFixed(0)}%`}
           icon={<Truck size={20} />}
@@ -202,29 +247,27 @@ export default function FleetPage() {
         </PageSection>
       </div>
 
-      {/* Status Summary */}
+      {/* Status Summary — Vehicle Status is the page's single emphasis zone */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {/* Vehicle Status */}
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('movethewheels.fleet.status.vehicleTitle', 'Vehicle Status')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {Object.entries(stats.vehiclesByStatus).map(([status, count]) => (
-                <div key={status} className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <StatusBadge status={status} type="vehicle" />
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <span className="font-medium">{count}</span>
-                    <Progress value={(count / stats.totalVehicles) * 100} className="w-24 h-2" />
-                  </div>
+        <EmphasisPanel className="space-y-4">
+          <h2 className="text-base font-semibold text-text-primary">
+            {t('movethewheels.fleet.status.vehicleTitle', 'Vehicle Status')}
+          </h2>
+          <div className="space-y-4">
+            {Object.entries(stats.vehiclesByStatus).map(([status, count]) => (
+              <div key={status} className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <StatusBadge status={status} type="vehicle" />
                 </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
+                <div className="flex items-center gap-3">
+                  <span className="font-medium">{count}</span>
+                  <Progress value={(count / stats.totalVehicles) * 100} className="w-24 h-2" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </EmphasisPanel>
 
         {/* Driver Status */}
         <Card>
@@ -251,9 +294,9 @@ export default function FleetPage() {
 
       {/* Maintenance Alerts */}
       {stats.vehiclesByStatus.maintenance > 0 && (
-        <Card className="border-yellow-200 dark:border-yellow-800">
+        <Card className="border-status-warning-border">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-yellow-600">
+            <CardTitle className="flex items-center gap-2 text-status-warning-text">
               <Wrench size={18} />
               {t('movethewheels.fleet.maintenance.title', 'Maintenance Required')}
             </CardTitle>
@@ -265,10 +308,10 @@ export default function FleetPage() {
                 .map((vehicle) => (
                   <div
                     key={vehicle.id}
-                    className="flex items-center justify-between p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg"
+                    className="flex items-center justify-between p-3 bg-status-warning-bg/10 rounded-lg"
                   >
                     <div className="flex items-center gap-3">
-                      <Truck size={20} className="text-yellow-600" />
+                      <Truck size={20} className="text-status-warning-text" />
                       <div>
                         <p className="font-medium">{vehicle.vehicleNumber}</p>
                         <p className="text-sm text-text-secondary">

package/src/movethewheels/pages/ImportExportPage.tsx

@@ -5,6 +5,7 @@
 import { Upload, Download, FileText, FileSpreadsheet, Check } 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';
 
 export default function ImportExportPage() {
   const importOptions = [
@@ -69,14 +70,19 @@ export default function ImportExportPage() {
       subtitle="Import and export your data"
       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
+        to onboard or migrate without re-keying, and export any dataset for accounting, BI tools or
+        backups — no manual copy-paste required.
+      </PagePurpose>
+
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Upload size={18} /> Import Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
+        {/* Import Data — the page's single emphasis zone */}
+        <EmphasisPanel className="space-y-4">
+          <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary">
+            <Upload size={18} /> Import Data
+          </h2>
+          <div className="space-y-4">
             {importOptions.map((opt) => (
               <div
                 key={opt.name}
@@ -99,8 +105,8 @@ export default function ImportExportPage() {
                 </div>
               </div>
             ))}
-          </CardContent>
-        </Card>
+          </div>
+        </EmphasisPanel>
 
         <Card>
           <CardHeader>
@@ -136,28 +142,39 @@ export default function ImportExportPage() {
           <CardTitle>Recent Activity</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="space-y-3">
-            {recentActivity.map((activity, 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' ? (
-                    <Upload size={16} className="text-primary" />
-                  ) : (
-                    <Download size={16} className="text-primary" />
-                  )}
-                  <div>
-                    <p className="font-medium">{activity.name}</p>
-                    <p className="text-sm text-text-secondary">
-                      {activity.type === 'import' ? 'Imported' : 'Exported'} on {activity.date}
-                    </p>
+          {recentActivity.length === 0 ? (
+            <IllustratedEmptyState
+              illustration="empty-data"
+              title="No import or export activity yet"
+              description="Your recent imports and exports will show up here once you run one."
+            />
+          ) : (
+            <div className="space-y-3">
+              {recentActivity.map((activity, 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' ? (
+                      <Upload size={16} className="text-primary" />
+                    ) : (
+                      <Download size={16} className="text-primary" />
+                    )}
+                    <div>
+                      <p className="font-medium">{activity.name}</p>
+                      <p className="text-sm text-text-secondary">
+                        {activity.type === 'import' ? 'Imported' : 'Exported'} on {activity.date}
+                      </p>
+                    </div>
                   </div>
+                  <Badge variant="default" className="gap-1">
+                    <Check size={12} /> {activity.status}
+                  </Badge>
                 </div>
-                <Badge variant="default" className="gap-1">
-                  <Check size={12} /> {activity.status}
-                </Badge>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
         </CardContent>
       </Card>
     </PageLayout>