From dbd8391f2cc377688b27c014f339cf8b982709e5 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Tue, 24 Mar 2026 10:54:56 +0530
Subject: [PATCH] fix: UUID type mismatch, slot conflict, appt/enquiry tabs,
 dialler in header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed $id: ID! to $id: UUID! in all update mutations (4 files)
- Removed redundant slot availability check (UI already disables booked slots)
- Book Appt and Enquiry act as toggle tabs — one closes the other
- Dialler moved from FAB to header dropdown next to status toggle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/call-desk/active-call-card.tsx |   8 +-
 src/components/call-desk/appointment-form.tsx |  22 +---
 src/components/call-desk/call-widget.tsx      |   2 +-
 .../campaigns/campaign-edit-slideout.tsx      |   2 +-
 src/pages/call-desk.tsx                       | 117 ++++++++----------
 5 files changed, 64 insertions(+), 87 deletions(-)

diff --git a/src/components/call-desk/active-call-card.tsx b/src/components/call-desk/active-call-card.tsx
index 8d6b39f..597731e 100644
--- a/src/components/call-desk/active-call-card.tsx
+++ b/src/components/call-desk/active-call-card.tsx
@@ -272,12 +272,12 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
                     <div className="w-px h-6 bg-secondary mx-0.5" />
 
                     {/* Text+Icon primary actions */}
-                    <Button size="sm" color="secondary"
+                    <Button size="sm" color={appointmentOpen ? 'primary' : 'secondary'}
                         iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faCalendarPlus} className={className} {...rest} />}
-                        onClick={() => setAppointmentOpen(true)}>Book Appt</Button>
-                    <Button size="sm" color="secondary"
+                        onClick={() => { setAppointmentOpen(!appointmentOpen); setEnquiryOpen(false); }}>Book Appt</Button>
+                    <Button size="sm" color={enquiryOpen ? 'primary' : 'secondary'}
                         iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />}
-                        onClick={() => setEnquiryOpen(!enquiryOpen)}>Enquiry</Button>
+                        onClick={() => { setEnquiryOpen(!enquiryOpen); setAppointmentOpen(false); }}>Enquiry</Button>
                     <Button size="sm" color="secondary"
                         iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneArrowRight} className={className} {...rest} />}
                         onClick={() => setTransferOpen(!transferOpen)}>Transfer</Button>
diff --git a/src/components/call-desk/appointment-form.tsx b/src/components/call-desk/appointment-form.tsx
index 2263032..af09eb6 100644
--- a/src/components/call-desk/appointment-form.tsx
+++ b/src/components/call-desk/appointment-form.tsx
@@ -208,7 +208,7 @@ export const AppointmentForm = ({
             if (isEditMode && existingAppointment) {
                 // Update existing appointment
                 await apiClient.graphql(
-                    `mutation UpdateAppointment($id: ID!, $data: AppointmentUpdateInput!) {
+                    `mutation UpdateAppointment($id: UUID!, $data: AppointmentUpdateInput!) {
                         updateAppointment(id: $id, data: $data) { id }
                     }`,
                     {
@@ -224,22 +224,6 @@ export const AppointmentForm = ({
                 );
                 notify.success('Appointment Updated');
             } else {
-                // Double-check slot availability before booking
-                const checkResult = await apiClient.graphql<{ appointments: { edges: Array<{ node: { status: string } }> } }>(
-                    `{ appointments(filter: {
-                        doctorId: { eq: "${doctor}" },
-                        scheduledAt: { gte: "${date}T${timeSlot}:00", lte: "${date}T${timeSlot}:00" }
-                    }) { edges { node { status } } } }`,
-                );
-                const activeBookings = checkResult.appointments.edges.filter(e =>
-                    e.node.status !== 'CANCELLED' && e.node.status !== 'NO_SHOW',
-                );
-                if (activeBookings.length > 0) {
-                    setError('This slot was just booked by someone else. Please select a different time.');
-                    setIsSaving(false);
-                    return;
-                }
-
                 // Create appointment
                 await apiClient.graphql(
                     `mutation CreateAppointment($data: AppointmentCreateInput!) {
@@ -263,7 +247,7 @@ export const AppointmentForm = ({
                 // Update lead status if we have a matched lead
                 if (leadId) {
                     await apiClient.graphql(
-                        `mutation UpdateLead($id: ID!, $data: LeadUpdateInput!) {
+                        `mutation UpdateLead($id: UUID!, $data: LeadUpdateInput!) {
                             updateLead(id: $id, data: $data) { id }
                         }`,
                         {
@@ -291,7 +275,7 @@ export const AppointmentForm = ({
         setIsSaving(true);
         try {
             await apiClient.graphql(
-                `mutation CancelAppointment($id: ID!, $data: AppointmentUpdateInput!) {
+                `mutation CancelAppointment($id: UUID!, $data: AppointmentUpdateInput!) {
                     updateAppointment(id: $id, data: $data) { id }
                 }`,
                 {
diff --git a/src/components/call-desk/call-widget.tsx b/src/components/call-desk/call-widget.tsx
index 944864c..f46ca44 100644
--- a/src/components/call-desk/call-widget.tsx
+++ b/src/components/call-desk/call-widget.tsx
@@ -223,7 +223,7 @@ export const CallWidget = () => {
                 const newStatus = statusMap[disposition];
                 if (newStatus) {
                     await apiClient.graphql(
-                        `mutation UpdateLead($id: ID!, $data: LeadUpdateInput!) {
+                        `mutation UpdateLead($id: UUID!, $data: LeadUpdateInput!) {
                             updateLead(id: $id, data: $data) { id }
                         }`,
                         {
diff --git a/src/components/campaigns/campaign-edit-slideout.tsx b/src/components/campaigns/campaign-edit-slideout.tsx
index 00be675..1b2968b 100644
--- a/src/components/campaigns/campaign-edit-slideout.tsx
+++ b/src/components/campaigns/campaign-edit-slideout.tsx
@@ -53,7 +53,7 @@ export const CampaignEditSlideout = ({ isOpen, onOpenChange, campaign, onSaved }
             const budgetMicros = budget ? Number(budget) * 1_000_000 : null;
 
             await apiClient.graphql(
-                `mutation UpdateCampaign($id: ID!, $data: CampaignUpdateInput!) {
+                `mutation UpdateCampaign($id: UUID!, $data: CampaignUpdateInput!) {
                     updateCampaign(id: $id, data: $data) { id }
                 }`,
                 {
diff --git a/src/pages/call-desk.tsx b/src/pages/call-desk.tsx
index 04192bb..41b2cd8 100644
--- a/src/pages/call-desk.tsx
+++ b/src/pages/call-desk.tsx
@@ -72,6 +72,61 @@ export const CallDeskPage = () => {
                 </div>
 
                 <div className="flex items-center gap-2">
+                    {!isInCall && (
+                        <div className="relative">
+                            <button
+                                onClick={() => setDiallerOpen(!diallerOpen)}
+                                className={cx(
+                                    'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition duration-100 ease-linear',
+                                    diallerOpen
+                                        ? 'bg-brand-solid text-white'
+                                        : 'bg-secondary text-secondary hover:bg-secondary_hover',
+                                )}
+                            >
+                                <FontAwesomeIcon icon={faPhone} className="size-3" />
+                                Dial
+                            </button>
+                            {diallerOpen && (
+                                <div className="absolute top-full right-0 mt-2 w-72 rounded-xl bg-primary shadow-xl ring-1 ring-secondary p-4 z-50">
+                                    <div className="flex items-center justify-between mb-3">
+                                        <span className="text-sm font-semibold text-primary">Dial</span>
+                                        <button onClick={() => setDiallerOpen(false)} className="text-fg-quaternary hover:text-fg-secondary">
+                                            <FontAwesomeIcon icon={faXmark} className="size-4" />
+                                        </button>
+                                    </div>
+                                    <div className="flex items-center gap-2 mb-3 px-3 py-2.5 rounded-lg bg-secondary min-h-[40px]">
+                                        <span className="flex-1 text-lg font-semibold text-primary tracking-wider text-center">
+                                            {dialNumber || <span className="text-placeholder font-normal text-sm">Enter number</span>}
+                                        </span>
+                                        {dialNumber && (
+                                            <button onClick={() => setDialNumber(dialNumber.slice(0, -1))} className="text-fg-quaternary hover:text-fg-secondary shrink-0">
+                                                <FontAwesomeIcon icon={faDeleteLeft} className="size-4" />
+                                            </button>
+                                        )}
+                                    </div>
+                                    <div className="grid grid-cols-3 gap-1.5 mb-3">
+                                        {['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map(key => (
+                                            <button
+                                                key={key}
+                                                onClick={() => setDialNumber(prev => prev + key)}
+                                                className="flex items-center justify-center h-11 rounded-lg text-sm font-semibold text-primary bg-primary hover:bg-secondary border border-secondary transition duration-100 ease-linear active:scale-95"
+                                            >
+                                                {key}
+                                            </button>
+                                        ))}
+                                    </div>
+                                    <button
+                                        onClick={handleDial}
+                                        disabled={dialling || dialNumber.replace(/[^0-9]/g, '').length < 10}
+                                        className="w-full flex items-center justify-center gap-2 rounded-lg bg-success-solid py-2.5 text-sm font-medium text-white hover:opacity-90 disabled:bg-disabled disabled:cursor-not-allowed transition duration-100 ease-linear"
+                                    >
+                                        <FontAwesomeIcon icon={faPhone} className="size-3.5" />
+                                        {dialling ? 'Dialling...' : 'Call'}
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+                    )}
                     <AgentStatusToggle isRegistered={isRegistered} connectionStatus={connectionStatus} />
                     {totalPending > 0 && (
                         <Badge size="sm" color="brand" type="pill-color">{totalPending} pending</Badge>
@@ -127,68 +182,6 @@ export const CallDeskPage = () => {
                 </div>
             </div>
 
-            {/* Dialler FAB */}
-            {!isInCall && (
-                <div className="fixed bottom-6 right-6 z-40 flex flex-col items-end gap-3">
-                    {diallerOpen && (
-                        <div className="w-72 rounded-xl bg-primary shadow-xl ring-1 ring-secondary p-4">
-                            <div className="flex items-center justify-between mb-3">
-                                <span className="text-sm font-semibold text-primary">Dial</span>
-                                <button onClick={() => setDiallerOpen(false)} className="text-fg-quaternary hover:text-fg-secondary">
-                                    <FontAwesomeIcon icon={faXmark} className="size-4" />
-                                </button>
-                            </div>
-
-                            {/* Number display */}
-                            <div className="flex items-center gap-2 mb-3 px-3 py-2.5 rounded-lg bg-secondary min-h-[40px]">
-                                <span className="flex-1 text-lg font-semibold text-primary tracking-wider text-center">
-                                    {dialNumber || <span className="text-placeholder font-normal text-sm">Enter number</span>}
-                                </span>
-                                {dialNumber && (
-                                    <button onClick={() => setDialNumber(dialNumber.slice(0, -1))} className="text-fg-quaternary hover:text-fg-secondary shrink-0">
-                                        <FontAwesomeIcon icon={faDeleteLeft} className="size-4" />
-                                    </button>
-                                )}
-                            </div>
-
-                            {/* Numpad */}
-                            <div className="grid grid-cols-3 gap-1.5 mb-3">
-                                {['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map(key => (
-                                    <button
-                                        key={key}
-                                        onClick={() => setDialNumber(prev => prev + key)}
-                                        className="flex items-center justify-center h-11 rounded-lg text-sm font-semibold text-primary bg-primary hover:bg-secondary border border-secondary transition duration-100 ease-linear active:scale-95"
-                                    >
-                                        {key}
-                                    </button>
-                                ))}
-                            </div>
-
-                            {/* Call button */}
-                            <button
-                                onClick={handleDial}
-                                disabled={dialling || dialNumber.replace(/[^0-9]/g, '').length < 10}
-                                className="w-full flex items-center justify-center gap-2 rounded-lg bg-success-solid py-2.5 text-sm font-medium text-white hover:opacity-90 disabled:bg-disabled disabled:cursor-not-allowed transition duration-100 ease-linear"
-                            >
-                                <FontAwesomeIcon icon={faPhone} className="size-3.5" />
-                                {dialling ? 'Dialling...' : 'Call'}
-                            </button>
-                        </div>
-                    )}
-                    <button
-                        onClick={() => setDiallerOpen(!diallerOpen)}
-                        className={cx(
-                            'flex size-14 items-center justify-center rounded-full shadow-lg transition duration-100 ease-linear',
-                            diallerOpen
-                                ? 'bg-secondary text-fg-secondary'
-                                : 'bg-brand-solid text-white hover:bg-brand-solid_hover',
-                        )}
-                        title="Quick dial"
-                    >
-                        <FontAwesomeIcon icon={diallerOpen ? faXmark : faPhone} className="size-5" />
-                    </button>
-                </div>
-            )}
         </div>
     );
 };