added idividual vendor pages

2026-01-27 12:59:24 -05:00
parent 3aa9b6f325
commit aa2f30c086
11 changed files with 1212 additions and 19 deletions
--- a/components/vendor/VendorHeader.tsx
+++ b/components/vendor/VendorHeader.tsx
@@ -0,0 +1,67 @@
+// components/vendors/VendorHeader.tsx
+import { Vendor, VendorType, VendorStatus } from '@prisma/client'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+
+interface VendorHeaderProps {
+  vendor: {
+    id: string
+    name: string
+    type: VendorType
+    status: VendorStatus
+    isBooked: boolean
+    createdAt: Date
+  }
+  onEditClick: () => void
+}
+
+const formatVendorType = (type: VendorType): string => {
+  return type.charAt(0) + type.slice(1).toLowerCase()
+}
+
+const formatStatus = (status: VendorStatus): { label: string, color: string } => {
+    const statusMap: Record<VendorStatus, { label: string, color: string }> = {
+        RESEARCHING: { label: 'Researching', color: 'bg-gray-100 text-gray-800' },
+        CONTACTING: { label: 'Contacting', color: 'bg-blue-100 text-blue-800' },
+        RESPONDED: { label: 'Responded', color: 'bg-yellow-100 text-yellow-800' },
+        PROPOSAL_RECEIVED: { label: 'Proposal Received', color: 'bg-purple-100 text-purple-800' },
+        NEGOTIATING: { label: 'Negotiating', color: 'bg-orange-100 text-orange-800' },
+        CONTRACT_SENT: { label: 'Contract Sent', color: 'bg-indigo-100 text-indigo-800' },
+        CONTRACT_SIGNED: { label: 'Contract Signed', color: 'bg-green-100 text-green-800' },
+        DECLINED: { label: 'Declined', color: 'bg-red-100 text-red-800' },
+        BACKUP: { label: 'Backup', color: 'bg-slate-100 text-slate-800' },
+    }
+    return statusMap[status]
+}
+
+export function VendorHeader({ vendor, onEditClick }: VendorHeaderProps) {
+    const status = formatStatus(vendor.status)
+    
+    return (
+        <div className="flex justify-between items-start">
+            <div>
+                <div className="flex items-center gap-3 mb-2">
+                    <h1 className="text-3xl font-bold">{vendor.name}</h1>
+                    <Badge className={status.color}>{status.label}</Badge>
+                    {vendor.isBooked && (
+                        <Badge variant="default">Booked</Badge>
+                    )}
+                </div>
+                <p className="text-muted-foreground">
+                    {formatVendorType(vendor.type)} • Added {new Date(vendor.createdAt).toLocaleDateString()}
+                </p>
+            </div>
+            <div className="flex gap-2">
+                <Button variant="outline" onClick={onEditClick}>
+                    Edit Vendor
+                </Button>
+                <Button asChild>
+                    <Link href="/vendors">
+                        Back to Vendors
+                    </Link>
+                </Button>
+            </div>
+        </div>
+    )
+}