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.

.agents/agent_assets_metadata.toml

@@ -0,0 +1,50 @@
+uploads = []
+outputs = []
+
+[[generated]]
+id = "MLdr1Ro6TvOGO7RUOZddi"
+uri = "file://artifacts/ehsan-poc/src/assets/needs/electricity.png"
+type = "image"
+title = "generated_image"
+
+[[generated]]
+id = "DYjKHrkzwNpeVfM6lmb0c"
+uri = "file://artifacts/ehsan-poc/src/assets/needs/water.png"
+type = "image"
+title = "generated_image"
+
+[[generated]]
+id = "FXWm9kaXi15L-PFjp1Tki"
+uri = "file://artifacts/ehsan-poc/src/assets/needs/food.png"
+type = "image"
+title = "generated_image"
+
+[[generated]]
+id = "0ZLSJ9ilsjtUSFwE-tGNG"
+uri = "file://artifacts/ehsan-poc/src/assets/needs/health.png"
+type = "image"
+title = "generated_image"
+
+[[generated]]
+id = "OEg5N8U6mvvVlqXjMitVQ"
+uri = "file://artifacts/ehsan-poc/src/assets/needs/housing.png"
+type = "image"
+title = "generated_image"
+
+[[generated]]
+id = "AFFJIZDzUMiOPdNX2gKVh"
+uri = "file://artifacts/ehsan-poc/src/assets/needs/refrigerator.png"
+type = "image"
+title = "generated_image"
+
+[[generated]]
+id = "YIAjvv_f3yMsVMBCLeugg"
+uri = "file://artifacts/ehsan-poc/src/assets/needs/air_conditioner.png"
+type = "image"
+title = "generated_image"
+
+[[generated]]
+id = "zoqK8K6FBJwO9DN8NzUkc"
+uri = "file://artifacts/ehsan-poc/src/assets/needs/court_order.png"
+type = "image"
+title = "generated_image"

.agents/memory/MEMORY.md

@@ -0,0 +1,2 @@
+- [Donate semantics](donate-semantics.md) — donations accumulate + clamp to target; a case enters the closed-loop pipeline only when fully funded.
+- [api-server data](api-server-data.md) — mockDb is in-memory and mutated by POST calls; restart the workflow to reset to clean seed for demos.

.agents/memory/api-server-data.md

@@ -0,0 +1,14 @@
+---
+name: api-server data
+description: Nature of the EHSAN POC api-server data store and how to reset it.
+---
+
+# In-memory mockDb
+
+`artifacts/api-server` serves an in-memory `mockDb` (no real database). Any POST that
+mutates a request (donate, verify, publish, deliver, thank-you, etc.) persists only for
+the life of the process. Restart the `artifacts/api-server: API Server` workflow to
+re-seed clean demo data.
+
+**How to apply:** after running curl-based API tests that mutate state, restart the
+api-server workflow before screenshots/handoff so the user sees a clean seeded demo.

.agents/memory/donate-semantics.md

@@ -0,0 +1,21 @@
+---
+name: Donate semantics
+description: How donations affect a request's collectedAmount and status in the EHSAN POC.
+---
+
+# Donate accounting & pipeline transition
+
+On `POST /requests/:id/donate`, the server **adds** the donation to `collectedAmount`
+(never overwrites it), clamps the applied amount to the remaining target, rejects
+non-finite/non-positive amounts and cases that are not `published` / already funded.
+A case only transitions out of `published` into the closed-loop pipeline (`donated`
+→ delivered → … → whatsapp_sent → closed) once `collectedAmount >= requestedAmount`.
+
+**Why:** opportunity cards show a crowdfunding-style progress bar with collected/remaining.
+An earlier handler overwrote `collectedAmount` and force-advanced to `donated` on any
+donation — fine when all published seeds started at 0, but it silently corrupted totals
+and made partially funded cases vanish from `/requests/published` after one donation.
+
+**How to apply:** keep at least one seed case nearly fully funded so the closed loop is
+trivially demoable with a single preset donation. Frontend (`donate.tsx`) must also
+validate finite/positive amounts and clamp to remaining before submitting.

artifacts/api-server/src/lib/mockDb.ts

@@ -374,6 +374,144 @@ export const requests: DonationRequest[] = [
     createdAt: d(1),
     updatedAt: d(0),
   },
+  {
+    id: "req-012",
+    caseId: "CASE-012",
+    beneficiaryName: "هند فيصل العنزي",
+    nationalId: "1067890123",
+    phone: "0513333333",
+    source: "charity",
+    sourceName: "جمعية كافل الخيرية",
+    needType: "food",
+    requestedAmount: 1200,
+    collectedAmount: 780,
+    description: "سلة غذائية شهرية لأسرة مكونة من خمسة أفراد",
+    status: "published",
+    currentStep: 4,
+    donorId: null,
+    donorName: null,
+    thankYouMessage: null,
+    whatsappStatus: null,
+    whatsappSentAt: null,
+    rejectionReason: null,
+    createdAt: d(9),
+    updatedAt: d(2),
+  },
+  {
+    id: "req-013",
+    caseId: "CASE-013",
+    beneficiaryName: "صالح عوض الحارثي",
+    nationalId: "2078901234",
+    phone: "0514444444",
+    source: "official",
+    sourceName: "شركة الكهرباء السعودية",
+    needType: "electricity",
+    requestedAmount: 2600,
+    collectedAmount: 1850,
+    description: "سداد فاتورة كهرباء متراكمة لمنزل أسرة متعففة",
+    status: "published",
+    currentStep: 4,
+    donorId: null,
+    donorName: null,
+    thankYouMessage: null,
+    whatsappStatus: null,
+    whatsappSentAt: null,
+    rejectionReason: null,
+    createdAt: d(7),
+    updatedAt: d(1),
+  },
+  {
+    id: "req-014",
+    caseId: "CASE-014",
+    beneficiaryName: "لطيفة عبدالله الشهري",
+    nationalId: "1089012345",
+    phone: "0515555555",
+    source: "charity",
+    sourceName: "الهلال الأحمر السعودي",
+    needType: "health",
+    requestedAmount: 6000,
+    collectedAmount: 1500,
+    description: "مستلزمات طبية وأجهزة منزلية لمريضة مزمنة",
+    status: "published",
+    currentStep: 4,
+    donorId: null,
+    donorName: null,
+    thankYouMessage: null,
+    whatsappStatus: null,
+    whatsappSentAt: null,
+    rejectionReason: null,
+    createdAt: d(6),
+    updatedAt: d(1),
+  },
+  {
+    id: "req-015",
+    caseId: "CASE-015",
+    beneficiaryName: "ماجد سعيد القرني",
+    nationalId: "2090123456",
+    phone: "0516666666",
+    source: "beneficiary",
+    sourceName: "مستفيد مباشر",
+    needType: "water",
+    requestedAmount: 1400,
+    collectedAmount: 1120,
+    description: "سداد فاتورة مياه متأخرة لأسرة تعيلها أرملة",
+    status: "published",
+    currentStep: 4,
+    donorId: null,
+    donorName: null,
+    thankYouMessage: null,
+    whatsappStatus: null,
+    whatsappSentAt: null,
+    rejectionReason: null,
+    createdAt: d(5),
+    updatedAt: d(1),
+  },
+  {
+    id: "req-016",
+    caseId: "CASE-016",
+    beneficiaryName: "ريم ناصر المطيري",
+    nationalId: "1078901234",
+    phone: "0517777777",
+    source: "charity",
+    sourceName: "جمعية الإسكان التنموي",
+    needType: "housing",
+    requestedAmount: 9000,
+    collectedAmount: 3200,
+    description: "ترميم وحدة سكنية متضررة لأسرة ذات دخل محدود",
+    status: "published",
+    currentStep: 4,
+    donorId: null,
+    donorName: null,
+    thankYouMessage: null,
+    whatsappStatus: null,
+    whatsappSentAt: null,
+    rejectionReason: null,
+    createdAt: d(4),
+    updatedAt: d(1),
+  },
+  {
+    id: "req-017",
+    caseId: "CASE-017",
+    beneficiaryName: "عبدالعزيز فهد الرشيد",
+    nationalId: "2012345678",
+    phone: "0518888888",
+    source: "official",
+    sourceName: "جمعية تكافل",
+    needType: "air_conditioner",
+    requestedAmount: 2200,
+    collectedAmount: 2100,
+    description: "تأمين مكيف لمنزل يقطنه مسنون في منطقة شديدة الحرارة",
+    status: "published",
+    currentStep: 4,
+    donorId: null,
+    donorName: null,
+    thankYouMessage: null,
+    whatsappStatus: null,
+    whatsappSentAt: null,
+    rejectionReason: null,
+    createdAt: d(3),
+    updatedAt: d(1),
+  },
 ];
 
 // ─── WhatsApp Log ────────────────────────────────────────────────────────────

artifacts/api-server/src/routes/requests.ts

@@ -165,15 +165,30 @@ router.post("/requests/:id/donate", (req: Request, res: Response): void => {
   }
 
   const { donorName, donorPhone, donorEmail, amount } = req.body;
-  if (!donorName || !donorPhone || !amount) {
+  const amt = Number(amount);
-    res.status(400).json({ error: "Missing donor details" });
+  if (!donorName || !donorPhone || !Number.isFinite(amt) || amt <= 0) {
+    res.status(400).json({ error: "Invalid donor details or amount" });
     return;
   }
 
+  if (item.status !== "published") {
+    res.status(400).json({ error: "Case is not open for donations" });
+    return;
+  }
+
+  const remaining = Math.max(0, item.requestedAmount - item.collectedAmount);
+  if (remaining <= 0) {
+    res.status(400).json({ error: "Case already fully funded" });
+    return;
+  }
+
+  // Clamp the donation so the collected amount never exceeds the target.
+  const applied = Math.min(amt, remaining);
+
   const donorId = uuidv4();
   const existingDonor = donors.find((d) => d.phone === donorPhone);
   if (existingDonor) {
-    existingDonor.totalDonated += Number(amount);
+    existingDonor.totalDonated += applied;
     existingDonor.donationCount += 1;
     item.donorId = existingDonor.id;
   } else {
@@ -182,7 +197,7 @@ router.post("/requests/:id/donate", (req: Request, res: Response): void => {
       name: donorName,
       phone: donorPhone,
       email: donorEmail || null,
-      totalDonated: Number(amount),
+      totalDonated: applied,
       donationCount: 1,
     };
     donors.push(newDonor);
@@ -190,9 +205,13 @@ router.post("/requests/:id/donate", (req: Request, res: Response): void => {
   }
 
   item.donorName = donorName;
-  item.collectedAmount = Number(amount);
+  item.collectedAmount += applied;
-  item.status = "donated";
+
-  item.currentStep = STATUS_STEP["donated"];
+  // Only advance into the closed-loop pipeline once the case is fully funded.
+  if (item.collectedAmount >= item.requestedAmount) {
+    item.status = "donated";
+    item.currentStep = STATUS_STEP["donated"];
+  }
   item.updatedAt = new Date().toISOString();
   res.json(item);
 });

artifacts/ehsan-poc/src/App.tsx

@@ -1,10 +1,12 @@
-import { Switch, Route, Router as WouterRouter } from "wouter";
+import { Switch, Route, Router as WouterRouter, Redirect } from "wouter";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { LanguageProvider } from "./contexts/LanguageContext";
+import { AuthProvider, useAuth } from "./contexts/AuthContext";
 import { AppLayout } from "./components/layout/AppLayout";
 import NotFound from "@/pages/not-found";
+import { ComponentType } from "react";
 
 // Page imports
 import Home from "./pages/home";
@@ -15,9 +17,18 @@ import Admin from "./pages/admin";
 import Track from "./pages/track";
 import ThankYou from "./pages/thank-you";
 import WhatsappLog from "./pages/whatsapp-log";
+import Login from "./pages/login";
 
 const queryClient = new QueryClient();
 
+function Protected({ component: Component }: { component: ComponentType<any> }) {
+  const { isAuthenticated } = useAuth();
+  if (!isAuthenticated) {
+    return <Redirect to="/login" />;
+  }
+  return <Component />;
+}
+
 function Router() {
   return (
     <AppLayout>
@@ -26,10 +37,15 @@ function Router() {
         <Route path="/request" component={RequestSupport} />
         <Route path="/opportunities" component={Opportunities} />
         <Route path="/donate/:id" component={Donate} />
-        <Route path="/admin" component={Admin} />
+        <Route path="/login" component={Login} />
+        <Route path="/admin">
+          <Protected component={Admin} />
+        </Route>
         <Route path="/track/:id" component={Track} />
         <Route path="/thank-you/:id" component={ThankYou} />
-        <Route path="/whatsapp-log" component={WhatsappLog} />
+        <Route path="/whatsapp-log">
+          <Protected component={WhatsappLog} />
+        </Route>
         <Route component={NotFound} />
       </Switch>
     </AppLayout>
@@ -40,12 +56,14 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <LanguageProvider>
-        <TooltipProvider>
+        <AuthProvider>
-          <WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
+          <TooltipProvider>
-            <Router />
+            <WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
-          </WouterRouter>
+              <Router />
-          <Toaster />
+            </WouterRouter>
-        </TooltipProvider>
+            <Toaster />
+          </TooltipProvider>
+        </AuthProvider>
       </LanguageProvider>
     </QueryClientProvider>
   );

artifacts/ehsan-poc/src/components/OpportunityCard.tsx

@@ -0,0 +1,133 @@
+import { useState } from "react";
+import { useLocation } from "wouter";
+import { useLanguage } from "../contexts/LanguageContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Share2, ShoppingCart } from "lucide-react";
+import { getNeedImage } from "../lib/needImages";
+
+interface OpportunityCardProps {
+  request: {
+    id: string;
+    caseId: string;
+    description: string;
+    needType: string;
+    requestedAmount: number;
+    collectedAmount: number;
+  };
+}
+
+const RIYAL = "﷼";
+
+export function OpportunityCard({ request }: OpportunityCardProps) {
+  const { t } = useLanguage();
+  const [, setLocation] = useLocation();
+  const [amount, setAmount] = useState("");
+
+  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);
+  const isComplete = remaining <= 0;
+
+  const goDonate = () => {
+    const amt = Number(amount);
+    const suffix = amt > 0 ? `?amount=${amt}` : "";
+    setLocation(`/donate/${request.id}${suffix}`);
+  };
+
+  return (
+    <div className="bg-card rounded-2xl border border-card-border shadow-sm overflow-hidden flex flex-col hover-elevate">
+      {/* Photo + progress bar */}
+      <div className="relative">
+        <img
+          src={getNeedImage(request.needType)}
+          alt={request.description}
+          className="w-full h-44 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>
+
+      <div className="p-4 flex flex-col flex-1">
+        {/* Category badge */}
+        <div className="flex justify-start mb-3">
+          <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>
+        </div>
+
+        {/* Title + share */}
+        <div className="flex items-start justify-between gap-3 mb-4">
+          <h3 className="text-base font-bold text-primary leading-snug line-clamp-2 flex-1">
+            {request.description}
+          </h3>
+          <Share2 className="w-4 h-4 text-muted-foreground shrink-0 mt-1" />
+        </div>
+
+        {/* Collected / Remaining */}
+        <div className="grid grid-cols-2 gap-2 bg-muted/40 rounded-xl p-4 mb-4 mt-auto">
+          <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>
+
+        {/* Donate row */}
+        <div className="flex items-stretch gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="shrink-0"
+            onClick={goDonate}
+            disabled={isComplete}
+            aria-label={t.common.cart}
+            data-testid={`button-cart-${request.id}`}
+          >
+            <ShoppingCart className="w-4 h-4" />
+          </Button>
+          <Button
+            className="shrink-0 px-5"
+            onClick={goDonate}
+            disabled={isComplete}
+            data-testid={`button-donate-${request.id}`}
+          >
+            {t.opportunities.donate}
+          </Button>
+          <div className="relative flex-1">
+            <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)}
+              placeholder={t.opportunities.amountPlaceholder}
+              className="ps-8 h-full"
+              disabled={isComplete}
+              data-testid={`input-cardAmount-${request.id}`}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

artifacts/ehsan-poc/src/components/layout/AppLayout.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { Header } from "./Header";
+import ehsanLogo from "../../assets/ehsan-logo.png";
 
 export function AppLayout({ children }: { children: ReactNode }) {
   return (
@@ -9,8 +10,11 @@ export function AppLayout({ children }: { children: ReactNode }) {
         {children}
       </main>
       <footer className="border-t bg-white mt-auto py-8">
-        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
+        <div className="container mx-auto px-4 flex flex-col items-center gap-3 text-center">
-          EHSAN POC &copy; {new Date().getFullYear()}
+          <img src={ehsanLogo} alt="EHSAN" className="h-9 w-auto object-contain" />
+          <p className="text-sm text-muted-foreground">
+            EHSAN POC &copy; {new Date().getFullYear()}
+          </p>
         </div>
       </footer>
     </div>

artifacts/ehsan-poc/src/components/layout/Header.tsx

@@ -1,57 +1,216 @@
+import { useState } from "react";
 import { Link, useLocation } from "wouter";
 import { useLanguage } from "../../contexts/LanguageContext";
+import { useAuth } from "../../contexts/AuthContext";
 import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import {
+  Search,
+  ShoppingCart,
+  User,
+  ChevronDown,
+  Menu,
+  X,
+  LogOut,
+  Globe,
+} from "lucide-react";
+import ehsanLogo from "../../assets/ehsan-logo.png";
 
 export function Header() {
   const { language, setLanguage, t } = useLanguage();
-  const [location] = useLocation();
+  const { isAuthenticated, logout } = useAuth();
+  const [location, setLocation] = useLocation();
+  const [mobileOpen, setMobileOpen] = useState(false);
 
-  const toggleLanguage = () => {
+  const toggleLanguage = () => setLanguage(language === "ar" ? "en" : "ar");
-    setLanguage(language === "ar" ? "en" : "ar");
-  };
 
-  const navItems = [
+  const isActive = (path: string) => location === path;
-    { path: "/", label: t.common.home },
-    { path: "/opportunities", label: t.common.opportunities },
-    { path: "/request", label: t.common.requestSupport },
-    { path: "/admin", label: t.common.adminDashboard },
-    { path: "/whatsapp-log", label: t.common.whatsappLog },
-  ];
 
   return (
-    <header className="border-b bg-white sticky top-0 z-50">
+    <header className="bg-white sticky top-0 z-50 shadow-sm">
-      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+      <div className="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
-        <div className="flex items-center gap-8">
+        {/* Logo */}
-          <Link href="/" className="flex items-center gap-2">
+        <Link href="/" className="flex items-center shrink-0">
-            <div className="w-8 h-8 rounded bg-primary flex items-center justify-center text-primary-foreground font-bold">
+          <img src={ehsanLogo} alt={t.common.ehsan} className="h-11 w-auto object-contain" />
-              إ
+        </Link>
-            </div>
+
-            <span className="text-xl font-bold text-primary">{t.common.ehsan}</span>
+        {/* Desktop nav */}
+        <nav className="hidden lg:flex items-center gap-1 flex-1 justify-center">
+          <Link
+            href="/"
+            className={`px-3 py-2 text-sm font-medium rounded-md transition-colors ${
+              isActive("/") ? "text-primary" : "text-foreground hover:text-primary"
+            }`}
+            data-testid="nav-home"
+          >
+            {t.nav.home}
           </Link>
 
-          <nav className="hidden md:flex items-center gap-1">
+          <span className="px-3 py-2 text-sm font-medium text-foreground/70 cursor-default select-none">
-            {navItems.map((item) => (
+            {t.nav.waqf}
-              <Link 
+          </span>
-                key={item.path} 
-                href={item.path}
-                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  location === item.path 
-                    ? "text-primary bg-primary/10" 
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted"
-                }`}
-              >
-                {item.label}
-              </Link>
-            ))}
-          </nav>
-        </div>
 
-        <div className="flex items-center gap-4">
+          <Link
-          <Button variant="ghost" onClick={toggleLanguage} className="font-medium">
+            href="/opportunities"
-            {t.common.language}
+            className="px-4 py-2 text-sm font-bold rounded-md bg-primary text-primary-foreground inline-flex items-center gap-1 hover:opacity-90 transition-opacity"
+            data-testid="nav-opportunities"
+          >
+            {t.nav.opportunities}
+            <ChevronDown className="w-3.5 h-3.5" />
+          </Link>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                className="px-3 py-2 text-sm font-medium text-foreground hover:text-primary inline-flex items-center gap-1 transition-colors"
+                data-testid="nav-services"
+              >
+                {t.nav.services}
+                <ChevronDown className="w-3.5 h-3.5" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center">
+              <DropdownMenuItem onClick={() => setLocation("/request")} data-testid="nav-requestSupport">
+                {t.nav.requestSupport}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <span className="px-3 py-2 text-sm font-medium text-foreground/70 cursor-default select-none">
+            {t.nav.about}
+          </span>
+
+          <span className="px-3 py-2 text-sm font-medium text-foreground/70 cursor-default select-none">
+            {t.nav.baraem}
+          </span>
+        </nav>
+
+        {/* Utility icons */}
+        <div className="flex items-center gap-1 shrink-0">
+          {isAuthenticated ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-1.5 hidden sm:inline-flex"
+              onClick={() => { logout(); setLocation("/"); }}
+              data-testid="button-logout"
+            >
+              <LogOut className="w-4 h-4" />
+              <span className="hidden md:inline">{t.common.logout}</span>
+            </Button>
+          ) : (
+            <Link
+              href="/login"
+              className="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-2 text-sm font-medium text-foreground hover:text-primary transition-colors"
+              data-testid="button-login"
+            >
+              <User className="w-4 h-4" />
+              <span className="hidden md:inline">{t.common.login}</span>
+            </Link>
+          )}
+
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-foreground"
+            aria-label={t.common.cart}
+            data-testid="button-cart"
+          >
+            <ShoppingCart className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-foreground"
+            aria-label={t.common.search}
+            onClick={() => setLocation("/")}
+            data-testid="button-search"
+          >
+            <Search className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={toggleLanguage}
+            className="gap-1.5 font-medium"
+            data-testid="button-language"
+          >
+            <Globe className="w-4 h-4" />
+            <span className="hidden md:inline">{t.common.language}</span>
+          </Button>
+
+          {/* Mobile menu toggle */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="lg:hidden text-foreground"
+            onClick={() => setMobileOpen((v) => !v)}
+            aria-label="Menu"
+            data-testid="button-mobileMenu"
+          >
+            {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
           </Button>
         </div>
       </div>
+
+      {/* Mobile nav panel */}
+      {mobileOpen && (
+        <div className="lg:hidden border-t bg-white px-4 py-3 space-y-1">
+          <Link
+            href="/"
+            onClick={() => setMobileOpen(false)}
+            className="block px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
+          >
+            {t.nav.home}
+          </Link>
+          <Link
+            href="/opportunities"
+            onClick={() => setMobileOpen(false)}
+            className="block px-3 py-2 rounded-md text-sm font-bold text-primary hover:bg-muted"
+          >
+            {t.nav.opportunities}
+          </Link>
+          <Link
+            href="/request"
+            onClick={() => setMobileOpen(false)}
+            className="block px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
+          >
+            {t.nav.requestSupport}
+          </Link>
+          <div className="pt-2 mt-2 border-t">
+            {isAuthenticated ? (
+              <>
+                <Link
+                  href="/admin"
+                  onClick={() => setMobileOpen(false)}
+                  className="block px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
+                >
+                  {t.nav.admin}
+                </Link>
+                <button
+                  onClick={() => { logout(); setMobileOpen(false); setLocation("/"); }}
+                  className="block w-full text-start px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
+                >
+                  {t.common.logout}
+                </button>
+              </>
+            ) : (
+              <Link
+                href="/login"
+                onClick={() => setMobileOpen(false)}
+                className="block px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
+              >
+                {t.common.login}
+              </Link>
+            )}
+          </div>
+        </div>
+      )}
     </header>
   );
 }

artifacts/ehsan-poc/src/contexts/AuthContext.tsx

@@ -0,0 +1,47 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface AuthContextType {
+  isAuthenticated: boolean;
+  login: (username: string, password: string) => boolean;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const STORAGE_KEY = "ehsan_admin_auth";
+const DEMO_USERNAME = "admin";
+const DEMO_PASSWORD = "admin";
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
+    () => localStorage.getItem(STORAGE_KEY) === "true"
+  );
+
+  const login = (username: string, password: string) => {
+    if (username.trim() === DEMO_USERNAME && password === DEMO_PASSWORD) {
+      localStorage.setItem(STORAGE_KEY, "true");
+      setIsAuthenticated(true);
+      return true;
+    }
+    return false;
+  };
+
+  const logout = () => {
+    localStorage.removeItem(STORAGE_KEY);
+    setIsAuthenticated(false);
+  };
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

artifacts/ehsan-poc/src/index.css

@@ -46,6 +46,9 @@
   --color-chart-4: hsl(var(--chart-4));
   --color-chart-5: hsl(var(--chart-5));
 
+  --color-ehsan-orange: hsl(var(--ehsan-orange));
+  --color-ehsan-orange-foreground: hsl(var(--ehsan-orange-foreground));
+
   --color-sidebar: hsl(var(--sidebar));
   --color-sidebar-foreground: hsl(var(--sidebar-foreground));
   --color-sidebar-border: hsl(var(--sidebar-border));
@@ -96,9 +99,12 @@
   --popover-foreground: 143 50% 10%;
   --popover-border: 143 20% 90%;
 
-  --primary: 143 60% 26%;
+  --primary: 146 64% 32%;
   --primary-foreground: 0 0% 100%;
 
+  --ehsan-orange: 28 92% 52%;
+  --ehsan-orange-foreground: 0 0% 100%;
+
   --secondary: 143 20% 94%;
   --secondary-foreground: 143 60% 26%;
 
@@ -175,9 +181,12 @@
   --popover-foreground: 0 0% 98%;
   --popover-border: 143 30% 15%;
 
-  --primary: 143 60% 40%;
+  --primary: 146 55% 42%;
   --primary-foreground: 0 0% 100%;
 
+  --ehsan-orange: 28 92% 55%;
+  --ehsan-orange-foreground: 0 0% 100%;
+
   --secondary: 143 30% 15%;
   --secondary-foreground: 143 60% 40%;
 

artifacts/ehsan-poc/src/lib/i18n/translations.ts

@@ -25,6 +25,31 @@ export const en = {
     allOpportunities: "All Opportunities",
     featuredCases: "Featured Cases",
     donate: "Donate",
+    login: "Login",
+    logout: "Logout",
+    cart: "Cart",
+  },
+  nav: {
+    home: "Home",
+    waqf: "Endowment",
+    opportunities: "Donation Opportunities",
+    services: "Services",
+    about: "About EHSAN",
+    baraem: "EHSAN Buds",
+    requestSupport: "Request Support",
+    admin: "Admin Panel",
+    whatsappLog: "WhatsApp Log",
+    quickDonate: "Quick Donate",
+  },
+  auth: {
+    title: "Admin Login",
+    subtitle: "Sign in to access the management dashboard",
+    username: "Username",
+    password: "Password",
+    signIn: "Sign In",
+    error: "Invalid username or password",
+    demoHint: "Demo credentials: admin / admin",
+    loggedInAs: "Signed in as administrator",
   },
   home: {
     heroTitle: "Closed Donation Loop POC",
@@ -102,6 +127,10 @@ export const en = {
     target: "Target",
     noOpportunities: "No opportunities are available right now.",
     verified: "Verified",
+    collectedShort: "Collected",
+    remainingShort: "Remaining",
+    amountPlaceholder: "Donation amount",
+    generalProjects: "General Projects",
   },
   donate: {
     title: "Complete Donation",
@@ -113,6 +142,18 @@ export const en = {
     confirmDonation: "Confirm Donation",
     successMessage: "Thank you for your donation. May Allah reward you.",
     caseNotFound: "Case not found or no longer available.",
+    stepDetails: "Details",
+    stepPayment: "Payment",
+    detailsTitle: "Details",
+    amountTitle: "Donation Amount",
+    customAmount: "Amount value",
+    onBehalf: "Donate on behalf of family or friends and share the reward",
+    onBehalfName: "Name of the person you donate for",
+    donateNow: "Donate Now",
+    continueToPayment: "Continue to Payment",
+    backToDetails: "Back to Details",
+    paymentTitle: "Payment Details",
+    selectAmountError: "Please select or enter a valid amount.",
   },
   admin: {
     title: "Admin Dashboard",
@@ -192,6 +233,31 @@ export const ar = {
     allOpportunities: "جميع الفرص",
     featuredCases: "الحالات المميزة",
     donate: "تبرع",
+    login: "تسجيل الدخول",
+    logout: "تسجيل الخروج",
+    cart: "السلة",
+  },
+  nav: {
+    home: "الرئيسية",
+    waqf: "الوقف",
+    opportunities: "فرص التبرع",
+    services: "خدماتنا",
+    about: "عن إحسان",
+    baraem: "براعم إحسان",
+    requestSupport: "طلب دعم",
+    admin: "لوحة الإدارة",
+    whatsappLog: "سجل واتساب",
+    quickDonate: "تبرع سريع",
+  },
+  auth: {
+    title: "دخول الإدارة",
+    subtitle: "سجّل الدخول للوصول إلى لوحة الإدارة",
+    username: "اسم المستخدم",
+    password: "كلمة المرور",
+    signIn: "تسجيل الدخول",
+    error: "اسم المستخدم أو كلمة المرور غير صحيحة",
+    demoHint: "بيانات تجريبية: admin / admin",
+    loggedInAs: "تم تسجيل الدخول كمسؤول",
   },
   home: {
     heroTitle: "إقفال دورة التبرع",
@@ -269,6 +335,10 @@ export const ar = {
     target: "الهدف",
     noOpportunities: "لا توجد فرص متاحة حالياً.",
     verified: "موثق",
+    collectedShort: "تم جمع",
+    remainingShort: "المبلغ المتبقي",
+    amountPlaceholder: "مبلغ التبرع",
+    generalProjects: "المشاريع العامة",
   },
   donate: {
     title: "إتمام التبرع",
@@ -280,6 +350,18 @@ export const ar = {
     confirmDonation: "تأكيد التبرع",
     successMessage: "شكراً لتبرعك. جزاك الله خيراً.",
     caseNotFound: "الحالة غير موجودة أو لم تعد متاحة.",
+    stepDetails: "التفاصيل",
+    stepPayment: "الدفع",
+    detailsTitle: "التفاصيل",
+    amountTitle: "مبلغ التبرع",
+    customAmount: "قيمة المبلغ",
+    onBehalf: "تبرع عن أهلك أو أصدقائك وشاركهم الأجر",
+    onBehalfName: "اسم من تتبرع عنه",
+    donateNow: "تبرع الآن",
+    continueToPayment: "متابعة للدفع",
+    backToDetails: "رجوع للتفاصيل",
+    paymentTitle: "بيانات الدفع",
+    selectAmountError: "الرجاء اختيار أو إدخال مبلغ صحيح.",
   },
   admin: {
     title: "لوحة الإدارة",

artifacts/ehsan-poc/src/lib/needImages.ts

@@ -0,0 +1,23 @@
+import electricity from "../assets/needs/electricity.png";
+import water from "../assets/needs/water.png";
+import food from "../assets/needs/food.png";
+import health from "../assets/needs/health.png";
+import housing from "../assets/needs/housing.png";
+import refrigerator from "../assets/needs/refrigerator.png";
+import air_conditioner from "../assets/needs/air_conditioner.png";
+import court_order from "../assets/needs/court_order.png";
+
+const NEED_IMAGES: Record<string, string> = {
+  electricity,
+  water,
+  food,
+  health,
+  housing,
+  refrigerator,
+  air_conditioner,
+  court_order,
+};
+
+export function getNeedImage(needType: string): string {
+  return NEED_IMAGES[needType] || food;
+}

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 { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
-import { Progress } from "@/components/ui/progress";
+import { CheckCircle, Heart, Gift, ShoppingCart, Check } from "lucide-react";
-import { CheckCircle, Heart } 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: {
+    defaultValues: { donorName: "", donorPhone: "", donorEmail: "" },
-      donorName: "",
-      donorPhone: "",
-      donorEmail: "",
-      amount: 0,
-    },
   });
 
-  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" />
+            <Heart className="w-16 h-16 text-primary mx-auto mb-4 fill-primary/10" />
-            <CheckCircle className="w-10 h-10 text-green-500 mx-auto mb-4" />
+            <CheckCircle className="w-10 h-10 text-primary mx-auto mb-4" />
-            <h2 className="text-2xl font-bold text-green-700 mb-2">{t.common.success}</h2>
+            <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(
+  const goToPayment = () => {
-    100,
+    const amt = Number(amount);
-    request.requestedAmount > 0
+    if (!Number.isFinite(amt) || amt <= 0) {
-      ? Math.round((request.collectedAmount / request.requestedAmount) * 100)
+      setAmountError(true);
-      : 0
+      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="container mx-auto px-4 py-12 max-w-5xl">
-      <div className="mb-8">
+      <h1 className="text-3xl font-bold text-foreground mb-8 text-center">{t.donate.title}</h1>
-        <h1 className="text-3xl font-bold text-foreground">{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 */}
+      <div className="mt-6 text-center">
-      <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">
         <Link href="/opportunities">
           <Button variant="ghost" size="sm">{t.common.back}</Button>
         </Link>

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

@@ -1,12 +1,11 @@
 import { useState } from "react";
 import { useLanguage } from "../contexts/LanguageContext";
 import { useGetStats, useListPublishedRequests } from "@workspace/api-client-react";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
+import { OpportunityCard } from "../components/OpportunityCard";
 import { Link } from "wouter";
 import { Search } from "lucide-react";
 
@@ -117,7 +116,7 @@ export default function Home() {
 
         {pubLoading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-64 w-full" />)}
+            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-96 w-full" />)}
           </div>
         ) : filtered.length === 0 ? (
           <div className="col-span-full text-center py-12 text-muted-foreground bg-muted/20 rounded-xl border border-dashed">
@@ -125,56 +124,9 @@ export default function Home() {
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filtered.slice(0, 6).map((request) => {
+            {filtered.slice(0, 6).map((request) => (
-              const progress = Math.min(
+              <OpportunityCard key={request.id} request={request} />
-                100,
+            ))}
-                request.requestedAmount > 0
-                  ? Math.round((request.collectedAmount / request.requestedAmount) * 100)
-                  : 0
-              );
-              const remaining = Math.max(0, request.requestedAmount - request.collectedAmount);
-              return (
-                <Card key={request.id} className="overflow-hidden flex flex-col">
-                  <CardHeader className="bg-primary/5 pb-4 border-b">
-                    <div className="flex justify-between items-start mb-2">
-                      <Badge variant="outline" className="bg-white">
-                        {t.needTypes[request.needType as keyof typeof t.needTypes] || request.needType}
-                      </Badge>
-                      <Badge className="bg-green-600 text-white">
-                        {t.opportunities.verified}
-                      </Badge>
-                    </div>
-                    <CardTitle className="text-base line-clamp-2">{request.description}</CardTitle>
-                    <p className="text-xs font-mono text-muted-foreground">{request.caseId}</p>
-                  </CardHeader>
-                  <CardContent className="pt-5 flex-1">
-                    <div className="flex justify-between text-sm mb-2">
-                      <span className="text-muted-foreground">
-                        {t.opportunities.collected}:{" "}
-                        <strong className="text-foreground">{request.collectedAmount.toLocaleString()} ﷼</strong>
-                      </span>
-                      <span className="text-muted-foreground">
-                        {t.opportunities.target}:{" "}
-                        <strong className="text-foreground">{request.requestedAmount.toLocaleString()} ﷼</strong>
-                      </span>
-                    </div>
-                    <Progress value={progress} className="h-2 mb-2" />
-                    <div className="text-sm font-medium text-primary">{progress}%</div>
-                    <div className="mt-3 text-center">
-                      <span className="text-sm text-muted-foreground">{t.opportunities.remaining}: </span>
-                      <span className="font-bold text-lg">{remaining.toLocaleString()} ﷼</span>
-                    </div>
-                  </CardContent>
-                  <CardFooter className="pt-0">
-                    <Link href={`/donate/${request.id}`} className="w-full">
-                      <Button className="w-full" disabled={remaining <= 0}>
-                        {t.opportunities.donate}
-                      </Button>
-                    </Link>
-                  </CardFooter>
-                </Card>
-              );
-            })}
           </div>
         )}
       </section>

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

@@ -0,0 +1,84 @@
+import { useState, useEffect } from "react";
+import { useLocation } from "wouter";
+import { useLanguage } from "../contexts/LanguageContext";
+import { useAuth } from "../contexts/AuthContext";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Lock } from "lucide-react";
+import ehsanLogo from "../assets/ehsan-logo.png";
+
+export default function Login() {
+  const { t } = useLanguage();
+  const { login, isAuthenticated } = useAuth();
+  const [, setLocation] = useLocation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (isAuthenticated) setLocation("/admin");
+  }, [isAuthenticated, setLocation]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const ok = login(username, password);
+    if (ok) {
+      setLocation("/admin");
+    } else {
+      setError(true);
+    }
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-16 flex justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center space-y-3">
+          <img src={ehsanLogo} alt="EHSAN" className="h-12 w-auto mx-auto object-contain" />
+          <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+            <Lock className="w-6 h-6 text-primary" />
+          </div>
+          <CardTitle className="text-xl">{t.auth.title}</CardTitle>
+          <p className="text-sm text-muted-foreground">{t.auth.subtitle}</p>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="username">{t.auth.username}</Label>
+              <Input
+                id="username"
+                value={username}
+                onChange={(e) => { setUsername(e.target.value); setError(false); }}
+                autoComplete="username"
+                data-testid="input-username"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">{t.auth.password}</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => { setPassword(e.target.value); setError(false); }}
+                autoComplete="current-password"
+                data-testid="input-password"
+              />
+            </div>
+            {error && (
+              <p className="text-sm text-destructive" data-testid="text-loginError">
+                {t.auth.error}
+              </p>
+            )}
+            <Button type="submit" className="w-full" data-testid="button-signIn">
+              {t.auth.signIn}
+            </Button>
+            <p className="text-xs text-center text-muted-foreground bg-muted/40 rounded-md py-2 px-3">
+              {t.auth.demoHint}
+            </p>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -1,12 +1,8 @@
 import { useState } from "react";
 import { useLanguage } from "../contexts/LanguageContext";
 import { useListPublishedRequests } from "@workspace/api-client-react";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Link } from "wouter";
+import { OpportunityCard } from "../components/OpportunityCard";
 
 type NeedTypeKey =
   | "electricity" | "water" | "food" | "health"
@@ -65,7 +61,7 @@ export default function Opportunities() {
       {isLoading ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {[1, 2, 3].map((i) => (
-            <Skeleton key={i} className="h-64 w-full" />
+            <Skeleton key={i} className="h-96 w-full" />
           ))}
         </div>
       ) : filtered.length === 0 ? (
@@ -74,57 +70,9 @@ export default function Opportunities() {
         </div>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filtered.map((request) => {
+          {filtered.map((request) => (
-            const progress = Math.min(
+            <OpportunityCard key={request.id} request={request} />
-              100,
+          ))}
-              request.requestedAmount > 0
-                ? Math.round((request.collectedAmount / request.requestedAmount) * 100)
-                : 0
-            );
-            const remaining = Math.max(0, request.requestedAmount - request.collectedAmount);
-
-            return (
-              <Card key={request.id} className="overflow-hidden flex flex-col">
-                <CardHeader className="bg-primary/5 pb-4 border-b">
-                  <div className="flex justify-between items-start mb-2">
-                    <Badge variant="outline" className="bg-white">
-                      {t.needTypes[request.needType as keyof typeof t.needTypes] || request.needType}
-                    </Badge>
-                    <Badge className="bg-green-600 text-white">
-                      {t.opportunities.verified}
-                    </Badge>
-                  </div>
-                  <CardTitle className="text-base line-clamp-2">{request.description}</CardTitle>
-                  <p className="text-xs font-mono text-muted-foreground mt-1">{request.caseId}</p>
-                </CardHeader>
-                <CardContent className="pt-5 flex-1">
-                  <div className="flex justify-between text-sm mb-2">
-                    <span className="text-muted-foreground">
-                      {t.opportunities.collected}:{" "}
-                      <strong className="text-foreground">{request.collectedAmount.toLocaleString()} ﷼</strong>
-                    </span>
-                    <span className="text-muted-foreground">
-                      {t.opportunities.target}:{" "}
-                      <strong className="text-foreground">{request.requestedAmount.toLocaleString()} ﷼</strong>
-                    </span>
-                  </div>
-                  <Progress value={progress} className="h-2 mb-2" />
-                  <div className="text-sm font-medium text-primary">{progress}%</div>
-                  <div className="mt-3 text-center">
-                    <span className="text-sm text-muted-foreground">{t.opportunities.remaining}: </span>
-                    <span className="font-bold text-xl">{remaining.toLocaleString()} ﷼</span>
-                  </div>
-                </CardContent>
-                <CardFooter className="pt-0">
-                  <Link href={`/donate/${request.id}`} className="w-full">
-                    <Button className="w-full" disabled={remaining <= 0}>
-                      {t.opportunities.donate}
-                    </Button>
-                  </Link>
-                </CardFooter>
-              </Card>
-            );
-          })}
         </div>
       )}
     </div>