97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
// components/vendors/VendorDetailPage.tsx
|
|
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Vendor, VendorType, VendorStatus } from '@prisma/client'
|
|
import { VendorHeader } from './VendorHeader'
|
|
import { ContactCard } from './ContactCard'
|
|
import { FinancialCard } from './FinancialCard'
|
|
import { NotesCard } from './NotesCard'
|
|
import { SidebarCards } from './SidebarCard'
|
|
import { EditVendorModal } from './EditVendorModal'
|
|
|
|
interface VendorWithEvents extends Vendor {
|
|
address: {
|
|
street: string
|
|
city: string
|
|
state: string
|
|
zip: number
|
|
} | null
|
|
events: Array<{
|
|
id: string
|
|
name: string
|
|
date: Date | null
|
|
}>
|
|
}
|
|
|
|
interface VendorDetailPageProps {
|
|
vendor: VendorWithEvents
|
|
}
|
|
|
|
export function VendorDetailPage({ vendor }: VendorDetailPageProps) {
|
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false)
|
|
const [currentVendor, setCurrentVendor] = useState(vendor)
|
|
|
|
const handleSave = async (updatedVendor: any) => {
|
|
setCurrentVendor(updatedVendor)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="container mx-auto py-6 space-y-6">
|
|
<VendorHeader
|
|
vendor={currentVendor}
|
|
onEditClick={() => setIsEditModalOpen(true)}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Left Column - Main Info */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<ContactCard
|
|
contactPerson={currentVendor.contactPerson}
|
|
email={currentVendor.email}
|
|
phone={currentVendor.phone}
|
|
website={currentVendor.website}
|
|
address={currentVendor.address}
|
|
/>
|
|
|
|
<FinancialCard
|
|
quotedPrice={currentVendor.quotedPrice}
|
|
finalCost={currentVendor.finalCost}
|
|
depositPaid={currentVendor.depositPaid}
|
|
depositDueDate={currentVendor.depositDueDate}
|
|
finalPaymentDue={currentVendor.finalPaymentDue}
|
|
paymentNotes={currentVendor.paymentNotes}
|
|
/>
|
|
|
|
<NotesCard
|
|
notes={currentVendor.notes}
|
|
contractUrl={currentVendor.contractUrl}
|
|
proposalUrl={currentVendor.proposalUrl}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Column - Sidebar */}
|
|
<SidebarCards
|
|
description={currentVendor.description}
|
|
events={currentVendor.events}
|
|
timeline={{
|
|
createdAt: currentVendor.createdAt,
|
|
bookedDate: currentVendor.bookedDate,
|
|
depositDueDate: currentVendor.depositDueDate,
|
|
finalPaymentDue: currentVendor.finalPaymentDue,
|
|
}}
|
|
vendorId={currentVendor.id}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<EditVendorModal
|
|
vendor={currentVendor}
|
|
isOpen={isEditModalOpen}
|
|
onClose={() => setIsEditModalOpen(false)}
|
|
onSave={handleSave}
|
|
/>
|
|
</>
|
|
)
|
|
} |