+ navigate(`/pipeline/${lead.id}`)}
+ initial={{ opacity: 0, y: 10 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={{ delay: index * 0.015, duration: 0.22 }}
+ aria-label={`View ${lead.name}'s profile`}
+ >
+
+ {lead.name.slice(0, 1)}
+
+ {lead.name}
+ {lead.location || 'No project captured'}
+
+
+
+ {lead.stageEmoji}
+ {lead.stageLabel}
+
+ {Math.round(lead.qdScore)}
+
+ {lead.lastContactRelative} - {lead.lastContactChannel}
+
+
+ ))}
+ {leads.length === 0 &&
+ );
+}
+
function LeadCard({ lead, delay }: { lead: Lead; delay: number }) {
const navigate = useNavigate();
- const isHighIntent = lead.qdScore >= 70;
const isVaultLive = lead.isVaultActive;
return (
@@ -108,10 +153,7 @@ function LeadCard({ lead, delay }: { lead: Lead; delay: number }) {
animate={{
opacity: 1,
scale: 1,
- // Amber glow on vault engagement
- boxShadow: isVaultLive
- ? '0 0 16px rgba(245,158,11,0.40)'
- : 'var(--glass-shadow)',
+ boxShadow: isVaultLive ? '0 0 16px rgba(245,158,11,0.40)' : 'var(--glass-shadow)',
}}
transition={{ delay, duration: 0.3 }}
whileHover={{ scale: 1.02, y: -2 }}
@@ -119,18 +161,13 @@ function LeadCard({ lead, delay }: { lead: Lead; delay: number }) {
aria-label={`View ${lead.name}'s profile`}
>
+ Client
+ Stage
+ QD
+ Last contact
+
+ {leads.map((lead, index) => (
+ No pipeline leads found.
}
+
- {/* Avatar initial */}
);
}
-// ── Properties Section ────────────────────────────────────────
function PropertiesSection() {
const navigate = useNavigate();
const { properties, isLoading } = useStudioProperties();
@@ -45,7 +45,7 @@ function PropertiesSection() {
if (isLoading) {
return (
{lead.name.slice(0, 1)}
- {/* Identity */}
{lead.name}
- {lead.location && (
- {lead.location}
- )}
+ {lead.location && {lead.location}}
- {/* QD Ring */}
- {lead.lastContactRelative} · {lead.lastContactChannel}
+ {lead.lastContactRelative} - {lead.lastContactChannel}
- {/* Vault live indicator */}
{isVaultLive && (
@@ -155,10 +191,10 @@ function LeadCard({ lead, delay }: { lead: Lead; delay: number }) {
function KanbanSkeleton() {
return (
{section === 'properties' &&
- {[0, 1, 2, 3].map(i => (
+ {[0, 1, 2, 3].map((i) => (
- {[0, 1].map(j => (
+ {[0, 1].map((j) => (
))}
diff --git a/webos/src/pillars/studio/StudioPillar.module.css b/webos/src/pillars/studio/StudioPillar.module.css
index 953bd54..adb3fb3 100644
--- a/webos/src/pillars/studio/StudioPillar.module.css
+++ b/webos/src/pillars/studio/StudioPillar.module.css
@@ -19,4 +19,16 @@
.propName { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.propSub { font-size: 10px; color: var(--color-text-tertiary); }
.propPrice { font-size: var(--text-xs); color: var(--color-violet-light); font-weight: var(--font-medium); }
-.campaignsPlaceholder { padding: var(--space-8); }
+.campaignGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); padding: 0 var(--space-8) var(--space-8); overflow-y: auto; flex: 1; }
+.campaignSkeleton { min-height: 220px; border-radius: var(--radius-xl); }
+.campaignCard { display: flex; flex-direction: column; gap: var(--space-5); min-height: 220px; }
+.campaignTop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
+.campaignName { display: block; font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text-primary); }
+.campaignMeta { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
+.campaignStatus { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.28); color: var(--color-green); font-size: 10px; font-weight: var(--font-semibold); text-transform: uppercase; }
+.campaignStats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
+.campaignStat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.035); border: var(--glass-border); }
+.campaignStat small { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
+.campaignStat strong { font-size: var(--text-lg); color: var(--color-text-primary); }
+.campaignFooter { margin-top: auto; padding-top: var(--space-3); border-top: var(--glass-border); color: var(--color-text-secondary); font-size: var(--text-xs); }
+.emptyState { margin: 0 var(--space-8); padding: var(--space-8); border: var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-bg); color: var(--color-text-secondary); }
diff --git a/webos/src/pillars/studio/StudioPillar.tsx b/webos/src/pillars/studio/StudioPillar.tsx
index c686f72..680f8a7 100644
--- a/webos/src/pillars/studio/StudioPillar.tsx
+++ b/webos/src/pillars/studio/StudioPillar.tsx
@@ -1,14 +1,11 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../../shared/lib/apiClient';
import { useStudioProperties } from '../../shared/hooks/useStudio';
import styles from './StudioPillar.module.css';
-/**
- * StudioPillar — Pillar 3: Asset & Marketing Hub
- * Merges: Inventory + Catalyst
- * Two sections: Properties | Campaigns
- */
export default function StudioPillar() {
const [section, setSection] = useState<'properties' | 'campaigns'>('properties');
@@ -23,21 +20,24 @@ export default function StudioPillar() {
+ >
+ Properties
+
+ >
+ Campaigns
+
- {[0,1,2,3,4,5].map(i => (
+ {[0, 1, 2, 3, 4, 5].map((i) => (
))}
@@ -66,24 +66,20 @@ function PropertiesSection() {
whileTap={{ scale: 0.99 }}
aria-label={`View ${prop.name}`}
>
- {/* Property thumbnail */}
- {prop.thumbnailUrl
- ? 
- :
+ ) : (
+
🏗
- }
+ {prop.thumbnailUrl ? (
+ Property
+ )}
{prop.availableUnits !== undefined && (
-
- {prop.availableUnits} available
-
+ {prop.availableUnits} available
)}
{prop.name}
{prop.location}
- {prop.priceRange && (
- {prop.priceRange}
- )}
+ {prop.priceRange && {prop.priceRange}}
))}
@@ -91,13 +87,110 @@ function PropertiesSection() {
);
}
-// ── Campaigns Section ─────────────────────────────────────────
+interface CampaignSummary {
+ id: string;
+ name: string;
+ platform: string;
+ status: string;
+ budget: number;
+ spent: number;
+ impressions: number;
+ clicks: number;
+ conversions: number;
+ objective: string;
+ 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
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ Campaign data is unavailable. Check the Catalyst API route and Meta provider configuration.
+
+ );
+ }
+
+ if (campaigns.length === 0) {
+ return No campaigns found.
;
+ }
+
return (
-
- (`/crm/leads/${personId}/360`),
+ queryFn: async () => {
+ const payload = await api.get>(`/crm/client-360/${personId}`);
+ return mapClient360(payload.data);
+ },
staleTime: 30_000,
enabled: !!personId,
});
@@ -22,7 +25,10 @@ export function useConversations(personId: string) {
const qc = useQueryClient();
const query = useQuery({
queryKey: ['conversations', personId],
- queryFn: () => api.get(`/comms/threads/${personId}`),
+ queryFn: async () => {
+ const payload = await api.get>(`/crm/client-360/${personId}`);
+ return mapConversationEvents(payload.data);
+ },
staleTime: 10_000,
enabled: !!personId,
});
@@ -40,7 +46,10 @@ export function useConversations(personId: string) {
export function useClientProperties(personId: string) {
const query = useQuery({
queryKey: ['client-properties', personId],
- queryFn: () => api.get(`/crm/leads/${personId}/properties`),
+ queryFn: async () => {
+ const payload = await api.get>(`/crm/client-360/${personId}`);
+ return mapPropertyInterests(payload.data);
+ },
staleTime: 60_000,
enabled: !!personId,
});
@@ -54,7 +63,10 @@ export function useClientTasks(personId: string) {
const qc = useQueryClient();
const query = useQuery({
queryKey: ['client-tasks', personId],
- queryFn: () => api.get(`/crm/leads/${personId}/tasks`),
+ queryFn: async () => {
+ const payload = await api.get>(`/crm/client-360/${personId}`);
+ return mapTasks(payload.data);
+ },
staleTime: 30_000,
enabled: !!personId,
});
@@ -131,3 +143,173 @@ interface Task {
isDueToday?: boolean;
isAIGenerated?: boolean;
}
+
+interface Wrapped {
+ status: string;
+ data: T;
+}
+
+interface Client360Snapshot {
+ client_ref?: string;
+ identity?: {
+ person_id?: string;
+ full_name?: string;
+ primary_phone?: string | null;
+ primary_email?: string | null;
+ buyer_type?: string | null;
+ persona_labels?: string[];
+ };
+ current_lead?: {
+ status?: string | null;
+ budget_band?: string | null;
+ urgency?: string | null;
+ objections?: string[];
+ motivations?: string[];
+ };
+ active_opportunities?: Array<{
+ opportunity_id?: string;
+ stage?: string | null;
+ value?: number | null;
+ probability?: number | null;
+ expected_close_date?: string | null;
+ next_action?: string | null;
+ }>;
+ recent_interactions?: Array<{
+ interaction_id?: string;
+ channel?: string | null;
+ interaction_type?: string | null;
+ happened_at?: string | null;
+ summary?: string | null;
+ }>;
+ property_interests?: Array<{
+ interest_id?: string;
+ project_name?: string | null;
+ unit_preference?: string | null;
+ configuration?: string | null;
+ budget_min?: number | null;
+ budget_max?: number | null;
+ priority?: number | null;
+ }>;
+ tasks?: Array<{
+ reminder_id?: string;
+ title?: string | null;
+ notes?: string | null;
+ due_at?: string | null;
+ status?: string | null;
+ created_by_type?: string | null;
+ }>;
+ qd_overview?: Record;
+ risk_flags?: string[];
+ recommended_next_actions?: string[];
+}
+
+function scoreToPercent(value: number | null | undefined): number {
+ const safe = Number(value ?? 0);
+ const pct = safe <= 1 ? safe * 100 : safe;
+ return Math.max(0, Math.min(100, Math.round(pct)));
+}
+
+function bestQdScore(snapshot: Client360Snapshot): number {
+ const qd = snapshot.qd_overview ?? {};
+ const preferred = qd.intent_score ?? qd.engagement_score ?? qd.financial_qualification;
+ if (preferred?.current_value != null) return scoreToPercent(preferred.current_value);
+ const first = Object.values(qd).find((item) => item?.current_value != null);
+ return scoreToPercent(first?.current_value);
+}
+
+function stageLabel(status?: string | null): string {
+ return (status || 'new').replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function stageEmoji(status?: string | null): string {
+ if (!status) return 'N';
+ return status.slice(0, 1).toUpperCase();
+}
+
+function relativeDate(value?: string | null): string {
+ if (!value) return 'No contact yet';
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return 'Recently';
+ const diffMs = Date.now() - date.getTime();
+ const days = Math.floor(diffMs / 86_400_000);
+ if (days > 0) return `${days}d ago`;
+ const hours = Math.floor(diffMs / 3_600_000);
+ if (hours > 0) return `${hours}h ago`;
+ return 'Just now';
+}
+
+function mapClient360(snapshot: Client360Snapshot): Client360Data {
+ const identity = snapshot.identity ?? {};
+ const lead = snapshot.current_lead ?? {};
+ const interactions = snapshot.recent_interactions ?? [];
+ const last = interactions[0];
+ const qdScore = bestQdScore(snapshot);
+ const facts: Record = {};
+ if (lead.budget_band) facts.budget = lead.budget_band;
+ if (lead.urgency) facts.timeline = lead.urgency;
+ if (identity.buyer_type) facts.buyerType = identity.buyer_type;
+ if (identity.persona_labels?.length) facts.persona = identity.persona_labels.join(', ');
+
+ return {
+ id: identity.person_id || snapshot.client_ref || '',
+ name: identity.full_name || 'Unknown Client',
+ location: snapshot.property_interests?.[0]?.project_name || lead.budget_band || undefined,
+ primaryPhone: identity.primary_phone || undefined,
+ qdScore,
+ qdDelta: 0,
+ stageName: stageLabel(lead.status),
+ stageEmoji: stageEmoji(lead.status),
+ lastContactRelative: relativeDate(last?.happened_at),
+ lastContactChannel: last?.channel || 'crm',
+ aiInsight: snapshot.recommended_next_actions?.[0] || snapshot.active_opportunities?.[0]?.next_action || undefined,
+ extractedFacts: facts,
+ objections: [...(lead.objections ?? []), ...(snapshot.risk_flags ?? [])],
+ qdHistory: Object.entries(snapshot.qd_overview ?? {}).map(([label, item]) => ({
+ date: item.computed_at || new Date().toISOString(),
+ score: scoreToPercent(item.current_value),
+ label: label.replace(/_/g, ' '),
+ })),
+ };
+}
+
+function mapConversationEvents(snapshot: Client360Snapshot): ConversationEvent[] {
+ return (snapshot.recent_interactions ?? []).map((event, index) => {
+ const type = event.channel === 'email' ? 'email' : event.channel === 'call' || event.channel === 'phone_call' ? 'call' : 'whatsapp';
+ return {
+ id: event.interaction_id || `${snapshot.client_ref || 'client'}-${index}`,
+ type,
+ timestamp: event.happened_at || new Date().toISOString(),
+ timestampRelative: relativeDate(event.happened_at),
+ subject: event.interaction_type || undefined,
+ direction: 'outbound',
+ duration: undefined,
+ hasTranscript: false,
+ keyMoments: event.summary ? [event.summary] : [],
+ messages: type === 'whatsapp' ? [{ sender: 'client', text: event.summary || 'Interaction recorded in CRM.' }] : undefined,
+ };
+ });
+}
+
+function mapPropertyInterests(snapshot: Client360Snapshot): PropertyInterest[] {
+ return (snapshot.property_interests ?? []).map((item, index) => ({
+ id: item.interest_id || `${snapshot.client_ref || 'property'}-${index}`,
+ projectName: item.project_name || 'Unknown Project',
+ unitName: item.unit_preference || 'Preferred Unit',
+ config: item.configuration || 'Configuration not captured',
+ area: 'Area TBD',
+ price: item.budget_min != null && item.budget_max != null ? `₹${item.budget_min}Cr - ₹${item.budget_max}Cr` : 'Budget TBD',
+ isPrimary: index === 0 || item.priority === 1,
+ engagementLevel: index === 0 ? 'High' : 'Medium',
+ }));
+}
+
+function mapTasks(snapshot: Client360Snapshot): Task[] {
+ return (snapshot.tasks ?? []).map((task, index) => ({
+ id: task.reminder_id || `${snapshot.client_ref || 'task'}-${index}`,
+ label: task.title || task.notes || 'Follow up with client',
+ dueAt: task.due_at || undefined,
+ status: task.status === 'done' ? 'done' : task.status === 'snoozed' ? 'snoozed' : 'pending',
+ isDueToday: task.due_at ? new Date(task.due_at).toDateString() === new Date().toDateString() : false,
+ isAIGenerated: task.created_by_type === 'ai',
+ }));
+}
- Campaigns loading — Meta Ads integration active. -
+
+ {campaigns.map((campaign, index) => (
+
+
+ ))}
);
}
+
+function Metric({ label, value }: { label: string; value: string }) {
+ return (
+
+ {label}
+ {value}
+
+ );
+}
+
+function formatMoney(value: number): string {
+ return new Intl.NumberFormat('en-IN', {
+ style: 'currency',
+ currency: 'INR',
+ maximumFractionDigits: 0,
+ }).format(Number(value || 0));
+}
+
+function formatNumber(value: number): string {
+ return new Intl.NumberFormat('en-IN').format(Number(value || 0));
+}
diff --git a/webos/src/shared/hooks/useClient360.ts b/webos/src/shared/hooks/useClient360.ts
index d5d289a..03d7679 100644
--- a/webos/src/shared/hooks/useClient360.ts
+++ b/webos/src/shared/hooks/useClient360.ts
@@ -8,7 +8,10 @@ import { api } from '@/shared/lib/apiClient';
export function useClient360(personId: string) {
const query = useQuery({
queryKey: ['client360', personId],
- queryFn: () => api.get
+
+
+ {campaign.name}
+
+ {campaign.platform} - {campaign.objective}
+
+
+ {campaign.status}
+
+
+
+ Bid strategy: {campaign.bid_strategy || 'provider default'}
+
+