feat: bootstrap TitipIn application with fullstack architecture, Prisma ORM, and shadcn/ui components

2026-08-28 11:18:13 +07:00
parent 84f0c1fa99
commit 5faea68379
37 changed files with 11881 additions and 250 deletions
@@ -0,0 +1,114 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
+import { Menu, Calendar, Store, ClipboardList, Package, User, FileText } from 'lucide-react'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import Link from 'next/link'
+import { format } from 'date-fns'
+import { id as idLocale } from 'date-fns/locale'
+
+export function Header({ onMenuClick }: { onMenuClick: () => void }) {
+  const pathname = usePathname()
+  const [todayStr, setTodayStr] = useState('')
+
+  useEffect(() => {
+    setTodayStr(format(new Date(), 'EEEE, dd MMMM yyyy', { locale: idLocale }))
+  }, [])
+
+  const getPageInfo = () => {
+    switch (pathname) {
+      case '/':
+        return {
+          title: 'Open Order Hari Ini',
+          subtitle: 'Daftar pesanan aktif yang siap kamu titip.',
+          badge: 'Live PO',
+          Icon: Store
+        }
+      case '/my-orders':
+        return {
+          title: 'Jasa Order Saya',
+          subtitle: 'Kelola PO yang Anda buka untuk teman-teman.',
+          badge: 'Manajemen PO',
+          Icon: ClipboardList
+        }
+      case '/my-purchases':
+        return {
+          title: 'Pesanan Saya',
+          subtitle: 'Pantau barang yang Anda titip beserta status tagihannya.',
+          badge: 'Riwayat Titipan',
+          Icon: Package
+        }
+      case '/profile':
+        return {
+          title: 'Pengaturan Profil',
+          subtitle: 'Kelola identitas dan preferensi akun Anda.',
+          badge: 'Akun',
+          Icon: User
+        }
+      default:
+        if (pathname.startsWith('/my-orders/')) {
+          return {
+            title: 'Detail & Rekap Order',
+            subtitle: 'Rincian pesanan, tagihan pemesan, dan ringkasan belanja.',
+            badge: 'Detail PO',
+            Icon: FileText
+          }
+        }
+        return {
+          title: 'TitipIn Dashboard',
+          subtitle: 'Sistem Titip Pesanan Bersama',
+          badge: 'Dashboard',
+          Icon: Store
+        }
+    }
+  }
+
+  const { title, subtitle, badge, Icon } = getPageInfo()
+
+  return (
+    <header className="sticky top-0 z-30 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md border-b border-slate-200/80 dark:border-slate-800 px-6 py-4">
+      <div className="flex items-center justify-between gap-4">
+        {/* Left: Mobile hamburger & Page Title */}
+        <div className="flex items-center gap-3">
+          <button 
+            onClick={onMenuClick}
+            className="lg:hidden p-2 rounded-xl border border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+          
+          <div className="flex items-center gap-3 sm:gap-4">
+            <div className="hidden sm:flex items-center justify-center w-11 h-11 md:w-12 md:h-12 rounded-xl border border-blue-100 dark:border-blue-900/50 bg-gradient-to-br from-blue-50 to-[#1B2CC1]/10 dark:from-[#1B2CC1]/20 dark:to-[#121E85]/20 shadow-inner shrink-0">
+              <Icon className="w-5 h-5 md:w-6 md:h-6 text-[#1B2CC1] dark:text-blue-400" strokeWidth={2.5} />
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <h1 className="text-xl sm:text-2xl font-black tracking-tight text-slate-900 dark:text-white">
+                  {title}
+                </h1>
+                <span className="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-[#1B2CC1]/10 text-[#1B2CC1] dark:bg-blue-900/40 dark:text-blue-300">
+                  {badge}
+                </span>
+              </div>
+              <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 hidden sm:block">
+                {subtitle}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: Date info & Quick Action */}
+        <div className="flex items-center gap-3">
+          {todayStr && (
+            <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-100/70 dark:bg-slate-800/60 border border-slate-200/60 dark:border-slate-800 text-xs font-medium text-slate-600 dark:text-slate-300 animate-in fade-in">
+              <Calendar className="w-3.5 h-3.5 text-[#1B2CC1]" />
+              <span>{todayStr}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </header>
+  )
+}