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/VendorDetailPage.tsx
+++ b/components/vendor/VendorDetailPage.tsx
@@ -0,0 +1,97 @@
+// 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}
+      />
+    </>
+  )
+}