107 lines
4.5 KiB
TypeScript
107 lines
4.5 KiB
TypeScript
import { getAvailableOrders } from '@/app/actions'
|
|
import { OrderCard } from '@/components/OrderCard'
|
|
import { Sparkles, Plus, Store } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { buttonVariants } from '@/components/ui/button'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export const dynamic = 'force-dynamic'
|
|
|
|
export default async function Dashboard() {
|
|
const orders = await getAvailableOrders()
|
|
|
|
return (
|
|
<div className="animate-in fade-in space-y-8 duration-500">
|
|
{/* Banner / Hero Section */}
|
|
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-[#1B2CC1] via-[#2135E0] to-[#121E85] p-6 text-white shadow-xl shadow-[#1B2CC1]/15 sm:p-8">
|
|
<div className="pointer-events-none absolute top-0 right-0 -mt-10 -mr-10 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
|
|
<div className="relative z-10 max-w-2xl space-y-3">
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/15 px-3 py-1 text-xs font-bold text-blue-100 backdrop-blur-md">
|
|
<Sparkles className="h-3.5 w-3.5" />
|
|
<span>Sistem Titip & Jastip Cepat</span>
|
|
</div>
|
|
<h2 className="text-2xl leading-tight font-black tracking-tight sm:text-3xl">
|
|
Titip Makanan & Minuman Bareng Teman Kantor
|
|
</h2>
|
|
<p className="max-w-xl text-sm leading-relaxed text-blue-100/90">
|
|
Pilih PO yang sedang buka hari ini, tentukan menu favoritmu, dan biarkan pembuat PO
|
|
mengurus tagihan secara praktis.
|
|
</p>
|
|
<div className="flex flex-wrap gap-3 pt-2">
|
|
<Link
|
|
href="/my-orders"
|
|
className={cn(
|
|
buttonVariants(),
|
|
'h-10 gap-2 rounded-xl bg-white px-5 font-bold text-[#1B2CC1] shadow-md hover:bg-blue-50'
|
|
)}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Buka Jasa PO Baru
|
|
</Link>
|
|
<Link
|
|
href="/my-purchases"
|
|
className={cn(
|
|
buttonVariants({ variant: 'outline' }),
|
|
'h-10 rounded-xl border-white/20 bg-white/10 px-4 font-semibold text-white hover:bg-white/20'
|
|
)}
|
|
>
|
|
Lihat Titipan Saya
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Grid Header */}
|
|
<div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-2.5 w-2.5 animate-pulse rounded-full bg-[#1B2CC1]" />
|
|
<h2 className="text-xl font-black tracking-tight text-slate-900 dark:text-white">
|
|
Daftar PO Terbuka Hari Ini
|
|
</h2>
|
|
</div>
|
|
<p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">
|
|
Pesanan dengan status OPEN yang bisa Anda ikuti hari ini.
|
|
</p>
|
|
</div>
|
|
|
|
<span className="rounded-xl bg-[#1B2CC1]/10 px-3 py-1.5 text-xs font-bold text-[#1B2CC1]">
|
|
Total: {orders.length} PO Aktif
|
|
</span>
|
|
</div>
|
|
|
|
{orders.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm sm:p-16 dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-[#1B2CC1]/10 text-[#1B2CC1]">
|
|
<Store className="h-8 w-8" />
|
|
</div>
|
|
<h3 className="mb-1 text-lg font-bold text-slate-800 dark:text-slate-200">
|
|
Belum Ada PO yang Dibuka Hari Ini
|
|
</h3>
|
|
<p className="mb-6 max-w-md text-xs leading-relaxed text-slate-500">
|
|
Mau jajan atau beli sesuatu? Jadilah orang pertama yang membuka jasa titip pesanan untuk
|
|
teman-teman Anda!
|
|
</p>
|
|
<Link
|
|
href="/my-orders"
|
|
className={cn(
|
|
buttonVariants(),
|
|
'h-10 gap-2 rounded-xl bg-[#1B2CC1] px-5 font-bold text-white shadow-md shadow-[#1B2CC1]/25 hover:bg-[#15229E]'
|
|
)}
|
|
>
|
|
<Plus className="h-4 w-4" /> Buka PO Sekarang
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="flex h-full flex-col space-y-4">
|
|
<div className="flex max-h-[calc(100vh-260px)] scrollbar-thin flex-col space-y-4 overflow-y-auto pr-2">
|
|
{orders.map((order: any) => (
|
|
<OrderCard key={order.id} order={order} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|