Ehsan/artifacts/ehsan-poc/src/pages/admin.tsx

import { useLanguage } from "../contexts/LanguageContext";
import { useListRequests, getListRequestsQueryKey, useVerifyRequest, usePublishRequest, useDeliverSupport, useConfirmReceipt, useCloseRequest, useRejectRequest } from "@workspace/api-client-react";
import { useQueryClient } from "@tanstack/react-query";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Link } from "wouter";

export default function Admin() {
  const { t } = useLanguage();
  const queryClient = useQueryClient();
  const { data: requests, isLoading } = useListRequests();
  
  const verifyRequest = useVerifyRequest();
  const publishRequest = usePublishRequest();
  const deliverSupport = useDeliverSupport();
  const confirmReceipt = useConfirmReceipt();
  const closeRequest = useCloseRequest();
  const rejectRequest = useRejectRequest();

  const handleAction = async (action: any, id: string) => {
    try {
      await action.mutateAsync({ id });
      queryClient.invalidateQueries({ queryKey: getListRequestsQueryKey() });
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold text-foreground mb-8">{t.admin.title}</h1>
      
      <div className="bg-card rounded-xl border overflow-hidden shadow-sm">
        <Table>
          <TableHeader className="bg-muted/50">
            <TableRow>
              <TableHead>{t.admin.caseId}</TableHead>
              <TableHead>{t.admin.beneficiary}</TableHead>
              <TableHead>{t.request.needType}</TableHead>
              <TableHead>{t.request.amount}</TableHead>
              <TableHead>{t.admin.status}</TableHead>
              <TableHead>{t.admin.currentStep}</TableHead>
              <TableHead className="text-right">{t.admin.actions}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                  {t.common.loading}
                </TableCell>
              </TableRow>
            ) : requests?.map((req) => (
              <TableRow key={req.id}>
                <TableCell className="font-mono text-xs">{req.caseId}</TableCell>
                <TableCell>{req.beneficiaryName}</TableCell>
                <TableCell>{t.needTypes[req.needType as keyof typeof t.needTypes] || req.needType}</TableCell>
                <TableCell>{req.requestedAmount} ﷼</TableCell>
                <TableCell>
                  <Badge variant="secondary" className="font-normal">
                    {t.statuses[req.status as keyof typeof t.statuses] || req.status}
                  </Badge>
                </TableCell>
                <TableCell>{req.currentStep}/10</TableCell>
                <TableCell className="text-right">
                  <div className="flex items-center justify-end gap-2">
                    <Link href={`/track/${req.id}`}>
                      <Button variant="outline" size="sm">Track</Button>
                    </Link>
                    
                    {req.status === 'new' && (
                      <>
                        <Button size="sm" onClick={() => handleAction(verifyRequest, req.id)}>Verify</Button>
                        <Button size="sm" variant="destructive" onClick={() => handleAction(rejectRequest, req.id)}>Reject</Button>
                      </>
                    )}
                    {req.status === 'verified' && (
                      <Button size="sm" onClick={() => handleAction(publishRequest, req.id)}>Publish</Button>
                    )}
                    {req.status === 'donated' && (
                      <Button size="sm" onClick={() => handleAction(deliverSupport, req.id)}>Deliver</Button>
                    )}
                    {req.status === 'delivered' && (
                      <Button size="sm" onClick={() => handleAction(confirmReceipt, req.id)}>Confirm Receipt</Button>
                    )}
                    {req.status === 'thank_you_submitted' && (
                      <Link href={`/whatsapp-log`}>
                        <Button size="sm" variant="outline">WhatsApp</Button>
                      </Link>
                    )}
                    {req.status === 'whatsapp_sent' && (
                      <Button size="sm" onClick={() => handleAction(closeRequest, req.id)}>Close Case</Button>
                    )}
                  </div>
                </TableCell>
              </TableRow>
            ))}
            {(!requests || requests.length === 0) && !isLoading && (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                  No requests found
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}