Adjusted CSS variables in `artifacts/ehsan-poc/src/index.css` to use a darker green hue (151 60% 22%) across various elements, including primary, secondary, accents, and shadows, to improve visual consistency and align with design requirements.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: f368afc6-0fc5-4345-a88a-96e71610d50a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/uNDZCn1
Replit-Helium-Checkpoint-Created: true
Modify AppLayout.tsx to position logos on the left and remove the copyright text. Update translations.ts to remove the unused 'rights' key from both English and Arabic translations.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: e0e5f5a2-de1f-4a4a-bb11-a0274e8baf97
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/b8dNQRE
Replit-Helium-Checkpoint-Created: true
The home "إحسانكم لعام 2026" stats numbers now count up from zero to their
final value when the section scrolls into view, like a counter.
New component (artifacts/ehsan-poc/src/components/CountUp.tsx):
- Parses the formatted value string: first space-separated token is the
number, the rest is the suffix (مليون/ألف/مليار / Million/Thousand/Billion).
- Detects the decimal separator present in the token (comma for AR "85,4",
period for "3.113"/EN) and the decimal-digit count; parses to float by
normalizing the separator to ".".
- Uses framer-motion useInView (once, amount 0.3) to trigger a
requestAnimationFrame ease-out animation (~1.6s) from 0 -> target,
re-formatting each frame with the same decimals + separator + suffix.
- Respects useReducedMotion: renders final value immediately.
- Safe fallback: if the token has no parseable number, renders the original
string unchanged.
Wire-up (artifacts/ehsan-poc/src/pages/home.tsx):
- Destructured `language` from useLanguage.
- Replaced raw {value} in the stat number div with
<CountUp key={`${language}-${value}`} value={value} /> so it re-parses and
re-animates on AR<->EN toggle. Color (#14573A), size, layout unchanged.
Verified: tsc --noEmit clean; screenshot shows numbers mid-animation with
correct separators/suffixes in AR (RTL).
The "إحسانكم لعام 2026" statistics section rendered its heading and big
numbers in the bright brand green (text-primary). The reference uses a
deeper forest green for those text elements, keeping the brighter green only
for the icons/leaf.
Change (artifacts/ehsan-poc/src/pages/home.tsx):
- Heading <h2> and each stat number <div>: text-primary -> text-[#14573A]
(deep forest green sampled from the reference image).
- Leaf accent and the three card icons: kept text-primary (#1B8354).
- Subtitle and labels: unchanged (text-muted-foreground gray).
No layout/order changes; works in AR (RTL) and EN. tsc --noEmit clean;
verified visually in the preview.
The home page previously showed the 10-step "خطوات إقفال دورة التبرع"
workflow section. The user asked to replace it with an "إحسانكم لعام 2026"
impact statistics section matching the attached reference.
Changes:
- artifacts/ehsan-poc/src/pages/home.tsx: removed the 10-step workflow
section and added an "Impact Statistics" section in its place — a centered
heading with a green Leaf accent, a subtitle, and three rounded white
shadowed stat cards (lucide icons HandHeart / Users / Wallet), each with a
large green value and a label. Responsive 3-up grid stacking on mobile.
- artifacts/ehsan-poc/src/lib/i18n/translations.ts: added a `home.stats`
group (title, subtitle, and the 3 value/label pairs) in both en and ar.
AR values: 85,4 مليون / 391,5 ألف / 3.113 مليار. EN mirrors with Million /
Thousand / Billion.
Notes:
- Static reference numbers used as display values (POC; no live data — per
task out-of-scope).
- No emojis; lucide icons consistent with the rest of the app. The old
t.home.workflowTitle and t.workflow.* keys are left in place (harmless
shared strings) but are no longer used by the home page.
Verified: tsc --noEmit clean; e2e confirmed AR + EN rendering, old workflow
section removed, no console errors.
The home page previously showed a search input + «بحث» button above the
featured opportunities. The user asked to remove it so the home page goes
straight to the featured opportunities.
Changes (artifacts/ehsan-poc/src/pages/home.tsx):
- Deleted the search UI block (label, Search-icon input, search button).
- Removed the now-unused `query`/`setQuery` state and the client-side
filtering; the featured grid now maps over published requests directly
via a `featured` list.
- Simplified the empty state to always use t.opportunities.noOpportunities
(dropped the search-specific noResults branch).
- Removed now-unused imports: `Input` and the `Search` lucide icon.
`Button` is kept (still used by the hero CTA).
Out of scope (unchanged): opportunities page search/filter, header nav.
Unused translation keys (home.searchLabel/searchButton/noResults,
common.searchPlaceholder) were left in translations.ts as they are shared
strings and harmless; no behavioral impact.
Verified: tsc --noEmit clean.
The browser tab previously showed a generic placeholder favicon and the
English title "EHSAN Closed Donation Loop". Per the reference, the tab now
shows the EHSAN logo mark and an Arabic platform title.
Changes:
- Favicon: copied the existing EHSAN logo (src/assets/ehsan-logo.png) to
public/favicon.png and pointed index.html at %BASE_URL%favicon.png
(base-path safe; verified it serves 200 image/png).
- Static head: index.html <title> and OG/Twitter titles + description now
use the Arabic platform name "منصة إحسان".
- Per-page titles: added a DocumentTitle component
(src/hooks/useDocumentTitle.ts) rendered in the Router that sets
document.title to "<page name> - <platform>" based on the current wouter
path and active language, reading from a new translations.meta section
(AR + EN). Home reads "الصفحة الرئيسية - منصة إحسان"; switches with language.
Approach note: titles are centralized in the router rather than edited into
each page file, keeping it DRY while covering all main routes.
Verified: tsc clean; e2e confirmed titles on /, /opportunities, /cart and
English fallback ("Home - EHSAN Platform"), plus favicon load.
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.
Two refinements to match ehsan.sa on artifacts/ehsan-poc:
1. Black ayah: the ayah artwork below the hero
(«وأحسنوا إنّ الله يحبّ المحسنين») now renders solid black
instead of green via Tailwind `brightness-0` on the <img>.
Ornaments and centered layout unchanged.
2. Scroll-reveal motion: added a reusable Reveal component
(src/components/Reveal.tsx) built on the existing framer-motion
dependency. It fades + translates children up (y:28 -> 0) when
they scroll into view, animates once (viewport once:true,
amount 0.2), supports an optional stagger `delay`, and falls
back to a plain div when prefers-reduced-motion is set.
Applied on:
- home.tsx: stats row (2 cards, staggered), featured
opportunity cards grid (staggered by column), workflow-steps
grid (staggered by column).
- opportunities.tsx: opportunity cards grid (staggered).
Added `h-full` to the OpportunityCard root and to the Reveal
wrappers / wrapped Cards so the motion wrapper becoming the grid
item does not break equal-height cards.
Out of scope (unchanged): two-card stats layout, nav, services
mega-menu, hero slider/carousel, copy. No scroll animation on
header/nav or hero.
Verified: tsc --noEmit passes; restarted ehsan-poc web workflow
to clear HMR; screenshot confirms the ayah is black.
Task #13: Bring the EHSAN home page closer to the real ehsan.sa.
Changes (artifacts/ehsan-poc/src/pages/home.tsx):
- Ayah banner: added a full-width white section directly below the hero
slider showing the provided ayah artwork «وأحسنوا إن الله يحب المحسنين»
(imported via the @assets Vite alias as an <img>), centered and flanked by
two decorative ornaments. Ornaments are a small inline SVG flourish
(Ornament component) in a light primary-green tint, mirrored on each side,
hidden on the smallest screens. Responsive heights, RTL-correct.
- Removed the "إجمالي الطلبات" (Total Requests) stat card; the stats row now
shows two cards (الحالات المغلقة, إجمالي التبرعات) and the grid was changed
from md:grid-cols-3 to md:grid-cols-2 (loading skeleton updated to match).
- Removed the "الفرص المميزة" (featuredTitle) heading text; the heading row
now just right-aligns the existing "عرض جميع الفرص" button. Search box and
opportunity cards are unchanged and still visible.
Scope decision: user confirmed (interactive query) to remove ONLY the
"الفرص المميزة" heading word and keep the search + cards.
Out of scope (unchanged): nav, services mega-menu, hero slider, workflow
steps, other pages. featuredTitle translation key left in place (unused now).
Verified: tsc --noEmit clean; screenshots confirm the ayah band under the
hero, two stat cards, and no featured heading; console clean after workflow
restart. No emojis.
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.
Task #6: On artifacts/ehsan-poc home page, replaced the green text hero
with an auto-rotating, looping carousel of the four official ehsan.sa
banner images (Zakat, recurring/dawri, Waqf, gift) imported via @assets.
- Auto-advances every 5s, loops, and respects prefers-reduced-motion.
- Clickable dot indicators plus an accessible pause/play toggle (WCAG
2.2.2) on a translucent backdrop pill.
- Bottom gradient scrim keeps the white CTA + controls readable on all
four banner backgrounds.
- Removed the overlay heading, subtitle, and the "طلب دعم" button per the
user; kept the "تصفّح الفرص" CTA linking to /opportunities.
- Added common.pause / common.play i18n keys (AR + EN) for the toggle.
Banners use alt="" (decorative) since the functional CTA is separately
labeled. Verified with tsc --noEmit and home-page screenshots (RTL).
Follow-up tweaks so the EHSAN POC matches the official ehsan.sa site.
- Font: switched from Tajawal to IBM Plex Sans Arabic (index.html +
index.css). ehsan.sa's exact webfont couldn't be auto-detected (site
blocks scraping; no Wayback snapshot), so picked the closest official
match.
- Home hero: replaced the gray search-box hero with a full-bleed green
branded banner (badge, title, subtitle, two CTAs, decorative leaf SVGs),
matching ehsan.sa. Moved the search bar above the featured opportunities
grid (with an sr-only label for accessibility).
- Currency: replaced the legacy "﷼" glyph everywhere with the new official
Saudi Riyal symbol via a reusable <Riyal /> component that masks a
processed PNG (src/assets/riyal.png) colored with currentColor; marked
aria-hidden since the adjacent number conveys the value. Applied across
home stats, OpportunityCard, donate, track, admin, request.
- Added AR+EN translation keys heroBadge/heroBrowse.
Verified: tsc clean, no console errors, screenshots confirm hero, font, and
riyal symbol render correctly. Code review fixes applied (search label,
decorative riyal aria, removed unused key).
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.
- API routes: explicit return types on all Express handlers (fixes TS7030),
`beneficiaryName` now accepted and stored in /thank-you route per OpenAPI spec.
- Home page: added search bar (filters by case ID, description, name) +
Featured Opportunities section with live cards, progress bars, and Donate buttons.
- Opportunities page: added need-type filter pill bar (all 8 types + "All Types")
with active state highlighting; empty state respects selected filter.
- i18n: expanded translations with all previously hardcoded strings
(trackCase, notFound, noData, currentStep, search, searchPlaceholder,
featuredTitle, noResults, donate.caseSummary, donate.caseNotFound,
admin.noRequests, admin.needType, admin.amount, admin.track, admin.whatsapp,
track.caseInfo, track.rejected, track.currentStepLabel, track.submitThankYou,
thankYou.successNote, thankYou.beneficiaryMessageLabel,
whatsapp.donorPhone, whatsapp.beneficiaryMessage, whatsapp.noEntries,
opportunities.noOpportunities, opportunities.verified).
All pages now use t.* — zero hardcoded English UI strings.
- TypeScript: both frontend (tsc --noEmit) and API server build are clean.
Replit Agent