Hardik
2de883c70f
Captures the live PPMS visual language (tokens from globals.css + components/ui/* + lib/utils.ts) so new screens can be prototyped with the same look and feel. - Wireframe/design-system.html: single-page living style guide (color ramps, typography, radius/shadow/spacing, icons, app shell, buttons, badges, PO status badges, cards/KPIs, forms, tabs, tables, alerts/dialog, charts, formatting conventions, do/don't). - Wireframe/ds-bundle/: per-component @dsCard preview cards (Foundations / Layout / Components) used to sync the design system to the claude.ai Design System project. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
23 lines
2.6 KiB
HTML
23 lines
2.6 KiB
HTML
<!-- @dsCard group="Components" name="PO status badges" subtitle="13 lifecycle states → badge variants (lib/utils.ts)" width="760" height="320" -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>PPMS · PO status</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script>tailwind.config={theme:{extend:{colors:{primary:{100:"#dbeafe",700:"#1d4ed8"},success:{100:"#dcfce7",700:"#15803d"},warning:{100:"#fef3c7",700:"#b45309"},danger:{100:"#fee2e2",700:"#b91c1c"},neutral:{100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",600:"#525252",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif'],mono:['"JetBrains Mono"','ui-monospace','monospace']}}}}</script>
|
|
<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}code{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
|
|
</head>
|
|
<body class="bg-neutral-50 p-6 text-neutral-900">
|
|
<h2 class="text-lg font-semibold">PO status badges</h2>
|
|
<p class="mt-1 max-w-2xl text-sm text-neutral-600">Lifecycle states map to badge variants in <code>lib/utils.ts</code> (<code>PO_STATUS_LABELS</code> / <code>PO_STATUS_VARIANTS</code>). Reuse this mapping — don't invent new status colors.</p>
|
|
<div class="mt-4 grid gap-2 rounded-lg border border-neutral-200 bg-white p-5 sm:grid-cols-2 lg:grid-cols-3" id="g"></div>
|
|
<script>
|
|
const V={default:"bg-primary-100 text-primary-700",secondary:"bg-neutral-100 text-neutral-700",success:"bg-success-100 text-success-700",warning:"bg-warning-100 text-warning-700",danger:"bg-danger-100 text-danger-700",outline:"border border-neutral-300 text-neutral-600"};
|
|
const S=[["DRAFT","Draft","outline"],["SUBMITTED","Submitted","secondary"],["MGR_REVIEW","Under Review","secondary"],["VENDOR_ID_PENDING","Vendor ID Pending","warning"],["EDITS_REQUESTED","Edits Requested","warning"],["REJECTED","Rejected","danger"],["MGR_APPROVED","Approved","success"],["SENT_FOR_PAYMENT","Sent for Payment","default"],["PARTIALLY_PAID","Partially Paid","warning"],["PAID_DELIVERED","Paid","success"],["PARTIALLY_CLOSED","Partially Received","warning"],["CLOSED","Closed","secondary"],["CANCELLED","Cancelled","danger"]];
|
|
document.getElementById("g").innerHTML=S.map(([k,l,v])=>`<div class="flex items-center justify-between gap-2 rounded-md px-2 py-1.5"><span class="rounded-full px-2.5 py-0.5 text-xs font-medium ${V[v]}">${l}</span><code class="text-[10px] text-neutral-400">${k}</code></div>`).join("");
|
|
</script>
|
|
</body>
|
|
</html>
|