Build EHSAN Closed Donation Loop POC — full bilingual Arabic/English app
- Backend (api-server): Complete in-memory mock DB with 11 seed cases, 5 eligible beneficiaries, 3 donors, and WhatsApp log. All 14 API routes implemented across requests, donors, stats, and whatsapp-log. OpenClaw integration with OPENCLAW_SIMULATE toggle. UUID-based IDs. Full status machine (new → closed, 10 steps). - Frontend (ehsan-poc): 8 pages fully implemented using all generated API hooks: Home (stats counters, 10-step workflow diagram), Request (form with eligibility result), Opportunities (card grid with progress bars), Donate (case summary + donor form), Admin (full data table with contextual action buttons), Track (10-step visual timeline in green), ThankYou (message form), WhatsApp Log (WhatsApp bubble preview + OpenClaw send button). - Bilingual LanguageContext (AR/EN) with RTL/LTR toggle, localStorage persistence. EHSAN green palette (HSL 143), Tajawal font, fully responsive. TypeScript clean — zero errors.
This commit is contained in:
Replit Agent
@@ -0,0 +1,111 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user