Upload src/app/planner/page.tsx

src/app/planner/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+import { useState } from 'react'
+
+const tasks = [
+  { id:'1', task:'Book venue', status:'completed', date:'Nov 1', cat:'Venue' },
+  { id:'2', task:'Finalize guest list', status:'completed', date:'Nov 5', cat:'Planning' },
+  { id:'3', task:'Sign photographer contract', status:'active', date:'Nov 15', cat:'Contract' },
+  { id:'4', task:'Choose floral arrangements', status:'active', date:'Nov 20', cat:'Décor' },
+  { id:'5', task:'Book caterer tasting', status:'upcoming', date:'Dec 1', cat:'Catering' },
+  { id:'6', task:'Order wedding invitations', status:'upcoming', date:'Dec 10', cat:'Stationery' },
+]
+
+const budget = [
+  { cat:'Venue', budgeted:550000, spent:400000 },
+  { cat:'Photography', budgeted:150000, spent:0 },
+  { cat:'Catering', budgeted:250000, spent:25000 },
+  { cat:'Florals', budgeted:80000, spent:0 },
+  { cat:'Music & DJ', budgeted:75000, spent:75000 },
+]
+
+export default function PlannerPage() {
+  const [guests, setGuests] = useState(180)
+  const totalBudget = budget.reduce((s,b)=>s+b.budgeted,0)
+  const totalSpent = budget.reduce((s,b)=>s+b.spent,0)
+  const done = tasks.filter(t=>t.status==='completed').length
+
+  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">My Planner</h1><p className="text-charcoal-400 mt-1">{done}/{tasks.length} tasks completed</p></div>
+          <button className="wedding-btn-primary text-sm">+ Add Task</button>
+        </div>
+        <div className="grid lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-6">
+            <div className="wedding-card p-6">
+              <h2 className="font-heading text-xl font-semibold text-charcoal-700 mb-4">Task Checklist</h2>
+              <div className="space-y-3">{tasks.map(t=><div key={t.id} className="flex items-center gap-3 py-3 border-b border-ivory-100 last:border-0"><div className={"w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 "+(t.status==='completed'?'bg-sage-500 border-sage-500':t.status==='active'?'border-gold-400 bg-gold-50':'border-charcoal-200 bg-white')}>{t.status==='completed'?<span className="text-white text-xs">✓</span>:t.status==='active'?<span className="text-gold-500 text-xs">●</span>:null}</div><div className="flex-1"><p className={"text-sm font-medium "+(t.status==='completed'?'text-charcoal-300 line-through':'text-charcoal-700')}>{t.task}</p><p className="text-xs text-charcoal-400">{t.date} · {t.cat}</p></div><span className={"wedding-badge text-xs "+(t.status==='completed'?'bg-sage-50 text-sage-600':t.status==='active'?'bg-gold-50 text-gold-600':'bg-ivory-100 text-charcoal-400')}>{t.status==='completed'?'Done':t.status==='active'?'Active':'Upcoming'}</span></div>)}</div>
+            </div>
+          </div>
+          <div className="space-y-6">
+            <div className="wedding-card p-6"><h2 className="font-heading text-xl font-semibold text-charcoal-700 mb-4">Budget Tracker</h2><div className="text-center mb-4"><p className="text-3xl font-heading font-semibold text-charcoal-700">₨{(totalBudget/1000).toFixed(0)}K</p><p className="text-xs text-charcoal-400 mt-1">₨{(totalSpent/1000).toFixed(0)}K spent ({Math.round(totalSpent/totalBudget*100)}%)</p></div><div className="w-full bg-ivory-200 rounded-full h-2 mb-4"><div className="bg-gradient-to-r from-gold-300 to-gold-500 h-2 rounded-full" style={{width:`${(totalSpent/totalBudget)*100}%`}}/></div>{budget.map(b=><div key={b.cat}><div className="flex justify-between text-xs mb-1"><span className="text-charcoal-600">{b.cat}</span><span className="text-charcoal-400">₨{(b.spent/1000).toFixed(0)}K / ₨{(b.budgeted/1000).toFixed(0)}K</span></div><div className="w-full bg-ivory-100 rounded-full h-1.5"><div className={"h-1.5 rounded-full "+(b.spent>=b.budgeted?'bg-rose-400':'bg-sage-400')} style={{width:`${Math.min(b.spent/b.budgeted*100,100)}%`}}/></div></div>)}</div>
+            <div className="wedding-card p-6"><h2 className="font-heading text-xl font-semibold text-charcoal-700 mb-4">Guest Count</h2><div className="text-center"><p className="text-5xl font-heading font-semibold text-charcoal-700">{guests}</p><p className="text-sm text-charcoal-400 mt-1">expected guests</p><div className="flex items-center justify-center gap-4 mt-4"><button onClick={()=>setGuests(Math.max(1,guests-10))} className="w-10 h-10 rounded-full border border-ivory-200 text-charcoal-400">−</button><input type="number" value={guests} onChange={e=>setGuests(Math.max(1,parseInt(e.target.value)||1))} className="w-20 text-center wedding-input"/><button onClick={()=>setGuests(guests+10)} className="w-10 h-10 rounded-full border border-ivory-200 text-charcoal-400">+</button></div></div></div>
+            <a href="/contracts" className="block wedding-btn-outline w-full text-sm text-center">View Contracts →</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}