feat: build CC Agent Call Desk with CTI simulation, AI insights, disposition form, and call log

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-05-18 20:08:19 +00:00 · 2026-03-16 18:30:34 +05:30
parent e9ac6e598a
commit 5efa22a35a
6 changed files with 659 additions and 5 deletions
--- a/src/components/call-desk/disposition-form.tsx
+++ b/src/components/call-desk/disposition-form.tsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { TextArea } from '@/components/base/textarea/textarea';
+import type { CallDisposition } from '@/types/entities';
+import { cx } from '@/utils/cx';
+
+interface DispositionFormProps {
+    onSubmit: (disposition: CallDisposition, notes: string) => void;
+}
+
+const dispositionOptions: Array<{
+    value: CallDisposition;
+    label: string;
+    activeClass: string;
+    defaultClass: string;
+}> = [
+    {
+        value: 'APPOINTMENT_BOOKED',
+        label: 'Appointment Booked',
+        activeClass: 'bg-success-solid text-white ring-transparent',
+        defaultClass: 'bg-success-primary text-success-primary border-success',
+    },
+    {
+        value: 'FOLLOW_UP_SCHEDULED',
+        label: 'Follow-up Needed',
+        activeClass: 'bg-brand-solid text-white ring-transparent',
+        defaultClass: 'bg-brand-primary text-brand-secondary border-brand',
+    },
+    {
+        value: 'INFO_PROVIDED',
+        label: 'Info Provided',
+        activeClass: 'bg-utility-blue-light-600 text-white ring-transparent',
+        defaultClass: 'bg-utility-blue-light-50 text-utility-blue-light-700 border-utility-blue-light-200',
+    },
+    {
+        value: 'NO_ANSWER',
+        label: 'No Answer',
+        activeClass: 'bg-warning-solid text-white ring-transparent',
+        defaultClass: 'bg-warning-primary text-warning-primary border-warning',
+    },
+    {
+        value: 'WRONG_NUMBER',
+        label: 'Wrong Number',
+        activeClass: 'bg-secondary-solid text-white ring-transparent',
+        defaultClass: 'bg-secondary text-secondary border-secondary',
+    },
+    {
+        value: 'CALLBACK_REQUESTED',
+        label: 'Not Interested',
+        activeClass: 'bg-error-solid text-white ring-transparent',
+        defaultClass: 'bg-error-primary text-error-primary border-error',
+    },
+];
+
+export const DispositionForm = ({ onSubmit }: DispositionFormProps) => {
+    const [selected, setSelected] = useState<CallDisposition | null>(null);
+    const [notes, setNotes] = useState('');
+
+    const handleSubmit = () => {
+        if (selected === null) return;
+        onSubmit(selected, notes);
+    };
+
+    return (
+        <div className="flex flex-col gap-4">
+            <span className="text-sm font-bold text-primary">What happened?</span>
+
+            <div className="grid grid-cols-2 gap-2">
+                {dispositionOptions.map((option) => {
+                    const isSelected = selected === option.value;
+                    return (
+                        <button
+                            key={option.value}
+                            type="button"
+                            onClick={() => setSelected(option.value)}
+                            className={cx(
+                                'cursor-pointer rounded-xl border-2 p-3 text-xs font-semibold transition duration-100 ease-linear',
+                                isSelected
+                                    ? cx(option.activeClass, 'ring-2 ring-brand')
+                                    : option.defaultClass,
+                            )}
+                        >
+                            {option.label}
+                        </button>
+                    );
+                })}
+            </div>
+
+            <TextArea
+                label="Notes (optional)"
+                placeholder="Add any notes about this call..."
+                value={notes}
+                onChange={(value) => setNotes(value)}
+                rows={3}
+            />
+
+            <button
+                type="button"
+                onClick={handleSubmit}
+                disabled={selected === null}
+                className={cx(
+                    'w-full rounded-xl py-3 text-sm font-semibold transition duration-100 ease-linear',
+                    selected !== null
+                        ? 'cursor-pointer bg-brand-solid text-white hover:bg-brand-solid_hover'
+                        : 'cursor-not-allowed bg-disabled text-disabled',
+                )}
+            >
+                Save & Close Call
+            </button>
+        </div>
+    );
+};