Transitioned from Plan to Build mode
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: e5ed57af-b8c5-4aa1-8438-7cf91e542e87 Replit-Helium-Checkpoint-Created: true
This commit is contained in:
Replit Agent
@@ -18,3 +18,11 @@ expertMode = true
|
||||
[postMerge]
|
||||
path = "scripts/post-merge.sh"
|
||||
timeoutMs = 20000
|
||||
|
||||
[[ports]]
|
||||
localPort = 8080
|
||||
externalPort = 80
|
||||
|
||||
[[ports]]
|
||||
localPort = 8081
|
||||
externalPort = 8081
|
||||
|
||||
+341
@@ -0,0 +1,341 @@
|
||||
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.
|
||||
Reference in New Issue
Block a user