7feb53ee20
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m24s
Tham khảo NAMGROUP density conventions, GIỮ brand #1F7DC1 + Be Vietnam Pro. - index.css: density heading ladder (semibold, drop font-bold) + .label-eyebrow util - 6 UI primitives (Button/Input/Label/Select/Textarea/Dialog): text-xs font-semibold, py-1.5 ≤36px, rounded-lg, brand focus-ring - 6 shell (DataTable sticky-thead+RowActions/Layout brand-rail/TopBar/PageHeader/PhaseBadge/EmptyState) - DashboardPage flagship: KPI cards + brand-tinted icon chips + uppercase labels Visual-only — functionality unchanged (Button variant/size keys stable 51 call-sites, props/forwardRef intact). build 0 TS err. reviewer PASS 0 blocker (2 minor slate-400 hint a11y defer). fe-admin only (fe-user mirror = Phase 3). Dashboard live-visual blocked by dev auth-rig → xem live sau deploy. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
240 lines
11 KiB
TypeScript
240 lines
11 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import { FileText, CheckCircle2, AlertTriangle, TrendingUp, Coins, Pencil, Clock, Inbox } from 'lucide-react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { PageHeader } from '@/components/PageHeader'
|
|
import { BarChart } from '@/components/BarChart'
|
|
import { PhaseBadge } from '@/components/PhaseBadge'
|
|
import { useAuth } from '@/contexts/AuthContext'
|
|
import { api } from '@/lib/api'
|
|
import { cn } from '@/lib/cn'
|
|
import type { DashboardStats } from '@/types/reports'
|
|
|
|
type MyDashboard = {
|
|
draftsInProgress: number
|
|
pendingMyApproval: number
|
|
dueSoon: number
|
|
overdue: number
|
|
draftsTotalValue: number
|
|
}
|
|
|
|
const fmtMoney = (v: number) => {
|
|
if (v >= 1_000_000_000) return (v / 1_000_000_000).toFixed(1) + ' tỷ'
|
|
if (v >= 1_000_000) return (v / 1_000_000).toFixed(1) + ' tr'
|
|
return v.toLocaleString('vi-VN')
|
|
}
|
|
|
|
// Tone → tinted icon chip (brand-led, semantic accents for warn/good).
|
|
const STAT_TONE: Record<'default' | 'warn' | 'good', { chip: string; icon: string; value: string }> = {
|
|
default: { chip: 'bg-brand-50', icon: 'text-brand-600', value: 'text-slate-900' },
|
|
warn: { chip: 'bg-amber-50', icon: 'text-amber-600', value: 'text-amber-700' },
|
|
good: { chip: 'bg-emerald-50', icon: 'text-emerald-600', value: 'text-slate-900' },
|
|
}
|
|
|
|
function StatCard({ icon: Icon, label, value, hint, tone = 'default' }: {
|
|
icon: React.ComponentType<{ className?: string }>
|
|
label: string
|
|
value: React.ReactNode
|
|
hint?: string
|
|
tone?: 'default' | 'warn' | 'good'
|
|
}) {
|
|
const t = STAT_TONE[tone]
|
|
return (
|
|
<div className="rounded-lg border border-slate-200 bg-white p-4 transition-colors hover:border-slate-300">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">{label}</div>
|
|
<span className={cn('flex h-7 w-7 shrink-0 items-center justify-center rounded-lg', t.chip)}>
|
|
<Icon className={cn('h-4 w-4', t.icon)} />
|
|
</span>
|
|
</div>
|
|
<div className={cn('mt-2.5 text-2xl font-semibold tabular-nums leading-none', t.value)}>{value}</div>
|
|
{hint && <div className="mt-1.5 text-[11px] text-slate-400">{hint}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Small section title with a brand tick — gives each band a clear, quiet anchor.
|
|
function SectionLabel({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<h2 className="mb-2.5 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500">
|
|
<span className="h-3 w-0.5 rounded-full bg-brand-500" />
|
|
{children}
|
|
</h2>
|
|
)
|
|
}
|
|
|
|
function MyDashboardRow() {
|
|
const navigate = useNavigate()
|
|
const { user } = useAuth()
|
|
const q = useQuery({
|
|
queryKey: ['my-dashboard'],
|
|
queryFn: async () => (await api.get<MyDashboard>('/reports/my-dashboard')).data,
|
|
staleTime: 30_000,
|
|
})
|
|
const d = q.data
|
|
if (!d) return null
|
|
|
|
// Admin thấy everything nhưng card "Tôi đang soạn thảo" + "Chờ tôi duyệt"
|
|
// thường = 0 cho admin. Chỉ show row nếu có ít nhất 1 card có giá trị.
|
|
const anyValue = d.draftsInProgress + d.pendingMyApproval + d.dueSoon + d.overdue > 0
|
|
if (!anyValue && user?.roles.includes('Admin')) return null
|
|
|
|
return (
|
|
<div className="mb-6">
|
|
<SectionLabel>Của tôi</SectionLabel>
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
<button
|
|
onClick={() => navigate('/contracts?filter=my-drafts')}
|
|
className="group rounded-lg border border-slate-200 bg-white p-4 text-left transition-colors hover:border-brand-300 hover:bg-brand-50/30"
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Đang soạn thảo</div>
|
|
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-50">
|
|
<Pencil className="h-4 w-4 text-brand-600" />
|
|
</span>
|
|
</div>
|
|
<div className="mt-2.5 text-2xl font-semibold leading-none text-slate-900 tabular-nums">{d.draftsInProgress}</div>
|
|
<div className="mt-1.5 text-[11px] text-slate-400">{fmtMoney(d.draftsTotalValue)} VND</div>
|
|
</button>
|
|
<button
|
|
onClick={() => navigate('/contracts?filter=pending-me')}
|
|
className="group rounded-lg border border-slate-200 bg-white p-4 text-left transition-colors hover:border-brand-300 hover:bg-brand-50/30"
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Chờ tôi duyệt</div>
|
|
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-50">
|
|
<Inbox className="h-4 w-4 text-brand-600" />
|
|
</span>
|
|
</div>
|
|
<div className="mt-2.5 text-2xl font-semibold leading-none text-slate-900 tabular-nums">{d.pendingMyApproval}</div>
|
|
<div className="mt-1.5 text-[11px] text-slate-400">Mở hộp thư duyệt</div>
|
|
</button>
|
|
<div className="rounded-lg border border-slate-200 bg-white p-4">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Sắp quá hạn (24h)</div>
|
|
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-amber-50">
|
|
<Clock className="h-4 w-4 text-amber-600" />
|
|
</span>
|
|
</div>
|
|
<div className="mt-2.5 text-2xl font-semibold leading-none text-amber-700 tabular-nums">{d.dueSoon}</div>
|
|
</div>
|
|
<div className="rounded-lg border border-slate-200 bg-white p-4">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Đã quá hạn</div>
|
|
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-red-50">
|
|
<AlertTriangle className="h-4 w-4 text-red-600" />
|
|
</span>
|
|
</div>
|
|
<div className="mt-2.5 text-2xl font-semibold leading-none text-red-600 tabular-nums">{d.overdue}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function DashboardPage() {
|
|
const stats = useQuery({
|
|
queryKey: ['dashboard-stats'],
|
|
queryFn: async () => (await api.get<DashboardStats>('/reports/dashboard')).data,
|
|
staleTime: 60_000,
|
|
})
|
|
|
|
if (stats.isLoading) {
|
|
return (
|
|
<div className="p-6">
|
|
<PageHeader title="Tổng quan" description="Tình hình HĐ toàn hệ thống — cập nhật real-time khi refresh." />
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-5">
|
|
{[1, 2, 3, 4, 5].map(i => (
|
|
<div key={i} className="h-[88px] animate-pulse rounded-lg border border-slate-200 bg-slate-50" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const d = stats.data
|
|
if (!d) return null
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<PageHeader title="Tổng quan" description="Tình hình HĐ toàn hệ thống — cập nhật real-time khi refresh." />
|
|
|
|
<MyDashboardRow />
|
|
|
|
<SectionLabel>Toàn hệ thống</SectionLabel>
|
|
{/* KPI Cards */}
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-5">
|
|
<StatCard icon={FileText} label="Tổng HĐ" value={d.totalContracts} />
|
|
<StatCard icon={TrendingUp} label="HĐ đang xử lý" value={d.activeContracts} tone="good" />
|
|
<StatCard icon={AlertTriangle} label="HĐ quá hạn SLA" value={d.overdueContracts} tone="warn" hint="SLA đã trôi" />
|
|
<StatCard icon={CheckCircle2} label="Phát hành tháng này" value={d.publishedThisMonth} tone="good" />
|
|
<StatCard icon={Coins} label="Tổng giá trị active" value={fmtMoney(d.totalValueActive)} hint="VND" />
|
|
</div>
|
|
|
|
<div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
|
|
{/* By Phase */}
|
|
<section className="rounded-lg border border-slate-200 bg-white p-5">
|
|
<h2 className="mb-4 text-[13px] font-semibold text-slate-800">HĐ theo phase</h2>
|
|
<div className="space-y-2.5">
|
|
{d.byPhase.length === 0 && <div className="py-6 text-center text-[13px] text-slate-400">Chưa có HĐ nào</div>}
|
|
{d.byPhase
|
|
.slice()
|
|
.sort((a, b) => b.count - a.count)
|
|
.map(p => {
|
|
const total = d.byPhase.reduce((s, x) => s + x.count, 0) || 1
|
|
const pct = (p.count / total) * 100
|
|
return (
|
|
<div key={p.phase} className="flex items-center gap-3">
|
|
<div className="w-36">
|
|
<PhaseBadge phase={p.phase} />
|
|
</div>
|
|
<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
|
|
<div className="h-full rounded-full bg-brand-500" style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<div className="w-10 text-right text-xs font-medium text-slate-600 tabular-nums">{p.count}</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Monthly value */}
|
|
<section className="rounded-lg border border-slate-200 bg-white p-5">
|
|
<h2 className="mb-4 text-[13px] font-semibold text-slate-800">Giá trị HĐ theo tháng <span className="font-normal text-slate-400">· 12 tháng gần nhất</span></h2>
|
|
<BarChart
|
|
data={d.monthlyValue.map(m => ({
|
|
label: `${String(m.month).padStart(2, '0')}/${m.year}`,
|
|
value: m.totalValue,
|
|
sublabel: `${m.count} HĐ`,
|
|
}))}
|
|
formatValue={fmtMoney}
|
|
/>
|
|
</section>
|
|
|
|
{/* Top suppliers */}
|
|
<section className="rounded-lg border border-slate-200 bg-white p-5">
|
|
<h2 className="mb-4 text-[13px] font-semibold text-slate-800">Top NCC theo số HĐ</h2>
|
|
<BarChart
|
|
data={d.topSuppliers.map(s => ({
|
|
label: s.supplierName,
|
|
value: s.count,
|
|
sublabel: `Tổng ${fmtMoney(s.totalValue)} VND`,
|
|
}))}
|
|
/>
|
|
</section>
|
|
|
|
{/* Top projects */}
|
|
<section className="rounded-lg border border-slate-200 bg-white p-5">
|
|
<h2 className="mb-4 text-[13px] font-semibold text-slate-800">Top dự án theo số HĐ</h2>
|
|
<BarChart
|
|
data={d.topProjects.map(p => ({
|
|
label: p.projectName,
|
|
value: p.count,
|
|
sublabel: `Tổng ${fmtMoney(p.totalValue)} VND`,
|
|
}))}
|
|
/>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|