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,268 @@
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { useLanguage } from "../contexts/LanguageContext";
|
||||
import { useCreateRequest } from "@workspace/api-client-react";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { CheckCircle, XCircle, Clock } from "lucide-react";
|
||||
|
||||
const schema = z.object({
|
||||
beneficiaryName: z.string().min(2),
|
||||
nationalId: z.string().min(10).max(10),
|
||||
phone: z.string().min(10),
|
||||
source: z.enum(["beneficiary", "charity", "official"]),
|
||||
sourceName: z.string().min(2),
|
||||
needType: z.enum(["electricity", "water", "food", "health", "housing", "refrigerator", "air_conditioner", "court_order"]),
|
||||
requestedAmount: z.coerce.number().positive(),
|
||||
description: z.string().min(20),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
export default function RequestSupport() {
|
||||
const { t } = useLanguage();
|
||||
const [submitted, setSubmitted] = useState<any>(null);
|
||||
const createRequest = useCreateRequest();
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
beneficiaryName: "",
|
||||
nationalId: "",
|
||||
phone: "",
|
||||
source: "beneficiary",
|
||||
sourceName: "",
|
||||
needType: "electricity",
|
||||
requestedAmount: 0,
|
||||
description: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
createRequest.mutate(
|
||||
{ data },
|
||||
{
|
||||
onSuccess: (result) => {
|
||||
setSubmitted(result);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
if (submitted) {
|
||||
const isVerified = submitted.status === "verified";
|
||||
const isRejected = submitted.status === "rejected";
|
||||
const isPending = submitted.status === "pending_review";
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12 max-w-2xl">
|
||||
<Card className="border-2">
|
||||
<CardContent className="pt-8 pb-8 text-center">
|
||||
{isVerified && (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<CheckCircle className="w-16 h-16 text-green-600" />
|
||||
<h2 className="text-2xl font-bold text-green-700">{isVerified ? (t as any).statuses.verified : ""}</h2>
|
||||
<p className="text-muted-foreground">{t.request.submitSuccess}</p>
|
||||
<Badge className="bg-green-600 text-white px-4 py-1 text-sm">{t.statuses.verified}</Badge>
|
||||
</div>
|
||||
)}
|
||||
{isPending && (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Clock className="w-16 h-16 text-amber-500" />
|
||||
<h2 className="text-2xl font-bold text-amber-600">{t.statuses.pending_review}</h2>
|
||||
<p className="text-muted-foreground">{t.request.submitSuccess}</p>
|
||||
<Badge variant="secondary" className="px-4 py-1 text-sm">{t.statuses.pending_review}</Badge>
|
||||
</div>
|
||||
)}
|
||||
{isRejected && (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<XCircle className="w-16 h-16 text-red-500" />
|
||||
<h2 className="text-2xl font-bold text-red-600">{t.statuses.rejected}</h2>
|
||||
<p className="text-muted-foreground">{submitted.rejectionReason}</p>
|
||||
<Badge variant="destructive" className="px-4 py-1 text-sm">{t.statuses.rejected}</Badge>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-6 p-4 bg-muted/30 rounded-lg text-sm text-start">
|
||||
<p className="font-medium mb-1">{submitted.caseId}</p>
|
||||
<p className="text-muted-foreground">{submitted.beneficiaryName}</p>
|
||||
</div>
|
||||
<Button className="mt-6" onClick={() => { setSubmitted(null); form.reset(); }}>
|
||||
{t.common.back}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12 max-w-2xl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">{t.request.title}</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
{t.home.heroSubtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold text-primary">{t.request.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="beneficiaryName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.request.beneficiaryName}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-beneficiaryName" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nationalId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.request.nationalId}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-nationalId" maxLength={10} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.request.phone}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-phone" type="tel" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="source"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.request.source}</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger data-testid="select-source">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="beneficiary">{t.sources.beneficiary}</SelectItem>
|
||||
<SelectItem value="charity">{t.sources.charity}</SelectItem>
|
||||
<SelectItem value="official">{t.sources.official}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sourceName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.request.sourceName}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-sourceName" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="needType"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.request.needType}</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger data-testid="select-needType">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.entries(t.needTypes).map(([key, label]) => (
|
||||
<SelectItem key={key} value={key}>{label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="requestedAmount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.request.amount} (﷼)</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-amount" type="number" min={1} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.request.description}</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea data-testid="input-description" rows={4} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={createRequest.isPending}
|
||||
data-testid="button-submit"
|
||||
>
|
||||
{createRequest.isPending ? t.common.loading : t.common.submit}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user