Task #11: Rework the EHSAN header "خدماتنا" (Services) menu from a narrow
vertical radix dropdown into a full-width horizontal mega-menu, matching the
real ehsan.sa layout where services span the width as icon-above-label columns.
Changes (artifacts/ehsan-poc/src/components/layout/Header.tsx):
- Removed the radix DropdownMenu for services; replaced with a custom
state-controlled panel (servicesOpen) absolutely positioned full-width
below the sticky header (header set to relative; panel inset-x-0 top-full).
- Eight services render in a single horizontal flex row, each as an icon
stacked above its label, with direction-aware vertical dividers (border-s
on non-first items) so RTL/LTR both read correctly.
- "طلب دعم" kept as a distinct trailing column (subtle bg) routing to /request.
- Dismissal: outside-click (document mousedown + ref containment), Escape key,
selecting an item, and mouse-leaving the panel. Trigger is click-to-toggle.
- Accessibility: trigger has aria-haspopup/aria-controls/aria-expanded; panel
has id="services-megamenu" and role="menu".
Deviation: dropped trigger hover-to-open (kept click-toggle) because a
mouseenter+click race closed the panel immediately under Playwright; click
toggle is predictable. Mobile services list (vertical) intentionally unchanged.
Verified: tsc --noEmit clean; e2e UI test passed (open, horizontal layout with
all 8 services + request, Escape closes, click navigates to /opportunities and
closes); console clean; architect review Pass. No emojis.
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.
Replit Agent