mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
feat: SSE agent state, UCID fix, maint module, QA bug fixes
- Fix outbound disposition: store UCID from dial API response (root cause of silent disposition failure) - SSE agent state: real-time Ozonetel state drives status toggle (ready/break/calling/in-call/acw) - Maint module with OTP-protected endpoints (force-ready, unlock-agent, backfill, fix-timestamps) - Maint OTP modal with PinInput component, keyboard shortcuts (Ctrl+Shift+R/U/B/T) - Force-logout via SSE: admin unlock pushes force-logout to connected browsers - Silence JsSIP debug flood, add structured lifecycle logging ([SIP], [DIAL], [DISPOSE], [AGENT-STATE]) - Centralize date formatting with IST-aware formatters across 11 files - Fix call history: non-overlapping aggregates (completed/missed), correct timestamp display - Auto-dismiss CallWidget ended/failed state after 3 seconds - Remove floating "Helix Phone" idle badge from all pages - Fix dead code in agent-state endpoint (auto-assign was unreachable after return) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
137
src/components/modals/maint-otp-modal.tsx
Normal file
137
src/components/modals/maint-otp-modal.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import { useState } from 'react';
|
||||
import { REGEXP_ONLY_DIGITS } from 'input-otp';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
import { Dialog, Modal, ModalOverlay } from '@/components/application/modals/modal';
|
||||
import { PinInput } from '@/components/base/pin-input/pin-input';
|
||||
import { FeaturedIcon } from '@/components/foundations/featured-icon/featured-icon';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faShieldKeyhole } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import type { FC } from 'react';
|
||||
import { notify } from '@/lib/toast';
|
||||
|
||||
const ShieldIcon: FC<{ className?: string }> = ({ className }) => (
|
||||
<FontAwesomeIcon icon={faShieldKeyhole} className={className} />
|
||||
);
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4100';
|
||||
|
||||
type MaintAction = {
|
||||
endpoint: string;
|
||||
label: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
type MaintOtpModalProps = {
|
||||
isOpen: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
action: MaintAction | null;
|
||||
};
|
||||
|
||||
export const MaintOtpModal = ({ isOpen, onOpenChange, action }: MaintOtpModalProps) => {
|
||||
const [otp, setOtp] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!action || otp.length < 6) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/maint/${action.endpoint}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'x-maint-otp': otp },
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
console.log(`[MAINT] ${action.label}:`, data);
|
||||
notify.success(action.label, data.message ?? 'Completed successfully');
|
||||
onOpenChange(false);
|
||||
setOtp('');
|
||||
} else {
|
||||
setError(data.message ?? 'Failed');
|
||||
}
|
||||
} catch {
|
||||
setError('Request failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOtpChange = (value: string) => {
|
||||
setOtp(value);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
onOpenChange(false);
|
||||
setOtp('');
|
||||
setError(null);
|
||||
};
|
||||
|
||||
if (!action) return null;
|
||||
|
||||
return (
|
||||
<ModalOverlay isOpen={isOpen} onOpenChange={handleClose} isDismissable>
|
||||
<Modal className="sm:max-w-[400px]">
|
||||
<Dialog>
|
||||
{() => (
|
||||
<div className="flex w-full flex-col rounded-xl bg-primary shadow-xl ring-1 ring-secondary overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col items-center gap-4 px-6 pt-6 pb-5">
|
||||
<FeaturedIcon icon={ShieldIcon} color="brand" theme="light" size="md" />
|
||||
<div className="flex flex-col items-center gap-1 text-center">
|
||||
<h2 className="text-lg font-semibold text-primary">{action.label}</h2>
|
||||
<p className="text-sm text-tertiary">{action.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pin Input */}
|
||||
<div className="flex flex-col items-center gap-2 px-6 pb-5">
|
||||
<PinInput size="sm">
|
||||
<PinInput.Label>Enter maintenance code</PinInput.Label>
|
||||
<PinInput.Group
|
||||
maxLength={6}
|
||||
pattern={REGEXP_ONLY_DIGITS}
|
||||
value={otp}
|
||||
onChange={handleOtpChange}
|
||||
onComplete={handleSubmit}
|
||||
containerClassName="flex flex-row gap-2 h-14"
|
||||
>
|
||||
<PinInput.Slot index={0} className="!size-12 !text-display-sm" />
|
||||
<PinInput.Slot index={1} className="!size-12 !text-display-sm" />
|
||||
<PinInput.Slot index={2} className="!size-12 !text-display-sm" />
|
||||
<PinInput.Separator />
|
||||
<PinInput.Slot index={3} className="!size-12 !text-display-sm" />
|
||||
<PinInput.Slot index={4} className="!size-12 !text-display-sm" />
|
||||
<PinInput.Slot index={5} className="!size-12 !text-display-sm" />
|
||||
</PinInput.Group>
|
||||
</PinInput>
|
||||
{error && (
|
||||
<p className="text-sm text-error-primary mt-1">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center gap-3 border-t border-secondary px-6 py-4">
|
||||
<Button size="md" color="secondary" onClick={handleClose} className="flex-1">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="md"
|
||||
color="primary"
|
||||
isDisabled={otp.length < 6 || loading}
|
||||
isLoading={loading}
|
||||
onClick={handleSubmit}
|
||||
className="flex-1"
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</ModalOverlay>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user