style: apply consistent code formatting across project files

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

@@ -10,10 +10,14 @@ 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()
-  
+
   if (!session) {
     redirect(`/login?callbackUrl=/order/${id}`)
   }
@@ -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 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 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 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>
             )}
@@ -74,46 +89,54 @@ 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">
+      <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-3">
         {/* Left 2 Cols: Daftar Penitip & Description */}
-        <div className="lg:col-span-2 space-y-6">
+        <div className="space-y-6 lg:col-span-2">
           {order.description && (
-            <div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200/60 dark:border-slate-800 shadow-sm overflow-hidden p-5 sm:p-6">
-              <h3 className="font-bold text-slate-900 dark:text-white mb-3">Deskripsi</h3>
-              <div className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed whitespace-pre-wrap">
+            <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="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="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>
@@ -122,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 ${
-                              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'
+                          <span
+                            key={item.id}
+                            className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium ${
+                              item.is_custom
+                                ? '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.note && <span className="italic ml-0.5 opacity-70">({item.note})</span>}
+                            {item.qty}x {item.name}{' '}
+                            {item.note && (
+                              <span className="ml-0.5 italic opacity-70">({item.note})</span>
+                            )}
                           </span>
                         ))}
                       </div>
@@ -152,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>