73 lines
3.0 KiB
Markdown
73 lines
3.0 KiB
Markdown
# 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.
|