firmanr/titipin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

style: apply consistent code formatting across project files

Browse Source
This commit is contained in:
Firman Ramdhani
2026-09-16 13:14:02 +07:00
parent d5791e759e
commit 51d05653c6
48 changed files with 3585 additions and 2575 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ReportCharts.tsx
+57 -27
View File
@@ -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'
import {
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
CartesianGrid,
Cell,
} from 'recharts'
export default function ReportCharts({ type, data }: { type: 'SUBMITTOR' | 'CREATOR', data: any[] }) {
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,32 +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 => {
.map((sub) => {
const bill = sub.bill || 0
const paid = (sub.paid_amount ?? (sub.payment_status === 'LUNAS' ? bill : 0)) + (sub.saldo_used || 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,
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'
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,
}
})
}
@@ -47,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>
)
@@ -59,18 +83,24 @@ export default function ReportCharts({ type, data }: { type: 'SUBMITTOR' | 'CREA
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">{data.fullTitle}</p>
<p className="text-sm font-black text-[#1B2CC1]">
Total: {formatRupiah(data.Total)}
<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-sm font-black text-[#1B2CC1]">Total: {formatRupiah(data.Total)}</p>
{type === 'SUBMITTOR' && (
<>
<p className="text-[11px] text-emerald-600 font-bold mt-1">Dibayar: {formatRupiah(data.Paid)}</p>
{data.Unpaid > 0 && <p className="text-[11px] text-rose-600 font-bold">Kurang: {formatRupiah(data.Unpaid)}</p>}
<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="text-[10px] text-slate-500 mt-1 uppercase font-bold tracking-wider">
<p className="mt-1 text-[10px] font-bold tracking-wider text-slate-500 uppercase">
Status: {data.status}
</p>
</div>
@@ -80,24 +110,24 @@ 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" />
<XAxis
dataKey="name"
<XAxis
dataKey="name"
axisLine={false}
tickLine={false}
tick={{ fontSize: 10, fill: '#64748b' }}
dy={10}
/>
<YAxis
<YAxis
axisLine={false}
tickLine={false}
tick={{ fontSize: 10, fill: '#64748b' }}