mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
Linting and Formatting
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
import { useMemo } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faPhoneMissed } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { Badge } from '@/components/base/badges/badges';
|
||||
import { ClickToCallButton } from '@/components/call-desk/click-to-call-button';
|
||||
import type { Call } from '@/types/entities';
|
||||
import { useMemo } from "react";
|
||||
import { faPhoneMissed } from "@fortawesome/pro-duotone-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Badge } from "@/components/base/badges/badges";
|
||||
import { ClickToCallButton } from "@/components/call-desk/click-to-call-button";
|
||||
import type { Call } from "@/types/entities";
|
||||
|
||||
const getTimeSince = (dateStr: string | null): string => {
|
||||
if (!dateStr) return '—';
|
||||
if (!dateStr) return "—";
|
||||
const mins = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
|
||||
if (mins < 1) return 'Just now';
|
||||
if (mins < 1) return "Just now";
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
@@ -22,7 +22,7 @@ interface MissedQueueProps {
|
||||
export const MissedQueue = ({ calls }: MissedQueueProps) => {
|
||||
const missedCalls = useMemo(() => {
|
||||
return calls
|
||||
.filter((c) => c.callStatus === 'MISSED')
|
||||
.filter((c) => c.callStatus === "MISSED")
|
||||
.sort((a, b) => {
|
||||
const dateA = a.startedAt ? new Date(a.startedAt).getTime() : 0;
|
||||
const dateB = b.startedAt ? new Date(b.startedAt).getTime() : 0;
|
||||
@@ -39,22 +39,27 @@ export const MissedQueue = ({ calls }: MissedQueueProps) => {
|
||||
<h3 className="text-sm font-semibold text-primary">Missed Call Queue</h3>
|
||||
</div>
|
||||
{missedCalls.length > 0 && (
|
||||
<Badge size="sm" color="error">{missedCalls.length}</Badge>
|
||||
<Badge size="sm" color="error">
|
||||
{missedCalls.length}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="max-h-[500px] overflow-y-auto">
|
||||
{missedCalls.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 gap-2">
|
||||
<div className="flex flex-col items-center justify-center gap-2 py-10">
|
||||
<FontAwesomeIcon icon={faPhoneMissed} className="size-6 text-fg-quaternary" />
|
||||
<p className="text-sm text-tertiary">No missed calls</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-secondary">
|
||||
{missedCalls.map((call) => {
|
||||
const phone = call.callerNumber?.[0]?.number ?? '';
|
||||
const display = phone ? `+91 ${phone}` : 'Unknown';
|
||||
const phone = call.callerNumber?.[0]?.number ?? "";
|
||||
const display = phone ? `+91 ${phone}` : "Unknown";
|
||||
return (
|
||||
<li key={call.id} className="flex items-center justify-between px-4 py-2.5 hover:bg-primary_hover transition duration-100 ease-linear">
|
||||
<li
|
||||
key={call.id}
|
||||
className="flex items-center justify-between px-4 py-2.5 transition duration-100 ease-linear hover:bg-primary_hover"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium text-primary">{display}</span>
|
||||
<span className="text-xs text-tertiary">{getTimeSince(call.startedAt)}</span>
|
||||
|
||||
Reference in New Issue
Block a user