# Cadence CRM — Sidebar template package

A complete CRM screen set in the **far-left Sidebar** navigation style, built on the **vibn-ai-templates** component library in the light/minimal theme.

Worked example brand: **Cadence** (the product) / **Northwind** (the example workspace).

## Screens (13)

**Auth + onboarding** (full-screen, no sidebar yet — standard pattern)
| Screen | File |
|---|---|
| Sign up | `crm-onboarding.jsx` → `CRMSignUp` |
| Sign in | `crm-onboarding.jsx` → `CRMSignIn` |
| Onboarding 1 · Name workspace | `CRMOnbWorkspace` |
| Onboarding 2 · About your team | `CRMOnbAbout` |
| Onboarding 3 · Import contacts | `CRMOnbImport` |
| Onboarding 4 · Invite team | `CRMOnbInvite` |

**In-app** (every screen rendered inside `SidebarShell`)
| Screen | File |
|---|---|
| Home / dashboard | `crm-pages.jsx` → `CRMHome` |
| People (contacts table) | `CRMPeople` |
| Company record (detail) | `CRMRecord` |
| Deals (pipeline kanban) | `CRMPipeline` |
| Inbox (threads + conversation) | `CRMInbox` |
| Reports (charts + leaderboard) | `CRMReports` |
| Settings → Members (admin) | `CRMSettings` |

## The sidebar pattern

Every in-app screen wraps its body in `CRMShell`, which configures the kit's `SidebarShell`:

```jsx
const CRMShell = ({ active, children }) => (
  <SidebarShell
    brand={{ name: "Northwind", mark: <CadenceMark/> }}
    sections={crmSections(active)}   // sets the active nav item
    user={{ name: "Mira Reyes", email: "mira@northwind.io" }}
    search="Search or jump to…"
  >
    {children}
  </SidebarShell>
);
```

The nav is defined once in `crmSections(active)` — three groups: top-level (Home / Inbox / Tasks), **Records** (Companies / People / Deals), **Workspace** (Reports / Automations / Settings). Pass the active id and the matching item highlights.

## Dependencies & load order

This package depends on `vibn-ai-templates`. Load order matters:

```html
<link rel="stylesheet" href="vibn-ai-templates/tokens.css">

<script type="text/babel" src="vibn-ai-templates/icons.jsx"></script>
<script type="text/babel" src="vibn-ai-templates/components.jsx"></script>
<script type="text/babel" src="vibn-ai-templates/shells.jsx"></script>
<script type="text/babel" src="vibn-crm/crm-onboarding.jsx"></script>
<script type="text/babel" src="vibn-crm/crm-pages.jsx"></script>
```

Wrap the app in `class="theme-minimal"` (the default light theme). Because the whole kit is token-driven, you can re-skin the entire CRM to dark by swapping that one class to `theme-dark` — no page edits.

## Showcase

`Cadence CRM Templates.html` lays all 13 screens out on a design canvas in three sections (auth, onboarding, in-app). Drag artboards to reorder, or open any one fullscreen (←/→/Esc).

## What's template vs. reusable

- **Reusable** — everything in `vibn-ai-templates` (Button, Table, Card, Badge, Avatar, Tabs, Input, SidebarShell, …).
- **Template** — `crm-pages.jsx` and `crm-onboarding.jsx` are *compositions*. They show how to assemble the kit into real CRM screens. Copy them as starting points and swap in your data.