Ehsan/attached_assets/Pasted-Build-an-authorized-internal-POC-website-for-EHSAN-Clos_1780678219457.txt

Build an authorized internal POC website for EHSAN Closed Donation Loop.

Use https://ehsan.sa/ as the main visual design reference.

Important design requirement:
Recreate the UI style as closely as possible for an authorized internal POC:

* Arabic RTL layout
* EHSAN-style visual identity
* Green and white color palette
* Similar header and navigation structure
* Similar card layout
* Similar donation opportunity cards
* Similar progress bars
* Similar buttons
* Similar spacing
* Similar rounded corners
* Similar professional government-style interface
* Similar typography feel
* Clean, polished, responsive design

The POC must look visually very close to the official EHSAN website design, but the functionality should remain limited to the Closed Donation Loop POC only.

Do not change the business workflow.

Project goal:
Create a small EHSAN-style Arabic RTL website that demonstrates how the donation cycle can be closed from the beneficiary request until the donor receives a thank-you message through WhatsApp using OpenClaw.

Core concept:
The donation journey should not stop at payment.
It should continue until:

1. Support is delivered to the beneficiary.
2. The beneficiary confirms receipt.
3. The beneficiary submits a thank-you message.
4. OpenClaw sends the thank-you message to the donor through WhatsApp.
5. The case is closed.

Request sources:
The request can be created from only one of these three sources:

1. Beneficiary directly through EHSAN.
2. Charity, for example:

   * Food basket
   * Refrigerator
   * Air conditioner
3. Official or service entity, for example:

   * Ministry of Justice
   * Electricity Company
   * Water Company

Important business rule:
The charity must NOT be the main middle layer between EHSAN and the beneficiary.
EHSAN should be able to deal directly with the beneficiary.
The charity role should only be:

* Verification
* Recommendation
* Execution support when needed

POC verification:
Since Nafath and Tawakkalna integrations are not available in this POC, create a simple internal eligibility database to simulate eligibility verification.

Verification logic:

* If beneficiary National ID exists in the internal eligibility database and status is eligible, mark the request as Verified.
* If the National ID is not found, mark the request as Pending Review.
* If the beneficiary is marked as ineligible, mark the request as Rejected.

Main workflow:
Request Submitted
→ Eligibility Check
→ Verified
→ Published
→ Donor Donated
→ Support Delivered
→ Beneficiary Confirms Receipt
→ Beneficiary Writes Thank-You Message
→ OpenClaw Sends WhatsApp Message to Donor
→ Case Closed

Website pages:

1. Home Page

* EHSAN-style hero section
* Search area for donation opportunities
* Featured donation opportunity cards
* Simple statistics section
* Short explanation of the Closed Donation Loop concept

2. Beneficiary Request Page
   Create a form with:

* Full name
* National ID
* Phone number
* Request source:

  * Beneficiary
  * Charity
  * Official / Service Entity
* Source name
* Need type
* Requested amount
* Case description

Need type options:

* Electricity
* Water
* Food
* Health
* Housing
* Refrigerator
* Air Conditioner
* Court Order

3. Donation Opportunities Page
   Show published opportunities as cards.
   Each card should include:

* Case title
* Need type
* Requested amount
* Collected amount
* Remaining amount
* Progress bar
* Verified badge
* Donate button
* Case status

4. Donor Donation Simulation Page
   No real payment gateway.
   When the donor clicks Donate:

* Ask for donor name
* Donor phone number
* Donor email optional
* Donation amount
* Confirm donation button

After confirmation:

* Mark the case as Donated
* Show a success message

5. Admin Dashboard
   Show all requests and cases in a professional dashboard.

Dashboard columns:

* Case ID
* Beneficiary name
* Source
* Need type
* Requested amount
* Status
* Current step
* Last update

Dashboard actions:

* Verify
* Publish
* Mark as Donated
* Mark Support as Delivered
* Confirm Receipt
* View Thank-You Message
* Send WhatsApp via OpenClaw
* Close Case
* Reject

6. Closed Donation Loop Tracking Page
   Create a visual timeline for each case:

7. Request Submitted

8. Eligibility Check

9. Verified

10. Published

11. Donor Donated

12. Support Delivered

13. Receipt Confirmed

14. Thank-You Submitted

15. WhatsApp Sent via OpenClaw

16. Closed

The timeline should clearly show completed steps and pending steps.

7. Beneficiary Thank-You Message Page
   After support is delivered, the beneficiary can write a thank-you message.

Form fields:

* Case ID
* Beneficiary name
* Thank-you message

Example message:
جزاكم الله خيراً، وصلني الدعم وكان له أثر كبير عليّ.

After submission:

* Mark status as Thank You Submitted
* Make it ready for OpenClaw WhatsApp sending

8. WhatsApp Message Log Page
   This page simulates WhatsApp sending through OpenClaw.

Show:

* Case ID
* Donor name
* Donor phone number
* Beneficiary thank-you message
* WhatsApp message preview
* Sent status
* Sent time

Example WhatsApp message:
السلام عليكم، نشكركم على تبرعكم عبر منصة إحسان.
تم إيصال الدعم للمستفيد، وهذه رسالة الشكر من المستفيد:
"جزاكم الله خيراً، وصلني الدعم وكان له أثر كبير عليّ."
رقم الحالة: CASE-001

Status list:

* Pending WhatsApp Send
* WhatsApp Sent
* Failed

Admin statuses:
Use these exact statuses:

* New
* Pending Review
* Verified
* Published
* Donated
* Delivered
* Receipt Confirmed
* Thank You Submitted
* WhatsApp Sent
* Closed
* Rejected

OpenClaw integration:
Create API endpoints that OpenClaw can call later.

Required API endpoints:
GET /api/requests
GET /api/requests/new
GET /api/requests/:id
POST /api/requests/:id/verify
POST /api/requests/:id/publish
POST /api/requests/:id/donate
POST /api/requests/:id/deliver
POST /api/requests/:id/confirm-receipt
POST /api/requests/:id/thank-you
POST /api/requests/:id/send-whatsapp
POST /api/requests/:id/close
POST /api/requests/:id/reject

WhatsApp POC behavior:
Do not integrate real WhatsApp API yet.
Create a simulated WhatsApp message screen and log.
The system should prepare the WhatsApp message so OpenClaw can later send it through its WhatsApp channel.

Data:
Use mock data only.
Use local mock database, SQLite, or JSON data.
No real payment integration.
No real Nafath integration.
No real Tawakkalna integration.
No real government integrations.

Seed mock data:
Create at least 8 sample cases:

1. Electricity bill support
2. Water bill support
3. Food basket
4. Medical support
5. Housing support
6. Refrigerator
7. Air conditioner
8. Court order support

Create at least 5 mock eligible beneficiaries in the internal eligibility database.

Create at least 3 mock donors.

Add a clear workflow diagram inside the website explaining the full journey in Arabic:

عنوان الرسم:
إقفال دورة التبرع

Steps:

1. مقدم الطلب
2. منصة إحسان
3. التحقق من الاستحقاق
4. نشر الفرصة
5. المتبرع
6. تنفيذ الدعم
7. تأكيد الاستلام
8. رسالة شكر من المستفيد
9. إرسال واتساب عبر OpenClaw
10. إغلاق الحالة

Subtitle:
إقفال دورة التبرع من رفع الطلب حتى وصول رسالة الشكر للمتبرع عبر واتساب.

Technical stack:

* Next.js
* Tailwind CSS
* Arabic RTL
* Responsive design
* Local mock database, SQLite, or JSON mock data
* Clean component structure

Quality requirements:

* The UI must be polished and presentation-ready.
* The website should feel like a real government-style charity platform.
* Arabic text must be properly aligned RTL.
* Buttons and cards must look professional.
* The demo flow must be easy to present in a meeting.
* Keep the scope focused only on the Closed Donation Loop POC.