@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/components/PageLayout.tsx

@@ -0,0 +1,234 @@
+import type { ReactNode } from 'react';
+import { cn } from '../utils/cn';
+
+interface PageLayoutProps {
+  children: ReactNode;
+  /** Page title */
+  title?: string;
+  /** Page subtitle/description */
+  subtitle?: string;
+  /** Icon component to display next to title */
+  icon?: ReactNode;
+  /** Actions to display in header (buttons, etc.) */
+  headerActions?: ReactNode;
+  /** Additional header content below title */
+  headerContent?: ReactNode;
+  /** Maximum width of content: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' */
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+  /** Whether to show the header section */
+  showHeader?: boolean;
+  /** Additional CSS classes for the container */
+  className?: string;
+  /** Additional CSS classes for the content area */
+  contentClassName?: string;
+}
+
+const maxWidthClasses = {
+  sm: 'max-w-screen-sm', // 640px
+  md: 'max-w-screen-md', // 768px
+  lg: 'max-w-screen-lg', // 1024px
+  xl: 'max-w-screen-xl', // 1280px
+  '2xl': 'max-w-screen-2xl', // 1536px
+  '3xl': 'max-w-[1600px]',
+  full: 'max-w-full',
+};
+
+/**
+ * PageLayout - A consistent page wrapper with responsive design
+ *
+ * Features:
+ * - Proper max-width constraints
+ * - Responsive padding
+ * - Animated entrance
+ * - Consistent header styling
+ */
+export function PageLayout({
+  children,
+  title,
+  subtitle,
+  icon,
+  headerActions,
+  headerContent,
+  maxWidth = 'xl',
+  showHeader = true,
+  className,
+  contentClassName,
+}: PageLayoutProps) {
+  return (
+    <div
+      className={cn(
+        // Base styles - full width container with padding
+        'min-h-full w-full',
+        // Responsive horizontal padding
+        'px-4 sm:px-6 lg:px-8 xl:px-12',
+        // Responsive vertical padding
+        'py-6 sm:py-8 lg:py-10',
+        // Entrance animation
+        'animate-in fade-in-0 slide-in-from-bottom-4 duration-500',
+        className
+      )}
+    >
+      {/* Max-width constrained content container */}
+      <div className={cn('mx-auto w-full', maxWidthClasses[maxWidth], contentClassName)}>
+        {/* Page Header */}
+        {showHeader && (title || headerActions) && (
+          <header className="mb-6 sm:mb-8">
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+              {/* Title Section */}
+              <div className="space-y-1">
+                {(title || icon) && (
+                  <div className="flex items-center gap-3">
+                    {icon && (
+                      <div className="flex-shrink-0 p-2.5 rounded-xl bg-primary/10 text-primary">
+                        {icon}
+                      </div>
+                    )}
+                    {title && (
+                      <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground">
+                        {title}
+                      </h1>
+                    )}
+                  </div>
+                )}
+                {subtitle && (
+                  <p className="text-sm sm:text-base text-muted-foreground max-w-2xl">{subtitle}</p>
+                )}
+              </div>
+
+              {/* Header Actions */}
+              {headerActions && (
+                <div className="flex items-center gap-2 flex-shrink-0">{headerActions}</div>
+              )}
+            </div>
+
+            {/* Additional Header Content */}
+            {headerContent && <div className="mt-4">{headerContent}</div>}
+          </header>
+        )}
+
+        {/* Page content — must not use a <main> landmark here because the
+            host shell (AppShellLayout) already renders one; nesting <main>
+            elements is invalid HTML and an a11y violation. */}
+        <div className="space-y-6">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * PageSection - A section within a page with consistent spacing
+ */
+export function PageSection({
+  children,
+  title,
+  description,
+  actions,
+  className,
+}: {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section className={cn('space-y-4', className)}>
+      {(title || actions) && (
+        <div className="flex items-center justify-between">
+          <div>
+            {title && <h2 className="text-lg font-semibold text-foreground">{title}</h2>}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+          </div>
+          {actions && <div className="flex items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      {children}
+    </section>
+  );
+}
+
+/**
+ * EmptyState - A consistent empty state component
+ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center',
+        'py-12 sm:py-16 px-4',
+        'text-center',
+        'animate-in fade-in-0 zoom-in-95 duration-300',
+        className
+      )}
+    >
+      {icon && <div className="mb-4 p-4 rounded-2xl bg-muted/50 text-muted-foreground">{icon}</div>}
+      <h3 className="text-lg font-semibold text-foreground mb-1">{title}</h3>
+      {description && <p className="text-sm text-muted-foreground max-w-sm mb-4">{description}</p>}
+      {action}
+    </div>
+  );
+}
+
+/**
+ * LoadingState - A consistent loading state component
+ */
+export function LoadingState({ message = 'Loading...' }: { message?: string }) {
+  return (
+    <div className="flex items-center justify-center min-h-[400px]">
+      <div className="flex flex-col items-center gap-3">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+        <p className="text-sm text-muted-foreground">{message}</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ErrorState - A consistent error state component
+ */
+export function ErrorState({
+  title = 'Something went wrong',
+  message,
+  onRetry,
+}: {
+  title?: string;
+  message?: string;
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+      <div className="mb-4 p-4 rounded-2xl bg-destructive/10 text-destructive">
+        <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      </div>
+      <h3 className="text-lg font-semibold text-foreground mb-1">{title}</h3>
+      {message && <p className="text-sm text-muted-foreground max-w-sm mb-4">{message}</p>}
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="px-4 py-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors"
+        >
+          Try again
+        </button>
+      )}
+    </div>
+  );
+}

package/src/movethewheels/components/StatusBadge.tsx

@@ -0,0 +1,243 @@
+import { cn } from '../utils/cn';
+import { Badge } from './ui';
+import type { OrderStatus, VehicleStatus, DriverStatus } from '../types';
+import { ORDER_STATUS_COLORS, VEHICLE_STATUS_COLORS, DRIVER_STATUS_COLORS } from '../constants';
+
+type StatusType = 'order' | 'vehicle' | 'driver' | 'custom';
+
+interface StatusBadgeProps {
+  status: string;
+  type?: StatusType;
+  customColors?: {
+    bg: string;
+    text: string;
+  };
+  size?: 'sm' | 'md' | 'lg';
+  showDot?: boolean;
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'text-xs px-2 py-0.5',
+  md: 'text-sm px-2.5 py-1',
+  lg: 'text-base px-3 py-1.5',
+};
+
+/**
+ * StatusBadge - Displays status with appropriate colors
+ */
+export function StatusBadge({
+  status,
+  type = 'custom',
+  customColors,
+  size = 'md',
+  showDot = true,
+  className,
+}: StatusBadgeProps) {
+  // Get colors based on type
+  let colors = customColors;
+
+  if (!colors) {
+    switch (type) {
+      case 'order':
+        colors = ORDER_STATUS_COLORS[status as OrderStatus] || {
+          bg: 'bg-gray-100',
+          text: 'text-gray-700',
+        };
+        break;
+      case 'vehicle':
+        colors = VEHICLE_STATUS_COLORS[status as VehicleStatus] || {
+          bg: 'bg-gray-100',
+          text: 'text-gray-700',
+        };
+        break;
+      case 'driver':
+        colors = DRIVER_STATUS_COLORS[status as DriverStatus] || {
+          bg: 'bg-gray-100',
+          text: 'text-gray-700',
+        };
+        break;
+      default:
+        colors = { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-700 dark:text-gray-300' };
+    }
+  }
+
+  // Format status for display
+  const displayStatus = status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'font-medium capitalize border-0 whitespace-nowrap inline-flex items-center',
+        colors.bg,
+        colors.text,
+        sizeClasses[size],
+        className
+      )}
+    >
+      {showDot && (
+        <span
+          className={cn(
+            'w-1.5 h-1.5 rounded-full mr-1.5 flex-shrink-0',
+            colors.text.replace('text-', 'bg-')
+          )}
+        />
+      )}
+      {displayStatus}
+    </Badge>
+  );
+}
+
+/**
+ * Priority Badge - Displays priority level
+ */
+export function PriorityBadge({
+  priority,
+  size = 'md',
+  className,
+}: {
+  priority: 'low' | 'normal' | 'high' | 'urgent';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}) {
+  const priorityColors = {
+    low: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-600 dark:text-gray-400' },
+    normal: { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-400' },
+    high: {
+      bg: 'bg-orange-100 dark:bg-orange-900/30',
+      text: 'text-orange-700 dark:text-orange-400',
+    },
+    urgent: { bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-400' },
+  };
+
+  const colors = priorityColors[priority];
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'font-medium capitalize border-0 whitespace-nowrap',
+        colors.bg,
+        colors.text,
+        sizeClasses[size],
+        className
+      )}
+    >
+      {priority}
+    </Badge>
+  );
+}
+
+/**
+ * TypeBadge - Displays B2B/B2C type
+ */
+export function TypeBadge({
+  type,
+  size = 'md',
+  className,
+}: {
+  type: 'b2b' | 'b2c';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}) {
+  const typeColors = {
+    b2b: {
+      bg: 'bg-purple-100 dark:bg-purple-900/30',
+      text: 'text-purple-700 dark:text-purple-400',
+    },
+    b2c: { bg: 'bg-teal-100 dark:bg-teal-900/30', text: 'text-teal-700 dark:text-teal-400' },
+  };
+
+  const colors = typeColors[type];
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'font-medium uppercase border-0 whitespace-nowrap',
+        colors.bg,
+        colors.text,
+        sizeClasses[size],
+        className
+      )}
+    >
+      {type}
+    </Badge>
+  );
+}
+
+/**
+ * PaymentStatusBadge - Displays payment status
+ */
+export function PaymentStatusBadge({
+  status,
+  size = 'md',
+  className,
+}: {
+  status: 'pending' | 'paid' | 'failed' | 'refunded';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}) {
+  const statusColors = {
+    pending: {
+      bg: 'bg-yellow-100 dark:bg-yellow-900/30',
+      text: 'text-yellow-700 dark:text-yellow-400',
+    },
+    paid: { bg: 'bg-green-100 dark:bg-green-900/30', text: 'text-green-700 dark:text-green-400' },
+    failed: { bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-400' },
+    refunded: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-700 dark:text-gray-400' },
+  };
+
+  const colors = statusColors[status];
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'font-medium capitalize border-0 whitespace-nowrap',
+        colors.bg,
+        colors.text,
+        sizeClasses[size],
+        className
+      )}
+    >
+      {status}
+    </Badge>
+  );
+}
+
+/**
+ * VehicleTypeBadge - Displays vehicle type
+ */
+export function VehicleTypeBadge({
+  type,
+  size = 'md',
+  className,
+}: {
+  type: 'van' | 'truck' | 'motorcycle' | 'bicycle' | 'car';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}) {
+  const typeIcons = {
+    van: '🚐',
+    truck: '🚚',
+    motorcycle: '🏍️',
+    bicycle: '🚲',
+    car: '🚗',
+  };
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'font-medium capitalize whitespace-nowrap inline-flex items-center',
+        sizeClasses[size],
+        className
+      )}
+    >
+      <span className="mr-1">{typeIcons[type]}</span>
+      {type}
+    </Badge>
+  );
+}

package/src/movethewheels/components/index.ts

@@ -0,0 +1,26 @@
+/**
+ * MoveTheWheels Components
+ *
+ * All shared components for the microfrontend.
+ */
+
+// UI re-exports
+export * from './ui';
+
+// Layout components
+export { PageLayout, PageSection, EmptyState, LoadingState, ErrorState } from './PageLayout';
+
+// Metric components
+export { MetricCard, MetricCardSkeleton, MetricGrid } from './MetricCard';
+
+// Status components
+export {
+  StatusBadge,
+  PriorityBadge,
+  TypeBadge,
+  PaymentStatusBadge,
+  VehicleTypeBadge,
+} from './StatusBadge';
+
+// Table components
+export { DataTable, type Column } from './DataTable';

package/src/movethewheels/components/ui.tsx

@@ -0,0 +1,124 @@
+/**
+ * UI Component re-exports from @burdenoff/fe-libs
+ * All styled components are imported from the shared fe-libs package
+ */
+
+// Re-export all UI components from fe-libs
+export {
+  Button,
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+  Input,
+  Skeleton,
+  Separator,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+  Label,
+  Textarea,
+  Switch,
+  Checkbox,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  ScrollArea,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@burdenoff/fe-libs/ui';
+
+// Custom Progress component (not in fe-libs)
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  max?: number;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value = 0, max = 100, ...props }, ref) => {
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+    return (
+      <div
+        ref={ref}
+        className={cn('relative h-2 w-full overflow-hidden rounded-full bg-muted', className)}
+        {...props}
+      >
+        <div
+          className="h-full bg-primary transition-all duration-300 ease-in-out"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    );
+  }
+);
+Progress.displayName = 'Progress';
+
+export { Progress };
+
+// Custom Avatar components (not in fe-libs)
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = 'Avatar';
+
+interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}
+
+const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
+  ({ className, ...props }, ref) => (
+    <img ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+  )
+);
+AvatarImage.displayName = 'AvatarImage';
+
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+AvatarFallback.displayName = 'AvatarFallback';
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/movethewheels/constants/index.ts

@@ -0,0 +1,65 @@
+/**
+ * Constants barrel export
+ */
+
+export * from './mockData';
+
+// Order status colors
+export const ORDER_STATUS_COLORS: Record<string, { bg: string; text: string; border: string }> = {
+  pending: { bg: 'bg-yellow-100', text: 'text-yellow-800', border: 'border-yellow-200' },
+  confirmed: { bg: 'bg-blue-100', text: 'text-blue-800', border: 'border-blue-200' },
+  assigned: { bg: 'bg-purple-100', text: 'text-purple-800', border: 'border-purple-200' },
+  picked_up: { bg: 'bg-indigo-100', text: 'text-indigo-800', border: 'border-indigo-200' },
+  in_transit: { bg: 'bg-cyan-100', text: 'text-cyan-800', border: 'border-cyan-200' },
+  out_for_delivery: { bg: 'bg-orange-100', text: 'text-orange-800', border: 'border-orange-200' },
+  delivered: { bg: 'bg-green-100', text: 'text-green-800', border: 'border-green-200' },
+  cancelled: { bg: 'bg-red-100', text: 'text-red-800', border: 'border-red-200' },
+  failed: { bg: 'bg-red-100', text: 'text-red-800', border: 'border-red-200' },
+};
+
+// Vehicle status colors
+export const VEHICLE_STATUS_COLORS: Record<string, { bg: string; text: string }> = {
+  available: { bg: 'bg-green-100', text: 'text-green-800' },
+  assigned: { bg: 'bg-blue-100', text: 'text-blue-800' },
+  maintenance: { bg: 'bg-yellow-100', text: 'text-yellow-800' },
+  out_of_service: { bg: 'bg-red-100', text: 'text-red-800' },
+};
+
+// Driver status colors
+export const DRIVER_STATUS_COLORS: Record<string, { bg: string; text: string }> = {
+  available: { bg: 'bg-green-100', text: 'text-green-800' },
+  busy: { bg: 'bg-blue-100', text: 'text-blue-800' },
+  offline: { bg: 'bg-gray-100', text: 'text-gray-800' },
+  on_break: { bg: 'bg-yellow-100', text: 'text-yellow-800' },
+};
+
+// Priority colors
+export const PRIORITY_COLORS: Record<string, { bg: string; text: string }> = {
+  low: { bg: 'bg-gray-100', text: 'text-gray-600' },
+  normal: { bg: 'bg-blue-100', text: 'text-blue-600' },
+  high: { bg: 'bg-orange-100', text: 'text-orange-600' },
+  urgent: { bg: 'bg-red-100', text: 'text-red-600' },
+};
+
+// Customer type labels
+export const CUSTOMER_TYPE_LABELS: Record<string, string> = {
+  b2b: 'Business',
+  b2c: 'Individual',
+};
+
+// Vehicle type labels
+export const VEHICLE_TYPE_LABELS: Record<string, string> = {
+  van: 'Van',
+  truck: 'Truck',
+  motorcycle: 'Motorcycle',
+  bicycle: 'Bicycle',
+  car: 'Car',
+};
+
+// Warehouse type labels
+export const WAREHOUSE_TYPE_LABELS: Record<string, string> = {
+  distribution: 'Distribution Center',
+  fulfillment: 'Fulfillment Center',
+  cold_storage: 'Cold Storage',
+  cross_dock: 'Cross Dock',
+};