FM / conversations

/opt/mawid/apps/dashboard/app/(app)/conversations/

/opt/mawid/apps/dashboard/app/(app)/conversations

Name	Size	Mode	Actions
[id]/	-	0755	rm
page.tsx	1918	0644	edit dl rm

Edit: /opt/mawid/apps/dashboard/app/(app)/conversations/page.tsx (1918B)

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { api } from '@/lib/api';
import { useLang } from '@/lib/i18n';
import { Badge, Card, Spinner } from '@/components/ui';

interface ConversationRow {
  id: string;
  patient: { name: string | null; waPhone: string };
  lastMessage: string | null;
  lastMessageAt: string | null;
  handedOff: boolean;
}

export default function ConversationsPage() {
  const { t, lang } = useLang();
  const [conversations, setConversations] = useState<ConversationRow[] | null>(null);

useEffect(() => {
    api<ConversationRow[]>('/conversations').then(setConversations);
  }, []);

if (conversations === null) return <Spinner />;

return (
    <Card className="divide-y divide-slate-100 p-0">
      {conversations.length === 0 && (
        <p className="p-4 text-sm text-slate-500">{t('noMessages')}</p>
      )}
      {conversations.map((c) => (
        <Link
          key={c.id}
          href={`/conversations/${c.id}`}
          className="flex items-center justify-between gap-3 px-4 py-3 hover:bg-slate-50"
        >
          <div className="min-w-0">
            <div className="font-medium">{c.patient.name ?? c.patient.waPhone}</div>
            <div className="truncate text-sm text-slate-500">{c.lastMessage ?? '—'}</div>
          </div>
          <div className="flex shrink-0 items-center gap-2">
            {c.handedOff && <Badge color="amber">{t('agentPaused')}</Badge>}
            {c.lastMessageAt && (
              <span className="text-xs text-slate-400">
                {new Date(c.lastMessageAt).toLocaleString(lang === 'ar' ? 'ar' : lang, {
                  day: 'numeric',
                  month: 'short',
                  hour: '2-digit',
                  minute: '2-digit',
                })}
              </span>
            )}
          </div>
        </Link>
      ))}
    </Card>
  );
}

'use client'; import { useEffect, useState } from 'react'; import Link from 'next/link'; import { api } from '@/lib/api'; import { useLang } from '@/lib/i18n'; import { Badge, Card, Spinner } from '@/components/ui'; interface ConversationRow { id: string; patient: { name: string | null; waPhone: string }; lastMessage: string | null; lastMessageAt: string | null; handedOff: boolean; } export default function ConversationsPage() { const { t, lang } = useLang(); const [conversations, setConversations] = useState(null); useEffect(() => { api('/conversations').then(setConversations); }, []); if (conversations === null) return ; return ( {conversations.length === 0 && (

{t('noMessages')}

)} {conversations.map((c) => (

{c.patient.name ?? c.patient.waPhone}

{c.lastMessage ?? '—'}

{c.handedOff && {t('agentPaused')}} {c.lastMessageAt && ( {new Date(c.lastMessageAt).toLocaleString(lang === 'ar' ? 'ar' : lang, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', })} )}

))} ); }