67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
// 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>
|
|
)
|
|
} |