190 lines
11 KiB
TypeScript
190 lines
11 KiB
TypeScript
import { createClient } from '@/lib/supabase/server'
|
|
import Link from 'next/link'
|
|
import { redirect } from 'next/navigation'
|
|
|
|
function IcoUsers({ className }: { className?: string }) {
|
|
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
|
}
|
|
function IcoDues({ className }: { className?: string }) {
|
|
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
|
|
}
|
|
function IcoTask({ className }: { className?: string }) {
|
|
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
}
|
|
function IcoPay({ className }: { className?: string }) {
|
|
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></svg>
|
|
}
|
|
function IcoPlus({ className }: { className?: string }) {
|
|
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
|
}
|
|
|
|
export default async function DashboardPage() {
|
|
const supabase = await createClient()
|
|
const { data: { user } } = await supabase.auth.getUser()
|
|
if (!user) redirect('/login')
|
|
|
|
const { data: member } = await supabase
|
|
.from('space_members')
|
|
.select('space_id, display_name, role')
|
|
.eq('user_id', user.id)
|
|
.in('status', ['current', 'unverified', 'late'])
|
|
.maybeSingle()
|
|
|
|
if (!member?.space_id) redirect('/signup')
|
|
|
|
const spaceId = member.space_id
|
|
|
|
const [
|
|
{ count: activeMembers },
|
|
{ count: openTasks },
|
|
{ count: unlinkedPayments },
|
|
{ data: tasks },
|
|
{ data: projects },
|
|
{ data: activity },
|
|
] = await Promise.all([
|
|
supabase.from('space_members').select('*', { count: 'exact', head: true }).eq('space_id', spaceId).eq('status', 'current'),
|
|
supabase.from('tasks').select('*', { count: 'exact', head: true }).eq('space_id', spaceId).in('status', ['open', 'claimed', 'in_progress']),
|
|
supabase.from('payments').select('*', { count: 'exact', head: true }).eq('space_id', spaceId).eq('link_status', 'unlinked'),
|
|
supabase.from('tasks').select('*').eq('space_id', spaceId).neq('status', 'done').order('due_date', { ascending: true, nullsFirst: false }).limit(5),
|
|
supabase.from('projects').select('*').eq('space_id', spaceId).in('status', ['in_progress', 'blocked', 'review']).limit(3),
|
|
supabase.from('activity_log').select('*').eq('space_id', spaceId).order('created_at', { ascending: false }).limit(6),
|
|
])
|
|
|
|
const overdueTasks = (tasks ?? []).filter((t: any) => t.due_date && new Date(t.due_date) < new Date())
|
|
|
|
const stats = [
|
|
{ label: 'Active Members', value: activeMembers ?? 0, Ico: IcoUsers, sub: 'in your space', warn: false },
|
|
{ label: 'Dues Current', value: Math.max(0, (activeMembers ?? 0) - (unlinkedPayments ?? 0)), Ico: IcoDues, sub: `${unlinkedPayments ?? 0} unpaid / unverified`, warn: (unlinkedPayments ?? 0) > 0 },
|
|
{ label: 'Open Tasks', value: openTasks ?? 0, Ico: IcoTask, sub: `${overdueTasks.length} overdue`, warn: (openTasks ?? 0) > 0 },
|
|
{ label: 'Unlinked Payments', value: unlinkedPayments ?? 0, Ico: IcoPay, sub: 'needs reconciliation', warn: (unlinkedPayments ?? 0) > 0 },
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<div className="bg-sidebar px-6 py-3 flex items-center justify-between">
|
|
<h1 className="text-white font-sans text-lg font-semibold">Dashboard</h1>
|
|
<Link href="/tasks" className="flex items-center gap-1.5 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">
|
|
<IcoPlus className="w-3.5 h-3.5" />
|
|
Quick Task
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6">
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{stats.map(({ label, value, Ico, sub, warn }) => (
|
|
<div key={label} className="bg-card rounded border border-border p-5">
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2 flex items-center gap-1.5">
|
|
<Ico className="w-3 h-3" /> {label}
|
|
</p>
|
|
<p className={`text-3xl font-sans font-bold ${warn ? 'text-orange-500' : 'text-primary'}`}>{value}</p>
|
|
<p className="font-sans text-xs text-muted-foreground mt-1">{sub}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-[1fr_300px] gap-6">
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Quick Chores</p>
|
|
<Link href="/tasks" className="font-sans text-xs text-primary hover:underline">All tasks</Link>
|
|
</div>
|
|
<div className="bg-card rounded border border-border divide-y divide-border">
|
|
{(tasks ?? []).length > 0 ? (tasks ?? []).map((task: any) => {
|
|
const isOverdue = task.due_date && new Date(task.due_date) < new Date()
|
|
const isDueToday = task.due_date && new Date(task.due_date).toDateString() === new Date().toDateString()
|
|
return (
|
|
<div key={task.id} className={`flex items-center gap-3 px-4 py-3 ${isOverdue ? 'border-l-2 border-red-400' : ''}`}>
|
|
<div className="w-4 h-4 rounded border-2 border-border flex-shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-sans text-sm text-foreground truncate">{task.title}</p>
|
|
<p className="font-mono text-[10px] text-muted-foreground mt-0.5">
|
|
{[task.area, task.recurrence && task.recurrence !== 'none' ? `${task.recurrence}` : null, task.due_date ? `due ${new Date(task.due_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}` : null].filter(Boolean).join(' · ')}
|
|
</p>
|
|
</div>
|
|
{isOverdue ? (
|
|
<span className="font-mono text-[10px] text-red-600 bg-red-50 px-2 py-0.5 rounded">OVERDUE</span>
|
|
) : isDueToday ? (
|
|
<span className="font-mono text-[10px] text-orange-600 bg-orange-50 px-2 py-0.5 rounded">TODAY</span>
|
|
) : (
|
|
<span className="font-mono text-[10px] text-muted-foreground bg-muted px-2 py-0.5 rounded">OPEN</span>
|
|
)}
|
|
<Link href="/tasks" className="font-mono text-[10px] border border-border px-2 py-0.5 rounded hover:border-primary hover:text-primary transition">
|
|
CLAIM
|
|
</Link>
|
|
</div>
|
|
)
|
|
}) : (
|
|
<div className="px-4 py-10 text-center text-muted-foreground font-sans text-sm">No open tasks — great work!</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Active Projects</p>
|
|
<Link href="/projects" className="font-sans text-xs text-primary hover:underline">All projects</Link>
|
|
</div>
|
|
<div className="bg-card rounded border border-border divide-y divide-border">
|
|
{(projects ?? []).length > 0 ? (projects ?? []).map((project: any) => (
|
|
<div key={project.id} className="px-4 py-4">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<p className="font-sans text-sm font-medium text-foreground">{project.title}</p>
|
|
<span className={`font-mono text-[10px] px-2 py-0.5 rounded ${
|
|
project.status === 'in_progress' ? 'text-primary bg-primary/10' :
|
|
project.status === 'blocked' ? 'text-orange-600 bg-orange-50' : 'text-blue-600 bg-blue-50'
|
|
}`}>
|
|
{project.status.replace(/_/g, ' ').toUpperCase()}
|
|
</span>
|
|
</div>
|
|
{project.description && <p className="font-mono text-[10px] text-muted-foreground mb-2 truncate">{project.description}</p>}
|
|
<div className="h-1 bg-border rounded-full overflow-hidden">
|
|
<div className={`h-full rounded-full ${project.status === 'blocked' ? 'bg-orange-400' : 'bg-primary'}`} style={{ width: `${project.progress ?? 0}%` }} />
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="px-4 py-8 text-center text-muted-foreground font-sans text-sm">No active projects</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Payment Alerts</p>
|
|
<Link href="/payments" className="font-sans text-xs text-primary hover:underline">Reconcile</Link>
|
|
</div>
|
|
<div className="bg-card rounded border border-border px-4 py-6 text-center">
|
|
<p className="font-sans text-xs text-muted-foreground">
|
|
<Link href="/settings" className="text-primary hover:underline">Connect a payment platform</Link>
|
|
{' '}to see alerts here.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">Recent Activity</p>
|
|
<div className="space-y-3">
|
|
{(activity ?? []).length > 0 ? (activity ?? []).map((item: any) => (
|
|
<div key={item.id} className="flex items-start gap-2.5">
|
|
<div className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0 bg-primary" />
|
|
<div>
|
|
<p className="font-sans text-xs text-foreground">
|
|
<span className="font-medium">{item.display_name || 'System'}</span>{' '}{item.action}
|
|
</p>
|
|
<p className="font-mono text-[10px] text-muted-foreground">{new Date(item.created_at).toLocaleDateString()}</p>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<p className="font-sans text-xs text-muted-foreground">No recent activity yet.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|