77 lines
3.7 KiB
TypeScript
77 lines
3.7 KiB
TypeScript
|
import { useLanguage } from "../contexts/LanguageContext";
|
||
|
|
import { useListPublishedRequests, getListPublishedRequestsQueryKey } from "@workspace/api-client-react";
|
||
|
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Link } from "wouter";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { Progress } from "@/components/ui/progress";
|
||
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
|
|
||
|
|
export default function Opportunities() {
|
||
|
|
const { t } = useLanguage();
|
||
|
|
const { data: requests, isLoading } = useListPublishedRequests();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container mx-auto px-4 py-12">
|
||
|
|
<h1 className="text-3xl font-bold text-foreground mb-8">{t.opportunities.title}</h1>
|
||
|
|
|
||
|
|
{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" />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
|
|
{requests?.map((request) => {
|
||
|
|
const progress = Math.min(100, Math.round((request.collectedAmount / request.requestedAmount) * 100));
|
||
|
|
const remaining = 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">
|
||
|
|
{t.statuses.verified}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
<CardTitle className="text-lg line-clamp-1">{request.description}</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="pt-6 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} ﷼</strong></span>
|
||
|
|
<span className="text-muted-foreground">{t.opportunities.target}: <strong className="text-foreground">{request.requestedAmount} ﷼</strong></span>
|
||
|
|
</div>
|
||
|
|
<Progress value={progress} className="h-2 mb-2" />
|
||
|
|
<div className="text-sm text-right text-primary font-medium">
|
||
|
|
{progress}%
|
||
|
|
</div>
|
||
|
|
<div className="mt-4 text-center">
|
||
|
|
<span className="text-sm text-muted-foreground">{t.opportunities.remaining}: </span>
|
||
|
|
<span className="font-bold text-xl">{remaining > 0 ? remaining : 0} ﷼</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>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
|
||
|
|
{(!requests || requests.length === 0) && (
|
||
|
|
<div className="col-span-full text-center py-12 text-muted-foreground bg-muted/20 rounded-xl border border-dashed">
|
||
|
|
No opportunities available right now.
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|