EHSAN official look & auth (Task #5)

Reskin the EHSAN POC to match ehsan.sa and gate the admin area behind a
simple POC login.

- Official header: cropped EHSAN logo, nav (الرئيسية/الوقف/فرص التبرع/
  خدماتنا dropdown→طلب دعم/عن إحسان/براعم إحسان), login/cart/search icons,
  language toggle, mobile menu. Functional items link; rest are visual-only.
- Colors: green primary tuned + orange accent token added in index.css.
- Auth: AuthContext (localStorage, admin/admin) + login page; /admin and
  /whatsapp-log now behind a Protected wrapper redirecting to /login.
- Redesigned OpportunityCard (photo, green progress bar with %, category
  badge, تم جمع/المبلغ المتبقي columns, inline donate button + amount),
  used on home and opportunities pages.
- Two-step donate page (التفاصيل → الدفع): step indicator, presets
  100/50/10, custom amount (prefilled via ?amount=), "تبرع عن أهلك"
  checkbox, donor form (phone min 10 for OpenClaw loop).
- 8 need-type card images added; needImages helper maps need→image.
- Seed: added published opportunities (req-012..017) with partial progress
  to showcase cards; one kept near-full for an easy closed-loop demo.

Deviation (from code review): donate handler now ACCUMULATES collectedAmount
and clamps to target, validates finite/positive amount, and only advances to
the closed-loop pipeline when a case is fully funded (previously overwrote
and force-advanced — broke partial-progress cases). Donate buttons kept green
to match the reference; orange is an accent only.

artifacts/ehsan-poc/src/pages/donate.tsx

@@ -2,7 +2,7 @@ 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 { useParams, useLocation, useSearch, Link } from "wouter";
 import { useLanguage } from "../contexts/LanguageContext";
 import {
   useGetRequest, useDonateToRequest,
@@ -12,18 +12,19 @@ import { useQueryClient } from "@tanstack/react-query";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Progress } from "@/components/ui/progress";
-import { CheckCircle, Heart } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { CheckCircle, Heart, Gift, ShoppingCart, Check } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Link } from "wouter";
+import { getNeedImage } from "../lib/needImages";
+
+const RIYAL = "﷼";
+const PRESETS = [100, 50, 10];
 
 const schema = z.object({
   donorName: z.string().min(2),
   donorPhone: z.string().min(10),
   donorEmail: z.string().email().optional().or(z.literal("")),
-  amount: z.coerce.number().positive(),
 });
 
 type FormData = z.infer<typeof schema>;
@@ -31,8 +32,20 @@ type FormData = z.infer<typeof schema>;
 export default function Donate() {
   const { t } = useLanguage();
   const params = useParams<{ id: string }>();
+  const search = useSearch();
   const [, setLocation] = useLocation();
   const queryClient = useQueryClient();
+
+  const initialAmount = (() => {
+    const a = Number(new URLSearchParams(search).get("amount"));
+    return Number.isFinite(a) && a > 0 ? String(a) : "";
+  })();
+
+  const [step, setStep] = useState<1 | 2>(1);
+  const [amount, setAmount] = useState<string>(initialAmount);
+  const [amountError, setAmountError] = useState(false);
+  const [onBehalf, setOnBehalf] = useState(false);
+  const [onBehalfName, setOnBehalfName] = useState("");
   const [donated, setDonated] = useState(false);
 
   const { data: request, isLoading } = useGetRequest(params.id || "", {
@@ -43,40 +56,14 @@ export default function Donate() {
 
   const form = useForm<FormData>({
     resolver: zodResolver(schema),
-    defaultValues: {
-      donorName: "",
-      donorPhone: "",
-      donorEmail: "",
-      amount: 0,
-    },
+    defaultValues: { donorName: "", donorPhone: "", donorEmail: "" },
   });
 
-  const onSubmit = (data: FormData) => {
-    donateMutation.mutate(
-      {
-        id: params.id || "",
-        data: {
-          donorName: data.donorName,
-          donorPhone: data.donorPhone,
-          donorEmail: data.donorEmail || null,
-          amount: data.amount,
-        },
-      },
-      {
-        onSuccess: () => {
-          queryClient.invalidateQueries({ queryKey: getListRequestsQueryKey() });
-          queryClient.invalidateQueries({ queryKey: getListPublishedRequestsQueryKey() });
-          setDonated(true);
-        },
-      }
-    );
-  };
-
   if (isLoading) {
     return (
-      <div className="container mx-auto px-4 py-12 max-w-2xl space-y-4">
+      <div className="container mx-auto px-4 py-12 max-w-5xl space-y-4">
         <Skeleton className="h-10 w-48" />
-        <Skeleton className="h-64 w-full" />
+        <Skeleton className="h-80 w-full" />
       </div>
     );
   }
@@ -89,14 +76,22 @@ export default function Donate() {
     );
   }
 
+  const progress = Math.min(
+    100,
+    request.requestedAmount > 0
+      ? Math.round((request.collectedAmount / request.requestedAmount) * 100)
+      : 0
+  );
+  const remaining = Math.max(0, request.requestedAmount - request.collectedAmount);
+
   if (donated) {
     return (
       <div className="container mx-auto px-4 py-12 max-w-2xl">
-        <Card className="border-2 border-green-200">
+        <Card className="border-2 border-primary/20">
           <CardContent className="pt-10 pb-10 text-center">
-            <Heart className="w-16 h-16 text-green-600 mx-auto mb-4 fill-green-100" />
-            <CheckCircle className="w-10 h-10 text-green-500 mx-auto mb-4" />
-            <h2 className="text-2xl font-bold text-green-700 mb-2">{t.common.success}</h2>
+            <Heart className="w-16 h-16 text-primary mx-auto mb-4 fill-primary/10" />
+            <CheckCircle className="w-10 h-10 text-primary mx-auto mb-4" />
+            <h2 className="text-2xl font-bold text-primary mb-2">{t.common.success}</h2>
             <p className="text-muted-foreground text-lg mb-6">{t.donate.successMessage}</p>
             <p className="text-sm font-mono text-muted-foreground bg-muted/30 px-4 py-2 rounded-lg inline-block">
               {request.caseId}
@@ -115,124 +110,279 @@ export default function Donate() {
     );
   }
 
-  const progress = Math.min(
-    100,
-    request.requestedAmount > 0
-      ? Math.round((request.collectedAmount / request.requestedAmount) * 100)
-      : 0
+  const goToPayment = () => {
+    const amt = Number(amount);
+    if (!Number.isFinite(amt) || amt <= 0) {
+      setAmountError(true);
+      return;
+    }
+    // Never let a single donation exceed the remaining target.
+    if (amt > remaining) {
+      setAmount(String(remaining));
+    }
+    setAmountError(false);
+    setStep(2);
+  };
+
+  const onSubmit = (data: FormData) => {
+    donateMutation.mutate(
+      {
+        id: params.id || "",
+        data: {
+          donorName: data.donorName,
+          donorPhone: data.donorPhone,
+          donorEmail: data.donorEmail || null,
+          amount: Number(amount),
+        },
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: getListRequestsQueryKey() });
+          queryClient.invalidateQueries({ queryKey: getListPublishedRequestsQueryKey() });
+          queryClient.invalidateQueries({ queryKey: getGetRequestQueryKey(params.id || "") });
+          setDonated(true);
+        },
+      }
+    );
+  };
+
+  const StepIndicator = () => (
+    <div className="flex items-center justify-center gap-4 mb-10">
+      {/* Step 1 - Details */}
+      <div className="flex flex-col items-center gap-1.5">
+        <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
+          step >= 1 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
+        }`}>
+          {step > 1 ? <Check className="w-4 h-4" /> : "1"}
+        </div>
+        <span className={`text-xs font-medium ${step >= 1 ? "text-primary" : "text-muted-foreground"}`}>
+          {t.donate.stepDetails}
+        </span>
+      </div>
+      <div className={`h-0.5 w-16 rounded ${step >= 2 ? "bg-primary" : "bg-border"}`} />
+      {/* Step 2 - Payment */}
+      <div className="flex flex-col items-center gap-1.5">
+        <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
+          step >= 2 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
+        }`}>
+          2
+        </div>
+        <span className={`text-xs font-medium ${step >= 2 ? "text-primary" : "text-muted-foreground"}`}>
+          {t.donate.stepPayment}
+        </span>
+      </div>
+    </div>
+  );
+
+  const DetailsPanel = () => (
+    <Card className="overflow-hidden">
+      <div className="bg-muted/30 px-5 py-3 border-b">
+        <h2 className="font-bold text-foreground">{t.donate.detailsTitle}</h2>
+      </div>
+      <div className="relative">
+        <img
+          src={getNeedImage(request.needType)}
+          alt={request.description}
+          className="w-full h-52 object-cover"
+        />
+        <div className="absolute bottom-0 inset-x-0 h-6 bg-gray-200 flex">
+          <div
+            className="h-full bg-primary flex items-center justify-end px-3 text-primary-foreground text-xs font-bold min-w-[3rem]"
+            style={{ width: `${progress}%` }}
+          >
+            {progress}%
+          </div>
+        </div>
+      </div>
+      <CardContent className="pt-5 space-y-4">
+        <span className="inline-block text-xs font-medium text-muted-foreground border border-border rounded-md px-3 py-1">
+          {t.needTypes[request.needType as keyof typeof t.needTypes] || t.opportunities.generalProjects}
+        </span>
+        <h3 className="text-lg font-bold text-primary leading-snug">{request.description}</h3>
+        <p className="text-xs font-mono text-muted-foreground">{request.caseId}</p>
+        <div className="grid grid-cols-2 gap-2 bg-muted/40 rounded-xl p-4">
+          <div className="text-center border-s border-border">
+            <p className="text-sm text-primary mb-1">{t.opportunities.remainingShort}</p>
+            <p className="font-bold text-foreground">{RIYAL} {remaining.toLocaleString()}</p>
+          </div>
+          <div className="text-center">
+            <p className="text-sm text-primary mb-1">{t.opportunities.collectedShort}</p>
+            <p className="font-bold text-foreground">{RIYAL} {request.collectedAmount.toLocaleString()}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   );
 
   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.donate.title}</h1>
+    <div className="container mx-auto px-4 py-12 max-w-5xl">
+      <h1 className="text-3xl font-bold text-foreground mb-8 text-center">{t.donate.title}</h1>
+      <StepIndicator />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
+        {/* Details panel (right in RTL) */}
+        <DetailsPanel />
+
+        {/* Form panel (left in RTL) */}
+        {step === 1 ? (
+          <Card>
+            <div className="bg-muted/30 px-5 py-3 border-b">
+              <h2 className="font-bold text-foreground">{t.donate.amountTitle}</h2>
+            </div>
+            <CardContent className="pt-5 space-y-5">
+              {/* Presets */}
+              <div className="grid grid-cols-3 gap-3">
+                {PRESETS.map((p) => (
+                  <button
+                    key={p}
+                    type="button"
+                    onClick={() => { setAmount(String(p)); setAmountError(false); }}
+                    className={`py-3 rounded-lg border text-sm font-bold transition-colors ${
+                      Number(amount) === p
+                        ? "bg-primary text-primary-foreground border-primary"
+                        : "bg-background border-border text-foreground hover:border-primary"
+                    }`}
+                    data-testid={`preset-${p}`}
+                  >
+                    {RIYAL} {p}
+                  </button>
+                ))}
+              </div>
+
+              {/* Custom amount */}
+              <div className="relative">
+                <span className="absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm pointer-events-none">
+                  {RIYAL}
+                </span>
+                <Input
+                  type="number"
+                  min={1}
+                  value={amount}
+                  onChange={(e) => { setAmount(e.target.value); setAmountError(false); }}
+                  placeholder={t.donate.customAmount}
+                  className="ps-8"
+                  data-testid="input-customAmount"
+                />
+              </div>
+
+              {/* On behalf checkbox */}
+              <div className="flex items-start gap-2">
+                <Gift className="w-5 h-5 text-primary shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <Checkbox
+                      checked={onBehalf}
+                      onCheckedChange={(v) => setOnBehalf(v === true)}
+                      data-testid="checkbox-onBehalf"
+                    />
+                    <span className="text-sm text-foreground">{t.donate.onBehalf}</span>
+                  </label>
+                  {onBehalf && (
+                    <Input
+                      value={onBehalfName}
+                      onChange={(e) => setOnBehalfName(e.target.value)}
+                      placeholder={t.donate.onBehalfName}
+                      className="mt-3"
+                      data-testid="input-onBehalfName"
+                    />
+                  )}
+                </div>
+              </div>
+
+              {amountError && (
+                <p className="text-sm text-destructive" data-testid="text-amountError">
+                  {t.donate.selectAmountError}
+                </p>
+              )}
+
+              <Button
+                className="w-full gap-2"
+                onClick={goToPayment}
+                data-testid="button-continueToPayment"
+              >
+                <ShoppingCart className="w-4 h-4" />
+                {t.donate.continueToPayment}
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <Card>
+            <div className="bg-muted/30 px-5 py-3 border-b">
+              <h2 className="font-bold text-foreground">{t.donate.paymentTitle}</h2>
+            </div>
+            <CardContent className="pt-5">
+              <div className="flex items-center justify-between bg-primary/5 rounded-lg px-4 py-3 mb-5">
+                <span className="text-sm text-muted-foreground">{t.donate.amount}</span>
+                <span className="text-lg font-bold text-primary">{RIYAL} {Number(amount).toLocaleString()}</span>
+              </div>
+              <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
+                  <FormField
+                    control={form.control}
+                    name="donorName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t.donate.donorName}</FormLabel>
+                        <FormControl>
+                          <Input data-testid="input-donorName" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="donorPhone"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t.donate.donorPhone}</FormLabel>
+                        <FormControl>
+                          <Input data-testid="input-donorPhone" type="tel" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="donorEmail"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t.donate.donorEmail}</FormLabel>
+                        <FormControl>
+                          <Input data-testid="input-donorEmail" type="email" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <div className="flex gap-3">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="flex-1"
+                      onClick={() => setStep(1)}
+                      data-testid="button-backToDetails"
+                    >
+                      {t.donate.backToDetails}
+                    </Button>
+                    <Button
+                      type="submit"
+                      className="flex-1"
+                      disabled={donateMutation.isPending}
+                      data-testid="button-confirmDonation"
+                    >
+                      {donateMutation.isPending ? t.common.loading : t.donate.confirmDonation}
+                    </Button>
+                  </div>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+        )}
       </div>
 
-      {/* Case Summary */}
-      <Card className="mb-6 bg-primary/5 border-primary/20">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
-            {t.donate.caseSummary}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="pt-0">
-          <div className="flex justify-between items-start mb-3">
-            <div>
-              <p className="font-semibold text-foreground">{request.description}</p>
-              <p className="text-sm text-muted-foreground mt-1">{request.caseId}</p>
-            </div>
-            <Badge className="bg-primary/10 text-primary border-primary/20">
-              {t.needTypes[request.needType as keyof typeof t.needTypes]}
-            </Badge>
-          </div>
-          <div className="flex justify-between text-sm mb-2">
-            <span className="text-muted-foreground">
-              {t.opportunities.collected}:{" "}
-              <strong>{request.collectedAmount.toLocaleString()} ﷼</strong>
-            </span>
-            <span className="text-muted-foreground">
-              {t.opportunities.target}:{" "}
-              <strong>{request.requestedAmount.toLocaleString()} ﷼</strong>
-            </span>
-          </div>
-          <Progress value={progress} className="h-2" />
-        </CardContent>
-      </Card>
-
-      {/* Donation Form */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg font-semibold text-primary">{t.donate.title}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
-              <FormField
-                control={form.control}
-                name="donorName"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t.donate.donorName}</FormLabel>
-                    <FormControl>
-                      <Input data-testid="input-donorName" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="donorPhone"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t.donate.donorPhone}</FormLabel>
-                    <FormControl>
-                      <Input data-testid="input-donorPhone" type="tel" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="donorEmail"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t.donate.donorEmail}</FormLabel>
-                    <FormControl>
-                      <Input data-testid="input-donorEmail" type="email" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="amount"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t.donate.amount} (﷼)</FormLabel>
-                    <FormControl>
-                      <Input data-testid="input-donationAmount" type="number" min={1} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <Button
-                type="submit"
-                className="w-full"
-                disabled={donateMutation.isPending}
-                data-testid="button-confirmDonation"
-              >
-                {donateMutation.isPending ? t.common.loading : t.donate.confirmDonation}
-              </Button>
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-
-      <div className="mt-4 text-center">
+      <div className="mt-6 text-center">
         <Link href="/opportunities">
           <Button variant="ghost" size="sm">{t.common.back}</Button>
         </Link>