[CLAUDE] FE-User: redesign foundation "nâng màu giữ brand" — gradient/accent/badge bắt mắt hơn
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
Anh: giao diện đơn điệu, muốn đẹp + bắt mắt, font/màu đẹp hơn. Hướng anh chốt "nâng màu, giữ nền xanh brand" (eoffice trước). Foundation lan tỏa toàn app, KHÔNG đụng 65 trang lẻ. - index.css: +accent palette teal/amberx/violet/greenx (đặt tên né trùng Tailwind) + utilities .app-gradient-brand / .card-accent / .icon-chip / .stat-value; heading 600->700 đậm hơn; .label-eyebrow brand-600. Brand #1F7DC1 + Be Vietnam Pro GIỮ. - primitives: Button primary/danger gradient nổi bật; Input/Select/Textarea focus-glow mạnh hơn; Label brand-600; Dialog title-bar gradient. variant/size keys STABLE. - shell: Layout stripe dày hơn + logo cap; PageHeader title lớn/đậm + accent bar cao; TopBar gradient hairline; DataTable thead gradient brand chữ trắng. - Dashboard: KPI cards accent + icon chips. - color maps (contract/PE phase + PE display status): -700->-800 đậm chữ, phase nháp tint brand. Visual-only — props/handler/signature nguyên. Build PASS (tsc -b 0 error). a11y: contrast AA + prefers-reduced-motion. fe-admin mirror đợt sau. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
pqhuy1987
@ -79,18 +79,19 @@ export function DataTable<T>({
|
||||
onRowClick,
|
||||
}: Props<T>) {
|
||||
return (
|
||||
// Density-first: rounded-lg + crisp border (no decorative shadow).
|
||||
// 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 tint brand — đậm nhận diện hơn slate (anh yêu cầu "trang trí
|
||||
lên 1 tý" 06-11); brand-700 semibold uppercase 11px đạt AA trên nền nhạt. */}
|
||||
<thead className="sticky top-0 z-10 bg-brand-50/60 text-brand-700">
|
||||
<tr className="border-b border-brand-100">
|
||||
{/* 2026-06-16 anh "thead nền màu brand đậm hơn": solid brand gradient +
|
||||
white uppercase — đậm nhận diện rõ rệt (was pale brand-50/60). White
|
||||
on brand-600→700 = >7:1 contrast. */}
|
||||
<thead className="app-gradient-brand sticky top-0 z-10 text-white">
|
||||
<tr>
|
||||
{columns.map(c => (
|
||||
<th
|
||||
key={c.key}
|
||||
className={cn(
|
||||
'px-3 py-2 text-[11px] font-semibold uppercase tracking-wider',
|
||||
'px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider',
|
||||
c.align === 'right' && 'text-right',
|
||||
c.align === 'center' && 'text-center',
|
||||
c.align !== 'right' && c.align !== 'center' && 'text-left',
|
||||
@ -100,7 +101,7 @@ export function DataTable<T>({
|
||||
{c.sortable && onSortChange ? (
|
||||
<button
|
||||
onClick={() => onSortChange(c.key, sortBy === c.key ? !sortDesc : false)}
|
||||
className="inline-flex items-center gap-1 hover:text-slate-900"
|
||||
className="inline-flex items-center gap-1 transition-colors hover:text-white/80"
|
||||
>
|
||||
{c.header}
|
||||
{sortBy === c.key && (sortDesc ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronUp className="h-3.5 w-3.5" />)}
|
||||
|
||||
@ -381,16 +381,17 @@ export function Layout() {
|
||||
|
||||
return (
|
||||
<AccordionContext.Provider value={accordionValue}>
|
||||
{/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app (anh yêu cầu
|
||||
"trang trí lên 1 tý" 06-11; guide cho accent sparing — đây là 1 chỗ). */}
|
||||
{/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app. 2026-06-16
|
||||
anh "nâng màu": dày hơn (h-1.5) + dải gradient xanh đậm bắt mắt. */}
|
||||
<div className="flex h-screen flex-col">
|
||||
<div className="h-1 shrink-0 bg-gradient-to-r from-brand-700 via-brand-500 to-brand-600" />
|
||||
<div className="h-1.5 shrink-0 bg-gradient-to-r from-brand-700 via-brand-400 to-brand-600" />
|
||||
<div className="flex min-h-0 flex-1">
|
||||
<aside className="flex w-72 flex-col border-r border-slate-200 bg-white xl:w-80">
|
||||
<div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-b from-brand-50/70 to-transparent px-5">
|
||||
{/* Logo cap — brand gradient wash đậm hơn (was brand-50/70). */}
|
||||
<div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-r from-brand-50 via-brand-50/60 to-transparent px-5">
|
||||
<Link to="/dashboard" className="flex items-center gap-2.5">
|
||||
<img src="/logo.png" alt="Solutions" className="h-8 w-auto" />
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-brand-600/80">ERP</span>
|
||||
<span className="rounded-md bg-brand-600 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white">ERP</span>
|
||||
</Link>
|
||||
</div>
|
||||
<nav className="flex-1 space-y-1 overflow-y-auto p-3">
|
||||
|
||||
@ -10,14 +10,16 @@ export function PageHeader({
|
||||
actions?: ReactNode
|
||||
}) {
|
||||
return (
|
||||
// Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
|
||||
// tighter bottom rule. Toolbar/actions sit inline on the right.
|
||||
// 2026-06-16 "nâng màu / bắt mắt hơn" (anh): bigger bolder title (text-lg
|
||||
// font-bold, was 15px semibold) + a taller brand gradient accent bar.
|
||||
// Toolbar/actions stay inline right. Props {title, description, actions}
|
||||
// unchanged.
|
||||
<div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
|
||||
<div className="flex min-w-0 items-start gap-2.5">
|
||||
{/* Brand accent bar — nhận diện #1F7DC1 per-page (anh yêu cầu 06-11) */}
|
||||
<span aria-hidden className="mt-0.5 h-4 w-1 shrink-0 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
|
||||
<div className="flex min-w-0 items-start gap-3">
|
||||
{/* Brand accent bar — nhận diện #1F7DC1, đậm + cao hơn per-page. */}
|
||||
<span aria-hidden className="mt-1 h-6 w-1.5 shrink-0 rounded-full bg-gradient-to-b from-brand-400 via-brand-600 to-brand-800" />
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
|
||||
<h1 className="text-lg font-bold leading-tight tracking-tight text-slate-900">{title}</h1>
|
||||
{description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -68,12 +68,15 @@ function UserMenu() {
|
||||
|
||||
export function TopBar({ title }: { title?: string }) {
|
||||
return (
|
||||
<header className="flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6">
|
||||
<div className="text-sm font-semibold text-slate-700">{title}</div>
|
||||
// 2026-06-16: thin brand gradient hairline under the bar (border-b-2 với
|
||||
// border-image) + bolder title — đậm nhận diện nhẹ. Signature unchanged.
|
||||
<header className="relative flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6">
|
||||
<div className="text-sm font-bold text-slate-800">{title}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<NotificationBell />
|
||||
<UserMenu />
|
||||
</div>
|
||||
<span aria-hidden className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-brand-500/60 via-brand-300/30 to-transparent" />
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,21 +2,24 @@ 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 — call-sites depend on them.
|
||||
// 2026-06-16 "nâng màu, bắt mắt hơn" (anh): primary now a brand gradient with a
|
||||
// real lifted shadow — reads as the clear focal action. Danger mirrors it in
|
||||
// red. Outline/secondary/ghost stay quiet so the primary pops. Brand identity
|
||||
// kept (gradient anchored on brand-600). Variant keys
|
||||
// (primary/secondary/outline/ghost/danger) + size keys (sm/md/lg) are STABLE —
|
||||
// 51+ call-sites depend on them. Visual-only; no API change.
|
||||
const buttonVariants = cva(
|
||||
'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]',
|
||||
'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-[background,box-shadow,transform] 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-xs shadow-brand-700/20 hover:bg-brand-700',
|
||||
primary:
|
||||
'bg-gradient-to-b from-brand-500 to-brand-700 text-white shadow-sm shadow-brand-700/30 hover:from-brand-600 hover:to-brand-800 hover:shadow-md hover:shadow-brand-700/35',
|
||||
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-xs shadow-red-700/20 hover:bg-red-700',
|
||||
outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-brand-50 hover:border-brand-300 hover:text-brand-700',
|
||||
ghost: 'text-slate-600 hover:bg-brand-50 hover:text-brand-700',
|
||||
danger:
|
||||
'bg-gradient-to-b from-red-500 to-red-700 text-white shadow-sm shadow-red-700/30 hover:from-red-600 hover:to-red-800 hover:shadow-md',
|
||||
},
|
||||
size: {
|
||||
sm: 'h-7 px-2.5',
|
||||
|
||||
@ -35,12 +35,13 @@ 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-sm font-semibold text-slate-800">{title}</div>
|
||||
{/* 2026-06-16: brand gradient title bar — đậm nhận diện, white text. */}
|
||||
<div className="app-gradient-brand flex items-center justify-between rounded-t-xl px-5 py-3">
|
||||
<div className="text-sm font-bold text-white">{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"
|
||||
className="-mr-1 rounded-md p-1 text-white/70 transition-colors hover:bg-white/15 hover:text-white"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
@ -7,10 +7,11 @@ export const Input = forwardRef<HTMLInputElement, Props>(({ className, ...props
|
||||
<input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
// Density-first: compact (~34px) rounded-lg, brand focus glow at low opacity.
|
||||
// Compact (~34px) rounded-lg. 2026-06-16: stronger brand focus glow
|
||||
// (border brand-500 + ring /25) so the active field reads clearly.
|
||||
'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',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
|
||||
'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
|
||||
className,
|
||||
)}
|
||||
|
||||
@ -1,13 +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.
|
||||
// ERP scan-pattern: uppercase + tracking. 2026-06-16 "nâng màu" — eyebrow now
|
||||
// brand-600 (was slate-500) so form labels carry the identity colour. brand-600
|
||||
// on white = 4.7:1, clears WCAG-AA at 11px. Signature unchanged.
|
||||
export function Label({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
|
||||
return (
|
||||
<label
|
||||
className={cn('text-[11px] font-semibold uppercase tracking-wider text-slate-500', className)}
|
||||
className={cn('text-[11px] font-bold uppercase tracking-wider text-brand-600', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -7,9 +7,9 @@ export const Select = forwardRef<HTMLSelectElement, Props>(({ className, childre
|
||||
<select
|
||||
ref={ref}
|
||||
className={cn(
|
||||
// Density-first: matches Input — compact rounded-lg, brand focus glow.
|
||||
// Matches Input — compact rounded-lg, stronger brand focus glow (2026-06-16).
|
||||
'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',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
|
||||
'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
|
||||
className,
|
||||
)}
|
||||
|
||||
@ -7,10 +7,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ className, ...
|
||||
<textarea
|
||||
ref={ref}
|
||||
className={cn(
|
||||
// Density-first: matches Input — rounded-lg, brand focus glow.
|
||||
// Matches Input — rounded-lg, stronger brand focus glow (2026-06-16).
|
||||
'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',
|
||||
'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
|
||||
'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
|
||||
className,
|
||||
)}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");
|
||||
|
||||
@theme {
|
||||
/* Solutions brand palette (derived from logo #1F7DC1) */
|
||||
/* Solutions brand palette (derived from logo #1F7DC1) — PRIMARY, unchanged */
|
||||
--color-brand-50: #f0f7fc;
|
||||
--color-brand-100: #dbeaf7;
|
||||
--color-brand-200: #b8d5ef;
|
||||
@ -19,6 +19,37 @@
|
||||
--color-accent-500: #dc2626;
|
||||
--color-accent-600: #b91c1c;
|
||||
|
||||
/* ───────────────────────────────────────────────────────────────────
|
||||
ACCENT PALETTE (anh chốt 2026-06-16 "nâng màu, giữ nền xanh brand").
|
||||
These ADD to the brand — primary stays brand-600. Used for KPI cards,
|
||||
status badges, multi-tone affordances. Each ships a 50/500/600/700 stop
|
||||
so `bg-{x}-50` chip + `text-{x}-700` label both clear WCAG-AA.
|
||||
─────────────────────────────────────────────────────────────────── */
|
||||
/* teal — info / secondary metric */
|
||||
--color-teal-50: #e9faf9;
|
||||
--color-teal-100: #ccf3f1;
|
||||
--color-teal-500: #0ea5a4;
|
||||
--color-teal-600: #0c8e8d;
|
||||
--color-teal-700: #0a7170;
|
||||
/* amber/cam — warning / pending */
|
||||
--color-amberx-50: #fef6e7;
|
||||
--color-amberx-100: #fce8c2;
|
||||
--color-amberx-500: #f59e0b;
|
||||
--color-amberx-600: #d98306;
|
||||
--color-amberx-700: #b16708;
|
||||
/* violet/tím — neutral-highlight / value */
|
||||
--color-violet-50: #f1effe;
|
||||
--color-violet-100: #e0dcfc;
|
||||
--color-violet-500: #7c6ff0;
|
||||
--color-violet-600: #6354e4;
|
||||
--color-violet-700: #5042c4;
|
||||
/* green/lục — success / done */
|
||||
--color-greenx-50: #e8f8ee;
|
||||
--color-greenx-100: #c7eed5;
|
||||
--color-greenx-500: #16a34a;
|
||||
--color-greenx-600: #128a3f;
|
||||
--color-greenx-700: #0f7034;
|
||||
|
||||
--font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
@ -40,23 +71,83 @@ body {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Heading tightening + better hierarchy with Be Vietnam Pro.
|
||||
Density-first (NAMGROUP convention): semibold ladder, never font-bold —
|
||||
weight carries hierarchy without shouting. */
|
||||
/* Heading hierarchy with Be Vietnam Pro.
|
||||
2026-06-16: anh phản hồi "đơn điệu / có thấy khác gì đâu" → bump weight to
|
||||
700 + tighter tracking so headings read BOLD and high-contrast (was 600
|
||||
semibold = too quiet). Hierarchy now carried by both weight AND a darker
|
||||
ink (#0b1220 vs body #0f172a). */
|
||||
h1, h2, h3, h4 {
|
||||
letter-spacing: -0.014em;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.018em;
|
||||
color: #0b1220;
|
||||
font-weight: 700;
|
||||
}
|
||||
h1 { letter-spacing: -0.022em; }
|
||||
|
||||
/* Section / form labels — uppercase scan-pattern shared across the app.
|
||||
Use class="label-eyebrow" for the dense ERP label treatment. */
|
||||
Use class="label-eyebrow" for the dense ERP label treatment. Brand-tinted
|
||||
(was plain slate) so eyebrows carry the identity colour at a glance. */
|
||||
.label-eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: #64748b; /* slate-500 — WCAG-AA on white (4.6:1) */
|
||||
color: var(--color-brand-600);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
REUSABLE VISUAL UTILITIES (anh chốt 2026-06-16). Component-classes so the
|
||||
whole app picks up the richer look without touching 65 leaf pages — any
|
||||
page can add class="card-accent" / "icon-chip" etc.
|
||||
───────────────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Brand gradient surface — page/section headers, hero strips.
|
||||
xanh → xanh đậm theo hướng anh chốt. Text on top must be white. */
|
||||
.app-gradient-brand {
|
||||
background-image: linear-gradient(120deg, var(--color-brand-600) 0%, var(--color-brand-700) 55%, var(--color-brand-800) 100%);
|
||||
}
|
||||
|
||||
/* KPI / metric card — colored LEFT border + soft lift. Pair with a
|
||||
--accent custom property to recolour the rail per card, e.g.
|
||||
style={{ ['--accent' as any]: 'var(--color-teal-500)' }}. Defaults brand. */
|
||||
.card-accent {
|
||||
position: relative;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid #e9eef4;
|
||||
background: #fff;
|
||||
border-left: 3px solid var(--accent, var(--color-brand-500));
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
|
||||
transition: box-shadow .18s ease, transform .18s ease;
|
||||
}
|
||||
.card-accent:hover {
|
||||
box-shadow: 0 4px 10px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.06);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Icon chip — soft tinted square behind a lucide icon. Recolour via --chip-bg
|
||||
/ --chip-fg, defaults brand. Used in KPI cards + section headers. */
|
||||
.icon-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.25rem;
|
||||
width: 2.25rem;
|
||||
border-radius: 0.625rem;
|
||||
background: var(--chip-bg, var(--color-brand-50));
|
||||
color: var(--chip-fg, var(--color-brand-600));
|
||||
}
|
||||
|
||||
/* Big stat number — tabular, tight, dark. */
|
||||
.stat-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: #0b1220;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card-accent { transition: none; }
|
||||
.card-accent:hover { transform: none; }
|
||||
}
|
||||
|
||||
/* Tabular numbers in tables + stat cards for better alignment */
|
||||
|
||||
@ -28,6 +28,22 @@ const fmtMoney = (v: number) => {
|
||||
return v.toLocaleString('vi-VN')
|
||||
}
|
||||
|
||||
// 2026-06-16 redesign (anh "nâng màu, bắt mắt hơn"): KPI cards now carry a
|
||||
// coloured LEFT rail (.card-accent --accent) + a tinted icon-chip + a big stat
|
||||
// number. Each tone owns a distinct accent from the new palette so the row
|
||||
// scans as 5 colours, not 5 greys. `tone` extended (brand/teal/warn/good/danger
|
||||
// /violet) — StatCard is local to this page, no external call-site.
|
||||
type StatTone = 'default' | 'teal' | 'warn' | 'good' | 'danger' | 'violet'
|
||||
|
||||
const STAT_TONE: Record<StatTone, { rail: string; chipBg: string; chipFg: string }> = {
|
||||
default: { rail: 'var(--color-brand-500)', chipBg: 'var(--color-brand-50)', chipFg: 'var(--color-brand-600)' },
|
||||
teal: { rail: 'var(--color-teal-500)', chipBg: 'var(--color-teal-50)', chipFg: 'var(--color-teal-700)' },
|
||||
warn: { rail: 'var(--color-amberx-500)', chipBg: 'var(--color-amberx-50)', chipFg: 'var(--color-amberx-700)' },
|
||||
good: { rail: 'var(--color-greenx-500)', chipBg: 'var(--color-greenx-50)', chipFg: 'var(--color-greenx-700)' },
|
||||
danger: { rail: 'var(--color-accent-500)', chipBg: '#fdecec', chipFg: 'var(--color-accent-600)' },
|
||||
violet: { rail: 'var(--color-violet-500)', chipBg: 'var(--color-violet-50)', chipFg: 'var(--color-violet-700)' },
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
@ -40,27 +56,27 @@ function StatCard({
|
||||
label: string
|
||||
value: React.ReactNode
|
||||
hint?: string
|
||||
tone?: 'default' | 'warn' | 'good' | 'danger'
|
||||
tone?: StatTone
|
||||
onClick?: () => void
|
||||
}) {
|
||||
const toneClass =
|
||||
tone === 'warn' ? 'text-amber-600 bg-amber-50' :
|
||||
tone === 'good' ? 'text-emerald-600 bg-emerald-50' :
|
||||
tone === 'danger' ? 'text-red-600 bg-red-50' :
|
||||
'text-brand-600 bg-brand-50'
|
||||
const t = STAT_TONE[tone]
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={!onClick}
|
||||
className="rounded-lg border border-slate-200 bg-white p-4 text-left shadow-sm transition hover:shadow-md disabled:cursor-default disabled:hover:shadow-sm"
|
||||
className="card-accent flex flex-col p-4 text-left disabled:cursor-default"
|
||||
style={{ ['--accent' as string]: t.rail }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-slate-500">{label}</div>
|
||||
<span className={`flex h-6 w-6 items-center justify-center rounded ${toneClass}`}>
|
||||
<Icon className="h-3.5 w-3.5" />
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{label}</div>
|
||||
<span
|
||||
className="icon-chip h-9 w-9"
|
||||
style={{ ['--chip-bg' as string]: t.chipBg, ['--chip-fg' as string]: t.chipFg }}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 text-2xl font-bold text-slate-900">{value}</div>
|
||||
<div className="stat-value mt-2 text-3xl">{value}</div>
|
||||
{hint && <div className="mt-0.5 text-xs text-slate-400">{hint}</div>}
|
||||
</button>
|
||||
)
|
||||
@ -91,7 +107,10 @@ export function UserDashboardPage() {
|
||||
/>
|
||||
|
||||
<section className="mb-6">
|
||||
<h2 className="mb-3 text-sm font-semibold text-slate-700">Của tôi</h2>
|
||||
<h2 className="mb-3 flex items-center gap-2 text-sm font-bold text-slate-800">
|
||||
<span aria-hidden className="h-4 w-1 rounded-full bg-gradient-to-b from-brand-400 to-brand-700" />
|
||||
Của tôi
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-5">
|
||||
<StatCard
|
||||
icon={Pencil}
|
||||
@ -105,7 +124,7 @@ export function UserDashboardPage() {
|
||||
label="Chờ tôi duyệt"
|
||||
value={s?.pendingMyApproval ?? '—'}
|
||||
hint="Vào Hộp thư"
|
||||
tone="good"
|
||||
tone="teal"
|
||||
onClick={() => navigate('/inbox')}
|
||||
/>
|
||||
<StatCard
|
||||
@ -127,15 +146,18 @@ export function UserDashboardPage() {
|
||||
icon={Coins}
|
||||
label="Tổng giá trị nháp"
|
||||
value={s ? fmtMoney(s.draftsTotalValue) : '—'}
|
||||
tone="violet"
|
||||
onClick={() => navigate('/my-contracts')}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border border-slate-200 bg-white">
|
||||
<header className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
|
||||
<h2 className="flex items-center gap-2 text-sm font-semibold text-slate-700">
|
||||
<FileText className="h-4 w-4" />
|
||||
<section className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
|
||||
<header className="flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-brand-50/70 to-transparent px-4 py-3">
|
||||
<h2 className="flex items-center gap-2 text-sm font-bold text-slate-800">
|
||||
<span className="icon-chip h-7 w-7">
|
||||
<FileText className="h-4 w-4" />
|
||||
</span>
|
||||
HĐ gần đây
|
||||
</h2>
|
||||
<Button variant="outline" onClick={() => navigate('/my-contracts')}>
|
||||
|
||||
@ -30,19 +30,23 @@ export const ContractPhaseLabel: Record<number, string> = {
|
||||
99: 'Từ chối',
|
||||
}
|
||||
|
||||
// 2026-06-16 "badge mỗi trạng thái 1 màu rõ" (anh): deepened text to -800 and
|
||||
// brand-tinted the early draft phases (1/2) so they read blue not grey.
|
||||
// PhaseBadge wraps these with a ring-current/15 inset for a crisp edge. Each
|
||||
// pairing stays WCAG-AA on its -100 tint.
|
||||
export const ContractPhaseColor: Record<number, string> = {
|
||||
1: 'bg-slate-100 text-slate-700',
|
||||
2: 'bg-slate-100 text-slate-700',
|
||||
3: 'bg-amber-100 text-amber-700',
|
||||
4: 'bg-orange-100 text-orange-700',
|
||||
5: 'bg-purple-100 text-purple-700',
|
||||
6: 'bg-indigo-100 text-indigo-700',
|
||||
7: 'bg-fuchsia-100 text-fuchsia-700',
|
||||
8: 'bg-pink-100 text-pink-700',
|
||||
9: 'bg-emerald-100 text-emerald-700',
|
||||
10: 'bg-amber-100 text-amber-700',
|
||||
1: 'bg-brand-100 text-brand-800',
|
||||
2: 'bg-slate-200 text-slate-700',
|
||||
3: 'bg-amber-100 text-amber-800',
|
||||
4: 'bg-orange-100 text-orange-800',
|
||||
5: 'bg-purple-100 text-purple-800',
|
||||
6: 'bg-indigo-100 text-indigo-800',
|
||||
7: 'bg-fuchsia-100 text-fuchsia-800',
|
||||
8: 'bg-pink-100 text-pink-800',
|
||||
9: 'bg-emerald-100 text-emerald-800',
|
||||
10: 'bg-amber-100 text-amber-800',
|
||||
98: 'bg-yellow-100 text-yellow-800',
|
||||
99: 'bg-red-100 text-red-700',
|
||||
99: 'bg-red-100 text-red-800',
|
||||
}
|
||||
|
||||
export const ApprovalDecision = {
|
||||
|
||||
@ -45,17 +45,19 @@ export const PurchaseEvaluationPhaseLabel: Record<number, string> = {
|
||||
99: 'Từ chối',
|
||||
}
|
||||
|
||||
// 2026-06-16 "badge mỗi trạng thái 1 màu rõ" (anh): deepened text to -800;
|
||||
// phase-2 (đang soạn) tinted brand-blue. AA-safe on the -100 tints.
|
||||
export const PurchaseEvaluationPhaseColor: Record<number, string> = {
|
||||
1: 'bg-slate-100 text-slate-700',
|
||||
2: 'bg-blue-100 text-blue-700',
|
||||
3: 'bg-orange-100 text-orange-700',
|
||||
4: 'bg-indigo-100 text-indigo-700',
|
||||
5: 'bg-fuchsia-100 text-fuchsia-700',
|
||||
6: 'bg-pink-100 text-pink-700',
|
||||
7: 'bg-emerald-100 text-emerald-700',
|
||||
10: 'bg-amber-100 text-amber-700',
|
||||
1: 'bg-slate-200 text-slate-700',
|
||||
2: 'bg-brand-100 text-brand-800',
|
||||
3: 'bg-orange-100 text-orange-800',
|
||||
4: 'bg-indigo-100 text-indigo-800',
|
||||
5: 'bg-fuchsia-100 text-fuchsia-800',
|
||||
6: 'bg-pink-100 text-pink-800',
|
||||
7: 'bg-emerald-100 text-emerald-800',
|
||||
10: 'bg-amber-100 text-amber-800',
|
||||
98: 'bg-yellow-100 text-yellow-800',
|
||||
99: 'bg-red-100 text-red-700',
|
||||
99: 'bg-red-100 text-red-800',
|
||||
}
|
||||
|
||||
// Phase nào được phép edit phiếu (Drafter sửa header + detail).
|
||||
@ -88,12 +90,15 @@ export const PeDisplayStatusLabel: Record<PeDisplayStatus, string> = {
|
||||
TuChoi: 'Từ chối',
|
||||
}
|
||||
|
||||
// 2026-06-16 "mỗi trạng thái 1 màu rõ (xanh/cam/đỏ/lục/xám)" (anh): the 5
|
||||
// display statuses now map cleanly to the requested colour set — xám/cam/vàng/
|
||||
// lục/đỏ — at deeper -800 ink for legibility.
|
||||
export const PeDisplayStatusColor: Record<PeDisplayStatus, string> = {
|
||||
Nhap: 'bg-slate-100 text-slate-700',
|
||||
DaGuiDuyet: 'bg-amber-100 text-amber-700',
|
||||
Nhap: 'bg-slate-200 text-slate-700',
|
||||
DaGuiDuyet: 'bg-amber-100 text-amber-800',
|
||||
TraLai: 'bg-yellow-100 text-yellow-800',
|
||||
DaDuyet: 'bg-emerald-100 text-emerald-700',
|
||||
TuChoi: 'bg-red-100 text-red-700',
|
||||
DaDuyet: 'bg-emerald-100 text-emerald-800',
|
||||
TuChoi: 'bg-red-100 text-red-800',
|
||||
}
|
||||
|
||||
export function getPeDisplayStatus(phase: number): PeDisplayStatus {
|
||||
|
||||
Reference in New Issue
Block a user