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/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) => {
-            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);
-
-            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>
-            );
-          })}
+          {filtered.map((request) => (
+            <OpportunityCard key={request.id} request={request} />
+          ))}
         </div>
       )}
     </div>