Lorentz Hinrichsen
e60e07c9a5
Multi-step cart workflows for both shipment and allocation requests: - Ship-to address selection from Epicor portal_CustomerShipToAddresses - Inventory browser dialog (shipment) / coil browser dialog (allocation) - Cart persistence in DB with duplicate detection - Details form (order#, PO#, pickup date, instructions, email recipients) - Review & submit with confirmation dialog - Cancel with permission gate and confirmation - Shared components: stepper, ship-to selector, cart table, header form, review - 16 API routes, 4 services, 13 components, 6 pages - Phase 2 complete: 16/16 tasks done Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { AllocationRequestList } from '@/components/requests/allocation-request-list';
|
|
import type { AllocRequestListItem } from '@/types/requests';
|
|
|
|
function AllocationRequestsSkeleton() {
|
|
return (
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="space-y-4">
|
|
<div className="h-8 w-48 animate-pulse rounded bg-muted" />
|
|
<div className="h-10 w-full animate-pulse rounded bg-muted" />
|
|
<div className="space-y-2">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="h-12 w-full animate-pulse rounded bg-muted"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default function AllocationRequestsPage() {
|
|
const [requests, setRequests] = useState<AllocRequestListItem[] | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/allocation-requests')
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
return res.json();
|
|
})
|
|
.then((data) => setRequests(data))
|
|
.catch((err) => setError(err.message));
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="mb-6 text-3xl font-bold">Allocation Requests</h1>
|
|
{error ? (
|
|
<Card>
|
|
<CardContent className="p-6 text-center text-destructive">
|
|
Failed to load allocation requests: {error}
|
|
</CardContent>
|
|
</Card>
|
|
) : requests === null ? (
|
|
<AllocationRequestsSkeleton />
|
|
) : (
|
|
<AllocationRequestList data={requests} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|