108 lines
5.3 KiB
TypeScript
108 lines
5.3 KiB
TypeScript
import React from 'react';
|
|
import { HeartHandshake, LogOut, DollarSign, Package, ArrowRight, HeartPulse } from 'lucide-react';
|
|
import { useAppContext } from '../context/AppContext';
|
|
|
|
interface DonorViewProps {
|
|
onLogout: () => void;
|
|
}
|
|
|
|
export default function DonorView({ onLogout }: DonorViewProps) {
|
|
const { dogs } = useAppContext();
|
|
|
|
// Only show dogs that have been conditionally accepted and need funding/resources
|
|
const cases = dogs.filter(d => d.placementStatus === 'conditional');
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
|
|
<header className="bg-rose-700 text-white shadow-md">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<HeartHandshake className="w-8 h-8 text-rose-300" />
|
|
<div>
|
|
<h1 className="text-xl font-bold tracking-tight">Rescue-to-Rehab Engine</h1>
|
|
<p className="text-rose-200 text-xs uppercase tracking-wider font-semibold">Donator Portal</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={onLogout} className="flex items-center text-rose-200 hover:text-white text-sm font-medium transition-colors">
|
|
<LogOut className="w-4 h-4 mr-2" /> Sign Out
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="mb-8">
|
|
<h2 className="text-2xl font-bold text-slate-900">Critical Cases Awaiting Placement</h2>
|
|
<p className="text-slate-600 mt-1">These dogs have been approved by specialized centers but require funding or resources to secure their spot.</p>
|
|
</div>
|
|
|
|
{cases.length === 0 ? (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-12 text-center">
|
|
<p className="text-slate-500">There are currently no dogs awaiting conditional placement funding.</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{cases.map(c => {
|
|
const goal = c.fundingGoal || 0;
|
|
const raised = c.fundingRaised || 0;
|
|
const percent = goal > 0 ? Math.round((raised / goal) * 100) : 100;
|
|
|
|
return (
|
|
<div key={c.id} className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col">
|
|
<div className="p-6 flex-grow">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="text-xl font-bold text-slate-900">{c.name}</h3>
|
|
<p className="text-sm text-slate-500">{c.breed} • {c.age}</p>
|
|
</div>
|
|
<span className="bg-rose-100 text-rose-800 text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
|
|
Urgent
|
|
</span>
|
|
</div>
|
|
|
|
<div className="bg-rose-50 rounded-xl p-4 mb-6 border border-rose-100">
|
|
<p className="text-rose-900 text-sm italic leading-relaxed">
|
|
"{c.donorPitch || c.centerDescription || 'This dog needs your help to secure a spot at a specialized center.'}"
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{goal > 0 && (
|
|
<div>
|
|
<div className="flex justify-between text-sm font-medium mb-1">
|
|
<span className="text-slate-700">Funding Goal</span>
|
|
<span className="text-slate-900">${raised} / ${goal}</span>
|
|
</div>
|
|
<div className="w-full bg-slate-100 rounded-full h-2.5">
|
|
<div className="bg-rose-500 h-2.5 rounded-full" style={{ width: `${percent}%` }}></div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{c.resourcesNeeded && c.resourcesNeeded.length > 0 && (
|
|
<div className="flex items-start text-sm text-slate-700">
|
|
<Package className="w-4 h-4 mr-2 text-slate-400 mt-0.5" />
|
|
<div>
|
|
<span className="font-medium">Resources Needed:</span>
|
|
<span className="ml-1 text-slate-600">{c.resourcesNeeded.join(', ')}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-slate-50 px-6 py-4 border-t border-slate-100 flex justify-between items-center">
|
|
<span className="text-xs text-slate-500 font-medium uppercase tracking-wider">Matched: {c.placedCenterName}</span>
|
|
<button className="bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-lg text-sm font-bold transition-colors flex items-center">
|
|
Fund Case <ArrowRight className="w-4 h-4 ml-1" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|