[CLAUDE] FE-Admin: redesign Phase 1 — density-first design system (NAMGROUP-ref, giữ brand)
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m24s
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>
This commit is contained in:
pqhuy1987
@ -24,6 +24,7 @@
|
||||
- Run pattern: `python <skill>/scripts/with_server.py --server "npm run dev" --port 8080 --timeout 90 -- python my_shot.py` (helper starts/stops dev). Write my_shot.py in fe-user dir, **delete after** (throwaway, not app code).
|
||||
- Screenshot: `browser.new_page(viewport={w,h}, device_scale_factor=2)` → `page.screenshot(full_page=True)` → **Read PNG** to NHÌN.
|
||||
- 🪲 **2 Vite-dev gotchas (cost me 2 failed runs):** (1) `wait_until="networkidle"` NEVER fires — Vite HMR websocket stays open → use `domcontentloaded` + `wait_for_selector("form")`. (2) FIRST goto after cold server triggers Vite dep-optimize compile (>15s) → add a **warm-up goto with 60s timeout** before the viewport loop, else first viewport times out.
|
||||
- 🪲 (3) **Authed-page (Dashboard…) S55 BLOCKER:** `dotnet run` API binds **HTTPS :5443** + HTTP :5444 (Program.cs overrides `ASPNETCORE_URLS`), nhưng `vite.config.ts` proxy target = `http://localhost:5443` → protocol mismatch → /api login fail → kẹt /login. ĐỂ chụp authed: temp-set proxy `https://localhost:5443` (`secure:false` sẵn) + restart Vite + **REVERT sau**; HOẶC run API HTTP-only. + Dashboard = ProtectedRoute (cần JWT) → Playwright login THẬT (fill `admin@solutions.com.vn`/`Admin@123456` + submit + wait url≠/login). S55 rig này chặn cả designer + em main → **đáng tin nhất = deploy prod rồi login thật xem authed pages** (đừng vật lộn dev-rig cho authed screenshot).
|
||||
- Fallback khi stack chưa chạy: static component preview / screenshot `/login` — **KHÔNG bỏ soi** (FD2 cấm ship-unseen).
|
||||
|
||||
## Component inventory (built/verified — chống reinvent)
|
||||
@ -35,4 +36,5 @@
|
||||
- Minor noted (NOT fixed, out of bounded scope): 2 `blur-3xl` blobs barely visible at 1440 = render cost ~0 payoff; eyebrow `tracking-[0.2em]` heavy. Candidates if login redesign requested.
|
||||
|
||||
## Activity log
|
||||
- **S55 (2026-06-09) Phase-1 fe-admin redesign — density-first NAMGROUP-ref, KEEP brand [em main proxy — designer truncated gotcha #53 trước build/MEMORY]:** Applied 14 file: index.css (density heading ladder semibold + `.label-eyebrow` 11px uppercase slate-500 + drop font-bold) + 6 ui primitives (Button `text-xs font-semibold rounded-lg` h-7/8/10 + brand focus-ring/70 — variant/size keys STABLE 51 call-sites) + 6 shell (DataTable/Layout/TopBar/PageHeader/PhaseBadge/EmptyState) + DashboardPage (KPI card `rounded-lg border-slate-200` + `bg-brand-50` icon chip h-7w7 + uppercase tracking-wider label + brand accent bar). Brand #1F7DC1 + Be Vietnam Pro KEPT (NAMGROUP density = mượn cấu trúc, brand=ours). `npm run build` 0 TS err. **Visual loop BLOCKED** by authed-rig gotcha (3) above → CHỈ chụp /login (polished, on-brand). em main recover: build ✓ + login-visual ✓ + diff-review (index.css/Button/DashboardPage high-quality, brand-consistent). User chọn commit+deploy → login prod xem authed. Tag [s55, phase1-redesign, density-namgroup, keep-brand, authed-rig-blocked].
|
||||
- **S47 (2026-06-02) FD2 RIG VERIFIED ✅** — first real spawn. Ran full FD2 loop end-to-end on fe-user `/login`: read DS (Tailwind v4 CSS-first, corrected stale config-path assumption) → started Vite via `with_server.py` → Playwright screenshot 375+1440 → Read PNGs → FD4 critique → 1-line contrast fix → re-screenshot confirmed → `npm run build` 0 TS error. Closes adap-report `2026-06-02-Agent-frontend-designer-floor` FD2 runtime proof. 2 Vite gotchas captured above. Loop is REAL, not theoretical.
|
||||
|
||||
@ -57,6 +57,8 @@ Adversarial pre-commit reviewer SOLUTION_ERP. Read-only verify + live curl prod
|
||||
|
||||
## 📅 Recent activity (FIFO — older → archive/git)
|
||||
|
||||
- **2026-06-09 (S55 Phase-1 FE visual redesign pre-commit — PASS, 0 blocker, verdict-first survived):** 14 fe-admin files VISUAL/CSS-only (NAMGROUP density + SOLUTION brand). **Independent re-verify GREEN:** `npm run build` fe-admin = ✓ 607ms, 1945 modules, 0 TS err (only PRE-EXISTING warns: CSS @import-order + >500KB chunk + INEFFECTIVE_DYNAMIC_IMPORT realtime.ts — git-confirmed none introduced, @import lines untouched in diff). **Regression Cat1 ALL preserved:** Button cva variant keys (primary/secondary/outline/ghost/danger) + size (sm/md/lg) STABLE — only Tailwind class VALUES swapped, defaultVariants intact (51 call-sites safe); Input/Select/Textarea/Label = `forwardRef`+`...props`+`className` passthrough unchanged, only `cn()` literal; Dialog `{open,onClose,title,children,footer,size}` destructure + sm/md/lg→max-w map intact (+aria-label="Đóng" = a11y GAIN); DataTable `Column<T>` type UNCHANGED (diff starts after type def) — render/sortable/align/width + sort + Pagination props intact, RowActions/RowActionButton purely ADDITIVE; Layout MenuLeaf className-only (brand left-rail via before:), nav/resolver/permission-filter/routing untouched; PhaseBadge phase→ContractPhaseColor/Label map intact; PageHeader/EmptyState/TopBar pure class. DashboardPage data-flow (useQuery/navigate/fmtMoney/BarChart/PhaseBadge) preserved, STAT_TONE+SectionLabel additive, +`cn` import only. **Brand Cat3:** Be Vietnam Pro KEPT (grep: @import:3 + --font-sans:22 + font-family:34 all unchanged — initial blocker RETRACTED after grep); only brand-/slate/semantic colors, 0 off-brand hex/indigo. **a11y:** focus-visible rings present everywhere (brand-500); Label self-documents slate-500 (~4.6:1 AA-pass) chosen over NAMGROUP zinc-400. **Tailwind v4 (^4.2.3)** — `ring-current/15`, `shadow-xs`, slash-opacity all valid v4. **noScopeCreep:** exactly 14 fe-admin, 0 fe-user, 0 BE/src (only noise = frontend-designer/MEMORY.md agent file). **2 MINOR (non-block, a11y-floor):** `text-slate-400` on white for small hint/empty text (DashboardPage hints ~line 50/64, DataTable empty-cell, EmptyState was-400-stays-400) ≈3.5-4:1 — borderline-fail WCAG-AA for <18px, but these are de-emphasized hints not primary content + PRE-EXISTING tone (redesign mostly UPGRADED slate-400→500 on EmptyState desc + Pagination); accept for hint role, revisit if audit. **Learned:** font-drop scare = grep the 3 load-bearing lines (@import/--font-sans token/font-family) BEFORE flagging — diff hunk lower in file ≠ font removed; emit PASS/FAIL line-1 FIRST (gotcha #53 truncation survival, mirror S51/S55). **surprise:** Tailwind v4 `shadow-xs` is real (v3's shadow-sm renamed) — don't flag as typo; v4 slash-opacity on currentColor (`ring-current/15`) is valid. Verdict PASS — safe commit+deploy. Tag [s55-fe, visual-redesign, namgroup-density, verdict-first, regression-clean, slate400-minor].
|
||||
|
||||
- **2026-06-09 (S55 master-data import pre-commit — PASS [em main proxy — reviewer return truncated gotcha #53 before verdict, mirror S51]):** Reviewed Mig 48 `AddProjectMasterFields` (Project +4 nullable col Year/Investor/Location/Package) + `SeedRealMasterDataAsync` (62 Project+71 WorkItem+3 Supplier per-code idempotent ungated) + FE ProjectsPage form +4 ×2 app. Reviewer ran 293s/31-tools nhưng truncated mid-thought (nghi cached-binary 2.76s build → muốn forced clean rebuild + Project tests). **Em main COMPLETED đúng việc nó định làm:** `dotnet test SolutionErp.slnx` = clean rebuild + **216 PASS** (58+158, 0 fail/skip) → giải tỏa cached-binary concern (test = fresh build). 10 dims GREEN: Mig Up=4 AddColumn/Down=4 DropColumn reversible + 3-file; seed 62/71/3 0-dup; per-code idempotent ungated line 118 (reaches prod); FLOCK01 collision skip-demo-wins; FE↔BE 4 nullable both sides (tránh S51 mismatch); test-file compile-fix +4 null legit; gotcha #57 index untouched; **runtime Dev proof** (data landed, Investor col populates). 0 rogue write (read-only respected, git clean of code). **Learned:** long adversarial review return truncates (gotcha #53) → reviewer nên emit PASS/FAIL verdict SỚM (trước deep re-verify) để sống sót truncation; em main complete được đúng pending-check (clean dotnet test) deterministic. Verdict PASS — safe commit. Tag [s55, master-import, em-main-proxy-truncate, runtime-dev-proof].
|
||||
|
||||
- **2026-06-08 (S54 ItTicket reassign authz Admin-OR-dept-IT cross-stack pre-commit — PASS, 0 blocker, gotcha #44 disarmed correctly):** Controller `/assign` hạ `[Authorize(Roles="Admin")]`→`[Authorize]` any-auth; authz moved INTO `AssignItTicketHandler` (Admin-OR-IT Forbidden + assignee-must-IT Conflict) + new `GetAssignableItStaffQuery` capability endpoint. **Independent re-verify GREEN:** `dotnet test SolutionErp.slnx` = **216 PASS** (58 Dom + 158 Infra, Failed:0 Skipped:0, +13 matches 203→216 claim exactly) · fe-admin + fe-user `tsc -p tsconfig.app.json --noEmit` BOTH exit 0 clean. **#2 CHÍ MẠNG role-string "Admin" CONFIRMED REAL (full chain traced):** `AppRoles.Admin="Admin"` literal (AppRoles.cs:5) → SeedRolesAsync `Name=roleName` (DbInit:1485) so DB Role.Name=="Admin" → Identity GetRolesAsync returns NAMES → JwtTokenService:32 `new Claim(ClaimTypes.Role, r)` → CurrentUserService:30-31 `FindAll(ClaimTypes.Role)` → `cu.Roles.Contains("Admin")` CORRECT. "QTV" (DbInit:1458 RoleLabels) = ShortName DISPLAY label only = decoy. Program.cs JWT sets NO `RoleClaimType` override (ClaimTypes.Role symmetric write/read). Same proven pattern as every existing Roles="Admin" endpoint. **Bypass airtight:** controller any-auth → handler sole gate; guard `if(!isAdmin && !(itDeptId is Guid mine && myDeptId==mine)) Forbidden` fail-CLOSED when itDeptId null (non-admin blocked; admin still passes role-branch). `Department.Code=="IT"` IS seeded (DbInit:2082 "Phòng CNTT") so live non-null. **Capability 0-leak:** non-auth → `{canReassign:false, staff:[]}` (no name leak), `[Authorize]` any-auth → 0 silent-403. **Defense-in-depth intact:** FE nút `{canReassign&&}` but PUT still hits handler guard → 403/409 → `onError: toast.error(getErrorMessage(err))` surfaces (NOT swallowed). **FE SHA256 page 4bcaf2f IDENTICAL both apps** (types.ts correctly NOT identical — admin AttendanceReportDto vs user HrDashboardDto diverge below; added AssignableStaff block byte-identical); old fe-user page was read-only kanban (NO app-specific logic lost — diff purely additive); fe-user has all imports (apiError.getErrorMessage, Dialog size/footer/onClose props match, Select passthrough, sonner). **Test 13-fact NOT happy-path:** Case5 Forbidden side-effect assert `AssignedToUserId.Should().BeNull()` (red-able by contrast vs Case6/7 same-handler success), Case3/3b empty-staff 0-leak, Case8 Conflict msg-exact. prove-by-contrast ĐỦ CHẶT (partition non-IT-throws vs IT/admin-succeed identical handler). **1 MINOR defer:** assignee-must-IT NEW vs old handler (git HEAD: old allowed admin→ANY active user); itDeptId-null → even admin Conflict — fail-closed acceptable+spec-requested, cosmetic (prod IT-dept seeded). **Learned:** authz role-string review = trace FULL chain const→seed Name→GetRolesAsync(names not codes)→Claim(ClaimTypes.Role)→reader AND grep JWT cfg for `RoleClaimType` override (none=symmetric) — display-code (QTV) in RoleLabels/ShortName dict = classic decoy. **surprise:** moving authz controller→handler is the CORRECT gotcha #44 fix (not a smell) when paired with BE-computed capability flag for FE gating + handler as sole gate. Verdict PASS — safe commit. Tag [s54, it-ticket-reassign-authz, gotcha44-disarmed, role-string-chain-verified, cross-stack-clean].
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import type { ButtonHTMLAttributes, ReactNode } from 'react'
|
||||
import { ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import { cn } from '@/lib/cn'
|
||||
|
||||
@ -11,6 +11,50 @@ export type Column<T> = {
|
||||
align?: 'left' | 'center' | 'right'
|
||||
}
|
||||
|
||||
// Always-visible row-action button (NAMGROUP convention: NEVER hide actions
|
||||
// behind opacity-0 group-hover — touch devices can't reveal them). 7×7 icon
|
||||
// button, tone-tinted hover. Wrap an action cell with <RowActions> to stop the
|
||||
// row's onClick from firing when a button is pressed.
|
||||
type RowActionTone = 'default' | 'brand' | 'danger' | 'success'
|
||||
|
||||
const ROW_ACTION_TONE: Record<RowActionTone, string> = {
|
||||
default: 'text-slate-500 hover:bg-slate-100 hover:text-slate-800',
|
||||
brand: 'text-slate-500 hover:bg-brand-50 hover:text-brand-700',
|
||||
danger: 'text-slate-500 hover:bg-red-50 hover:text-red-600',
|
||||
success: 'text-slate-500 hover:bg-emerald-50 hover:text-emerald-600',
|
||||
}
|
||||
|
||||
export function RowActions({ children, className }: { children: ReactNode; className?: string }) {
|
||||
return (
|
||||
<div
|
||||
className={cn('flex items-center justify-end gap-0.5', className)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function RowActionButton({
|
||||
tone = 'default',
|
||||
className,
|
||||
...props
|
||||
}: ButtonHTMLAttributes<HTMLButtonElement> & { tone?: RowActionTone }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/60',
|
||||
'disabled:pointer-events-none disabled:opacity-40',
|
||||
ROW_ACTION_TONE[tone],
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
type Props<T> = {
|
||||
columns: Column<T>[]
|
||||
rows: T[]
|
||||
@ -35,15 +79,16 @@ export function DataTable<T>({
|
||||
onRowClick,
|
||||
}: Props<T>) {
|
||||
return (
|
||||
<div className="overflow-auto rounded-xl border border-slate-200/80 bg-white shadow-sm">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-slate-50/60 text-slate-600">
|
||||
<tr className="border-b border-slate-200/80">
|
||||
// Density-first: rounded-lg + crisp border (no decorative shadow).
|
||||
<div className="overflow-auto rounded-lg border border-slate-200 bg-white">
|
||||
<table className="w-full text-[12px]">
|
||||
<thead className="sticky top-0 z-10 bg-slate-50 text-slate-500">
|
||||
<tr className="border-b border-slate-200">
|
||||
{columns.map(c => (
|
||||
<th
|
||||
key={c.key}
|
||||
className={cn(
|
||||
'px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wider',
|
||||
'px-3 py-2 text-[11px] font-semibold uppercase tracking-wider',
|
||||
c.align === 'right' && 'text-right',
|
||||
c.align === 'center' && 'text-center',
|
||||
c.align !== 'right' && c.align !== 'center' && 'text-left',
|
||||
@ -70,7 +115,7 @@ export function DataTable<T>({
|
||||
Array.from({ length: 5 }).map((_, i) => (
|
||||
<tr key={`sk-${i}`} className="border-t border-slate-100">
|
||||
{columns.map(c => (
|
||||
<td key={c.key} className="px-4 py-3">
|
||||
<td key={c.key} className="px-3 py-2.5">
|
||||
<div className="h-3 animate-pulse rounded bg-slate-100" />
|
||||
</td>
|
||||
))}
|
||||
@ -78,7 +123,7 @@ export function DataTable<T>({
|
||||
))}
|
||||
{!isLoading && rows.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-4 py-12 text-center text-sm text-slate-400">
|
||||
<td colSpan={columns.length} className="px-3 py-12 text-center text-[13px] text-slate-400">
|
||||
{empty ?? 'Không có dữ liệu'}
|
||||
</td>
|
||||
</tr>
|
||||
@ -97,7 +142,7 @@ export function DataTable<T>({
|
||||
<td
|
||||
key={c.key}
|
||||
className={cn(
|
||||
'px-4 py-2.5',
|
||||
'px-3 py-2',
|
||||
c.align === 'right' && 'text-right',
|
||||
c.align === 'center' && 'text-center',
|
||||
)}
|
||||
@ -126,25 +171,25 @@ export function Pagination({ page, pageSize, total, onChange }: PaginationProps)
|
||||
const to = Math.min(page * pageSize, total)
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between py-3 text-sm text-slate-600">
|
||||
<span>
|
||||
<div className="flex items-center justify-between py-3 text-[12px] text-slate-500">
|
||||
<span className="tabular-nums">
|
||||
{from}–{to} / {total}
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
disabled={page <= 1}
|
||||
onClick={() => onChange(page - 1)}
|
||||
className="rounded-md border border-slate-300 bg-white px-3 py-1 disabled:opacity-50"
|
||||
className="rounded-lg border border-slate-300 bg-white px-2.5 py-1 font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-white"
|
||||
>
|
||||
Trước
|
||||
</button>
|
||||
<span className="px-3 py-1">
|
||||
<span className="px-2 tabular-nums">
|
||||
Trang {page}/{totalPages}
|
||||
</span>
|
||||
<button
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => onChange(page + 1)}
|
||||
className="rounded-md border border-slate-300 bg-white px-3 py-1 disabled:opacity-50"
|
||||
className="rounded-lg border border-slate-300 bg-white px-2.5 py-1 font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-white"
|
||||
>
|
||||
Sau
|
||||
</button>
|
||||
|
||||
@ -17,12 +17,12 @@ export function EmptyState({
|
||||
return (
|
||||
<div className={cn('flex flex-col items-center justify-center gap-2 py-10 text-center', className)}>
|
||||
{Icon && (
|
||||
<div className="rounded-full bg-slate-100 p-3 text-slate-400">
|
||||
<Icon className="h-6 w-6" />
|
||||
<div className="rounded-xl bg-slate-100 p-2.5 text-slate-400">
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm font-medium text-slate-700">{title}</div>
|
||||
{description && <div className="max-w-sm text-xs text-slate-400">{description}</div>}
|
||||
<div className="text-[13px] font-semibold text-slate-700">{title}</div>
|
||||
{description && <div className="max-w-sm text-xs leading-relaxed text-slate-500">{description}</div>}
|
||||
{action && <div className="mt-2">{action}</div>}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -242,10 +242,12 @@ function MenuLeaf({ node, depth }: { node: MenuNode; depth: number }) {
|
||||
to={path}
|
||||
title={node.label}
|
||||
className={cn(
|
||||
'block rounded-md leading-snug transition',
|
||||
isDeep ? 'px-3 py-1 text-[11px]' : 'px-3 py-2 text-[12px] font-medium',
|
||||
// Density-first: active leaf gets a brand left-rail + tint (crisp
|
||||
// selected affordance, NAMGROUP). Inactive stays quiet slate.
|
||||
'relative block rounded-md leading-snug transition-colors',
|
||||
isDeep ? 'px-3 py-1 text-[11px]' : 'px-3 py-1.5 text-[12px] font-medium',
|
||||
isActive
|
||||
? 'bg-brand-50 text-brand-700'
|
||||
? 'bg-brand-50 font-semibold text-brand-700 before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-brand-600'
|
||||
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
|
||||
)}
|
||||
>
|
||||
|
||||
@ -10,10 +10,12 @@ export function PageHeader({
|
||||
actions?: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="mb-6 flex items-start justify-between gap-6 border-b border-slate-200/70 pb-5">
|
||||
// Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
|
||||
// tighter bottom rule. Toolbar/actions sit inline on the right.
|
||||
<div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-[22px] font-bold leading-tight text-slate-900">{title}</h1>
|
||||
{description && <p className="mt-1.5 text-[13px] leading-relaxed text-slate-500">{description}</p>}
|
||||
<h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
|
||||
{description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
|
||||
</div>
|
||||
{actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,18 @@
|
||||
import { cn } from '@/lib/cn'
|
||||
import { ContractPhaseColor, ContractPhaseLabel } from '@/types/contracts'
|
||||
|
||||
// Density-first status pill (NAMGROUP convention): rounded-full, ring-bordered,
|
||||
// 11px semibold. Tint + text colour come from ContractPhaseColor (bg-{c}-100 /
|
||||
// text-{c}-700); a matching inset ring crisps the edge without a new colour map.
|
||||
export function PhaseBadge({ phase, className }: { phase: number; className?: string }) {
|
||||
return (
|
||||
<span className={cn('inline-flex rounded-full px-2 py-0.5 text-xs font-medium', ContractPhaseColor[phase], className)}>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1 ring-inset ring-current/15',
|
||||
ContractPhaseColor[phase],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{ContractPhaseLabel[phase]}
|
||||
</span>
|
||||
)
|
||||
|
||||
@ -32,7 +32,7 @@ function UserMenu() {
|
||||
onClick={() => setOpen(o => !o)}
|
||||
className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition hover:bg-slate-100"
|
||||
>
|
||||
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-100 text-xs font-bold text-brand-700">
|
||||
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-100 text-[11px] font-semibold text-brand-700">
|
||||
{initials}
|
||||
</span>
|
||||
<span className="hidden max-w-32 truncate text-slate-700 md:inline">{user?.fullName ?? user?.email}</span>
|
||||
|
||||
@ -2,21 +2,26 @@ import { forwardRef, type ButtonHTMLAttributes } from 'react'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '@/lib/cn'
|
||||
|
||||
// Density-first (NAMGROUP convention): text-xs font-semibold, compact heights,
|
||||
// rounded-lg. Brand identity kept — primary = brand-600, focus ring brand-500.
|
||||
// Decorative shadow dropped; only the filled actions keep a 1px tint shadow for
|
||||
// affordance. Variant keys (primary/secondary/outline/ghost/danger) + size keys
|
||||
// (sm/md/lg) are STABLE — 51 call-sites depend on them.
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:ring-brand-500 active:translate-y-[0.5px]',
|
||||
'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white focus-visible:ring-brand-500/70 active:translate-y-[0.5px]',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
primary: 'bg-brand-600 text-white shadow-sm shadow-brand-600/20 hover:bg-brand-700',
|
||||
secondary: 'bg-slate-100 text-slate-800 hover:bg-slate-200',
|
||||
outline: 'border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50 hover:border-slate-400',
|
||||
primary: 'bg-brand-600 text-white shadow-xs shadow-brand-700/20 hover:bg-brand-700',
|
||||
secondary: 'bg-slate-100 text-slate-700 hover:bg-slate-200',
|
||||
outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-400',
|
||||
ghost: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
|
||||
danger: 'bg-red-600 text-white shadow-sm shadow-red-600/20 hover:bg-red-700',
|
||||
danger: 'bg-red-600 text-white shadow-xs shadow-red-700/20 hover:bg-red-700',
|
||||
},
|
||||
size: {
|
||||
sm: 'h-8 px-3 text-xs',
|
||||
md: 'h-9 px-4',
|
||||
lg: 'h-11 px-6 text-base',
|
||||
sm: 'h-7 px-2.5',
|
||||
md: 'h-8 px-3.5',
|
||||
lg: 'h-10 px-5 text-sm',
|
||||
},
|
||||
},
|
||||
defaultVariants: { variant: 'primary', size: 'md' },
|
||||
|
||||
@ -24,10 +24,11 @@ export function Dialog({ open, onClose, title, children, footer, size = 'md' }:
|
||||
if (!open) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-[1px]" onClick={onClose}>
|
||||
<div
|
||||
className={cn(
|
||||
'w-full rounded-lg bg-white shadow-xl',
|
||||
// Density-first: ring-bordered card, restrained shadow (no decorative shadow-xl).
|
||||
'w-full rounded-xl bg-white shadow-lg ring-1 ring-slate-900/5',
|
||||
size === 'sm' && 'max-w-md',
|
||||
size === 'md' && 'max-w-xl',
|
||||
size === 'lg' && 'max-w-3xl',
|
||||
@ -35,13 +36,17 @@ export function Dialog({ open, onClose, title, children, footer, size = 'md' }:
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-slate-200 px-5 py-3">
|
||||
<div className="text-base font-semibold text-slate-900">{title}</div>
|
||||
<button onClick={onClose} className="rounded p-1 text-slate-500 hover:bg-slate-100">
|
||||
<div className="text-sm font-semibold text-slate-800">{title}</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label="Đóng"
|
||||
className="-mr-1 rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-[70vh] overflow-auto p-5">{children}</div>
|
||||
{footer && <div className="flex items-center justify-end gap-2 border-t border-slate-200 px-5 py-3">{footer}</div>}
|
||||
<div className="max-h-[70vh] overflow-auto px-5 py-4">{children}</div>
|
||||
{footer && <div className="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50/70 px-5 py-3">{footer}</div>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -7,9 +7,10 @@ export const Input = forwardRef<HTMLInputElement, Props>(({ className, ...props
|
||||
<input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'h-9 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900',
|
||||
'shadow-[inset_0_1px_0_rgba(15,23,42,0.02)] placeholder:text-slate-400',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/20',
|
||||
// Density-first: compact (~34px) rounded-lg, brand focus glow at low opacity.
|
||||
'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-900',
|
||||
'placeholder:text-slate-400',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
|
||||
'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
|
||||
className,
|
||||
)}
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import type { LabelHTMLAttributes } from 'react'
|
||||
import { cn } from '@/lib/cn'
|
||||
|
||||
// Density-first ERP scan-pattern (NAMGROUP convention): uppercase + tracking +
|
||||
// muted. slate-500 (not 400) so 11px label still clears WCAG-AA (~4.6:1) — a
|
||||
// deliberate accessibility-floor deviation from NAMGROUP's zinc-400.
|
||||
export function Label({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
|
||||
return (
|
||||
<label
|
||||
className={cn('text-sm font-medium text-slate-700', className)}
|
||||
className={cn('text-[11px] font-semibold uppercase tracking-wider text-slate-500', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -7,9 +7,9 @@ export const Select = forwardRef<HTMLSelectElement, Props>(({ className, childre
|
||||
<select
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'h-9 w-full rounded-md border border-slate-300 bg-white px-3 pr-8 text-sm text-slate-900',
|
||||
'shadow-[inset_0_1px_0_rgba(15,23,42,0.02)]',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/20',
|
||||
// Density-first: matches Input — compact rounded-lg, brand focus glow.
|
||||
'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 pr-8 text-sm text-slate-900',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
|
||||
'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
|
||||
className,
|
||||
)}
|
||||
|
||||
@ -7,9 +7,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ className, ...
|
||||
<textarea
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 leading-relaxed',
|
||||
'shadow-[inset_0_1px_0_rgba(15,23,42,0.02)] placeholder:text-slate-400',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/20',
|
||||
// Density-first: matches Input — rounded-lg, brand focus glow.
|
||||
'w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm leading-relaxed text-slate-900',
|
||||
'placeholder:text-slate-400',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
|
||||
'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
|
||||
className,
|
||||
)}
|
||||
|
||||
@ -40,13 +40,24 @@ body {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Heading tightening + better hierarchy with Be Vietnam Pro */
|
||||
/* Heading tightening + better hierarchy with Be Vietnam Pro.
|
||||
Density-first (NAMGROUP convention): semibold ladder, never font-bold —
|
||||
weight carries hierarchy without shouting. */
|
||||
h1, h2, h3, h4 {
|
||||
letter-spacing: -0.018em;
|
||||
letter-spacing: -0.014em;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Section / form labels — uppercase scan-pattern shared across the app.
|
||||
Use class="label-eyebrow" for the dense ERP label treatment. */
|
||||
.label-eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: #64748b; /* slate-500 — WCAG-AA on white (4.6:1) */
|
||||
}
|
||||
h1 { font-weight: 700; }
|
||||
h2 { font-weight: 600; }
|
||||
|
||||
/* Tabular numbers in tables + stat cards for better alignment */
|
||||
table, .tabular-nums {
|
||||
|
||||
@ -6,6 +6,7 @@ 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 = {
|
||||
@ -22,6 +23,13 @@ const fmtMoney = (v: number) => {
|
||||
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
|
||||
@ -29,19 +37,31 @@ function StatCard({ icon: Icon, label, value, hint, tone = 'default' }: {
|
||||
hint?: string
|
||||
tone?: 'default' | 'warn' | 'good'
|
||||
}) {
|
||||
const toneClass = tone === 'warn' ? 'text-amber-600' : tone === 'good' ? 'text-emerald-600' : 'text-brand-600'
|
||||
const t = STAT_TONE[tone]
|
||||
return (
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-slate-500">{label}</div>
|
||||
<Icon className={`h-4 w-4 ${toneClass}`} />
|
||||
<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="mt-2 text-2xl font-bold text-slate-900">{value}</div>
|
||||
{hint && <div className="mt-0.5 text-xs text-slate-400">{hint}</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()
|
||||
@ -60,43 +80,51 @@ function MyDashboardRow() {
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<h2 className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-500">Của tôi</h2>
|
||||
<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="rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm transition hover:border-brand-300 hover:shadow"
|
||||
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-center justify-between">
|
||||
<div className="text-xs font-medium text-slate-500">Đang soạn thảo</div>
|
||||
<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 text-2xl font-bold text-slate-900 tabular-nums">{d.draftsInProgress}</div>
|
||||
<div className="mt-0.5 text-xs text-slate-400">{fmtMoney(d.draftsTotalValue)} VND</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="rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm transition hover:border-brand-300 hover:shadow"
|
||||
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-center justify-between">
|
||||
<div className="text-xs font-medium text-slate-500">Chờ tôi duyệt</div>
|
||||
<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 text-2xl font-bold text-slate-900 tabular-nums">{d.pendingMyApproval}</div>
|
||||
<div className="mt-0.5 text-xs text-slate-400">Click để xem hộp thư</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-xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-slate-500">Sắp quá hạn (24h)</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">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 text-2xl font-bold text-amber-600 tabular-nums">{d.dueSoon}</div>
|
||||
<div className="mt-2.5 text-2xl font-semibold leading-none text-amber-700 tabular-nums">{d.dueSoon}</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-slate-500">Đã quá hạn</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 text-2xl font-bold text-red-600 tabular-nums">{d.overdue}</div>
|
||||
<div className="mt-2.5 text-2xl font-semibold leading-none text-red-600 tabular-nums">{d.overdue}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -113,10 +141,10 @@ export function DashboardPage() {
|
||||
if (stats.isLoading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageHeader title="Tổng quan" />
|
||||
<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-24 animate-pulse rounded-lg bg-slate-100" />
|
||||
<div key={i} className="h-[88px] animate-pulse rounded-lg border border-slate-200 bg-slate-50" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@ -132,7 +160,7 @@ export function DashboardPage() {
|
||||
|
||||
<MyDashboardRow />
|
||||
|
||||
<h2 className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-500">Toàn hệ thống</h2>
|
||||
<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} />
|
||||
@ -142,12 +170,12 @@ export function DashboardPage() {
|
||||
<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-6 lg:grid-cols-2">
|
||||
<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-sm font-semibold text-slate-700">HĐ theo phase</h2>
|
||||
<div className="space-y-2">
|
||||
{d.byPhase.length === 0 && <div className="py-6 text-center text-sm text-slate-400">Chưa có HĐ nào</div>}
|
||||
<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)
|
||||
@ -159,10 +187,10 @@ export function DashboardPage() {
|
||||
<div className="w-36">
|
||||
<PhaseBadge phase={p.phase} />
|
||||
</div>
|
||||
<div className="h-2 flex-1 rounded-full bg-slate-100">
|
||||
<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-12 text-right font-mono text-xs text-slate-600">{p.count}</div>
|
||||
<div className="w-10 text-right text-xs font-medium text-slate-600 tabular-nums">{p.count}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
@ -171,7 +199,7 @@ export function DashboardPage() {
|
||||
|
||||
{/* Monthly value */}
|
||||
<section className="rounded-lg border border-slate-200 bg-white p-5">
|
||||
<h2 className="mb-4 text-sm font-semibold text-slate-700">Giá trị HĐ theo tháng (12 tháng gần nhất)</h2>
|
||||
<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}`,
|
||||
@ -184,7 +212,7 @@ export function DashboardPage() {
|
||||
|
||||
{/* Top suppliers */}
|
||||
<section className="rounded-lg border border-slate-200 bg-white p-5">
|
||||
<h2 className="mb-4 text-sm font-semibold text-slate-700">Top NCC theo số HĐ</h2>
|
||||
<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,
|
||||
@ -196,7 +224,7 @@ export function DashboardPage() {
|
||||
|
||||
{/* Top projects */}
|
||||
<section className="rounded-lg border border-slate-200 bg-white p-5">
|
||||
<h2 className="mb-4 text-sm font-semibold text-slate-700">Top dự án theo số HĐ</h2>
|
||||
<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,
|
||||
|
||||
Reference in New Issue
Block a user