Customization

This guide covers common customizations from rebranding to extending the database schema.

Changing Brand Colors

Update the oklch tokens in app/globals.css:

:root {
  /* Change the primary hue from 270 (indigo) to your brand hue */
  --primary: oklch(0.55 0.15 YOUR_HUE);
  --primary-foreground: oklch(0.98 0.005 YOUR_HUE);
}

.dark {
  --primary: oklch(0.65 0.15 YOUR_HUE);
}

Common hue values: 0 (red), 30 (orange), 60 (yellow), 120 (green), 180 (teal), 210 (blue), 270 (indigo), 330 (pink).

Update secondary, accent, chart, and sidebar tokens to maintain visual harmony.

Changing Fonts

In app/layout.tsx, swap the Google Fonts imports:

// Replace these with your preferred fonts
import { Inter, DM_Sans, JetBrains_Mono } from "next/font/google"

Update the CSS variables in globals.css to match:

--font-heading: "Your Heading Font", sans-serif;
--font-body: "Your Body Font", sans-serif;
--font-mono: "Your Mono Font", monospace;

Customizing Pipeline Stages

Via the UI (Admin Only)

Navigate to /deals/settings and use the pipeline management interface to:

• Rename stages
• Change stage colors
• Adjust default probabilities
• Add or remove stages
• Reorder stages via drag-and-drop

All changes are persisted to the pipeline_stages table.

Via the Database

Insert or update stages directly:

-- Add a new stage
INSERT INTO pipeline_stages (pipeline_id, name, color, position, default_probability, description)
VALUES ('pipeline-uuid', 'Demo Scheduled', 'cyan', 3, 40, 'Product demo has been scheduled');

-- Reorder stages
UPDATE pipeline_stages SET position = 4 WHERE name = 'Proposal';

Replacing Seed Data with Your Data

Option 1: Admin Panel

Use the built-in forms at /contacts/new, /companies/new, and /deals/new to create records with full validation.

Option 2: Direct Database Insert

Insert data directly into your Supabase tables:

INSERT INTO companies (name, industry, website, employee_count, annual_revenue)
VALUES ('Your Company', 'Technology', 'https://example.com', 50, 5000000);

INSERT INTO contacts (first_name, last_name, email, job_title, company_id)
VALUES ('Jane', 'Doe', 'jane@example.com', 'CTO', 'company-uuid');

Option 3: CSV Import

Use the built-in import wizard at /contacts/import to bulk import contacts from a CSV file.

Extending the Database Schema

Adding a New Table

1. Create a new migration file (e.g., 005_custom.sql)
2. Define the table with RLS:

CREATE TABLE products (
  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
  name text NOT NULL,
  price numeric NOT NULL,
  description text,
  created_at timestamptz DEFAULT now()
);

ALTER TABLE products ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Team members can read" ON products
  FOR SELECT USING (is_team_member());

CREATE POLICY "Team members can insert" ON products
  FOR INSERT WITH CHECK (is_team_member());

CREATE POLICY "Admins can delete" ON products
  FOR DELETE USING (is_crm_admin());

3. Run the migration in Supabase SQL Editor
4. Regenerate types: npx supabase gen types typescript --project-id xxx > types/database.ts

Adding Columns to Existing Tables

ALTER TABLE contacts ADD COLUMN linkedin_url text;
ALTER TABLE deals ADD COLUMN deal_type text DEFAULT 'new_business';

Update the TypeScript types and any queries or forms that use these columns.

Adding New Pages

1. Create a new page in app/(dashboard)/your-page/page.tsx
2. Add the route to the sidebar in components/layout/dashboard-sidebar.tsx
3. Create Server Actions in lib/actions/your-domain.ts
4. Add RLS policies for any new tables

Example page structure:

// app/(dashboard)/your-page/page.tsx
import { createServerClient } from "@/lib/supabase/server"

export default async function YourPage() {
  const supabase = await createServerClient()
  const { data } = await supabase.from("your_table").select("*")

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold font-heading">Your Page</h1>
      {/* Your content */}
    </div>
  )
}

Customizing the Dashboard

The main dashboard at / can be reconfigured:

• Rearrange KPI cards -- edit the StatCard components in the page
• Add new chart types -- create a new chart component following the Recharts + ChartContainer pattern
• Change activity feed -- modify the activity query to show different types or time ranges
• Add widgets -- create new dashboard cards for metrics specific to your business

Customizing Email Templates

Default Merge Fields

The built-in merge fields are: {{firstName}}, {{lastName}}, {{companyName}}, {{dealName}}, {{dealValue}}, {{ownerName}}, {{meetingDate}}.

Adding Custom Merge Fields

1. Add the field to the merge field inserter component
2. Update the template rendering function to resolve the new field
3. Ensure the data is available when the template is used

Removing Features

To remove a feature (e.g., email sequences):

1. Remove the route: app/(dashboard)/email/sequences/
2. Remove the Server Actions: entries in lib/actions/email-sequences.ts
3. Remove the sidebar link in components/layout/dashboard-sidebar.tsx
4. Optionally remove the email_sequences and email_sequence_steps tables

The kit is modular -- removing one feature does not break others. Each module (contacts, deals, tasks, email) operates independently and can be removed without affecting the rest.

Adding Integrations

The /settings/integrations page provides a placeholder for third-party integrations. Common additions:

• Email service (SendGrid, Resend) -- for sending real emails from the compose screen
• Calendar sync (Google Calendar, Outlook) -- for syncing tasks and meetings
• Slack notifications -- for alerting team channels on deal stage changes
• Zapier/Make webhooks -- for connecting to external workflows

Add your integration logic in lib/integrations/ and configure credentials via environment variables.