Customization Guide

You bought Track's source code, so you can change anything. This page points you to the files you're most likely to edit and gives prompts you can feed to Claude Code to get it right the first time.

Repo layout

src/
  components/     # React UI components
  features/       # Feature modules (boards, contacts, deals, etc.)
  lib/            # Shared utilities (supabase client, formatting)
  pages/          # Top-level routes
  theme.css       # Tokens: colors, spacing, radius, shadows
supabase/
  schema.sql      # Full database schema
  functions/      # Edge Functions (automation-runner, webhook-dispatcher)

Common customizations

Change brand colors

File: src/theme.css

Edit the CSS custom properties:

:root {
  --ark-accent: #f59e0b;        /* your primary brand color */
  --ark-accent-contrast: #1f1300;
  --ark-bg: #0b0f1a;
  /* ... */
}

Changes hot-reload in dev and rebuild on next Vercel deploy.

Add a custom field to every contact

Custom fields are designed to be added from the UI (Settings → Custom Fields). Only use a schema migration if the field needs to be enforced in SQL or used in full-text search. See supabase/schema.sql for examples.

Change a stage color

File: src/features/boards/stage-colors.ts

export const stageColors = {
  open: "#64748b",
  won: "#10b981",
  lost: "#ef4444",
} as const;

Add your own or override these.

Rename "Deal" to something else

If your team uses different language (e.g., "Opportunity", "Engagement"), change the display label without touching the database:

File: src/i18n/strings.ts

export const strings = {
  deal: {
    singular: "Opportunity",
    plural: "Opportunities",
  },
  // ...
};

Leave the database column names alone — they're referenced by API routes and Edge Functions.

Add a new automation action

File: src/features/automations/actions.ts

Register a new action:

export const actions = {
  // existing actions...
  sendSlackDM: {
    label: "Send Slack DM",
    schema: z.object({ userId: z.string(), message: z.string() }),
    run: async (ctx, params) => {
      await slackClient.postMessage(params.userId, params.message);
    },
  },
};

Then register the UI form in src/features/automations/action-forms/ and deploy.

Add a new report

Reports are SQL views plus a React chart component. Add a view to supabase/reports/ and register the component under src/features/reports/.

Tips for working with AI

Claude Code has the full Track repo plus a product-specific CLAUDE.md that explains conventions. When asking for a change:

• Name the feature directory — e.g., "in src/features/boards/". Narrower scope = better output.
• Reference the database — if your change touches data, mention which table. "Add a priority column to deals..."
• Ask for migrations — if you need a schema change, tell Claude to produce a migration SQL snippet you can paste into the Supabase SQL editor, not just edit schema.sql.
• Run it locally first — npm run dev and click through the new feature before pushing to Vercel. Claude is good but not perfect.

Example prompts that work well

Add a custom "Health Score" field to companies (0–100, integer). Compute it nightly via an Edge Function based on: days since last activity, open tasks count, deal value. Show it as a colored badge on the company list view.

Rename every instance of "Deal" in the UI to "Opportunity", keeping database columns unchanged. Update button labels, form labels, menu items, and the sidebar link.

The automation runner is logging too much. Add a log_level workspace setting (debug | info | warn | error, default info) that filters console.log calls in supabase/functions/track-automation-runner/.