EHSAN official look & auth (Task #5)
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.
This commit is contained in:
Replit Agent
@@ -0,0 +1,50 @@
|
||||
uploads = []
|
||||
outputs = []
|
||||
|
||||
[[generated]]
|
||||
id = "MLdr1Ro6TvOGO7RUOZddi"
|
||||
uri = "file://artifacts/ehsan-poc/src/assets/needs/electricity.png"
|
||||
type = "image"
|
||||
title = "generated_image"
|
||||
|
||||
[[generated]]
|
||||
id = "DYjKHrkzwNpeVfM6lmb0c"
|
||||
uri = "file://artifacts/ehsan-poc/src/assets/needs/water.png"
|
||||
type = "image"
|
||||
title = "generated_image"
|
||||
|
||||
[[generated]]
|
||||
id = "FXWm9kaXi15L-PFjp1Tki"
|
||||
uri = "file://artifacts/ehsan-poc/src/assets/needs/food.png"
|
||||
type = "image"
|
||||
title = "generated_image"
|
||||
|
||||
[[generated]]
|
||||
id = "0ZLSJ9ilsjtUSFwE-tGNG"
|
||||
uri = "file://artifacts/ehsan-poc/src/assets/needs/health.png"
|
||||
type = "image"
|
||||
title = "generated_image"
|
||||
|
||||
[[generated]]
|
||||
id = "OEg5N8U6mvvVlqXjMitVQ"
|
||||
uri = "file://artifacts/ehsan-poc/src/assets/needs/housing.png"
|
||||
type = "image"
|
||||
title = "generated_image"
|
||||
|
||||
[[generated]]
|
||||
id = "AFFJIZDzUMiOPdNX2gKVh"
|
||||
uri = "file://artifacts/ehsan-poc/src/assets/needs/refrigerator.png"
|
||||
type = "image"
|
||||
title = "generated_image"
|
||||
|
||||
[[generated]]
|
||||
id = "YIAjvv_f3yMsVMBCLeugg"
|
||||
uri = "file://artifacts/ehsan-poc/src/assets/needs/air_conditioner.png"
|
||||
type = "image"
|
||||
title = "generated_image"
|
||||
|
||||
[[generated]]
|
||||
id = "zoqK8K6FBJwO9DN8NzUkc"
|
||||
uri = "file://artifacts/ehsan-poc/src/assets/needs/court_order.png"
|
||||
type = "image"
|
||||
title = "generated_image"
|
||||
@@ -0,0 +1,2 @@
|
||||
- [Donate semantics](donate-semantics.md) — donations accumulate + clamp to target; a case enters the closed-loop pipeline only when fully funded.
|
||||
- [api-server data](api-server-data.md) — mockDb is in-memory and mutated by POST calls; restart the workflow to reset to clean seed for demos.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
name: api-server data
|
||||
description: Nature of the EHSAN POC api-server data store and how to reset it.
|
||||
---
|
||||
|
||||
# In-memory mockDb
|
||||
|
||||
`artifacts/api-server` serves an in-memory `mockDb` (no real database). Any POST that
|
||||
mutates a request (donate, verify, publish, deliver, thank-you, etc.) persists only for
|
||||
the life of the process. Restart the `artifacts/api-server: API Server` workflow to
|
||||
re-seed clean demo data.
|
||||
|
||||
**How to apply:** after running curl-based API tests that mutate state, restart the
|
||||
api-server workflow before screenshots/handoff so the user sees a clean seeded demo.
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
name: Donate semantics
|
||||
description: How donations affect a request's collectedAmount and status in the EHSAN POC.
|
||||
---
|
||||
|
||||
# Donate accounting & pipeline transition
|
||||
|
||||
On `POST /requests/:id/donate`, the server **adds** the donation to `collectedAmount`
|
||||
(never overwrites it), clamps the applied amount to the remaining target, rejects
|
||||
non-finite/non-positive amounts and cases that are not `published` / already funded.
|
||||
A case only transitions out of `published` into the closed-loop pipeline (`donated`
|
||||
→ delivered → … → whatsapp_sent → closed) once `collectedAmount >= requestedAmount`.
|
||||
|
||||
**Why:** opportunity cards show a crowdfunding-style progress bar with collected/remaining.
|
||||
An earlier handler overwrote `collectedAmount` and force-advanced to `donated` on any
|
||||
donation — fine when all published seeds started at 0, but it silently corrupted totals
|
||||
and made partially funded cases vanish from `/requests/published` after one donation.
|
||||
|
||||
**How to apply:** keep at least one seed case nearly fully funded so the closed loop is
|
||||
trivially demoable with a single preset donation. Frontend (`donate.tsx`) must also
|
||||
validate finite/positive amounts and clamp to remaining before submitting.
|
||||
@@ -374,6 +374,144 @@ export const requests: DonationRequest[] = [
|
||||
createdAt: d(1),
|
||||
updatedAt: d(0),
|
||||
},
|
||||
{
|
||||
id: "req-012",
|
||||
caseId: "CASE-012",
|
||||
beneficiaryName: "هند فيصل العنزي",
|
||||
nationalId: "1067890123",
|
||||
phone: "0513333333",
|
||||
source: "charity",
|
||||
sourceName: "جمعية كافل الخيرية",
|
||||
needType: "food",
|
||||
requestedAmount: 1200,
|
||||
collectedAmount: 780,
|
||||
description: "سلة غذائية شهرية لأسرة مكونة من خمسة أفراد",
|
||||
status: "published",
|
||||
currentStep: 4,
|
||||
donorId: null,
|
||||
donorName: null,
|
||||
thankYouMessage: null,
|
||||
whatsappStatus: null,
|
||||
whatsappSentAt: null,
|
||||
rejectionReason: null,
|
||||
createdAt: d(9),
|
||||
updatedAt: d(2),
|
||||
},
|
||||
{
|
||||
id: "req-013",
|
||||
caseId: "CASE-013",
|
||||
beneficiaryName: "صالح عوض الحارثي",
|
||||
nationalId: "2078901234",
|
||||
phone: "0514444444",
|
||||
source: "official",
|
||||
sourceName: "شركة الكهرباء السعودية",
|
||||
needType: "electricity",
|
||||
requestedAmount: 2600,
|
||||
collectedAmount: 1850,
|
||||
description: "سداد فاتورة كهرباء متراكمة لمنزل أسرة متعففة",
|
||||
status: "published",
|
||||
currentStep: 4,
|
||||
donorId: null,
|
||||
donorName: null,
|
||||
thankYouMessage: null,
|
||||
whatsappStatus: null,
|
||||
whatsappSentAt: null,
|
||||
rejectionReason: null,
|
||||
createdAt: d(7),
|
||||
updatedAt: d(1),
|
||||
},
|
||||
{
|
||||
id: "req-014",
|
||||
caseId: "CASE-014",
|
||||
beneficiaryName: "لطيفة عبدالله الشهري",
|
||||
nationalId: "1089012345",
|
||||
phone: "0515555555",
|
||||
source: "charity",
|
||||
sourceName: "الهلال الأحمر السعودي",
|
||||
needType: "health",
|
||||
requestedAmount: 6000,
|
||||
collectedAmount: 1500,
|
||||
description: "مستلزمات طبية وأجهزة منزلية لمريضة مزمنة",
|
||||
status: "published",
|
||||
currentStep: 4,
|
||||
donorId: null,
|
||||
donorName: null,
|
||||
thankYouMessage: null,
|
||||
whatsappStatus: null,
|
||||
whatsappSentAt: null,
|
||||
rejectionReason: null,
|
||||
createdAt: d(6),
|
||||
updatedAt: d(1),
|
||||
},
|
||||
{
|
||||
id: "req-015",
|
||||
caseId: "CASE-015",
|
||||
beneficiaryName: "ماجد سعيد القرني",
|
||||
nationalId: "2090123456",
|
||||
phone: "0516666666",
|
||||
source: "beneficiary",
|
||||
sourceName: "مستفيد مباشر",
|
||||
needType: "water",
|
||||
requestedAmount: 1400,
|
||||
collectedAmount: 1120,
|
||||
description: "سداد فاتورة مياه متأخرة لأسرة تعيلها أرملة",
|
||||
status: "published",
|
||||
currentStep: 4,
|
||||
donorId: null,
|
||||
donorName: null,
|
||||
thankYouMessage: null,
|
||||
whatsappStatus: null,
|
||||
whatsappSentAt: null,
|
||||
rejectionReason: null,
|
||||
createdAt: d(5),
|
||||
updatedAt: d(1),
|
||||
},
|
||||
{
|
||||
id: "req-016",
|
||||
caseId: "CASE-016",
|
||||
beneficiaryName: "ريم ناصر المطيري",
|
||||
nationalId: "1078901234",
|
||||
phone: "0517777777",
|
||||
source: "charity",
|
||||
sourceName: "جمعية الإسكان التنموي",
|
||||
needType: "housing",
|
||||
requestedAmount: 9000,
|
||||
collectedAmount: 3200,
|
||||
description: "ترميم وحدة سكنية متضررة لأسرة ذات دخل محدود",
|
||||
status: "published",
|
||||
currentStep: 4,
|
||||
donorId: null,
|
||||
donorName: null,
|
||||
thankYouMessage: null,
|
||||
whatsappStatus: null,
|
||||
whatsappSentAt: null,
|
||||
rejectionReason: null,
|
||||
createdAt: d(4),
|
||||
updatedAt: d(1),
|
||||
},
|
||||
{
|
||||
id: "req-017",
|
||||
caseId: "CASE-017",
|
||||
beneficiaryName: "عبدالعزيز فهد الرشيد",
|
||||
nationalId: "2012345678",
|
||||
phone: "0518888888",
|
||||
source: "official",
|
||||
sourceName: "جمعية تكافل",
|
||||
needType: "air_conditioner",
|
||||
requestedAmount: 2200,
|
||||
collectedAmount: 2100,
|
||||
description: "تأمين مكيف لمنزل يقطنه مسنون في منطقة شديدة الحرارة",
|
||||
status: "published",
|
||||
currentStep: 4,
|
||||
donorId: null,
|
||||
donorName: null,
|
||||
thankYouMessage: null,
|
||||
whatsappStatus: null,
|
||||
whatsappSentAt: null,
|
||||
rejectionReason: null,
|
||||
createdAt: d(3),
|
||||
updatedAt: d(1),
|
||||
},
|
||||
];
|
||||
|
||||
// ─── WhatsApp Log ────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -165,15 +165,30 @@ router.post("/requests/:id/donate", (req: Request, res: Response): void => {
|
||||
}
|
||||
|
||||
const { donorName, donorPhone, donorEmail, amount } = req.body;
|
||||
if (!donorName || !donorPhone || !amount) {
|
||||
res.status(400).json({ error: "Missing donor details" });
|
||||
const amt = Number(amount);
|
||||
if (!donorName || !donorPhone || !Number.isFinite(amt) || amt <= 0) {
|
||||
res.status(400).json({ error: "Invalid donor details or amount" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.status !== "published") {
|
||||
res.status(400).json({ error: "Case is not open for donations" });
|
||||
return;
|
||||
}
|
||||
|
||||
const remaining = Math.max(0, item.requestedAmount - item.collectedAmount);
|
||||
if (remaining <= 0) {
|
||||
res.status(400).json({ error: "Case already fully funded" });
|
||||
return;
|
||||
}
|
||||
|
||||
// Clamp the donation so the collected amount never exceeds the target.
|
||||
const applied = Math.min(amt, remaining);
|
||||
|
||||
const donorId = uuidv4();
|
||||
const existingDonor = donors.find((d) => d.phone === donorPhone);
|
||||
if (existingDonor) {
|
||||
existingDonor.totalDonated += Number(amount);
|
||||
existingDonor.totalDonated += applied;
|
||||
existingDonor.donationCount += 1;
|
||||
item.donorId = existingDonor.id;
|
||||
} else {
|
||||
@@ -182,7 +197,7 @@ router.post("/requests/:id/donate", (req: Request, res: Response): void => {
|
||||
name: donorName,
|
||||
phone: donorPhone,
|
||||
email: donorEmail || null,
|
||||
totalDonated: Number(amount),
|
||||
totalDonated: applied,
|
||||
donationCount: 1,
|
||||
};
|
||||
donors.push(newDonor);
|
||||
@@ -190,9 +205,13 @@ router.post("/requests/:id/donate", (req: Request, res: Response): void => {
|
||||
}
|
||||
|
||||
item.donorName = donorName;
|
||||
item.collectedAmount = Number(amount);
|
||||
item.status = "donated";
|
||||
item.currentStep = STATUS_STEP["donated"];
|
||||
item.collectedAmount += applied;
|
||||
|
||||
// Only advance into the closed-loop pipeline once the case is fully funded.
|
||||
if (item.collectedAmount >= item.requestedAmount) {
|
||||
item.status = "donated";
|
||||
item.currentStep = STATUS_STEP["donated"];
|
||||
}
|
||||
item.updatedAt = new Date().toISOString();
|
||||
res.json(item);
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 42 KiB |
@@ -1,10 +1,12 @@
|
||||
import { Switch, Route, Router as WouterRouter } from "wouter";
|
||||
import { Switch, Route, Router as WouterRouter, Redirect } from "wouter";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import { LanguageProvider } from "./contexts/LanguageContext";
|
||||
import { AuthProvider, useAuth } from "./contexts/AuthContext";
|
||||
import { AppLayout } from "./components/layout/AppLayout";
|
||||
import NotFound from "@/pages/not-found";
|
||||
import { ComponentType } from "react";
|
||||
|
||||
// Page imports
|
||||
import Home from "./pages/home";
|
||||
@@ -15,9 +17,18 @@ import Admin from "./pages/admin";
|
||||
import Track from "./pages/track";
|
||||
import ThankYou from "./pages/thank-you";
|
||||
import WhatsappLog from "./pages/whatsapp-log";
|
||||
import Login from "./pages/login";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
function Protected({ component: Component }: { component: ComponentType<any> }) {
|
||||
const { isAuthenticated } = useAuth();
|
||||
if (!isAuthenticated) {
|
||||
return <Redirect to="/login" />;
|
||||
}
|
||||
return <Component />;
|
||||
}
|
||||
|
||||
function Router() {
|
||||
return (
|
||||
<AppLayout>
|
||||
@@ -26,10 +37,15 @@ function Router() {
|
||||
<Route path="/request" component={RequestSupport} />
|
||||
<Route path="/opportunities" component={Opportunities} />
|
||||
<Route path="/donate/:id" component={Donate} />
|
||||
<Route path="/admin" component={Admin} />
|
||||
<Route path="/login" component={Login} />
|
||||
<Route path="/admin">
|
||||
<Protected component={Admin} />
|
||||
</Route>
|
||||
<Route path="/track/:id" component={Track} />
|
||||
<Route path="/thank-you/:id" component={ThankYou} />
|
||||
<Route path="/whatsapp-log" component={WhatsappLog} />
|
||||
<Route path="/whatsapp-log">
|
||||
<Protected component={WhatsappLog} />
|
||||
</Route>
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</AppLayout>
|
||||
@@ -40,12 +56,14 @@ function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<LanguageProvider>
|
||||
<TooltipProvider>
|
||||
<WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
|
||||
<Router />
|
||||
</WouterRouter>
|
||||
<Toaster />
|
||||
</TooltipProvider>
|
||||
<AuthProvider>
|
||||
<TooltipProvider>
|
||||
<WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
|
||||
<Router />
|
||||
</WouterRouter>
|
||||
<Toaster />
|
||||
</TooltipProvider>
|
||||
</AuthProvider>
|
||||
</LanguageProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 672 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 998 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,133 @@
|
||||
import { useState } from "react";
|
||||
import { useLocation } from "wouter";
|
||||
import { useLanguage } from "../contexts/LanguageContext";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Share2, ShoppingCart } from "lucide-react";
|
||||
import { getNeedImage } from "../lib/needImages";
|
||||
|
||||
interface OpportunityCardProps {
|
||||
request: {
|
||||
id: string;
|
||||
caseId: string;
|
||||
description: string;
|
||||
needType: string;
|
||||
requestedAmount: number;
|
||||
collectedAmount: number;
|
||||
};
|
||||
}
|
||||
|
||||
const RIYAL = "﷼";
|
||||
|
||||
export function OpportunityCard({ request }: OpportunityCardProps) {
|
||||
const { t } = useLanguage();
|
||||
const [, setLocation] = useLocation();
|
||||
const [amount, setAmount] = useState("");
|
||||
|
||||
const progress = Math.min(
|
||||
100,
|
||||
request.requestedAmount > 0
|
||||
? Math.round((request.collectedAmount / request.requestedAmount) * 100)
|
||||
: 0
|
||||
);
|
||||
const remaining = Math.max(0, request.requestedAmount - request.collectedAmount);
|
||||
const isComplete = remaining <= 0;
|
||||
|
||||
const goDonate = () => {
|
||||
const amt = Number(amount);
|
||||
const suffix = amt > 0 ? `?amount=${amt}` : "";
|
||||
setLocation(`/donate/${request.id}${suffix}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-card rounded-2xl border border-card-border shadow-sm overflow-hidden flex flex-col hover-elevate">
|
||||
{/* Photo + progress bar */}
|
||||
<div className="relative">
|
||||
<img
|
||||
src={getNeedImage(request.needType)}
|
||||
alt={request.description}
|
||||
className="w-full h-44 object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 inset-x-0 h-6 bg-gray-200 flex">
|
||||
<div
|
||||
className="h-full bg-primary flex items-center justify-end px-3 text-primary-foreground text-xs font-bold min-w-[3rem]"
|
||||
style={{ width: `${progress}%` }}
|
||||
>
|
||||
{progress}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 flex flex-col flex-1">
|
||||
{/* Category badge */}
|
||||
<div className="flex justify-start mb-3">
|
||||
<span className="inline-block text-xs font-medium text-muted-foreground border border-border rounded-md px-3 py-1">
|
||||
{t.needTypes[request.needType as keyof typeof t.needTypes] || t.opportunities.generalProjects}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title + share */}
|
||||
<div className="flex items-start justify-between gap-3 mb-4">
|
||||
<h3 className="text-base font-bold text-primary leading-snug line-clamp-2 flex-1">
|
||||
{request.description}
|
||||
</h3>
|
||||
<Share2 className="w-4 h-4 text-muted-foreground shrink-0 mt-1" />
|
||||
</div>
|
||||
|
||||
{/* Collected / Remaining */}
|
||||
<div className="grid grid-cols-2 gap-2 bg-muted/40 rounded-xl p-4 mb-4 mt-auto">
|
||||
<div className="text-center border-s border-border">
|
||||
<p className="text-sm text-primary mb-1">{t.opportunities.remainingShort}</p>
|
||||
<p className="font-bold text-foreground">
|
||||
{RIYAL} {remaining.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-primary mb-1">{t.opportunities.collectedShort}</p>
|
||||
<p className="font-bold text-foreground">
|
||||
{RIYAL} {request.collectedAmount.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Donate row */}
|
||||
<div className="flex items-stretch gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="shrink-0"
|
||||
onClick={goDonate}
|
||||
disabled={isComplete}
|
||||
aria-label={t.common.cart}
|
||||
data-testid={`button-cart-${request.id}`}
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
className="shrink-0 px-5"
|
||||
onClick={goDonate}
|
||||
disabled={isComplete}
|
||||
data-testid={`button-donate-${request.id}`}
|
||||
>
|
||||
{t.opportunities.donate}
|
||||
</Button>
|
||||
<div className="relative flex-1">
|
||||
<span className="absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm pointer-events-none">
|
||||
{RIYAL}
|
||||
</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
placeholder={t.opportunities.amountPlaceholder}
|
||||
className="ps-8 h-full"
|
||||
disabled={isComplete}
|
||||
data-testid={`input-cardAmount-${request.id}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ReactNode } from "react";
|
||||
import { Header } from "./Header";
|
||||
import ehsanLogo from "../../assets/ehsan-logo.png";
|
||||
|
||||
export function AppLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
@@ -9,8 +10,11 @@ export function AppLayout({ children }: { children: ReactNode }) {
|
||||
{children}
|
||||
</main>
|
||||
<footer className="border-t bg-white mt-auto py-8">
|
||||
<div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
|
||||
EHSAN POC © {new Date().getFullYear()}
|
||||
<div className="container mx-auto px-4 flex flex-col items-center gap-3 text-center">
|
||||
<img src={ehsanLogo} alt="EHSAN" className="h-9 w-auto object-contain" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
EHSAN POC © {new Date().getFullYear()}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -1,57 +1,216 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useLocation } from "wouter";
|
||||
import { useLanguage } from "../../contexts/LanguageContext";
|
||||
import { useAuth } from "../../contexts/AuthContext";
|
||||
import { Button } from "../ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
import {
|
||||
Search,
|
||||
ShoppingCart,
|
||||
User,
|
||||
ChevronDown,
|
||||
Menu,
|
||||
X,
|
||||
LogOut,
|
||||
Globe,
|
||||
} from "lucide-react";
|
||||
import ehsanLogo from "../../assets/ehsan-logo.png";
|
||||
|
||||
export function Header() {
|
||||
const { language, setLanguage, t } = useLanguage();
|
||||
const [location] = useLocation();
|
||||
const { isAuthenticated, logout } = useAuth();
|
||||
const [location, setLocation] = useLocation();
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
const toggleLanguage = () => {
|
||||
setLanguage(language === "ar" ? "en" : "ar");
|
||||
};
|
||||
const toggleLanguage = () => setLanguage(language === "ar" ? "en" : "ar");
|
||||
|
||||
const navItems = [
|
||||
{ path: "/", label: t.common.home },
|
||||
{ path: "/opportunities", label: t.common.opportunities },
|
||||
{ path: "/request", label: t.common.requestSupport },
|
||||
{ path: "/admin", label: t.common.adminDashboard },
|
||||
{ path: "/whatsapp-log", label: t.common.whatsappLog },
|
||||
];
|
||||
const isActive = (path: string) => location === path;
|
||||
|
||||
return (
|
||||
<header className="border-b bg-white sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-8">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded bg-primary flex items-center justify-center text-primary-foreground font-bold">
|
||||
إ
|
||||
</div>
|
||||
<span className="text-xl font-bold text-primary">{t.common.ehsan}</span>
|
||||
<header className="bg-white sticky top-0 z-50 shadow-sm">
|
||||
<div className="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center shrink-0">
|
||||
<img src={ehsanLogo} alt={t.common.ehsan} className="h-11 w-auto object-contain" />
|
||||
</Link>
|
||||
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden lg:flex items-center gap-1 flex-1 justify-center">
|
||||
<Link
|
||||
href="/"
|
||||
className={`px-3 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
isActive("/") ? "text-primary" : "text-foreground hover:text-primary"
|
||||
}`}
|
||||
data-testid="nav-home"
|
||||
>
|
||||
{t.nav.home}
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-1">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
href={item.path}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
location === item.path
|
||||
? "text-primary bg-primary/10"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<span className="px-3 py-2 text-sm font-medium text-foreground/70 cursor-default select-none">
|
||||
{t.nav.waqf}
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" onClick={toggleLanguage} className="font-medium">
|
||||
{t.common.language}
|
||||
<Link
|
||||
href="/opportunities"
|
||||
className="px-4 py-2 text-sm font-bold rounded-md bg-primary text-primary-foreground inline-flex items-center gap-1 hover:opacity-90 transition-opacity"
|
||||
data-testid="nav-opportunities"
|
||||
>
|
||||
{t.nav.opportunities}
|
||||
<ChevronDown className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="px-3 py-2 text-sm font-medium text-foreground hover:text-primary inline-flex items-center gap-1 transition-colors"
|
||||
data-testid="nav-services"
|
||||
>
|
||||
{t.nav.services}
|
||||
<ChevronDown className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="center">
|
||||
<DropdownMenuItem onClick={() => setLocation("/request")} data-testid="nav-requestSupport">
|
||||
{t.nav.requestSupport}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<span className="px-3 py-2 text-sm font-medium text-foreground/70 cursor-default select-none">
|
||||
{t.nav.about}
|
||||
</span>
|
||||
|
||||
<span className="px-3 py-2 text-sm font-medium text-foreground/70 cursor-default select-none">
|
||||
{t.nav.baraem}
|
||||
</span>
|
||||
</nav>
|
||||
|
||||
{/* Utility icons */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{isAuthenticated ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="gap-1.5 hidden sm:inline-flex"
|
||||
onClick={() => { logout(); setLocation("/"); }}
|
||||
data-testid="button-logout"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
<span className="hidden md:inline">{t.common.logout}</span>
|
||||
</Button>
|
||||
) : (
|
||||
<Link
|
||||
href="/login"
|
||||
className="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-2 text-sm font-medium text-foreground hover:text-primary transition-colors"
|
||||
data-testid="button-login"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
<span className="hidden md:inline">{t.common.login}</span>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-foreground"
|
||||
aria-label={t.common.cart}
|
||||
data-testid="button-cart"
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-foreground"
|
||||
aria-label={t.common.search}
|
||||
onClick={() => setLocation("/")}
|
||||
data-testid="button-search"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleLanguage}
|
||||
className="gap-1.5 font-medium"
|
||||
data-testid="button-language"
|
||||
>
|
||||
<Globe className="w-4 h-4" />
|
||||
<span className="hidden md:inline">{t.common.language}</span>
|
||||
</Button>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden text-foreground"
|
||||
onClick={() => setMobileOpen((v) => !v)}
|
||||
aria-label="Menu"
|
||||
data-testid="button-mobileMenu"
|
||||
>
|
||||
{mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile nav panel */}
|
||||
{mobileOpen && (
|
||||
<div className="lg:hidden border-t bg-white px-4 py-3 space-y-1">
|
||||
<Link
|
||||
href="/"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
|
||||
>
|
||||
{t.nav.home}
|
||||
</Link>
|
||||
<Link
|
||||
href="/opportunities"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block px-3 py-2 rounded-md text-sm font-bold text-primary hover:bg-muted"
|
||||
>
|
||||
{t.nav.opportunities}
|
||||
</Link>
|
||||
<Link
|
||||
href="/request"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
|
||||
>
|
||||
{t.nav.requestSupport}
|
||||
</Link>
|
||||
<div className="pt-2 mt-2 border-t">
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<Link
|
||||
href="/admin"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
|
||||
>
|
||||
{t.nav.admin}
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => { logout(); setMobileOpen(false); setLocation("/"); }}
|
||||
className="block w-full text-start px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
|
||||
>
|
||||
{t.common.logout}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<Link
|
||||
href="/login"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted"
|
||||
>
|
||||
{t.common.login}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import { createContext, useContext, useState, ReactNode } from "react";
|
||||
|
||||
interface AuthContextType {
|
||||
isAuthenticated: boolean;
|
||||
login: (username: string, password: string) => boolean;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
const STORAGE_KEY = "ehsan_admin_auth";
|
||||
const DEMO_USERNAME = "admin";
|
||||
const DEMO_PASSWORD = "admin";
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
|
||||
() => localStorage.getItem(STORAGE_KEY) === "true"
|
||||
);
|
||||
|
||||
const login = (username: string, password: string) => {
|
||||
if (username.trim() === DEMO_USERNAME && password === DEMO_PASSWORD) {
|
||||
localStorage.setItem(STORAGE_KEY, "true");
|
||||
setIsAuthenticated(true);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
setIsAuthenticated(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isAuthenticated, login, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const context = useContext(AuthContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -46,6 +46,9 @@
|
||||
--color-chart-4: hsl(var(--chart-4));
|
||||
--color-chart-5: hsl(var(--chart-5));
|
||||
|
||||
--color-ehsan-orange: hsl(var(--ehsan-orange));
|
||||
--color-ehsan-orange-foreground: hsl(var(--ehsan-orange-foreground));
|
||||
|
||||
--color-sidebar: hsl(var(--sidebar));
|
||||
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
||||
--color-sidebar-border: hsl(var(--sidebar-border));
|
||||
@@ -96,9 +99,12 @@
|
||||
--popover-foreground: 143 50% 10%;
|
||||
--popover-border: 143 20% 90%;
|
||||
|
||||
--primary: 143 60% 26%;
|
||||
--primary: 146 64% 32%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
--ehsan-orange: 28 92% 52%;
|
||||
--ehsan-orange-foreground: 0 0% 100%;
|
||||
|
||||
--secondary: 143 20% 94%;
|
||||
--secondary-foreground: 143 60% 26%;
|
||||
|
||||
@@ -175,9 +181,12 @@
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--popover-border: 143 30% 15%;
|
||||
|
||||
--primary: 143 60% 40%;
|
||||
--primary: 146 55% 42%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
--ehsan-orange: 28 92% 55%;
|
||||
--ehsan-orange-foreground: 0 0% 100%;
|
||||
|
||||
--secondary: 143 30% 15%;
|
||||
--secondary-foreground: 143 60% 40%;
|
||||
|
||||
|
||||
@@ -25,6 +25,31 @@ export const en = {
|
||||
allOpportunities: "All Opportunities",
|
||||
featuredCases: "Featured Cases",
|
||||
donate: "Donate",
|
||||
login: "Login",
|
||||
logout: "Logout",
|
||||
cart: "Cart",
|
||||
},
|
||||
nav: {
|
||||
home: "Home",
|
||||
waqf: "Endowment",
|
||||
opportunities: "Donation Opportunities",
|
||||
services: "Services",
|
||||
about: "About EHSAN",
|
||||
baraem: "EHSAN Buds",
|
||||
requestSupport: "Request Support",
|
||||
admin: "Admin Panel",
|
||||
whatsappLog: "WhatsApp Log",
|
||||
quickDonate: "Quick Donate",
|
||||
},
|
||||
auth: {
|
||||
title: "Admin Login",
|
||||
subtitle: "Sign in to access the management dashboard",
|
||||
username: "Username",
|
||||
password: "Password",
|
||||
signIn: "Sign In",
|
||||
error: "Invalid username or password",
|
||||
demoHint: "Demo credentials: admin / admin",
|
||||
loggedInAs: "Signed in as administrator",
|
||||
},
|
||||
home: {
|
||||
heroTitle: "Closed Donation Loop POC",
|
||||
@@ -102,6 +127,10 @@ export const en = {
|
||||
target: "Target",
|
||||
noOpportunities: "No opportunities are available right now.",
|
||||
verified: "Verified",
|
||||
collectedShort: "Collected",
|
||||
remainingShort: "Remaining",
|
||||
amountPlaceholder: "Donation amount",
|
||||
generalProjects: "General Projects",
|
||||
},
|
||||
donate: {
|
||||
title: "Complete Donation",
|
||||
@@ -113,6 +142,18 @@ export const en = {
|
||||
confirmDonation: "Confirm Donation",
|
||||
successMessage: "Thank you for your donation. May Allah reward you.",
|
||||
caseNotFound: "Case not found or no longer available.",
|
||||
stepDetails: "Details",
|
||||
stepPayment: "Payment",
|
||||
detailsTitle: "Details",
|
||||
amountTitle: "Donation Amount",
|
||||
customAmount: "Amount value",
|
||||
onBehalf: "Donate on behalf of family or friends and share the reward",
|
||||
onBehalfName: "Name of the person you donate for",
|
||||
donateNow: "Donate Now",
|
||||
continueToPayment: "Continue to Payment",
|
||||
backToDetails: "Back to Details",
|
||||
paymentTitle: "Payment Details",
|
||||
selectAmountError: "Please select or enter a valid amount.",
|
||||
},
|
||||
admin: {
|
||||
title: "Admin Dashboard",
|
||||
@@ -192,6 +233,31 @@ export const ar = {
|
||||
allOpportunities: "جميع الفرص",
|
||||
featuredCases: "الحالات المميزة",
|
||||
donate: "تبرع",
|
||||
login: "تسجيل الدخول",
|
||||
logout: "تسجيل الخروج",
|
||||
cart: "السلة",
|
||||
},
|
||||
nav: {
|
||||
home: "الرئيسية",
|
||||
waqf: "الوقف",
|
||||
opportunities: "فرص التبرع",
|
||||
services: "خدماتنا",
|
||||
about: "عن إحسان",
|
||||
baraem: "براعم إحسان",
|
||||
requestSupport: "طلب دعم",
|
||||
admin: "لوحة الإدارة",
|
||||
whatsappLog: "سجل واتساب",
|
||||
quickDonate: "تبرع سريع",
|
||||
},
|
||||
auth: {
|
||||
title: "دخول الإدارة",
|
||||
subtitle: "سجّل الدخول للوصول إلى لوحة الإدارة",
|
||||
username: "اسم المستخدم",
|
||||
password: "كلمة المرور",
|
||||
signIn: "تسجيل الدخول",
|
||||
error: "اسم المستخدم أو كلمة المرور غير صحيحة",
|
||||
demoHint: "بيانات تجريبية: admin / admin",
|
||||
loggedInAs: "تم تسجيل الدخول كمسؤول",
|
||||
},
|
||||
home: {
|
||||
heroTitle: "إقفال دورة التبرع",
|
||||
@@ -269,6 +335,10 @@ export const ar = {
|
||||
target: "الهدف",
|
||||
noOpportunities: "لا توجد فرص متاحة حالياً.",
|
||||
verified: "موثق",
|
||||
collectedShort: "تم جمع",
|
||||
remainingShort: "المبلغ المتبقي",
|
||||
amountPlaceholder: "مبلغ التبرع",
|
||||
generalProjects: "المشاريع العامة",
|
||||
},
|
||||
donate: {
|
||||
title: "إتمام التبرع",
|
||||
@@ -280,6 +350,18 @@ export const ar = {
|
||||
confirmDonation: "تأكيد التبرع",
|
||||
successMessage: "شكراً لتبرعك. جزاك الله خيراً.",
|
||||
caseNotFound: "الحالة غير موجودة أو لم تعد متاحة.",
|
||||
stepDetails: "التفاصيل",
|
||||
stepPayment: "الدفع",
|
||||
detailsTitle: "التفاصيل",
|
||||
amountTitle: "مبلغ التبرع",
|
||||
customAmount: "قيمة المبلغ",
|
||||
onBehalf: "تبرع عن أهلك أو أصدقائك وشاركهم الأجر",
|
||||
onBehalfName: "اسم من تتبرع عنه",
|
||||
donateNow: "تبرع الآن",
|
||||
continueToPayment: "متابعة للدفع",
|
||||
backToDetails: "رجوع للتفاصيل",
|
||||
paymentTitle: "بيانات الدفع",
|
||||
selectAmountError: "الرجاء اختيار أو إدخال مبلغ صحيح.",
|
||||
},
|
||||
admin: {
|
||||
title: "لوحة الإدارة",
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import electricity from "../assets/needs/electricity.png";
|
||||
import water from "../assets/needs/water.png";
|
||||
import food from "../assets/needs/food.png";
|
||||
import health from "../assets/needs/health.png";
|
||||
import housing from "../assets/needs/housing.png";
|
||||
import refrigerator from "../assets/needs/refrigerator.png";
|
||||
import air_conditioner from "../assets/needs/air_conditioner.png";
|
||||
import court_order from "../assets/needs/court_order.png";
|
||||
|
||||
const NEED_IMAGES: Record<string, string> = {
|
||||
electricity,
|
||||
water,
|
||||
food,
|
||||
health,
|
||||
housing,
|
||||
refrigerator,
|
||||
air_conditioner,
|
||||
court_order,
|
||||
};
|
||||
|
||||
export function getNeedImage(needType: string): string {
|
||||
return NEED_IMAGES[needType] || food;
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { useParams, useLocation } from "wouter";
|
||||
import { useParams, useLocation, useSearch, Link } from "wouter";
|
||||
import { useLanguage } from "../contexts/LanguageContext";
|
||||
import {
|
||||
useGetRequest, useDonateToRequest,
|
||||
@@ -12,18 +12,19 @@ import { useQueryClient } from "@tanstack/react-query";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { CheckCircle, Heart } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { CheckCircle, Heart, Gift, ShoppingCart, Check } from "lucide-react";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Link } from "wouter";
|
||||
import { getNeedImage } from "../lib/needImages";
|
||||
|
||||
const RIYAL = "﷼";
|
||||
const PRESETS = [100, 50, 10];
|
||||
|
||||
const schema = z.object({
|
||||
donorName: z.string().min(2),
|
||||
donorPhone: z.string().min(10),
|
||||
donorEmail: z.string().email().optional().or(z.literal("")),
|
||||
amount: z.coerce.number().positive(),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
@@ -31,8 +32,20 @@ type FormData = z.infer<typeof schema>;
|
||||
export default function Donate() {
|
||||
const { t } = useLanguage();
|
||||
const params = useParams<{ id: string }>();
|
||||
const search = useSearch();
|
||||
const [, setLocation] = useLocation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const initialAmount = (() => {
|
||||
const a = Number(new URLSearchParams(search).get("amount"));
|
||||
return Number.isFinite(a) && a > 0 ? String(a) : "";
|
||||
})();
|
||||
|
||||
const [step, setStep] = useState<1 | 2>(1);
|
||||
const [amount, setAmount] = useState<string>(initialAmount);
|
||||
const [amountError, setAmountError] = useState(false);
|
||||
const [onBehalf, setOnBehalf] = useState(false);
|
||||
const [onBehalfName, setOnBehalfName] = useState("");
|
||||
const [donated, setDonated] = useState(false);
|
||||
|
||||
const { data: request, isLoading } = useGetRequest(params.id || "", {
|
||||
@@ -43,40 +56,14 @@ export default function Donate() {
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
donorName: "",
|
||||
donorPhone: "",
|
||||
donorEmail: "",
|
||||
amount: 0,
|
||||
},
|
||||
defaultValues: { donorName: "", donorPhone: "", donorEmail: "" },
|
||||
});
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
donateMutation.mutate(
|
||||
{
|
||||
id: params.id || "",
|
||||
data: {
|
||||
donorName: data.donorName,
|
||||
donorPhone: data.donorPhone,
|
||||
donorEmail: data.donorEmail || null,
|
||||
amount: data.amount,
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: getListRequestsQueryKey() });
|
||||
queryClient.invalidateQueries({ queryKey: getListPublishedRequestsQueryKey() });
|
||||
setDonated(true);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12 max-w-2xl space-y-4">
|
||||
<div className="container mx-auto px-4 py-12 max-w-5xl space-y-4">
|
||||
<Skeleton className="h-10 w-48" />
|
||||
<Skeleton className="h-64 w-full" />
|
||||
<Skeleton className="h-80 w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -89,14 +76,22 @@ export default function Donate() {
|
||||
);
|
||||
}
|
||||
|
||||
const progress = Math.min(
|
||||
100,
|
||||
request.requestedAmount > 0
|
||||
? Math.round((request.collectedAmount / request.requestedAmount) * 100)
|
||||
: 0
|
||||
);
|
||||
const remaining = Math.max(0, request.requestedAmount - request.collectedAmount);
|
||||
|
||||
if (donated) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12 max-w-2xl">
|
||||
<Card className="border-2 border-green-200">
|
||||
<Card className="border-2 border-primary/20">
|
||||
<CardContent className="pt-10 pb-10 text-center">
|
||||
<Heart className="w-16 h-16 text-green-600 mx-auto mb-4 fill-green-100" />
|
||||
<CheckCircle className="w-10 h-10 text-green-500 mx-auto mb-4" />
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-2">{t.common.success}</h2>
|
||||
<Heart className="w-16 h-16 text-primary mx-auto mb-4 fill-primary/10" />
|
||||
<CheckCircle className="w-10 h-10 text-primary mx-auto mb-4" />
|
||||
<h2 className="text-2xl font-bold text-primary mb-2">{t.common.success}</h2>
|
||||
<p className="text-muted-foreground text-lg mb-6">{t.donate.successMessage}</p>
|
||||
<p className="text-sm font-mono text-muted-foreground bg-muted/30 px-4 py-2 rounded-lg inline-block">
|
||||
{request.caseId}
|
||||
@@ -115,124 +110,279 @@ export default function Donate() {
|
||||
);
|
||||
}
|
||||
|
||||
const progress = Math.min(
|
||||
100,
|
||||
request.requestedAmount > 0
|
||||
? Math.round((request.collectedAmount / request.requestedAmount) * 100)
|
||||
: 0
|
||||
const goToPayment = () => {
|
||||
const amt = Number(amount);
|
||||
if (!Number.isFinite(amt) || amt <= 0) {
|
||||
setAmountError(true);
|
||||
return;
|
||||
}
|
||||
// Never let a single donation exceed the remaining target.
|
||||
if (amt > remaining) {
|
||||
setAmount(String(remaining));
|
||||
}
|
||||
setAmountError(false);
|
||||
setStep(2);
|
||||
};
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
donateMutation.mutate(
|
||||
{
|
||||
id: params.id || "",
|
||||
data: {
|
||||
donorName: data.donorName,
|
||||
donorPhone: data.donorPhone,
|
||||
donorEmail: data.donorEmail || null,
|
||||
amount: Number(amount),
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: getListRequestsQueryKey() });
|
||||
queryClient.invalidateQueries({ queryKey: getListPublishedRequestsQueryKey() });
|
||||
queryClient.invalidateQueries({ queryKey: getGetRequestQueryKey(params.id || "") });
|
||||
setDonated(true);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const StepIndicator = () => (
|
||||
<div className="flex items-center justify-center gap-4 mb-10">
|
||||
{/* Step 1 - Details */}
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
|
||||
step >= 1 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
|
||||
}`}>
|
||||
{step > 1 ? <Check className="w-4 h-4" /> : "1"}
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${step >= 1 ? "text-primary" : "text-muted-foreground"}`}>
|
||||
{t.donate.stepDetails}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`h-0.5 w-16 rounded ${step >= 2 ? "bg-primary" : "bg-border"}`} />
|
||||
{/* Step 2 - Payment */}
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
|
||||
step >= 2 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
|
||||
}`}>
|
||||
2
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${step >= 2 ? "text-primary" : "text-muted-foreground"}`}>
|
||||
{t.donate.stepPayment}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const DetailsPanel = () => (
|
||||
<Card className="overflow-hidden">
|
||||
<div className="bg-muted/30 px-5 py-3 border-b">
|
||||
<h2 className="font-bold text-foreground">{t.donate.detailsTitle}</h2>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<img
|
||||
src={getNeedImage(request.needType)}
|
||||
alt={request.description}
|
||||
className="w-full h-52 object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 inset-x-0 h-6 bg-gray-200 flex">
|
||||
<div
|
||||
className="h-full bg-primary flex items-center justify-end px-3 text-primary-foreground text-xs font-bold min-w-[3rem]"
|
||||
style={{ width: `${progress}%` }}
|
||||
>
|
||||
{progress}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="pt-5 space-y-4">
|
||||
<span className="inline-block text-xs font-medium text-muted-foreground border border-border rounded-md px-3 py-1">
|
||||
{t.needTypes[request.needType as keyof typeof t.needTypes] || t.opportunities.generalProjects}
|
||||
</span>
|
||||
<h3 className="text-lg font-bold text-primary leading-snug">{request.description}</h3>
|
||||
<p className="text-xs font-mono text-muted-foreground">{request.caseId}</p>
|
||||
<div className="grid grid-cols-2 gap-2 bg-muted/40 rounded-xl p-4">
|
||||
<div className="text-center border-s border-border">
|
||||
<p className="text-sm text-primary mb-1">{t.opportunities.remainingShort}</p>
|
||||
<p className="font-bold text-foreground">{RIYAL} {remaining.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-primary mb-1">{t.opportunities.collectedShort}</p>
|
||||
<p className="font-bold text-foreground">{RIYAL} {request.collectedAmount.toLocaleString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12 max-w-2xl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">{t.donate.title}</h1>
|
||||
<div className="container mx-auto px-4 py-12 max-w-5xl">
|
||||
<h1 className="text-3xl font-bold text-foreground mb-8 text-center">{t.donate.title}</h1>
|
||||
<StepIndicator />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
|
||||
{/* Details panel (right in RTL) */}
|
||||
<DetailsPanel />
|
||||
|
||||
{/* Form panel (left in RTL) */}
|
||||
{step === 1 ? (
|
||||
<Card>
|
||||
<div className="bg-muted/30 px-5 py-3 border-b">
|
||||
<h2 className="font-bold text-foreground">{t.donate.amountTitle}</h2>
|
||||
</div>
|
||||
<CardContent className="pt-5 space-y-5">
|
||||
{/* Presets */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{PRESETS.map((p) => (
|
||||
<button
|
||||
key={p}
|
||||
type="button"
|
||||
onClick={() => { setAmount(String(p)); setAmountError(false); }}
|
||||
className={`py-3 rounded-lg border text-sm font-bold transition-colors ${
|
||||
Number(amount) === p
|
||||
? "bg-primary text-primary-foreground border-primary"
|
||||
: "bg-background border-border text-foreground hover:border-primary"
|
||||
}`}
|
||||
data-testid={`preset-${p}`}
|
||||
>
|
||||
{RIYAL} {p}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Custom amount */}
|
||||
<div className="relative">
|
||||
<span className="absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm pointer-events-none">
|
||||
{RIYAL}
|
||||
</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={amount}
|
||||
onChange={(e) => { setAmount(e.target.value); setAmountError(false); }}
|
||||
placeholder={t.donate.customAmount}
|
||||
className="ps-8"
|
||||
data-testid="input-customAmount"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* On behalf checkbox */}
|
||||
<div className="flex items-start gap-2">
|
||||
<Gift className="w-5 h-5 text-primary shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<Checkbox
|
||||
checked={onBehalf}
|
||||
onCheckedChange={(v) => setOnBehalf(v === true)}
|
||||
data-testid="checkbox-onBehalf"
|
||||
/>
|
||||
<span className="text-sm text-foreground">{t.donate.onBehalf}</span>
|
||||
</label>
|
||||
{onBehalf && (
|
||||
<Input
|
||||
value={onBehalfName}
|
||||
onChange={(e) => setOnBehalfName(e.target.value)}
|
||||
placeholder={t.donate.onBehalfName}
|
||||
className="mt-3"
|
||||
data-testid="input-onBehalfName"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{amountError && (
|
||||
<p className="text-sm text-destructive" data-testid="text-amountError">
|
||||
{t.donate.selectAmountError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className="w-full gap-2"
|
||||
onClick={goToPayment}
|
||||
data-testid="button-continueToPayment"
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
{t.donate.continueToPayment}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<div className="bg-muted/30 px-5 py-3 border-b">
|
||||
<h2 className="font-bold text-foreground">{t.donate.paymentTitle}</h2>
|
||||
</div>
|
||||
<CardContent className="pt-5">
|
||||
<div className="flex items-center justify-between bg-primary/5 rounded-lg px-4 py-3 mb-5">
|
||||
<span className="text-sm text-muted-foreground">{t.donate.amount}</span>
|
||||
<span className="text-lg font-bold text-primary">{RIYAL} {Number(amount).toLocaleString()}</span>
|
||||
</div>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="donorName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.donate.donorName}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-donorName" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="donorPhone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.donate.donorPhone}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-donorPhone" type="tel" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="donorEmail"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.donate.donorEmail}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-donorEmail" type="email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={() => setStep(1)}
|
||||
data-testid="button-backToDetails"
|
||||
>
|
||||
{t.donate.backToDetails}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className="flex-1"
|
||||
disabled={donateMutation.isPending}
|
||||
data-testid="button-confirmDonation"
|
||||
>
|
||||
{donateMutation.isPending ? t.common.loading : t.donate.confirmDonation}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Case Summary */}
|
||||
<Card className="mb-6 bg-primary/5 border-primary/20">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
{t.donate.caseSummary}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">{request.description}</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">{request.caseId}</p>
|
||||
</div>
|
||||
<Badge className="bg-primary/10 text-primary border-primary/20">
|
||||
{t.needTypes[request.needType as keyof typeof t.needTypes]}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-muted-foreground">
|
||||
{t.opportunities.collected}:{" "}
|
||||
<strong>{request.collectedAmount.toLocaleString()} ﷼</strong>
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{t.opportunities.target}:{" "}
|
||||
<strong>{request.requestedAmount.toLocaleString()} ﷼</strong>
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={progress} className="h-2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Donation Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold text-primary">{t.donate.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="donorName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.donate.donorName}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-donorName" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="donorPhone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.donate.donorPhone}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-donorPhone" type="tel" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="donorEmail"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.donate.donorEmail}</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-donorEmail" type="email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="amount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t.donate.amount} (﷼)</FormLabel>
|
||||
<FormControl>
|
||||
<Input data-testid="input-donationAmount" type="number" min={1} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={donateMutation.isPending}
|
||||
data-testid="button-confirmDonation"
|
||||
>
|
||||
{donateMutation.isPending ? t.common.loading : t.donate.confirmDonation}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="mt-4 text-center">
|
||||
<div className="mt-6 text-center">
|
||||
<Link href="/opportunities">
|
||||
<Button variant="ghost" size="sm">{t.common.back}</Button>
|
||||
</Link>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { useState } from "react";
|
||||
import { useLanguage } from "../contexts/LanguageContext";
|
||||
import { useGetStats, useListPublishedRequests } from "@workspace/api-client-react";
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { OpportunityCard } from "../components/OpportunityCard";
|
||||
import { Link } from "wouter";
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
@@ -117,7 +116,7 @@ export default function Home() {
|
||||
|
||||
{pubLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-64 w-full" />)}
|
||||
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-96 w-full" />)}
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="col-span-full text-center py-12 text-muted-foreground bg-muted/20 rounded-xl border border-dashed">
|
||||
@@ -125,56 +124,9 @@ export default function Home() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filtered.slice(0, 6).map((request) => {
|
||||
const progress = Math.min(
|
||||
100,
|
||||
request.requestedAmount > 0
|
||||
? Math.round((request.collectedAmount / request.requestedAmount) * 100)
|
||||
: 0
|
||||
);
|
||||
const remaining = Math.max(0, request.requestedAmount - request.collectedAmount);
|
||||
return (
|
||||
<Card key={request.id} className="overflow-hidden flex flex-col">
|
||||
<CardHeader className="bg-primary/5 pb-4 border-b">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<Badge variant="outline" className="bg-white">
|
||||
{t.needTypes[request.needType as keyof typeof t.needTypes] || request.needType}
|
||||
</Badge>
|
||||
<Badge className="bg-green-600 text-white">
|
||||
{t.opportunities.verified}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardTitle className="text-base line-clamp-2">{request.description}</CardTitle>
|
||||
<p className="text-xs font-mono text-muted-foreground">{request.caseId}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-5 flex-1">
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-muted-foreground">
|
||||
{t.opportunities.collected}:{" "}
|
||||
<strong className="text-foreground">{request.collectedAmount.toLocaleString()} ﷼</strong>
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{t.opportunities.target}:{" "}
|
||||
<strong className="text-foreground">{request.requestedAmount.toLocaleString()} ﷼</strong>
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={progress} className="h-2 mb-2" />
|
||||
<div className="text-sm font-medium text-primary">{progress}%</div>
|
||||
<div className="mt-3 text-center">
|
||||
<span className="text-sm text-muted-foreground">{t.opportunities.remaining}: </span>
|
||||
<span className="font-bold text-lg">{remaining.toLocaleString()} ﷼</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="pt-0">
|
||||
<Link href={`/donate/${request.id}`} className="w-full">
|
||||
<Button className="w-full" disabled={remaining <= 0}>
|
||||
{t.opportunities.donate}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{filtered.slice(0, 6).map((request) => (
|
||||
<OpportunityCard key={request.id} request={request} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useLocation } from "wouter";
|
||||
import { useLanguage } from "../contexts/LanguageContext";
|
||||
import { useAuth } from "../contexts/AuthContext";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Lock } from "lucide-react";
|
||||
import ehsanLogo from "../assets/ehsan-logo.png";
|
||||
|
||||
export default function Login() {
|
||||
const { t } = useLanguage();
|
||||
const { login, isAuthenticated } = useAuth();
|
||||
const [, setLocation] = useLocation();
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuthenticated) setLocation("/admin");
|
||||
}, [isAuthenticated, setLocation]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const ok = login(username, password);
|
||||
if (ok) {
|
||||
setLocation("/admin");
|
||||
} else {
|
||||
setError(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 flex justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="text-center space-y-3">
|
||||
<img src={ehsanLogo} alt="EHSAN" className="h-12 w-auto mx-auto object-contain" />
|
||||
<div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Lock className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-xl">{t.auth.title}</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">{t.auth.subtitle}</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username">{t.auth.username}</Label>
|
||||
<Input
|
||||
id="username"
|
||||
value={username}
|
||||
onChange={(e) => { setUsername(e.target.value); setError(false); }}
|
||||
autoComplete="username"
|
||||
data-testid="input-username"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">{t.auth.password}</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => { setPassword(e.target.value); setError(false); }}
|
||||
autoComplete="current-password"
|
||||
data-testid="input-password"
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<p className="text-sm text-destructive" data-testid="text-loginError">
|
||||
{t.auth.error}
|
||||
</p>
|
||||
)}
|
||||
<Button type="submit" className="w-full" data-testid="button-signIn">
|
||||
{t.auth.signIn}
|
||||
</Button>
|
||||
<p className="text-xs text-center text-muted-foreground bg-muted/40 rounded-md py-2 px-3">
|
||||
{t.auth.demoHint}
|
||||
</p>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,8 @@
|
||||
import { useState } from "react";
|
||||
import { useLanguage } from "../contexts/LanguageContext";
|
||||
import { useListPublishedRequests } from "@workspace/api-client-react";
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Link } from "wouter";
|
||||
import { OpportunityCard } from "../components/OpportunityCard";
|
||||
|
||||
type NeedTypeKey =
|
||||
| "electricity" | "water" | "food" | "health"
|
||||
@@ -65,7 +61,7 @@ export default function Opportunities() {
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="h-64 w-full" />
|
||||
<Skeleton key={i} className="h-96 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
@@ -74,57 +70,9 @@ export default function Opportunities() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filtered.map((request) => {
|
||||
const progress = Math.min(
|
||||
100,
|
||||
request.requestedAmount > 0
|
||||
? Math.round((request.collectedAmount / request.requestedAmount) * 100)
|
||||
: 0
|
||||
);
|
||||
const remaining = Math.max(0, request.requestedAmount - request.collectedAmount);
|
||||
|
||||
return (
|
||||
<Card key={request.id} className="overflow-hidden flex flex-col">
|
||||
<CardHeader className="bg-primary/5 pb-4 border-b">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<Badge variant="outline" className="bg-white">
|
||||
{t.needTypes[request.needType as keyof typeof t.needTypes] || request.needType}
|
||||
</Badge>
|
||||
<Badge className="bg-green-600 text-white">
|
||||
{t.opportunities.verified}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardTitle className="text-base line-clamp-2">{request.description}</CardTitle>
|
||||
<p className="text-xs font-mono text-muted-foreground mt-1">{request.caseId}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-5 flex-1">
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-muted-foreground">
|
||||
{t.opportunities.collected}:{" "}
|
||||
<strong className="text-foreground">{request.collectedAmount.toLocaleString()} ﷼</strong>
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{t.opportunities.target}:{" "}
|
||||
<strong className="text-foreground">{request.requestedAmount.toLocaleString()} ﷼</strong>
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={progress} className="h-2 mb-2" />
|
||||
<div className="text-sm font-medium text-primary">{progress}%</div>
|
||||
<div className="mt-3 text-center">
|
||||
<span className="text-sm text-muted-foreground">{t.opportunities.remaining}: </span>
|
||||
<span className="font-bold text-xl">{remaining.toLocaleString()} ﷼</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="pt-0">
|
||||
<Link href={`/donate/${request.id}`} className="w-full">
|
||||
<Button className="w-full" disabled={remaining <= 0}>
|
||||
{t.opportunities.donate}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{filtered.map((request) => (
|
||||
<OpportunityCard key={request.id} request={request} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user