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.

artifacts/ehsan-poc/src/pages/thank-you.tsx

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useParams, useLocation } from "wouter";
+import { useLanguage } from "../contexts/LanguageContext";
+import { useGetRequest, useSubmitThankYou, getListRequestsQueryKey, getGetRequestQueryKey } from "@workspace/api-client-react";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CheckCircle, Heart } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const schema = z.object({
+  beneficiaryName: z.string().min(2),
+  message: z.string().min(10),
+});
+
+type FormData = z.infer<typeof schema>;
+
+export default function ThankYou() {
+  const { t } = useLanguage();
+  const params = useParams<{ id: string }>();
+  const [, setLocation] = useLocation();
+  const queryClient = useQueryClient();
+  const [submitted, setSubmitted] = useState(false);
+
+  const { data: request, isLoading } = useGetRequest(params.id || "", {
+    query: { enabled: !!params.id, queryKey: getGetRequestQueryKey(params.id || "") },
+  });
+
+  const submitThankYou = useSubmitThankYou();
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      beneficiaryName: request?.beneficiaryName || "",
+      message: "",
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    submitThankYou.mutate(
+      {
+        id: params.id || "",
+        data: { beneficiaryName: data.beneficiaryName, message: data.message },
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: getListRequestsQueryKey() });
+          queryClient.invalidateQueries({ queryKey: getGetRequestQueryKey(params.id || "") });
+          setSubmitted(true);
+        },
+      }
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-12 max-w-xl space-y-4">
+        <Skeleton className="h-10 w-48" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (submitted) {
+    return (
+      <div className="container mx-auto px-4 py-12 max-w-xl">
+        <Card className="border-2 border-green-200">
+          <CardContent className="pt-10 pb-10 text-center">
+            <div className="flex justify-center gap-2 mb-4">
+              <Heart className="w-12 h-12 text-green-600 fill-green-100" />
+              <CheckCircle className="w-12 h-12 text-green-500" />
+            </div>
+            <h2 className="text-2xl font-bold text-green-700 mb-2">{t.common.success}</h2>
+            <p className="text-muted-foreground">
+              {t.thankYou.title}
+            </p>
+            <p className="mt-4 text-sm text-muted-foreground">
+              Your thank-you message will be sent to the donor via WhatsApp through OpenClaw.
+            </p>
+            <div className="mt-8 flex gap-3 justify-center">
+              <Button onClick={() => setLocation(`/track/${params.id}`)}>Track Case</Button>
+              <Button variant="outline" onClick={() => setLocation("/")}>Home</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-12 max-w-xl">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">{t.thankYou.title}</h1>
+        {request && (
+          <p className="text-muted-foreground mt-1">{request.caseId} — {request.beneficiaryName}</p>
+        )}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base text-primary">{t.thankYou.title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
+              <FormField
+                control={form.control}
+                name="beneficiaryName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t.request.beneficiaryName}</FormLabel>
+                    <FormControl>
+                      <Input
+                        data-testid="input-beneficiaryName"
+                        defaultValue={request?.beneficiaryName || ""}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="message"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t.thankYou.message}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        data-testid="input-thankYouMessage"
+                        rows={5}
+                        placeholder="جزاكم الله خيراً، وصلني الدعم وكان له أثر كبير عليّ."
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={submitThankYou.isPending}
+                data-testid="button-submitThankYou"
+              >
+                {submitThankYou.isPending ? t.common.loading : t.thankYou.submitLabel}
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}