feat: add appointment booking form slide-out during calls, wired to platform createAppointment mutation

src/components/call-desk/call-widget.tsx

@@ -10,9 +10,11 @@ import {
     PauseCircle,
     CheckCircle,
     Save01,
+    CalendarPlus02,
 } from '@untitledui/icons';
 import { Button } from '@/components/base/buttons/button';
 import { TextArea } from '@/components/base/textarea/textarea';
+import { AppointmentForm } from '@/components/call-desk/appointment-form';
 import { useSip } from '@/providers/sip-provider';
 import { useAuth } from '@/providers/auth-provider';
 import { cx } from '@/utils/cx';
@@ -106,6 +108,7 @@ export const CallWidget = () => {
     const [matchedLead, setMatchedLead] = useState<any>(null);
     const [leadActivities, setLeadActivities] = useState<any[]>([]);
     const [isSaving, setIsSaving] = useState(false);
+    const [isAppointmentOpen, setIsAppointmentOpen] = useState(false);
     const callStartTimeRef = useRef<string | null>(null);
 
     // Capture duration right before call ends
@@ -411,6 +414,29 @@ export const CallWidget = () => {
                     </Button>
                 </div>
 
+                {/* Book Appointment */}
+                <Button
+                    size="sm"
+                    color="primary"
+                    iconLeading={CalendarPlus02}
+                    onClick={() => setIsAppointmentOpen(true)}
+                    className="w-full"
+                >
+                    Book Appointment
+                </Button>
+
+                <AppointmentForm
+                    isOpen={isAppointmentOpen}
+                    onOpenChange={setIsAppointmentOpen}
+                    callerNumber={callerNumber}
+                    leadName={matchedLead ? `${matchedLead.contactName?.firstName ?? ''} ${matchedLead.contactName?.lastName ?? ''}`.trim() : null}
+                    leadId={matchedLead?.id}
+                    onSaved={() => {
+                        setIsAppointmentOpen(false);
+                        setDisposition('APPOINTMENT_BOOKED');
+                    }}
+                />
+
                 {/* Divider */}
                 <div className="border-t border-secondary" />