sayan/Velocity-OS
1
0
Fork 0
forked from sagnik/Velocity-OS
Code Pull Requests Activity

fix: harden pipeline navigation data loading

Browse Source
This commit is contained in:
Sagnik Ghosh
2026-05-02 13:05:26 +05:30
parent 08a19db035
commit 58628dac35
7 changed files with 169 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
webos/src/pillars/pipeline/PipelinePillar.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { QDRing } from './client360/QDRing';
@@ -7,7 +7,11 @@ import styles from './PipelinePillar.module.css';
export default function PipelinePillar() {
const [viewMode, setViewMode] = useState<'board' | 'list'>('board');
const { stages, isLoading } = useKanban();
const { stages, isLoading, isError, refetch } = useKanban();
useEffect(() => {
void refetch();
}, [refetch]);
return (
<div className={styles.root}>
@@ -36,6 +40,8 @@ export default function PipelinePillar() {
{isLoading ? (
<KanbanSkeleton />
) : isError ? (
<PipelineError onRetry={() => void refetch()} />
) : viewMode === 'board' ? (
<KanbanBoard stages={stages} />
) : (
@@ -45,6 +51,16 @@ export default function PipelinePillar() {
);
}
function PipelineError({ onRetry }: { onRetry: () => void }) {
return (
<div className={`${styles.emptyList} glass-card`}>
<strong>Pipeline data could not be loaded.</strong>
<span>Retry the CRM read model without refreshing the whole app.</span>
<button className="btn-ghost" onClick={onRetry}>Retry</button>
</div>
);
}
interface Stage {
id: string;
label: string;

10
webos/src/pillars/pipeline/client360/Client360.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import { motion, AnimatePresence } from 'framer-motion';
import { QDRing } from './QDRing';
import { ConversationsTab } from './tabs/Conversations';
@@ -30,12 +31,17 @@ const TABS: { id: Tab; label: string }[] = [
export default function Client360() {
const { personId } = useParams<{ personId: string }>();
const navigate = useNavigate();
const queryClient = useQueryClient();
const [activeTab, setActiveTab] = useState<Tab>('conversations');
const { client, isLoading, error } = useClient360(personId!);
const backToPipeline = () => {
void queryClient.invalidateQueries({ queryKey: ['kanban'] });
navigate('/pipeline', { replace: true });
};
if (isLoading) return <Client360Skeleton />;
if (error || !client) return <Client360Error onBack={() => navigate('/pipeline')} />;
if (error || !client) return <Client360Error onBack={backToPipeline} />;
const qdColor =
client.qdScore >= 70 ? 'var(--color-green)' :
@@ -52,7 +58,7 @@ export default function Client360() {
{/* Back button */}
<button
className={styles.backBtn}
onClick={() => navigate('/pipeline')}
onClick={backToPipeline}
aria-label="Back to Pipeline"
>
← Pipeline

11
webos/src/pillars/studio/StudioPillar.tsx
View File

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useQuery } from '@tanstack/react-query';
import { api } from '../../shared/lib/apiClient';
import { unwrapArray } from '../../shared/lib/apiShape';
import { useStudioProperties } from '../../shared/hooks/useStudio';
import styles from './StudioPillar.module.css';
@@ -101,19 +102,15 @@ interface CampaignSummary {
bid_strategy: string;
}
interface CampaignsResponse {
status: string;
data: CampaignSummary[];
}
function CampaignsSection() {
const { data, isLoading, error } = useQuery({
queryKey: ['studio-campaigns'],
queryFn: async () => {
const response = await api.get<CampaignsResponse>('/catalyst/campaigns');
return response.data ?? [];
const response = await api.get<unknown>('/catalyst/campaigns?limit=100&offset=0');
return unwrapArray<CampaignSummary>(response);
},
staleTime: 60_000,
refetchOnMount: 'always',
});
const campaigns = data ?? [];

38
webos/src/shared/hooks/useClient360.ts
View File

@@ -1,5 +1,6 @@
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/shared/lib/apiClient';
import { stableArray, unwrapObject } from '@/shared/lib/apiShape';
/**
* useClient360 — fetch unified client entity
@@ -9,8 +10,8 @@ export function useClient360(personId: string) {
const query = useQuery({
queryKey: ['client360', personId],
queryFn: async () => {
const payload = await api.get<Wrapped<Client360Snapshot>>(`/crm/client-360/${personId}`);
return mapClient360(payload.data);
const payload = await api.get<unknown>(`/crm/client-360/${personId}`);
return mapClient360(normalizeSnapshot(payload));
},
staleTime: 30_000,
enabled: !!personId,
@@ -26,8 +27,8 @@ export function useConversations(personId: string) {
const query = useQuery({
queryKey: ['conversations', personId],
queryFn: async () => {
const payload = await api.get<Wrapped<Client360Snapshot>>(`/crm/client-360/${personId}`);
return mapConversationEvents(payload.data);
const payload = await api.get<unknown>(`/crm/client-360/${personId}`);
return mapConversationEvents(normalizeSnapshot(payload));
},
staleTime: 10_000,
enabled: !!personId,
@@ -47,8 +48,8 @@ export function useClientProperties(personId: string) {
const query = useQuery({
queryKey: ['client-properties', personId],
queryFn: async () => {
const payload = await api.get<Wrapped<Client360Snapshot>>(`/crm/client-360/${personId}`);
return mapPropertyInterests(payload.data);
const payload = await api.get<unknown>(`/crm/client-360/${personId}`);
return mapPropertyInterests(normalizeSnapshot(payload));
},
staleTime: 60_000,
enabled: !!personId,
@@ -64,8 +65,8 @@ export function useClientTasks(personId: string) {
const query = useQuery({
queryKey: ['client-tasks', personId],
queryFn: async () => {
const payload = await api.get<Wrapped<Client360Snapshot>>(`/crm/client-360/${personId}`);
return mapTasks(payload.data);
const payload = await api.get<unknown>(`/crm/client-360/${personId}`);
return mapTasks(normalizeSnapshot(payload));
},
staleTime: 30_000,
enabled: !!personId,
@@ -144,11 +145,6 @@ interface Task {
isAIGenerated?: boolean;
}
interface Wrapped<T> {
status: string;
data: T;
}
interface Client360Snapshot {
client_ref?: string;
identity?: {
@@ -203,6 +199,22 @@ interface Client360Snapshot {
recommended_next_actions?: string[];
}
function normalizeSnapshot(payload: unknown): Client360Snapshot {
const snapshot = unwrapObject<Client360Snapshot>(payload);
if (!snapshot) return {};
return {
...snapshot,
identity: snapshot.identity ?? {},
current_lead: snapshot.current_lead ?? {},
active_opportunities: stableArray(snapshot.active_opportunities),
recent_interactions: stableArray(snapshot.recent_interactions),
property_interests: stableArray(snapshot.property_interests),
tasks: stableArray(snapshot.tasks),
risk_flags: stableArray(snapshot.risk_flags),
recommended_next_actions: stableArray(snapshot.recommended_next_actions),
};
}
function scoreToPercent(value: number | null | undefined): number {
const safe = Number(value ?? 0);
const pct = safe <= 1 ? safe * 100 : safe;

50
webos/src/shared/hooks/useKanban.ts
View File

@@ -1,5 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import { api } from '@/shared/lib/apiClient';
import { unwrapArray } from '@/shared/lib/apiShape';
/**
* useKanban — Pipeline Pillar kanban board data
@@ -8,11 +9,23 @@ import { api } from '@/shared/lib/apiClient';
export function useKanban() {
const query = useQuery({
queryKey: ['kanban'],
queryFn: () => api.get<KanbanStage[]>('/crm/pipeline/kanban'),
queryFn: async () => {
const payload = await api.get<unknown>('/crm/pipeline/kanban?limit=250&offset=0');
return unwrapArray<RawKanbanStage>(payload).map(normalizeStage);
},
staleTime: 30_000,
refetchInterval: 60_000,
refetchOnMount: 'always',
refetchOnWindowFocus: true,
retry: 1,
});
return { stages: query.data ?? [], isLoading: query.isLoading };
return {
stages: query.data ?? [],
isLoading: query.isLoading,
isError: query.isError,
error: query.error,
refetch: query.refetch,
};
}
export interface KanbanStage {
@@ -32,3 +45,36 @@ export interface KanbanLead {
lastContactChannel: string;
isVaultActive?: boolean;
}
interface RawKanbanStage {
id?: string;
stage?: string;
status?: string;
label?: string;
emoji?: string;
leads?: unknown;
items?: unknown;
data?: unknown;
}
function normalizeStage(stage: RawKanbanStage): KanbanStage {
const id = String(stage.id ?? stage.stage ?? stage.status ?? 'new');
const leads = unwrapArray<KanbanLead>(stage.leads ?? stage.items ?? stage.data).map(normalizeLead);
return {
id,
label: String(stage.label ?? id.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())),
emoji: String(stage.emoji ?? id.slice(0, 1).toUpperCase()),
leads,
};
}
function normalizeLead(lead: Partial<KanbanLead>): KanbanLead {
return {
...lead,
id: String(lead.id),
name: String(lead.name ?? 'Unnamed Client'),
qdScore: Number.isFinite(Number(lead.qdScore)) ? Number(lead.qdScore) : 0,
lastContactRelative: String(lead.lastContactRelative ?? 'No contact yet'),
lastContactChannel: String(lead.lastContactChannel ?? 'crm'),
};
}

60
webos/src/shared/hooks/useStudio.ts
View File

@@ -1,5 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import { api } from '@/shared/lib/apiClient';
import { stableArray, unwrapArray, unwrapObject } from '@/shared/lib/apiShape';
/**
* useStudioProperties — Studio Pillar property listing
@@ -8,15 +9,12 @@ export function useStudioProperties() {
const query = useQuery({
queryKey: ['studio-properties'],
queryFn: async () => {
const response = await api.get<InventoryPropertiesResponse | StudioProperty[]>('/inventory/properties');
const rawProperties = Array.isArray(response)
? response
: Array.isArray(response.properties)
? response.properties
: [];
const response = await api.get<unknown>('/inventory/properties?limit=100&offset=0');
const rawProperties = unwrapArray<InventoryPropertyRecord>(response, ['properties']);
return rawProperties.map(mapInventoryProperty);
},
staleTime: 120_000,
refetchOnMount: 'always',
});
return { properties: query.data ?? [], isLoading: query.isLoading };
}
@@ -27,9 +25,10 @@ export function useStudioProperties() {
export function useProperty(propertyId: string) {
const query = useQuery({
queryKey: ['property', propertyId],
queryFn: async () => mapInventoryPropertyDetail(
await api.get<InventoryPropertyRecord>(`/inventory/properties/${propertyId}`)
),
queryFn: async () => {
const payload = await api.get<unknown>(`/inventory/properties/${propertyId}`);
return mapInventoryPropertyDetail(unwrapObject<InventoryPropertyRecord>(payload) ?? {});
},
staleTime: 120_000,
enabled: !!propertyId,
});
@@ -60,10 +59,6 @@ export interface PropertyDetail {
amenities?: string[];
}
interface InventoryPropertiesResponse {
properties?: InventoryPropertyRecord[];
}
interface InventoryPropertyRecord {
property_id?: string;
id?: string;
@@ -77,11 +72,11 @@ interface InventoryPropertyRecord {
area?: string;
address?: string;
};
price_bands?: Array<{ label?: string; min?: number; max?: number; currency?: string }>;
unit_mix?: Array<{ configuration?: string; count?: number; available?: number; area?: string; price?: string }>;
price_bands?: unknown;
unit_mix?: unknown;
amenities?: string[];
media?: Array<{ url?: string; thumbnail_url?: string }>;
images?: string[];
media?: unknown;
images?: unknown;
thumbnailUrl?: string;
availableUnits?: number;
}
@@ -92,11 +87,12 @@ function mapLocation(location: InventoryPropertyRecord['location']): string {
}
function mapPriceRange(priceBands: InventoryPropertyRecord['price_bands']): string | undefined {
if (!Array.isArray(priceBands) || priceBands.length === 0) return undefined;
const mins = priceBands.map((band) => Number(band.min)).filter(Number.isFinite);
const maxes = priceBands.map((band) => Number(band.max)).filter(Number.isFinite);
if (!mins.length && !maxes.length) return priceBands[0]?.label;
const currency = priceBands[0]?.currency ?? 'INR';
const bands = stableArray<{ label?: string; min?: number; max?: number; currency?: string }>(priceBands);
if (bands.length === 0) return undefined;
const mins = bands.map((band) => Number(band.min)).filter(Number.isFinite);
const maxes = bands.map((band) => Number(band.max)).filter(Number.isFinite);
if (!mins.length && !maxes.length) return bands[0]?.label;
const currency = bands[0]?.currency ?? 'INR';
const min = mins.length ? Math.min(...mins) : undefined;
const max = maxes.length ? Math.max(...maxes) : undefined;
if (min !== undefined && max !== undefined) return `${currency} ${min} - ${max}`;
@@ -105,9 +101,11 @@ function mapPriceRange(priceBands: InventoryPropertyRecord['price_bands']): stri
}
function mapInventoryProperty(record: InventoryPropertyRecord): StudioProperty {
const mediaThumb = Array.isArray(record.media) ? record.media.find((item) => item.thumbnail_url || item.url) : undefined;
const availableUnits = Array.isArray(record.unit_mix)
? record.unit_mix.reduce((sum, unit) => sum + Number(unit.available ?? unit.count ?? 0), 0)
const media = stableArray<{ url?: string; thumbnail_url?: string }>(record.media);
const unitMix = stableArray<{ configuration?: string; count?: number; available?: number; area?: string; price?: string }>(record.unit_mix);
const mediaThumb = media.find((item) => item.thumbnail_url || item.url);
const availableUnits = unitMix.length
? unitMix.reduce((sum, unit) => sum + Number(unit.available ?? unit.count ?? 0), 0)
: record.availableUnits;
const stableId = record.property_id ?? record.id ?? record.project_name ?? record.name ?? 'unknown-property';
return {
@@ -122,12 +120,12 @@ function mapInventoryProperty(record: InventoryPropertyRecord): StudioProperty {
function mapInventoryPropertyDetail(record: InventoryPropertyRecord): PropertyDetail {
const base = mapInventoryProperty(record);
const primaryUnit = Array.isArray(record.unit_mix) ? record.unit_mix[0] : undefined;
const images = Array.isArray(record.images)
? record.images
: Array.isArray(record.media)
? record.media.map((item) => item.url).filter((url): url is string => Boolean(url))
: [];
const unitMix = stableArray<{ configuration?: string; area?: string; price?: string }>(record.unit_mix);
const media = stableArray<{ url?: string }>(record.media);
const primaryUnit = unitMix[0];
const images = stableArray<string>(record.images).length
? stableArray<string>(record.images)
: media.map((item) => item.url).filter((url): url is string => Boolean(url));
return {
...base,
config: primaryUnit?.configuration ?? record.property_type ?? 'Mixed configuration',

37
webos/src/shared/lib/apiShape.ts Normal file
View File

@@ -0,0 +1,37 @@
type JsonRecord = Record<string, unknown>;
function isRecord(value: unknown): value is JsonRecord {
return typeof value === 'object' && value !== null && !Array.isArray(value);
}
/**
* Accepts the response shapes used across the legacy Velocity API, the newer
* WebOS API, and paginated read endpoints. Components should render arrays,
* not transport envelopes.
*/
export function unwrapArray<T>(payload: unknown, keys: string[] = []): T[] {
if (Array.isArray(payload)) return payload as T[];
if (!isRecord(payload)) return [];
for (const key of [...keys, 'data', 'items', 'results', 'records', 'rows', 'value']) {
const candidate = payload[key];
if (Array.isArray(candidate)) return candidate as T[];
}
return [];
}
export function unwrapObject<T>(payload: unknown, keys: string[] = []): T | undefined {
if (!isRecord(payload)) return undefined;
for (const key of [...keys, 'data', 'record', 'result', 'item', 'value']) {
const candidate = payload[key];
if (isRecord(candidate)) return candidate as T;
}
return payload as T;
}
export function stableArray<T>(value: unknown): T[] {
return Array.isArray(value) ? value as T[] : [];
}