FM / patients

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

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

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

Edit: /opt/mawid/apps/dashboard/app/(app)/patients/page.tsx (2159B)

'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, Input, Spinner } from '@/components/ui';

interface PatientRow {
  id: string;
  name: string | null;
  waPhone: string;
  language: string;
  tags: string[];
  lastVisitAt: string | null;
}

export default function PatientsPage() {
  const { t, lang } = useLang();
  const [search, setSearch] = useState('');
  const [patients, setPatients] = useState<PatientRow[] | null>(null);

useEffect(() => {
    const handle = setTimeout(() => {
      api<PatientRow[]>(`/patients?search=${encodeURIComponent(search)}`).then(setPatients);
    }, 250);
    return () => clearTimeout(handle);
  }, [search]);

return (
    <div className="space-y-4">
      <Input placeholder={t('search')} value={search} onChange={(e) => setSearch(e.target.value)} />
      {patients === null ? (
        <Spinner />
      ) : patients.length === 0 ? (
        <p className="text-sm text-slate-500">{t('noResults')}</p>
      ) : (
        <Card className="divide-y divide-slate-100 p-0">
          {patients.map((p) => (
            <Link
              key={p.id}
              href={`/patients/${p.id}`}
              className="flex items-center justify-between gap-3 px-4 py-3 hover:bg-slate-50"
            >
              <div>
                <div className="font-medium">{p.name ?? '—'}</div>
                <div className="text-sm text-slate-500" dir="ltr">
                  {p.waPhone}
                </div>
              </div>
              <div className="flex items-center gap-2">
                {p.tags.map((tag) => (
                  <Badge key={tag}>{tag}</Badge>
                ))}
                <Badge color="blue">{p.language}</Badge>
                {p.lastVisitAt && (
                  <span className="text-xs text-slate-400">
                    {new Date(p.lastVisitAt).toLocaleDateString(lang === 'ar' ? 'ar' : lang)}
                  </span>
                )}
              </div>
            </Link>
          ))}
        </Card>
      )}
    </div>
  );
}

cmd: