Orbit CRM

The kanban board is the architectural centrepiece of Orbit. Each deal card is a draggable element rendered within a column component that tracks hover state for drop targeting. Board state — stage, assignee, value, activity count — is managed in React context so changes made via drag-and-drop immediately reflect in the sidebar summary and activity feed without any prop-drilling through the component tree.

The contacts table uses a client-side sort-and-filter pattern: the full dataset loads once, and filtering by company, status, or tag is applied in-memory via a memoised sort function. A custom useDebounce hook prevents the search input from triggering a re-render on every keystroke. The contact detail modal is a portal-rendered overlay that preserves table scroll position on open and close — a small UX detail that users notice when it is missing.

The persistent collapsible sidebar uses a CSS transition on max-width rather than width, avoiding layout shifts in the rest of the page during collapse and expand. The collapsed or expanded state is stored in localStorage so the user's preferred layout survives page refresh — the same pattern used in production CRM tools like HubSpot and Pipedrive.