@schandlergarcia/sf-web-components 1.0.0 → 1.0.1

package/.a4drules/features/command-center-dashboard-rule.md

@@ -0,0 +1,46 @@
+---
+paths:
+  - "**/components/pages/*.jsx"
+  - "**/components/pages/*.tsx"
+  - "**/components/pages/CommandCenter.tsx"
+---
+
+# Command Center Dashboard Rules (MANDATORY)
+
+These rules are non-negotiable for all files in `src/components/pages/`.
+
+## Before writing ANY code, load these skills
+
+You MUST load the **command-center-builder** and **component-library** skills before writing or editing dashboard pages. These skills contain the full component API reference and builder rules. Do not proceed without them.
+
+## Critical constraints
+
+1. **File extension must be `.jsx`** — not `.tsx`. Rename if needed.
+
+2. **Use ONLY library components** from `@/components/library` for cards, charts, tables, lists. Never hand-roll HTML cards (`<div className="bg-white border rounded...">`).
+
+3. **Charts: ONLY `ChartCard` + `D3Chart` or `GeoMap`** — Do NOT use Recharts, Chart.js, or any third-party chart library. Do NOT `npm install` any chart or map packages (react-simple-maps, recharts, chart.js, nivo, etc.). Everything you need is in the library.
+
+4. **Maps: use `GeoMap`** from `@/components/library` — Do NOT install react-simple-maps or any other map library.
+
+5. **No shadcn imports** (`@/components/ui/`) — use library equivalents. No Lucide icons — use Heroicons (`@heroicons/react`). No `cn()` utility.
+
+6. **No dashboard-level navigation** — no `<nav>`, no tab bars, no `useState` for switching between page sections. Build a single scrollable page. The app shell handles navigation.
+
+7. **WidgetCard does NOT accept children** — pass content via `sections` prop: `<WidgetCard sections={[{ id: "main", content: <div>...</div> }]} />`. Children are silently ignored.
+
+8. **ListCard avatar** — do NOT pass initials strings (treated as image URL). Omit `avatar` to auto-generate initials from `title`/`name`.
+
+9. **BaseCard applies `p-4` padding** — do NOT add extra `p-5`/`p-6` to WidgetCard `header` or section `content`.
+
+10. **No forbidden colors** — never use `text-white`, `text-black`, `bg-black`. Use slate scale: `text-slate-50`, `text-slate-900`, `bg-slate-900`.
+
+11. **`useDataSource`** is required — wire all data through `useDataSource({ sample, live })` for sample/live mode.
+
+12. **Run `npm run validate:dashboard`** before reporting done — fix ALL errors, zero tolerance. Never dismiss errors as "justified".
+
+13. **Do NOT `npm install` any packages** for dashboard work. The component library and existing dependencies have everything needed.
+
+14. **Heroicon names** — common correct names: `PaperAirplaneIcon` (not PlaneIcon), `BuildingOfficeIcon` (not HotelIcon), `BanknotesIcon` (not MoneyIcon), `ExclamationTriangleIcon` (not AlertIcon), `UserIcon` (not PersonIcon).
+
+15. **Wire the dashboard as the home page.** After creating your dashboard and updating `CommandCenter.tsx`, also update `src/routes.tsx`: set `Home` as the index route (it renders CommandCenter which renders your dashboard) and move `Search` to `/search`. The dashboard must be the first thing users see at `/`.