Task #16: The last two top-nav items were static, non-clickable text.
Turned both into real bilingual (AR/EN) routed pages, completing the
main navigation of the EHSAN POC.
Changes:
- translations.ts: added parallel `waqf` and `baraem` sections to both
`en` and `ar` (intro, contribution ways, endowment fields/features for
waqf; goals, features, audience for baraem). Content mirrors ehsan.sa
section structure; no emojis.
- New pages src/pages/waqf.tsx and src/pages/baraem.tsx, built on the
about.tsx pattern: green intro panel, Reveal scroll-in, Card grids,
RTL-correct using logical classes and the t.* system.
- App.tsx: registered /waqf and /baraem routes.
- Header.tsx: replaced the two static <span> items with active-aware
<Link>s in desktop nav, and added matching entries to the mobile nav.
Verified: tsc --noEmit passes; both pages render correctly in Arabic
RTL with active nav highlighting (screenshots checked).
Replit-Task-Id: 40da5508-41c9-4ccd-aba4-2ea80183a97b
Built a real donation cart matching ehsan.sa:
- CartContext provider (localStorage-persisted, defensive parsing) wired into App.tsx
- OpportunityCard: cart icon now adds the case with its typed amount and swaps the
action row to an added state («مضاف لسلة تبرعاتك» + «إزالة»)
- Header cart button: live count badge + navigates to /cart
- New /cart page + route: breadcrumb, item list (delete icon, category, name,
editable «قيمة المبلغ» amount, image+progress%), summary panel «الإجمالي» +
green «للمتابعة للدفع», decorative leaf SVG background, empty state
- translations.ts: parallel AR+EN `cart` section
- donate.tsx: removes the donated case from the cart on successful donation
(cart reconciliation), preventing stale added-state/badge
Notes/deviations:
- Checkout handoff routes the first cart item into the existing single-case donate
flow (the POC backend has no multi-item payment). Reconciliation keeps remaining
items coherent. A true multi-item checkout backend was out of scope.
- Verified with passing e2e test (add → badge → cart page → remove → empty) and
clean tsc; architect review addressed (reconciliation + defensive parsing).
Task #15: Make «عن إحسان» top-nav a real dropdown and build the About page.
- Header.tsx: converted static «عن إحسان» span into a dropdown trigger
replicating the existing services dropdown pattern (aboutOpen state,
trigger/panel refs, outside-click + Escape handling). Desktop panel and
mobile nav both list «من نحن» (/about) and «اللجان» (/about/committees).
- New pages/about.tsx: green intro panel («نبذة عن إحسان») + tab strip
(الرؤية والرسالة / الأهداف والركائز / المزايا والمجالات) for the Who-we-are
view, and a committee card grid for the Committees view. Section chosen via
/about/:section? route param; in-page toggle between the two. Reuses Reveal
for scroll-in.
- App.tsx: registered <Route path="/about/:section?" component={About} />.
- translations.ts: added full bilingual `about` section (AR + EN).
Fully bilingual via existing t.* system, RTL verified, no emojis.
tsc passes; screenshots confirm both views render correctly.
Task #12: Make the solid green fill the moving active-page indicator in the
header nav, matching the real ehsan.sa (where the current page's nav item is
filled solid green and that fill moves as you navigate).
Changes (artifacts/ehsan-poc/src/components/layout/Header.tsx):
- Desktop "الرئيسية" (Home): now solid green fill (bg-primary, white text,
bold) only when on "/"; plain text otherwise.
- Desktop "فرص التبرع" (Opportunities): removed the always-on green CTA
background and the active ring/outline. Now plain text (keeps its chevron)
when inactive, and solid green fill only when on "/opportunities".
- Replaced the previous thin-outline/border active treatment on Home with the
shared solid-green-fill active style so both links use one consistent
indicator that moves with the route.
- Mobile nav: Home and Opportunities links updated to the same moving
solid-green active fill for cross-breakpoint consistency.
Out of scope (unchanged): non-route placeholder items (الوقف، عن إحسان،
براعم إحسان), the services mega-menu layout/contents and its trigger.
Verified: tsc --noEmit clean; screenshots confirm green fill on الرئيسية at
"/" and on فرص التبرع at "/opportunities" with the other reverting to plain
text; console clean after workflow restart. No emojis. Bilingual unaffected.
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.
Task #9: Two header fixes on artifacts/ehsan-poc.
1. Nav active state no longer stuck on "فرص التبرع". Active page now gets
a moving green outline box (Home) matching the real ehsan.sa nav.
"فرص التبرع" stays a solid green CTA but only shows an active green ring
when on /opportunities. Applied consistent active styling across desktop
and mobile nav (Home, Opportunities, Request).
2. "خدماتنا" dropdown now lists the eight official services from the
reference image, each with a lucide icon: غراس (Sprout), الزكاة
(HandCoins), هدية (Gift), الأضاحي (Beef), الحملات (Megaphone), التبرع
الدوري (Repeat), التبرع بالرسائل (MessageSquare), تطهير الأسهم
(TrendingUp). Each routes to /opportunities (POC has no per-service
pages). Kept "طلب دعم" below a separator so desktop users retain access
to /request. Mobile menu mirrors the services list.
Added serviceItems i18n group (AR + EN) in translations.ts.
Files: src/components/layout/Header.tsx, src/lib/i18n/translations.ts.
Verified: tsc --noEmit clean; e2e UI test passed (active state moves,
dropdown shows all 8 items + request, routing works); console clean after
HMR-restart of the web workflow. 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.
riyadhafraa