Filters & Columns Configuration in filters.ts #

export const filters = defineFilters([
  {
    key: "status",
    label: "Lead Status",
    type: "select",
    options: [
      { label: "New", value: "new" },
      { label: "Contacted", value: "contacted" },
      { label: "Qualified", value: "qualified" },
      { label: "Converted", value: "converted" },
    ],
    defaultValue: "new",
  },
  {
    key: "search",
    label: "Search Leads",
    type: "text",
    placeholder: "Search by name or email...",
  },
]);

export const columns = defineColumns([
  { key: "id", label: "ID", type: "number", width: 80, isPrimaryKey: true },
  { key: "name", label: "Lead Name", type: "text" },
  { key: "email", label: "Email Address", type: "text" },
  { key: "phone", label: "Phone", type: "text", nullable: true },
  { key: "value", label: "Estimated Value", type: "currency", currency: "USD" },
  { key: "status", label: "Status", type: "badge" },
  { key: "createdAt", label: "Created At", type: "datetime" },
]);

export default { filters, columns };

interface OptionItem<TValue = string | number> {
  label: string;
  value: TValue;
}

type DynamicOptionsFn<TParent = unknown> = (
  parentValue: TParent,
  dolfin: DolfinApi
) => Promise<OptionItem[]> | OptionItem[];

interface FilterDefinition {
  /** Unique query key passed to context.filter in fetcher.ts */
  key: string;
  /** Human-readable label displayed in the toolbar */
  label: string;
  /** Filter control primitive */
  type: "select" | "multi_select" | "text" | "number" | "date_range" | "boolean";
  /** Optional placeholder text shown when no value is set */
  placeholder?: string;
  /** Optional initial default value */
  defaultValue?: unknown;
  /** Optional key of parent filter this control depends on */
  dependsOn?: string;
  /** Static array or dynamic resolver function (for select & multi_select) */
  options?: readonly OptionItem[] | OptionItem[] | DynamicOptionsFn;
}

export const filters = [
  {
    key: "status",
    label: "Lead Status",
    type: "select",
    options: [
      { label: "New", value: "new" },
      { label: "Contacted", value: "contacted" },
      { label: "Qualified", value: "qualified" },
      { label: "Converted", value: "converted" },
    ],
    defaultValue: "new",
  },
  {
    key: "tags",
    label: "Tags",
    type: "multi_select",
    options: [
      { label: "Enterprise", value: "enterprise" },
      { label: "Mid-Market", value: "mid_market" },
      { label: "SMB", value: "smb" },
    ],
  },
] as const;

export const filters = [
  {
    key: "pipelineId",
    label: "Pipeline",
    type: "select",
    options: [
      { label: "Standard Sales", value: 1 },
      { label: "Partnerships", value: 2 },
    ],
  },
  {
    key: "stageId",
    label: "Pipeline Stage",
    type: "select",
    dependsOn: "pipelineId",
    options: async (pipelineId: number, dolfin) => {
      if (!pipelineId) return [];

      // Query stages from CRM module
      const crm = await dolfin.crm.module(1);
      const stages = await crm.stages.list();

      // Return formatted OptionItem array
      return stages
        .filter((s) => s.pipelineId === pipelineId)
        .map((s) => ({ label: s.name, value: s.id }));
    },
  },
] as const;

export const filters = [
  {
    key: "country",
    label: "Country",
    type: "select",
    placeholder: "Select country...",
    options: [
      { label: "United States", value: "US" },
      { label: "Canada", value: "CA" },
      { label: "United Kingdom", value: "UK" },
    ],
  },
  {
    key: "state",
    label: "State / Province",
    type: "select",
    dependsOn: "country",
    placeholder: "Select state...",
    options: (country: string) => {
      const stateMap: Record<string, { label: string; value: string }[]> = {
        US: [
          { label: "California", value: "CA" },
          { label: "New York", value: "NY" },
          { label: "Texas", value: "TX" },
        ],
        CA: [
          { label: "Ontario", value: "ON" },
          { label: "Quebec", value: "QC" },
        ],
        UK: [
          { label: "England", value: "ENG" },
          { label: "Scotland", value: "SCT" },
        ],
      };
      return stateMap[country] || [];
    },
  },
] as const;

export default filters;

export const filters = [
  {
    key: "category",
    label: "Department",
    type: "select",
    options: [
      { label: "Electronics", value: "electronics" },
      { label: "Furniture", value: "furniture" },
    ],
  },
  {
    key: "productSubcategory",
    label: "Subcategory",
    type: "select",
    dependsOn: "category",
    placeholder: "Choose subcategory...",
    options: async (category: string, dolfin) => {
      if (!category) return [];

      const res = await dolfin.http.get(
        `https://api.inventory.example.com/categories/${category}/subcategories`,
        {
          headers: { "Authorization": "Bearer YOUR_SERVICE_TOKEN" },
          timeoutMs: 4000,
        }
      );

      // res.body contains the parsed JSON response
      const items = (res.body as { code: string; name: string }[]) || [];
      return items.map((item) => ({
        label: item.name,
        value: item.code,
      }));
    },
  },
] as const;

export default filters;