Spaces:
Running
Running
File size: 3,596 Bytes
3f76ff4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | "use client";
import type { WorkPackage, WorkPackagePhase } from "@/lib/work-package-types";
import { WorkPackageCard } from "@/components/WorkPackageCard";
import { WorkPackageDetail } from "@/components/WorkPackageDetail";
import { Badge } from "@/components/ui/badge";
const PHASES: WorkPackagePhase[] = [
"Stakeholder Needs",
"Specify Product",
"Design Product",
"Verify and Validate Product",
];
export function WorkPackageBoard(props: {
workPackages: WorkPackage[];
activeWorkPackageId?: string;
selectedWorkPackageId?: string;
onSelect: (id: string) => void;
onPrefill: (text: string) => void;
detailOpen: boolean;
onBackToBoard: () => void;
}) {
const {
workPackages,
activeWorkPackageId,
selectedWorkPackageId,
onSelect,
onPrefill,
detailOpen,
onBackToBoard,
} = props;
const selectedWorkPackage = workPackages.find(
(workPackage) => workPackage.id === selectedWorkPackageId,
);
const phaseCount = PHASES.filter((phase) =>
workPackages.some((workPackage) => workPackage.phase === phase),
).length;
return (
<div className="flex h-full min-h-0 flex-col rounded-2xl bg-muted/24">
<div className="px-3 py-3 md:px-4">
<div className="flex items-center justify-between gap-2">
<div>
<div className="text-sm font-semibold">Work Package Zone</div>
<div className="text-xs text-muted-foreground">
{detailOpen
? "Selected package detail view"
: "Scrollable board of work package cards"}
</div>
</div>
<div className="flex flex-wrap items-center gap-1">
<Badge variant="outline" className="text-[11px]">
{workPackages.length} packages
</Badge>
<Badge variant="outline" className="text-[11px]">
{phaseCount} phases
</Badge>
<Badge variant="outline" className="text-[11px]">
{detailOpen ? "detail" : "board"}
</Badge>
</div>
</div>
</div>
{detailOpen ? (
<WorkPackageDetail
workPackage={selectedWorkPackage}
activeWorkPackageId={activeWorkPackageId}
onPrefill={onPrefill}
onBack={onBackToBoard}
/>
) : (
<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
<div className="px-3 pb-10 md:px-4">
{PHASES.map((phase) => {
const items = workPackages.filter((wp) => wp.phase === phase);
if (!items.length) return null;
return (
<div key={phase} className="mb-6">
<div className="mb-2 flex items-center justify-between gap-2">
<div className="text-xs font-semibold text-muted-foreground">
{phase}
</div>
</div>
<div className="grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{items.map((wp) => (
<WorkPackageCard
key={wp.id}
wp={wp}
activeWorkPackageId={activeWorkPackageId}
selected={wp.id === selectedWorkPackageId}
onSelect={() => onSelect(wp.id)}
onPrefill={onPrefill}
/>
))}
</div>
</div>
);
})}
</div>
</div>
)}
</div>
);
}
|