Linting and Formatting

2026-04-12 02:38:15 +00:00 · 2026-03-23 16:41:58 +05:30
parent 727a0728ee
commit 2c87a39733
175 changed files with 16535 additions and 11532 deletions
--- a/src/components/call-desk/context-panel.tsx
+++ b/src/components/call-desk/context-panel.tsx
@@ -1,15 +1,15 @@
-import { useEffect, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSparkles, faUser } from '@fortawesome/pro-duotone-svg-icons';
-import { AiChatPanel } from './ai-chat-panel';
-import { LiveTranscript } from './live-transcript';
-import { useCallAssist } from '@/hooks/use-call-assist';
-import { Badge } from '@/components/base/badges/badges';
-import { formatPhone, formatShortDate } from '@/lib/format';
-import { cx } from '@/utils/cx';
-import type { Lead, LeadActivity } from '@/types/entities';
+import { useEffect, useState } from "react";
+import { faSparkles, faUser } from "@fortawesome/pro-duotone-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Badge } from "@/components/base/badges/badges";
+import { useCallAssist } from "@/hooks/use-call-assist";
+import { formatPhone, formatShortDate } from "@/lib/format";
+import type { Lead, LeadActivity } from "@/types/entities";
+import { cx } from "@/utils/cx";
+import { AiChatPanel } from "./ai-chat-panel";
+import { LiveTranscript } from "./live-transcript";

-type ContextTab = 'ai' | 'lead360';
+type ContextTab = "ai" | "lead360";

 interface ContextPanelProps {
    selectedLead: Lead | null;
@@ -20,51 +20,51 @@ interface ContextPanelProps {
 }

 export const ContextPanel = ({ selectedLead, activities, callerPhone, isInCall, callUcid }: ContextPanelProps) => {
-    const [activeTab, setActiveTab] = useState<ContextTab>('ai');
+    const [activeTab, setActiveTab] = useState<ContextTab>("ai");

    // Auto-switch to lead 360 when a lead is selected
    useEffect(() => {
        if (selectedLead) {
-            setActiveTab('lead360');
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setActiveTab("lead360");
        }
    }, [selectedLead?.id]);

-    const { transcript, suggestions, connected: assistConnected } = useCallAssist(
-        isInCall ?? false,
-        callUcid ?? null,
-        selectedLead?.id ?? null,
-        callerPhone ?? null,
-    );
+    const {
+        transcript,
+        suggestions,
+        connected: assistConnected,
+    } = useCallAssist(isInCall ?? false, callUcid ?? null, selectedLead?.id ?? null, callerPhone ?? null);

-    const callerContext = selectedLead ? {
-        callerPhone: selectedLead.contactPhone?.[0]?.number ?? callerPhone,
-        leadId: selectedLead.id,
-        leadName: `${selectedLead.contactName?.firstName ?? ''} ${selectedLead.contactName?.lastName ?? ''}`.trim(),
-    } : callerPhone ? { callerPhone } : undefined;
+    const callerContext = selectedLead
+        ? {
+              callerPhone: selectedLead.contactPhone?.[0]?.number ?? callerPhone,
+              leadId: selectedLead.id,
+              leadName: `${selectedLead.contactName?.firstName ?? ""} ${selectedLead.contactName?.lastName ?? ""}`.trim(),
+          }
+        : callerPhone
+          ? { callerPhone }
+          : undefined;

    return (
        <div className="flex h-full flex-col">
            {/* Tab bar */}
            <div className="flex shrink-0 border-b border-secondary">
                <button
-                    onClick={() => setActiveTab('ai')}
+                    onClick={() => setActiveTab("ai")}
                    className={cx(
                        "flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear",
-                        activeTab === 'ai'
-                            ? "border-b-2 border-brand text-brand-secondary"
-                            : "text-tertiary hover:text-secondary",
+                        activeTab === "ai" ? "border-b-2 border-brand text-brand-secondary" : "text-tertiary hover:text-secondary",
                    )}
                >
                    <FontAwesomeIcon icon={faSparkles} className="size-3.5" />
                    AI Assistant
                </button>
                <button
-                    onClick={() => setActiveTab('lead360')}
+                    onClick={() => setActiveTab("lead360")}
                    className={cx(
                        "flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear",
-                        activeTab === 'lead360'
-                            ? "border-b-2 border-brand text-brand-secondary"
-                            : "text-tertiary hover:text-secondary",
+                        activeTab === "lead360" ? "border-b-2 border-brand text-brand-secondary" : "text-tertiary hover:text-secondary",
                    )}
                >
                    <FontAwesomeIcon icon={faUser} className="size-3.5" />
@@ -74,18 +74,15 @@ export const ContextPanel = ({ selectedLead, activities, callerPhone, isInCall,

            {/* Tab content */}
            <div className="flex-1 overflow-y-auto">
-                {activeTab === 'ai' && (
-                    isInCall ? (
+                {activeTab === "ai" &&
+                    (isInCall ? (
                        <LiveTranscript transcript={transcript} suggestions={suggestions} connected={assistConnected} />
                    ) : (
                        <div className="flex h-full flex-col p-4">
                            <AiChatPanel callerContext={callerContext} />
                        </div>
-                    )
-                )}
-                {activeTab === 'lead360' && (
-                    <Lead360Tab lead={selectedLead} activities={activities} />
-                )}
+                    ))}
+                {activeTab === "lead360" && <Lead360Tab lead={selectedLead} activities={activities} />}
            </div>
        </div>
    );
@@ -94,44 +91,50 @@ export const ContextPanel = ({ selectedLead, activities, callerPhone, isInCall,
 const Lead360Tab = ({ lead, activities }: { lead: Lead | null; activities: LeadActivity[] }) => {
    if (!lead) {
        return (
-            <div className="flex flex-col items-center justify-center py-16 text-center px-4">
+            <div className="flex flex-col items-center justify-center px-4 py-16 text-center">
                <FontAwesomeIcon icon={faUser} className="mb-3 size-8 text-fg-quaternary" />
                <p className="text-sm text-tertiary">Select a lead from the worklist to see their full profile.</p>
            </div>
        );
    }

-    const firstName = lead.contactName?.firstName ?? '';
-    const lastName = lead.contactName?.lastName ?? '';
-    const fullName = `${firstName} ${lastName}`.trim() || 'Unknown';
+    const firstName = lead.contactName?.firstName ?? "";
+    const lastName = lead.contactName?.lastName ?? "";
+    const fullName = `${firstName} ${lastName}`.trim() || "Unknown";
    const phone = lead.contactPhone?.[0];
    const email = lead.contactEmail?.[0]?.address;

    const leadActivities = activities
        .filter((a) => a.leadId === lead.id)
-        .sort((a, b) => new Date(b.occurredAt ?? b.createdAt ?? '').getTime() - new Date(a.occurredAt ?? a.createdAt ?? '').getTime())
+        .sort((a, b) => new Date(b.occurredAt ?? b.createdAt ?? "").getTime() - new Date(a.occurredAt ?? a.createdAt ?? "").getTime())
        .slice(0, 10);

    return (
-        <div className="p-4 space-y-4">
+        <div className="space-y-4 p-4">
            {/* Profile */}
            <div>
                <h3 className="text-lg font-bold text-primary">{fullName}</h3>
                {phone && <p className="text-sm text-secondary">{formatPhone(phone)}</p>}
                {email && <p className="text-xs text-tertiary">{email}</p>}
                <div className="mt-2 flex flex-wrap gap-1.5">
-                    {lead.leadStatus && <Badge size="sm" color="brand">{lead.leadStatus}</Badge>}
-                    {lead.leadSource && <Badge size="sm" color="gray">{lead.leadSource}</Badge>}
-                    {lead.priority && lead.priority !== 'NORMAL' && (
-                        <Badge size="sm" color={lead.priority === 'URGENT' ? 'error' : 'warning'}>{lead.priority}</Badge>
+                    {lead.leadStatus && (
+                        <Badge size="sm" color="brand">
+                            {lead.leadStatus}
+                        </Badge>
+                    )}
+                    {lead.leadSource && (
+                        <Badge size="sm" color="gray">
+                            {lead.leadSource}
+                        </Badge>
+                    )}
+                    {lead.priority && lead.priority !== "NORMAL" && (
+                        <Badge size="sm" color={lead.priority === "URGENT" ? "error" : "warning"}>
+                            {lead.priority}
+                        </Badge>
                    )}
                </div>
-                {lead.interestedService && (
-                    <p className="mt-2 text-sm text-secondary">Interested in: {lead.interestedService}</p>
-                )}
-                {lead.leadScore !== null && lead.leadScore !== undefined && (
-                    <p className="text-xs text-tertiary">Lead score: {lead.leadScore}</p>
-                )}
+                {lead.interestedService && <p className="mt-2 text-sm text-secondary">Interested in: {lead.interestedService}</p>}
+                {lead.leadScore !== null && lead.leadScore !== undefined && <p className="text-xs text-tertiary">Lead score: {lead.leadScore}</p>}
            </div>

            {/* AI Insight */}
@@ -139,12 +142,10 @@ const Lead360Tab = ({ lead, activities }: { lead: Lead | null; activities: LeadA
                <div className="rounded-lg bg-brand-primary p-3">
                    <div className="mb-1 flex items-center gap-1.5">
                        <FontAwesomeIcon icon={faSparkles} className="size-3 text-fg-brand-primary" />
-                        <span className="text-[10px] font-bold uppercase tracking-wider text-brand-secondary">AI Insight</span>
+                        <span className="text-[10px] font-bold tracking-wider text-brand-secondary uppercase">AI Insight</span>
                    </div>
                    {lead.aiSummary && <p className="text-xs text-primary">{lead.aiSummary}</p>}
-                    {lead.aiSuggestedAction && (
-                        <p className="mt-1 text-xs font-semibold text-brand-secondary">{lead.aiSuggestedAction}</p>
-                    )}
+                    {lead.aiSuggestedAction && <p className="mt-1 text-xs font-semibold text-brand-secondary">{lead.aiSuggestedAction}</p>}
                </div>
            )}

@@ -159,7 +160,8 @@ const Lead360Tab = ({ lead, activities }: { lead: Lead | null; activities: LeadA
                                <div className="min-w-0 flex-1">
                                    <p className="text-xs text-primary">{a.summary}</p>
                                    <p className="text-[10px] text-quaternary">
-                                        {a.activityType}{a.occurredAt ? ` · ${formatShortDate(a.occurredAt)}` : ''}
+                                        {a.activityType}
+                                        {a.occurredAt ? ` · ${formatShortDate(a.occurredAt)}` : ""}
                                    </p>
                                </div>
                            </div>