style: apply consistent code formatting across project files

.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+dist
+build
+public
+*.md
+.env*

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package.json

@@ -7,7 +7,8 @@
     "build": "next build --webpack",
     "start": "next start",
     "lint": "eslint",
-    "postinstall": "prisma skills sync || exit 0"
+    "postinstall": "prisma skills sync || exit 0",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css}\""
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
@@ -45,6 +46,8 @@
     "@types/uuid": "^10.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.3.3",
+    "prettier": "^3.9.6",
+    "prettier-plugin-tailwindcss": "^0.8.1",
     "tailwindcss": "^4",
     "ts-node": "^10.9.2",
     "tsx": "^4.23.12",

prisma/schema.prisma

@@ -55,6 +55,7 @@ model Submission {
   created_at     DateTime         @default(now())
   updated_at     DateTime         @updatedAt
   paid_amount    Int?
+  saldo_used     Int              @default(0)
   order          Order            @relation(fields: [order_id], references: [id], onDelete: Cascade)
   user           User             @relation(fields: [user_id], references: [id], onDelete: Cascade)
   items          SubmissionItem[]
@@ -64,6 +65,7 @@ model SubmissionItem {
   id            String     @id @default(uuid())
   submission_id String
   name          String
+  note          String?
   qty           Int        @default(1)
   is_custom     Boolean    @default(false)
   created_at    DateTime   @default(now())

src/app/(app)/balances/page.tsx

@@ -28,7 +28,7 @@ export default function BalancesPage() {
     setLoading(true)
     const [subRes, creRes] = await Promise.all([
       getBalancesAsSubmittor(id),
-      getBalancesAsCreator(id)
+      getBalancesAsCreator(id),
     ])
     setSubmittorBalances(subRes)
     setCreatorBalances(creRes)
@@ -36,29 +36,33 @@ export default function BalancesPage() {
   }
 
   const formatRupiah = (n: number) =>
-    new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n)
+    new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      maximumFractionDigits: 0,
+    }).format(n)
 
   return (
-    <div className="space-y-6 animate-in fade-in duration-500 pb-12">
+    <div className="animate-in fade-in space-y-6 pb-12 duration-500">
       <div>
         <span className="text-xs font-semibold text-slate-400">Keuangan / Saldo</span>
-        <h2 className="text-xl font-black text-slate-900 dark:text-white flex items-center gap-2 tracking-tight">
-          <Wallet className="w-6 h-6 text-[#1B2CC1]" />
+        <h2 className="flex items-center gap-2 text-xl font-black tracking-tight text-slate-900 dark:text-white">
+          <Wallet className="h-6 w-6 text-[#1B2CC1]" />
           Buku Saldo
         </h2>
-        <p className="text-sm text-slate-500 mt-1">
+        <p className="mt-1 text-sm text-slate-500">
           Pantau riwayat saldo lebih atau kurang dari transaksi pesanan.
         </p>
       </div>
 
-      <div className="flex bg-slate-100 dark:bg-slate-900 p-1 rounded-xl w-full max-w-sm border border-slate-200 dark:border-slate-800">
+      <div className="flex w-full max-w-sm rounded-xl border border-slate-200 bg-slate-100 p-1 dark:border-slate-800 dark:bg-slate-900">
         <button
           onClick={() => setActiveTab('SUBMITTOR')}
           className={cn(
-            "flex-1 text-xs font-bold py-2 rounded-lg transition-all",
+            'flex-1 rounded-lg py-2 text-xs font-bold transition-all',
             activeTab === 'SUBMITTOR'
-              ? "bg-white dark:bg-slate-800 shadow-sm text-slate-900 dark:text-white" 
-              : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
+              ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-white'
+              : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
           )}
         >
           Saldo Saya (Penitip)
@@ -66,10 +70,10 @@ export default function BalancesPage() {
         <button
           onClick={() => setActiveTab('CREATOR')}
           className={cn(
-            "flex-1 text-xs font-bold py-2 rounded-lg transition-all",
+            'flex-1 rounded-lg py-2 text-xs font-bold transition-all',
             activeTab === 'CREATOR'
-              ? "bg-white dark:bg-slate-800 shadow-sm text-slate-900 dark:text-white" 
-              : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
+              ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-white'
+              : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
           )}
         >
           Saldo Orang (Kreator)
@@ -77,45 +81,71 @@ export default function BalancesPage() {
       </div>
 
       {loading ? (
-        <div className="flex flex-col items-center justify-center min-h-[30vh] gap-3">
-          <Loader2 className="animate-spin text-[#1B2CC1] w-8 h-8" />
-          <span className="text-xs text-slate-500 font-semibold">Memuat saldo...</span>
+        <div className="flex min-h-[30vh] flex-col items-center justify-center gap-3">
+          <Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
+          <span className="text-xs font-semibold text-slate-500">Memuat saldo...</span>
         </div>
       ) : activeTab === 'SUBMITTOR' ? (
         <div className="space-y-4">
-          <div className="bg-blue-50 dark:bg-blue-950/30 p-4 rounded-xl border border-blue-100 dark:border-blue-900/50 mb-6">
-            <h3 className="font-bold text-blue-900 dark:text-blue-100 text-sm mb-1">Saldo Anda di Kreator Lain</h3>
-            <p className="text-xs text-blue-700 dark:text-blue-300 leading-relaxed">
-              Jika saldo <strong>positif</strong> (hijau), Anda memiliki deposit yang bisa digunakan untuk pesanan berikutnya di kreator tersebut. Jika <strong>negatif</strong> (merah), Anda berhutang.
+          <div className="mb-6 rounded-xl border border-blue-100 bg-blue-50 p-4 dark:border-blue-900/50 dark:bg-blue-950/30">
+            <h3 className="mb-1 text-sm font-bold text-blue-900 dark:text-blue-100">
+              Saldo Anda di Kreator Lain
+            </h3>
+            <p className="text-xs leading-relaxed text-blue-700 dark:text-blue-300">
+              Jika saldo <strong>positif</strong> (hijau), Anda memiliki deposit yang bisa digunakan
+              untuk pesanan berikutnya di kreator tersebut. Jika <strong>negatif</strong> (merah),
+              Anda berhutang.
             </p>
           </div>
 
           {submittorBalances.length === 0 ? (
-            <div className="text-center p-12 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
-              <p className="text-xs text-slate-500 font-medium">Belum ada catatan saldo.</p>
+            <div className="rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
+              <p className="text-xs font-medium text-slate-500">Belum ada catatan saldo.</p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
               {submittorBalances.map((b, i) => (
-                <Card key={i} className="rounded-2xl border-slate-200/90 dark:border-slate-800 overflow-hidden hover:border-[#1B2CC1]/30 transition-all shadow-sm">
-                  <div className="p-4 flex items-center gap-3 bg-slate-50/50 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-800">
+                <Card
+                  key={i}
+                  className="overflow-hidden rounded-2xl border-slate-200/90 shadow-sm transition-all hover:border-[#1B2CC1]/30 dark:border-slate-800"
+                >
+                  <div className="flex items-center gap-3 border-b border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/40">
                     {b.creator.photo ? (
-                      <img src={b.creator.photo} alt={b.creator.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-slate-900 shadow-sm" />
+                      <img
+                        src={b.creator.photo}
+                        alt={b.creator.name}
+                        className="h-10 w-10 rounded-full object-cover shadow-sm ring-2 ring-white dark:ring-slate-900"
+                      />
                     ) : (
-                      <div className="w-10 h-10 rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-bold text-sm ring-2 ring-white dark:ring-slate-900 shadow-sm">
+                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#1B2CC1]/10 text-sm font-bold text-[#1B2CC1] shadow-sm ring-2 ring-white dark:ring-slate-900">
                         {b.creator.name.charAt(0).toUpperCase()}
                       </div>
                     )}
                     <div>
-                      <p className="font-bold text-slate-900 dark:text-white text-sm">{b.creator.name}</p>
-                      <p className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Kreator</p>
+                      <p className="text-sm font-bold text-slate-900 dark:text-white">
+                        {b.creator.name}
+                      </p>
+                      <p className="text-[10px] font-semibold tracking-wider text-slate-500 uppercase">
+                        Kreator
+                      </p>
                     </div>
                   </div>
-                  <CardContent className="p-4 bg-white dark:bg-slate-900">
+                  <CardContent className="bg-white p-4 dark:bg-slate-900">
                     <div className="flex flex-col gap-1">
-                      <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Total Saldo</span>
-                      <div className={cn("text-xl font-black flex items-center gap-1.5", b.amount > 0 ? "text-emerald-600" : "text-rose-600")}>
-                        {b.amount > 0 ? <ArrowUpRight className="w-5 h-5" /> : <ArrowDownRight className="w-5 h-5" />}
+                      <span className="text-[11px] font-bold tracking-wider text-slate-400 uppercase">
+                        Total Saldo
+                      </span>
+                      <div
+                        className={cn(
+                          'flex items-center gap-1.5 text-xl font-black',
+                          b.amount > 0 ? 'text-emerald-600' : 'text-rose-600'
+                        )}
+                      >
+                        {b.amount > 0 ? (
+                          <ArrowUpRight className="h-5 w-5" />
+                        ) : (
+                          <ArrowDownRight className="h-5 w-5" />
+                        )}
                         {formatRupiah(b.amount)}
                       </div>
                     </div>
@@ -127,40 +157,68 @@ export default function BalancesPage() {
         </div>
       ) : (
         <div className="space-y-4">
-          <div className="bg-amber-50 dark:bg-amber-950/30 p-4 rounded-xl border border-amber-100 dark:border-amber-900/50 mb-6">
-            <h3 className="font-bold text-amber-900 dark:text-amber-100 text-sm mb-1">Saldo Orang Lain di Anda</h3>
-            <p className="text-xs text-amber-700 dark:text-amber-300 leading-relaxed">
-              Jika saldo <strong>positif</strong> (merah bagi Anda), artinya Anda memegang uang lebih milik penitip (Hutang Anda ke mereka). Jika <strong>negatif</strong> (hijau), mereka berhutang ke Anda.
+          <div className="mb-6 rounded-xl border border-amber-100 bg-amber-50 p-4 dark:border-amber-900/50 dark:bg-amber-950/30">
+            <h3 className="mb-1 text-sm font-bold text-amber-900 dark:text-amber-100">
+              Saldo Orang Lain di Anda
+            </h3>
+            <p className="text-xs leading-relaxed text-amber-700 dark:text-amber-300">
+              Jika saldo <strong>positif</strong> (merah bagi Anda), artinya Anda memegang uang
+              lebih milik penitip (Hutang Anda ke mereka). Jika <strong>negatif</strong> (hijau),
+              mereka berhutang ke Anda.
             </p>
           </div>
 
           {creatorBalances.length === 0 ? (
-            <div className="text-center p-12 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
-              <p className="text-xs text-slate-500 font-medium">Belum ada penitip yang memiliki catatan saldo dengan Anda.</p>
+            <div className="rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
+              <p className="text-xs font-medium text-slate-500">
+                Belum ada penitip yang memiliki catatan saldo dengan Anda.
+              </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
               {creatorBalances.map((b, i) => (
-                <Card key={i} className="rounded-2xl border-slate-200/90 dark:border-slate-800 overflow-hidden hover:border-[#1B2CC1]/30 transition-all shadow-sm">
-                  <div className="p-4 flex items-center gap-3 bg-slate-50/50 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-800">
+                <Card
+                  key={i}
+                  className="overflow-hidden rounded-2xl border-slate-200/90 shadow-sm transition-all hover:border-[#1B2CC1]/30 dark:border-slate-800"
+                >
+                  <div className="flex items-center gap-3 border-b border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/40">
                     {b.user.photo ? (
-                      <img src={b.user.photo} alt={b.user.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-slate-900 shadow-sm" />
+                      <img
+                        src={b.user.photo}
+                        alt={b.user.name}
+                        className="h-10 w-10 rounded-full object-cover shadow-sm ring-2 ring-white dark:ring-slate-900"
+                      />
                     ) : (
-                      <div className="w-10 h-10 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 flex items-center justify-center font-bold text-sm ring-2 ring-white dark:ring-slate-900 shadow-sm">
+                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-200 text-sm font-bold text-slate-600 shadow-sm ring-2 ring-white dark:bg-slate-700 dark:text-slate-300 dark:ring-slate-900">
                         {b.user.name.charAt(0).toUpperCase()}
                       </div>
                     )}
                     <div>
-                      <p className="font-bold text-slate-900 dark:text-white text-sm">{b.user.name}</p>
-                      <p className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Penitip</p>
+                      <p className="text-sm font-bold text-slate-900 dark:text-white">
+                        {b.user.name}
+                      </p>
+                      <p className="text-[10px] font-semibold tracking-wider text-slate-500 uppercase">
+                        Penitip
+                      </p>
                     </div>
                   </div>
-                  <CardContent className="p-4 bg-white dark:bg-slate-900">
+                  <CardContent className="bg-white p-4 dark:bg-slate-900">
                     <div className="flex flex-col gap-1">
-                      <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Saldo Penitip</span>
+                      <span className="text-[11px] font-bold tracking-wider text-slate-400 uppercase">
+                        Saldo Penitip
+                      </span>
                       {/* From Creator perspective: positive balance of submittor is bad for creator (creator holds their money) */}
-                      <div className={cn("text-xl font-black flex items-center gap-1.5", b.amount > 0 ? "text-rose-600" : "text-emerald-600")}>
-                        {b.amount > 0 ? <ArrowDownRight className="w-5 h-5" /> : <ArrowUpRight className="w-5 h-5" />}
+                      <div
+                        className={cn(
+                          'flex items-center gap-1.5 text-xl font-black',
+                          b.amount > 0 ? 'text-rose-600' : 'text-emerald-600'
+                        )}
+                      >
+                        {b.amount > 0 ? (
+                          <ArrowDownRight className="h-5 w-5" />
+                        ) : (
+                          <ArrowUpRight className="h-5 w-5" />
+                        )}
                         {formatRupiah(b.amount)}
                       </div>
                     </div>

src/app/(app)/layout.tsx

@@ -1,9 +1,5 @@
-import { AppLayout } from "@/components/AppLayout";
+import { AppLayout } from '@/components/AppLayout'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <AppLayout>
-      {children}
-    </AppLayout>
-  );
+  return <AppLayout>{children}</AppLayout>
 }

src/app/(app)/order/[id]/PublicOrderActions.tsx

@@ -16,10 +16,10 @@ export function PublicOrderActions({ order }: { order: any }) {
   }
 
   return (
-    <div className="flex flex-row justify-center items-center gap-2 mt-5">
+    <div className="mt-5 flex flex-row items-center justify-center gap-2">
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger className="h-10 px-5 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-sm shadow-md shadow-[#1B2CC1]/20 gap-2 flex items-center justify-center transition-all cursor-pointer">
-          <ShoppingBag className="w-4 h-4" />
+        <DialogTrigger className="flex h-10 cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#1B2CC1] px-5 text-sm font-bold text-white shadow-md shadow-[#1B2CC1]/20 transition-all hover:bg-[#15229E]">
+          <ShoppingBag className="h-4 w-4" />
           Titip Sekarang
         </DialogTrigger>
         {open && <OrderFormModal order={order} onSuccess={() => setOpen(false)} />}
@@ -27,7 +27,7 @@ export function PublicOrderActions({ order }: { order: any }) {
 
       <ShareButton
         orderId={order.id}
-        className="h-10 px-4 rounded-xl border-slate-200 dark:border-slate-700 font-bold text-sm gap-2 hover:bg-slate-50 dark:hover:bg-slate-800 shadow-sm text-slate-700 dark:text-slate-200"
+        className="h-10 gap-2 rounded-xl border-slate-200 px-4 text-sm font-bold text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
         showText={true}
       />
     </div>

src/app/(app)/order/[id]/page.tsx

@@ -10,7 +10,11 @@ import { cn } from '@/lib/utils'
 
 export const dynamic = 'force-dynamic'
 
-export default async function PublicOrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
+export default async function PublicOrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
   const { id } = await params
   const session = await getSessionUser()
 
@@ -25,48 +29,59 @@ export default async function PublicOrderDetailPage({ params }: { params: Promis
   }
 
   return (
-    <div className="space-y-6 max-w-4xl mx-auto pb-20 animate-in fade-in duration-500">
+    <div className="animate-in fade-in mx-auto max-w-4xl space-y-6 pb-20 duration-500">
       <div className="flex items-center gap-3">
-        <Link href="/" className="p-2 -ml-2 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 transition-colors">
-          <ChevronLeft className="w-5 h-5" />
+        <Link
+          href="/"
+          className="-ml-2 rounded-xl p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
+        >
+          <ChevronLeft className="h-5 w-5" />
         </Link>
-        <h1 className="text-xl font-black text-slate-900 dark:text-white tracking-tight">Detail PO</h1>
+        <h1 className="text-xl font-black tracking-tight text-slate-900 dark:text-white">
+          Detail PO
+        </h1>
       </div>
 
       {/* Hero Card */}
-      <div className="relative overflow-hidden rounded-3xl bg-white dark:bg-slate-900 shadow-sm border border-slate-200/60 dark:border-slate-800">
-        <div className="absolute top-0 left-0 w-full h-24 bg-gradient-to-r from-[#1B2CC1] to-[#121E85]" />
+      <div className="relative overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="absolute top-0 left-0 h-24 w-full bg-gradient-to-r from-[#1B2CC1] to-[#121E85]" />
 
-        <div className="relative pt-10 px-5 pb-5 sm:px-6 sm:pb-6 flex flex-col items-center text-center">
-          <div className="w-20 h-20 rounded-2xl bg-white dark:bg-slate-900 shadow-md border-4 border-white dark:border-slate-900 flex items-center justify-center mb-3">
+        <div className="relative flex flex-col items-center px-5 pt-10 pb-5 text-center sm:px-6 sm:pb-6">
+          <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-2xl border-4 border-white bg-white shadow-md dark:border-slate-900 dark:bg-slate-900">
             {order.creator.photo ? (
-              <img src={order.creator.photo} alt={order.creator.name} className="w-full h-full object-cover rounded-xl" />
+              <img
+                src={order.creator.photo}
+                alt={order.creator.name}
+                className="h-full w-full rounded-xl object-cover"
+              />
             ) : (
-              <Store className="w-8 h-8 text-[#1B2CC1]" />
+              <Store className="h-8 w-8 text-[#1B2CC1]" />
             )}
           </div>
 
-          <h2 className="text-xl sm:text-2xl font-black text-slate-900 dark:text-white mb-2 leading-tight">
+          <h2 className="mb-2 text-xl leading-tight font-black text-slate-900 sm:text-2xl dark:text-white">
             {order.title}
           </h2>
 
-          <div className="flex flex-wrap justify-center items-center gap-3 text-sm font-semibold text-slate-600 dark:text-slate-400">
-            <span className="flex items-center gap-1.5 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full">
-              <User className="w-4 h-4 text-[#1B2CC1]" />
+          <div className="flex flex-wrap items-center justify-center gap-3 text-sm font-semibold text-slate-600 dark:text-slate-400">
+            <span className="flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1 dark:bg-slate-800">
+              <User className="h-4 w-4 text-[#1B2CC1]" />
               {order.creator.name}
             </span>
-            <span className={cn(
-              "flex items-center gap-1.5 px-3 py-1 rounded-full border",
-              order.status === 'OPEN'
-                ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 border-emerald-100 dark:border-emerald-900/50"
-                : "bg-rose-50 text-rose-700 dark:bg-rose-950/30 dark:text-rose-400 border-rose-100 dark:border-rose-900/50"
-            )}>
-              <CheckCircle2 className="w-4 h-4" />
+            <span
+              className={cn(
+                'flex items-center gap-1.5 rounded-full border px-3 py-1',
+                order.status === 'OPEN'
+                  ? 'border-emerald-100 bg-emerald-50 text-emerald-700 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-400'
+                  : 'border-rose-100 bg-rose-50 text-rose-700 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-400'
+              )}
+            >
+              <CheckCircle2 className="h-4 w-4" />
               {order.status}
             </span>
             {order.allow_custom && (
-              <span className="flex items-center gap-1.5 bg-blue-50 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400 px-3 py-1 rounded-full border border-blue-100 dark:border-blue-900/50">
-                <Sparkles className="w-4 h-4" />
+              <span className="flex items-center gap-1.5 rounded-full border border-blue-100 bg-blue-50 px-3 py-1 text-blue-700 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-400">
+                <Sparkles className="h-4 w-4" />
                 Custom Item
               </span>
             )}
@@ -75,36 +90,53 @@ export default async function PublicOrderDetailPage({ params }: { params: Promis
           <PublicOrderActions order={order} />
         </div>
 
-        <div className="bg-slate-50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-800 p-4 sm:p-5 flex flex-col sm:flex-row divide-y sm:divide-y-0 sm:divide-x divide-slate-200 dark:divide-slate-700">
-          <div className="flex-1 py-3 sm:py-0 sm:px-4 text-center">
-            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Tanggal PO</p>
+        <div className="flex flex-col divide-y divide-slate-200 border-t border-slate-100 bg-slate-50 p-4 sm:flex-row sm:divide-x sm:divide-y-0 sm:p-5 dark:divide-slate-700 dark:border-slate-800 dark:bg-slate-800/50">
+          <div className="flex-1 py-3 text-center sm:px-4 sm:py-0">
+            <p className="mb-0.5 text-[10px] font-bold tracking-wider text-slate-400 uppercase">
+              Tanggal PO
+            </p>
             <p className="text-base font-black text-slate-800 dark:text-slate-200">
               {format(new Date(order.date), 'dd MMM yyyy', { locale: idLocale })}
             </p>
           </div>
-          <div className="flex-1 py-3 sm:py-0 sm:px-4 text-center">
-            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Total Orang</p>
+          <div className="flex-1 py-3 text-center sm:px-4 sm:py-0">
+            <p className="mb-0.5 text-[10px] font-bold tracking-wider text-slate-400 uppercase">
+              Total Orang
+            </p>
             <p className="text-base font-black text-slate-800 dark:text-slate-200">
-              {order.submissions.length} <span className="text-xs font-semibold text-slate-500">menitip</span>
+              {order.submissions.length}{' '}
+              <span className="text-xs font-semibold text-slate-500">menitip</span>
             </p>
           </div>
-          <div className="flex-1 py-3 sm:py-0 sm:px-4 text-center">
-            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Menu Tersedia</p>
+          <div className="flex-1 py-3 text-center sm:px-4 sm:py-0">
+            <p className="mb-0.5 text-[10px] font-bold tracking-wider text-slate-400 uppercase">
+              Menu Tersedia
+            </p>
             <p className="text-base font-black text-slate-800 dark:text-slate-200">
-              {order.available_items.length} <span className="text-xs font-semibold text-slate-500">item</span>
+              {order.available_items.length}{' '}
+              <span className="text-xs font-semibold text-slate-500">item</span>
             </p>
           </div>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
-        {/* Left 2 Cols: Daftar Penitip */}
-        <div className="lg:col-span-2 space-y-6">
-          <div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200/60 dark:border-slate-800 shadow-sm overflow-hidden">
-            <div className="p-5 sm:p-6 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 flex items-center justify-between">
+      <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-3">
+        {/* Left 2 Cols: Daftar Penitip & Description */}
+        <div className="space-y-6 lg:col-span-2">
+          {order.description && (
+            <div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white p-5 shadow-sm sm:p-6 dark:border-slate-800 dark:bg-slate-900">
+              <h3 className="mb-3 font-bold text-slate-900 dark:text-white">Deskripsi</h3>
+              <div className="text-sm leading-relaxed whitespace-pre-wrap text-slate-600 dark:text-slate-300">
+                {order.description}
+              </div>
+            </div>
+          )}
+
+          <div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center justify-between border-b border-slate-100 bg-slate-50/50 p-5 sm:p-6 dark:border-slate-800 dark:bg-slate-800/30">
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-xl bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center">
-                  <Users className="w-4 h-4" />
+                <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-[#1B2CC1]/10 text-[#1B2CC1]">
+                  <Users className="h-4 w-4" />
                 </div>
                 <h3 className="font-bold text-slate-900 dark:text-white">Daftar Penitip</h3>
               </div>
@@ -113,28 +145,40 @@ export default async function PublicOrderDetailPage({ params }: { params: Promis
             <div className="divide-y divide-slate-100 dark:divide-slate-800">
               {order.submissions.length > 0 ? (
                 order.submissions.map((sub: any) => (
-                  <div key={sub.id} className="p-4 sm:p-6 flex items-start gap-4 hover:bg-slate-50/50 dark:hover:bg-slate-800/20 transition-colors">
+                  <div
+                    key={sub.id}
+                    className="flex items-start gap-4 p-4 transition-colors hover:bg-slate-50/50 sm:p-6 dark:hover:bg-slate-800/20"
+                  >
                     {sub.user.photo ? (
-                      <img src={sub.user.photo} alt={sub.user.name} className="w-10 h-10 rounded-full object-cover shrink-0" />
+                      <img
+                        src={sub.user.photo}
+                        alt={sub.user.name}
+                        className="h-10 w-10 shrink-0 rounded-full object-cover"
+                      />
                     ) : (
-                      <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center font-bold text-sm shrink-0">
+                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-sm font-bold text-slate-500 dark:bg-slate-800">
                         {sub.user.name.charAt(0).toUpperCase()}
                       </div>
                     )}
 
-                    <div className="flex-1 min-w-0">
-                      <h4 className="font-bold text-slate-800 dark:text-slate-200 text-sm mb-2">{sub.user.name}</h4>
+                    <div className="min-w-0 flex-1">
+                      <h4 className="mb-2 text-sm font-bold text-slate-800 dark:text-slate-200">
+                        {sub.user.name}
+                      </h4>
                       <div className="flex flex-wrap gap-1.5">
                         {sub.items.map((item: any) => (
                           <span
                             key={item.id}
-                            className={`inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium border ${
+                            className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium ${
                               item.is_custom
-                                ? 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800' 
-                                : 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700'
+                                ? 'border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
+                                : 'border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300'
                             }`}
                           >
-                            {item.qty}x {item.name}
+                            {item.qty}x {item.name}{' '}
+                            {item.note && (
+                              <span className="ml-0.5 italic opacity-70">({item.note})</span>
+                            )}
                           </span>
                         ))}
                       </div>
@@ -143,8 +187,10 @@ export default async function PublicOrderDetailPage({ params }: { params: Promis
                 ))
               ) : (
                 <div className="p-12 text-center">
-                  <p className="text-slate-500 font-medium">Belum ada yang menitip.</p>
-                  <p className="text-xs text-slate-400 mt-1">Jadilah yang pertama untuk menitip pesanan!</p>
+                  <p className="font-medium text-slate-500">Belum ada yang menitip.</p>
+                  <p className="mt-1 text-xs text-slate-400">
+                    Jadilah yang pertama untuk menitip pesanan!
+                  </p>
                 </div>
               )}
             </div>

src/app/(app)/page.tsx

@@ -11,37 +11,38 @@ export default async function Dashboard() {
   const orders = await getAvailableOrders()
 
   return (
-    <div className="space-y-8 animate-in fade-in duration-500">
+    <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 sm:p-8 text-white shadow-xl shadow-[#1B2CC1]/15">
-        <div className="absolute right-0 top-0 -mt-10 -mr-10 h-64 w-64 rounded-full bg-white/10 blur-3xl pointer-events-none" />
+      <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 bg-white/15 px-3 py-1 text-xs font-bold text-blue-100 backdrop-blur-md border border-white/20">
+          <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 sm:text-3xl font-black tracking-tight leading-tight">
+          <h2 className="text-2xl leading-tight font-black tracking-tight sm:text-3xl">
             Titip Makanan & Minuman Bareng Teman Kantor
           </h2>
-          <p className="text-sm text-blue-100/90 leading-relaxed max-w-xl">
-            Pilih PO yang sedang buka hari ini, tentukan menu favoritmu, dan biarkan pembuat PO mengurus tagihan secara praktis.
+          <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="pt-2 flex flex-wrap gap-3">
+          <div className="flex flex-wrap gap-3 pt-2">
             <Link
               href="/my-orders"
               className={cn(
                 buttonVariants(),
-                "rounded-xl bg-white text-[#1B2CC1] hover:bg-blue-50 font-bold shadow-md h-10 px-5 gap-2"
+                'h-10 gap-2 rounded-xl bg-white px-5 font-bold text-[#1B2CC1] shadow-md hover:bg-blue-50'
               )}
             >
-              <Plus className="w-4 h-4" />
+              <Plus className="h-4 w-4" />
               Buka Jasa PO Baru
             </Link>
             <Link
               href="/my-purchases"
               className={cn(
-                buttonVariants({ variant: "outline" }),
-                "rounded-xl bg-white/10 hover:bg-white/20 text-white border-white/20 font-semibold h-10 px-4"
+                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
@@ -51,46 +52,49 @@ export default async function Dashboard() {
       </div>
 
       {/* Main Grid Header */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      <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="w-2.5 h-2.5 rounded-full bg-[#1B2CC1] animate-pulse" />
-            <h2 className="text-xl font-black text-slate-900 dark:text-white tracking-tight">
+            <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="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
+          <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="text-xs font-bold text-[#1B2CC1] bg-[#1B2CC1]/10 px-3 py-1.5 rounded-xl">
+        <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 p-12 sm:p-16 text-center rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
-          <div className="w-16 h-16 bg-[#1B2CC1]/10 rounded-2xl flex items-center justify-center mb-4 text-[#1B2CC1]">
-            <Store className="w-8 h-8" />
+        <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="text-lg font-bold text-slate-800 dark:text-slate-200 mb-1">Belum Ada PO yang Dibuka Hari Ini</h3>
-          <p className="text-xs text-slate-500 max-w-md mb-6 leading-relaxed">
-            Mau jajan atau beli sesuatu? Jadilah orang pertama yang membuka jasa titip pesanan untuk teman-teman Anda!
+          <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(),
-              "bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold rounded-xl shadow-md shadow-[#1B2CC1]/25 h-10 px-5 gap-2"
+              'h-10 gap-2 rounded-xl bg-[#1B2CC1] px-5 font-bold text-white shadow-md shadow-[#1B2CC1]/25 hover:bg-[#15229E]'
             )}
           >
-            <Plus className="w-4 h-4" /> Buka PO Sekarang
+            <Plus className="h-4 w-4" /> Buka PO Sekarang
           </Link>
         </div>
       ) : (
-        <div className="flex flex-col h-full space-y-4">
-          <div className="flex flex-col space-y-4 max-h-[calc(100vh-260px)] overflow-y-auto pr-2 scrollbar-thin">
+        <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} />
             ))}

src/app/(app)/profile/page.tsx

@@ -6,8 +6,22 @@ import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/componen
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { Loader2, Save, CheckCircle, ShieldCheck, UserCircle, KeyRound, LockKeyhole } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  Loader2,
+  Save,
+  CheckCircle,
+  ShieldCheck,
+  UserCircle,
+  KeyRound,
+  LockKeyhole,
+} from 'lucide-react'
 
 export default function ProfilePage() {
   const [user, setUser] = useState<any>(null)
@@ -104,167 +118,256 @@ export default function ProfilePage() {
 
   if (loading) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-3">
-        <Loader2 className="w-8 h-8 animate-spin text-[#1B2CC1]" />
-        <span className="text-xs text-slate-500 font-semibold">Memuat profil...</span>
+      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-3">
+        <Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
+        <span className="text-xs font-semibold text-slate-500">Memuat profil...</span>
       </div>
     )
   }
 
   if (!user) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-3">
-        <span className="text-xs text-slate-500 font-semibold">Anda belum login.</span>
+      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-3">
+        <span className="text-xs font-semibold text-slate-500">Anda belum login.</span>
       </div>
     )
   }
 
   return (
-    <div className="space-y-6 animate-in fade-in duration-500 pb-12 max-w-5xl">
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        
+    <div className="animate-in fade-in max-w-5xl space-y-6 pb-12 duration-500">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         {/* Left 2 Cols: Forms */}
-        <div className="lg:col-span-2 space-y-6">
-          
+        <div className="space-y-6 lg:col-span-2">
           {/* PROFILE FORM */}
-          <Card className="rounded-3xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
-            <div className="p-6 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
+          <Card className="overflow-hidden rounded-3xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center justify-between border-b border-slate-100 p-6 dark:border-slate-800">
               <div>
-                <h2 className="text-lg font-black text-slate-900 dark:text-white">Informasi Akun</h2>
-                <p className="text-xs text-slate-500 mt-0.5">Ubah nama tampilan dan foto profil Anda.</p>
+                <h2 className="text-lg font-black text-slate-900 dark:text-white">
+                  Informasi Akun
+                </h2>
+                <p className="mt-0.5 text-xs text-slate-500">
+                  Ubah nama tampilan dan foto profil Anda.
+                </p>
               </div>
-              <span className="text-[11px] font-bold text-[#1B2CC1] bg-[#1B2CC1]/10 px-2.5 py-1 rounded-full uppercase tracking-wider">
+              <span className="rounded-full bg-[#1B2CC1]/10 px-2.5 py-1 text-[11px] font-bold tracking-wider text-[#1B2CC1] uppercase">
                 {user.role}
               </span>
             </div>
 
             <form onSubmit={handleSaveProfile}>
-              <CardContent className="p-6 space-y-6">
+              <CardContent className="space-y-6 p-6">
                 <div className="space-y-2">
-                  <Label className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">Foto Profil</Label>
-                  <div className="flex flex-col sm:flex-row items-center gap-5 p-5 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30">
+                  <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
+                    Foto Profil
+                  </Label>
+                  <div className="flex flex-col items-center gap-5 rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-5 sm:flex-row dark:border-slate-800 dark:bg-slate-800/30">
                     {photo ? (
-                      <img src={photo} alt={name} className="w-20 h-20 rounded-2xl object-cover ring-4 ring-white dark:ring-slate-700 shadow-md shrink-0" />
+                      <img
+                        src={photo}
+                        alt={name}
+                        className="h-20 w-20 shrink-0 rounded-2xl object-cover shadow-md ring-4 ring-white dark:ring-slate-700"
+                      />
                     ) : (
-                      <div className="w-20 h-20 rounded-2xl bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-bold text-2xl ring-4 ring-white dark:ring-slate-700 shadow-sm shrink-0">
-                        {name ? name.charAt(0).toUpperCase() : <UserCircle className="w-10 h-10" />}
+                      <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl bg-[#1B2CC1]/10 text-2xl font-bold text-[#1B2CC1] shadow-sm ring-4 ring-white dark:ring-slate-700">
+                        {name ? name.charAt(0).toUpperCase() : <UserCircle className="h-10 w-10" />}
                       </div>
                     )}
-                    <div className="space-y-1.5 flex-1 w-full text-center sm:text-left">
-                      <p className="text-xs font-bold text-slate-800 dark:text-slate-200">Pratinjau Avatar</p>
-                      <p className="text-[11px] text-slate-400">Masukkan tautan URL foto gambar di bawah untuk memperbarui gambar profil.</p>
+                    <div className="w-full flex-1 space-y-1.5 text-center sm:text-left">
+                      <p className="text-xs font-bold text-slate-800 dark:text-slate-200">
+                        Pratinjau Avatar
+                      </p>
+                      <p className="text-[11px] text-slate-400">
+                        Masukkan tautan URL foto gambar di bawah untuk memperbarui gambar profil.
+                      </p>
                     </div>
                   </div>
                 </div>
 
                 <div className="space-y-1.5">
-                  <Label htmlFor="prof-name" className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
+                  <Label
+                    htmlFor="prof-name"
+                    className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
+                  >
                     Nama Tampilan <span className="text-red-500">*</span>
                   </Label>
-                  <Input id="prof-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Contoh: Budi Santoso" className="h-11 rounded-xl" />
+                  <Input
+                    id="prof-name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Contoh: Budi Santoso"
+                    className="h-11 rounded-xl"
+                  />
                 </div>
 
                 <div className="space-y-1.5">
-                  <Label htmlFor="prof-photo" className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
+                  <Label
+                    htmlFor="prof-photo"
+                    className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
+                  >
                     URL Foto Profil
                   </Label>
-                  <Input id="prof-photo" value={photo} onChange={(e) => setPhoto(e.target.value)} placeholder="https://..." className="h-11 rounded-xl" />
+                  <Input
+                    id="prof-photo"
+                    value={photo}
+                    onChange={(e) => setPhoto(e.target.value)}
+                    placeholder="https://..."
+                    className="h-11 rounded-xl"
+                  />
                 </div>
 
                 {profileError && (
-                  <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-semibold">{profileError}</div>
+                  <div className="rounded-xl bg-red-50 p-3 text-xs font-semibold text-red-600">
+                    {profileError}
+                  </div>
                 )}
                 {profileSuccess && (
-                  <div className="p-3 bg-emerald-50 text-emerald-700 rounded-xl text-xs font-bold flex items-center gap-2">
-                    <CheckCircle className="w-4 h-4" /><span>Profil berhasil diperbarui!</span>
+                  <div className="flex items-center gap-2 rounded-xl bg-emerald-50 p-3 text-xs font-bold text-emerald-700">
+                    <CheckCircle className="h-4 w-4" />
+                    <span>Profil berhasil diperbarui!</span>
                   </div>
                 )}
               </CardContent>
 
-              <div className="p-6 bg-slate-50/60 border-t border-slate-100 flex justify-end">
-                <Button type="submit" disabled={savingProfile} className="h-11 px-6 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold">
-                  {savingProfile ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
+              <div className="flex justify-end border-t border-slate-100 bg-slate-50/60 p-6">
+                <Button
+                  type="submit"
+                  disabled={savingProfile}
+                  className="h-11 rounded-xl bg-[#1B2CC1] px-6 font-bold text-white hover:bg-[#15229E]"
+                >
+                  {savingProfile ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-2 h-4 w-4" />
+                  )}
                   Simpan Profil
                 </Button>
               </div>
             </form>
           </Card>
-
-
         </div>
 
         {/* Right 1 Col: Account Details */}
         <div className="space-y-6">
-          <Card className="rounded-3xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-6 space-y-4">
-            <div className="flex items-center gap-2 text-slate-800 dark:text-slate-200 font-bold text-sm mb-0">
-              <ShieldCheck className="w-4 h-4 text-[#1B2CC1]" />
+          <Card className="space-y-4 rounded-3xl border border-slate-200/90 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="mb-0 flex items-center gap-2 text-sm font-bold text-slate-800 dark:text-slate-200">
+              <ShieldCheck className="h-4 w-4 text-[#1B2CC1]" />
               <span>Detail Akun</span>
             </div>
 
-            <div className="space-y-2 pt-2 border-t border-slate-100 dark:border-slate-800">
+            <div className="space-y-2 border-t border-slate-100 pt-2 dark:border-slate-800">
               <div className="space-y-1">
-                <span className="text-[10px] uppercase font-bold text-slate-400 block">Username</span>
-                <div className="font-semibold text-slate-800 text-sm">{user.username}</div>
+                <span className="block text-[10px] font-bold text-slate-400 uppercase">
+                  Username
+                </span>
+                <div className="text-sm font-semibold text-slate-800">{user.username}</div>
               </div>
               <div className="space-y-1">
-                <span className="text-[10px] uppercase font-bold text-slate-400 block">Role Akses</span>
-                <div className="font-semibold text-[#1B2CC1] text-sm uppercase">{user.role}</div>
+                <span className="block text-[10px] font-bold text-slate-400 uppercase">
+                  Role Akses
+                </span>
+                <div className="text-sm font-semibold text-[#1B2CC1] uppercase">{user.role}</div>
               </div>
             </div>
 
             {/* PASSWORD CHANGE MODAL BUTTON */}
-            <div className="pt-2 border-t border-slate-100 dark:border-slate-800">
+            <div className="border-t border-slate-100 pt-2 dark:border-slate-800">
               <Dialog open={isPasswordModalOpen} onOpenChange={setIsPasswordModalOpen}>
-                <DialogTrigger className="cursor-pointer inline-flex items-center justify-center whitespace-nowrap text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1B2CC1] disabled:pointer-events-none disabled:opacity-50 h-11 px-4 py-2 rounded-xl gap-2 text-[#1B2CC1] hover:text-[#15229E] font-bold border border-[#1B2CC1]/20 bg-[#1B2CC1]/5 hover:bg-[#1B2CC1]/10 w-full">
-                  <KeyRound className="w-4 h-4" />
+                <DialogTrigger className="inline-flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl border border-[#1B2CC1]/20 bg-[#1B2CC1]/5 px-4 py-2 text-sm font-bold whitespace-nowrap text-[#1B2CC1] hover:bg-[#1B2CC1]/10 hover:text-[#15229E] focus-visible:ring-1 focus-visible:ring-[#1B2CC1] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50">
+                  <KeyRound className="h-4 w-4" />
                   Ganti Password
                 </DialogTrigger>
-                <DialogContent className="sm:max-w-[425px] rounded-3xl p-0 overflow-hidden border-slate-200/90 dark:border-slate-800 shadow-xl">
-                  <DialogHeader className="p-6 bg-slate-50 dark:bg-slate-900/50 border-b border-slate-100 dark:border-slate-800">
-                    <DialogTitle className="text-xl font-black text-slate-900 dark:text-white">Ganti Password</DialogTitle>
-                    <p className="text-xs text-slate-500 mt-1">Lindungi akun Anda dengan mengubah password secara berkala.</p>
+                <DialogContent className="overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-xl sm:max-w-[425px] dark:border-slate-800">
+                  <DialogHeader className="border-b border-slate-100 bg-slate-50 p-6 dark:border-slate-800 dark:bg-slate-900/50">
+                    <DialogTitle className="text-xl font-black text-slate-900 dark:text-white">
+                      Ganti Password
+                    </DialogTitle>
+                    <p className="mt-1 text-xs text-slate-500">
+                      Lindungi akun Anda dengan mengubah password secara berkala.
+                    </p>
                   </DialogHeader>
 
                   <form onSubmit={handleChangePassword}>
-                    <div className="p-6 space-y-5 bg-white dark:bg-slate-900">
+                    <div className="space-y-5 bg-white p-6 dark:bg-slate-900">
                       <div className="space-y-4">
                         <div className="space-y-1.5">
-                          <Label className="text-xs font-bold uppercase tracking-wider text-slate-700">Password Lama</Label>
+                          <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
+                            Password Lama
+                          </Label>
                           <div className="relative">
-                            <LockKeyhole className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                            <Input type="password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} className="pl-9 h-11 rounded-xl" placeholder="Masukkan password lama" />
+                            <LockKeyhole className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                            <Input
+                              type="password"
+                              value={oldPassword}
+                              onChange={(e) => setOldPassword(e.target.value)}
+                              className="h-11 rounded-xl pl-9"
+                              placeholder="Masukkan password lama"
+                            />
                           </div>
                         </div>
                         <div className="space-y-1.5">
-                          <Label className="text-xs font-bold uppercase tracking-wider text-slate-700">Password Baru</Label>
+                          <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
+                            Password Baru
+                          </Label>
                           <div className="relative">
-                            <KeyRound className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                            <Input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className="pl-9 h-11 rounded-xl" placeholder="Minimal 6 karakter" />
+                            <KeyRound className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                            <Input
+                              type="password"
+                              value={newPassword}
+                              onChange={(e) => setNewPassword(e.target.value)}
+                              className="h-11 rounded-xl pl-9"
+                              placeholder="Minimal 6 karakter"
+                            />
                           </div>
                         </div>
                         <div className="space-y-1.5">
-                          <Label className="text-xs font-bold uppercase tracking-wider text-slate-700">Konfirmasi Password Baru</Label>
+                          <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
+                            Konfirmasi Password Baru
+                          </Label>
                           <div className="relative">
-                            <KeyRound className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                            <Input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className="pl-9 h-11 rounded-xl" placeholder="Ketik ulang password baru" />
+                            <KeyRound className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                            <Input
+                              type="password"
+                              value={confirmPassword}
+                              onChange={(e) => setConfirmPassword(e.target.value)}
+                              className="h-11 rounded-xl pl-9"
+                              placeholder="Ketik ulang password baru"
+                            />
                           </div>
                         </div>
                       </div>
 
                       {passwordError && (
-                        <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-semibold">{passwordError}</div>
+                        <div className="rounded-xl bg-red-50 p-3 text-xs font-semibold text-red-600">
+                          {passwordError}
+                        </div>
                       )}
                       {passwordSuccess && (
-                        <div className="p-3 bg-emerald-50 text-emerald-700 rounded-xl text-xs font-bold flex items-center gap-2">
-                          <CheckCircle className="w-4 h-4" /><span>Password berhasil diubah!</span>
+                        <div className="flex items-center gap-2 rounded-xl bg-emerald-50 p-3 text-xs font-bold text-emerald-700">
+                          <CheckCircle className="h-4 w-4" />
+                          <span>Password berhasil diubah!</span>
                         </div>
                       )}
                     </div>
 
-                    <div className="p-6 bg-slate-50/60 border-t border-slate-100 flex justify-end gap-3">
-                      <Button type="button" variant="ghost" onClick={() => setIsPasswordModalOpen(false)} className="h-11 rounded-xl font-bold">Batal</Button>
-                      <Button type="submit" disabled={savingPassword} className="h-11 px-6 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold">
-                        {savingPassword ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
+                    <div className="flex justify-end gap-3 border-t border-slate-100 bg-slate-50/60 p-6">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={() => setIsPasswordModalOpen(false)}
+                        className="h-11 rounded-xl font-bold"
+                      >
+                        Batal
+                      </Button>
+                      <Button
+                        type="submit"
+                        disabled={savingPassword}
+                        className="h-11 rounded-xl bg-[#1B2CC1] px-6 font-bold text-white hover:bg-[#15229E]"
+                      >
+                        {savingPassword ? (
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        ) : (
+                          <Save className="mr-2 h-4 w-4" />
+                        )}
                         Ubah Password
                       </Button>
                     </div>

src/app/(app)/reports/page.tsx

@@ -1,18 +1,34 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { getCreatorReport, getSubmittorReport, getSessionUser, getBalancesAsCreator } from '@/app/actions'
+import {
+  getCreatorReport,
+  getSubmittorReport,
+  getSessionUser,
+  getBalancesAsCreator,
+} from '@/app/actions'
 import { Card } from '@/components/ui/card'
-import { Loader2, TrendingUp, TrendingDown, Wallet, ArrowRightLeft, Calendar as CalendarIcon } from 'lucide-react'
+import {
+  Loader2,
+  TrendingUp,
+  TrendingDown,
+  Wallet,
+  ArrowRightLeft,
+  Calendar as CalendarIcon,
+} from 'lucide-react'
 import { cn } from '@/lib/utils'
 import ReportCharts from '@/components/ReportCharts'
 import ReportDataGrid from '@/components/ReportDataGrid'
 import ReportByPersonGrid from '@/components/ReportByPersonGrid'
 import {
-  getISOWeek, getYear,
-  startOfISOWeek, endOfISOWeek,
-  startOfMonth, endOfMonth,
-  setISOWeek, setYear as dfSetYear
+  getISOWeek,
+  getYear,
+  startOfISOWeek,
+  endOfISOWeek,
+  startOfMonth,
+  endOfMonth,
+  setISOWeek,
+  setYear as dfSetYear,
 } from 'date-fns'
 
 // ── Helpers ──────────────────────────────────────────────
@@ -28,7 +44,10 @@ function getMonthValue(date: Date) {
   return `${y}-${m.toString().padStart(2, '0')}`
 }
 
-function getIntervalFromFilter(type: 'WEEK' | 'MONTH', value: string): { start: Date; end: Date } | null {
+function getIntervalFromFilter(
+  type: 'WEEK' | 'MONTH',
+  value: string
+): { start: Date; end: Date } | null {
   if (!value) return null
 
   if (type === 'WEEK') {
@@ -83,7 +102,7 @@ export default function ReportsPage() {
     const [subRes, creRes, balRes] = await Promise.all([
       getSubmittorReport(id, interval?.start, interval?.end),
       getCreatorReport(id, interval?.start, interval?.end),
-      getBalancesAsCreator(id)
+      getBalancesAsCreator(id),
     ])
     setSubmittorData(subRes)
     setCreatorData(creRes)
@@ -97,67 +116,74 @@ export default function ReportsPage() {
   }
 
   const formatRupiah = (n: number) =>
-    new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n)
+    new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      maximumFractionDigits: 0,
+    }).format(n)
 
   // ── Summary calcs ──────────────────────────────────────
-  const totalPengeluaran = submittorData.reduce((acc, s) => acc + (s.payment_status === 'LUNAS' ? Number(s.bill) || 0 : 0), 0)
-  const totalHutang = submittorData.reduce((acc, s) => acc + (s.payment_status !== 'LUNAS' ? Number(s.bill) || 0 : 0), 0)
+  const getPaidAmount = (sub: any) =>
+    (sub.paid_amount ?? (sub.payment_status === 'LUNAS' ? Number(sub.bill) || 0 : 0)) +
+    (sub.saldo_used || 0)
+  const getUnpaidAmount = (sub: any) => Math.max(0, (Number(sub.bill) || 0) - getPaidAmount(sub))
+
+  const totalPengeluaran = submittorData.reduce((acc, s) => acc + getPaidAmount(s), 0)
+  const totalHutang = submittorData.reduce((acc, s) => acc + getUnpaidAmount(s), 0)
 
   let totalOmzet = 0
   let totalPiutang = 0
-  creatorData.forEach(order => {
+  creatorData.forEach((order) => {
     order.submissions.forEach((sub: any) => {
       totalOmzet += Number(sub.bill) || 0
-      if (sub.payment_status !== 'LUNAS') totalPiutang += Number(sub.bill) || 0
+      totalPiutang += getUnpaidAmount(sub)
     })
   })
 
   const filterLabel = filterType === 'WEEK' ? `Minggu ${filterValue}` : `Bulan ${filterValue}`
 
   return (
-    <div className="space-y-6 animate-in fade-in duration-500 pb-12">
-
+    <div className="animate-in fade-in space-y-6 pb-12 duration-500">
       {/* ── Header: Tab Switcher (left) + Filter Controls (right) ── */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white dark:bg-slate-900 px-4 py-3 rounded-2xl border border-slate-200/80 dark:border-slate-800 shadow-sm">
-
+      <div className="flex flex-col justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white px-4 py-3 shadow-sm md:flex-row md:items-center dark:border-slate-800 dark:bg-slate-900">
         {/* Tab Switcher — positioned where the title was */}
-        <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 p-1 rounded-xl text-xs font-bold">
+        <div className="flex items-center rounded-xl bg-slate-100 p-1 text-xs font-bold dark:bg-slate-800/80">
           <button
             onClick={() => setActiveTab('SUBMITTOR')}
             className={cn(
-              'px-5 py-2 rounded-lg transition-all duration-300 flex items-center justify-center gap-2',
+              'flex items-center justify-center gap-2 rounded-lg px-5 py-2 transition-all duration-300',
               activeTab === 'SUBMITTOR'
-                ? 'bg-white dark:bg-slate-900 text-[#1B2CC1] dark:text-white shadow-sm font-black'
+                ? 'bg-white font-black text-[#1B2CC1] shadow-sm dark:bg-slate-900 dark:text-white'
                 : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
             )}
           >
-            <TrendingDown className="w-4 h-4" /> Pengeluaran Saya
+            <TrendingDown className="h-4 w-4" /> Pengeluaran Saya
           </button>
           <button
             onClick={() => setActiveTab('CREATOR')}
             className={cn(
-              'px-5 py-2 rounded-lg transition-all duration-300 flex items-center justify-center gap-2',
+              'flex items-center justify-center gap-2 rounded-lg px-5 py-2 transition-all duration-300',
               activeTab === 'CREATOR'
-                ? 'bg-white dark:bg-slate-900 text-[#1B2CC1] dark:text-white shadow-sm font-black'
+                ? 'bg-white font-black text-[#1B2CC1] shadow-sm dark:bg-slate-900 dark:text-white'
                 : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
             )}
           >
-            <TrendingUp className="w-4 h-4" /> Omzet (Kreator)
+            <TrendingUp className="h-4 w-4" /> Omzet (Kreator)
           </button>
         </div>
 
         {/* Filter Controls */}
-        <div className="flex items-center gap-2 flex-wrap">
+        <div className="flex flex-wrap items-center gap-2">
           {/* Type toggle */}
-          <div className="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl p-1 gap-1">
-            {(['WEEK', 'MONTH'] as const).map(t => (
+          <div className="flex items-center gap-1 rounded-xl bg-slate-100 p-1 dark:bg-slate-800">
+            {(['WEEK', 'MONTH'] as const).map((t) => (
               <button
                 key={t}
                 onClick={() => handleFilterTypeChange(t)}
                 className={cn(
-                  'px-3 py-1.5 rounded-lg text-xs font-bold transition-all',
+                  'rounded-lg px-3 py-1.5 text-xs font-bold transition-all',
                   filterType === t
-                    ? 'bg-white dark:bg-slate-700 text-[#1B2CC1] shadow-sm'
+                    ? 'bg-white text-[#1B2CC1] shadow-sm dark:bg-slate-700'
                     : 'text-slate-500 hover:text-slate-800 dark:hover:text-slate-200'
                 )}
               >
@@ -169,57 +195,67 @@ export default function ReportsPage() {
           {/* Date Picker */}
           <div
             onClick={() => pickerRef.current?.showPicker()}
-            className="flex items-center gap-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl px-3 py-2 shadow-sm cursor-pointer hover:border-[#1B2CC1]/50 transition-colors select-none"
+            className="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 shadow-sm transition-colors select-none hover:border-[#1B2CC1]/50 dark:border-slate-700 dark:bg-slate-900"
           >
             <input
               ref={pickerRef}
               type={filterType === 'WEEK' ? 'week' : 'month'}
               value={filterValue}
-              onChange={e => setFilterValue(e.target.value)}
-              className="text-sm font-bold text-slate-700 dark:text-slate-200 bg-transparent border-none outline-none cursor-pointer w-[140px] [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-inner-spin-button]:hidden"
+              onChange={(e) => setFilterValue(e.target.value)}
+              className="w-[140px] cursor-pointer border-none bg-transparent text-sm font-bold text-slate-700 outline-none dark:text-slate-200 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-inner-spin-button]:hidden"
             />
-            <CalendarIcon className="w-4 h-4 text-slate-400 shrink-0" />
+            <CalendarIcon className="h-4 w-4 shrink-0 text-slate-400" />
           </div>
         </div>
       </div>
 
       {/* Loading overlay */}
       {loading && (
-        <div className="flex items-center justify-center py-16 gap-3 text-slate-400">
-          <Loader2 className="w-6 h-6 animate-spin text-[#1B2CC1]" />
+        <div className="flex items-center justify-center gap-3 py-16 text-slate-400">
+          <Loader2 className="h-6 w-6 animate-spin text-[#1B2CC1]" />
           <span className="text-sm font-semibold">Memuat data {filterLabel}...</span>
         </div>
       )}
 
       {/* ── SUBMITTOR TAB ── */}
       {!loading && activeTab === 'SUBMITTOR' && (
-        <div className="space-y-6 animate-in slide-in-from-left-2 duration-300">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="animate-in slide-in-from-left-2 space-y-6 duration-300">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <Card className="rounded-2xl border-none bg-gradient-to-br from-emerald-500 to-emerald-700 text-white shadow-lg shadow-emerald-500/20">
-              <div className="p-4 flex items-center gap-4">
-                <div className="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm shrink-0">
-                  <Wallet className="w-6 h-6 text-white" />
+              <div className="flex items-center gap-4 p-4">
+                <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
+                  <Wallet className="h-6 w-6 text-white" />
                 </div>
                 <div className="flex flex-col">
-                  <span className="text-emerald-100 font-bold text-xs tracking-wide uppercase mb-1">Total Pengeluaran (Lunas)</span>
-                  <h2 className="text-2xl font-black leading-none mb-1">{formatRupiah(totalPengeluaran)}</h2>
+                  <span className="mb-1 text-xs font-bold tracking-wide text-emerald-100 uppercase">
+                    Total Pengeluaran (Lunas)
+                  </span>
+                  <h2 className="mb-1 text-2xl leading-none font-black">
+                    {formatRupiah(totalPengeluaran)}
+                  </h2>
                   <p className="text-xs text-emerald-100">
-                    Dari {submittorData.filter(s => s.payment_status === 'LUNAS').length} pesanan lunas.
+                    Dari {submittorData.filter((s) => s.payment_status === 'LUNAS').length} pesanan
+                    lunas.
                   </p>
                 </div>
               </div>
             </Card>
 
             <Card className="rounded-2xl border-none bg-gradient-to-br from-rose-500 to-rose-700 text-white shadow-lg shadow-rose-500/20">
-              <div className="p-4 flex items-center gap-4">
-                <div className="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm shrink-0">
-                  <ArrowRightLeft className="w-6 h-6 text-white" />
+              <div className="flex items-center gap-4 p-4">
+                <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
+                  <ArrowRightLeft className="h-6 w-6 text-white" />
                 </div>
                 <div className="flex flex-col">
-                  <span className="text-rose-100 font-bold text-xs tracking-wide uppercase mb-1">Hutang Pribadi (Belum Bayar)</span>
-                  <h2 className="text-2xl font-black leading-none mb-1">{formatRupiah(totalHutang)}</h2>
+                  <span className="mb-1 text-xs font-bold tracking-wide text-rose-100 uppercase">
+                    Hutang Pribadi (Belum Bayar)
+                  </span>
+                  <h2 className="mb-1 text-2xl leading-none font-black">
+                    {formatRupiah(totalHutang)}
+                  </h2>
                   <p className="text-xs text-rose-100">
-                    {submittorData.filter(s => s.payment_status !== 'LUNAS').length} tagihan masih gantung.
+                    {submittorData.filter((s) => s.payment_status !== 'LUNAS').length} tagihan masih
+                    gantung.
                   </p>
                 </div>
               </div>
@@ -233,30 +269,42 @@ export default function ReportsPage() {
 
       {/* ── CREATOR TAB ── */}
       {!loading && activeTab === 'CREATOR' && (
-        <div className="space-y-6 animate-in slide-in-from-right-2 duration-300">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="animate-in slide-in-from-right-2 space-y-6 duration-300">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <Card className="rounded-2xl border-none bg-gradient-to-br from-[#1B2CC1] to-[#121E85] text-white shadow-lg shadow-[#1B2CC1]/20">
-              <div className="p-4 flex items-center gap-4">
-                <div className="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm shrink-0">
-                  <TrendingUp className="w-6 h-6 text-white" />
+              <div className="flex items-center gap-4 p-4">
+                <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
+                  <TrendingUp className="h-6 w-6 text-white" />
                 </div>
                 <div className="flex flex-col">
-                  <span className="text-blue-200 font-bold text-xs tracking-wide uppercase mb-1">Total Omzet Dikelola</span>
-                  <h2 className="text-2xl font-black leading-none mb-1">{formatRupiah(totalOmzet)}</h2>
-                  <p className="text-xs text-blue-200">Dari {creatorData.length} PO yang Anda buat.</p>
+                  <span className="mb-1 text-xs font-bold tracking-wide text-blue-200 uppercase">
+                    Total Omzet Dikelola
+                  </span>
+                  <h2 className="mb-1 text-2xl leading-none font-black">
+                    {formatRupiah(totalOmzet)}
+                  </h2>
+                  <p className="text-xs text-blue-200">
+                    Dari {creatorData.length} PO yang Anda buat.
+                  </p>
                 </div>
               </div>
             </Card>
 
             <Card className="rounded-2xl border-none bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/20">
-              <div className="p-4 flex items-center gap-4">
-                <div className="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm shrink-0">
-                  <ArrowRightLeft className="w-6 h-6 text-white" />
+              <div className="flex items-center gap-4 p-4">
+                <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
+                  <ArrowRightLeft className="h-6 w-6 text-white" />
                 </div>
                 <div className="flex flex-col">
-                  <span className="text-amber-100 font-bold text-xs tracking-wide uppercase mb-1">Total Piutang (Belum Dibayar)</span>
-                  <h2 className="text-2xl font-black leading-none mb-1">{formatRupiah(totalPiutang)}</h2>
-                  <p className="text-xs text-amber-100">Uang Anda yang masih tertahan di teman-teman.</p>
+                  <span className="mb-1 text-xs font-bold tracking-wide text-amber-100 uppercase">
+                    Total Piutang (Belum Dibayar)
+                  </span>
+                  <h2 className="mb-1 text-2xl leading-none font-black">
+                    {formatRupiah(totalPiutang)}
+                  </h2>
+                  <p className="text-xs text-amber-100">
+                    Uang Anda yang masih tertahan di teman-teman.
+                  </p>
                 </div>
               </div>
             </Card>
@@ -265,15 +313,15 @@ export default function ReportsPage() {
           <ReportCharts type="CREATOR" data={creatorData} />
 
           {/* Sub-Tabs */}
-          <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 p-1 rounded-xl text-xs font-bold w-full sm:w-auto">
-            {([ 'BY_PERSON','BY_ORDER',] as const).map(tab => (
+          <div className="flex w-full items-center rounded-xl bg-slate-100 p-1 text-xs font-bold sm:w-auto dark:bg-slate-800/80">
+            {(['BY_PERSON', 'BY_ORDER'] as const).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setCreatorTab(tab)}
                 className={cn(
-                  'flex-1 sm:flex-none px-5 py-2 rounded-lg transition-all duration-200 flex items-center justify-center gap-1.5',
+                  'flex flex-1 items-center justify-center gap-1.5 rounded-lg px-5 py-2 transition-all duration-200 sm:flex-none',
                   creatorTab === tab
-                    ? 'bg-white dark:bg-slate-900 text-[#1B2CC1] dark:text-white shadow-sm font-black'
+                    ? 'bg-white font-black text-[#1B2CC1] shadow-sm dark:bg-slate-900 dark:text-white'
                     : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
                 )}
               >
@@ -289,7 +337,9 @@ export default function ReportsPage() {
               data={creatorData}
               balancesData={creatorBalances}
               creatorId={userId!}
-              onUpdate={() => { if (userId) loadData(userId) }}
+              onUpdate={() => {
+                if (userId) loadData(userId)
+              }}
             />
           )}
         </div>

src/app/(app)/settings/integrations/page.tsx

@@ -15,7 +15,7 @@ export default function IntegrationsPage() {
   const [settings, setSettings] = useState({
     MATTERMOST_WEBHOOK_URL: '',
     MATTERMOST_TEMPLATE: '',
-    WHATSAPP_TEMPLATE: ''
+    WHATSAPP_TEMPLATE: '',
   })
 
   useEffect(() => {
@@ -24,8 +24,12 @@ export default function IntegrationsPage() {
       if (data) {
         setSettings({
           MATTERMOST_WEBHOOK_URL: data.MATTERMOST_WEBHOOK_URL || '',
-          MATTERMOST_TEMPLATE: data.MATTERMOST_TEMPLATE || 'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}',
-          WHATSAPP_TEMPLATE: data.WHATSAPP_TEMPLATE || 'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}'
+          MATTERMOST_TEMPLATE:
+            data.MATTERMOST_TEMPLATE ||
+            'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}',
+          WHATSAPP_TEMPLATE:
+            data.WHATSAPP_TEMPLATE ||
+            'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}',
         })
       }
       setLoading(false)
@@ -34,7 +38,7 @@ export default function IntegrationsPage() {
   }, [])
 
   const handleChange = (key: string, value: string) => {
-    setSettings(prev => ({ ...prev, [key]: value }))
+    setSettings((prev) => ({ ...prev, [key]: value }))
   }
 
   const handleSave = async () => {
@@ -43,12 +47,12 @@ export default function IntegrationsPage() {
     if (res.success) {
       toast.success('Berhasil Disimpan', {
         description: 'Pengaturan integrasi berhasil disimpan!',
-        duration: 3000
+        duration: 3000,
       })
     } else {
       toast.error('Gagal', {
         description: 'Gagal menyimpan pengaturan',
-        duration: 3000
+        duration: 3000,
       })
     }
     setSaving(false)
@@ -56,73 +60,92 @@ export default function IntegrationsPage() {
 
   if (loading) {
     return (
-      <div className="flex justify-center items-center h-64">
-        <Loader2 className="w-8 h-8 animate-spin text-[#1B2CC1]" />
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
       </div>
     )
   }
 
   return (
-    <div className="p-6 space-y-8">
+    <div className="space-y-8 p-6">
       <div>
         <h2 className="text-xl font-bold text-slate-900 dark:text-white">Integrasi & Sharing</h2>
-        <p className="text-xs text-slate-500 mt-1">Konfigurasi endpoint API dan template pesan otomatis.</p>
+        <p className="mt-1 text-xs text-slate-500">
+          Konfigurasi endpoint API dan template pesan otomatis.
+        </p>
       </div>
 
-      <div className="space-y-6 max-w-3xl">
+      <div className="max-w-3xl space-y-6">
         {/* Mattermost Section */}
-        <div className="p-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 space-y-4">
-          <div className="flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-black">
-            <MessageSquare className="w-5 h-5" />
+        <div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-900/50">
+          <div className="flex items-center gap-2 font-black text-indigo-600 dark:text-indigo-400">
+            <MessageSquare className="h-5 w-5" />
             <h3>Mattermost Webhook</h3>
           </div>
-          <p className="text-xs text-slate-500">Gunakan URL Incoming Webhook dari Mattermost untuk mengirim broadcast PO baru secara otomatis.</p>
+          <p className="text-xs text-slate-500">
+            Gunakan URL Incoming Webhook dari Mattermost untuk mengirim broadcast PO baru secara
+            otomatis.
+          </p>
 
           <div className="space-y-1.5">
-            <Label className="text-xs font-bold uppercase text-slate-700">Webhook URL</Label>
+            <Label className="text-xs font-bold text-slate-700 uppercase">Webhook URL</Label>
             <Input
               value={settings.MATTERMOST_WEBHOOK_URL}
-              onChange={e => handleChange('MATTERMOST_WEBHOOK_URL', e.target.value)} 
+              onChange={(e) => handleChange('MATTERMOST_WEBHOOK_URL', e.target.value)}
               className="h-11 rounded-xl bg-white dark:bg-slate-950"
               placeholder="https://mattermost.yourdomain.com/hooks/xxx"
             />
           </div>
 
           <div className="space-y-1.5">
-            <Label className="text-xs font-bold uppercase text-slate-700">Pesan Template</Label>
+            <Label className="text-xs font-bold text-slate-700 uppercase">Pesan Template</Label>
             <Textarea
               value={settings.MATTERMOST_TEMPLATE}
-              onChange={e => handleChange('MATTERMOST_TEMPLATE', e.target.value)} 
-              className="rounded-xl min-h-[100px] bg-white dark:bg-slate-950" 
+              onChange={(e) => handleChange('MATTERMOST_TEMPLATE', e.target.value)}
+              className="min-h-[100px] rounded-xl bg-white dark:bg-slate-950"
               placeholder="Template pesan..."
             />
-            <p className="text-[10px] text-slate-500 flex items-center gap-1"><AlertCircle className="w-3 h-3"/> Gunakan variabel: {'{title}'}, {'{url}'}</p>
+            <p className="flex items-center gap-1 text-[10px] text-slate-500">
+              <AlertCircle className="h-3 w-3" /> Gunakan variabel: {'{title}'}, {'{url}'}
+            </p>
           </div>
         </div>
 
         {/* WhatsApp Section */}
-        <div className="p-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 space-y-4">
-          <div className="flex items-center gap-2 text-emerald-600 dark:text-emerald-400 font-black">
-            <MessageCircle className="w-5 h-5" />
+        <div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-900/50">
+          <div className="flex items-center gap-2 font-black text-emerald-600 dark:text-emerald-400">
+            <MessageCircle className="h-5 w-5" />
             <h3>WhatsApp Share Template</h3>
           </div>
-          <p className="text-xs text-slate-500">Atur template teks default saat user menekan tombol share ke WhatsApp.</p>
+          <p className="text-xs text-slate-500">
+            Atur template teks default saat user menekan tombol share ke WhatsApp.
+          </p>
 
           <div className="space-y-1.5">
-            <Label className="text-xs font-bold uppercase text-slate-700">Pesan Template</Label>
+            <Label className="text-xs font-bold text-slate-700 uppercase">Pesan Template</Label>
             <Textarea
               value={settings.WHATSAPP_TEMPLATE}
-              onChange={e => handleChange('WHATSAPP_TEMPLATE', e.target.value)} 
-              className="rounded-xl min-h-[100px] bg-white dark:bg-slate-950" 
+              onChange={(e) => handleChange('WHATSAPP_TEMPLATE', e.target.value)}
+              className="min-h-[100px] rounded-xl bg-white dark:bg-slate-950"
               placeholder="Template pesan..."
             />
-            <p className="text-[10px] text-slate-500 flex items-center gap-1"><AlertCircle className="w-3 h-3"/> Gunakan variabel: {'{title}'}, {'{url}'}</p>
+            <p className="flex items-center gap-1 text-[10px] text-slate-500">
+              <AlertCircle className="h-3 w-3" /> Gunakan variabel: {'{title}'}, {'{url}'}
+            </p>
           </div>
         </div>
 
         <div className="pt-2">
-          <Button onClick={handleSave} disabled={saving} className="bg-[#1B2CC1] hover:bg-[#15229E] text-white rounded-xl h-11 px-8 font-bold shadow-md w-full sm:w-auto">
-            {saving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
+          <Button
+            onClick={handleSave}
+            disabled={saving}
+            className="h-11 w-full rounded-xl bg-[#1B2CC1] px-8 font-bold text-white shadow-md hover:bg-[#15229E] sm:w-auto"
+          >
+            {saving ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="mr-2 h-4 w-4" />
+            )}
             Simpan Konfigurasi
           </Button>
         </div>

src/app/(app)/settings/layout.tsx

@@ -14,10 +14,10 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
   ]
 
   return (
-    <div className="space-y-6 animate-in fade-in duration-500 pb-12">
+    <div className="animate-in fade-in space-y-6 pb-12 duration-500">
       {/* Settings Navigation Tabs */}
-      <div className="flex flex-col md:flex-row items-start md:items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-200/80 dark:border-slate-800 shadow-sm overflow-x-auto">
-        <div className="flex items-center bg-slate-100 dark:bg-slate-800/80 p-1 rounded-xl text-xs font-bold w-full md:w-auto">
+      <div className="flex flex-col items-start gap-4 overflow-x-auto rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm md:flex-row md:items-center dark:border-slate-800 dark:bg-slate-900">
+        <div className="flex w-full items-center rounded-xl bg-slate-100 p-1 text-xs font-bold md:w-auto dark:bg-slate-800/80">
           {tabs.map((tab) => {
             const isActive = pathname === tab.href
             const Icon = tab.icon
@@ -26,13 +26,13 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
                 key={tab.href}
                 href={tab.href}
                 className={cn(
-                  "flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 whitespace-nowrap",
+                  'flex items-center gap-2 rounded-lg px-4 py-2 whitespace-nowrap transition-all duration-200',
                   isActive
-                    ? "bg-white dark:bg-slate-900 text-[#1B2CC1] dark:text-blue-400 shadow-sm font-black" 
-                    : "text-slate-500 hover:text-slate-900 dark:hover:text-white"
+                    ? 'bg-white font-black text-[#1B2CC1] shadow-sm dark:bg-slate-900 dark:text-blue-400'
+                    : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
                 )}
               >
-                <Icon className="w-4 h-4" />
+                <Icon className="h-4 w-4" />
                 {tab.name}
               </Link>
             )
@@ -41,7 +41,7 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
       </div>
 
       {/* Settings Content */}
-      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200/80 dark:border-slate-800 shadow-sm overflow-hidden">
+      <div className="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
         {children}
       </div>
     </div>

src/app/(app)/settings/users/page.tsx

@@ -1,14 +1,26 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { getUsers, createUserByAdmin, toggleUserActive, deleteUser, resetUserPassword } from '@/app/actions'
+import {
+  getUsers,
+  createUserByAdmin,
+  toggleUserActive,
+  deleteUser,
+  resetUserPassword,
+} from '@/app/actions'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Loader2, Plus, KeyRound, Ban, Trash2, CheckCircle2, ShieldCheck, User } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 
 export default function UsersPage() {
   const [users, setUsers] = useState<any[]>([])
@@ -80,7 +92,8 @@ export default function UsersPage() {
   }
 
   const handleToggleActive = async (id: string, currentStatus: boolean) => {
-    if (!confirm(`Yakin ingin ${currentStatus ? 'menonaktifkan' : 'mengaktifkan'} user ini?`)) return
+    if (!confirm(`Yakin ingin ${currentStatus ? 'menonaktifkan' : 'mengaktifkan'} user ini?`))
+      return
     const res = await toggleUserActive(id, !currentStatus)
     if (res.success) {
       loadUsers(page)
@@ -101,187 +114,251 @@ export default function UsersPage() {
 
   return (
     <div className="p-6">
-      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
+      <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
         <div>
           <h2 className="text-xl font-bold text-slate-900 dark:text-white">Manajemen Pengguna</h2>
-          <p className="text-xs text-slate-500 mt-1">Kelola data seluruh pengguna TitipIn.</p>
+          <p className="mt-1 text-xs text-slate-500">Kelola data seluruh pengguna TitipIn.</p>
         </div>
-        <Button onClick={() => setIsCreateOpen(true)} className="bg-[#1B2CC1] hover:bg-[#15229E] text-white rounded-xl h-10 px-4 shadow-sm text-xs font-bold">
-          <Plus className="w-4 h-4 mr-1.5" /> Tambah User
+        <Button
+          onClick={() => setIsCreateOpen(true)}
+          className="h-10 rounded-xl bg-[#1B2CC1] px-4 text-xs font-bold text-white shadow-sm hover:bg-[#15229E]"
+        >
+          <Plus className="mr-1.5 h-4 w-4" /> Tambah User
         </Button>
       </div>
 
       <div className="overflow-x-auto">
-          <table className="w-full text-sm text-left">
-            <thead className="bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800 text-xs uppercase font-bold text-slate-500">
+        <table className="w-full text-left text-sm">
+          <thead className="border-b border-slate-100 bg-slate-50/50 text-xs font-bold text-slate-500 uppercase dark:border-slate-800 dark:bg-slate-800/50">
+            <tr>
+              <th className="px-6 py-4">Pengguna</th>
+              <th className="px-6 py-4">Role</th>
+              <th className="px-6 py-4">Status</th>
+              <th className="px-6 py-4">Terdaftar</th>
+              <th className="px-6 py-4 text-right">Aksi</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+            {loading ? (
               <tr>
-                <th className="px-6 py-4">Pengguna</th>
-                <th className="px-6 py-4">Role</th>
-                <th className="px-6 py-4">Status</th>
-                <th className="px-6 py-4">Terdaftar</th>
-                <th className="px-6 py-4 text-right">Aksi</th>
+                <td colSpan={5} className="px-6 py-12 text-center">
+                  <Loader2 className="mx-auto h-6 w-6 animate-spin text-[#1B2CC1]" />
+                </td>
               </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
-              {loading ? (
-                <tr>
-                  <td colSpan={5} className="px-6 py-12 text-center">
-                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-[#1B2CC1]" />
+            ) : users.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-6 py-12 text-center text-slate-500">
+                  Belum ada pengguna lain.
+                </td>
+              </tr>
+            ) : (
+              users.map((u) => (
+                <tr
+                  key={u.id}
+                  className="transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/20"
+                >
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-3">
+                      {u.photo ? (
+                        <img
+                          src={u.photo}
+                          alt={u.name}
+                          className="h-9 w-9 shrink-0 rounded-full object-cover"
+                        />
+                      ) : (
+                        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-bold text-blue-700 uppercase">
+                          {u.name.charAt(0)}
+                        </div>
+                      )}
+                      <div>
+                        <div className="font-bold text-slate-900 dark:text-slate-100">{u.name}</div>
+                        <div className="text-xs text-slate-500">@{u.username}</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4">
+                    {u.role === 'superadmin' ? (
+                      <span className="inline-flex items-center gap-1 rounded-md bg-purple-100 px-2 py-1 text-[10px] font-bold text-purple-700 uppercase">
+                        <ShieldCheck className="h-3 w-3" /> Superadmin
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1 rounded-md bg-slate-100 px-2 py-1 text-[10px] font-bold text-slate-700 uppercase">
+                        <User className="h-3 w-3" /> User
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4">
+                    {u.is_active ? (
+                      <span className="inline-flex items-center gap-1 rounded-md bg-emerald-100 px-2 py-1 text-[10px] font-bold text-emerald-700 uppercase">
+                        <CheckCircle2 className="h-3 w-3" /> Aktif
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1 rounded-md bg-red-100 px-2 py-1 text-[10px] font-bold text-red-700 uppercase">
+                        <Ban className="h-3 w-3" /> Nonaktif
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4 text-xs text-slate-500">
+                    {new Date(u.created_at).toLocaleDateString('id-ID')}
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          setSelectedUser(u)
+                          setIsPassOpen(true)
+                        }}
+                        className="h-8 rounded-lg bg-slate-100 px-2 font-medium text-slate-700 hover:bg-slate-200 hover:text-slate-900"
+                        title="Ubah Password"
+                      >
+                        <KeyRound className="h-4 w-4" />
+                      </Button>
+
+                      {u.role !== 'superadmin' && (
+                        <>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => handleToggleActive(u.id, u.is_active)}
+                            className={`h-8 rounded-lg px-2 font-medium ${u.is_active ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 hover:text-amber-900' : 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 hover:text-emerald-900'}`}
+                            title={u.is_active ? 'Nonaktifkan' : 'Aktifkan'}
+                          >
+                            {u.is_active ? (
+                              <Ban className="h-4 w-4" />
+                            ) : (
+                              <CheckCircle2 className="h-4 w-4" />
+                            )}
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => handleDelete(u.id)}
+                            className="h-8 rounded-lg bg-rose-100 px-2 font-medium text-rose-700 hover:bg-rose-200 hover:text-rose-900"
+                            title="Hapus"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </>
+                      )}
+                    </div>
                   </td>
                 </tr>
-              ) : users.length === 0 ? (
-                <tr>
-                  <td colSpan={5} className="px-6 py-12 text-center text-slate-500">Belum ada pengguna lain.</td>
-                </tr>
-              ) : (
-                users.map(u => (
-                  <tr key={u.id} className="hover:bg-slate-50/50 dark:hover:bg-slate-800/20 transition-colors">
-                    <td className="px-6 py-4">
-                      <div className="flex items-center gap-3">
-                        {u.photo ? (
-                          <img src={u.photo} alt={u.name} className="w-9 h-9 rounded-full object-cover shrink-0" />
-                        ) : (
-                          <div className="w-9 h-9 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-xs uppercase shrink-0">
-                            {u.name.charAt(0)}
-                          </div>
-                        )}
-                        <div>
-                          <div className="font-bold text-slate-900 dark:text-slate-100">{u.name}</div>
-                          <div className="text-xs text-slate-500">@{u.username}</div>
-                        </div>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4">
-                      {u.role === 'superadmin' ? (
-                        <span className="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-md bg-purple-100 text-purple-700 uppercase">
-                          <ShieldCheck className="w-3 h-3" /> Superadmin
-                        </span>
-                      ) : (
-                        <span className="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-md bg-slate-100 text-slate-700 uppercase">
-                          <User className="w-3 h-3" /> User
-                        </span>
-                      )}
-                    </td>
-                    <td className="px-6 py-4">
-                      {u.is_active ? (
-                        <span className="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-md bg-emerald-100 text-emerald-700 uppercase">
-                          <CheckCircle2 className="w-3 h-3" /> Aktif
-                        </span>
-                      ) : (
-                        <span className="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-md bg-red-100 text-red-700 uppercase">
-                          <Ban className="w-3 h-3" /> Nonaktif
-                        </span>
-                      )}
-                    </td>
-                    <td className="px-6 py-4 text-slate-500 text-xs">
-                      {new Date(u.created_at).toLocaleDateString('id-ID')}
-                    </td>
-                    <td className="px-6 py-4 text-right">
-                      <div className="flex justify-end gap-2">
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => {
-                            setSelectedUser(u)
-                            setIsPassOpen(true)
-                          }}
-                          className="h-8 px-2 rounded-lg bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 font-medium"
-                          title="Ubah Password"
-                        >
-                          <KeyRound className="w-4 h-4" />
-                        </Button>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
 
-                        {u.role !== 'superadmin' && (
-                          <>
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              onClick={() => handleToggleActive(u.id, u.is_active)}
-                              className={`h-8 px-2 rounded-lg font-medium ${u.is_active ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 hover:text-amber-900' : 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 hover:text-emerald-900'}`}
-                              title={u.is_active ? 'Nonaktifkan' : 'Aktifkan'}
-                            >
-                              {u.is_active ? <Ban className="w-4 h-4" /> : <CheckCircle2 className="w-4 h-4" />}
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              onClick={() => handleDelete(u.id)}
-                              className="h-8 px-2 rounded-lg bg-rose-100 text-rose-700 hover:bg-rose-200 hover:text-rose-900 font-medium"
-                              title="Hapus"
-                            >
-                              <Trash2 className="w-4 h-4" />
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
-        
-        {totalPages > 1 && (
-          <div className="p-4 border-t border-slate-100 dark:border-slate-800 flex justify-between items-center bg-slate-50/50">
-            <span className="text-xs text-slate-500">Halaman {page} dari {totalPages}</span>
-            <div className="flex gap-2">
-              <Button disabled={page === 1} onClick={() => setPage(p => p - 1)} variant="outline" size="sm" className="h-8 rounded-lg text-xs">Sebelumnya</Button>
-              <Button disabled={page === totalPages} onClick={() => setPage(p => p + 1)} variant="outline" size="sm" className="h-8 rounded-lg text-xs">Selanjutnya</Button>
-            </div>
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between border-t border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800">
+          <span className="text-xs text-slate-500">
+            Halaman {page} dari {totalPages}
+          </span>
+          <div className="flex gap-2">
+            <Button
+              disabled={page === 1}
+              onClick={() => setPage((p) => p - 1)}
+              variant="outline"
+              size="sm"
+              className="h-8 rounded-lg text-xs"
+            >
+              Sebelumnya
+            </Button>
+            <Button
+              disabled={page === totalPages}
+              onClick={() => setPage((p) => p + 1)}
+              variant="outline"
+              size="sm"
+              className="h-8 rounded-lg text-xs"
+            >
+              Selanjutnya
+            </Button>
           </div>
-        )}
+        </div>
+      )}
 
       {/* CREATE MODAL */}
       <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
-        <DialogContent className="sm:max-w-md rounded-3xl p-0 overflow-hidden border-0">
-          <div className="px-6 pt-6 pb-4 border-b border-slate-100">
+        <DialogContent className="overflow-hidden rounded-3xl border-0 p-0 sm:max-w-md">
+          <div className="border-b border-slate-100 px-6 pt-6 pb-4">
             <DialogTitle className="text-xl font-black">Tambah User Baru</DialogTitle>
           </div>
-          <form onSubmit={handleCreateUser} className="px-6 py-4 space-y-4">
+          <form onSubmit={handleCreateUser} className="space-y-4 px-6 py-4">
             <div className="space-y-1.5">
-              <Label className="text-xs font-bold uppercase text-slate-700">Nama Lengkap</Label>
-              <Input required value={name} onChange={e => setName(e.target.value)} className="h-11 rounded-xl" placeholder="Masukkan nama lengkap" />
+              <Label className="text-xs font-bold text-slate-700 uppercase">Nama Lengkap</Label>
+              <Input
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="h-11 rounded-xl"
+                placeholder="Masukkan nama lengkap"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-xs font-bold uppercase text-slate-700">Username</Label>
-              <Input required value={username} onChange={e => setUsername(e.target.value)} className="h-11 rounded-xl" placeholder="Masukkan username unik" />
+              <Label className="text-xs font-bold text-slate-700 uppercase">Username</Label>
+              <Input
+                required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="h-11 rounded-xl"
+                placeholder="Masukkan username unik"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-xs font-bold uppercase text-slate-700">Password</Label>
-              <Input required type="password" value={password} onChange={e => setPassword(e.target.value)} className="h-11 rounded-xl" placeholder="Buat kata sandi (min. 6 karakter)" />
+              <Label className="text-xs font-bold text-slate-700 uppercase">Password</Label>
+              <Input
+                required
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="h-11 rounded-xl"
+                placeholder="Buat kata sandi (min. 6 karakter)"
+              />
             </div>
             <div className="space-y-2">
-              <Label className="text-xs font-bold uppercase text-slate-700">Role Akses</Label>
+              <Label className="text-xs font-bold text-slate-700 uppercase">Role Akses</Label>
               <div className="grid grid-cols-2 gap-3">
                 <button
                   type="button"
                   onClick={() => setRole('user')}
-                  className={`h-11 rounded-xl border flex items-center justify-center gap-2 text-sm font-bold transition-all ${
+                  className={`flex h-11 items-center justify-center gap-2 rounded-xl border text-sm font-bold transition-all ${
                     role === 'user'
                       ? 'border-[#1B2CC1] bg-[#1B2CC1]/5 text-[#1B2CC1] ring-1 ring-[#1B2CC1]/20'
                       : 'border-slate-200 text-slate-500 hover:bg-slate-50'
                   }`}
                 >
-                  <User className="w-4 h-4" /> User Biasa
+                  <User className="h-4 w-4" /> User Biasa
                 </button>
                 <button
                   type="button"
                   onClick={() => setRole('superadmin')}
-                  className={`h-11 rounded-xl border flex items-center justify-center gap-2 text-sm font-bold transition-all ${
+                  className={`flex h-11 items-center justify-center gap-2 rounded-xl border text-sm font-bold transition-all ${
                     role === 'superadmin'
                       ? 'border-purple-500 bg-purple-50 text-purple-700 ring-1 ring-purple-500/20'
                       : 'border-slate-200 text-slate-500 hover:bg-slate-50'
                   }`}
                 >
-                  <ShieldCheck className="w-4 h-4" /> Superadmin
+                  <ShieldCheck className="h-4 w-4" /> Superadmin
                 </button>
               </div>
             </div>
-            <div className="pt-4 flex gap-3">
-              <Button type="button" variant="outline" onClick={() => setIsCreateOpen(false)} className="flex-1 h-11 rounded-xl">Batal</Button>
-              <Button type="submit" disabled={actionLoading} className="flex-1 h-11 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white">
-                {actionLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Simpan User'}
+            <div className="flex gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsCreateOpen(false)}
+                className="h-11 flex-1 rounded-xl"
+              >
+                Batal
+              </Button>
+              <Button
+                type="submit"
+                disabled={actionLoading}
+                className="h-11 flex-1 rounded-xl bg-[#1B2CC1] text-white hover:bg-[#15229E]"
+              >
+                {actionLoading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Simpan User'}
               </Button>
             </div>
           </form>
@@ -290,20 +367,41 @@ export default function UsersPage() {
 
       {/* RESET PASSWORD MODAL */}
       <Dialog open={isPassOpen} onOpenChange={setIsPassOpen}>
-        <DialogContent className="sm:max-w-md rounded-3xl p-0 overflow-hidden border-0">
-          <div className="px-6 pt-6 pb-4 border-b border-slate-100">
+        <DialogContent className="overflow-hidden rounded-3xl border-0 p-0 sm:max-w-md">
+          <div className="border-b border-slate-100 px-6 pt-6 pb-4">
             <DialogTitle className="text-xl font-black">Ubah Password</DialogTitle>
-            <p className="text-xs text-slate-500 mt-1">Ubah password untuk user <span className="font-bold text-slate-900">@{selectedUser?.username}</span></p>
+            <p className="mt-1 text-xs text-slate-500">
+              Ubah password untuk user{' '}
+              <span className="font-bold text-slate-900">@{selectedUser?.username}</span>
+            </p>
           </div>
-          <form onSubmit={handleResetPassword} className="px-6 py-4 space-y-4">
+          <form onSubmit={handleResetPassword} className="space-y-4 px-6 py-4">
             <div className="space-y-1.5">
-              <Label className="text-xs font-bold uppercase text-slate-700">Password Baru</Label>
-              <Input required type="password" value={newPass} onChange={e => setNewPass(e.target.value)} className="h-11 rounded-xl" placeholder="Minimal 6 karakter" />
+              <Label className="text-xs font-bold text-slate-700 uppercase">Password Baru</Label>
+              <Input
+                required
+                type="password"
+                value={newPass}
+                onChange={(e) => setNewPass(e.target.value)}
+                className="h-11 rounded-xl"
+                placeholder="Minimal 6 karakter"
+              />
             </div>
-            <div className="pt-4 flex gap-3">
-              <Button type="button" variant="outline" onClick={() => setIsPassOpen(false)} className="flex-1 h-11 rounded-xl">Batal</Button>
-              <Button type="submit" disabled={actionLoading} className="flex-1 h-11 rounded-xl bg-slate-900 hover:bg-slate-800 text-white">
-                {actionLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Simpan Password'}
+            <div className="flex gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsPassOpen(false)}
+                className="h-11 flex-1 rounded-xl"
+              >
+                Batal
+              </Button>
+              <Button
+                type="submit"
+                disabled={actionLoading}
+                className="h-11 flex-1 rounded-xl bg-slate-900 text-white hover:bg-slate-800"
+              >
+                {actionLoading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Simpan Password'}
               </Button>
             </div>
           </form>

src/app/(auth)/layout.tsx

@@ -1,7 +1,3 @@
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="min-h-screen bg-[#F4F6FB] dark:bg-[#0B0F19]">
-      {children}
-    </div>
-  );
+  return <div className="min-h-screen bg-[#F4F6FB] dark:bg-[#0B0F19]">{children}</div>
 }

src/app/(auth)/login/page.tsx

@@ -41,94 +41,112 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-4 lg:p-6 relative overflow-hidden">
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-slate-50 p-4 lg:p-6 dark:bg-slate-950">
       {/* Elegant Ambient Background */}
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[600px] rounded-full bg-[#1B2CC1] opacity-10 dark:opacity-20 blur-[120px]"></div>
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] bg-[size:24px_24px]"></div>
+        <div className="absolute top-1/2 left-1/2 h-[400px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#1B2CC1] opacity-10 blur-[120px] dark:opacity-20"></div>
       </div>
 
-      <div className="w-full max-w-5xl bg-white dark:bg-slate-900 lg:rounded-[2.5rem] rounded-3xl shadow-2xl shadow-[#1B2CC1]/10 flex overflow-hidden border border-slate-100 dark:border-slate-800 relative z-10">
-        
+      <div className="relative z-10 flex w-full max-w-5xl overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-2xl shadow-[#1B2CC1]/10 lg:rounded-[2.5rem] dark:border-slate-800 dark:bg-slate-900">
         {/* Left Side: Branding (Hidden on Mobile) */}
-        <div className="hidden lg:flex w-1/2 bg-gradient-to-br from-[#1B2CC1] to-[#121E85] p-12 flex-col justify-between relative overflow-hidden">
-          <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
-            <div className="absolute -top-[20%] -left-[10%] w-[60%] h-[60%] rounded-full bg-white/10 blur-3xl" />
-            <div className="absolute top-[60%] -right-[10%] w-[70%] h-[70%] rounded-full bg-blue-400/20 blur-3xl" />
+        <div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-gradient-to-br from-[#1B2CC1] to-[#121E85] p-12 lg:flex">
+          <div className="pointer-events-none absolute top-0 left-0 h-full w-full">
+            <div className="absolute -top-[20%] -left-[10%] h-[60%] w-[60%] rounded-full bg-white/10 blur-3xl" />
+            <div className="absolute top-[60%] -right-[10%] h-[70%] w-[70%] rounded-full bg-blue-400/20 blur-3xl" />
           </div>
 
           <div className="relative z-10">
-            <div className="inline-flex items-center justify-center p-3 bg-white/10 rounded-2xl backdrop-blur-md border border-white/20 mb-8 shadow-sm">
-              <LogIn className="w-8 h-8 text-white" />
+            <div className="mb-8 inline-flex items-center justify-center rounded-2xl border border-white/20 bg-white/10 p-3 shadow-sm backdrop-blur-md">
+              <LogIn className="h-8 w-8 text-white" />
             </div>
-            <h1 className="text-4xl font-black text-white leading-tight">
+            <h1 className="text-4xl leading-tight font-black text-white">
               Selamat Datang <br /> di TitipIn
             </h1>
-            <p className="text-blue-100 mt-4 text-base max-w-sm leading-relaxed">
-              Platform modern dan terpercaya untuk mengelola pesanan jasa titip Anda dengan rapi, efisien, dan transparan.
+            <p className="mt-4 max-w-sm text-base leading-relaxed text-blue-100">
+              Platform modern dan terpercaya untuk mengelola pesanan jasa titip Anda dengan rapi,
+              efisien, dan transparan.
             </p>
           </div>
 
-          <div className="relative z-10 flex items-center gap-4 bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/10 w-fit">
+          <div className="relative z-10 flex w-fit items-center gap-4 rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur-sm">
             <div className="flex -space-x-3">
-              <div className="w-10 h-10 rounded-full bg-blue-200 border-2 border-[#121E85] flex items-center justify-center text-[10px] font-bold text-blue-700">A</div>
-              <div className="w-10 h-10 rounded-full bg-purple-200 border-2 border-[#121E85] flex items-center justify-center text-[10px] font-bold text-purple-700">B</div>
-              <div className="w-10 h-10 rounded-full bg-amber-200 border-2 border-[#121E85] flex items-center justify-center text-[10px] font-bold text-amber-700">C</div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-[#121E85] bg-blue-200 text-[10px] font-bold text-blue-700">
+                A
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-[#121E85] bg-purple-200 text-[10px] font-bold text-purple-700">
+                B
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-[#121E85] bg-amber-200 text-[10px] font-bold text-amber-700">
+                C
+              </div>
             </div>
-            <p className="text-xs text-blue-100 font-medium">Bergabung dengan ribuan<br/>pengguna lainnya.</p>
+            <p className="text-xs font-medium text-blue-100">
+              Bergabung dengan ribuan
+              <br />
+              pengguna lainnya.
+            </p>
           </div>
         </div>
 
         {/* Right Side: Form */}
-        <div className="w-full lg:w-1/2 p-8 lg:p-14 flex flex-col justify-center">
-          <div className="lg:hidden flex flex-col items-center mb-8">
-            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] flex items-center justify-center text-white shadow-lg shadow-[#1B2CC1]/25 mb-4">
-              <LogIn className="w-8 h-8" />
+        <div className="flex w-full flex-col justify-center p-8 lg:w-1/2 lg:p-14">
+          <div className="mb-8 flex flex-col items-center lg:hidden">
+            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] text-white shadow-lg shadow-[#1B2CC1]/25">
+              <LogIn className="h-8 w-8" />
             </div>
             <h1 className="text-2xl font-black text-slate-900 dark:text-white">TitipIn</h1>
           </div>
 
           <div className="mb-8 text-center lg:text-left">
-            <h2 className="text-2xl font-black text-slate-900 dark:text-white hidden lg:block mb-2">Masuk ke Akun</h2>
-            <p className="text-sm text-slate-500">Silakan masukkan kredensial Anda untuk melanjutkan</p>
+            <h2 className="mb-2 hidden text-2xl font-black text-slate-900 lg:block dark:text-white">
+              Masuk ke Akun
+            </h2>
+            <p className="text-sm text-slate-500">
+              Silakan masukkan kredensial Anda untuk melanjutkan
+            </p>
           </div>
 
           {error && (
-            <div className="bg-rose-50 text-rose-600 p-3 rounded-xl text-sm font-medium mb-6 border border-rose-100 text-center">
+            <div className="mb-6 rounded-xl border border-rose-100 bg-rose-50 p-3 text-center text-sm font-medium text-rose-600">
               {error}
             </div>
           )}
 
           <form onSubmit={handleSubmit} className="space-y-5">
             <div className="space-y-2">
-              <label className="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider">Username</label>
+              <label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
+                Username
+              </label>
               <div className="relative">
-                <User className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                <User className="absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-slate-400" />
                 <Input
                   name="username"
-                  className="pl-10 h-12 bg-slate-50 dark:bg-slate-800/50 rounded-xl border-slate-200 focus-visible:ring-[#1B2CC1]"
+                  className="h-12 rounded-xl border-slate-200 bg-slate-50 pl-10 focus-visible:ring-[#1B2CC1] dark:bg-slate-800/50"
                   placeholder="Masukkan username"
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <label className="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider">Password</label>
+              <label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
+                Password
+              </label>
               <div className="relative flex items-center">
-                <KeyRound className="absolute left-3.5 w-4 h-4 text-slate-400" />
+                <KeyRound className="absolute left-3.5 h-4 w-4 text-slate-400" />
                 <Input
                   name="password"
                   type={showPassword ? 'text' : 'password'}
-                  className="pl-10 pr-12 h-12 bg-slate-50 dark:bg-slate-800/50 rounded-xl border-slate-200 focus-visible:ring-[#1B2CC1]"
+                  className="h-12 rounded-xl border-slate-200 bg-slate-50 pr-12 pl-10 focus-visible:ring-[#1B2CC1] dark:bg-slate-800/50"
                   placeholder="Masukkan password"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors cursor-pointer"
+                  className="absolute right-3.5 cursor-pointer text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200"
                   aria-label={showPassword ? 'Sembunyikan password' : 'Tampilkan password'}
                 >
-                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                 </button>
               </div>
             </div>
@@ -136,26 +154,26 @@ export default function LoginPage() {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full h-12 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-base shadow-md shadow-[#1B2CC1]/20 transition-all active:scale-[0.98] mt-2 cursor-pointer"
+              className="mt-2 h-12 w-full cursor-pointer rounded-xl bg-[#1B2CC1] text-base font-bold text-white shadow-md shadow-[#1B2CC1]/20 transition-all hover:bg-[#15229E] active:scale-[0.98]"
             >
-              {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Masuk Sekarang'}
+              {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Masuk Sekarang'}
             </Button>
           </form>
 
-          <p className="text-center text-sm text-slate-500 mt-8">
+          <p className="mt-8 text-center text-sm text-slate-500">
             Belum punya akun?{' '}
             <button
               onClick={() => {
                 const search = window.location.search
                 router.push(`/register${search}`)
               }}
-              className="font-bold text-[#1B2CC1] hover:underline cursor-pointer"
+              className="cursor-pointer font-bold text-[#1B2CC1] hover:underline"
             >
               Daftar di sini
             </button>
           </p>
 
-          <p className="text-center text-xs text-slate-400 mt-12 font-medium">
+          <p className="mt-12 text-center text-xs font-medium text-slate-400">
             &copy; {new Date().getFullYear()} TitipIn - Sistem Titip Pesanan
           </p>
         </div>

src/app/(auth)/register/page.tsx

@@ -56,127 +56,146 @@ export default function RegisterPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-4 lg:p-6 relative overflow-hidden">
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-slate-50 p-4 lg:p-6 dark:bg-slate-950">
       {/* Elegant Ambient Background */}
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[600px] rounded-full bg-[#121E85] opacity-10 dark:opacity-20 blur-[120px]"></div>
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] bg-[size:24px_24px]"></div>
+        <div className="absolute top-1/2 left-1/2 h-[400px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#121E85] opacity-10 blur-[120px] dark:opacity-20"></div>
       </div>
 
-      <div className="w-full max-w-5xl bg-white dark:bg-slate-900 lg:rounded-[2.5rem] rounded-3xl shadow-2xl shadow-[#1B2CC1]/10 flex overflow-hidden border border-slate-100 dark:border-slate-800 relative z-10">
-        
+      <div className="relative z-10 flex w-full max-w-5xl overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-2xl shadow-[#1B2CC1]/10 lg:rounded-[2.5rem] dark:border-slate-800 dark:bg-slate-900">
         {/* Left Side: Branding (Hidden on Mobile) */}
-        <div className="hidden lg:flex w-1/2 bg-gradient-to-br from-[#121E85] to-[#1B2CC1] p-12 flex-col justify-between relative overflow-hidden">
-          <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
-            <div className="absolute -top-[20%] -left-[10%] w-[60%] h-[60%] rounded-full bg-white/10 blur-3xl" />
-            <div className="absolute top-[60%] -right-[10%] w-[70%] h-[70%] rounded-full bg-indigo-400/20 blur-3xl" />
+        <div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-gradient-to-br from-[#121E85] to-[#1B2CC1] p-12 lg:flex">
+          <div className="pointer-events-none absolute top-0 left-0 h-full w-full">
+            <div className="absolute -top-[20%] -left-[10%] h-[60%] w-[60%] rounded-full bg-white/10 blur-3xl" />
+            <div className="absolute top-[60%] -right-[10%] h-[70%] w-[70%] rounded-full bg-indigo-400/20 blur-3xl" />
           </div>
 
           <div className="relative z-10">
-            <div className="inline-flex items-center justify-center p-3 bg-white/10 rounded-2xl backdrop-blur-md border border-white/20 mb-8 shadow-sm">
-              <UserPlus className="w-8 h-8 text-white" />
+            <div className="mb-8 inline-flex items-center justify-center rounded-2xl border border-white/20 bg-white/10 p-3 shadow-sm backdrop-blur-md">
+              <UserPlus className="h-8 w-8 text-white" />
             </div>
-            <h1 className="text-4xl font-black text-white leading-tight">
+            <h1 className="text-4xl leading-tight font-black text-white">
               Mulai Perjalanan <br /> Anda di TitipIn
             </h1>
-            <p className="text-indigo-100 mt-4 text-base max-w-sm leading-relaxed">
+            <p className="mt-4 max-w-sm text-base leading-relaxed text-indigo-100">
               Buat akun secara gratis dan nikmati kemudahan mengelola PO jasa titip tanpa ribet.
             </p>
           </div>
 
-          <div className="relative z-10 flex items-center gap-4 bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/10 w-fit">
+          <div className="relative z-10 flex w-fit items-center gap-4 rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur-sm">
             <div className="flex -space-x-3">
-              <div className="w-10 h-10 rounded-full bg-emerald-200 border-2 border-[#121E85] flex items-center justify-center text-[10px] font-bold text-emerald-700">✓</div>
-              <div className="w-10 h-10 rounded-full bg-cyan-200 border-2 border-[#121E85] flex items-center justify-center text-[10px] font-bold text-cyan-700">✓</div>
-              <div className="w-10 h-10 rounded-full bg-rose-200 border-2 border-[#121E85] flex items-center justify-center text-[10px] font-bold text-rose-700">✓</div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-[#121E85] bg-emerald-200 text-[10px] font-bold text-emerald-700">
+                ✓
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-[#121E85] bg-cyan-200 text-[10px] font-bold text-cyan-700">
+                ✓
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-[#121E85] bg-rose-200 text-[10px] font-bold text-rose-700">
+                ✓
+              </div>
             </div>
-            <p className="text-xs text-indigo-100 font-medium">Aman, Cepat, dan<br/>Mudah digunakan.</p>
+            <p className="text-xs font-medium text-indigo-100">
+              Aman, Cepat, dan
+              <br />
+              Mudah digunakan.
+            </p>
           </div>
         </div>
 
         {/* Right Side: Form */}
-        <div className="w-full lg:w-1/2 p-8 lg:p-14 flex flex-col justify-center">
-          <div className="lg:hidden flex flex-col items-center mb-8">
-            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] flex items-center justify-center text-white shadow-lg shadow-[#1B2CC1]/25 mb-4">
-              <UserPlus className="w-8 h-8" />
+        <div className="flex w-full flex-col justify-center p-8 lg:w-1/2 lg:p-14">
+          <div className="mb-8 flex flex-col items-center lg:hidden">
+            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] text-white shadow-lg shadow-[#1B2CC1]/25">
+              <UserPlus className="h-8 w-8" />
             </div>
             <h1 className="text-2xl font-black text-slate-900 dark:text-white">Daftar TitipIn</h1>
           </div>
 
           <div className="mb-8 text-center lg:text-left">
-            <h2 className="text-2xl font-black text-slate-900 dark:text-white hidden lg:block mb-2">Buat Akun Baru</h2>
+            <h2 className="mb-2 hidden text-2xl font-black text-slate-900 lg:block dark:text-white">
+              Buat Akun Baru
+            </h2>
             <p className="text-sm text-slate-500">Lengkapi form di bawah untuk membuat akun baru</p>
           </div>
 
           {error && (
-            <div className="bg-rose-50 text-rose-600 p-3 rounded-xl text-sm font-medium mb-6 border border-rose-100 text-center">
+            <div className="mb-6 rounded-xl border border-rose-100 bg-rose-50 p-3 text-center text-sm font-medium text-rose-600">
               {error}
             </div>
           )}
 
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="space-y-2">
-              <label className="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider">Nama Lengkap</label>
+              <label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
+                Nama Lengkap
+              </label>
               <div className="relative">
-                <BadgeCheck className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                <BadgeCheck className="absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-slate-400" />
                 <Input
                   name="name"
-                  className="pl-10 h-12 bg-slate-50 dark:bg-slate-800/50 rounded-xl border-slate-200 focus-visible:ring-[#1B2CC1]"
+                  className="h-12 rounded-xl border-slate-200 bg-slate-50 pl-10 focus-visible:ring-[#1B2CC1] dark:bg-slate-800/50"
                   placeholder="Masukkan nama lengkap"
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <label className="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider">Username</label>
+              <label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
+                Username
+              </label>
               <div className="relative">
-                <User className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                <User className="absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-slate-400" />
                 <Input
                   name="username"
-                  className="pl-10 h-12 bg-slate-50 dark:bg-slate-800/50 rounded-xl border-slate-200 focus-visible:ring-[#1B2CC1]"
+                  className="h-12 rounded-xl border-slate-200 bg-slate-50 pl-10 focus-visible:ring-[#1B2CC1] dark:bg-slate-800/50"
                   placeholder="Buat username unik"
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <label className="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider">Password</label>
+              <label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
+                Password
+              </label>
               <div className="relative flex items-center">
-                <KeyRound className="absolute left-3.5 w-4 h-4 text-slate-400" />
+                <KeyRound className="absolute left-3.5 h-4 w-4 text-slate-400" />
                 <Input
                   name="password"
                   type={showPassword ? 'text' : 'password'}
-                  className="pl-10 pr-12 h-12 bg-slate-50 dark:bg-slate-800/50 rounded-xl border-slate-200 focus-visible:ring-[#1B2CC1]"
+                  className="h-12 rounded-xl border-slate-200 bg-slate-50 pr-12 pl-10 focus-visible:ring-[#1B2CC1] dark:bg-slate-800/50"
                   placeholder="Minimal 6 karakter"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors cursor-pointer"
+                  className="absolute right-3.5 cursor-pointer text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200"
                   aria-label={showPassword ? 'Sembunyikan password' : 'Tampilkan password'}
                 >
-                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                 </button>
               </div>
             </div>
 
             <div className="space-y-2">
-              <label className="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider">Konfirmasi Password</label>
+              <label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
+                Konfirmasi Password
+              </label>
               <div className="relative flex items-center">
-                <KeyRound className="absolute left-3.5 w-4 h-4 text-slate-400" />
+                <KeyRound className="absolute left-3.5 h-4 w-4 text-slate-400" />
                 <Input
                   name="confirm"
                   type={showConfirm ? 'text' : 'password'}
-                  className="pl-10 pr-12 h-12 bg-slate-50 dark:bg-slate-800/50 rounded-xl border-slate-200 focus-visible:ring-[#1B2CC1]"
+                  className="h-12 rounded-xl border-slate-200 bg-slate-50 pr-12 pl-10 focus-visible:ring-[#1B2CC1] dark:bg-slate-800/50"
                   placeholder="Ketik ulang password"
                 />
                 <button
                   type="button"
                   onClick={() => setShowConfirm(!showConfirm)}
-                  className="absolute right-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors cursor-pointer"
+                  className="absolute right-3.5 cursor-pointer text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200"
                   aria-label={showConfirm ? 'Sembunyikan password' : 'Tampilkan password'}
                 >
-                  {showConfirm ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  {showConfirm ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                 </button>
               </div>
             </div>
@@ -184,26 +203,26 @@ export default function RegisterPage() {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full h-12 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-base shadow-md shadow-[#1B2CC1]/20 transition-all active:scale-[0.98] mt-2 cursor-pointer"
+              className="mt-2 h-12 w-full cursor-pointer rounded-xl bg-[#1B2CC1] text-base font-bold text-white shadow-md shadow-[#1B2CC1]/20 transition-all hover:bg-[#15229E] active:scale-[0.98]"
             >
-              {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Buat Akun'}
+              {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Buat Akun'}
             </Button>
           </form>
 
-          <p className="text-center text-sm text-slate-500 mt-8">
+          <p className="mt-8 text-center text-sm text-slate-500">
             Sudah punya akun?{' '}
             <button
               onClick={() => {
                 const search = window.location.search
                 router.push(`/login${search}`)
               }}
-              className="font-bold text-[#1B2CC1] hover:underline cursor-pointer"
+              className="cursor-pointer font-bold text-[#1B2CC1] hover:underline"
             >
               Masuk di sini
             </button>
           </p>
 
-          <p className="text-center text-xs text-slate-400 mt-12 font-medium">
+          <p className="mt-12 text-center text-xs font-medium text-slate-400">
             &copy; {new Date().getFullYear()} TitipIn - Sistem Titip Pesanan
           </p>
         </div>

src/app/actions.ts

@@ -21,21 +21,21 @@ export async function loginUser(username: string, password: string) {
       username: user.username,
       name: user.name,
       role: user.role,
-      photo: user.photo
+      photo: user.photo,
     }
 
-    const sessionToken = await encrypt(sessionData);
+    const sessionToken = await encrypt(sessionData)
 
-    (await cookies()).set('session', sessionToken, {
+    ;(await cookies()).set('session', sessionToken, {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
       sameSite: 'lax',
-      path: '/'
+      path: '/',
     })
 
     return { success: true, user: sessionData }
   } catch (e) {
-    console.error("Login Error:", e)
+    console.error('Login Error:', e)
     return { success: false, error: 'Terjadi kesalahan saat login.' }
   }
 }
@@ -44,7 +44,7 @@ export async function registerUser(name: string, username: string, password: str
   try {
     const hashedPassword = await hashPassword(password)
     const user = await prisma.user.create({
-      data: { name, username, password: hashedPassword }
+      data: { name, username, password: hashedPassword },
     })
 
     const sessionData = {
@@ -52,28 +52,28 @@ export async function registerUser(name: string, username: string, password: str
       username: user.username,
       name: user.name,
       role: user.role,
-      photo: user.photo
+      photo: user.photo,
     }
 
-    const sessionToken = await encrypt(sessionData);
+    const sessionToken = await encrypt(sessionData)
 
-    (await cookies()).set('session', sessionToken, {
+    ;(await cookies()).set('session', sessionToken, {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
       sameSite: 'lax',
-      path: '/'
+      path: '/',
     })
 
     return { success: true, user: sessionData }
   } catch (error: any) {
-    console.error("Register Error:", error)
+    console.error('Register Error:', error)
     if (error.code === 'P2002') return { success: false, error: 'Username sudah digunakan.' }
     return { success: false, error: 'Terjadi kesalahan.' }
   }
 }
 
 export async function logoutUser() {
-  (await cookies()).delete('session')
+  ;(await cookies()).delete('session')
   return { success: true }
 }
 
@@ -87,7 +87,7 @@ export async function updateProfile(id: string, name: string, photo?: string | n
   try {
     const user = await prisma.user.update({
       where: { id },
-      data: { name, photo: photo === undefined ? undefined : (photo || null) }
+      data: { name, photo: photo === undefined ? undefined : photo || null },
     })
 
     // Update session cookie with new data
@@ -96,14 +96,14 @@ export async function updateProfile(id: string, name: string, photo?: string | n
       username: user.username,
       name: user.name,
       role: user.role,
-      photo: user.photo
+      photo: user.photo,
     }
-    const sessionToken = await encrypt(sessionData);
-    (await cookies()).set('session', sessionToken, {
+    const sessionToken = await encrypt(sessionData)
+    ;(await cookies()).set('session', sessionToken, {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
       sameSite: 'lax',
-      path: '/'
+      path: '/',
     })
 
     revalidatePath('/')
@@ -125,7 +125,7 @@ export async function changePassword(id: string, oldPass: string, newPass: strin
     const hashed = await hashPassword(newPass)
     await prisma.user.update({
       where: { id },
-      data: { password: hashed }
+      data: { password: hashed },
     })
 
     return { success: true }
@@ -139,16 +139,21 @@ export async function getUsers(page = 1, limit = 10) {
   const skip = (page - 1) * limit
   const [users, total] = await Promise.all([
     prisma.user.findMany({ skip, take: limit, orderBy: { created_at: 'desc' } }),
-    prisma.user.count()
+    prisma.user.count(),
   ])
   return { users, total, totalPages: Math.ceil(total / limit) }
 }
 
-export async function createUserByAdmin(name: string, username: string, password: string, role: string) {
+export async function createUserByAdmin(
+  name: string,
+  username: string,
+  password: string,
+  role: string
+) {
   try {
     const hashedPassword = await hashPassword(password)
     await prisma.user.create({
-      data: { name, username, password: hashedPassword, role }
+      data: { name, username, password: hashedPassword, role },
     })
     revalidatePath('/users')
     return { success: true }
@@ -161,11 +166,12 @@ export async function createUserByAdmin(name: string, username: string, password
 export async function toggleUserActive(id: string, is_active: boolean) {
   try {
     const user = await prisma.user.findUnique({ where: { id } })
-    if (user?.role === 'superadmin') return { success: false, error: 'Data Superadmin tidak bisa dinonaktifkan.' }
+    if (user?.role === 'superadmin')
+      return { success: false, error: 'Data Superadmin tidak bisa dinonaktifkan.' }
 
     await prisma.user.update({
       where: { id },
-      data: { is_active }
+      data: { is_active },
     })
     revalidatePath('/users')
     return { success: true }
@@ -177,7 +183,8 @@ export async function toggleUserActive(id: string, is_active: boolean) {
 export async function deleteUser(id: string) {
   try {
     const user = await prisma.user.findUnique({ where: { id } })
-    if (user?.role === 'superadmin') return { success: false, error: 'Data Superadmin tidak bisa dihapus.' }
+    if (user?.role === 'superadmin')
+      return { success: false, error: 'Data Superadmin tidak bisa dihapus.' }
 
     await prisma.user.delete({ where: { id } })
     revalidatePath('/users')
@@ -192,7 +199,7 @@ export async function resetUserPassword(id: string, newPass: string) {
     const hashed = await hashPassword(newPass)
     await prisma.user.update({
       where: { id },
-      data: { password: hashed }
+      data: { password: hashed },
     })
     revalidatePath('/users')
     return { success: true }
@@ -212,14 +219,14 @@ export async function getAvailableOrders() {
   return await prisma.order.findMany({
     where: {
       status: 'OPEN',
-      date: { gte: startOfDay, lte: endOfDay }
+      date: { gte: startOfDay, lte: endOfDay },
     },
     include: {
       creator: true,
       available_items: true,
-      submissions: { select: { user_id: true } }
+      submissions: { select: { user_id: true } },
     },
-    orderBy: { date: 'desc' }
+    orderBy: { date: 'desc' },
   })
 }
 
@@ -228,19 +235,19 @@ export async function getMyOrders(creator_id: string) {
     where: { creator_id },
     include: {
       available_items: true,
-      submissions: { select: { id: true, payment_status: true } }
+      submissions: { select: { id: true, payment_status: true } },
     },
-    orderBy: { date: 'desc' }
+    orderBy: { date: 'desc' },
   })
 }
 
 export async function createOrder(data: {
-  creator_id: string;
-  title: string;
-  description?: string;
-  date: Date;
-  allow_custom: boolean;
-  available_items: string[];
+  creator_id: string
+  title: string
+  description?: string
+  date: Date
+  allow_custom: boolean
+  available_items: string[]
 }) {
   try {
     const order = await prisma.order.create({
@@ -252,14 +259,14 @@ export async function createOrder(data: {
         creator_id: data.creator_id,
         status: 'DRAFT',
         available_items: {
-          create: data.available_items.map(name => ({ name }))
-        }
-      }
+          create: data.available_items.map((name) => ({ name })),
+        },
+      },
     })
     revalidatePath('/my-orders')
     return { success: true, order }
   } catch (error) {
-    console.error("Create Order Error:", error)
+    console.error('Create Order Error:', error)
     return { success: false, error: 'Gagal membuat order.' }
   }
 }
@@ -268,7 +275,7 @@ export async function duplicateOrder(order_id: string) {
   try {
     const oldOrder = await prisma.order.findUnique({
       where: { id: order_id },
-      include: { available_items: true }
+      include: { available_items: true },
     })
     if (!oldOrder) return { success: false, error: 'Order tidak ditemukan' }
 
@@ -281,9 +288,12 @@ export async function duplicateOrder(order_id: string) {
         creator_id: oldOrder.creator_id,
         status: 'DRAFT',
         available_items: {
-          create: oldOrder.available_items.map(ai => ({ name: ai.name, is_sold_out: ai.is_sold_out }))
-        }
-      }
+          create: oldOrder.available_items.map((ai) => ({
+            name: ai.name,
+            is_sold_out: ai.is_sold_out,
+          })),
+        },
+      },
     })
     revalidatePath('/my-orders')
     return { success: true, order: newOrder }
@@ -292,24 +302,38 @@ export async function duplicateOrder(order_id: string) {
   }
 }
 
-export async function updateOrder(order_id: string, data: {
-  title: string;
-  description?: string;
-  allow_custom: boolean;
-  available_items: { name: string; is_sold_out: boolean }[];
-}) {
+export async function updateOrder(
+  order_id: string,
+  data: {
+    title: string
+    description?: string
+    allow_custom: boolean
+    available_items: { name: string; is_sold_out: boolean }[]
+  }
+) {
   try {
     const order = await prisma.order.findUnique({
-      where: { id: order_id }
+      where: { id: order_id },
     })
     if (!order) return { success: false, error: 'Order tidak ditemukan' }
     if (order.status === 'CLOSE') {
       return { success: false, error: 'Order dengan status CLOSE tidak dapat diedit.' }
     }
 
+    // Check if order date is today
+    const orderDate = new Date(order.date)
+    const today = new Date()
+    if (
+      orderDate.getDate() !== today.getDate() ||
+      orderDate.getMonth() !== today.getMonth() ||
+      orderDate.getFullYear() !== today.getFullYear()
+    ) {
+      return { success: false, error: 'Hanya pesanan hari ini yang dapat diedit.' }
+    }
+
     // Delete existing available items and insert updated ones
     await prisma.availableItem.deleteMany({
-      where: { order_id }
+      where: { order_id },
     })
 
     const updatedOrder = await prisma.order.update({
@@ -319,9 +343,12 @@ export async function updateOrder(order_id: string, data: {
         description: data.description || null,
         allow_custom: data.allow_custom,
         available_items: {
-          create: data.available_items.map(item => ({ name: item.name, is_sold_out: item.is_sold_out }))
-        }
-      }
+          create: data.available_items.map((item) => ({
+            name: item.name,
+            is_sold_out: item.is_sold_out,
+          })),
+        },
+      },
     })
 
     revalidatePath('/my-orders')
@@ -329,7 +356,7 @@ export async function updateOrder(order_id: string, data: {
     revalidatePath('/')
     return { success: true, order: updatedOrder }
   } catch (error: any) {
-    console.error("Update Order Error:", error)
+    console.error('Update Order Error:', error)
     return { success: false, error: 'Gagal memperbarui order: ' + error?.message }
   }
 }
@@ -338,7 +365,7 @@ export async function updateOrderStatus(order_id: string, status: string) {
   try {
     await prisma.order.update({
       where: { id: order_id },
-      data: { status }
+      data: { status },
     })
     revalidatePath('/my-orders')
     revalidatePath('/')
@@ -351,15 +378,18 @@ export async function updateOrderStatus(order_id: string, status: string) {
 export async function deleteOrder(order_id: string) {
   try {
     const order = await prisma.order.findUnique({
-      where: { id: order_id }
+      where: { id: order_id },
     })
     if (!order) return { success: false, error: 'Order tidak ditemukan.' }
     if (order.status === 'OPEN') {
-      return { success: false, error: 'Order berstatus OPEN tidak dapat dihapus. Silakan tutup (CLOSE) terlebih dahulu.' }
+      return {
+        success: false,
+        error: 'Order berstatus OPEN tidak dapat dihapus. Silakan tutup (CLOSE) terlebih dahulu.',
+      }
     }
 
     await prisma.order.delete({
-      where: { id: order_id }
+      where: { id: order_id },
     })
 
     revalidatePath('/my-orders')
@@ -380,18 +410,24 @@ export async function getOrderDetail(order_id: string) {
       submissions: {
         include: {
           user: true,
-          items: true
-        }
-      }
-    }
+          items: true,
+        },
+      },
+    },
   })
 }
 
-export async function updateSubmissionPayment(submission_id: string, bill: number | null, payment_status: string, paid_amount: number | null = null) {
+export async function updateSubmissionPayment(
+  submission_id: string,
+  bill: number | null,
+  payment_status: string,
+  paid_amount: number | null = null,
+  saldo_used: number = 0
+) {
   try {
     await prisma.submission.update({
       where: { id: submission_id },
-      data: { bill, payment_status, paid_amount }
+      data: { bill, payment_status, paid_amount, saldo_used },
     })
     revalidatePath(`/my-orders`)
     revalidatePath(`/my-purchases`)
@@ -399,26 +435,40 @@ export async function updateSubmissionPayment(submission_id: string, bill: numbe
     revalidatePath(`/balances`)
     return { success: true }
   } catch (e) {
-    console.error(e); return { success: false, error: 'Gagal menyimpan tagihan.' }
+    console.error(e)
+    return { success: false, error: 'Gagal menyimpan tagihan.' }
   }
 }
 
-export async function updateBulkSubmissionPayment(submission_ids: string[], payment_status: string, use_balance: boolean = false) {
+export async function updateBulkSubmissionPayment(
+  submission_ids: string[],
+  payment_status: string,
+  use_balance: boolean = false
+) {
   try {
     if (payment_status === 'LUNAS') {
-      const submissions = await prisma.submission.findMany({ where: { id: { in: submission_ids } } })
-      const ops = submissions.map(sub => prisma.submission.update({
-        where: { id: sub.id },
-        data: { 
-          payment_status, 
-          paid_amount: use_balance ? 0 : (sub.paid_amount != null ? sub.paid_amount : sub.bill) 
-        }
-      }))
+      const submissions = await prisma.submission.findMany({
+        where: { id: { in: submission_ids } },
+      })
+      const ops = submissions.map((sub) =>
+        prisma.submission.update({
+          where: { id: sub.id },
+          data: {
+            payment_status,
+            paid_amount: use_balance
+              ? sub.paid_amount || 0
+              : sub.paid_amount != null
+                ? sub.paid_amount
+                : sub.bill,
+            saldo_used: use_balance ? Math.max(0, (sub.bill || 0) - (sub.paid_amount || 0)) : 0,
+          },
+        })
+      )
       await prisma.$transaction(ops)
     } else {
       await prisma.submission.updateMany({
         where: { id: { in: submission_ids } },
-        data: { payment_status }
+        data: { payment_status },
       })
     }
     revalidatePath(`/my-orders`)
@@ -433,23 +483,23 @@ export async function updateBulkSubmissionPayment(submission_ids: string[], paym
 }
 
 export async function processBulkPayment(data: {
-  submission_ids: string[];
-  cash_amount: number;
-  use_balance: boolean;
-  creator_id: string;
-  user_id: string;
+  submission_ids: string[]
+  cash_amount: number
+  use_balance: boolean
+  creator_id: string
+  user_id: string
 }) {
   try {
     let currentBalance = 0
     if (data.use_balance) {
       const balanceData = await getBalancesAsCreator(data.creator_id)
-      const userBalance = balanceData.find(b => b.user.id === data.user_id)
+      const userBalance = balanceData.find((b) => b.user.id === data.user_id)
       if (userBalance) currentBalance = userBalance.amount
     }
 
     const submissions = await prisma.submission.findMany({
       where: { id: { in: data.submission_ids } },
-      include: { order: { select: { date: true } } }
+      include: { order: { select: { date: true } } },
     })
 
     // Sort by order date ascending (oldest first)
@@ -484,37 +534,45 @@ export async function processBulkPayment(data: {
           remainingCash = 0
         }
 
-        ops.push(prisma.submission.update({
-          where: { id: sub.id },
-          data: { payment_status: 'LUNAS', paid_amount: finalPaid }
-        }))
+        ops.push(
+          prisma.submission.update({
+            where: { id: sub.id },
+            data: { payment_status: 'LUNAS', paid_amount: finalPaid },
+          })
+        )
       } else if (totalAvailable >= amountToCover && amountToCover === 0) {
         // It's already fully paid somehow, just mark LUNAS. Give excess cash if last.
         let finalPaid = prevPaid
         if (isLast && remainingCash > 0) {
-           finalPaid += remainingCash
-           remainingCash = 0
+          finalPaid += remainingCash
+          remainingCash = 0
         }
-        ops.push(prisma.submission.update({
-          where: { id: sub.id },
-          data: { payment_status: 'LUNAS', paid_amount: finalPaid }
-        }))
+        ops.push(
+          prisma.submission.update({
+            where: { id: sub.id },
+            data: { payment_status: 'LUNAS', paid_amount: finalPaid },
+          })
+        )
       } else if (totalAvailable > 0) {
         // Partially covered -> BELUM_BAYAR. Only use cash.
         let finalPaid = prevPaid + remainingCash
         remainingCash = 0
         totalAvailable = remainingBalance // only balance left, which can't be used
 
-        ops.push(prisma.submission.update({
-          where: { id: sub.id },
-          data: { payment_status: 'BELUM_BAYAR', paid_amount: finalPaid }
-        }))
+        ops.push(
+          prisma.submission.update({
+            where: { id: sub.id },
+            data: { payment_status: 'BELUM_BAYAR', paid_amount: finalPaid },
+          })
+        )
       } else {
         // totalAvailable == 0. No more money. Just leave it as is, or update to BELUM_BAYAR.
-        ops.push(prisma.submission.update({
-          where: { id: sub.id },
-          data: { payment_status: 'BELUM_BAYAR' }
-        }))
+        ops.push(
+          prisma.submission.update({
+            where: { id: sub.id },
+            data: { payment_status: 'BELUM_BAYAR' },
+          })
+        )
       }
     }
 
@@ -536,7 +594,7 @@ export async function processBulkPayment(data: {
 export async function getUserSubmission(order_id: string, user_id: string) {
   return await prisma.submission.findFirst({
     where: { order_id, user_id },
-    include: { items: true }
+    include: { items: true },
   })
 }
 
@@ -547,29 +605,41 @@ export async function getMyPurchases(user_id: string) {
       order: {
         include: {
           creator: true,
-          available_items: true
-        }
+          available_items: true,
+        },
       },
-      items: true
+      items: true,
     },
     orderBy: {
-      order: { date: 'desc' }
-    }
+      order: { date: 'desc' },
+    },
   })
 }
 
 export async function submitOrder(data: {
-  order_id: string;
-  user_id: string;
-  items: Array<{ name: string; qty: number; is_custom: boolean }>;
+  order_id: string
+  user_id: string
+  items: Array<{ name: string; qty: number; is_custom: boolean; note?: string }>
 }) {
   try {
     if (data.items.length === 0) {
       return { success: false, error: 'Pilih minimal 1 item.' }
     }
 
+    const order = await prisma.order.findUnique({ where: { id: data.order_id } })
+    if (!order) return { success: false, error: 'Pesanan tidak ditemukan.' }
+    if (order.status !== 'OPEN')
+      return { success: false, error: 'Pesanan sudah ditutup atau masih draft.' }
+
+    const itemsToCreate = data.items.map((item) => ({
+      name: item.name,
+      qty: item.qty,
+      is_custom: item.is_custom,
+      note: item.note || null,
+    }))
+
     const existing = await prisma.submission.findFirst({
-      where: { order_id: data.order_id, user_id: data.user_id }
+      where: { order_id: data.order_id, user_id: data.user_id },
     })
 
     if (existing) {
@@ -578,9 +648,9 @@ export async function submitOrder(data: {
         where: { id: existing.id },
         data: {
           items: {
-            create: data.items
-          }
-        }
+            create: itemsToCreate,
+          },
+        },
       })
     } else {
       await prisma.submission.create({
@@ -588,9 +658,9 @@ export async function submitOrder(data: {
           order_id: data.order_id,
           user_id: data.user_id,
           items: {
-            create: data.items
-          }
-        }
+            create: itemsToCreate,
+          },
+        },
       })
     }
 
@@ -612,18 +682,18 @@ export async function getSubmittorReport(user_id: string, startDate?: Date, endD
       user_id,
       order: {
         status: 'CLOSE',
-        ...(startDate && endDate ? { date: { gte: startDate, lte: endDate } } : {})
-      }
+        ...(startDate && endDate ? { date: { gte: startDate, lte: endDate } } : {}),
+      },
     },
     include: {
       order: {
-        include: { creator: true }
+        include: { creator: true },
       },
-      items: true
+      items: true,
     },
     orderBy: {
-      order: { date: 'desc' }
-    }
+      order: { date: 'desc' },
+    },
   })
 }
 
@@ -632,17 +702,17 @@ export async function getCreatorReport(creator_id: string, startDate?: Date, end
     where: {
       creator_id,
       status: 'CLOSE',
-      ...(startDate && endDate ? { date: { gte: startDate, lte: endDate } } : {})
+      ...(startDate && endDate ? { date: { gte: startDate, lte: endDate } } : {}),
     },
     include: {
       submissions: {
         include: {
           user: true,
-          items: true
-        }
-      }
+          items: true,
+        },
+      },
     },
-    orderBy: { date: 'desc' }
+    orderBy: { date: 'desc' },
   })
 }
 
@@ -651,76 +721,93 @@ export async function getBalancesAsCreator(creator_id: string) {
   const submissions = await prisma.submission.findMany({
     where: {
       order: { creator_id },
-      payment_status: 'LUNAS'
     },
     include: {
-      user: { select: { id: true, name: true, photo: true } }
-    }
+      user: { select: { id: true, name: true, photo: true } },
+    },
   })
 
-  const balanceMap = new Map<string, { user: any, amount: number }>()
+  const balanceMap = new Map<string, { user: any; amount: number }>()
 
-  submissions.forEach(sub => {
-    if (sub.paid_amount == null || sub.bill == null) return
-    const diff = sub.paid_amount - sub.bill
-    if (!balanceMap.has(sub.user.id)) {
-      balanceMap.set(sub.user.id, { user: sub.user, amount: diff })
+  submissions.forEach((sub) => {
+    let diff = 0
+    if (sub.payment_status === 'LUNAS') {
+      if (sub.bill != null) {
+        diff = (sub.paid_amount || 0) - sub.bill
+      }
     } else {
-      balanceMap.get(sub.user.id)!.amount += diff
+      diff = -(sub.saldo_used || 0)
+    }
+
+    if (diff !== 0) {
+      if (!balanceMap.has(sub.user.id)) {
+        balanceMap.set(sub.user.id, { user: sub.user, amount: diff })
+      } else {
+        balanceMap.get(sub.user.id)!.amount += diff
+      }
     }
   })
 
-  return Array.from(balanceMap.values()).filter(b => b.amount !== 0)
+  return Array.from(balanceMap.values()).filter((b) => b.amount !== 0)
 }
 
 export async function getBalancesAsSubmittor(user_id: string) {
   const submissions = await prisma.submission.findMany({
     where: {
       user_id,
-      payment_status: 'LUNAS'
     },
     include: {
       order: {
         include: {
-          creator: { select: { id: true, name: true, photo: true } }
-        }
+          creator: { select: { id: true, name: true, photo: true } },
+        },
+      },
+    },
+  })
+
+  const balanceMap = new Map<string, { creator: any; amount: number }>()
+
+  submissions.forEach((sub) => {
+    let diff = 0
+    if (sub.payment_status === 'LUNAS') {
+      if (sub.bill != null) {
+        diff = (sub.paid_amount || 0) - sub.bill
+      }
+    } else {
+      diff = -(sub.saldo_used || 0)
+    }
+
+    if (diff !== 0) {
+      const creator = sub.order.creator
+      if (!balanceMap.has(creator.id)) {
+        balanceMap.set(creator.id, { creator: creator, amount: diff })
+      } else {
+        balanceMap.get(creator.id)!.amount += diff
       }
     }
   })
 
-  const balanceMap = new Map<string, { creator: any, amount: number }>()
-  
-  submissions.forEach(sub => {
-    if (sub.paid_amount == null || sub.bill == null) return
-    const diff = sub.paid_amount - sub.bill
-    const creator = sub.order.creator
-    if (!balanceMap.has(creator.id)) {
-      balanceMap.set(creator.id, { creator: creator, amount: diff })
-    } else {
-      balanceMap.get(creator.id)!.amount += diff
-    }
-  })
-
-  return Array.from(balanceMap.values()).filter(b => b.amount !== 0)
+  return Array.from(balanceMap.values()).filter((b) => b.amount !== 0)
 }
 
 export async function deleteSubmission(submission_id: string, user_id: string) {
   try {
     const submission = await prisma.submission.findUnique({
       where: { id: submission_id },
-      include: { order: true }
-    });
+      include: { order: true },
+    })
 
-    if (!submission) return { success: false, error: 'Pesanan tidak ditemukan' };
-    if (submission.user_id !== user_id) return { success: false, error: 'Tidak ada akses' };
-    if (submission.order.status !== 'OPEN') return { success: false, error: 'Hanya bisa membatalkan PO yang OPEN' };
+    if (!submission) return { success: false, error: 'Pesanan tidak ditemukan' }
+    if (submission.user_id !== user_id) return { success: false, error: 'Tidak ada akses' }
+    if (submission.order.status !== 'OPEN')
+      return { success: false, error: 'Hanya bisa membatalkan PO yang OPEN' }
 
     await prisma.submission.delete({
-      where: { id: submission_id }
-    });
-    return { success: true };
+      where: { id: submission_id },
+    })
+    return { success: true }
   } catch (error) {
-    return { success: false, error: 'Gagal membatalkan pesanan' };
+    return { success: false, error: 'Gagal membatalkan pesanan' }
   }
 }
 
@@ -729,7 +816,7 @@ export async function deleteSubmission(submission_id: string, user_id: string) {
 export async function getSettings() {
   const settings = await prisma.setting.findMany()
   const obj: Record<string, string> = {}
-  settings.forEach(s => {
+  settings.forEach((s) => {
     obj[s.key] = s.value
   })
   return obj
@@ -741,7 +828,7 @@ export async function updateSettings(settings: Record<string, string>) {
       await prisma.setting.upsert({
         where: { key },
         update: { value: settings[key] },
-        create: { key, value: settings[key] }
+        create: { key, value: settings[key] },
       })
     }
     return { success: true }
@@ -756,13 +843,15 @@ export async function updateSettings(settings: Record<string, string>) {
 export async function broadcastToMattermost(orderId: string, orderUrl: string) {
   try {
     const order = await prisma.order.findUnique({
-      where: { id: orderId }
+      where: { id: orderId },
     })
     if (!order) return { success: false, error: 'Order not found' }
 
     const settings = await getSettings()
     const webhookUrl = settings.MATTERMOST_WEBHOOK_URL
-    let template = settings.MATTERMOST_TEMPLATE || 'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}'
+    let template =
+      settings.MATTERMOST_TEMPLATE ||
+      'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}'
 
     if (!webhookUrl) return { success: false, error: 'Webhook URL belum di-setting' }
 
@@ -771,7 +860,7 @@ export async function broadcastToMattermost(orderId: string, orderUrl: string) {
     const res = await fetch(webhookUrl, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ text: message })
+      body: JSON.stringify({ text: message }),
     })
 
     if (!res.ok) {

src/app/globals.css

@@ -1,15 +1,21 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
 
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-roboto), var(--font-open-sans), -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", "Open Sans", system-ui, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-heading: var(--font-roboto), -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
+  --font-sans:
+    var(--font-roboto), var(--font-open-sans), -apple-system, BlinkMacSystemFont, 'SF Pro Text',
+    'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', 'Open Sans', system-ui, sans-serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --font-heading:
+    var(--font-roboto), -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto,
+    sans-serif;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -44,62 +50,62 @@
 }
 
 :root {
-  --background: #F4F6FB;
-  --foreground: #0F172A;
-  --card: #FFFFFF;
-  --card-foreground: #0F172A;
-  --popover: #FFFFFF;
-  --popover-foreground: #0F172A;
-  --primary: #1B2CC1;
-  --primary-foreground: #FFFFFF;
-  --secondary: #EEF1FC;
-  --secondary-foreground: #1B2CC1;
-  --muted: #F1F5F9;
-  --muted-foreground: #64748B;
-  --accent: #EEF2FF;
-  --accent-foreground: #1B2CC1;
-  --destructive: #EF4444;
-  --border: #E2E8F0;
-  --input: #E2E8F0;
-  --ring: #1B2CC1;
+  --background: #f4f6fb;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+  --primary: #1b2cc1;
+  --primary-foreground: #ffffff;
+  --secondary: #eef1fc;
+  --secondary-foreground: #1b2cc1;
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+  --accent: #eef2ff;
+  --accent-foreground: #1b2cc1;
+  --destructive: #ef4444;
+  --border: #e2e8f0;
+  --input: #e2e8f0;
+  --ring: #1b2cc1;
   --radius: 0.75rem;
-  --sidebar: #FFFFFF;
+  --sidebar: #ffffff;
   --sidebar-foreground: #334155;
-  --sidebar-primary: #1B2CC1;
-  --sidebar-primary-foreground: #FFFFFF;
-  --sidebar-accent: #F1F5F9;
-  --sidebar-accent-foreground: #0F172A;
-  --sidebar-border: #E2E8F0;
-  --sidebar-ring: #1B2CC1;
+  --sidebar-primary: #1b2cc1;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #0f172a;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #1b2cc1;
 }
 
 .dark {
-  --background: #0B0F19;
-  --foreground: #F8FAFC;
+  --background: #0b0f19;
+  --foreground: #f8fafc;
   --card: #111827;
-  --card-foreground: #F8FAFC;
+  --card-foreground: #f8fafc;
   --popover: #111827;
-  --popover-foreground: #F8FAFC;
-  --primary: #3B82F6;
-  --primary-foreground: #FFFFFF;
-  --secondary: #1E293B;
-  --secondary-foreground: #93C5FD;
-  --muted: #1E293B;
-  --muted-foreground: #94A3B8;
-  --accent: #1E293B;
-  --accent-foreground: #93C5FD;
-  --destructive: #EF4444;
-  --border: #1F2937;
-  --input: #1F2937;
-  --ring: #3B82F6;
+  --popover-foreground: #f8fafc;
+  --primary: #3b82f6;
+  --primary-foreground: #ffffff;
+  --secondary: #1e293b;
+  --secondary-foreground: #93c5fd;
+  --muted: #1e293b;
+  --muted-foreground: #94a3b8;
+  --accent: #1e293b;
+  --accent-foreground: #93c5fd;
+  --destructive: #ef4444;
+  --border: #1f2937;
+  --input: #1f2937;
+  --ring: #3b82f6;
   --sidebar: #111827;
-  --sidebar-foreground: #CBD5E1;
-  --sidebar-primary: #3B82F6;
-  --sidebar-primary-foreground: #FFFFFF;
-  --sidebar-accent: #1E293B;
-  --sidebar-accent-foreground: #F8FAFC;
-  --sidebar-border: #1F2937;
-  --sidebar-ring: #3B82F6;
+  --sidebar-foreground: #cbd5e1;
+  --sidebar-primary: #3b82f6;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #1e293b;
+  --sidebar-accent-foreground: #f8fafc;
+  --sidebar-border: #1f2937;
+  --sidebar-ring: #3b82f6;
 }
 
 @layer base {
@@ -108,12 +114,36 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-family: var(--font-roboto), var(--font-open-sans), -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", "Open Sans", system-ui, sans-serif;
+    font-family:
+      var(--font-roboto),
+      var(--font-open-sans),
+      -apple-system,
+      BlinkMacSystemFont,
+      'SF Pro Text',
+      'SF Pro Display',
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      'Open Sans',
+      system-ui,
+      sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   html {
-    font-family: var(--font-roboto), var(--font-open-sans), -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", "Open Sans", system-ui, sans-serif;
+    font-family:
+      var(--font-roboto),
+      var(--font-open-sans),
+      -apple-system,
+      BlinkMacSystemFont,
+      'SF Pro Text',
+      'SF Pro Display',
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      'Open Sans',
+      system-ui,
+      sans-serif;
   }
 }
 button {

src/app/icon.tsx

@@ -8,37 +8,35 @@ export const contentType = 'image/png'
 
 export default function Icon() {
   return new ImageResponse(
-    (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: 'linear-gradient(to bottom right, #1B2CC1, #121E85)',
-          borderRadius: '8px',
-        }}
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'linear-gradient(to bottom right, #1B2CC1, #121E85)',
+        borderRadius: '8px',
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="white"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
-          <path d="M20 3v4" />
-          <path d="M22 5h-4" />
-          <path d="M4 17v2" />
-          <path d="M5 18H3" />
-        </svg>
-      </div>
-    ),
+        <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
+        <path d="M20 3v4" />
+        <path d="M22 5h-4" />
+        <path d="M4 17v2" />
+        <path d="M5 18H3" />
+      </svg>
+    </div>,
     {
       ...size,
     }

src/app/layout.tsx

@@ -1,58 +1,57 @@
-import type { Metadata, Viewport } from "next";
-import { Roboto, Open_Sans } from "next/font/google";
-import "./globals.css";
-import { Toaster } from "@/components/ui/sonner";
-
+import type { Metadata, Viewport } from 'next'
+import { Roboto, Open_Sans } from 'next/font/google'
+import './globals.css'
+import { Toaster } from '@/components/ui/sonner'
 
 const roboto = Roboto({
-  weight: ["300", "400", "500", "700", "900"],
-  subsets: ["latin"],
-  variable: "--font-roboto",
-  display: "swap",
-});
+  weight: ['300', '400', '500', '700', '900'],
+  subsets: ['latin'],
+  variable: '--font-roboto',
+  display: 'swap',
+})
 
 const openSans = Open_Sans({
-  subsets: ["latin"],
-  variable: "--font-open-sans",
-  display: "swap",
-});
+  subsets: ['latin'],
+  variable: '--font-open-sans',
+  display: 'swap',
+})
 
 export const viewport: Viewport = {
-  themeColor: "#1B2CC1",
-  width: "device-width",
+  themeColor: '#1B2CC1',
+  width: 'device-width',
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
-};
+}
 
 export const metadata: Metadata = {
-  title: "TitipIn - Sistem Titip Pesanan",
-  description: "Platform jasa titip pesanan bersama yang modern, cepat, dan transparan.",
-  manifest: "/manifest.json",
+  title: 'TitipIn - Sistem Titip Pesanan',
+  description: 'Platform jasa titip pesanan bersama yang modern, cepat, dan transparan.',
+  manifest: '/manifest.json',
   appleWebApp: {
     capable: true,
-    statusBarStyle: "black-translucent",
-    title: "TitipIn",
+    statusBarStyle: 'black-translucent',
+    title: 'TitipIn',
   },
   formatDetection: {
     telephone: false,
   },
   icons: {
     icon: [
-      { url: "/icons/icon-192x192.png", sizes: "192x192", type: "image/png" },
-      { url: "/icons/icon-512x512.png", sizes: "512x512", type: "image/png" },
+      { url: '/icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/icons/icon-512x512.png', sizes: '512x512', type: 'image/png' },
     ],
     apple: [
-      { url: "/icons/icon-152x152.png", sizes: "152x152", type: "image/png" },
-      { url: "/icons/icon-192x192.png", sizes: "192x192", type: "image/png" },
+      { url: '/icons/icon-152x152.png', sizes: '152x152', type: 'image/png' },
+      { url: '/icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
     ],
   },
-};
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html
@@ -62,12 +61,11 @@ export default function RootLayout({
     >
       <body
         suppressHydrationWarning
-        className="min-h-full flex flex-col bg-[#F4F6FB] dark:bg-[#0B0F19] font-sans antialiased"
+        className="flex min-h-full flex-col bg-[#F4F6FB] font-sans antialiased dark:bg-[#0B0F19]"
       >
         {children}
         <Toaster position="top-center" />
       </body>
     </html>
-  );
+  )
 }
-

src/app/not-found.tsx

@@ -4,45 +4,44 @@ import { SearchX, ArrowLeft, Home } from 'lucide-react'
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-4 relative overflow-hidden">
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-slate-50 p-4 dark:bg-slate-950">
       {/* Background ambient effects */}
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[600px] rounded-full bg-[#1B2CC1] opacity-10 dark:opacity-20 blur-[120px]"></div>
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] bg-[size:24px_24px]"></div>
+        <div className="absolute top-1/2 left-1/2 h-[400px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#1B2CC1] opacity-10 blur-[120px] dark:opacity-20"></div>
       </div>
 
       <div className="relative z-10 w-full max-w-lg">
-        <div className="bg-white dark:bg-slate-900 rounded-[2rem] shadow-2xl shadow-[#1B2CC1]/10 border border-slate-100 dark:border-slate-800 p-8 sm:p-12 text-center animate-in fade-in zoom-in duration-500">
-          
-          <div className="w-24 h-24 sm:w-32 sm:h-32 mx-auto bg-blue-50 dark:bg-blue-950/50 rounded-[2rem] border-4 border-white dark:border-slate-800 flex items-center justify-center mb-6 shadow-inner rotate-3">
-            <SearchX className="w-12 h-12 sm:w-16 sm:h-16 text-[#1B2CC1]" />
+        <div className="animate-in fade-in zoom-in rounded-[2rem] border border-slate-100 bg-white p-8 text-center shadow-2xl shadow-[#1B2CC1]/10 duration-500 sm:p-12 dark:border-slate-800 dark:bg-slate-900">
+          <div className="mx-auto mb-6 flex h-24 w-24 rotate-3 items-center justify-center rounded-[2rem] border-4 border-white bg-blue-50 shadow-inner sm:h-32 sm:w-32 dark:border-slate-800 dark:bg-blue-950/50">
+            <SearchX className="h-12 w-12 text-[#1B2CC1] sm:h-16 sm:w-16" />
           </div>
 
-          <h1 className="text-6xl font-black text-slate-900 dark:text-white mb-2 tracking-tighter">
+          <h1 className="mb-2 text-6xl font-black tracking-tighter text-slate-900 dark:text-white">
             4<span className="text-[#1B2CC1]">0</span>4
           </h1>
 
-          <h2 className="text-xl sm:text-2xl font-bold text-slate-800 dark:text-slate-200 mb-4">
+          <h2 className="mb-4 text-xl font-bold text-slate-800 sm:text-2xl dark:text-slate-200">
             Halaman Tidak Ditemukan
           </h2>
 
-          <p className="text-sm sm:text-base text-slate-500 dark:text-slate-400 mb-8 max-w-sm mx-auto leading-relaxed">
-            Waduh, sepertinya halaman yang Anda cari sedang jalan-jalan atau memang tidak pernah ada. Mari kita kembali ke jalan yang benar!
+          <p className="mx-auto mb-8 max-w-sm text-sm leading-relaxed text-slate-500 sm:text-base dark:text-slate-400">
+            Waduh, sepertinya halaman yang Anda cari sedang jalan-jalan atau memang tidak pernah
+            ada. Mari kita kembali ke jalan yang benar!
           </p>
 
-          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <div className="flex flex-col justify-center gap-3 sm:flex-row">
             <Link href="/" className="w-full sm:w-auto">
-              <Button className="w-full h-12 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold px-6 shadow-md shadow-[#1B2CC1]/20 gap-2 transition-all">
-                <Home className="w-4 h-4" />
+              <Button className="h-12 w-full gap-2 rounded-xl bg-[#1B2CC1] px-6 font-bold text-white shadow-md shadow-[#1B2CC1]/20 transition-all hover:bg-[#15229E]">
+                <Home className="h-4 w-4" />
                 Kembali ke Beranda
               </Button>
             </Link>
           </div>
-
         </div>
 
         {/* Footer info */}
-        <p className="text-center text-xs text-slate-400 font-medium mt-8">
+        <p className="mt-8 text-center text-xs font-medium text-slate-400">
           TitipIn &copy; {new Date().getFullYear()} - Sistem Titip Pesanan
         </p>
       </div>

src/components/AppLayout.tsx

@@ -8,16 +8,14 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
 
   return (
-    <div className="flex min-h-screen bg-[#F4F6FB] dark:bg-[#0B0F19] text-slate-900 dark:text-slate-100 font-sans">
+    <div className="flex min-h-screen bg-[#F4F6FB] font-sans text-slate-900 dark:bg-[#0B0F19] dark:text-slate-100">
       {/* Sidebar */}
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
       {/* Main Content Area */}
-      <div className="flex-1 flex flex-col min-w-0">
+      <div className="flex min-w-0 flex-1 flex-col">
         <Header onMenuClick={() => setSidebarOpen(true)} />
-        <main className="flex-1 p-4 sm:p-6 lg:p-8 max-w-7xl w-full mx-auto">
-          {children}
-        </main>
+        <main className="mx-auto w-full max-w-7xl flex-1 p-4 sm:p-6 lg:p-8">{children}</main>
       </div>
     </div>
   )

src/components/Header.tsx

@@ -2,7 +2,17 @@
 
 import { useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
-import { Menu, Calendar, Store, ClipboardList, Package, User, FileText, BarChart2, Settings } from 'lucide-react'
+import {
+  Menu,
+  Calendar,
+  Store,
+  ClipboardList,
+  Package,
+  User,
+  FileText,
+  BarChart2,
+  Settings,
+} from 'lucide-react'
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import Link from 'next/link'
@@ -24,35 +34,35 @@ export function Header({ onMenuClick }: { onMenuClick: () => void }) {
           title: 'Open Order Hari Ini',
           subtitle: 'Daftar pesanan aktif yang siap kamu titip.',
           badge: 'Live PO',
-          Icon: Store
+          Icon: Store,
         }
       case '/my-orders':
         return {
           title: 'Jasa Order Saya',
           subtitle: 'Kelola PO yang Anda buka untuk teman-teman.',
           badge: 'Manajemen PO',
-          Icon: ClipboardList
+          Icon: ClipboardList,
         }
       case '/my-purchases':
         return {
           title: 'Pesanan Saya',
           subtitle: 'Pantau barang yang Anda titip beserta status tagihannya.',
           badge: 'Riwayat Titipan',
-          Icon: Package
+          Icon: Package,
         }
       case '/profile':
         return {
           title: 'Pengaturan Profil',
           subtitle: 'Kelola identitas dan preferensi akun Anda.',
           badge: 'Akun',
-          Icon: User
+          Icon: User,
         }
       case '/reports':
         return {
           title: 'Laporan Keuangan',
           subtitle: 'Pantau omzet, pengeluaran, dan hutang piutang Anda.',
           badge: 'Laporan',
-          Icon: BarChart2
+          Icon: BarChart2,
         }
       case '/settings/users':
       case '/settings/integrations':
@@ -60,7 +70,7 @@ export function Header({ onMenuClick }: { onMenuClick: () => void }) {
           title: 'Pengaturan Aplikasi',
           subtitle: 'Konfigurasi integrasi, role, dan sistem.',
           badge: 'Superadmin',
-          Icon: Settings
+          Icon: Settings,
         }
       default:
         if (pathname.startsWith('/my-orders/')) {
@@ -68,14 +78,14 @@ export function Header({ onMenuClick }: { onMenuClick: () => void }) {
             title: 'Detail & Rekap Order',
             subtitle: 'Rincian pesanan, tagihan pemesan, dan ringkasan belanja.',
             badge: 'Detail PO',
-            Icon: FileText
+            Icon: FileText,
           }
         }
         return {
           title: 'TitipIn',
           subtitle: 'Sistem Titip Pesanan Bersama',
           badge: 'App',
-          Icon: Store
+          Icon: Store,
         }
     }
   }
@@ -83,31 +93,34 @@ export function Header({ onMenuClick }: { onMenuClick: () => void }) {
   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">
+    <header className="sticky top-0 z-30 border-b border-slate-200/80 bg-white/90 px-6 py-4 backdrop-blur-md dark:border-slate-800 dark:bg-slate-900/90">
       <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"
+            className="rounded-xl border border-slate-200 p-2 text-slate-600 transition-colors hover:bg-slate-100 lg:hidden dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800"
           >
-            <Menu className="w-5 h-5" />
+            <Menu className="h-5 w-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 className="hidden h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-blue-100 bg-gradient-to-br from-blue-50 to-[#1B2CC1]/10 shadow-inner sm:flex md:h-12 md:w-12 dark:border-blue-900/50 dark:from-[#1B2CC1]/20 dark:to-[#121E85]/20">
+              <Icon
+                className="h-5 w-5 text-[#1B2CC1] md:h-6 md:w-6 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">
+                <h1 className="text-xl font-black tracking-tight text-slate-900 sm:text-2xl 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">
+                <span className="hidden items-center rounded-full bg-[#1B2CC1]/10 px-2 py-0.5 text-[11px] font-bold text-[#1B2CC1] sm:inline-flex 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">
+              <p className="mt-0.5 hidden text-xs text-slate-500 sm:block dark:text-slate-400">
                 {subtitle}
               </p>
             </div>
@@ -117,9 +130,9 @@ export function Header({ onMenuClick }: { onMenuClick: () => void }) {
         {/* Right: Date info & Quick Action */}
         <div className="flex items-center gap-3">
           {todayStr && (
-            <div className="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-[10px] sm:text-xs font-medium text-slate-600 dark:text-slate-300 animate-in fade-in font-bold">
-              <Calendar className="w-3.5 h-3.5 text-[#1B2CC1] shrink-0" />
-              <span className='font-bold whitespace-nowrap'>{todayStr}</span>
+            <div className="animate-in fade-in flex items-center gap-2 rounded-xl border border-slate-200/60 bg-slate-100/70 px-3 py-1.5 text-[10px] font-bold font-medium text-slate-600 sm:text-xs dark:border-slate-800 dark:bg-slate-800/60 dark:text-slate-300">
+              <Calendar className="h-3.5 w-3.5 shrink-0 text-[#1B2CC1]" />
+              <span className="font-bold whitespace-nowrap">{todayStr}</span>
             </div>
           )}
         </div>

src/components/Navbar.tsx

@@ -18,23 +18,23 @@ export function Navbar() {
   const pathname = usePathname()
 
   return (
-    <nav className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-16 items-center px-4 mx-auto max-w-5xl">
+    <nav className="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur">
+      <div className="container mx-auto flex h-16 max-w-5xl items-center px-4">
         <div className="mr-8 flex items-center gap-2">
-          <PackageOpen className="h-6 w-6 text-primary" />
-          <Link href="/" className="font-bold text-xl tracking-tight text-primary">
+          <PackageOpen className="text-primary h-6 w-6" />
+          <Link href="/" className="text-primary text-xl font-bold tracking-tight">
             TitipIn
           </Link>
         </div>
-        <div className="hidden md:flex flex-1 items-center justify-between text-sm font-medium">
+        <div className="hidden flex-1 items-center justify-between text-sm font-medium md:flex">
           <div className="flex gap-6">
             {navItems.map((item) => (
               <Link
                 key={item.href}
                 href={item.href}
                 className={cn(
-                  "transition-colors hover:text-foreground/80",
-                  pathname === item.href ? "text-foreground" : "text-foreground/60"
+                  'hover:text-foreground/80 transition-colors',
+                  pathname === item.href ? 'text-foreground' : 'text-foreground/60'
                 )}
               >
                 {item.name}
@@ -43,21 +43,21 @@ export function Navbar() {
           </div>
         </div>
         {/* Mobile Navigation */}
-        <div className="flex flex-1 items-center justify-end md:hidden overflow-hidden">
-             <div className="flex gap-4 overflow-x-auto text-sm font-medium pb-1 no-scrollbar w-full">
-               {navItems.map((item) => (
-                 <Link
-                   key={item.href}
-                   href={item.href}
-                   className={cn(
-                     "whitespace-nowrap transition-colors",
-                     pathname === item.href ? "text-foreground" : "text-foreground/60"
-                   )}
-                 >
-                   {item.name}
-                 </Link>
-               ))}
-             </div>
+        <div className="flex flex-1 items-center justify-end overflow-hidden md:hidden">
+          <div className="no-scrollbar flex w-full gap-4 overflow-x-auto pb-1 text-sm font-medium">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  'whitespace-nowrap transition-colors',
+                  pathname === item.href ? 'text-foreground' : 'text-foreground/60'
+                )}
+              >
+                {item.name}
+              </Link>
+            ))}
+          </div>
         </div>
       </div>
     </nav>

src/components/OrderCard.tsx

@@ -3,12 +3,27 @@
 import { useState, useEffect } from 'react'
 import { Button, buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { submitOrder, getUserSubmission, getSessionUser } from '@/app/actions'
-import { PlusCircle, MinusCircle, User, CheckCircle2, ShoppingBag, Sparkles, Users, Eye } from 'lucide-react'
+import {
+  PlusCircle,
+  MinusCircle,
+  User,
+  CheckCircle2,
+  ShoppingBag,
+  Sparkles,
+  Users,
+  Eye,
+} from 'lucide-react'
 import { OrderFormModal } from '@/components/OrderFormModal'
 import { ShareButton } from '@/components/ShareButton'
 import Link from 'next/link'
@@ -22,47 +37,52 @@ export function OrderCard({ order }: { order: any }) {
   const activeItems = order.available_items.filter((i: any) => !i.is_sold_out)
 
   return (
-    <div className="flex flex-col md:flex-row h-full md:h-auto rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm hover:shadow-xl hover:border-[#1B2CC1]/40 dark:hover:border-blue-500/40 transition-all duration-300 group overflow-hidden items-start md:items-stretch">
-      
+    <div className="group flex h-full flex-col items-start overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm transition-all duration-300 hover:border-[#1B2CC1]/40 hover:shadow-xl md:h-auto md:flex-row md:items-stretch dark:border-slate-800 dark:bg-slate-900 dark:hover:border-blue-500/40">
       {/* Left: Info */}
-      <div className="flex-[1.2] p-5 md:border-r border-slate-100 dark:border-slate-800/80 flex flex-col justify-center min-w-0 w-full">
-        <div className="flex justify-between items-start gap-4">
-          <div className="flex-1 min-w-0">
-            <h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-2 leading-snug group-hover:text-[#1B2CC1] dark:group-hover:text-blue-400 transition-colors">
+      <div className="flex w-full min-w-0 flex-[1.2] flex-col justify-center border-slate-100 p-5 md:border-r dark:border-slate-800/80">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <h3 className="line-clamp-2 text-lg leading-snug font-bold text-slate-900 transition-colors group-hover:text-[#1B2CC1] dark:text-white dark:group-hover:text-blue-400">
               {order.title}
             </h3>
             {order.description && (
-              <p className="text-xs text-slate-500 mt-1 line-clamp-2 font-medium">
+              <p className="mt-1 line-clamp-2 text-xs font-medium text-slate-500">
                 {order.description}
               </p>
             )}
           </div>
-          <div className="flex flex-col sm:flex-row items-end sm:items-center gap-2 shrink-0">
-            <span className="text-[10px] sm:text-[11px] text-slate-500 font-semibold bg-slate-100/80 dark:bg-slate-800 px-2.5 py-1 rounded-full whitespace-nowrap">
+          <div className="flex shrink-0 flex-col items-end gap-2 sm:flex-row sm:items-center">
+            <span className="rounded-full bg-slate-100/80 px-2.5 py-1 text-[10px] font-semibold whitespace-nowrap text-slate-500 sm:text-[11px] dark:bg-slate-800">
               {format(new Date(order.date), 'EEEE, dd MMM yyyy', { locale: idLocale })}
             </span>
-            <span className="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] sm:text-[11px] font-black tracking-wide bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400 border border-emerald-200/60 dark:border-emerald-900/50">
+            <span className="inline-flex items-center rounded-full border border-emerald-200/60 bg-emerald-50 px-2.5 py-1 text-[10px] font-black tracking-wide text-emerald-700 sm:text-[11px] dark:border-emerald-900/50 dark:bg-emerald-950/50 dark:text-emerald-400">
               ● OPEN
             </span>
           </div>
         </div>
 
-        <div className="flex flex-wrap items-center gap-3 mt-3 pt-3 border-t border-slate-100 dark:border-slate-800/60">
+        <div className="mt-3 flex flex-wrap items-center gap-3 border-t border-slate-100 pt-3 dark:border-slate-800/60">
           <div className="flex items-center gap-2">
             {order.creator.photo ? (
-              <img src={order.creator.photo} alt={order.creator.name} className="w-5 h-5 rounded-full object-cover ring-2 ring-slate-100 dark:ring-slate-800" />
+              <img
+                src={order.creator.photo}
+                alt={order.creator.name}
+                className="h-5 w-5 rounded-full object-cover ring-2 ring-slate-100 dark:ring-slate-800"
+              />
             ) : (
-              <div className="w-5 h-5 rounded-full bg-[#1B2CC1]/10 dark:bg-blue-900/40 text-[#1B2CC1] dark:text-blue-300 flex items-center justify-center font-bold text-[10px]">
+              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-[#1B2CC1]/10 text-[10px] font-bold text-[#1B2CC1] dark:bg-blue-900/40 dark:text-blue-300">
                 {order.creator.name.charAt(0).toUpperCase()}
               </div>
             )}
-            <span className="text-xs font-bold text-slate-700 dark:text-slate-300">{order.creator.name}</span>
+            <span className="text-xs font-bold text-slate-700 dark:text-slate-300">
+              {order.creator.name}
+            </span>
           </div>
 
-          <div className="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600 hidden sm:block"></div>
+          <div className="hidden h-1 w-1 rounded-full bg-slate-300 sm:block dark:bg-slate-600"></div>
 
           <div className="flex items-center gap-1.5">
-            <Users className="w-3.5 h-3.5 text-[#1B2CC1]" />
+            <Users className="h-3.5 w-3.5 text-[#1B2CC1]" />
             <span className="text-xs font-bold text-slate-600 dark:text-slate-400">
               {order.submissions.length} Orang Menitip
             </span>
@@ -71,31 +91,34 @@ export function OrderCard({ order }: { order: any }) {
       </div>
 
       {/* Middle: Items List */}
-      <div className="w-full md:w-64 p-5 md:border-r border-slate-100 dark:border-slate-800/80 flex flex-col justify-center border-t md:border-t-0">
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
+      <div className="flex w-full flex-col justify-center border-t border-slate-100 p-5 md:w-64 md:border-t-0 md:border-r dark:border-slate-800/80">
+        <div className="mb-2 flex items-center justify-between">
+          <span className="block text-[10px] font-bold tracking-wider text-slate-400 uppercase">
             Item Tersedia ({activeItems.length})
           </span>
           {order.allow_custom && (
-            <div className="inline-flex items-center gap-1 text-[9px] font-semibold text-[#1B2CC1] bg-blue-50 dark:bg-blue-950/40 px-1.5 py-0.5 rounded-md">
-              <Sparkles className="w-3 h-3" /> Kustom
+            <div className="inline-flex items-center gap-1 rounded-md bg-blue-50 px-1.5 py-0.5 text-[9px] font-semibold text-[#1B2CC1] dark:bg-blue-950/40">
+              <Sparkles className="h-3 w-3" /> Kustom
             </div>
           )}
         </div>
 
-        <div className="bg-slate-50 dark:bg-slate-800/40 p-3 rounded-xl border border-slate-200/70 dark:border-slate-800 max-h-24 overflow-y-auto scrollbar-thin">
+        <div className="max-h-24 scrollbar-thin overflow-y-auto rounded-xl border border-slate-200/70 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-800/40">
           <ul className="space-y-1.5">
             {activeItems.map((item: any) => (
-              <li key={item.id} className="text-[11px] flex items-start gap-2 text-slate-700 dark:text-slate-300 font-medium">
-                <div className="w-3.5 h-3.5 rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center shrink-0 mt-0.5">
-                  <CheckCircle2 className="w-2.5 h-2.5" />
+              <li
+                key={item.id}
+                className="flex items-start gap-2 text-[11px] font-medium text-slate-700 dark:text-slate-300"
+              >
+                <div className="mt-0.5 flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1]">
+                  <CheckCircle2 className="h-2.5 w-2.5" />
                 </div>
                 <span className="truncate leading-snug">{item.name}</span>
               </li>
             ))}
             {activeItems.length === 0 && (
               <li className="text-[10px] text-slate-400 italic">
-                {order.allow_custom ? "Hanya menerima kustom." : "Semua item habis."}
+                {order.allow_custom ? 'Hanya menerima kustom.' : 'Semua item habis.'}
               </li>
             )}
           </ul>
@@ -103,10 +126,10 @@ export function OrderCard({ order }: { order: any }) {
       </div>
 
       {/* Right: Actions */}
-      <div className="w-full md:w-56 p-5 bg-slate-50/60 dark:bg-slate-800/40 flex flex-col items-center justify-center gap-2.5 shrink-0">
+      <div className="flex w-full shrink-0 flex-col items-center justify-center gap-2.5 bg-slate-50/60 p-5 md:w-56 dark:bg-slate-800/40">
         <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger className="w-full flex items-center justify-center h-10 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-xs shadow-md shadow-[#1B2CC1]/20 gap-1.5 transition-all cursor-pointer px-2">
-            <ShoppingBag className="w-4 h-4 shrink-0" />
+          <DialogTrigger className="flex h-10 w-full cursor-pointer items-center justify-center gap-1.5 rounded-xl bg-[#1B2CC1] px-2 text-xs font-bold text-white shadow-md shadow-[#1B2CC1]/20 transition-all hover:bg-[#15229E]">
+            <ShoppingBag className="h-4 w-4 shrink-0" />
             <span className="truncate">Titip Sekarang</span>
           </DialogTrigger>
           {open && <OrderFormModal order={order} onSuccess={() => setOpen(false)} />}
@@ -115,16 +138,16 @@ export function OrderCard({ order }: { order: any }) {
         <div className="flex w-full gap-2">
           <Link
             href={`/order/${order.id}`}
-            className="flex-1 flex items-center justify-center h-9 rounded-xl bg-white dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold text-xs shadow-sm gap-1.5 transition-all cursor-pointer px-1 border border-slate-200 dark:border-slate-700"
+            className="flex h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white px-1 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
           >
-            <Eye className="w-3.5 h-3.5 shrink-0" />
+            <Eye className="h-3.5 w-3.5 shrink-0" />
             <span className="truncate">Detail</span>
           </Link>
 
           <ShareButton
             orderId={order.id}
             orderTitle={order.title}
-            className="flex-1 h-9 rounded-xl font-bold text-xs gap-1.5 shadow-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 transition-all text-slate-700 dark:text-slate-300 px-1"
+            className="h-9 flex-1 gap-1.5 rounded-xl border border-slate-200 bg-white px-1 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
             showText={true}
           />
         </div>

src/components/OrderFormModal.tsx

@@ -10,11 +10,15 @@ import { Input } from '@/components/ui/input'
 import { submitOrder, getUserSubmission, getSessionUser, getOrderDetail } from '@/app/actions'
 import { PlusCircle, MinusCircle, CheckCircle2 } from 'lucide-react'
 
-export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: () => void }) {
+export function OrderFormModal({ order, onSuccess }: { order: any; onSuccess: () => void }) {
   const [liveOrder, setLiveOrder] = useState<any>(order)
   const [userId, setUserId] = useState<string>('')
-  const [items, setItems] = useState<Record<string, { selected: boolean, qty: number }>>({})
-  const [customItems, setCustomItems] = useState<Array<{ id: string, name: string, qty: number }>>([])
+  const [items, setItems] = useState<
+    Record<string, { selected: boolean; qty: number; note?: string }>
+  >({})
+  const [customItems, setCustomItems] = useState<
+    Array<{ id: string; name: string; qty: number; note?: string }>
+  >([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
 
@@ -42,10 +46,15 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
         if (!item.is_custom) {
           const stdItem = currentOrder.available_items.find((ai: any) => ai.name === item.name)
           if (stdItem) {
-            freshItems[stdItem.id] = { selected: true, qty: item.qty }
+            freshItems[stdItem.id] = { selected: true, qty: item.qty, note: item.note || '' }
           }
         } else {
-          newCustoms.push({ id: Math.random().toString(), name: item.name, qty: item.qty })
+          newCustoms.push({
+            id: Math.random().toString(36).substr(2, 9),
+            name: item.name,
+            qty: item.qty,
+            note: item.note || '',
+          })
         }
       })
       setItems(freshItems)
@@ -53,34 +62,60 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
     }
   }
 
-  const handleStandardItemToggle = (itemId: string, checked: boolean) => {
-    setItems(prev => ({
+  const handleStandardItemToggle = (id: string, checked: boolean) => {
+    setItems((prev) => ({
       ...prev,
-      [itemId]: { selected: checked, qty: checked ? 1 : 0 }
+      [id]: { selected: checked, qty: checked ? 1 : 0, note: prev[id]?.note || '' },
     }))
   }
 
-  const handleStandardItemQty = (itemId: string, qty: number) => {
+  const handleStandardItemQty = (id: string, qty: number) => {
     if (qty < 1) {
-      handleStandardItemToggle(itemId, false)
+      handleStandardItemToggle(id, false)
       return
     }
-    setItems(prev => ({
+    setItems((prev) => ({
       ...prev,
-      [itemId]: { selected: true, qty }
+      [id]: { ...prev[id], qty },
+    }))
+  }
+
+  const handleStandardItemNote = (id: string, note: string) => {
+    setItems((prev) => ({
+      ...prev,
+      [id]: { ...prev[id], note },
     }))
   }
 
   const addCustomItem = () => {
-    setCustomItems([...customItems, { id: Math.random().toString(), name: '', qty: 1 }])
+    setCustomItems((prev) => [
+      ...prev,
+      { id: Math.random().toString(36).substr(2, 9), name: '', qty: 1, note: '' },
+    ])
   }
 
-  const updateCustomItem = (id: string, field: 'name' | 'qty', value: any) => {
-    setCustomItems(customItems.map(c => c.id === id ? { ...c, [field]: value } : c))
+  const handleCustomItemChange = (
+    id: string,
+    field: 'name' | 'qty' | 'note',
+    value: string | number
+  ) => {
+    setCustomItems((prev) =>
+      prev.map((item) => {
+        if (item.id === id) {
+          return { ...item, [field]: value }
+        }
+        return item
+      })
+    )
+  }
+
+  const handleCustomItemQty = (id: string, qty: number) => {
+    if (qty < 1) return
+    handleCustomItemChange(id, 'qty', qty)
   }
 
   const removeCustomItem = (id: string) => {
-    setCustomItems(customItems.filter(c => c.id !== id))
+    setCustomItems(customItems.filter((c) => c.id !== id))
   }
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -91,15 +126,25 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
     const payloadItems: any[] = []
 
     liveOrder.available_items.forEach((ai: any) => {
-      const state = items[ai.id]
-      if (state?.selected && state.qty > 0) {
-        payloadItems.push({ name: ai.name, qty: state.qty, is_custom: false })
+      const selectedItem = items[ai.id]
+      if (selectedItem?.selected && selectedItem.qty > 0) {
+        payloadItems.push({
+          name: ai.name,
+          qty: selectedItem.qty,
+          is_custom: false,
+          note: selectedItem.note?.trim() || undefined,
+        })
       }
     })
 
-    customItems.forEach(ci => {
+    customItems.forEach((ci) => {
       if (ci.name.trim() && ci.qty > 0) {
-        payloadItems.push({ name: ci.name.trim(), qty: ci.qty, is_custom: true })
+        payloadItems.push({
+          name: ci.name.trim(),
+          qty: ci.qty,
+          is_custom: true,
+          note: ci.note?.trim() || undefined,
+        })
       }
     })
 
@@ -112,7 +157,7 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
     const res = await submitOrder({
       order_id: liveOrder.id,
       user_id: userId,
-      items: payloadItems
+      items: payloadItems,
     })
 
     if (res.success) {
@@ -124,21 +169,26 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
   }
 
   return (
-    <DialogContent className="sm:max-w-[520px] p-0 overflow-hidden rounded-3xl border-slate-200/90 dark:border-slate-800 shadow-2xl max-h-[90vh] flex flex-col">
+    <DialogContent className="flex max-h-[90vh] flex-col overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-2xl sm:max-w-[520px] dark:border-slate-800">
       <div className="bg-gradient-to-br from-[#1B2CC1] to-[#121E85] p-6 text-white">
-        <span className="text-[11px] font-bold uppercase tracking-wider text-blue-200">Form Titipan</span>
-        <DialogTitle className="text-2xl font-black tracking-tight text-white mt-1">
+        <span className="text-[11px] font-bold tracking-wider text-blue-200 uppercase">
+          Form Titipan
+        </span>
+        <DialogTitle className="mt-1 text-2xl font-black tracking-tight text-white">
           {liveOrder.title}
         </DialogTitle>
-        <p className="text-xs text-blue-100 mt-1">
+        <p className="mt-1 text-xs text-blue-100">
           Pilih menu yang tersedia di bawah atau tambahkan item khusus jika diizinkan.
         </p>
       </div>
 
-      <form onSubmit={handleSubmit} className="p-6 overflow-y-auto space-y-6 flex-1 bg-white dark:bg-slate-900">
+      <form
+        onSubmit={handleSubmit}
+        className="flex-1 space-y-6 overflow-y-auto bg-white p-6 dark:bg-slate-900"
+      >
         {/* Standard Items */}
         <div className="space-y-3">
-          <Label className="text-xs font-bold uppercase tracking-wider text-slate-400">
+          <Label className="text-xs font-bold tracking-wider text-slate-400 uppercase">
             Daftar Menu Tersedia
           </Label>
           <div className="space-y-2">
@@ -149,57 +199,84 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
                 <div
                   key={item.id}
                   className={cn(
-                    "flex items-center justify-between p-3.5 rounded-xl border transition-all",
+                    'flex flex-col gap-2 rounded-xl border p-3.5 transition-all',
                     isSelected
-                      ? "border-[#1B2CC1] bg-[#1B2CC1]/5 dark:bg-blue-950/20 shadow-sm" 
-                      : "border-slate-200/80 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/50"
+                      ? 'border-[#1B2CC1]/40 bg-blue-50/20 shadow-sm dark:bg-blue-950/10'
+                      : 'border-slate-200/90 bg-slate-50/70 dark:border-slate-800 dark:bg-slate-800/40'
                   )}
                 >
-                  <div className="flex items-center gap-3 flex-1 min-w-0">
-                    <Checkbox 
-                      id={`item-${item.id}`} 
-                      checked={isSelected && !item.is_sold_out}
-                      disabled={item.is_sold_out}
-                      onCheckedChange={(c) => !item.is_sold_out && handleStandardItemToggle(item.id, c as boolean)}
-                      className="rounded-lg data-[state=checked]:bg-[#1B2CC1] data-[state=checked]:border-[#1B2CC1] disabled:opacity-50"
-                    />
-                    <Label htmlFor={`item-${item.id}`} className={cn("text-sm font-bold truncate flex items-center gap-2", item.is_sold_out ? "text-slate-400 dark:text-slate-500 cursor-not-allowed" : "text-slate-800 dark:text-slate-200 cursor-pointer")}>
-                      <span className={item.is_sold_out ? "line-through" : ""}>{item.name}</span>
-                      {item.is_sold_out && (
-                        <span className="text-[9px] bg-rose-100 dark:bg-rose-950/30 text-rose-600 dark:text-rose-400 px-1.5 py-0.5 rounded font-black uppercase tracking-wider border border-rose-200 dark:border-rose-900/50">
-                          Sold Out
+                  <div className="flex items-center justify-between">
+                    <div className="flex min-w-0 flex-1 items-center gap-3">
+                      <Checkbox
+                        id={`item-${item.id}`}
+                        checked={isSelected && !item.is_sold_out}
+                        disabled={item.is_sold_out || loading}
+                        onCheckedChange={(c) =>
+                          !item.is_sold_out && handleStandardItemToggle(item.id, c as boolean)
+                        }
+                        className="rounded-lg disabled:opacity-50 data-[state=checked]:border-[#1B2CC1] data-[state=checked]:bg-[#1B2CC1]"
+                      />
+                      <Label
+                        htmlFor={`item-${item.id}`}
+                        className={cn(
+                          'flex items-center gap-2 truncate text-sm font-bold',
+                          item.is_sold_out
+                            ? 'cursor-not-allowed text-slate-400 dark:text-slate-500'
+                            : 'cursor-pointer text-slate-800 dark:text-slate-200'
+                        )}
+                      >
+                        <span className={item.is_sold_out ? 'line-through' : ''}>{item.name}</span>
+                        {item.is_sold_out && (
+                          <span className="rounded border border-rose-200 bg-rose-100 px-1.5 py-0.5 text-[9px] font-black tracking-wider text-rose-600 uppercase dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-400">
+                            Sold Out
+                          </span>
+                        )}
+                      </Label>
+                    </div>
+                    {isSelected && (
+                      <div className="flex shrink-0 items-center gap-1 rounded-lg border border-slate-200 bg-white p-0.5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          disabled={loading}
+                          className="h-7 w-7 text-slate-500 hover:text-slate-800"
+                          onClick={() => handleStandardItemQty(item.id, qty - 1)}
+                        >
+                          <MinusCircle className="h-4 w-4" />
+                        </Button>
+                        <span className="w-7 text-center text-xs font-extrabold text-[#1B2CC1] dark:text-blue-400">
+                          {qty}
                         </span>
-                      )}
-                    </Label>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          disabled={loading}
+                          className="h-7 w-7 text-slate-500 hover:text-slate-800"
+                          onClick={() => handleStandardItemQty(item.id, qty + 1)}
+                        >
+                          <PlusCircle className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    )}
                   </div>
                   {isSelected && (
-                    <div className="flex items-center gap-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-0.5 shadow-sm">
-                      <Button 
-                        type="button" 
-                        variant="ghost" 
-                        size="icon" 
-                        className="h-7 w-7 text-slate-500 hover:text-slate-800" 
-                        onClick={() => handleStandardItemQty(item.id, qty - 1)}
-                      >
-                        <MinusCircle className="h-4 w-4" />
-                      </Button>
-                      <span className="w-7 text-center text-xs font-extrabold text-[#1B2CC1] dark:text-blue-400">{qty}</span>
-                      <Button 
-                        type="button" 
-                        variant="ghost" 
-                        size="icon" 
-                        className="h-7 w-7 text-slate-500 hover:text-slate-800" 
-                        onClick={() => handleStandardItemQty(item.id, qty + 1)}
-                      >
-                        <PlusCircle className="h-4 w-4" />
-                      </Button>
+                    <div className="mt-1 pl-7">
+                      <Input
+                        placeholder="Catatan (opsional), misal: 1/2 porsi"
+                        className="h-8 border-slate-200/60 bg-slate-50/50 text-xs dark:border-slate-700/60 dark:bg-slate-900/50"
+                        value={items[item.id]?.note || ''}
+                        disabled={loading}
+                        onChange={(e) => handleStandardItemNote(item.id, e.target.value)}
+                      />
                     </div>
                   )}
                 </div>
               )
             })}
             {liveOrder.available_items.length === 0 && (
-              <p className="text-xs text-slate-400 text-center py-3 bg-slate-50 dark:bg-slate-800/40 rounded-xl border border-dashed border-slate-200 dark:border-slate-800">
+              <p className="rounded-xl border border-dashed border-slate-200 bg-slate-50 py-3 text-center text-xs text-slate-400 dark:border-slate-800 dark:bg-slate-800/40">
                 Tidak ada menu standar yang ditentukan.
               </p>
             )}
@@ -210,15 +287,16 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
         {liveOrder.allow_custom && (
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <Label className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              <Label className="text-xs font-bold tracking-wider text-slate-400 uppercase">
                 Item Tambahan (Kustom)
               </Label>
               <Button
                 type="button"
                 variant="outline"
                 size="sm"
+                disabled={loading}
                 onClick={addCustomItem}
-                className="h-8 text-xs font-bold rounded-lg border-dashed border-[#1B2CC1]/40 text-[#1B2CC1] hover:bg-[#1B2CC1]/10 gap-1.5"
+                className="h-8 gap-1.5 rounded-lg border-dashed border-[#1B2CC1]/40 text-xs font-bold text-[#1B2CC1] hover:bg-[#1B2CC1]/10"
               >
                 <PlusCircle className="h-3.5 w-3.5" /> Tambah Kustom
               </Button>
@@ -227,27 +305,35 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
             {customItems.length > 0 ? (
               <div className="space-y-2.5">
                 {customItems.map((ci, idx) => (
-                  <div key={ci.id} className="flex gap-2 items-center p-3 rounded-xl border border-slate-200/90 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/40">
-                    <span className="text-xs font-bold text-slate-400 w-4">{idx + 1}.</span>
+                  <div
+                    key={ci.id}
+                    className="flex items-center gap-2 rounded-xl border border-slate-200/90 bg-slate-50/70 p-3 dark:border-slate-800 dark:bg-slate-800/40"
+                  >
+                    <span className="w-4 text-xs font-bold text-slate-400">{idx + 1}.</span>
                     <Input
-                      placeholder="Nama Menu / Catatan Khusus" 
+                      placeholder="Nama Menu Kustom"
                       value={ci.name}
-                      onChange={(e) => updateCustomItem(ci.id, 'name', e.target.value)}
-                      className="flex-1 h-9 rounded-lg bg-white dark:bg-slate-900 text-xs font-medium"
+                      disabled={loading}
+                      onChange={(e) => handleCustomItemChange(ci.id, 'name', e.target.value)}
+                      className="h-9 flex-1 rounded-lg bg-white text-xs font-medium dark:bg-slate-900"
                     />
                     <Input
                       type="number"
                       min="1"
                       value={ci.qty}
-                      onChange={(e) => updateCustomItem(ci.id, 'qty', parseInt(e.target.value) || 1)}
-                      className="w-16 h-9 rounded-lg bg-white dark:bg-slate-900 text-center font-bold text-xs"
+                      disabled={loading}
+                      onChange={(e) =>
+                        handleCustomItemChange(ci.id, 'qty', parseInt(e.target.value) || 1)
+                      }
+                      className="h-9 w-16 rounded-lg bg-white text-center text-xs font-bold dark:bg-slate-900"
                     />
                     <Button
                       type="button"
                       variant="ghost"
                       size="icon"
+                      disabled={loading}
                       onClick={() => removeCustomItem(ci.id)}
-                      className="h-8 w-8 text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg"
+                      className="h-8 w-8 shrink-0 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-950/30"
                     >
                       <MinusCircle className="h-4 w-4" />
                     </Button>
@@ -257,27 +343,31 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
             ) : (
               <div
                 onClick={addCustomItem}
-                className="p-4 border-2 border-dashed border-slate-200 dark:border-slate-800 hover:border-[#1B2CC1]/50 rounded-2xl text-center bg-slate-50/50 dark:bg-slate-800/30 cursor-pointer transition-all group"
+                className="group cursor-pointer rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-4 text-center transition-all hover:border-[#1B2CC1]/50 dark:border-slate-800 dark:bg-slate-800/30"
               >
-                <PlusCircle className="w-5 h-5 text-slate-400 group-hover:text-[#1B2CC1] mx-auto mb-1 transition-colors" />
-                <p className="text-xs font-bold text-slate-600 dark:text-slate-300">Klik untuk Tambah Item Custom</p>
-                <p className="text-[11px] text-slate-400 mt-0.5">Ingin titip menu lain? Masukkan nama dan kuantitasnya di sini.</p>
+                <PlusCircle className="mx-auto mb-1 h-5 w-5 text-slate-400 transition-colors group-hover:text-[#1B2CC1]" />
+                <p className="text-xs font-bold text-slate-600 dark:text-slate-300">
+                  Klik untuk Tambah Item Custom
+                </p>
+                <p className="mt-0.5 text-[11px] text-slate-400">
+                  Ingin titip menu lain? Masukkan nama dan kuantitasnya di sini.
+                </p>
               </div>
             )}
           </div>
         )}
 
         {error && (
-          <div className="p-3 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 rounded-xl text-xs text-red-600 dark:text-red-400 font-semibold">
+          <div className="rounded-xl border border-red-200 bg-red-50 p-3 text-xs font-semibold text-red-600 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400">
             {error}
           </div>
         )}
 
-        <div className="flex justify-end gap-3 pt-2 border-t border-slate-100 dark:border-slate-800">
+        <div className="flex justify-end gap-3 border-t border-slate-100 pt-2 dark:border-slate-800">
           <Button
             type="submit"
             disabled={loading}
-            className="w-full h-11 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold shadow-md shadow-[#1B2CC1]/25"
+            className="h-11 w-full rounded-xl bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/25 hover:bg-[#15229E]"
           >
             {loading ? 'Menyimpan Titipan...' : 'Kirim Titip Pesanan'}
           </Button>

src/components/ReportByPersonGrid.tsx

@@ -2,25 +2,61 @@
 
 import React, { useState, useEffect } from 'react'
 import { Card } from '@/components/ui/card'
-import { ChevronDown, ChevronUp, Users, CheckCircle2, Package, InboxIcon, ChevronLeft, ChevronRight, Search } from 'lucide-react'
+import {
+  ChevronDown,
+  ChevronUp,
+  Users,
+  CheckCircle2,
+  Package,
+  InboxIcon,
+  ChevronLeft,
+  ChevronRight,
+  Search,
+} from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '@/components/ui/dialog'
 import { processBulkPayment } from '@/app/actions'
 import { format } from 'date-fns'
 
 const ITEMS_PER_PAGE = 5
 
 const formatRupiah = (value: number) =>
-  new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(value)
+  new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    maximumFractionDigits: 0,
+  }).format(value)
 
-export default function ReportByPersonGrid({ data, balancesData = [], creatorId, onUpdate }: { data: any[]; balancesData?: any[]; creatorId: string; onUpdate: () => void }) {
+export default function ReportByPersonGrid({
+  data,
+  balancesData = [],
+  creatorId,
+  onUpdate,
+}: {
+  data: any[]
+  balancesData?: any[]
+  creatorId: string
+  onUpdate: () => void
+}) {
   const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({})
   const [currentPage, setCurrentPage] = useState(1)
   const [searchQuery, setSearchQuery] = useState('')
   const [modalOpen, setModalOpen] = useState(false)
   const [saving, setSaving] = useState(false)
-  const [target, setTarget] = useState<{ ids: string[]; label: string; amount: number; userId: string }>({ ids: [], label: '', amount: 0, userId: '' })
+  const [target, setTarget] = useState<{
+    ids: string[]
+    label: string
+    amount: number
+    userId: string
+  }>({ ids: [], label: '', amount: 0, userId: '' })
   const [cashInput, setCashInput] = useState<string>('')
 
   // Reset page + search when data changes (e.g. filter changed)
@@ -35,48 +71,59 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
     setCurrentPage(1)
   }, [searchQuery])
 
-  const toggleRow = (id: string) =>
-    setExpandedRows(prev => ({ ...prev, [id]: !prev[id] }))
+  const toggleRow = (id: string) => setExpandedRows((prev) => ({ ...prev, [id]: !prev[id] }))
 
   // Group by user
   const usersMap = new Map<string, any>()
-  data.forEach(order => {
+  data.forEach((order) => {
     order.submissions.forEach((sub: any) => {
       if (!usersMap.has(sub.user.id)) {
         usersMap.set(sub.user.id, {
           user: sub.user,
           totalPiutang: 0,
           totalPaid: 0,
-          submissions: []
+          submissions: [],
         })
       }
       const obj = usersMap.get(sub.user.id)
-      const amount = Number(sub.bill) || 0
-      if (sub.payment_status !== 'LUNAS') obj.totalPiutang += amount
-      else obj.totalPaid += amount
-      obj.submissions.push({ ...sub, orderTitle: order.title, orderDate: order.date })
+      const bill = Number(sub.bill) || 0
+      const paid =
+        (sub.paid_amount ?? (sub.payment_status === 'LUNAS' ? bill : 0)) + (sub.saldo_used || 0)
+      const unpaid = Math.max(0, bill - paid)
+      obj.totalPiutang += unpaid
+      obj.totalPaid += paid
+      obj.submissions.push({ ...sub, orderTitle: order.title, orderDate: order.date, paid, unpaid })
     })
   })
 
   const userList = Array.from(usersMap.values())
-    .map(obj => ({
+    .map((obj) => ({
       ...obj,
       // Sort each person's PO list by order date, newest first
       submissions: [...obj.submissions].sort(
         (a: any, b: any) => new Date(b.orderDate).getTime() - new Date(a.orderDate).getTime()
-      )
+      ),
     }))
     .sort((a, b) => b.totalPiutang - a.totalPiutang)
 
   const q = searchQuery.toLowerCase().trim()
   const filteredUserList = q
-    ? userList.filter(u => u.user.name?.toLowerCase().includes(q))
+    ? userList.filter((u) => u.user.name?.toLowerCase().includes(q))
     : userList
 
   const totalPages = Math.ceil(filteredUserList.length / ITEMS_PER_PAGE)
-  const paginatedList = filteredUserList.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
+  const paginatedList = filteredUserList.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  )
 
-  const openModal = (e: React.MouseEvent, ids: string[], label: string, amount: number, userId: string) => {
+  const openModal = (
+    e: React.MouseEvent,
+    ids: string[],
+    label: string,
+    amount: number,
+    userId: string
+  ) => {
     e.stopPropagation()
     setTarget({ ids, label, amount, userId })
     setCashInput('')
@@ -92,7 +139,7 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
       cash_amount: cash,
       use_balance: true,
       creator_id: creatorId,
-      user_id: target.userId
+      user_id: target.userId,
     })
     setSaving(false)
     if (res.success) {
@@ -101,81 +148,95 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
     }
   }
 
-  const targetUserBalanceObj = balancesData.find(b => b.user.id === target.userId)
+  const targetUserBalanceObj = balancesData.find((b) => b.user.id === target.userId)
   const targetUserBalance = targetUserBalanceObj ? targetUserBalanceObj.amount : 0
 
   return (
     <>
-      <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
-        <div className="bg-slate-50/50 dark:bg-slate-800/40 px-4 py-3 border-b border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center gap-3">
-          <div className="flex items-center gap-2 flex-1">
-            <Users className="w-4 h-4 text-[#1B2CC1] shrink-0" />
-            <h3 className="text-sm font-black text-slate-800 dark:text-slate-200">Detail Piutang Berdasarkan Orang</h3>
+      <Card className="overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="flex flex-col gap-3 border-b border-slate-100 bg-slate-50/50 px-4 py-3 sm:flex-row sm:items-center dark:border-slate-800 dark:bg-slate-800/40">
+          <div className="flex flex-1 items-center gap-2">
+            <Users className="h-4 w-4 shrink-0 text-[#1B2CC1]" />
+            <h3 className="text-sm font-black text-slate-800 dark:text-slate-200">
+              Detail Piutang Berdasarkan Orang
+            </h3>
           </div>
-          <div className="flex items-center gap-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg px-3 py-1.5 w-full sm:w-48">
-            <Search className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+          <div className="flex w-full items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-1.5 sm:w-48 dark:border-slate-700 dark:bg-slate-900">
+            <Search className="h-3.5 w-3.5 shrink-0 text-slate-400" />
             <input
               type="text"
               placeholder="Cari nama pemesan..."
               value={searchQuery}
-              onChange={e => setSearchQuery(e.target.value)}
-              className="text-xs font-medium bg-transparent border-none outline-none w-full text-slate-700 dark:text-slate-200 placeholder:text-slate-400"
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full border-none bg-transparent text-xs font-medium text-slate-700 outline-none placeholder:text-slate-400 dark:text-slate-200"
             />
           </div>
         </div>
 
         {userList.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 gap-3 text-slate-400">
-            <InboxIcon className="w-10 h-10 opacity-40" />
+          <div className="flex flex-col items-center justify-center gap-3 py-16 text-slate-400">
+            <InboxIcon className="h-10 w-10 opacity-40" />
             <p className="text-sm font-semibold">Tidak ada data pemesan di periode ini.</p>
           </div>
         ) : filteredUserList.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 gap-3 text-slate-400">
-            <Search className="w-10 h-10 opacity-40" />
-            <p className="text-sm font-semibold">Tidak ada hasil untuk &quot;{searchQuery}&quot;.</p>
+          <div className="flex flex-col items-center justify-center gap-3 py-16 text-slate-400">
+            <Search className="h-10 w-10 opacity-40" />
+            <p className="text-sm font-semibold">
+              Tidak ada hasil untuk &quot;{searchQuery}&quot;.
+            </p>
           </div>
         ) : (
           <>
             <div className="overflow-x-auto">
-              <table className="w-full text-sm text-left">
-                <thead className="text-xs text-slate-500 uppercase bg-slate-50/30 dark:bg-slate-900/50">
+              <table className="w-full text-left text-sm">
+                <thead className="bg-slate-50/30 text-xs text-slate-500 uppercase dark:bg-slate-900/50">
                   <tr>
-                    <th className="px-6 py-4 font-bold w-8"></th>
+                    <th className="w-8 px-6 py-4 font-bold"></th>
                     <th className="px-6 py-4 font-bold">Nama Pemesan</th>
-                    <th className="px-6 py-4 font-bold text-center">Total PO</th>
-                    <th className="px-6 py-4 font-bold text-right">Total Piutang</th>
-                    <th className="px-6 py-4 font-bold text-center">Aksi</th>
+                    <th className="px-6 py-4 text-center font-bold">Total PO</th>
+                    <th className="px-6 py-4 text-right font-bold">Total Piutang</th>
+                    {/* <th className="px-6 py-4 font-bold text-center">Aksi</th> */}
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
                   {paginatedList.map((userObj) => {
                     const isExpanded = !!expandedRows[userObj.user.id]
-                    const unpaid = userObj.submissions.filter((s: any) => s.payment_status !== 'LUNAS')
+                    const unpaid = userObj.submissions.filter((s: any) => s.unpaid > 0)
 
                     return (
                       <React.Fragment key={userObj.user.id}>
                         <tr
                           onClick={() => toggleRow(userObj.user.id)}
                           className={cn(
-                            'hover:bg-slate-50/50 dark:hover:bg-slate-800/40 cursor-pointer transition-colors group',
+                            'group cursor-pointer transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/40',
                             isExpanded && 'bg-slate-50/30 dark:bg-slate-800/20'
                           )}
                         >
                           <td className="px-6 py-4">
-                            <button className="text-slate-400 group-hover:text-[#1B2CC1] transition-colors p-1 rounded-full hover:bg-blue-50 dark:hover:bg-blue-900/30">
-                              {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                            <button className="rounded-full p-1 text-slate-400 transition-colors group-hover:text-[#1B2CC1] hover:bg-blue-50 dark:hover:bg-blue-900/30">
+                              {isExpanded ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4" />
+                              )}
                             </button>
                           </td>
                           <td className="px-6 py-4">
                             <div className="flex items-center gap-3">
                               {userObj.user.photo ? (
-                                <img src={userObj.user.photo} alt={userObj.user.name} className="w-8 h-8 rounded-full object-cover ring-2 ring-slate-100 dark:ring-slate-800" />
+                                <img
+                                  src={userObj.user.photo}
+                                  alt={userObj.user.name}
+                                  className="h-8 w-8 rounded-full object-cover ring-2 ring-slate-100 dark:ring-slate-800"
+                                />
                               ) : (
-                                <div className="w-8 h-8 rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-bold text-xs ring-2 ring-slate-100 dark:ring-slate-800">
+                                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#1B2CC1]/10 text-xs font-bold text-[#1B2CC1] ring-2 ring-slate-100 dark:ring-slate-800">
                                   {userObj.user.name.charAt(0).toUpperCase()}
                                 </div>
                               )}
-                              <p className="font-bold text-slate-800 dark:text-slate-200">{userObj.user.name}</p>
+                              <p className="font-bold text-slate-800 dark:text-slate-200">
+                                {userObj.user.name}
+                              </p>
                             </div>
                           </td>
                           <td className="px-6 py-4 text-center font-semibold text-slate-600 dark:text-slate-400">
@@ -183,15 +244,21 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
                           </td>
                           <td className="px-6 py-4 text-right">
                             {userObj.totalPiutang > 0 ? (
-                              <p className="font-black text-rose-600 dark:text-rose-400">{formatRupiah(userObj.totalPiutang)}</p>
+                              <p className="font-black text-rose-600 dark:text-rose-400">
+                                {formatRupiah(userObj.totalPiutang)}
+                              </p>
                             ) : (
-                              <p className="font-bold text-emerald-600 dark:text-emerald-400">Lunas Semua</p>
+                              <p className="font-bold text-emerald-600 dark:text-emerald-400">
+                                Lunas Semua
+                              </p>
                             )}
                             {userObj.totalPaid > 0 && (
-                              <p className="text-[10px] text-slate-500 font-semibold mt-0.5">Lunas: {formatRupiah(userObj.totalPaid)}</p>
+                              <p className="mt-0.5 text-[10px] font-semibold text-slate-500">
+                                Lunas: {formatRupiah(userObj.totalPaid)}
+                              </p>
                             )}
                           </td>
-                          <td className="px-6 py-4 text-center">
+                          {/* <td className="px-6 py-4 text-center">
                             {unpaid.length > 0 ? (
                               <Button
                                 onClick={(e) => openModal(e, unpaid.map((s: any) => s.id), `Semua tagihan ${userObj.user.name}`, userObj.totalPiutang, userObj.user.id)}
@@ -201,50 +268,70 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
                                 <CheckCircle2 className="w-3.5 h-3.5" /> Lunasi Semua
                               </Button>
                             ):( <span className="text-[10px] font-bold text-slate-400">Selesai</span>)}
-                          </td>
+                          </td> */}
                         </tr>
 
                         {isExpanded && (
                           <tr className="bg-slate-50 dark:bg-slate-900/60">
-                            <td colSpan={5} className="px-6 py-5 border-l-4 border-l-[#1B2CC1]">
-                              <div className="pl-8 space-y-3">
-                                <h4 className="text-[11px] font-bold uppercase tracking-wider text-slate-500 flex items-center gap-1.5">
-                                  <Package className="w-3.5 h-3.5" /> Rincian Hutang per PO
+                            <td colSpan={5} className="border-l-4 border-l-[#1B2CC1] px-6 py-5">
+                              <div className="space-y-3 pl-8">
+                                <h4 className="flex items-center gap-1.5 text-[11px] font-bold tracking-wider text-slate-500 uppercase">
+                                  <Package className="h-3.5 w-3.5" /> Rincian Hutang per PO
                                 </h4>
-                                <div className="overflow-hidden border border-slate-200/80 dark:border-slate-700 rounded-xl bg-white dark:bg-slate-800">
+                                <div className="overflow-hidden rounded-xl border border-slate-200/80 bg-white dark:border-slate-700 dark:bg-slate-800">
                                   <table className="w-full text-xs">
-                                    <thead className="bg-slate-100/50 dark:bg-slate-700/30 text-slate-500 uppercase font-semibold">
+                                    <thead className="bg-slate-100/50 font-semibold text-slate-500 uppercase dark:bg-slate-700/30">
                                       <tr>
                                         <th className="px-4 py-2.5 text-left">Judul PO</th>
                                         <th className="px-4 py-2.5 text-left">Tgl Order</th>
                                         <th className="px-4 py-2.5 text-left">Status</th>
                                         <th className="px-4 py-2.5 text-right">Tagihan</th>
-                                        <th className="px-4 py-2.5 text-center">Aksi</th>
+                                        {/* <th className="px-4 py-2.5 text-center">Aksi</th> */}
                                       </tr>
                                     </thead>
                                     <tbody className="divide-y divide-slate-100 dark:divide-slate-700/50">
                                       {userObj.submissions.map((sub: any) => {
-                                        const isUnpaid = sub.payment_status !== 'LUNAS'
+                                        const isUnpaid = sub.unpaid > 0
                                         return (
                                           <tr key={sub.id}>
-                                            <td className="px-4 py-2.5 font-bold text-slate-800 dark:text-slate-200">{sub.orderTitle}</td>
-                                            <td className="px-4 py-2.5 text-slate-500 font-medium">
+                                            <td className="px-4 py-2.5 font-bold text-slate-800 dark:text-slate-200">
+                                              {sub.orderTitle}
+                                            </td>
+                                            <td className="px-4 py-2.5 font-medium text-slate-500">
                                               {format(new Date(sub.orderDate), 'dd MMM yyyy')}
                                             </td>
                                             <td className="px-4 py-2.5">
-                                              <span className={cn(
-                                                'text-[9px] font-bold px-1.5 py-0.5 rounded uppercase',
-                                                !isUnpaid
-                                                  ? 'text-emerald-700 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-950/40'
-                                                  : 'text-rose-700 bg-rose-100 dark:text-rose-400 dark:bg-rose-950/40'
-                                              )}>
+                                              <span
+                                                className={cn(
+                                                  'rounded px-1.5 py-0.5 text-[9px] font-bold uppercase',
+                                                  !isUnpaid
+                                                    ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400'
+                                                    : 'bg-rose-100 text-rose-700 dark:bg-rose-950/40 dark:text-rose-400'
+                                                )}
+                                              >
                                                 {isUnpaid ? 'Belum' : 'Lunas'}
                                               </span>
                                             </td>
-                                            <td className={cn('px-4 py-2.5 text-right font-black', isUnpaid ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400')}>
-                                              {sub.bill ? formatRupiah(sub.bill) : 'Rp0'}
+                                            <td
+                                              className={cn(
+                                                'flex flex-col px-4 py-2.5 text-right',
+                                                isUnpaid
+                                                  ? 'text-rose-600 dark:text-rose-400'
+                                                  : 'text-emerald-600 dark:text-emerald-400'
+                                              )}
+                                            >
+                                              <span className="font-black">
+                                                {sub.bill ? formatRupiah(sub.bill) : 'Rp0'}
+                                              </span>
+                                              {sub.unpaid > 0 && sub.paid > 0 && (
+                                                <div className="mt-0.5 text-[10px] leading-tight font-medium text-slate-500">
+                                                  Masuk: {formatRupiah(sub.paid)}
+                                                  <br />
+                                                  Sisa: {formatRupiah(sub.unpaid)}
+                                                </div>
+                                              )}
                                             </td>
-                                            <td className="px-4 py-2.5 text-center">
+                                            {/* <td className="px-4 py-2.5 text-center">
                                               {isUnpaid ? (
                                                 <Button
                                                   onClick={(e) => openModal(e, [sub.id], `PO: ${sub.orderTitle}`, Number(sub.bill) || 0, sub.user.id)}
@@ -257,7 +344,7 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
                                               ) : (
                                                 <span className="text-[10px] font-bold text-slate-400">Selesai</span>
                                               )}
-                                            </td>
+                                            </td> */}
                                           </tr>
                                         )
                                       })}
@@ -277,17 +364,29 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
 
             {/* Pagination */}
             {totalPages > 1 && (
-              <div className="flex items-center justify-between px-6 py-4 bg-slate-50/50 dark:bg-slate-900/50 border-t border-slate-100 dark:border-slate-800">
+              <div className="flex items-center justify-between border-t border-slate-100 bg-slate-50/50 px-6 py-4 dark:border-slate-800 dark:bg-slate-900/50">
                 <p className="text-xs font-medium text-slate-500">
-                  Halaman <span className="font-bold text-slate-700 dark:text-slate-300">{currentPage}</span> dari{' '}
+                  Halaman{' '}
+                  <span className="font-bold text-slate-700 dark:text-slate-300">
+                    {currentPage}
+                  </span>{' '}
+                  dari{' '}
                   <span className="font-bold text-slate-700 dark:text-slate-300">{totalPages}</span>
                 </p>
                 <div className="flex items-center gap-1">
-                  <button onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="p-1.5 rounded-lg border border-slate-200 dark:border-slate-700 disabled:opacity-40 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
-                    <ChevronLeft className="w-3.5 h-3.5" />
+                  <button
+                    onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                    disabled={currentPage === 1}
+                    className="rounded-lg border border-slate-200 p-1.5 transition-colors hover:bg-slate-100 disabled:opacity-40 dark:border-slate-700 dark:hover:bg-slate-800"
+                  >
+                    <ChevronLeft className="h-3.5 w-3.5" />
                   </button>
-                  <button onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} className="p-1.5 rounded-lg border border-slate-200 dark:border-slate-700 disabled:opacity-40 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
-                    <ChevronRight className="w-3.5 h-3.5" />
+                  <button
+                    onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                    disabled={currentPage === totalPages}
+                    className="rounded-lg border border-slate-200 p-1.5 transition-colors hover:bg-slate-100 disabled:opacity-40 dark:border-slate-700 dark:hover:bg-slate-800"
+                  >
+                    <ChevronRight className="h-3.5 w-3.5" />
                   </button>
                 </div>
               </div>
@@ -298,25 +397,34 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
 
       {/* Confirmation Modal */}
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="sm:max-w-md rounded-2xl">
+        <DialogContent className="rounded-2xl sm:max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-xl font-black text-slate-900 dark:text-white flex items-center gap-2">
-              <CheckCircle2 className="w-6 h-6 text-emerald-500" />
+            <DialogTitle className="flex items-center gap-2 text-xl font-black text-slate-900 dark:text-white">
+              <CheckCircle2 className="h-6 w-6 text-emerald-500" />
               Konfirmasi Pelunasan
             </DialogTitle>
-            <DialogDescription className="text-slate-500 pt-2">
-              Tandai <strong className="text-slate-800 dark:text-slate-200">{target.label}</strong> sebagai <strong>LUNAS</strong>?
+            <DialogDescription className="pt-2 text-slate-500">
+              Tandai <strong className="text-slate-800 dark:text-slate-200">{target.label}</strong>{' '}
+              sebagai <strong>LUNAS</strong>?
             </DialogDescription>
           </DialogHeader>
-          <div className="bg-slate-50 dark:bg-slate-900/50 p-4 rounded-xl border border-slate-100 dark:border-slate-800 my-2">
-            <p className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Total Tagihan</p>
-            <p className="text-2xl font-black text-rose-600 dark:text-rose-400">{formatRupiah(target.amount)}</p>
+          <div className="my-2 rounded-xl border border-slate-100 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/50">
+            <p className="mb-1 text-xs font-bold tracking-wider text-slate-500 uppercase">
+              Total Tagihan
+            </p>
+            <p className="text-2xl font-black text-rose-600 dark:text-rose-400">
+              {formatRupiah(target.amount)}
+            </p>
 
-            <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700 flex flex-col gap-3">
+            <div className="mt-4 flex flex-col gap-3 border-t border-slate-200 pt-4 dark:border-slate-700">
               <div className="flex flex-col gap-1.5">
-                <label className="text-xs font-bold text-slate-500">Nominal Dibayar (Cash/Transfer)</label>
+                <label className="text-xs font-bold text-slate-500">
+                  Nominal Dibayar (Cash/Transfer)
+                </label>
                 <div className="relative">
-                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm font-bold text-slate-500">Rp</span>
+                  <span className="absolute top-1/2 left-3 -translate-y-1/2 text-sm font-bold text-slate-500">
+                    Rp
+                  </span>
                   <input
                     type="text"
                     value={cashInput}
@@ -325,23 +433,29 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
                       setCashInput(val ? new Intl.NumberFormat('id-ID').format(Number(val)) : '')
                     }}
                     placeholder="0"
-                    className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg h-10 pl-9 pr-3 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-[#1B2CC1]"
+                    className="h-10 w-full rounded-lg border border-slate-200 bg-white pr-3 pl-9 text-sm font-bold focus:ring-2 focus:ring-[#1B2CC1] focus:outline-none dark:border-slate-700 dark:bg-slate-900"
                   />
                 </div>
               </div>
 
               {targetUserBalance > 0 && (
-                <div className="flex justify-between items-center p-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-emerald-50/50 dark:bg-emerald-900/20">
-                  <span className="text-sm font-bold text-slate-600 dark:text-slate-300">Dipotong dari Saldo (Otomatis)</span>
-                  <span className="text-sm font-black text-emerald-600 dark:text-emerald-400">{formatRupiah(targetUserBalance)}</span>
+                <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-emerald-50/50 p-2 dark:border-slate-700 dark:bg-emerald-900/20">
+                  <span className="text-sm font-bold text-slate-600 dark:text-slate-300">
+                    Dipotong dari Saldo (Otomatis)
+                  </span>
+                  <span className="text-sm font-black text-emerald-600 dark:text-emerald-400">
+                    {formatRupiah(targetUserBalance)}
+                  </span>
                 </div>
               )}
 
-              <div className="bg-white dark:bg-slate-800 p-3 rounded-lg border border-slate-200 dark:border-slate-700 mt-1 flex justify-between items-center shadow-sm">
+              <div className="mt-1 flex items-center justify-between rounded-lg border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                 <div className="flex flex-col">
                   <span className="text-xs font-bold text-slate-500">Total Pembayaran</span>
                   {targetUserBalance > 0 && (
-                    <span className="text-[10px] font-medium text-slate-400 leading-none mt-0.5">(Nominal Dibayar + Saldo)</span>
+                    <span className="mt-0.5 text-[10px] leading-none font-medium text-slate-400">
+                      (Nominal Dibayar + Saldo)
+                    </span>
                   )}
                 </div>
                 <span className="text-lg font-black text-[#1B2CC1] dark:text-blue-400">
@@ -354,16 +468,22 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
                 const kurang = target.amount - totalBayar
                 if (kurang > 0) {
                   return (
-                    <div className="flex justify-between items-center px-2 py-1">
-                      <span className="text-xs font-bold text-rose-500">Masih Kurang (Sisa Hutang)</span>
-                      <span className="text-xs font-black text-rose-500">{formatRupiah(kurang)}</span>
+                    <div className="flex items-center justify-between px-2 py-1">
+                      <span className="text-xs font-bold text-rose-500">
+                        Masih Kurang (Sisa Hutang)
+                      </span>
+                      <span className="text-xs font-black text-rose-500">
+                        {formatRupiah(kurang)}
+                      </span>
                     </div>
                   )
                 } else if (target.amount > 0) {
                   return (
-                    <div className="flex justify-between items-center px-2 py-1">
+                    <div className="flex items-center justify-between px-2 py-1">
                       <span className="text-xs font-bold text-emerald-500">Status</span>
-                      <span className="text-xs font-black text-emerald-500">Akan Lunas Sepenuhnya</span>
+                      <span className="text-xs font-black text-emerald-500">
+                        Akan Lunas Sepenuhnya
+                      </span>
                     </div>
                   )
                 }
@@ -371,11 +491,20 @@ export default function ReportByPersonGrid({ data, balancesData = [], creatorId,
               })()}
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0 mt-2">
-            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving} className="rounded-xl font-bold">
+          <DialogFooter className="mt-2 gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setModalOpen(false)}
+              disabled={saving}
+              className="rounded-xl font-bold"
+            >
               Batal
             </Button>
-            <Button onClick={handleConfirm} disabled={saving} className="rounded-xl font-bold bg-[#1B2CC1] hover:bg-[#121E85] text-white shadow-md shadow-[#1B2CC1]/20">
+            <Button
+              onClick={handleConfirm}
+              disabled={saving}
+              className="rounded-xl bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/20 hover:bg-[#121E85]"
+            >
               {saving ? 'Memproses...' : 'Proses Pelunasan'}
             </Button>
           </DialogFooter>

src/components/ReportCharts.tsx

@@ -1,12 +1,30 @@
 'use client'
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, Cell } from 'recharts'
-
-export default function ReportCharts({ type, data }: { type: 'SUBMITTOR' | 'CREATOR', data: any[] }) {
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  CartesianGrid,
+  Cell,
+} from 'recharts'
 
+export default function ReportCharts({
+  type,
+  data,
+}: {
+  type: 'SUBMITTOR' | 'CREATOR'
+  data: any[]
+}) {
   const formatRupiah = (value: number) => {
-    return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(value)
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      maximumFractionDigits: 0,
+    }).format(value)
   }
 
   // Prepare chart data based on type
@@ -14,25 +32,36 @@ export default function ReportCharts({ type, data }: { type: 'SUBMITTOR' | 'CREA
 
   if (type === 'SUBMITTOR') {
     chartData = [...data]
-      .filter(sub => sub.order.status === 'CLOSE')
+      .filter((sub) => sub.order.status === 'CLOSE')
       .sort((a, b) => new Date(a.order.date).getTime() - new Date(b.order.date).getTime()) // oldest → newest
-      .map(sub => ({
-        name: sub.order.title.length > 15 ? sub.order.title.substring(0, 15) + '...' : sub.order.title,
-        fullTitle: sub.order.title,
-        Total: sub.bill || 0,
-        status: sub.payment_status
-      }))
+      .map((sub) => {
+        const bill = sub.bill || 0
+        const paid =
+          (sub.paid_amount ?? (sub.payment_status === 'LUNAS' ? bill : 0)) + (sub.saldo_used || 0)
+        const unpaid = Math.max(0, bill - paid)
+        return {
+          name:
+            sub.order.title.length > 15
+              ? sub.order.title.substring(0, 15) + '...'
+              : sub.order.title,
+          fullTitle: sub.order.title,
+          Total: bill,
+          Paid: paid,
+          Unpaid: unpaid,
+          status: unpaid > 0 ? (paid > 0 ? 'SEBAGIAN' : 'BELUM BAYAR') : 'LUNAS',
+        }
+      })
   } else {
     chartData = [...data]
-      .filter(order => order.status === 'CLOSE')
+      .filter((order) => order.status === 'CLOSE')
       .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()) // oldest → newest
-      .map(order => {
+      .map((order) => {
         const total = order.submissions.reduce((acc: number, sub: any) => acc + (sub.bill || 0), 0)
         return {
           name: order.title.length > 15 ? order.title.substring(0, 15) + '...' : order.title,
           fullTitle: order.title,
           Total: total,
-          status: order.status
+          status: order.status,
         }
       })
   }
@@ -40,9 +69,11 @@ export default function ReportCharts({ type, data }: { type: 'SUBMITTOR' | 'CREA
   // If no data to show
   if (chartData.length === 0) {
     return (
-      <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
+      <Card className="rounded-2xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
         <CardContent className="p-12 text-center">
-          <p className="text-slate-500 text-xs font-medium">Belum ada data transaksi yang cukup untuk ditampilkan di grafik.</p>
+          <p className="text-xs font-medium text-slate-500">
+            Belum ada data transaksi yang cukup untuk ditampilkan di grafik.
+          </p>
         </CardContent>
       </Card>
     )
@@ -50,14 +81,27 @@ export default function ReportCharts({ type, data }: { type: 'SUBMITTOR' | 'CREA
 
   const CustomTooltip = ({ active, payload, label }: any) => {
     if (active && payload && payload.length) {
+      const data = payload[0].payload
       return (
-        <div className="bg-white dark:bg-slate-900 p-3 border border-slate-200 dark:border-slate-800 rounded-xl shadow-lg">
-          <p className="font-bold text-xs text-slate-800 dark:text-slate-200 mb-1">{payload[0].payload.fullTitle}</p>
-          <p className="text-sm font-black text-[#1B2CC1]">
-            {formatRupiah(payload[0].value)}
+        <div className="rounded-xl border border-slate-200 bg-white p-3 shadow-lg dark:border-slate-800 dark:bg-slate-900">
+          <p className="mb-1 text-xs font-bold text-slate-800 dark:text-slate-200">
+            {data.fullTitle}
           </p>
-          <p className="text-[10px] text-slate-500 mt-1 uppercase font-bold tracking-wider">
-            Status: {payload[0].payload.status}
+          <p className="text-sm font-black text-[#1B2CC1]">Total: {formatRupiah(data.Total)}</p>
+          {type === 'SUBMITTOR' && (
+            <>
+              <p className="mt-1 text-[11px] font-bold text-emerald-600">
+                Dibayar: {formatRupiah(data.Paid)}
+              </p>
+              {data.Unpaid > 0 && (
+                <p className="text-[11px] font-bold text-rose-600">
+                  Kurang: {formatRupiah(data.Unpaid)}
+                </p>
+              )}
+            </>
+          )}
+          <p className="mt-1 text-[10px] font-bold tracking-wider text-slate-500 uppercase">
+            Status: {data.status}
           </p>
         </div>
       )
@@ -66,13 +110,13 @@ export default function ReportCharts({ type, data }: { type: 'SUBMITTOR' | 'CREA
   }
 
   return (
-    <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
-      <CardHeader className="bg-slate-50/50 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-800 p-4">
+    <Card className="overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+      <CardHeader className="border-b border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/40">
         <CardTitle className="text-sm font-black text-slate-800 dark:text-slate-200">
           {type === 'SUBMITTOR' ? 'Grafik Pengeluaran per PO' : 'Grafik Omzet per PO'}
         </CardTitle>
       </CardHeader>
-      <CardContent className="p-4 sm:p-6 h-[300px] w-full">
+      <CardContent className="h-[300px] w-full p-4 sm:p-6">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
             <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
@@ -90,17 +134,14 @@ export default function ReportCharts({ type, data }: { type: 'SUBMITTOR' | 'CREA
               tickFormatter={(value) => `Rp${value / 1000}k`}
             />
             <Tooltip cursor={{ fill: 'rgba(27, 44, 193, 0.05)' }} content={<CustomTooltip />} />
-            <Bar dataKey="Total" radius={[4, 4, 0, 0]}>
-              {chartData.map((entry, index) => (
-                <Cell 
-                  key={`cell-${index}`} 
-                  fill={type === 'SUBMITTOR' 
-                    ? (entry.status === 'LUNAS' ? '#10b981' : '#f43f5e') // Emerald or Rose
-                    : '#1B2CC1' // Primary for creator
-                  } 
-                />
-              ))}
-            </Bar>
+            {type === 'SUBMITTOR' ? (
+              <>
+                <Bar dataKey="Paid" stackId="a" fill="#10b981" />
+                <Bar dataKey="Unpaid" stackId="a" fill="#f43f5e" radius={[4, 4, 0, 0]} />
+              </>
+            ) : (
+              <Bar dataKey="Total" radius={[4, 4, 0, 0]} fill="#1B2CC1" />
+            )}
           </BarChart>
         </ResponsiveContainer>
       </CardContent>

src/components/ReportDataGrid.tsx

@@ -2,34 +2,55 @@
 
 import React, { useState, useEffect } from 'react'
 import { Card } from '@/components/ui/card'
-import { ChevronDown, ChevronUp, Package, Users, Receipt, Calendar, Wallet, TrendingUp, InboxIcon, ChevronLeft, ChevronRight, Search } from 'lucide-react'
+import {
+  ChevronDown,
+  ChevronUp,
+  Package,
+  Users,
+  Receipt,
+  Calendar,
+  Wallet,
+  TrendingUp,
+  InboxIcon,
+  ChevronLeft,
+  ChevronRight,
+  Search,
+} from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { format } from 'date-fns'
 
 const ITEMS_PER_PAGE = 5
 
-function PaginationBar({ currentPage, totalPages, onPage }: { currentPage: number; totalPages: number; onPage: (p: number) => void }) {
+function PaginationBar({
+  currentPage,
+  totalPages,
+  onPage,
+}: {
+  currentPage: number
+  totalPages: number
+  onPage: (p: number) => void
+}) {
   if (totalPages <= 1) return null
   return (
-    <div className="flex items-center justify-between px-6 py-4 bg-slate-50/50 dark:bg-slate-900/50 border-t border-slate-100 dark:border-slate-800">
+    <div className="flex items-center justify-between border-t border-slate-100 bg-slate-50/50 px-6 py-4 dark:border-slate-800 dark:bg-slate-900/50">
       <p className="text-xs font-medium text-slate-500">
-        Halaman <span className="font-bold text-slate-700 dark:text-slate-300">{currentPage}</span> dari{' '}
-        <span className="font-bold text-slate-700 dark:text-slate-300">{totalPages}</span>
+        Halaman <span className="font-bold text-slate-700 dark:text-slate-300">{currentPage}</span>{' '}
+        dari <span className="font-bold text-slate-700 dark:text-slate-300">{totalPages}</span>
       </p>
       <div className="flex items-center gap-1">
         <button
           onClick={() => onPage(Math.max(1, currentPage - 1))}
           disabled={currentPage === 1}
-          className="p-1.5 rounded-lg border border-slate-200 dark:border-slate-700 disabled:opacity-40 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+          className="rounded-lg border border-slate-200 p-1.5 transition-colors hover:bg-slate-100 disabled:opacity-40 dark:border-slate-700 dark:hover:bg-slate-800"
         >
-          <ChevronLeft className="w-3.5 h-3.5" />
+          <ChevronLeft className="h-3.5 w-3.5" />
         </button>
         <button
           onClick={() => onPage(Math.min(totalPages, currentPage + 1))}
           disabled={currentPage === totalPages}
-          className="p-1.5 rounded-lg border border-slate-200 dark:border-slate-700 disabled:opacity-40 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+          className="rounded-lg border border-slate-200 p-1.5 transition-colors hover:bg-slate-100 disabled:opacity-40 dark:border-slate-700 dark:hover:bg-slate-800"
         >
-          <ChevronRight className="w-3.5 h-3.5" />
+          <ChevronRight className="h-3.5 w-3.5" />
         </button>
       </div>
     </div>
@@ -38,17 +59,27 @@ function PaginationBar({ currentPage, totalPages, onPage }: { currentPage: numbe
 
 function EmptyState({ label }: { label: string }) {
   return (
-    <div className="flex flex-col items-center justify-center py-16 gap-3 text-slate-400">
-      <InboxIcon className="w-10 h-10 opacity-40" />
+    <div className="flex flex-col items-center justify-center gap-3 py-16 text-slate-400">
+      <InboxIcon className="h-10 w-10 opacity-40" />
       <p className="text-sm font-semibold">{label}</p>
     </div>
   )
 }
 
 const formatRupiah = (value: number) =>
-  new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(value)
+  new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    maximumFractionDigits: 0,
+  }).format(value)
 
-export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CREATOR'; data: any[] }) {
+export default function ReportDataGrid({
+  type,
+  data,
+}: {
+  type: 'SUBMITTOR' | 'CREATOR'
+  data: any[]
+}) {
   const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({})
   const [currentPage, setCurrentPage] = useState(1)
   const [searchQuery, setSearchQuery] = useState('')
@@ -68,7 +99,7 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
   const q = searchQuery.toLowerCase().trim()
 
   const filteredData = q
-    ? data.filter(item => {
+    ? data.filter((item) => {
         if (type === 'SUBMITTOR') {
           return (
             item.order?.title?.toLowerCase().includes(q) ||
@@ -81,28 +112,32 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
     : data
 
   const totalPages = Math.ceil(filteredData.length / ITEMS_PER_PAGE)
-  const paginatedData = filteredData.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
+  const paginatedData = filteredData.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  )
 
-  const toggleRow = (id: string) =>
-    setExpandedRows(prev => ({ ...prev, [id]: !prev[id] }))
+  const toggleRow = (id: string) => setExpandedRows((prev) => ({ ...prev, [id]: !prev[id] }))
 
   /* ─────────────── SUBMITTOR TABLE ─────────────── */
   if (type === 'SUBMITTOR') {
     return (
-      <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
-        <div className="bg-slate-50/50 dark:bg-slate-800/40 px-4 py-3 border-b border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center gap-3">
-          <div className="flex items-center gap-2 flex-1">
-            <Wallet className="w-4 h-4 text-[#1B2CC1] shrink-0" />
-            <h3 className="text-sm font-black text-slate-800 dark:text-slate-200">Detail Pengeluaran Anda</h3>
+      <Card className="overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="flex flex-col gap-3 border-b border-slate-100 bg-slate-50/50 px-4 py-3 sm:flex-row sm:items-center dark:border-slate-800 dark:bg-slate-800/40">
+          <div className="flex flex-1 items-center gap-2">
+            <Wallet className="h-4 w-4 shrink-0 text-[#1B2CC1]" />
+            <h3 className="text-sm font-black text-slate-800 dark:text-slate-200">
+              Detail Pengeluaran Anda
+            </h3>
           </div>
-          <div className="flex items-center gap-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg px-3 py-1.5 w-full sm:w-52">
-            <Search className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+          <div className="flex w-full items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-1.5 sm:w-52 dark:border-slate-700 dark:bg-slate-900">
+            <Search className="h-3.5 w-3.5 shrink-0 text-slate-400" />
             <input
               type="text"
               placeholder="Cari judul PO atau kreator..."
               value={searchQuery}
-              onChange={e => setSearchQuery(e.target.value)}
-              className="text-xs font-medium bg-transparent border-none outline-none w-full text-slate-700 dark:text-slate-200 placeholder:text-slate-400"
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full border-none bg-transparent text-xs font-medium text-slate-700 outline-none placeholder:text-slate-400 dark:text-slate-200"
             />
           </div>
         </div>
@@ -114,14 +149,14 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
         ) : (
           <>
             <div className="overflow-x-auto">
-              <table className="w-full text-sm text-left">
-                <thead className="text-xs text-slate-500 uppercase bg-slate-50/30 dark:bg-slate-900/50">
+              <table className="w-full text-left text-sm">
+                <thead className="bg-slate-50/30 text-xs text-slate-500 uppercase dark:bg-slate-900/50">
                   <tr>
-                    <th className="px-6 py-4 font-bold w-8"></th>
+                    <th className="w-8 px-6 py-4 font-bold"></th>
                     <th className="px-6 py-4 font-bold">Judul PO & Kreator</th>
                     <th className="px-6 py-4 font-bold">Tanggal</th>
                     <th className="px-6 py-4 font-bold">Status Bayar</th>
-                    <th className="px-6 py-4 font-bold text-right">Total Tagihan</th>
+                    <th className="px-6 py-4 text-right font-bold">Total Tagihan</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
@@ -132,51 +167,83 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
                         <tr
                           onClick={() => toggleRow(sub.id)}
                           className={cn(
-                            'hover:bg-slate-50/50 dark:hover:bg-slate-800/40 cursor-pointer transition-colors group',
+                            'group cursor-pointer transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/40',
                             isExpanded && 'bg-slate-50/30 dark:bg-slate-800/20'
                           )}
                         >
                           <td className="px-6 py-4">
-                            <button className="text-slate-400 group-hover:text-[#1B2CC1] transition-colors p-1 rounded-full hover:bg-blue-50 dark:hover:bg-blue-900/30">
-                              {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                            <button className="rounded-full p-1 text-slate-400 transition-colors group-hover:text-[#1B2CC1] hover:bg-blue-50 dark:hover:bg-blue-900/30">
+                              {isExpanded ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4" />
+                              )}
                             </button>
                           </td>
                           <td className="px-6 py-4">
-                            <p className="font-bold text-slate-800 dark:text-slate-200">{sub.order.title}</p>
-                            <p className="text-[11px] text-slate-500 flex items-center gap-1 mt-0.5">
-                              <Users className="w-3 h-3" /> {sub.order.creator.name}
+                            <p className="font-bold text-slate-800 dark:text-slate-200">
+                              {sub.order.title}
+                            </p>
+                            <p className="mt-0.5 flex items-center gap-1 text-[11px] text-slate-500">
+                              <Users className="h-3 w-3" /> {sub.order.creator.name}
                             </p>
                           </td>
                           <td className="px-6 py-4 text-xs text-slate-600 dark:text-slate-400">
                             {format(new Date(sub.order.date), 'dd MMM yyyy')}
                           </td>
                           <td className="px-6 py-4">
-                            <span className={cn(
-                              'inline-flex px-2 py-0.5 rounded-full text-[10px] font-black tracking-wide',
-                              sub.payment_status === 'LUNAS'
-                                ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400 border border-emerald-200/80'
-                                : 'bg-rose-50 text-rose-700 dark:bg-rose-950/50 dark:text-rose-400 border border-rose-200/80'
-                            )}>
+                            <span
+                              className={cn(
+                                'inline-flex rounded-full px-2 py-0.5 text-[10px] font-black tracking-wide',
+                                sub.payment_status === 'LUNAS'
+                                  ? 'border border-emerald-200/80 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400'
+                                  : 'border border-rose-200/80 bg-rose-50 text-rose-700 dark:bg-rose-950/50 dark:text-rose-400'
+                              )}
+                            >
                               {sub.payment_status === 'LUNAS' ? 'LUNAS' : 'BELUM BAYAR'}
                             </span>
                           </td>
-                          <td className="px-6 py-4 text-right font-black text-slate-900 dark:text-white">
-                            {sub.bill ? formatRupiah(sub.bill) : '-'}
+                          <td className="flex flex-col px-6 py-4 text-right font-black text-slate-900 dark:text-white">
+                            <span>{sub.bill ? formatRupiah(sub.bill) : '-'}</span>
+                            {(() => {
+                              const bill = Number(sub.bill) || 0
+                              const paid =
+                                (sub.paid_amount ?? (sub.payment_status === 'LUNAS' ? bill : 0)) +
+                                (sub.saldo_used || 0)
+                              const unpaid = Math.max(0, bill - paid)
+                              if (unpaid > 0 && paid > 0) {
+                                return (
+                                  <div className="mt-1 text-[10px] leading-tight font-medium text-slate-500">
+                                    Dibayar: {formatRupiah(paid)}
+                                    <br />
+                                    Sisa: {formatRupiah(unpaid)}
+                                  </div>
+                                )
+                              }
+                              return null
+                            })()}
                           </td>
                         </tr>
 
                         {isExpanded && (
                           <tr className="bg-slate-50 dark:bg-slate-900/60">
-                            <td colSpan={5} className="px-6 py-5 border-l-4 border-l-[#1B2CC1]">
+                            <td colSpan={5} className="border-l-4 border-l-[#1B2CC1] px-6 py-5">
                               <div className="pl-8">
-                                <h4 className="text-[11px] font-bold uppercase tracking-wider text-slate-500 mb-3 flex items-center gap-1.5">
-                                  <Package className="w-3.5 h-3.5" /> Item yang Anda Pesan
+                                <h4 className="mb-3 flex items-center gap-1.5 text-[11px] font-bold tracking-wider text-slate-500 uppercase">
+                                  <Package className="h-3.5 w-3.5" /> Item yang Anda Pesan
                                 </h4>
-                                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
+                                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
                                   {sub.items.map((item: any) => (
-                                    <div key={item.id} className="bg-white dark:bg-slate-800 border border-slate-200/60 dark:border-slate-700 px-3 py-2 rounded-xl flex items-center justify-between shadow-sm">
-                                      <span className="text-xs font-semibold text-slate-700 dark:text-slate-300 pr-2">{item.name}</span>
-                                      <span className="text-xs font-black text-[#1B2CC1] bg-blue-50 dark:bg-blue-900/30 px-2 py-0.5 rounded-md">{item.qty}x</span>
+                                    <div
+                                      key={item.id}
+                                      className="flex items-center justify-between rounded-xl border border-slate-200/60 bg-white px-3 py-2 shadow-sm dark:border-slate-700 dark:bg-slate-800"
+                                    >
+                                      <span className="pr-2 text-xs font-semibold text-slate-700 dark:text-slate-300">
+                                        {item.name}
+                                      </span>
+                                      <span className="rounded-md bg-blue-50 px-2 py-0.5 text-xs font-black text-[#1B2CC1] dark:bg-blue-900/30">
+                                        {item.qty}x
+                                      </span>
                                     </div>
                                   ))}
                                 </div>
@@ -190,7 +257,11 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
                 </tbody>
               </table>
             </div>
-            <PaginationBar currentPage={currentPage} totalPages={totalPages} onPage={setCurrentPage} />
+            <PaginationBar
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPage={setCurrentPage}
+            />
           </>
         )}
       </Card>
@@ -199,20 +270,22 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
 
   /* ─────────────── CREATOR TABLE ─────────────── */
   return (
-    <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
-      <div className="bg-slate-50/50 dark:bg-slate-800/40 px-4 py-3 border-b border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center gap-3">
-        <div className="flex items-center gap-2 flex-1">
-          <TrendingUp className="w-4 h-4 text-[#1B2CC1] shrink-0" />
-          <h3 className="text-sm font-black text-slate-800 dark:text-slate-200">Riwayat Omzet per PO</h3>
+    <Card className="overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+      <div className="flex flex-col gap-3 border-b border-slate-100 bg-slate-50/50 px-4 py-3 sm:flex-row sm:items-center dark:border-slate-800 dark:bg-slate-800/40">
+        <div className="flex flex-1 items-center gap-2">
+          <TrendingUp className="h-4 w-4 shrink-0 text-[#1B2CC1]" />
+          <h3 className="text-sm font-black text-slate-800 dark:text-slate-200">
+            Riwayat Omzet per PO
+          </h3>
         </div>
-        <div className="flex items-center gap-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg px-3 py-1.5 w-full sm:w-52">
-          <Search className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+        <div className="flex w-full items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-1.5 sm:w-52 dark:border-slate-700 dark:bg-slate-900">
+          <Search className="h-3.5 w-3.5 shrink-0 text-slate-400" />
           <input
             type="text"
             placeholder="Cari judul PO..."
             value={searchQuery}
-            onChange={e => setSearchQuery(e.target.value)}
-            className="text-xs font-medium bg-transparent border-none outline-none w-full text-slate-700 dark:text-slate-200 placeholder:text-slate-400"
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full border-none bg-transparent text-xs font-medium text-slate-700 outline-none placeholder:text-slate-400 dark:text-slate-200"
           />
         </div>
       </div>
@@ -224,47 +297,67 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
       ) : (
         <>
           <div className="overflow-x-auto">
-            <table className="w-full text-sm text-left">
-              <thead className="text-xs text-slate-500 uppercase bg-slate-50/30 dark:bg-slate-900/50">
+            <table className="w-full text-left text-sm">
+              <thead className="bg-slate-50/30 text-xs text-slate-500 uppercase dark:bg-slate-900/50">
                 <tr>
-                  <th className="px-6 py-4 font-bold w-8"></th>
+                  <th className="w-8 px-6 py-4 font-bold"></th>
                   <th className="px-6 py-4 font-bold">Judul PO</th>
                   <th className="px-6 py-4 font-bold">Status</th>
-                  <th className="px-6 py-4 font-bold text-center">Peserta</th>
-                  <th className="px-6 py-4 font-bold text-right">Total Omzet PO</th>
+                  <th className="px-6 py-4 text-center font-bold">Peserta</th>
+                  <th className="px-6 py-4 text-right font-bold">Total Omzet PO</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
                 {paginatedData.map((order: any) => {
                   const isExpanded = !!expandedRows[order.id]
-                  const totalOmzet = order.submissions.reduce((acc: number, sub: any) => acc + (Number(sub.bill) || 0), 0)
-                  const totalPiutang = order.submissions.reduce((acc: number, sub: any) => acc + (sub.payment_status !== 'LUNAS' ? (Number(sub.bill) || 0) : 0), 0)
+                  const totalOmzet = order.submissions.reduce(
+                    (acc: number, sub: any) => acc + (Number(sub.bill) || 0),
+                    0
+                  )
+                  const totalPiutang = order.submissions.reduce((acc: number, sub: any) => {
+                    const bill = Number(sub.bill) || 0
+                    const paid =
+                      (sub.paid_amount ?? (sub.payment_status === 'LUNAS' ? bill : 0)) +
+                      (sub.saldo_used || 0)
+                    return acc + Math.max(0, bill - paid)
+                  }, 0)
 
                   return (
                     <React.Fragment key={order.id}>
                       <tr
                         onClick={() => toggleRow(order.id)}
                         className={cn(
-                          'hover:bg-slate-50/50 dark:hover:bg-slate-800/40 cursor-pointer transition-colors group',
+                          'group cursor-pointer transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/40',
                           isExpanded && 'bg-slate-50/30 dark:bg-slate-800/20'
                         )}
                       >
                         <td className="px-6 py-4">
-                          <button className="text-slate-400 group-hover:text-[#1B2CC1] transition-colors p-1 rounded-full hover:bg-blue-50 dark:hover:bg-blue-900/30">
-                            {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                          <button className="rounded-full p-1 text-slate-400 transition-colors group-hover:text-[#1B2CC1] hover:bg-blue-50 dark:hover:bg-blue-900/30">
+                            {isExpanded ? (
+                              <ChevronUp className="h-4 w-4" />
+                            ) : (
+                              <ChevronDown className="h-4 w-4" />
+                            )}
                           </button>
                         </td>
                         <td className="px-6 py-4">
-                          <p className="font-bold text-slate-800 dark:text-slate-200">{order.title}</p>
-                          <p className="text-[11px] text-slate-500 flex items-center gap-1 mt-0.5">
-                            <Calendar className="w-3 h-3" /> {format(new Date(order.date), 'dd MMM yyyy')}
+                          <p className="font-bold text-slate-800 dark:text-slate-200">
+                            {order.title}
+                          </p>
+                          <p className="mt-0.5 flex items-center gap-1 text-[11px] text-slate-500">
+                            <Calendar className="h-3 w-3" />{' '}
+                            {format(new Date(order.date), 'dd MMM yyyy')}
                           </p>
                         </td>
                         <td className="px-6 py-4">
-                          <span className={cn(
-                            'inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-black tracking-wide',
-                            order.status === 'CLOSE' ? 'bg-rose-50 text-rose-700 dark:bg-rose-950/50 dark:text-rose-400 border border-rose-200/80' : 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300 border border-slate-200/90'
-                          )}>
+                          <span
+                            className={cn(
+                              'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-black tracking-wide',
+                              order.status === 'CLOSE'
+                                ? 'border border-rose-200/80 bg-rose-50 text-rose-700 dark:bg-rose-950/50 dark:text-rose-400'
+                                : 'border border-slate-200/90 bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300'
+                            )}
+                          >
                             ● {order.status}
                           </span>
                         </td>
@@ -272,26 +365,30 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
                           {order.submissions.length} Orang
                         </td>
                         <td className="px-6 py-4 text-right">
-                          <p className="font-black text-slate-900 dark:text-white">{formatRupiah(totalOmzet)}</p>
+                          <p className="font-black text-slate-900 dark:text-white">
+                            {formatRupiah(totalOmzet)}
+                          </p>
                           {totalPiutang > 0 && (
-                            <p className="text-[10px] text-rose-500 font-bold mt-0.5">Piutang: {formatRupiah(totalPiutang)}</p>
+                            <p className="mt-0.5 text-[10px] font-bold text-rose-500">
+                              Piutang: {formatRupiah(totalPiutang)}
+                            </p>
                           )}
                         </td>
                       </tr>
 
                       {isExpanded && (
                         <tr className="bg-slate-50 dark:bg-slate-900/60">
-                          <td colSpan={5} className="px-6 py-5 border-l-4 border-l-[#1B2CC1]">
-                            <div className="pl-8 space-y-3">
-                              <h4 className="text-[11px] font-bold uppercase tracking-wider text-slate-500 flex items-center gap-1.5">
-                                <Receipt className="w-3.5 h-3.5" /> Breakdown Pemesan
+                          <td colSpan={5} className="border-l-4 border-l-[#1B2CC1] px-6 py-5">
+                            <div className="space-y-3 pl-8">
+                              <h4 className="flex items-center gap-1.5 text-[11px] font-bold tracking-wider text-slate-500 uppercase">
+                                <Receipt className="h-3.5 w-3.5" /> Breakdown Pemesan
                               </h4>
                               {order.submissions.length === 0 ? (
                                 <p className="text-xs text-slate-400 italic">Belum ada pemesan.</p>
                               ) : (
-                                <div className="overflow-hidden border border-slate-200/80 dark:border-slate-700 rounded-xl bg-white dark:bg-slate-800">
+                                <div className="overflow-hidden rounded-xl border border-slate-200/80 bg-white dark:border-slate-700 dark:bg-slate-800">
                                   <table className="w-full text-xs">
-                                    <thead className="bg-slate-100/50 dark:bg-slate-700/30 text-slate-500 uppercase font-semibold">
+                                    <thead className="bg-slate-100/50 font-semibold text-slate-500 uppercase dark:bg-slate-700/30">
                                       <tr>
                                         <th className="px-4 py-2.5 text-left">Nama</th>
                                         <th className="px-4 py-2.5 text-left">Status</th>
@@ -301,19 +398,41 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
                                     <tbody className="divide-y divide-slate-100 dark:divide-slate-700/50">
                                       {order.submissions.map((sub: any) => (
                                         <tr key={sub.id}>
-                                          <td className="px-4 py-2.5 font-semibold text-slate-800 dark:text-slate-200">{sub.user.name}</td>
+                                          <td className="px-4 py-2.5 font-semibold text-slate-800 dark:text-slate-200">
+                                            {sub.user.name}
+                                          </td>
                                           <td className="px-4 py-2.5">
-                                            <span className={cn(
-                                              'text-[9px] font-bold px-1.5 py-0.5 rounded uppercase',
-                                              sub.payment_status === 'LUNAS'
-                                                ? 'text-emerald-700 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-950/40'
-                                                : 'text-rose-700 bg-rose-100 dark:text-rose-400 dark:bg-rose-950/40'
-                                            )}>
+                                            <span
+                                              className={cn(
+                                                'rounded px-1.5 py-0.5 text-[9px] font-bold uppercase',
+                                                sub.payment_status === 'LUNAS'
+                                                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400'
+                                                  : 'bg-rose-100 text-rose-700 dark:bg-rose-950/40 dark:text-rose-400'
+                                              )}
+                                            >
                                               {sub.payment_status === 'LUNAS' ? 'Lunas' : 'Belum'}
                                             </span>
                                           </td>
-                                          <td className="px-4 py-2.5 text-right font-black text-slate-700 dark:text-slate-300">
-                                            {sub.bill ? formatRupiah(sub.bill) : '-'}
+                                          <td className="flex flex-col px-4 py-2.5 text-right font-black text-slate-700 dark:text-slate-300">
+                                            <span>{sub.bill ? formatRupiah(sub.bill) : '-'}</span>
+                                            {(() => {
+                                              const bill = Number(sub.bill) || 0
+                                              const paid =
+                                                (sub.paid_amount ??
+                                                  (sub.payment_status === 'LUNAS' ? bill : 0)) +
+                                                (sub.saldo_used || 0)
+                                              const unpaid = Math.max(0, bill - paid)
+                                              if (unpaid > 0 && paid > 0) {
+                                                return (
+                                                  <div className="mt-0.5 text-[10px] leading-tight font-medium text-slate-500">
+                                                    Masuk: {formatRupiah(paid)}
+                                                    <br />
+                                                    Sisa: {formatRupiah(unpaid)}
+                                                  </div>
+                                                )
+                                              }
+                                              return null
+                                            })()}
                                           </td>
                                         </tr>
                                       ))}
@@ -331,7 +450,11 @@ export default function ReportDataGrid({ type, data }: { type: 'SUBMITTOR' | 'CR
               </tbody>
             </table>
           </div>
-          <PaginationBar currentPage={currentPage} totalPages={totalPages} onPage={setCurrentPage} />
+          <PaginationBar
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPage={setCurrentPage}
+          />
         </>
       )}
     </Card>

src/components/ShareButton.tsx

@@ -12,12 +12,19 @@ interface ShareButtonProps {
   orderId: string
   orderTitle?: string
   className?: string
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost"
-  size?: "default" | "sm" | "lg" | "icon"
+  variant?: 'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
   showText?: boolean
 }
 
-export function ShareButton({ orderId, orderTitle = 'Pesanan', className, variant = "outline", size = "sm", showText = true }: ShareButtonProps) {
+export function ShareButton({
+  orderId,
+  orderTitle = 'Pesanan',
+  className,
+  variant = 'outline',
+  size = 'sm',
+  showText = true,
+}: ShareButtonProps) {
   const [copied, setCopied] = useState(false)
   const [open, setOpen] = useState(false)
   const [broadcasting, setBroadcasting] = useState(false)
@@ -31,7 +38,9 @@ export function ShareButton({ orderId, orderTitle = 'Pesanan', className, varian
 
   const handleShareWA = async () => {
     const settings = await getSettings()
-    let template = settings.WHATSAPP_TEMPLATE || 'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}'
+    let template =
+      settings.WHATSAPP_TEMPLATE ||
+      'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}'
 
     const url = `${window.location.origin}/order/${orderId}`
     const text = template.replace('{title}', orderTitle).replace('{url}', url)
@@ -46,13 +55,13 @@ export function ShareButton({ orderId, orderTitle = 'Pesanan', className, varian
     if (res.success) {
       toast.success('Broadcast Terkirim!', {
         description: 'Berhasil mengirim pesan ke Mattermost.',
-        duration: 3000
+        duration: 3000,
       })
       setOpen(false)
     } else {
       toast.error('Gagal Broadcast', {
         description: res.error || 'Terjadi kesalahan saat mengirim.',
-        duration: 3000
+        duration: 3000,
       })
     }
     setBroadcasting(false)
@@ -63,18 +72,20 @@ export function ShareButton({ orderId, orderTitle = 'Pesanan', className, varian
       <Button
         variant={variant}
         size={size}
-        className={cn("transition-all", className)}
+        className={cn('transition-all', className)}
         title="Bagikan PO"
         onClick={() => setOpen(true)}
       >
-        <Share2 className="w-3.5 h-3.5 shrink-0" />
-        {showText && <span className="truncate hidden sm:inline">Bagikan</span>}
+        <Share2 className="h-3.5 w-3.5 shrink-0" />
+        {showText && <span className="hidden truncate sm:inline">Bagikan</span>}
       </Button>
 
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="sm:max-w-xs p-6 rounded-3xl border-slate-200/90 dark:border-slate-800">
-          <DialogTitle className="text-xl font-black text-center text-slate-900 dark:text-white mb-2">Bagikan Pesanan</DialogTitle>
-          <p className="text-sm text-slate-500 text-center mb-4">
+        <DialogContent className="rounded-3xl border-slate-200/90 p-6 sm:max-w-xs dark:border-slate-800">
+          <DialogTitle className="mb-2 text-center text-xl font-black text-slate-900 dark:text-white">
+            Bagikan Pesanan
+          </DialogTitle>
+          <p className="mb-4 text-center text-sm text-slate-500">
             Pilih metode untuk membagikan PO ini ke teman atau tim Anda.
           </p>
 
@@ -82,26 +93,34 @@ export function ShareButton({ orderId, orderTitle = 'Pesanan', className, varian
             <Button
               variant="outline"
               onClick={handleCopyLink}
-              className="w-full h-11 rounded-xl justify-start font-bold gap-3 text-slate-700 dark:text-slate-300"
+              className="h-11 w-full justify-start gap-3 rounded-xl font-bold text-slate-700 dark:text-slate-300"
             >
-              {copied ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4" />}
+              {copied ? (
+                <Check className="h-4 w-4 text-emerald-500" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
               {copied ? 'Tautan Disalin!' : 'Salin Tautan'}
             </Button>
 
             <Button
               onClick={handleShareWA}
-              className="w-full h-11 rounded-xl justify-start font-bold gap-3 bg-[#25D366] hover:bg-[#20bd5a] text-white"
+              className="h-11 w-full justify-start gap-3 rounded-xl bg-[#25D366] font-bold text-white hover:bg-[#20bd5a]"
             >
-              <MessageCircle className="w-4 h-4" />
+              <MessageCircle className="h-4 w-4" />
               Kirim ke WhatsApp
             </Button>
 
             <Button
               onClick={handleBroadcastMattermost}
               disabled={broadcasting}
-              className="w-full h-11 rounded-xl justify-start font-bold gap-3 bg-[#0668E1] hover:bg-[#0557bc] text-white"
+              className="h-11 w-full justify-start gap-3 rounded-xl bg-[#0668E1] font-bold text-white hover:bg-[#0557bc]"
             >
-              {broadcasting ? <Loader2 className="w-4 h-4 animate-spin" /> : <MessageSquare className="w-4 h-4" />}
+              {broadcasting ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <MessageSquare className="h-4 w-4" />
+              )}
               {broadcasting ? 'Mengirim...' : 'Broadcast ke Mattermost'}
             </Button>
           </div>

src/components/Sidebar.tsx

@@ -4,11 +4,7 @@ import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/utils'
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-} from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import {
   Store,
@@ -21,12 +17,17 @@ import {
   Info,
   BarChart2,
   Wallet,
-  Settings
+  Settings,
 } from 'lucide-react'
 
 const menuItems = [
   { name: 'Open Order', href: '/', icon: Store, desc: 'Daftar PO live hari ini' },
-  { name: 'Jasa Order Saya', href: '/my-orders', icon: ClipboardList, desc: 'Kelola PO buatan Anda' },
+  {
+    name: 'Jasa Order Saya',
+    href: '/my-orders',
+    icon: ClipboardList,
+    desc: 'Kelola PO buatan Anda',
+  },
   { name: 'Pesanan Saya', href: '/my-purchases', icon: ShoppingBag, desc: 'Riwayat titipan Anda' },
   { name: 'Buku Saldo', href: '/balances', icon: Wallet, desc: 'Pantau riwayat saldo' },
   { name: 'Laporan', href: '/reports', icon: BarChart2, desc: 'Ringkasan transaksi' },
@@ -64,7 +65,12 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
   // Dynamic Menu Items based on role
   const finalMenuItems = [...menuItems]
   if (userRole === 'superadmin') {
-    finalMenuItems.push({ name: 'Pengaturan', href: '/settings/users', icon: Settings, desc: 'Konfigurasi aplikasi' })
+    finalMenuItems.push({
+      name: 'Pengaturan',
+      href: '/settings/users',
+      icon: Settings,
+      desc: 'Konfigurasi aplikasi',
+    })
   }
 
   return (
@@ -73,36 +79,43 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
       {isOpen && (
         <div
           onClick={onClose}
-          className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-40 lg:hidden transition-opacity"
+          className="fixed inset-0 z-40 bg-slate-900/40 backdrop-blur-sm transition-opacity lg:hidden"
         />
       )}
 
-      <aside className={cn(
-        "fixed lg:sticky top-0 left-0 z-50 h-screen w-72 bg-white dark:bg-slate-900 border-r border-slate-200/80 dark:border-slate-800 flex flex-col justify-between transition-transform duration-300 ease-in-out p-5",
-        isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
-      )}>
+      <aside
+        className={cn(
+          'fixed top-0 left-0 z-50 flex h-screen w-72 flex-col justify-between border-r border-slate-200/80 bg-white p-5 transition-transform duration-300 ease-in-out lg:sticky dark:border-slate-800 dark:bg-slate-900',
+          isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+        )}
+      >
         <div className="space-y-6">
           {/* Brand Header */}
           <div className="flex items-center justify-between px-1">
-            <Link href="/" className="flex items-center gap-3 group">
-              <div className="w-11 h-11 rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] flex items-center justify-center text-white shadow-lg shadow-[#1B2CC1]/25 transition-all duration-300 group-hover:scale-105 group-hover:shadow-[#1B2CC1]/40">
-                <Sparkles className="w-5 h-5" />
+            <Link href="/" className="group flex items-center gap-3">
+              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] text-white shadow-lg shadow-[#1B2CC1]/25 transition-all duration-300 group-hover:scale-105 group-hover:shadow-[#1B2CC1]/40">
+                <Sparkles className="h-5 w-5" />
               </div>
               <div className="flex flex-col">
                 <div className="flex items-center gap-1.5">
-                  <span className="font-black text-xl tracking-tight text-slate-900 dark:text-white leading-none">
+                  <span className="text-xl leading-none font-black tracking-tight text-slate-900 dark:text-white">
                     TitipIn
                   </span>
-                  <span className="text-[9px] font-extrabold uppercase px-1.5 py-0.5 rounded-md bg-[#1B2CC1]/10 text-[#1B2CC1] dark:bg-blue-900/40 dark:text-blue-300">
+                  <span className="rounded-md bg-[#1B2CC1]/10 px-1.5 py-0.5 text-[9px] font-extrabold text-[#1B2CC1] uppercase dark:bg-blue-900/40 dark:text-blue-300">
                     Pro
                   </span>
                 </div>
-                <span className="text-[11px] font-medium text-slate-400 mt-1">Sistem Titip Pesanan</span>
+                <span className="mt-1 text-[11px] font-medium text-slate-400">
+                  Sistem Titip Pesanan
+                </span>
               </div>
             </Link>
             {onClose && (
-              <button onClick={onClose} className="lg:hidden p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100">
-                <X className="w-5 h-5" />
+              <button
+                onClick={onClose}
+                className="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 lg:hidden"
+              >
+                <X className="h-5 w-5" />
               </button>
             )}
           </div>
@@ -111,32 +124,36 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
           <Link
             href="/profile"
             onClick={onClose}
-            className="flex items-center gap-3 p-3 rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/40 hover:bg-slate-100/80 dark:hover:bg-slate-800 transition-all duration-200 group shadow-xs"
+            className="group flex items-center gap-3 rounded-2xl border border-slate-200/90 bg-slate-50/70 p-3 shadow-xs transition-all duration-200 hover:bg-slate-100/80 dark:border-slate-800 dark:bg-slate-800/40 dark:hover:bg-slate-800"
           >
             <div className="relative">
               {userPhoto ? (
-                <img src={userPhoto} alt={userName} className="w-10 h-10 rounded-xl object-cover ring-2 ring-white dark:ring-slate-700 shadow-sm" />
+                <img
+                  src={userPhoto}
+                  alt={userName}
+                  className="h-10 w-10 rounded-xl object-cover shadow-sm ring-2 ring-white dark:ring-slate-700"
+                />
               ) : (
-                <div className="w-10 h-10 rounded-xl bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-black text-sm ring-2 ring-white dark:ring-slate-700 shadow-xs">
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#1B2CC1]/10 text-sm font-black text-[#1B2CC1] shadow-xs ring-2 ring-white dark:ring-slate-700">
                   {userName.charAt(0).toUpperCase()}
                 </div>
               )}
-              <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white dark:ring-slate-900 shadow-xs" />
+              <span className="absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full bg-emerald-500 shadow-xs ring-2 ring-white dark:ring-slate-900" />
             </div>
-            <div className="flex flex-col min-w-0 flex-1">
+            <div className="flex min-w-0 flex-1 flex-col">
               <div className="flex items-center justify-between">
-                <span className="text-xs font-bold text-slate-800 dark:text-slate-200 truncate group-hover:text-[#1B2CC1] transition-colors">
+                <span className="truncate text-xs font-bold text-slate-800 transition-colors group-hover:text-[#1B2CC1] dark:text-slate-200">
                   {userName}
                 </span>
-                <ArrowUpRight className="w-3.5 h-3.5 text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+                <ArrowUpRight className="h-3.5 w-3.5 text-slate-400 opacity-0 transition-opacity group-hover:opacity-100" />
               </div>
-              <div className="flex items-center gap-1.5 mt-0.5">
+              <div className="mt-0.5 flex items-center gap-1.5">
                 {userRole === 'superadmin' && (
-                  <span className="px-1.5 py-[2px] rounded-md bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 text-[8px] font-black uppercase tracking-wider">
+                  <span className="rounded-md bg-purple-100 px-1.5 py-[2px] text-[8px] font-black tracking-wider text-purple-700 uppercase dark:bg-purple-900/30 dark:text-purple-400">
                     Admin
                   </span>
                 )}
-                <span className="text-[10px] font-medium text-slate-500 dark:text-slate-400 truncate">
+                <span className="truncate text-[10px] font-medium text-slate-500 dark:text-slate-400">
                   {userNameAccount ? `@${userNameAccount}` : 'Aktif'}
                 </span>
               </div>
@@ -145,7 +162,7 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
 
           {/* Main Navigation */}
           <div className="space-y-1.5">
-            <div className="px-3 pb-1.5 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">
+            <div className="px-3 pb-1.5 text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-slate-500">
               Navigasi Utama
             </div>
             <nav className="space-y-1">
@@ -158,26 +175,30 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
                     href={item.href}
                     onClick={onClose}
                     className={cn(
-                      "flex items-center gap-3 px-3.5 py-3 rounded-2xl text-sm font-semibold transition-all duration-200 group relative",
+                      'group relative flex items-center gap-3 rounded-2xl px-3.5 py-3 text-sm font-semibold transition-all duration-200',
                       isActive
-                        ? "bg-[#1B2CC1] text-white shadow-md shadow-[#1B2CC1]/25 font-bold" 
-                        : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100/80 dark:hover:bg-slate-800/60"
+                        ? 'bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/25'
+                        : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/60 dark:hover:text-white'
                     )}
                   >
-                    <div className={cn(
-                      "w-8 h-8 rounded-xl flex items-center justify-center transition-colors",
-                      isActive 
-                        ? "bg-white/15 text-white" 
-                        : "bg-slate-100 dark:bg-slate-800 text-slate-500 group-hover:text-[#1B2CC1] group-hover:bg-[#1B2CC1]/10"
-                    )}>
-                      <Icon className="w-4 h-4" />
+                    <div
+                      className={cn(
+                        'flex h-8 w-8 items-center justify-center rounded-xl transition-colors',
+                        isActive
+                          ? 'bg-white/15 text-white'
+                          : 'bg-slate-100 text-slate-500 group-hover:bg-[#1B2CC1]/10 group-hover:text-[#1B2CC1] dark:bg-slate-800'
+                      )}
+                    >
+                      <Icon className="h-4 w-4" />
                     </div>
-                    <div className="flex flex-col min-w-0">
+                    <div className="flex min-w-0 flex-col">
                       <span className="leading-tight">{item.name}</span>
-                      <span className={cn(
-                        "text-[10px] font-normal truncate mt-0.5",
-                        isActive ? "text-blue-100" : "text-slate-400"
-                      )}>
+                      <span
+                        className={cn(
+                          'mt-0.5 truncate text-[10px] font-normal',
+                          isActive ? 'text-blue-100' : 'text-slate-400'
+                        )}
+                      >
                         {item.desc}
                       </span>
                     </div>
@@ -190,31 +211,46 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
                 <>
                   <button
                     onClick={() => setIsLogoutOpen(true)}
-                    className="w-full flex items-center gap-3 px-3.5 py-3 rounded-2xl text-sm font-semibold transition-all duration-200 group relative text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 cursor-pointer"
+                    className="group relative flex w-full cursor-pointer items-center gap-3 rounded-2xl px-3.5 py-3 text-sm font-semibold text-rose-600 transition-all duration-200 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/30"
                   >
-                    <div className="w-8 h-8 rounded-xl flex items-center justify-center transition-colors bg-rose-100 dark:bg-rose-900/40 text-rose-500 group-hover:bg-rose-200 dark:group-hover:bg-rose-800/60">
-                      <X className="w-4 h-4" />
+                    <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-rose-100 text-rose-500 transition-colors group-hover:bg-rose-200 dark:bg-rose-900/40 dark:group-hover:bg-rose-800/60">
+                      <X className="h-4 w-4" />
                     </div>
-                    <div className="flex flex-col min-w-0 text-left">
+                    <div className="flex min-w-0 flex-col text-left">
                       <span className="leading-tight">Logout</span>
-                      <span className="text-[10px] font-normal truncate mt-0.5 text-rose-400/80">Keluar dari akun</span>
+                      <span className="mt-0.5 truncate text-[10px] font-normal text-rose-400/80">
+                        Keluar dari akun
+                      </span>
                     </div>
                   </button>
 
                   <Dialog open={isLogoutOpen} onOpenChange={setIsLogoutOpen}>
-                    <DialogContent className="sm:max-w-xs rounded-3xl p-0 overflow-hidden border-0">
+                    <DialogContent className="overflow-hidden rounded-3xl border-0 p-0 sm:max-w-xs">
                       <div className="px-6 pt-6 pb-2 text-center">
-                        <div className="w-12 h-12 rounded-full bg-rose-100 text-rose-600 flex items-center justify-center mx-auto mb-3">
-                          <X className="w-6 h-6" />
+                        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-rose-100 text-rose-600">
+                          <X className="h-6 w-6" />
                         </div>
-                        <DialogTitle className="text-xl font-black text-slate-800">Konfirmasi Logout</DialogTitle>
-                        <p className="text-xs text-slate-500 mt-2">
+                        <DialogTitle className="text-xl font-black text-slate-800">
+                          Konfirmasi Logout
+                        </DialogTitle>
+                        <p className="mt-2 text-xs text-slate-500">
                           Apakah Anda yakin ingin keluar dari akun ini?
                         </p>
                       </div>
-                      <div className="p-4 flex gap-3 bg-slate-50">
-                        <Button type="button" variant="outline" onClick={() => setIsLogoutOpen(false)} className="flex-1 h-11 rounded-xl">Batal</Button>
-                        <Button type="button" onClick={handleLogout} className="flex-1 h-11 rounded-xl bg-rose-600 hover:bg-rose-700 text-white font-bold cursor-pointer">
+                      <div className="flex gap-3 bg-slate-50 p-4">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={() => setIsLogoutOpen(false)}
+                          className="h-11 flex-1 rounded-xl"
+                        >
+                          Batal
+                        </Button>
+                        <Button
+                          type="button"
+                          onClick={handleLogout}
+                          className="h-11 flex-1 cursor-pointer rounded-xl bg-rose-600 font-bold text-white hover:bg-rose-700"
+                        >
                           Ya, Logout
                         </Button>
                       </div>
@@ -239,8 +275,8 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
           </p>
         </div> */}
         {/* Copyright */}
-        <div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800 text-center">
-          <p className="text-[10px] text-slate-400 font-medium">
+        <div className="mt-4 border-t border-slate-100 pt-4 text-center dark:border-slate-800">
+          <p className="text-[10px] font-medium text-slate-400">
             &copy; {new Date().getFullYear()} TitipIn - Sistem Titip Pesanan
           </p>
         </div>

src/components/SummaryGenerator.tsx

@@ -14,11 +14,14 @@ export function SummaryGenerator({ order }: { order: any }) {
   const itemCounts: Record<string, number> = {}
 
   order.submissions?.forEach((sub: any) => {
-    const itemStrings = sub.items.map((i: any) => `${i.name} ${i.qty}x`)
+    const itemStrings = sub.items.map(
+      (i: any) => `${i.name} ${i.qty}x${i.note ? ` (${i.note})` : ''}`
+    )
     summaryByPerson += `- ${sub.user?.name || 'Unknown'} : ${itemStrings.join(', ')}\n`
 
     sub.items.forEach((i: any) => {
-      itemCounts[i.name] = (itemCounts[i.name] || 0) + i.qty
+      const key = i.note ? `${i.name} (${i.note})` : i.name
+      itemCounts[key] = (itemCounts[key] || 0) + i.qty
     })
   })
 
@@ -42,16 +45,18 @@ export function SummaryGenerator({ order }: { order: any }) {
   return (
     <div className="space-y-6">
       <div className="px-1">
-        <h3 className="text-lg font-black text-slate-900 dark:text-white flex items-center gap-2">
-          <Receipt className="w-5 h-5 text-[#1B2CC1]" />
+        <h3 className="flex items-center gap-2 text-lg font-black text-slate-900 dark:text-white">
+          <Receipt className="h-5 w-5 text-[#1B2CC1]" />
           <span>Generator Rekap</span>
         </h3>
-        <p className="text-xs text-slate-500 mt-0.5">Salin format teks siap kirim ke WhatsApp / grup.</p>
+        <p className="mt-0.5 text-xs text-slate-500">
+          Salin format teks siap kirim ke WhatsApp / grup.
+        </p>
       </div>
 
       {/* Rekap Per Orang */}
-      <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
-        <div className="p-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/40">
+      <Card className="overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="flex items-center justify-between border-b border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/40">
           <span className="text-xs font-bold text-slate-800 dark:text-slate-200">
             Rekap per Orang
           </span>
@@ -59,22 +64,26 @@ export function SummaryGenerator({ order }: { order: any }) {
             variant="outline"
             size="sm"
             onClick={handleCopyPerson}
-            className="h-8 text-xs font-bold rounded-lg border-slate-200 gap-1.5 hover:bg-[#1B2CC1] hover:text-white transition-all"
+            className="h-8 gap-1.5 rounded-lg border-slate-200 text-xs font-bold transition-all hover:bg-[#1B2CC1] hover:text-white"
           >
-            {copiedPerson ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
+            {copiedPerson ? (
+              <Check className="h-3.5 w-3.5 text-emerald-500" />
+            ) : (
+              <Copy className="h-3.5 w-3.5" />
+            )}
             <span>{copiedPerson ? 'Tersalin!' : 'Copy Text'}</span>
           </Button>
         </div>
         <CardContent className="p-4">
-          <pre className="text-xs font-mono bg-slate-50 dark:bg-slate-800/80 p-3.5 rounded-xl overflow-x-auto whitespace-pre-wrap border border-slate-200/80 dark:border-slate-700 text-slate-700 dark:text-slate-300 leading-relaxed">
+          <pre className="overflow-x-auto rounded-xl border border-slate-200/80 bg-slate-50 p-3.5 font-mono text-xs leading-relaxed whitespace-pre-wrap text-slate-700 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-300">
             {summaryByPerson}
           </pre>
         </CardContent>
       </Card>
 
       {/* Rekap Per Item */}
-      <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
-        <div className="p-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/40">
+      <Card className="overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="flex items-center justify-between border-b border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/40">
           <span className="text-xs font-bold text-slate-800 dark:text-slate-200">
             Rekap per Item (Akumulasi)
           </span>
@@ -82,14 +91,18 @@ export function SummaryGenerator({ order }: { order: any }) {
             variant="outline"
             size="sm"
             onClick={handleCopyItem}
-            className="h-8 text-xs font-bold rounded-lg border-slate-200 gap-1.5 hover:bg-[#1B2CC1] hover:text-white transition-all"
+            className="h-8 gap-1.5 rounded-lg border-slate-200 text-xs font-bold transition-all hover:bg-[#1B2CC1] hover:text-white"
           >
-            {copiedItem ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
+            {copiedItem ? (
+              <Check className="h-3.5 w-3.5 text-emerald-500" />
+            ) : (
+              <Copy className="h-3.5 w-3.5" />
+            )}
             <span>{copiedItem ? 'Tersalin!' : 'Copy Text'}</span>
           </Button>
         </div>
         <CardContent className="p-4">
-          <pre className="text-xs font-mono bg-slate-50 dark:bg-slate-800/80 p-3.5 rounded-xl overflow-x-auto whitespace-pre-wrap border border-slate-200/80 dark:border-slate-700 text-slate-700 dark:text-slate-300 leading-relaxed">
+          <pre className="overflow-x-auto rounded-xl border border-slate-200/80 bg-slate-50 p-3.5 font-mono text-xs leading-relaxed whitespace-pre-wrap text-slate-700 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-300">
             {summaryByItem}
           </pre>
         </CardContent>

src/components/ui/badge.tsx

@@ -1,41 +1,38 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
         destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
 )
 
 function Badge({
   className,
-  variant = "default",
+  variant = 'default',
   render,
   ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
   return useRender({
-    defaultTagName: "span",
-    props: mergeProps<"span">(
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
       {
         className: cn(badgeVariants({ variant }), className),
       },
@@ -43,7 +40,7 @@ function Badge({
     ),
     render,
     state: {
-      slot: "badge",
+      slot: 'badge',
       variant,
     },
   })

src/components/ui/button.tsx

@@ -1,49 +1,49 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
   "cursor-pointer group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
         ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
         destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
         xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs":
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-8',
+        'icon-xs':
           "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
 )
 
 function Button({
   className,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   ...props
 }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
   return (

src/components/ui/calendar.tsx

@@ -1,29 +1,24 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-  type Locale,
-} from "react-day-picker"
+import * as React from 'react'
+import { DayPicker, getDefaultClassNames, type DayButton, type Locale } from 'react-day-picker'
 
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react'
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
   locale,
   formatters,
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
 }) {
   const defaultClassNames = getDefaultClassNames()
 
@@ -31,7 +26,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -39,131 +34,100 @@ function Calendar({
       captionLayout={captionLayout}
       locale={locale}
       formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString(locale?.code, { month: "short" }),
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
         ...formatters,
       }}
       classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
+        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
         nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
           defaultClassNames.dropdowns
         ),
-        dropdown_root: cn(
-          "relative rounded-(--cell-radius)",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute inset-0 bg-popover opacity-0",
-          defaultClassNames.dropdown
-        ),
+        dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),
+        dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
         caption_label: cn(
-          "font-medium select-none",
-          captionLayout === "label"
-            ? "text-sm"
-            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          'font-medium select-none',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
           defaultClassNames.caption_label
         ),
-        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
-        weekdays: cn("flex", defaultClassNames.weekdays),
+        month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
+        weekdays: cn('flex', defaultClassNames.weekdays),
         weekday: cn(
-          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
           defaultClassNames.weekday
         ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
-        ),
+        week: cn('mt-2 flex w-full', defaultClassNames.week),
+        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
         week_number: cn(
-          "text-[0.8rem] text-muted-foreground select-none",
+          'text-[0.8rem] text-muted-foreground select-none',
           defaultClassNames.week_number
         ),
         day: cn(
-          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
           props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
+            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
           defaultClassNames.day
         ),
         range_start: cn(
-          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
           defaultClassNames.range_start
         ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
         range_end: cn(
-          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
           defaultClassNames.range_end
         ),
         today: cn(
-          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',
           defaultClassNames.today
         ),
         outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
+          'text-muted-foreground aria-selected:text-muted-foreground',
           defaultClassNames.outside
         ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
+        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+        hidden: cn('invisible', defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
         Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />
         },
         Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+          if (orientation === 'left') {
+            return <ChevronLeftIcon className={cn('size-4', className)} {...props} />
           }
 
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon className={cn("size-4", className)} {...props} />
-            )
+          if (orientation === 'right') {
+            return <ChevronRightIcon className={cn('size-4', className)} {...props} />
           }
 
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          return <ChevronDownIcon className={cn('size-4', className)} {...props} />
         },
-        DayButton: ({ ...props }) => (
-          <CalendarDayButton locale={locale} {...props} />
-        ),
+        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>
@@ -209,7 +173,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        'group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
         defaultClassNames.day,
         className
       )}

src/components/ui/card.tsx

@@ -1,18 +1,18 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 function Card({
   className,
-  size = "default",
+  size = 'default',
   ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
   return (
     <div
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        'group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
         className
       )}
       {...props}
@@ -20,12 +20,12 @@ function Card({
   )
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
         className
       )}
       {...props}
@@ -33,12 +33,12 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-title"
       className={cn(
-        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        'font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
         className
       )}
       {...props}
@@ -46,45 +46,38 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   )
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
       {...props}
     />
   )
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="card-content"
-      className={cn("px-(--card-spacing)", className)}
-      {...props}
-    />
+    <div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
   )
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        'bg-muted/50 flex items-center rounded-b-xl border-t p-(--card-spacing)',
         className
       )}
       {...props}
@@ -92,12 +85,4 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }

src/components/ui/checkbox.tsx

@@ -1,16 +1,16 @@
-"use client"
+'use client'
 
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
 
-import { cn } from "@/lib/utils"
-import { CheckIcon } from "lucide-react"
+import { cn } from '@/lib/utils'
+import { CheckIcon } from 'lucide-react'
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        'peer border-input group-has-[:focus-visible]/field-label:not-data-checked:border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
         className
       )}
       {...props}
@@ -19,8 +19,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <CheckIcon
-        />
+        <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

src/components/ui/dialog.tsx

@@ -1,11 +1,11 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import * as React from 'react'
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { XIcon } from 'lucide-react'
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
@@ -23,15 +23,12 @@ function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: DialogPrimitive.Backdrop.Props) {
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
   return (
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
         className
       )}
       {...props}
@@ -55,7 +52,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          'bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm',
           className
         )}
         {...props}
@@ -68,14 +65,15 @@ function DialogContent({
               <Button
                 variant="ghost"
                 className={cn(
-                  "absolute top-3 right-3 rounded-full transition-all z-10",
-                  closeClassName || "text-slate-500 hover:text-slate-900 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-slate-100 dark:hover:bg-slate-800"
+                  'absolute top-3 right-3 z-10 rounded-full transition-all',
+                  closeClassName ||
+                    'text-slate-500 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100'
                 )}
                 size="icon-sm"
               />
             }
           >
-            <XIcon className="w-4 h-4" />
+            <XIcon className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
@@ -84,13 +82,9 @@ function DialogContent({
   )
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
+    <div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
   )
 }
 
@@ -99,23 +93,21 @@ function DialogFooter({
   showCloseButton = false,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentProps<'div'> & {
   showCloseButton?: boolean
 }) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end',
         className
       )}
       {...props}
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close render={<Button variant="outline" />}>
-          Close
-        </DialogPrimitive.Close>
+        <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
       )}
     </div>
   )
@@ -125,24 +117,18 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
-        "font-heading text-base leading-none font-medium",
-        className
-      )}
+      className={cn('font-heading text-base leading-none font-medium', className)}
       {...props}
     />
   )
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: DialogPrimitive.Description.Props) {
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
         className
       )}
       {...props}

src/components/ui/input.tsx

@@ -1,15 +1,15 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
+import * as React from 'react'
+import { Input as InputPrimitive } from '@base-ui/react/input'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (
     <InputPrimitive
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
         className
       )}
       {...props}

src/components/ui/label.tsx

@@ -1,15 +1,15 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-function Label({ className, ...props }: React.ComponentProps<"label">) {
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
   return (
     <label
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
       {...props}

src/components/ui/popover.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import * as React from 'react'
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />
@@ -15,16 +15,13 @@ function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
 
 function PopoverContent({
   className,
-  align = "center",
+  align = 'center',
   alignOffset = 0,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
   ...props
 }: PopoverPrimitive.Popup.Props &
-  Pick<
-    PopoverPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
@@ -37,7 +34,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100',
             className
           )}
           {...props}
@@ -47,11 +44,11 @@ function PopoverContent({
   )
 }
 
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="popover-header"
-      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      className={cn('flex flex-col gap-0.5 text-sm', className)}
       {...props}
     />
   )
@@ -61,30 +58,20 @@ function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
   return (
     <PopoverPrimitive.Title
       data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn('font-medium', className)}
       {...props}
     />
   )
 }
 
-function PopoverDescription({
-  className,
-  ...props
-}: PopoverPrimitive.Description.Props) {
+function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
   return (
     <PopoverPrimitive.Description
       data-slot="popover-description"
-      className={cn("text-muted-foreground", className)}
+      className={cn('text-muted-foreground', className)}
       {...props}
     />
   )
 }
 
-export {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger }

src/components/ui/select.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import { Select as SelectPrimitive } from "@base-ui/react/select"
+import * as React from 'react'
+import { Select as SelectPrimitive } from '@base-ui/react/select'
 
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+import { cn } from '@/lib/utils'
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react'
 
 const Select = SelectPrimitive.Root
 
@@ -12,7 +12,7 @@ function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
     <SelectPrimitive.Group
       data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
+      className={cn('scroll-my-1 p-1', className)}
       {...props}
     />
   )
@@ -22,7 +22,7 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
   return (
     <SelectPrimitive.Value
       data-slot="select-value"
-      className={cn("flex flex-1 text-left", className)}
+      className={cn('flex flex-1 text-left', className)}
       {...props}
     />
   )
@@ -30,27 +30,25 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
 
 function SelectTrigger({
   className,
-  size = "default",
+  size = 'default',
   children,
   ...props
 }: SelectPrimitive.Trigger.Props & {
-  size?: "sm" | "default"
+  size?: 'sm' | 'default'
 }) {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon
-        render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-        }
+        render={<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />}
       />
     </SelectPrimitive.Trigger>
   )
@@ -59,16 +57,16 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
-  align = "center",
+  align = 'center',
   alignOffset = 0,
   alignItemWithTrigger = true,
   ...props
 }: SelectPrimitive.Popup.Props &
   Pick<
     SelectPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
   >) {
   return (
     <SelectPrimitive.Portal>
@@ -83,7 +81,10 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn(
+            'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none',
+            className
+          )}
           {...props}
         >
           <SelectScrollUpButton />
@@ -95,29 +96,22 @@ function SelectContent({
   )
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectPrimitive.GroupLabel.Props) {
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      className={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
       {...props}
     />
   )
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectPrimitive.Item.Props) {
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -136,14 +130,11 @@ function SelectItem({
   )
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: SelectPrimitive.Separator.Props) {
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
       {...props}
     />
   )
@@ -157,13 +148,12 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
       className={cn(
-        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
-      <ChevronUpIcon
-      />
+      <ChevronUpIcon />
     </SelectPrimitive.ScrollUpArrow>
   )
 }
@@ -176,13 +166,12 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
       className={cn(
-        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
-      <ChevronDownIcon
-      />
+      <ChevronDownIcon />
     </SelectPrimitive.ScrollDownArrow>
   )
 }

src/components/ui/sonner.tsx

@@ -1,48 +1,47 @@
-"use client"
+'use client'
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from 'lucide-react'
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = 'system' } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme as ToasterProps['theme']}
       className="toaster group"
       icons={{
-        success: (
-          <CircleCheckIcon className="size-4" />
-        ),
-        info: (
-          <InfoIcon className="size-4" />
-        ),
-        warning: (
-          <TriangleAlertIcon className="size-4" />
-        ),
-        error: (
-          <OctagonXIcon className="size-4" />
-        ),
-        loading: (
-          <Loader2Icon className="size-4 animate-spin" />
-        ),
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
       style={
         {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
         } as React.CSSProperties
       }
       toastOptions={{
         classNames: {
-          toast: "cn-toast group-[.toaster]:bg-white dark:group-[.toaster]:bg-slate-950 group-[.toaster]:text-slate-950 dark:group-[.toaster]:text-slate-50 group-[.toaster]:border-slate-200 dark:group-[.toaster]:border-slate-800",
-          title: "font-bold",
-          description: "!text-slate-700 dark:!text-slate-300",
-          success: "group-[.toaster]:border-emerald-500 group-[.toaster]:bg-emerald-50 dark:group-[.toaster]:bg-emerald-950/50 group-[.toaster]:text-emerald-900 dark:group-[.toaster]:text-emerald-100 [&_svg]:text-emerald-600 dark:[&_svg]:text-emerald-400 [&_[data-description]]:!text-emerald-700 dark:[&_[data-description]]:!text-emerald-300",
-          error: "group-[.toaster]:border-red-500 group-[.toaster]:bg-red-50 dark:group-[.toaster]:bg-red-950/50 group-[.toaster]:text-red-900 dark:group-[.toaster]:text-red-100 [&_svg]:text-red-600 dark:[&_svg]:text-red-400 [&_[data-description]]:!text-red-700 dark:[&_[data-description]]:!text-red-300",
+          toast:
+            'cn-toast group-[.toaster]:bg-white dark:group-[.toaster]:bg-slate-950 group-[.toaster]:text-slate-950 dark:group-[.toaster]:text-slate-50 group-[.toaster]:border-slate-200 dark:group-[.toaster]:border-slate-800',
+          title: 'font-bold',
+          description: '!text-slate-700 dark:!text-slate-300',
+          success:
+            'group-[.toaster]:border-emerald-500 group-[.toaster]:bg-emerald-50 dark:group-[.toaster]:bg-emerald-950/50 group-[.toaster]:text-emerald-900 dark:group-[.toaster]:text-emerald-100 [&_svg]:text-emerald-600 dark:[&_svg]:text-emerald-400 [&_[data-description]]:!text-emerald-700 dark:[&_[data-description]]:!text-emerald-300',
+          error:
+            'group-[.toaster]:border-red-500 group-[.toaster]:bg-red-50 dark:group-[.toaster]:bg-red-950/50 group-[.toaster]:text-red-900 dark:group-[.toaster]:text-red-100 [&_svg]:text-red-600 dark:[&_svg]:text-red-400 [&_[data-description]]:!text-red-700 dark:[&_[data-description]]:!text-red-300',
         },
       }}
       {...props}

src/components/ui/table.tsx

@@ -1,63 +1,51 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn('w-full caption-bottom text-sm', className)}
         {...props}
       />
     </div>
   )
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
 }
 
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
   return (
     <tbody
       data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
+      className={cn('[&_tr:last-child]:border-0', className)}
       {...props}
     />
   )
 }
 
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-        className
-      )}
+      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
       {...props}
     />
   )
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
   return (
     <tr
       data-slot="table-row"
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        'hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
         className
       )}
       {...props}
@@ -65,12 +53,12 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
   )
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
   return (
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
         className
       )}
       {...props}
@@ -78,39 +66,24 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
   )
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
   return (
     <td
       data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
-        className
-      )}
+      className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
       {...props}
     />
   )
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
   return (
     <caption
       data-slot="table-caption"
-      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
       {...props}
     />
   )
 }
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

src/components/ui/textarea.tsx

@@ -1,12 +1,12 @@
-import * as React from "react"
-import { cn } from "cn"
+import * as React from 'react'
+import { cn } from 'cn'
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
         className
       )}
       {...props}

src/lib/auth.ts

@@ -14,10 +14,7 @@ export async function verifyPassword(password: string, hash: string) {
 }
 
 export async function encrypt(payload: any) {
-  return await new SignJWT(payload)
-    .setProtectedHeader({ alg: 'HS256' })
-    .setIssuedAt()
-    .sign(key) // No expiration as requested
+  return await new SignJWT(payload).setProtectedHeader({ alg: 'HS256' }).setIssuedAt().sign(key) // No expiration as requested
 }
 
 export async function decrypt(input: string): Promise<any> {

src/lib/prisma.ts

@@ -5,8 +5,8 @@ const prismaClientSingleton = () => {
 }
 
 declare const globalThis: {
-  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
-} & typeof global;
+  prismaGlobal: ReturnType<typeof prismaClientSingleton>
+} & typeof global
 
 const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
 

src/lib/utils.ts

@@ -1,5 +1,5 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))