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>
30 lines
3.2 KiB
HTML
30 lines
3.2 KiB
HTML
<!-- @dsCard group="Components" name="Cards & KPIs" subtitle="rounded-lg border bg-white shadow-sm · stat cards" width="780" height="340" -->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>PPMS · Cards</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:{600:"#2563eb"},success:{700:"#15803d"},danger:{700:"#b91c1c"},neutral:{200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",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}.mono{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">Cards & KPI stats</h2>
|
||
<p class="mt-1 text-sm text-neutral-600">Card = <code>rounded-lg border border-neutral-200 bg-white shadow-sm</code>. KPI stat cards drop the shadow, use <b>p-4</b>.</p>
|
||
<div class="mt-4 grid gap-4 lg:grid-cols-2">
|
||
<div class="rounded-lg border border-neutral-200 bg-white shadow-sm">
|
||
<div class="flex flex-col gap-1 p-6 pb-4"><h3 class="text-base font-semibold text-neutral-900">Vendor details</h3><p class="text-sm text-neutral-500">GST-verified supplier on file.</p></div>
|
||
<div class="space-y-1 p-6 pt-0 text-sm text-neutral-600"><p>Acme Marine Supplies Pvt Ltd</p><p class="mono text-xs text-neutral-400">GSTIN 27ABCDE1234F1Z5</p></div>
|
||
<div class="flex items-center gap-2 p-6 pt-0"><button class="inline-flex h-8 items-center rounded-lg bg-primary-600 px-3 text-xs font-medium text-white">Edit</button><button class="inline-flex h-8 items-center rounded-lg border border-neutral-300 bg-white px-3 text-xs font-medium text-neutral-700">View POs</button></div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Open POs</p><p class="mt-1.5 text-xl font-semibold">24</p><p class="mt-0.5 text-xs text-success-700">▲ 8% vs last month</p></div>
|
||
<div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Awaiting approval</p><p class="mt-1.5 text-xl font-semibold">7</p><p class="mt-0.5 text-xs text-neutral-400">across 3 vessels</p></div>
|
||
<div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Spend (FY)</p><p class="mt-1.5 text-xl font-semibold">₹2.4 Cr</p><p class="mt-0.5 text-xs text-neutral-400">FY 2025–26</p></div>
|
||
<div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Overdue</p><p class="mt-1.5 text-xl font-semibold">2</p><p class="mt-0.5 text-xs text-danger-700">needs attention</p></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|