4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T27cc,import { useState } from 'react' import { Avatar } from '../avatar' import { BottomNav, type NavItem } from '../BottomNav' import { Button } from '../Button' import { Select } from '../controls' import { Empty } from '../feedback' import { Field, Input, Textarea } from '../Input' import { Row, Shell, Sidebar, Stack } from '../layout' import { Badge, Blob } from '../media' import { NavLink } from '../NavLink' import { Segmented } from '../Segmented' import { Card, RowCard } from '../surface' import { Eyebrow, Heading, Text } from '../text' type Stage = 'lead' | 'active' | 'at-risk' type StageFilter = 'all' | Stage interface Customer { id: string name: string company: string email: string value: number stage: Stage owner: string tone: 'purple' | 'pink' | 'blue' | 'mint' } const CUSTOMERS: Customer[] = [ { id: 'ada', name: 'Ada Lovelace', company: 'Analytical', email: 'ada@example.com', value: 18400, stage: 'active', owner: 'Maya', tone: 'purple' }, { id: 'grace', name: 'Grace Hopper', company: 'Compiler Co.', email: 'grace@example.com', value: 9200, stage: 'lead', owner: 'Noah', tone: 'blue' }, { id: 'katherine', name: 'Katherine Johnson', company: 'Orbital', email: 'kj@example.com', value: 24600, stage: 'active', owner: 'Maya', tone: 'mint' }, { id: 'alan', name: 'Alan Turing', company: 'Bombe Labs', email: 'alan@example.com', value: 7800, stage: 'at-risk', owner: 'Iris', tone: 'pink' }, ] const NAV: NavItem[] = [ { href: '/crm', label: 'Customers', icon: 'users', tone: 'purple' }, { href: '/crm/pipeline', label: 'Pipeline', icon: 'log', tone: 'mint' }, { href: '/crm/activity', label: 'Activity', icon: 'activity', tone: 'blue' }, { href: '/crm/reports', label: 'Reports', icon: 'chart', tone: 'yellow' }, { href: '/crm/settings', label: 'Settings', icon: 'settings', tone: 'orange' }, ] const STAGE_TONE = { lead: 'blue', active: 'mint', 'at-risk': 'pink' } as const const STAGES = [ { value: 'lead', label: 'Lead' }, { value: 'active', label: 'Active' }, { value: 'at-risk', label: 'At risk' }, ] const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }) /** A complete customer workspace with filtering, responsive master/detail, * editable stages, and notes that persist while the screen is mounted. */ export function CrmBlock() { const [query, setQuery] = useState('') const [filter, setFilter] = useState('all') const [activeId, setActiveId] = useState(CUSTOMERS[0]!.id) const [pane, setPane] = useState<'list' | 'detail'>('list') const [stages, setStages] = useState>( Object.fromEntries(CUSTOMERS.map((customer) => [customer.id, customer.stage])), ) const [draft, setDraft] = useState('') const [notes, setNotes] = useState>({}) const customers = CUSTOMERS.filter((customer) => { const stage = stages[customer.id]! const matchesFilter = filter === 'all' || stage === filter const haystack = `${customer.name} ${customer.company} ${customer.email}`.toLowerCase() return matchesFilter && haystack.includes(query.toLowerCase()) }) const active = CUSTOMERS.find((customer) => customer.id === activeId) ?? CUSTOMERS[0]! const open = (id: string) => { setActiveId(id) setPane('detail') setDraft('') } const addNote = () => { const note = draft.trim() if (!note) return setNotes((current) => ({ ...current, [active.id]: [...(current[active.id] ?? []), note] })) setDraft('') } return ( <> Orbit CRM {NAV.map((item) => ( {item.label} ))} Customers Keep every relationship warm.

{(id, describedBy) => ( )} {customers.length === 0 ? ( Try a broader search or another stage. ) : customers.map((customer) => ( open(customer.id)} > {customer.name} {customer.company} ))}

{active.name} {active.company} {stages[active.id]}

Account value{money.format(active.value)} Owner{active.owner} Email{active.email}

{(id, describedBy) => (

)}
                    </Field>
                    <Row justify="end">
                      <Button size="sm" onClick={addNote} disabled={!draft.trim()}>Save note</Button>
                    </Row>
                  </Stack>
                </Stack>
              </Card>
            </div>
          </div>
        </Stack>
      </Shell>
      <BottomNav primary={NAV.slice(0, 4)} groups={[{ title: 'CRM', items: NAV }]} currentPath="/crm" />
    </>
  )
}
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/avatar.json","https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/bottom-nav.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/controls.json","https://1st-pouf.worksonmy.dev/r/feedback.json","https://1st-pouf.worksonmy.dev/r/input.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/nav-link.json","https://1st-pouf.worksonmy.dev/r/segmented.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/crm.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/crm.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>