Upload vendor-contract-builder/page.tsx

vendor-contract-builder/page.tsx

@@ -0,0 +1,201 @@
+'use client'
+import { useState } from 'react'
+
+interface Deliverable { id:string; desc:string; due:string; qty:number; criteria:string }
+interface Section { id:string; title:string; content:string; isDeliverables:boolean }
+
+export default function VendorContractBuilder() {
+  const [clientName, setClientName] = useState('Amaya & Ruwan')
+  const [contractType, setContractType] = useState('Full Day Photography')
+  const [amount, setAmount] = useState('150000')
+  const [sections, setSections] = useState<Section[]>([
+    { id:'1', title:'Scope of Services', content:'The Photographer shall provide professional wedding photography services on the wedding date, including pre-ceremony and reception coverage.', isDeliverables:false },
+    { id:'2', title:'Deliverables', content:'', isDeliverables:true },
+    { id:'3', title:'Timeline & Schedule', content:'Booking confirmation within 5 days. Pre-wedding consultation 2 weeks before. Full gallery delivery within 30 days post-event.', isDeliverables:false },
+    { id:'4', title:'Payment Terms', content:`Total contract value: Rs. ${parseInt(amount).toLocaleString()}. Deposit of 33% due on signing. Balance due 7 days before event.`, isDeliverables:false },
+    { id:'5', title:'Cancellation Policy', content:'Cancellation >60 days before: deposit forfeited. Within 60 days: 50% due. Within 30 days: full amount due.', isDeliverables:false },
+  ])
+
+  const [deliverables, setDeliverables] = useState<Deliverable[]>([
+    { id:'d1', desc:'Edited high-resolution digital images', due:'30 days post-event', qty:400, criteria:'Professional quality edits, color-corrected' },
+    { id:'d2', desc:'Online gallery', due:'35 days post-event', qty:1, criteria:'Password protected, accessible for 12 months' },
+    { id:'d3', desc:'USB drive with full-resolution images', due:'40 days post-event', qty:1, criteria:'Branded USB, all RAW + edited files' },
+    { id:'d4', desc:'Premium layflat photo album', due:'60 days post-event', qty:1, criteria:'30 pages minimum, premium paper, leather cover' },
+  ])
+
+  const [selectedTemplate, setSelectedTemplate] = useState('photography')
+  const [showPreview, setShowPreview] = useState(false)
+
+  const templates = [
+    { id:'photography', name:'Photography Contract', desc:'Standard coverage, deliverables, and usage rights' },
+    { id:'venue', name:'Venue Contract', desc:'Ceremony & reception, guest capacity, amenities' },
+    { id:'catering', name:'Catering Contract', desc:'Menu selection, guest count, dietary accommodations' },
+    { id:'florist', name:'Floral Design Contract', desc:'Arrangements, seasonal blooms, setup & teardown' },
+  ]
+
+  const addSection = () => setSections([...sections,{id:Date.now().toString(),title:'New Section',content:'',isDeliverables:false}])
+  const addDeliverable = () => setDeliverables([...deliverables,{id:Date.now().toString(),desc:'New deliverable',due:'TBD',qty:1,criteria:''}])
+
+  return (
+    <div className="min-h-screen bg-ivory-50">
+      <div className="wedding-section py-8">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="font-heading text-3xl font-semibold text-charcoal-700">{showPreview?'Preview Contract':'Build Contract'}</h1>
+            <p className="text-charcoal-400 mt-1">Create a legally binding agreement with audit trail</p>
+          </div>
+          <div className="flex gap-3">
+            <select value={selectedTemplate} onChange={e=>setSelectedTemplate(e.target.value)}
+              className="wedding-input w-auto text-sm">
+              <option value="">Blank contract</option>
+              {templates.map(t=><option key={t.id} value={t.id}>{t.name}</option>)}
+            </select>
+            <button onClick={()=>setShowPreview(!showPreview)} className="wedding-btn-outline text-sm">
+              {showPreview?'← Edit':'Preview →'}
+            </button>
+            <button className="wedding-btn-gold text-sm">✉️ Send to Client</button>
+          </div>
+        </div>
+
+        {!showPreview ? (
+          <div className="grid lg:grid-cols-3 gap-6">
+            {/* Left: Contract builder */}
+            <div className="lg:col-span-2 space-y-6">
+              {/* Header */}
+              <div className="wedding-card p-6">
+                <div className="grid sm:grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-xs font-semibold text-charcoal-500 uppercase tracking-wider mb-1 block">Client</label>
+                    <input value={clientName} onChange={e=>setClientName(e.target.value)} className="wedding-input" />
+                  </div>
+                  <div>
+                    <label className="text-xs font-semibold text-charcoal-500 uppercase tracking-wider mb-1 block">Service Type</label>
+                    <input value={contractType} onChange={e=>setContractType(e.target.value)} className="wedding-input" />
+                  </div>
+                  <div>
+                    <label className="text-xs font-semibold text-charcoal-500 uppercase tracking-wider mb-1 block">Amount (Rs)</label>
+                    <input value={amount} onChange={e=>setAmount(e.target.value)} className="wedding-input" type="number" />
+                  </div>
+                </div>
+              </div>
+
+              {/* Sections */}
+              {sections.map((sec,i) => (
+                <div key={sec.id} className="wedding-card p-6">
+                  <div className="flex items-center gap-2 mb-4">
+                    <span className="font-heading text-sm font-semibold text-gold-500">Section {i+1}</span>
+                    <input value={sec.title} onChange={e=>{
+                      const s=[...sections];s[i].title=e.target.value;setSections(s)
+                    }} className="flex-1 text-lg font-heading font-semibold text-charcoal-700 bg-transparent border-none outline-none" />
+                    <button className="text-rose-400 hover:text-rose-600 text-xs">Remove</button>
+                  </div>
+                  {!sec.isDeliverables ? (
+                    <textarea value={sec.content} onChange={e=>{
+                      const s=[...sections];s[i].content=e.target.value;setSections(s)
+                    }} className="wedding-input h-24" placeholder="Enter contract text..." />
+                  ) : (
+                    <div className="space-y-4">
+                      {/* Deliverables */}
+                      {deliverables.map((d,j) => (
+                        <div key={d.id} className="p-4 bg-ivory-50 rounded-xl border border-ivory-200">
+                          <div className="grid sm:grid-cols-2 gap-3">
+                            <div className="sm:col-span-2">
+                              <label className="text-xs font-semibold text-charcoal-400 uppercase tracking-wider mb-1 block">Description</label>
+                              <input value={d.desc} onChange={e=>{
+                                const dl=[...deliverables];dl[j].desc=e.target.value;setDeliverables(dl)
+                              }} className="wedding-input text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs font-semibold text-charcoal-400 uppercase tracking-wider mb-1 block">Due Date</label>
+                              <input value={d.due} onChange={e=>{
+                                const dl=[...deliverables];dl[j].due=e.target.value;setDeliverables(dl)
+                              }} className="wedding-input text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs font-semibold text-charcoal-400 uppercase tracking-wider mb-1 block">Quantity</label>
+                              <input value={d.qty} onChange={e=>{
+                                const dl=[...deliverables];dl[j].qty=parseInt(e.target.value)||0;setDeliverables(dl)
+                              }} className="wedding-input text-sm" type="number" />
+                            </div>
+                            <div className="sm:col-span-2">
+                              <label className="text-xs font-semibold text-charcoal-400 uppercase tracking-wider mb-1 block">Acceptance Criteria</label>
+                              <input value={d.criteria} onChange={e=>{
+                                const dl=[...deliverables];dl[j].criteria=e.target.value;setDeliverables(dl)
+                              }} className="wedding-input text-sm" />
+                            </div>
+                          </div>
+                          <button className="text-xs text-rose-400 hover:text-rose-600 mt-2">Remove deliverable</button>
+                        </div>
+                      ))}
+                      <button onClick={addDeliverable} className="wedding-btn-outline text-xs w-full">+ Add Deliverable</button>
+                    </div>
+                  )}
+                </div>
+              ))}
+              <button onClick={addSection} className="wedding-btn-outline text-sm w-full">+ Add Section</button>
+            </div>
+
+            {/* Right: Templates panel */}
+            <div className="space-y-6">
+              <div className="wedding-card p-6 sticky top-24">
+                <h2 className="font-heading text-lg font-semibold text-charcoal-700 mb-4">Templates</h2>
+                <p className="text-xs text-charcoal-400 mb-4">
+                  Save and reuse contract structures per service category. Templates require admin approval before going live.
+                </p>
+                <div className="space-y-3">
+                  {templates.map(t=>(
+                    <button key={t.id} onClick={()=>setSelectedTemplate(t.id)}
+                      className={"w-full text-left p-4 rounded-xl border transition-colors "+(selectedTemplate===t.id?'border-gold-300 bg-gold-50':'border-ivory-200 hover:border-gold-200')}>
+                      <p className="font-heading text-sm font-semibold text-charcoal-700">{t.name}</p>
+                      <p className="text-xs text-charcoal-400 mt-1">{t.desc}</p>
+                    </button>
+                  ))}
+                </div>
+                <div className="mt-4 pt-4 border-t border-ivory-200">
+                  <button className="wedding-btn-gold w-full text-sm">💾 Save as Template</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          /* Preview mode */
+          <div className="max-w-3xl mx-auto">
+            <div className="wedding-card p-10">
+              <div className="text-center mb-10 pb-10 border-b border-ivory-200">
+                <h1 className="font-heading text-3xl font-semibold text-charcoal-700 mb-2">{contractType}</h1>
+                <p className="text-sm text-charcoal-400">Between: Lens & Light Studio and {clientName}</p>
+                <p className="text-sm text-charcoal-400">Date: {new Date().toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'})}</p>
+                <p className="font-heading text-2xl font-semibold text-charcoal-700 mt-4">Rs. {parseInt(amount).toLocaleString()}</p>
+              </div>
+              <div className="space-y-8">
+                {sections.map((sec,i) => (
+                  <div key={sec.id}>
+                    <h3 className="font-heading text-lg font-semibold text-charcoal-700 mb-3">{i+1}. {sec.title}</h3>
+                    {!sec.isDeliverables ? (
+                      <p className="text-sm text-charcoal-500 leading-relaxed">{sec.content}</p>
+                    ) : (
+                      <div className="space-y-3">
+                        {deliverables.map(d=>(
+                          <div key={d.id} className="p-3 bg-ivory-50 rounded-lg">
+                            <p className="text-sm font-medium text-charcoal-700">{d.desc}</p>
+                            <p className="text-xs text-charcoal-400 mt-1">Due: {d.due} · Qty: {d.qty} · Criteria: {d.criteria}</p>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <div className="mt-10 pt-10 border-t border-ivory-200">
+                <p className="text-xs text-charcoal-400 text-center">
+                  This contract is created using the Evermore platform. All versions are immutably stored with a full audit trail.
+                  E-signatures are legally binding under the Electronic Transactions Act.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}