Custom Components

// src/app/data/torqueAdminService.tsimport type { DashboardMockModel, InvestorsMockModel } from '../models';const API_BASE_URL = import.meta.env.VITE_TORQUE_API_URL;interface TorqueAdminClient {  getDashboard(): Promise<unknown>;  getInvestors(): Promise<unknown>;}async function readJson(path: string): Promise<unknown> {  const response = await fetch(API_BASE_URL + path, {    credentials: 'include',  });  if (!response.ok) {    throw new Error('Torque API request failed.');  }  return response.json();}function toDashboardModel(payload: unknown): DashboardMockModel {  // Normalize SDK/API payloads into the same UI-ready model  // your mock dashboard already returns.  return payload as DashboardMockModel;}function toInvestorsModel(payload: unknown): InvestorsMockModel {  // Keep response wrappers, snake_case aliases, dates, and  // currency formatting out of Vue components.  return payload as InvestorsMockModel;}export function createTorqueAdminService(client: TorqueAdminClient) {  return {    async getDashboard(): Promise<DashboardMockModel> {      return toDashboardModel(await client.getDashboard());    },    async getInvestors(): Promise<InvestorsMockModel> {      return toInvestorsModel(await client.getInvestors());    },  };}export const adminService = createTorqueAdminService({  getDashboard: () => readJson('/dashboard'),  getInvestors: () => readJson('/investors'),});// If you use the Global Torque SDK directly, replace readJson()// with your configured SDK client methods here.

// src/app/view-models/useInvestorsViewModel.tsimport { computed, ref } from 'vue';import { adminService } from '../data/torqueAdminService';type InvestorViewMode = 'table' | 'pipeline';const ALL_STATUSES = 'All statuses';const ALL_FUNDS = 'All funds';export function useInvestorsViewModel() {  const rows = ref<InvestorRowModel[]>([]);  const pipelineDefinitions = ref<PipelineGroupModel[]>([]);  const search = ref('');  const statusFilter = ref(ALL_STATUSES);  const fundFilter = ref(ALL_FUNDS);  const mode = ref<InvestorViewMode>('table');  const loading = ref(false);  const error = ref<string | null>(null);  const filteredRows = computed(() =>    rows.value.filter((row) => (      (statusFilter.value === ALL_STATUSES || row.statusLabel === statusFilter.value)      && (fundFilter.value === ALL_FUNDS || row.fundLabel === fundFilter.value)      && row.investorLabel.toLowerCase().includes(search.value.trim().toLowerCase())    )),  );  const pipelineColumns = computed(() =>    pipelineDefinitions.value.map((group) => ({      ...group,      rows: filteredRows.value.filter((row) => row.statusLabel === group.statusLabel),    })),  );  async function refresh() {    loading.value = true;    error.value = null;    try {      const data = await adminService.getInvestors();      rows.value = data.rows;      pipelineDefinitions.value = data.pipelineGroups;    } catch {      error.value = 'Investor data could not be loaded.';    } finally {      loading.value = false;    }  }  return {    rows,    filteredRows,    pipelineColumns,    search,    statusFilter,    fundFilter,    mode,    loading,    error,    refresh,  };}