feat: implement reports page with analytical charts and data grids, and add payment status tracking to submissions.

2026-08-28 14:14:58 +07:00
parent 5faea68379
commit 3e68d12ce4
20 changed files with 6381 additions and 34 deletions
@@ -62,7 +62,7 @@ export async function getMyOrders(creator_id: string) {
    where: { creator_id },
    include: {
      available_items: true,
-      submissions: { select: { id: true } }
+      submissions: { select: { id: true, payment_status: true } }
    },
    orderBy: { date: 'desc' }
  })
@@ -222,12 +222,28 @@ export async function updateSubmissionPayment(submission_id: string, bill: numbe
    })
    revalidatePath(`/my-orders`)
    revalidatePath(`/my-purchases`)
+    revalidatePath(`/reports`)
    return { success: true }
  } catch (e) {
    return { success: false, error: 'Gagal menyimpan tagihan.' }
  }
 }

+export async function updateBulkSubmissionPayment(submission_ids: string[], payment_status: string) {
+  try {
+    await prisma.submission.updateMany({
+      where: { id: { in: submission_ids } },
+      data: { payment_status }
+    })
+    revalidatePath(`/my-orders`)
+    revalidatePath(`/my-purchases`)
+    revalidatePath(`/reports`)
+    return { success: true }
+  } catch (e) {
+    return { success: false, error: 'Gagal mengubah status tagihan massal.' }
+  }
+}
+
 // === SUBMISSION (PESANAN SAYA) ===
 export async function getUserSubmission(order_id: string, user_id: string) {
  return await prisma.submission.findFirst({
@@ -300,3 +316,44 @@ export async function submitOrder(data: {
    return { success: false, error: 'Gagal mengirim pesanan.' }
  }
 }
+
+// === REPORT ACTIONS ===
+export async function getSubmittorReport(user_id: string, startDate?: Date, endDate?: Date) {
+  return await prisma.submission.findMany({
+    where: {
+      user_id,
+      order: {
+        status: 'CLOSE',
+        ...(startDate && endDate ? { date: { gte: startDate, lte: endDate } } : {})
+      }
+    },
+    include: {
+      order: {
+        include: { creator: true }
+      },
+      items: true
+    },
+    orderBy: {
+      order: { date: 'desc' }
+    }
+  })
+}
+
+export async function getCreatorReport(creator_id: string, startDate?: Date, endDate?: Date) {
+  return await prisma.order.findMany({
+    where: {
+      creator_id,
+      status: 'CLOSE',
+      ...(startDate && endDate ? { date: { gte: startDate, lte: endDate } } : {})
+    },
+    include: {
+      submissions: {
+        include: {
+          user: true,
+          items: true
+        }
+      }
+    },
+    orderBy: { date: 'desc' }
+  })
+}
@@ -0,0 +1,46 @@
+import { ImageResponse } from 'next/og'
+
+export const size = {
+  width: 32,
+  height: 32,
+}
+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',
+        }}
+      >
+        <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>
+    ),
+    {
+      ...size,
+    }
+  )
+}
@@ -325,6 +325,16 @@ export default function MyOrdersPage() {
                      <span className="text-xs font-bold text-slate-700 dark:text-slate-300">
                        {order.submissions.length} Orang Menitip
                      </span>
+                      {isClosed && order.submissions.length > 0 && (
+                        <div className="flex items-center gap-1.5 ml-1 sm:ml-2 sm:border-l border-slate-200 dark:border-slate-700 sm:pl-3">
+                          <span className="text-[10px] font-black text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/50 px-1.5 py-0.5 rounded">
+                            Lunas: {order.submissions.filter((s: any) => s.payment_status === 'LUNAS').length}
+                          </span>
+                          <span className="text-[10px] font-black text-rose-700 dark:text-rose-400 bg-rose-50 dark:bg-rose-950/50 px-1.5 py-0.5 rounded">
+                            Belum: {order.submissions.filter((s: any) => s.payment_status !== 'LUNAS').length}
+                          </span>
+                        </div>
+                      )}
                    </div>
                    
                    <div className="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600 hidden sm:block"></div>
@@ -505,7 +515,7 @@ export default function MyOrdersPage() {
 function CreateOrderModal({ userId, onSuccess, initialData }: { userId: string, onSuccess: () => void, initialData?: any }) {
  const [title, setTitle] = useState(initialData ? `${initialData.title} (Copy)` : '')
  const [allowCustom, setAllowCustom] = useState(initialData ? initialData.allow_custom : false)
-  const [items, setItems] = useState(
+  const [items, setItems] = useState<{ id: string; name: string }[]>(
    initialData && initialData.available_items?.length > 0
      ? initialData.available_items.map((ai: any) => ({ id: Math.random().toString(), name: ai.name }))
      : [{ id: '1', name: '' }]
@@ -514,8 +524,8 @@ function CreateOrderModal({ userId, onSuccess, initialData }: { userId: string,
  const [error, setError] = useState('')

  const addItem = () => setItems([...items, { id: Math.random().toString(), name: '' }])
-  const removeItem = (id: string) => setItems(items.filter(i => i.id !== id))
-  const updateItem = (id: string, name: string) => setItems(items.map(i => i.id === id ? { ...i, name } : i))
+  const removeItem = (id: string) => setItems(items.filter((i: { id: string; name: string }) => i.id !== id))
+  const updateItem = (id: string, name: string) => setItems(items.map((i: { id: string; name: string }) => i.id === id ? { ...i, name } : i))

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
@@ -523,7 +533,7 @@ function CreateOrderModal({ userId, onSuccess, initialData }: { userId: string,
    
    if (!title.trim()) return setError('Judul PO wajib diisi.')
    
-    const validItems = items.filter(i => i.name.trim()).map(i => i.name.trim())
+    const validItems = items.filter((i: { id: string; name: string }) => i.name.trim()).map((i: { id: string; name: string }) => i.name.trim())
    if (!allowCustom && validItems.length === 0) {
      return setError('Wajib menambahkan minimal 1 menu pilihan jika tidak mengizinkan custom item.')
    }
@@ -611,7 +621,7 @@ function CreateOrderModal({ userId, onSuccess, initialData }: { userId: string,
          </div>

          <div className="space-y-2.5">
-            {items.map((item, index) => (
+            {items.map((item: { id: string; name: string }, index: number) => (
              <div key={item.id} className="flex gap-2 items-center p-2 rounded-xl border border-slate-200/90 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30">
                <span className="text-xs font-bold text-slate-400 w-5 text-center">{index + 1}.</span>
                <Input 
@@ -173,7 +173,7 @@ export default function MyPurchasesPage() {
        </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="space-y-4 max-h-[calc(100vh-260px)] overflow-y-auto pr-2 scrollbar-thin pb-4">
            {paginatedPurchases.map((sub) => {
            const date = new Date(sub.order.date)
            const isOrderOpen = sub.order.status === 'OPEN'
@@ -181,16 +181,15 @@ export default function MyPurchasesPage() {
            return (
              <div 
                key={sub.id} 
-                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-md hover:border-[#1B2CC1]/40 transition-all overflow-hidden items-start md:items-stretch"
+                className="flex flex-col md:flex-row rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md hover:border-[#1B2CC1]/40 transition-all overflow-hidden divide-y md:divide-y-0 md:divide-x divide-slate-100 dark:divide-slate-800/80"
              >
                {/* Left: Info */}
-                <div className="flex-1 p-5 md:border-r border-slate-100 dark:border-slate-800/80 flex flex-col justify-center">
-                  <div className="flex justify-between items-start gap-4 mb-3">
-                    <h3 className="text-xl font-bold text-slate-900 dark:text-white line-clamp-2 flex-1 min-w-0 leading-snug">
+                <div className="w-full md:flex-1 p-4 md:p-5 flex flex-col">
+                  <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-4">
+                    <h3 className="text-xl font-bold text-slate-900 dark:text-white line-clamp-2 min-w-0 leading-snug">
                      {sub.order.title}
                    </h3>
-                    <div className="flex flex-col sm:flex-row items-end sm:items-center gap-2 shrink-0">
-                      <span className="text-[11px] text-slate-400 font-semibold bg-slate-100/80 dark:bg-slate-800 px-2.5 py-1 rounded-full whitespace-nowrap">
+                    <span className="text-[11px] text-slate-400 font-semibold bg-slate-100/80 dark:bg-slate-800 px-2.5 py-1 rounded-full whitespace-nowrap">
                        {format(date, 'EEEE, dd MMM yyyy', { locale: idLocale })}
                      </span>
                      <span className={cn(
@@ -203,7 +202,6 @@ export default function MyPurchasesPage() {
                      )}>
                        ● PO {sub.order.status}
                      </span>
-                    </div>
                  </div>

                  <div className="flex items-center gap-2.5 pt-3 border-t border-slate-100 dark:border-slate-800/60">
@@ -228,8 +226,8 @@ export default function MyPurchasesPage() {
                </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">
-                  <div className="flex items-center justify-between mb-2 border-t md:border-t-0 pt-4 md:pt-0 border-slate-100 dark:border-slate-800/60">
+                <div className="w-full md:w-64 p-4 md:p-5 flex flex-col">
+                  <div className="flex items-center justify-between mb-3">
                    <span className="text-[11px] font-bold uppercase tracking-wider text-slate-400 block">
                      Pesanan Anda ({sub.items.reduce((acc: number, curr: any) => acc + curr.qty, 0)} item)
                    </span>
@@ -255,7 +253,7 @@ export default function MyPurchasesPage() {
                </div>

                {/* Right: Actions & Billing */}
-                <div className="w-full md:w-56 p-5 bg-slate-50/60 dark:bg-slate-800/40 flex flex-col justify-center gap-3 mt-auto md:mt-0">
+                <div className="w-full md:w-56 p-4 md:p-5 bg-slate-50/50 dark:bg-slate-800/20 flex flex-col justify-center gap-3">
                  <div className="flex flex-col gap-1 mb-1">
                    <div className="flex items-center justify-between gap-2">
                      <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
@@ -0,0 +1,292 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { getCreatorReport, getSubmittorReport } from '@/app/actions'
+import { Card } from '@/components/ui/card'
+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
+} from 'date-fns'
+
+// ── Helpers ──────────────────────────────────────────────
+function getWeekValue(date: Date) {
+  const y = getYear(date)
+  const w = getISOWeek(date)
+  return `${y}-W${w.toString().padStart(2, '0')}`
+}
+
+function getMonthValue(date: Date) {
+  const y = date.getFullYear()
+  const m = date.getMonth() + 1
+  return `${y}-${m.toString().padStart(2, '0')}`
+}
+
+function getIntervalFromFilter(type: 'WEEK' | 'MONTH', value: string): { start: Date; end: Date } | null {
+  if (!value) return null
+
+  if (type === 'WEEK') {
+    const match = value.match(/^(\d{4})-W(\d{2})$/)
+    if (!match) return null
+    const year = parseInt(match[1])
+    const week = parseInt(match[2])
+    // Use Jan 4 of the year as anchor (always in ISO week 1), then shift to target week
+    const anchor = new Date(year, 0, 4)
+    const withWeek = setISOWeek(anchor, week)
+    const withYear = dfSetYear(withWeek, year)
+    return { start: startOfISOWeek(withYear), end: endOfISOWeek(withYear) }
+  } else {
+    const match = value.match(/^(\d{4})-(\d{2})$/)
+    if (!match) return null
+    const d = new Date(parseInt(match[1]), parseInt(match[2]) - 1, 1)
+    return { start: startOfMonth(d), end: endOfMonth(d) }
+  }
+}
+
+export default function ReportsPage() {
+  const [activeTab, setActiveTab] = useState<'SUBMITTOR' | 'CREATOR'>('SUBMITTOR')
+  const [creatorTab, setCreatorTab] = useState<'BY_ORDER' | 'BY_PERSON'>('BY_ORDER')
+
+  const [filterType, setFilterType] = useState<'WEEK' | 'MONTH'>('WEEK')
+  const [filterValue, setFilterValue] = useState<string>(getWeekValue(new Date()))
+
+  const pickerRef = useRef<HTMLInputElement>(null)
+  const [userId, setUserId] = useState<string | null>(null)
+  const [submittorData, setSubmittorData] = useState<any[]>([])
+  const [creatorData, setCreatorData] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+
+  // Initial load: get userId
+  useEffect(() => {
+    const id = localStorage.getItem('user_id')
+    if (id) setUserId(id)
+  }, [])
+
+  // Re-fetch every time userId, filterType, or filterValue changes
+  useEffect(() => {
+    if (!userId) return
+    loadData(userId)
+  }, [userId, filterType, filterValue])
+
+  const loadData = async (id: string) => {
+    setLoading(true)
+    const interval = getIntervalFromFilter(filterType, filterValue)
+    const [subRes, creRes] = await Promise.all([
+      getSubmittorReport(id, interval?.start, interval?.end),
+      getCreatorReport(id, interval?.start, interval?.end)
+    ])
+    setSubmittorData(subRes)
+    setCreatorData(creRes)
+    setLoading(false)
+  }
+
+  const handleFilterTypeChange = (newType: 'WEEK' | 'MONTH') => {
+    setFilterType(newType)
+    setFilterValue(newType === 'WEEK' ? getWeekValue(new Date()) : getMonthValue(new Date()))
+  }
+
+  const formatRupiah = (n: number) =>
+    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)
+
+  let totalOmzet = 0
+  let totalPiutang = 0
+  creatorData.forEach(order => {
+    order.submissions.forEach((sub: any) => {
+      totalOmzet += Number(sub.bill) || 0
+      if (sub.payment_status !== 'LUNAS') totalPiutang += Number(sub.bill) || 0
+    })
+  })
+
+  const filterLabel = filterType === 'WEEK' ? `Minggu ${filterValue}` : `Bulan ${filterValue}`
+
+  return (
+    <div className="space-y-6 animate-in fade-in duration-500 pb-12">
+
+      {/* ── 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">
+
+        {/* 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">
+          <button
+            onClick={() => setActiveTab('SUBMITTOR')}
+            className={cn(
+              'px-5 py-2 rounded-lg transition-all duration-300 flex items-center justify-center gap-2',
+              activeTab === 'SUBMITTOR'
+                ? 'bg-white dark:bg-slate-900 text-[#1B2CC1] dark:text-white shadow-sm font-black'
+                : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
+            )}
+          >
+            <TrendingDown className="w-4 h-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',
+              activeTab === 'CREATOR'
+                ? 'bg-white dark:bg-slate-900 text-[#1B2CC1] dark:text-white shadow-sm font-black'
+                : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
+            )}
+          >
+            <TrendingUp className="w-4 h-4" /> Omzet (Kreator)
+          </button>
+        </div>
+
+        {/* Filter Controls */}
+        <div className="flex items-center gap-2 flex-wrap">
+          {/* 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 => (
+              <button
+                key={t}
+                onClick={() => handleFilterTypeChange(t)}
+                className={cn(
+                  'px-3 py-1.5 rounded-lg text-xs font-bold transition-all',
+                  filterType === t
+                    ? 'bg-white dark:bg-slate-700 text-[#1B2CC1] shadow-sm'
+                    : 'text-slate-500 hover:text-slate-800 dark:hover:text-slate-200'
+                )}
+              >
+                {t === 'WEEK' ? 'Mingguan' : 'Bulanan'}
+              </button>
+            ))}
+          </div>
+
+          {/* 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"
+          >
+            <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"
+            />
+            <CalendarIcon className="w-4 h-4 text-slate-400 shrink-0" />
+          </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]" />
+          <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">
+            <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>
+                <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>
+                  <p className="text-xs text-emerald-100">
+                    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>
+                <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>
+                  <p className="text-xs text-rose-100">
+                    {submittorData.filter(s => s.payment_status !== 'LUNAS').length} tagihan masih gantung.
+                  </p>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          <ReportCharts type="SUBMITTOR" data={submittorData} />
+          <ReportDataGrid type="SUBMITTOR" data={submittorData} />
+        </div>
+      )}
+
+      {/* ── 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">
+            <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>
+                <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>
+                </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>
+                <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>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          <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_ORDER', 'BY_PERSON'] 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',
+                  creatorTab === tab
+                    ? 'bg-white dark:bg-slate-900 text-[#1B2CC1] dark:text-white shadow-sm font-black'
+                    : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
+                )}
+              >
+                {tab === 'BY_ORDER' ? 'Berdasarkan PO' : 'Berdasarkan Orang'}
+              </button>
+            ))}
+          </div>
+
+          {creatorTab === 'BY_ORDER' ? (
+            <ReportDataGrid type="CREATOR" data={creatorData} />
+          ) : (
+            <ReportByPersonGrid
+              data={creatorData}
+              onUpdate={() => { if (userId) loadData(userId) }}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}