AI Prompt: Forma3D.Connect — Phase 4: Dashboard MVP ⏳¶

Monitor Orders → View Print Status → Manage Mappings → Handle Exceptions → Review Logs

model Order {
  id                   String        @id @default(uuid())
  shopifyOrderId       String        @unique
  shopifyOrderNumber   String
  status               OrderStatus   @default(PENDING)
  customerName         String
  customerEmail        String?
  shippingAddress      Json
  totalPrice           Decimal       @db.Decimal(10, 2)
  currency             String        @default("EUR")
  shopifyFulfillmentId String?
  trackingNumber       String?
  trackingUrl          String?
  createdAt            DateTime      @default(now())
  updatedAt            DateTime      @updatedAt
  completedAt          DateTime?
  lineItems            LineItem[]
}

model ProductMapping {
  id                String         @id @default(uuid())
  shopifyProductId  String?        @unique
  sku               String         @unique
  productName       String
  description       String?
  isAssembly        Boolean        @default(false)
  defaultPrintProfile Json?
  isActive          Boolean        @default(true)
  createdAt         DateTime       @default(now())
  updatedAt         DateTime       @updatedAt
  assemblyParts     AssemblyPart[]
}

model EventLog {
  id         String   @id @default(uuid())
  orderId    String?
  printJobId String?
  eventType  String
  severity   String   @default("INFO")
  message    String
  metadata   Json?
  createdAt  DateTime @default(now())
}

┌─────────────────────────────────────────────────────────────────┐
│  React Dashboard (apps/web)                                      │
│  ├── Pages: Dashboard | Orders | Mappings | Logs | Settings     │
│  ├── State: TanStack Query (server) + React Context (client)    │
│  └── Real-time: Socket.IO client                                │
└──────────────────────────────┬──────────────────────────────────┘
                               │
              ┌────────────────┼────────────────┐
              ▼                ▼                ▼
        REST API         Socket.IO        API Client
        /api/v1/*         /events         (Typed)
              └────────────────┼────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────────┐
│  NestJS Backend (apps/api)                                       │
│  ├── Controllers: Orders | Mappings | Logs | SimplyPrint        │
│  ├── Gateway: WebSocket events bridge                           │
│  └── EventEmitter2: Internal event bus                          │
└─────────────────────────────────────────────────────────────────┘

Backend Event              WebSocket Gateway              React Dashboard
     │                            │                            │
     │  order.status_changed      │                            │
     ├───────────────────────────►│                            │
     │                            │  order:updated             │
     │                            ├───────────────────────────►│
     │                            │                            │ invalidateQueries()
     │                            │                            │ toast.success()
     │                            │                            │

apps/web/src/
├── components/
│   ├── layout/
│   │   ├── root-layout.tsx          # UPDATE: Add navigation, auth context
│   │   ├── sidebar.tsx              # UPDATE: Full navigation menu
│   │   ├── header.tsx               # UPDATE: User info, notifications bell
│   │   └── mobile-nav.tsx           # Mobile responsive navigation
│   │
│   ├── ui/
│   │   ├── button.tsx               # Reusable button component
│   │   ├── badge.tsx                # Status badges
│   │   ├── card.tsx                 # Card container
│   │   ├── table.tsx                # Data table component
│   │   ├── pagination.tsx           # Pagination controls
│   │   ├── modal.tsx                # Modal dialog
│   │   ├── dropdown.tsx             # Dropdown menu
│   │   ├── input.tsx                # Form input
│   │   ├── select.tsx               # Select dropdown
│   │   ├── loading.tsx              # Loading spinner/skeleton
│   │   └── empty-state.tsx          # Empty state placeholder
│   │
│   ├── orders/
│   │   ├── order-list.tsx           # Order list with filters
│   │   ├── order-row.tsx            # Single order row
│   │   ├── order-detail.tsx         # Order detail view
│   │   ├── order-timeline.tsx       # Event timeline
│   │   ├── order-actions.tsx        # Action buttons (retry, cancel, etc.)
│   │   ├── order-filters.tsx        # Filter controls
│   │   └── print-job-card.tsx       # Print job status card
│   │
│   ├── mappings/
│   │   ├── mapping-list.tsx         # Product mapping list
│   │   ├── mapping-row.tsx          # Single mapping row
│   │   ├── mapping-form.tsx         # Create/edit mapping form
│   │   ├── mapping-detail.tsx       # Mapping detail modal
│   │   ├── assembly-parts-editor.tsx # Assembly parts editor
│   │   └── simplyprint-file-picker.tsx # File picker component
│   │
│   └── logs/
│       ├── log-list.tsx             # Event log list
│       ├── log-row.tsx              # Single log entry
│       ├── log-filters.tsx          # Log filters
│       └── log-detail-modal.tsx     # Log detail modal
│
├── pages/
│   ├── dashboard.tsx                # UPDATE: Dashboard overview with stats
│   ├── orders/
│   │   ├── index.tsx                # Orders list page
│   │   └── [id].tsx                 # Order detail page
│   ├── mappings/
│   │   ├── index.tsx                # Mappings list page
│   │   └── new.tsx                  # Create mapping page
│   ├── logs/
│   │   └── index.tsx                # Activity logs page
│   ├── settings/
│   │   └── index.tsx                # Settings page
│   ├── login.tsx                    # Login page
│   └── not-found.tsx                # 404 page (exists)
│
├── hooks/
│   ├── use-health.ts                # EXISTS: Health check hook
│   ├── use-orders.ts                # Orders data hooks
│   ├── use-mappings.ts              # Product mappings hooks
│   ├── use-logs.ts                  # Event logs hooks
│   ├── use-socket.ts                # Socket.IO connection hook
│   ├── use-auth.ts                  # Authentication hook
│   └── use-simplyprint.ts           # SimplyPrint files/printers hooks
│
├── contexts/
│   ├── auth-context.tsx             # Authentication context
│   └── socket-context.tsx           # Socket.IO context
│
├── lib/
│   ├── api-client.ts                # UPDATE: Extend with all endpoints
│   ├── socket-client.ts             # Socket.IO client setup
│   ├── utils.ts                     # Utility functions
│   └── constants.ts                 # Constants (status colors, etc.)
│
├── types/
│   └── index.ts                     # Frontend-specific types
│
├── router.tsx                       # UPDATE: Add all routes
├── main.tsx                         # Entry point
└── styles.css                       # UPDATE: Tailwind config

apps/api/src/
├── gateway/
│   ├── gateway.module.ts            # WebSocket module
│   ├── events.gateway.ts            # WebSocket gateway
│   └── __tests__/
│       └── events.gateway.spec.ts   # Gateway tests
│
├── orders/
│   └── orders.service.ts            # UPDATE: Add search/filter methods
│
├── event-log/
│   ├── event-log.controller.ts      # UPDATE: Add list/filter endpoint
│   └── dto/
│       └── event-log-query.dto.ts   # Query params DTO
│
├── simplyprint/
│   └── simplyprint.controller.ts    # ADD: Files/printers endpoints for UI

libs/api-client/src/
├── orders/
│   └── orders.client.ts             # Typed orders API client
├── mappings/
│   └── mappings.client.ts           # Typed mappings API client
├── logs/
│   └── logs.client.ts               # Typed logs API client
└── simplyprint/
    └── simplyprint.client.ts        # SimplyPrint files/printers client

cd apps/web
pnpm add @tanstack/react-query @headlessui/react @heroicons/react date-fns clsx react-hot-toast socket.io-client

import { QueryClient } from '@tanstack/react-query';

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30 * 1000, // 30 seconds
      gcTime: 5 * 60 * 1000, // 5 minutes (formerly cacheTime)
      retry: 1,
      refetchOnWindowFocus: false,
    },
    mutations: {
      retry: 0,
    },
  },
});

import { forwardRef, type ButtonHTMLAttributes } from 'react';
import { clsx } from 'clsx';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', size = 'md', loading, disabled, children, ...props }, ref) => {
    const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';

    const variants = {
      primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500',
      danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
      ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-gray-500',
    };

    const sizes = {
      sm: 'px-3 py-1.5 text-sm',
      md: 'px-4 py-2 text-sm',
      lg: 'px-6 py-3 text-base',
    };

    return (
      <button
        ref={ref}
        className={clsx(baseStyles, variants[variant], sizes[size], className)}
        disabled={disabled || loading}
        {...props}
      >
        {loading && (
          <svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
        )}
        {children}
      </button>
    );
  }
);

Button.displayName = 'Button';

import { type ReactNode } from 'react';
import { clsx } from 'clsx';

interface BadgeProps {
  children: ReactNode;
  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
  size?: 'sm' | 'md';
}

export function Badge({ children, variant = 'default', size = 'md' }: BadgeProps) {
  const variants = {
    default: 'bg-gray-100 text-gray-800',
    success: 'bg-green-100 text-green-800',
    warning: 'bg-yellow-100 text-yellow-800',
    danger: 'bg-red-100 text-red-800',
    info: 'bg-blue-100 text-blue-800',
  };

  const sizes = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-1 text-sm',
  };

  return (
    <span className={clsx('inline-flex items-center font-medium rounded-full', variants[variant], sizes[size])}>
      {children}
    </span>
  );
}

import type { OrderStatus, PrintJobStatus } from '@forma3d/domain';

export const ORDER_STATUS_COLORS: Record<
  string,
  { bg: string; text: string; badge: 'default' | 'success' | 'warning' | 'danger' | 'info' }
> = {
  PENDING: { bg: 'bg-gray-100', text: 'text-gray-800', badge: 'default' },
  PROCESSING: { bg: 'bg-blue-100', text: 'text-blue-800', badge: 'info' },
  PARTIALLY_COMPLETED: { bg: 'bg-yellow-100', text: 'text-yellow-800', badge: 'warning' },
  COMPLETED: { bg: 'bg-green-100', text: 'text-green-800', badge: 'success' },
  FAILED: { bg: 'bg-red-100', text: 'text-red-800', badge: 'danger' },
  CANCELLED: { bg: 'bg-gray-100', text: 'text-gray-500', badge: 'default' },
};

export const PRINT_JOB_STATUS_COLORS: Record<
  string,
  { bg: string; text: string; badge: 'default' | 'success' | 'warning' | 'danger' | 'info' }
> = {
  PENDING: { bg: 'bg-gray-100', text: 'text-gray-800', badge: 'default' },
  QUEUED: { bg: 'bg-blue-100', text: 'text-blue-800', badge: 'info' },
  ASSIGNED: { bg: 'bg-indigo-100', text: 'text-indigo-800', badge: 'info' },
  PRINTING: { bg: 'bg-purple-100', text: 'text-purple-800', badge: 'info' },
  COMPLETED: { bg: 'bg-green-100', text: 'text-green-800', badge: 'success' },
  FAILED: { bg: 'bg-red-100', text: 'text-red-800', badge: 'danger' },
  CANCELLED: { bg: 'bg-gray-100', text: 'text-gray-500', badge: 'default' },
};

export const SEVERITY_COLORS: Record<
  string,
  { badge: 'default' | 'success' | 'warning' | 'danger' | 'info' }
> = {
  INFO: { badge: 'info' },
  WARNING: { badge: 'warning' },
  ERROR: { badge: 'danger' },
};

import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';

interface AuthContextType {
  isAuthenticated: boolean;
  apiKey: string | null;
  login: (apiKey: string) => void;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

const AUTH_STORAGE_KEY = 'forma3d_api_key';

export function AuthProvider({ children }: { children: ReactNode }) {
  const [apiKey, setApiKey] = useState<string | null>(() => {
    return localStorage.getItem(AUTH_STORAGE_KEY);
  });

  const login = (key: string) => {
    localStorage.setItem(AUTH_STORAGE_KEY, key);
    setApiKey(key);
  };

  const logout = () => {
    localStorage.removeItem(AUTH_STORAGE_KEY);
    setApiKey(null);
  };

  const value: AuthContextType = {
    isAuthenticated: !!apiKey,
    apiKey,
    login,
    logout,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

import { NavLink } from 'react-router-dom';
import {
  HomeIcon,
  ClipboardDocumentListIcon,
  CubeIcon,
  DocumentTextIcon,
  Cog6ToothIcon,
} from '@heroicons/react/24/outline';
import { clsx } from 'clsx';

const navigation = [
  { name: 'Dashboard', href: '/', icon: HomeIcon },
  { name: 'Orders', href: '/orders', icon: ClipboardDocumentListIcon },
  { name: 'Product Mappings', href: '/mappings', icon: CubeIcon },
  { name: 'Activity Logs', href: '/logs', icon: DocumentTextIcon },
  { name: 'Settings', href: '/settings', icon: Cog6ToothIcon },
];

export function Sidebar() {
  return (
    <div className="flex flex-col w-64 bg-gray-900 h-screen fixed left-0 top-0">
      {/* Logo */}
      <div className="flex items-center h-16 px-6 bg-gray-800">
        <span className="text-xl font-bold text-white">Forma3D.Connect</span>
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto">
        {navigation.map((item) => (
          <NavLink
            key={item.name}
            to={item.href}
            className={({ isActive }) =>
              clsx(
                'flex items-center px-4 py-2.5 text-sm font-medium rounded-lg transition-colors',
                isActive
                  ? 'bg-gray-800 text-white'
                  : 'text-gray-300 hover:bg-gray-800 hover:text-white'
              )
            }
          >
            <item.icon className="w-5 h-5 mr-3" aria-hidden="true" />
            {item.name}
          </NavLink>
        ))}
      </nav>

      {/* Version */}
      <div className="px-6 py-4 border-t border-gray-800">
        <p className="text-xs text-gray-500">Version 0.4.0</p>
      </div>
    </div>
  );
}

import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
import { RootLayout } from './components/layout/root-layout';
import { Dashboard } from './pages/dashboard';
import { OrdersPage } from './pages/orders';
import { OrderDetailPage } from './pages/orders/[id]';
import { MappingsPage } from './pages/mappings';
import { NewMappingPage } from './pages/mappings/new';
import { LogsPage } from './pages/logs';
import { SettingsPage } from './pages/settings';
import { LoginPage } from './pages/login';
import { NotFound } from './pages/not-found';
import { useAuth } from './contexts/auth-context';

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
}

const router = createBrowserRouter([
  {
    path: '/login',
    element: <LoginPage />,
  },
  {
    path: '/',
    element: (
      <ProtectedRoute>
        <RootLayout />
      </ProtectedRoute>
    ),
    children: [
      { index: true, element: <Dashboard /> },
      { path: 'orders', element: <OrdersPage /> },
      { path: 'orders/:id', element: <OrderDetailPage /> },
      { path: 'mappings', element: <MappingsPage /> },
      { path: 'mappings/new', element: <NewMappingPage /> },
      { path: 'logs', element: <LogsPage /> },
      { path: 'settings', element: <SettingsPage /> },
    ],
  },
  { path: '*', element: <NotFound /> },
]);

export function Router() {
  return <RouterProvider router={router} />;
}

import { StrictMode } from 'react';
import * as ReactDOM from 'react-dom/client';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { Toaster } from 'react-hot-toast';
import { initSentry } from './observability/sentry';
import { ErrorBoundary } from './observability/ErrorBoundary';
import { AuthProvider } from './contexts/auth-context';
import { SocketProvider } from './contexts/socket-context';
import { queryClient } from './lib/query-client';
import { Router } from './router';
import './styles.css';

// Initialize Sentry
initSentry();

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <StrictMode>
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <SocketProvider>
            <Router />
            <Toaster position="top-right" />
          </SocketProvider>
        </AuthProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </ErrorBoundary>
  </StrictMode>
);

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../lib/api-client';
import { useAuth } from '../contexts/auth-context';
import type { Order, OrderStatus } from '@forma3d/domain';

interface OrdersQuery {
  page?: number;
  pageSize?: number;
  status?: OrderStatus;
  search?: string;
  startDate?: string;
  endDate?: string;
}

interface OrdersResponse {
  orders: Order[];
  total: number;
  page: number;
  pageSize: number;
}

export function useOrders(query: OrdersQuery = {}) {
  return useQuery<OrdersResponse>({
    queryKey: ['orders', query],
    queryFn: () => apiClient.getOrders(query),
  });
}

export function useOrder(id: string) {
  return useQuery<Order>({
    queryKey: ['orders', id],
    queryFn: () => apiClient.getOrder(id),
    enabled: !!id,
  });
}

export function useOrderPrintJobs(orderId: string) {
  return useQuery({
    queryKey: ['orders', orderId, 'print-jobs'],
    queryFn: () => apiClient.getOrderPrintJobs(orderId),
    enabled: !!orderId,
  });
}

export function useRetryPrintJob() {
  const queryClient = useQueryClient();
  const { apiKey } = useAuth();

  return useMutation({
    mutationFn: (jobId: string) => apiClient.retryPrintJob(jobId, apiKey),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['orders'] });
    },
  });
}

export function useCancelOrder() {
  const queryClient = useQueryClient();
  const { apiKey } = useAuth();

  return useMutation({
    mutationFn: (orderId: string) => apiClient.cancelOrder(orderId, apiKey),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['orders'] });
    },
  });
}

export function useForceFulfill() {
  const queryClient = useQueryClient();
  const { apiKey } = useAuth();

  return useMutation({
    mutationFn: (orderId: string) => apiClient.forceFulfillOrder(orderId, apiKey),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['orders'] });
    },
  });
}

import { useState } from 'react';
import { Link } from 'react-router-dom';
import { format } from 'date-fns';
import { EyeIcon } from '@heroicons/react/24/outline';
import { useOrders } from '../../hooks/use-orders';
import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button';
import { ORDER_STATUS_COLORS } from '../../lib/constants';
import type { OrderStatus } from '@forma3d/domain';

const STATUS_OPTIONS: { value: OrderStatus | ''; label: string }[] = [
  { value: '', label: 'All Statuses' },
  { value: 'PENDING', label: 'Pending' },
  { value: 'PROCESSING', label: 'Processing' },
  { value: 'PARTIALLY_COMPLETED', label: 'Partially Completed' },
  { value: 'COMPLETED', label: 'Completed' },
  { value: 'FAILED', label: 'Failed' },
  { value: 'CANCELLED', label: 'Cancelled' },
];

export function OrdersPage() {
  const [page, setPage] = useState(1);
  const [status, setStatus] = useState<OrderStatus | ''>('');
  const [search, setSearch] = useState('');

  const { data, isLoading, error } = useOrders({
    page,
    pageSize: 50,
    status: status || undefined,
    search: search || undefined,
  });

  if (error) {
    return (
      <div className="p-4 bg-red-50 text-red-700 rounded-lg">
        Error loading orders: {error.message}
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Orders</h1>
      </div>

      {/* Filters */}
      <div className="flex flex-wrap gap-4 p-4 bg-white rounded-lg shadow">
        <input
          type="text"
          placeholder="Search by order number or customer..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1 min-w-[200px] px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
        <select
          value={status}
          onChange={(e) => setStatus(e.target.value as OrderStatus | '')}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
          {STATUS_OPTIONS.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>

      {/* Table */}
      <div className="bg-white rounded-lg shadow overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Order
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Date
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Customer
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Items
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Status
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Actions
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {isLoading ? (
              <tr>
                <td colSpan={6} className="px-6 py-12 text-center text-gray-500">
                  Loading orders...
                </td>
              </tr>
            ) : data?.orders.length === 0 ? (
              <tr>
                <td colSpan={6} className="px-6 py-12 text-center text-gray-500">
                  No orders found
                </td>
              </tr>
            ) : (
              data?.orders.map((order) => (
                <tr key={order.id} className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">
                      #{order.shopifyOrderNumber}
                    </div>
                    <div className="text-xs text-gray-500">{order.id.slice(0, 8)}...</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {format(new Date(order.createdAt), 'MMM d, yyyy HH:mm')}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm text-gray-900">{order.customerName}</div>
                    <div className="text-xs text-gray-500">{order.customerEmail}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {order.lineItems?.length || 0} item(s)
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <Badge variant={ORDER_STATUS_COLORS[order.status]?.badge || 'default'}>
                      {order.status}
                    </Badge>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-right">
                    <Link to={`/orders/${order.id}`}>
                      <Button variant="ghost" size="sm">
                        <EyeIcon className="w-4 h-4 mr-1" />
                        View
                      </Button>
                    </Link>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>

        {/* Pagination */}
        {data && data.total > data.pageSize && (
          <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <p className="text-sm text-gray-500">
              Showing {(data.page - 1) * data.pageSize + 1} to{' '}
              {Math.min(data.page * data.pageSize, data.total)} of {data.total} orders
            </p>
            <div className="flex gap-2">
              <Button
                variant="secondary"
                size="sm"
                disabled={page === 1}
                onClick={() => setPage((p) => p - 1)}
              >
                Previous
              </Button>
              <Button
                variant="secondary"
                size="sm"
                disabled={page * data.pageSize >= data.total}
                onClick={() => setPage((p) => p + 1)}
              >
                Next
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

import { useParams, useNavigate } from 'react-router-dom';
import { format } from 'date-fns';
import { ArrowLeftIcon, ArrowPathIcon, XMarkIcon, CheckIcon } from '@heroicons/react/24/outline';
import toast from 'react-hot-toast';
import { useOrder, useOrderPrintJobs, useRetryPrintJob, useCancelOrder, useForceFulfill } from '../../hooks/use-orders';
import { Button } from '../../components/ui/button';
import { Badge } from '../../components/ui/badge';
import { ORDER_STATUS_COLORS, PRINT_JOB_STATUS_COLORS } from '../../lib/constants';

export function OrderDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  const { data: order, isLoading: orderLoading, error: orderError } = useOrder(id!);
  const { data: printJobs, isLoading: jobsLoading } = useOrderPrintJobs(id!);

  const retryMutation = useRetryPrintJob();
  const cancelMutation = useCancelOrder();
  const forceFulfillMutation = useForceFulfill();

  const handleRetryJob = async (jobId: string) => {
    try {
      await retryMutation.mutateAsync(jobId);
      toast.success('Print job retry initiated');
    } catch (error) {
      toast.error('Failed to retry print job');
    }
  };

  const handleCancelOrder = async () => {
    if (!window.confirm('Are you sure you want to cancel this order?')) return;

    try {
      await cancelMutation.mutateAsync(id!);
      toast.success('Order cancelled');
    } catch (error) {
      toast.error('Failed to cancel order');
    }
  };

  const handleForceFulfill = async () => {
    if (!window.confirm('Force fulfill this order? This will mark it as fulfilled in Shopify.')) return;

    try {
      await forceFulfillMutation.mutateAsync(id!);
      toast.success('Order force fulfilled');
    } catch (error) {
      toast.error('Failed to force fulfill order');
    }
  };

  if (orderLoading) {
    return <div className="p-8 text-center">Loading order...</div>;
  }

  if (orderError || !order) {
    return (
      <div className="p-8">
        <div className="p-4 bg-red-50 text-red-700 rounded-lg">
          Error loading order: {orderError?.message || 'Order not found'}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <button
            onClick={() => navigate('/orders')}
            className="p-2 hover:bg-gray-100 rounded-lg"
          >
            <ArrowLeftIcon className="w-5 h-5" />
          </button>
          <div>
            <h1 className="text-2xl font-bold text-gray-900">
              Order #{order.shopifyOrderNumber}
            </h1>
            <p className="text-sm text-gray-500">
              Created {format(new Date(order.createdAt), 'PPpp')}
            </p>
          </div>
        </div>
        <Badge variant={ORDER_STATUS_COLORS[order.status]?.badge || 'default'} size="md">
          {order.status}
        </Badge>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Order Info */}
        <div className="lg:col-span-2 space-y-6">
          {/* Customer Info */}
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold mb-4">Customer Information</h2>
            <dl className="grid grid-cols-2 gap-4">
              <div>
                <dt className="text-sm text-gray-500">Name</dt>
                <dd className="text-sm font-medium">{order.customerName}</dd>
              </div>
              <div>
                <dt className="text-sm text-gray-500">Email</dt>
                <dd className="text-sm font-medium">{order.customerEmail || '-'}</dd>
              </div>
              <div className="col-span-2">
                <dt className="text-sm text-gray-500">Shipping Address</dt>
                <dd className="text-sm font-medium">
                  {typeof order.shippingAddress === 'object'
                    ? JSON.stringify(order.shippingAddress, null, 2)
                    : order.shippingAddress}
                </dd>
              </div>
            </dl>
          </div>

          {/* Line Items */}
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold mb-4">Line Items</h2>
            <div className="space-y-4">
              {order.lineItems?.map((item) => (
                <div key={item.id} className="flex items-center justify-between p-4 border rounded-lg">
                  <div>
                    <p className="font-medium">{item.productName}</p>
                    <p className="text-sm text-gray-500">SKU: {item.productSku}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">Qty: {item.quantity}</p>
                    <Badge variant={ORDER_STATUS_COLORS[item.status]?.badge || 'default'}>
                      {item.status}
                    </Badge>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Print Jobs */}
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold mb-4">Print Jobs</h2>
            {jobsLoading ? (
              <p className="text-gray-500">Loading print jobs...</p>
            ) : printJobs?.length === 0 ? (
              <p className="text-gray-500">No print jobs created yet</p>
            ) : (
              <div className="space-y-4">
                {printJobs?.map((job) => (
                  <div key={job.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div>
                      <p className="font-medium">Job {job.id.slice(0, 8)}...</p>
                      <p className="text-sm text-gray-500">
                        SimplyPrint: {job.simplyPrintJobId || 'Not created'}
                      </p>
                      {job.errorMessage && (
                        <p className="text-sm text-red-600 mt-1">{job.errorMessage}</p>
                      )}
                    </div>
                    <div className="flex items-center gap-4">
                      <Badge variant={PRINT_JOB_STATUS_COLORS[job.status]?.badge || 'default'}>
                        {job.status}
                      </Badge>
                      {job.status === 'FAILED' && (
                        <Button
                          variant="secondary"
                          size="sm"
                          onClick={() => handleRetryJob(job.id)}
                          loading={retryMutation.isPending}
                        >
                          <ArrowPathIcon className="w-4 h-4 mr-1" />
                          Retry
                        </Button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Actions Sidebar */}
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold mb-4">Actions</h2>
            <div className="space-y-3">
              {order.status !== 'COMPLETED' && order.status !== 'CANCELLED' && (
                <Button
                  variant="primary"
                  className="w-full"
                  onClick={handleForceFulfill}
                  loading={forceFulfillMutation.isPending}
                >
                  <CheckIcon className="w-4 h-4 mr-2" />
                  Force Fulfill
                </Button>
              )}
              {order.status !== 'CANCELLED' && (
                <Button
                  variant="danger"
                  className="w-full"
                  onClick={handleCancelOrder}
                  loading={cancelMutation.isPending}
                >
                  <XMarkIcon className="w-4 h-4 mr-2" />
                  Cancel Order
                </Button>
              )}
            </div>
          </div>

          {/* Order Summary */}
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold mb-4">Summary</h2>
            <dl className="space-y-2">
              <div className="flex justify-between">
                <dt className="text-gray-500">Total</dt>
                <dd className="font-medium">{order.currency} {order.totalPrice}</dd>
              </div>
              {order.trackingNumber && (
                <div className="flex justify-between">
                  <dt className="text-gray-500">Tracking</dt>
                  <dd className="font-medium text-blue-600">
                    <a href={order.trackingUrl || '#'} target="_blank" rel="noopener noreferrer">
                      {order.trackingNumber}
                    </a>
                  </dd>
                </div>
              )}
            </dl>
          </div>
        </div>
      </div>
    </div>
  );
}

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../lib/api-client';
import type { ProductMapping, CreateMappingInput, UpdateMappingInput } from '@forma3d/domain';

interface MappingsQuery {
  page?: number;
  pageSize?: number;
  search?: string;
  isActive?: boolean;
}

interface MappingsResponse {
  mappings: ProductMapping[];
  total: number;
  page: number;
  pageSize: number;
}

export function useMappings(query: MappingsQuery = {}) {
  return useQuery<MappingsResponse>({
    queryKey: ['mappings', query],
    queryFn: () => apiClient.getMappings(query),
  });
}

export function useMapping(id: string) {
  return useQuery<ProductMapping>({
    queryKey: ['mappings', id],
    queryFn: () => apiClient.getMapping(id),
    enabled: !!id,
  });
}

export function useCreateMapping() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: CreateMappingInput) => apiClient.createMapping(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['mappings'] });
    },
  });
}

export function useUpdateMapping() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: ({ id, data }: { id: string; data: UpdateMappingInput }) =>
      apiClient.updateMapping(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['mappings'] });
    },
  });
}

export function useToggleMappingStatus() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: ({ id, activate }: { id: string; activate: boolean }) =>
      activate ? apiClient.activateMapping(id) : apiClient.deactivateMapping(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['mappings'] });
    },
  });
}

export function useDeleteMapping() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (id: string) => apiClient.deleteMapping(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['mappings'] });
    },
  });
}

import { useState } from 'react';
import { Link } from 'react-router-dom';
import { PlusIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import toast from 'react-hot-toast';
import { useMappings, useToggleMappingStatus, useDeleteMapping } from '../../hooks/use-mappings';
import { Button } from '../../components/ui/button';
import { Badge } from '../../components/ui/badge';

export function MappingsPage() {
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');

  const { data, isLoading, error } = useMappings({
    page,
    pageSize: 50,
    search: search || undefined,
  });

  const toggleMutation = useToggleMappingStatus();
  const deleteMutation = useDeleteMapping();

  const handleToggle = async (id: string, isActive: boolean) => {
    try {
      await toggleMutation.mutateAsync({ id, activate: !isActive });
      toast.success(isActive ? 'Mapping deactivated' : 'Mapping activated');
    } catch (error) {
      toast.error('Failed to update mapping status');
    }
  };

  const handleDelete = async (id: string) => {
    if (!window.confirm('Are you sure you want to delete this mapping?')) return;

    try {
      await deleteMutation.mutateAsync(id);
      toast.success('Mapping deleted');
    } catch (error) {
      toast.error('Failed to delete mapping');
    }
  };

  if (error) {
    return (
      <div className="p-4 bg-red-50 text-red-700 rounded-lg">
        Error loading mappings: {error.message}
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Product Mappings</h1>
        <Link to="/mappings/new">
          <Button>
            <PlusIcon className="w-4 h-4 mr-2" />
            Add Mapping
          </Button>
        </Link>
      </div>

      {/* Search */}
      <div className="p-4 bg-white rounded-lg shadow">
        <input
          type="text"
          placeholder="Search by SKU or product name..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>

      {/* Table */}
      <div className="bg-white rounded-lg shadow overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                SKU
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Product Name
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Type
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Parts
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Status
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Actions
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {isLoading ? (
              <tr>
                <td colSpan={6} className="px-6 py-12 text-center text-gray-500">
                  Loading mappings...
                </td>
              </tr>
            ) : data?.mappings.length === 0 ? (
              <tr>
                <td colSpan={6} className="px-6 py-12 text-center text-gray-500">
                  No mappings found. Create your first mapping to get started.
                </td>
              </tr>
            ) : (
              data?.mappings.map((mapping) => (
                <tr key={mapping.id} className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="font-mono text-sm">{mapping.sku}</span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{mapping.productName}</div>
                    {mapping.description && (
                      <div className="text-xs text-gray-500 truncate max-w-xs">
                        {mapping.description}
                      </div>
                    )}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <Badge variant={mapping.isAssembly ? 'info' : 'default'}>
                      {mapping.isAssembly ? 'Assembly' : 'Single'}
                    </Badge>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {mapping.assemblyParts?.length || 0} part(s)
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <button
                      onClick={() => handleToggle(mapping.id, mapping.isActive)}
                      className="focus:outline-none"
                    >
                      <Badge variant={mapping.isActive ? 'success' : 'default'}>
                        {mapping.isActive ? 'Active' : 'Inactive'}
                      </Badge>
                    </button>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-right">
                    <div className="flex justify-end gap-2">
                      <Link to={`/mappings/${mapping.id}/edit`}>
                        <Button variant="ghost" size="sm">
                          <PencilIcon className="w-4 h-4" />
                        </Button>
                      </Link>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleDelete(mapping.id)}
                        loading={deleteMutation.isPending}
                      >
                        <TrashIcon className="w-4 h-4 text-red-500" />
                      </Button>
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}