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>
  );
}

cmd: