Upload vendor-contracts/page.tsx

vendor-contracts/page.tsx

@@ -0,0 +1,79 @@
+'use client'
+import { useState } from 'react'
+
+type ContractStatus = 'draft' | 'sent' | 'signed' | 'amended' | 'disputed' | 'completed'
+
+const vendorContracts = [
+  { id:'CTR-001', client:'Amaya & Ruwan', type:'Full Day Photography', status:'signed' as ContractStatus, date:'Nov 1, 2026', amount:'₨ 150,000', version:1 },
+  { id:'CTR-005', client:'Nisha & Kaveen', type:'Ceremony Coverage', status:'sent' as ContractStatus, date:'Nov 8, 2026', amount:'₨ 85,000', version:1 },
+  { id:'CTR-008', client:'Thilini & Ashan', type:'Pre-Wedding Shoot', status:'draft' as ContractStatus, date:'Nov 10, 2026', amount:'₨ 65,000', version:1 },
+  { id:'CTR-012', client:'Sara & Ruwan', type:'Full Day Photography', status:'amended' as ContractStatus, date:'Oct 28, 2026', amount:'₨ 150,000', version:2 },
+]
+
+const sCfg: Record<ContractStatus,{label:string;bg:string;text:string}> = {
+  draft:{label:'Draft',bg:'bg-charcoal-100',text:'text-charcoal-400'},
+  sent:{label:'Sent',bg:'bg-gold-50',text:'text-gold-600'},
+  signed:{label:'Signed',bg:'bg-sage-50',text:'text-sage-600'},
+  amended:{label:'Amended',bg:'bg-rose-50',text:'text-rose-500'},
+  disputed:{label:'Disputed',bg:'bg-rose-100',text:'text-rose-600'},
+  completed:{label:'Completed',bg:'bg-sage-100',text:'text-sage-700'},
+}
+
+export default function VendorContracts() {
+  const [filter, setFilter] = useState('all')
+
+  const filtered = vendorContracts.filter(c => {
+    if(filter==='all') return true
+    if(filter==='pending') return c.status==='sent'||c.status==='amended'||c.status==='draft'
+    if(filter==='active') return c.status==='signed'
+    if(filter==='completed') return c.status==='completed'
+    return true
+  })
+
+  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">Contracts</h1>
+            <p className="text-charcoal-400 mt-1">{vendorContracts.length} total · {vendorContracts.filter(c=>c.status==='sent').length} pending client action</p>
+          </div>
+          <button className="wedding-btn-gold text-sm">+ Build New Contract</button>
+        </div>
+
+        <div className="flex gap-1 bg-ivory-100 rounded-xl p-1 mb-6">
+          {['all','pending','active','completed'].map(t=>(
+            <button key={t} onClick={()=>setFilter(t)}
+              className={"px-4 py-2 rounded-lg text-sm font-medium capitalize transition-colors "+(filter===t?'bg-white text-charcoal-700 shadow-soft':'text-charcoal-400 hover:text-charcoal-600')}>{t}</button>
+          ))}
+        </div>
+
+        <div className="space-y-4">
+          {filtered.map(c=>{
+            const cfg=sCfg[c.status]
+            return (
+              <a key={c.id} href={"#"} className="wedding-card-hover block p-6">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <div className="flex items-center gap-3 mb-2">
+                      <h3 className="font-heading text-lg font-semibold text-charcoal-700">{c.client}</h3>
+                      <span className={"wedding-badge "+cfg.bg+" "+cfg.text}>{cfg.label}</span>
+                      {(c.status==='sent'||c.status==='amended')&&<span className="wedding-badge bg-rose-50 text-rose-500 animate-pulse">Awaiting Client</span>}
+                    </div>
+                    <div className="flex items-center gap-4 text-sm text-charcoal-400">
+                      <span>{c.id}</span><span>·</span><span>{c.type}</span><span>·</span><span>v{c.version}</span><span>·</span><span>{c.date}</span>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-heading text-lg font-semibold text-charcoal-700">{c.amount}</p>
+                    <p className="text-xs text-charcoal-400">contract value</p>
+                  </div>
+                </div>
+              </a>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}