617 lines
43 KiB
JavaScript
617 lines
43 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import Toast from '../Components/Toast';
|
|
import {
|
|
ChevronLeft,
|
|
Edit2,
|
|
TrendingUp,
|
|
Calendar,
|
|
MapPin,
|
|
Building,
|
|
Wallet,
|
|
FileText,
|
|
Users,
|
|
Eye,
|
|
Percent,
|
|
Clock,
|
|
Shield,
|
|
CheckCircle2,
|
|
AlertCircle,
|
|
X,
|
|
ArrowRight,
|
|
Download
|
|
} from 'lucide-react';
|
|
|
|
export default function InvestorView({ id }) {
|
|
const isReceptionist = window.__APP_DATA__?.role === 'receptionist';
|
|
const basePath = isReceptionist ? '/receptionist/investors' : '/owner/investors';
|
|
|
|
const [investor, setInvestor] = useState(null);
|
|
const [payouts, setPayouts] = useState([]);
|
|
const [roiStatus, setRoiStatus] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [toast, setToast] = useState(null);
|
|
const [activeTab, setActiveTab] = useState('Overview');
|
|
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
|
|
|
|
const [settleModal, setSettleModal] = useState({
|
|
isOpen: false,
|
|
month: '',
|
|
amount: '',
|
|
originalAmount: '',
|
|
baseAmount: 0,
|
|
carryOver: 0,
|
|
date: new Date().toISOString().split('T')[0],
|
|
method: 'Bank Transfer',
|
|
remarks: ''
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchInvestor();
|
|
fetchPayouts();
|
|
fetchROIStatus();
|
|
}, [id]);
|
|
|
|
const fetchPayouts = async () => {
|
|
try {
|
|
const response = await fetch(`/api/investors/${id}/payouts`);
|
|
const data = await response.json();
|
|
setPayouts(data);
|
|
} catch (error) {
|
|
console.error('Error fetching payouts:', error);
|
|
}
|
|
};
|
|
|
|
const fetchROIStatus = async () => {
|
|
try {
|
|
const response = await fetch(`/api/investors/${id}/roi-status`);
|
|
const data = await response.json();
|
|
setRoiStatus(data);
|
|
} catch (error) {
|
|
console.error('Error fetching ROI status:', error);
|
|
}
|
|
};
|
|
|
|
const fetchInvestor = async () => {
|
|
try {
|
|
const response = await fetch(`/api/investors/${id}`);
|
|
const data = await response.json();
|
|
setInvestor(data);
|
|
} catch (error) {
|
|
console.error('Error fetching investor:', error);
|
|
setToast({ message: 'Failed to load investor details.', type: 'error' });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSettleROI = async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Validation: Remarks mandatory if amount is adjusted
|
|
if (parseFloat(settleModal.amount) !== parseFloat(settleModal.originalAmount) && !settleModal.remarks?.trim()) {
|
|
setToast({ message: 'Remarks field is mandatory when adjusting the payment amount.', type: 'error' });
|
|
return;
|
|
}
|
|
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
try {
|
|
const response = await fetch(`/api/investors/${id}/settle-roi`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify({
|
|
payout_month: settleModal.month,
|
|
amount: settleModal.amount,
|
|
payout_date: settleModal.date,
|
|
payment_method: settleModal.method,
|
|
remarks: settleModal.remarks
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
setToast({ message: 'ROI settled successfully!', type: 'success' });
|
|
setSettleModal({
|
|
isOpen: false,
|
|
month: '',
|
|
amount: '',
|
|
originalAmount: '',
|
|
date: new Date().toISOString().split('T')[0],
|
|
method: 'Bank Transfer',
|
|
remarks: ''
|
|
});
|
|
fetchPayouts();
|
|
fetchROIStatus();
|
|
} else {
|
|
setToast({ message: 'Settlement failed.', type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
setToast({ message: 'Error during settlement.', type: 'error' });
|
|
}
|
|
};
|
|
|
|
if (loading) return (
|
|
<div className="min-h-screen bg-[#FDFDFD] flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-4 border-emerald-500 border-t-transparent shadow-lg shadow-emerald-100"></div>
|
|
</div>
|
|
);
|
|
|
|
if (!investor) return (
|
|
<div className="min-h-screen bg-[#FDFDFD] flex flex-col items-center justify-center space-y-4">
|
|
<AlertCircle size={64} className="text-red-500 opacity-20" />
|
|
<h1 className="text-2xl font-black text-gray-900 uppercase italic">Investor Not Found</h1>
|
|
<button onClick={() => window.location.href = basePath} className="px-6 py-2 bg-gray-900 text-white rounded-xl text-sm font-bold">Return to Registry</button>
|
|
</div>
|
|
);
|
|
|
|
const initials = investor.name?.split(' ').map(n => n[0]).join('').toUpperCase() || 'INV';
|
|
const totalPayouts = payouts.reduce((acc, p) => acc + parseFloat(p.amount || 0), 0);
|
|
|
|
return (
|
|
<>
|
|
{toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
|
|
|
|
<main className="p-10 max-w-[1400px] mx-auto space-y-10">
|
|
{/* Navigation & Actions */}
|
|
<div className="flex items-center justify-between">
|
|
<button onClick={() => window.location.href = basePath} className="group flex items-center gap-3 text-sm font-black text-gray-400 hover:text-gray-900 transition-all uppercase tracking-widest">
|
|
<div className="p-2 rounded-xl group-hover:bg-gray-100 transition-colors">
|
|
<ChevronLeft size={20} />
|
|
</div>
|
|
<span>Back to Registry</span>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => window.location.href = `${basePath}/edit/${investor.id}`}
|
|
className="flex items-center gap-2 px-6 py-3 bg-white border border-gray-200 text-gray-700 rounded-2xl font-black text-xs hover:bg-gray-50 transition-all shadow-sm uppercase tracking-widest"
|
|
>
|
|
<Edit2 size={16} />
|
|
<span>Modify Profile</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Profile Identity Card */}
|
|
<div className="bg-white rounded-[3rem] border border-gray-100 shadow-2xl shadow-emerald-100/20 p-12 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-emerald-50 rounded-full blur-3xl -mr-32 -mt-32 opacity-50"></div>
|
|
|
|
<div className="relative flex flex-col md:flex-row items-center gap-10">
|
|
<div className="w-32 h-32 bg-[#111827] rounded-[2.5rem] flex items-center justify-center text-white text-4xl font-black border-4 border-gray-50 shadow-2xl rotate-3">
|
|
{initials}
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-4 text-center md:text-left">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-center md:justify-start gap-4">
|
|
<h1 className="text-4xl font-black text-[#111827] tracking-tighter uppercase italic">{investor.name}</h1>
|
|
<span className="px-4 py-1.5 bg-emerald-50 text-emerald-600 border border-emerald-100 rounded-full text-[10px] font-black uppercase tracking-widest">Active Investor</span>
|
|
</div>
|
|
<div className="flex items-center justify-center md:justify-start gap-6 text-[#98A2B3] text-[11px] font-black uppercase tracking-[0.2em]">
|
|
<div className="flex items-center gap-1.5">
|
|
<Building size={14} className="text-gray-400" />
|
|
{investor.applicable_to_all_branches ? "Global Portfolio" : `${investor.branches?.length || 0} Branches`}
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Calendar size={14} className="text-gray-400" />
|
|
Since {new Date(investor.investment_date).toLocaleDateString()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 w-full md:w-auto">
|
|
<div className="bg-gray-50/50 p-6 rounded-3xl border border-gray-100 text-center space-y-1">
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Total Capital</p>
|
|
<p className="text-xl font-black text-gray-900">{parseFloat(investor.investment_amount).toLocaleString()} <span className="text-[10px]">AED</span></p>
|
|
</div>
|
|
<div className="bg-emerald-50/30 p-6 rounded-3xl border border-emerald-50 text-center space-y-1">
|
|
<p className="text-[10px] font-black text-emerald-600 uppercase tracking-widest">ROI Yielded</p>
|
|
<p className="text-xl font-black text-emerald-700">{totalPayouts.toLocaleString()} <span className="text-[10px]">AED</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs & Content */}
|
|
<div className="space-y-8">
|
|
<div className="flex items-center gap-12 border-b border-gray-100">
|
|
{['Overview', 'ROI Payouts', 'Monthly Status'].map(tab => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={`pb-4 text-xs font-black uppercase tracking-[0.2em] transition-all relative ${
|
|
activeTab === tab
|
|
? 'text-emerald-600'
|
|
: 'text-gray-400 hover:text-gray-600'
|
|
}`}
|
|
>
|
|
{tab}
|
|
{activeTab === tab && <div className="absolute bottom-0 left-0 right-0 h-1 bg-emerald-500 rounded-full"></div>}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{activeTab === 'Overview' && (
|
|
<div className="grid grid-cols-3 gap-8 animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<div className="col-span-2 space-y-8">
|
|
<div className="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm overflow-hidden">
|
|
<div className="p-8 border-b border-gray-50 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-blue-50 text-blue-600 rounded-xl font-black">
|
|
<TrendingUp size={20} />
|
|
</div>
|
|
<h2 className="text-lg font-black text-[#111827] uppercase italic">Investment Terms</h2>
|
|
</div>
|
|
</div>
|
|
<div className="p-10 grid grid-cols-2 gap-y-12">
|
|
<div className="space-y-2">
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">
|
|
{investor.roi_type === 'Percentage' ? 'ROI Interest' : 'Fixed ROI'}
|
|
</p>
|
|
<div className="flex items-end gap-2">
|
|
<p className="text-3xl font-black text-gray-900">
|
|
{investor.roi_value}
|
|
{investor.roi_type === 'Percentage' ? '%' : ' AED'}
|
|
</p>
|
|
<p className="text-xs font-bold text-gray-400 pb-1 mb-1 uppercase bg-gray-50 px-2 py-0.5 rounded-md">PER {investor.roi_period || 'MONTH'}</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-2 space-y-4">
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Strategic Allocation</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{investor.applicable_to_all_branches ? (
|
|
<div className="px-5 py-2.5 bg-[#111827] text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] flex items-center gap-2">
|
|
<Shield size={14} className="text-emerald-400" />
|
|
Organization Wide Equity
|
|
</div>
|
|
) : (
|
|
investor.branches?.map(branch => (
|
|
<div key={branch.id} className="px-5 py-2.5 bg-gray-50 text-gray-600 border border-gray-100 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em]">
|
|
{branch.name}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
<div className="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm overflow-hidden min-h-[300px]">
|
|
<div className="p-8 border-b border-gray-50 flex items-center gap-3">
|
|
<div className="p-2 bg-amber-50 text-amber-600 rounded-xl font-black">
|
|
<Shield size={20} />
|
|
</div>
|
|
<h2 className="text-lg font-black text-[#111827] uppercase italic tracking-tight">Security & Docs</h2>
|
|
</div>
|
|
<div className="p-8 flex flex-col items-center justify-center text-center space-y-6">
|
|
{investor.security_proof_document ? (
|
|
<div className="group w-full p-8 bg-gray-50 rounded-[2rem] border border-gray-100 flex flex-col items-center gap-4 hover:bg-white hover:border-blue-200 transition-all cursor-pointer" onClick={() => setIsPreviewOpen(true)}>
|
|
<div className="w-20 h-20 bg-white shadow-xl rounded-3xl flex items-center justify-center text-blue-600 group-hover:scale-110 transition-transform">
|
|
<FileText size={40} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-black text-gray-900 uppercase italic">Security Proof</p>
|
|
<p className="text-[10px] font-black text-blue-500 uppercase tracking-widest">Click to View</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4 opacity-50">
|
|
<div className="w-20 h-20 bg-gray-50 rounded-3xl flex items-center justify-center text-gray-300 mx-auto">
|
|
<FileText size={40} />
|
|
</div>
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">No Document provided</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'ROI Payouts' && (
|
|
<div className="bg-white rounded-[3rem] border border-gray-100 shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<div className="p-10 border-b border-gray-50 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 bg-emerald-500 shadow-lg shadow-emerald-100 rounded-2xl text-white font-black">
|
|
<Wallet size={24} />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-black text-[#111827] uppercase italic">Distribution History</h2>
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Total ROI Settled: {totalPayouts.toLocaleString()} AED</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-gray-50/50">
|
|
<th className="px-10 py-6 text-left text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Period</th>
|
|
<th className="px-10 py-6 text-left text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Amount (AED)</th>
|
|
<th className="px-10 py-6 text-left text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Payment Date</th>
|
|
<th className="px-10 py-6 text-left text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Method</th>
|
|
<th className="px-10 py-6 text-right text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-50">
|
|
{payouts.length > 0 ? (
|
|
payouts.map(p => (
|
|
<tr key={p.id} className="hover:bg-gray-50/30 transition-colors">
|
|
<td className="px-10 py-8 font-black text-gray-900 text-sm">{p.payout_month}</td>
|
|
<td className="px-10 py-8 font-black text-emerald-600 text-sm">{(parseFloat(p.amount) || 0).toLocaleString()} AED</td>
|
|
<td className="px-10 py-8 text-xs font-bold text-gray-400 uppercase tracking-widest">{new Date(p.payout_date).toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })}</td>
|
|
<td className="px-10 py-8 text-[10px] font-black text-gray-500 uppercase tracking-widest underline decoration-gray-200 decoration-2 underline-offset-4">{p.payment_method}</td>
|
|
<td className="px-10 py-8 text-right">
|
|
<span className="px-4 py-1.5 bg-emerald-50 text-emerald-600 border border-emerald-100 rounded-full text-[10px] font-black uppercase tracking-widest">
|
|
{p.status || 'Paid'}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan="5" className="px-10 py-24 text-center">
|
|
<div className="space-y-4 opacity-20">
|
|
<Wallet size={48} className="mx-auto" />
|
|
<p className="text-sm font-black uppercase italic italic tracking-widest">No ROI distributions recorded</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'Monthly Status' && (
|
|
<div className="bg-white rounded-[3rem] border border-gray-100 shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<div className="p-10 border-b border-gray-50 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 bg-amber-500 shadow-lg shadow-amber-100 rounded-2xl text-white font-black">
|
|
<Clock size={24} />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-black text-[#111827] uppercase italic">Settlement Tracking</h2>
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Unpaid ROI Periods since Investment</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-gray-50/50">
|
|
<th className="px-10 py-6 text-left text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">ROI Period</th>
|
|
<th className="px-10 py-6 text-left text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Breakdown</th>
|
|
<th className="px-10 py-6 text-left text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Net Due</th>
|
|
<th className="px-10 py-6 text-left text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Status</th>
|
|
<th className="px-10 py-6 text-right text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-50">
|
|
{roiStatus.filter(s => s.status === 'Pending' || s.status === 'Partial').length > 0 ? (
|
|
roiStatus.filter(s => s.status === 'Pending' || s.status === 'Partial').map((s, idx) => (
|
|
<tr key={idx} className="hover:bg-amber-50/20 transition-colors">
|
|
<td className="px-10 py-8 font-black text-gray-900 text-sm">{s.month}</td>
|
|
<td className="px-10 py-4">
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] font-black text-gray-400 flex justify-between w-40">
|
|
<span>Base ROI:</span> <span>{(parseFloat(s.base_amount) || 0).toLocaleString()} AED</span>
|
|
</p>
|
|
{parseFloat(s.carry_from_previous) !== 0 && (
|
|
<p className={`text-[10px] font-black flex justify-between w-40 ${parseFloat(s.carry_from_previous) > 0 ? 'text-amber-500' : 'text-emerald-500'}`}>
|
|
<span>Carry Over:</span> <span>{parseFloat(s.carry_from_previous) > 0 ? '+' : ''}{parseFloat(s.carry_from_previous).toLocaleString()} AED</span>
|
|
</p>
|
|
)}
|
|
{s.paid > 0 && (
|
|
<p className="text-[10px] font-black text-emerald-500 flex justify-between w-40">
|
|
<span>Allocated:</span> <span>-{(parseFloat(s.paid) || 0).toLocaleString()} AED</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-10 py-8 font-black text-gray-900 text-sm">{(parseFloat(s.amount) || 0).toLocaleString()} AED</td>
|
|
<td className="px-10 py-8">
|
|
{s.status === 'Pending' ? (
|
|
<span className="px-4 py-1.5 bg-red-50 text-red-600 border border-red-100 rounded-full text-[10px] font-black uppercase tracking-widest leading-none inline-flex items-center gap-2">
|
|
<AlertCircle size={10} /> Pending
|
|
</span>
|
|
) : (
|
|
<span className="px-4 py-1.5 bg-amber-50 text-amber-600 border border-amber-100 rounded-full text-[10px] font-black uppercase tracking-widest leading-none inline-flex items-center gap-2">
|
|
<AlertCircle size={10} /> Partially Paid
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-10 py-8 text-right">
|
|
{s.can_settle ? (
|
|
<button
|
|
onClick={() => setSettleModal({
|
|
...settleModal,
|
|
isOpen: true,
|
|
month: s.month,
|
|
amount: s.amount,
|
|
originalAmount: s.amount,
|
|
baseAmount: s.base_amount,
|
|
carryOver: s.carry_from_previous
|
|
})}
|
|
className="px-6 py-2.5 bg-[#111827] text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:scale-105 transition-all shadow-lg active:scale-95"
|
|
>
|
|
Settle Now
|
|
</button>
|
|
) : (
|
|
<button
|
|
disabled
|
|
title="Older months must be settled first."
|
|
className="px-6 py-2.5 bg-gray-100 text-gray-400 border border-gray-200 rounded-xl text-[10px] font-black uppercase tracking-widest cursor-not-allowed"
|
|
>
|
|
Locked
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan="5" className="px-10 py-24 text-center">
|
|
<div className="space-y-4">
|
|
<CheckCircle2 size={48} className="mx-auto text-emerald-500 opacity-40 hover:scale-110 transition-transform cursor-pointer" />
|
|
<p className="text-sm font-black uppercase tracking-widest text-emerald-600">All ROI Distributions Up to Date</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Document Preview Modal */}
|
|
{isPreviewOpen && (
|
|
<div className="fixed inset-0 z-[100] bg-black/90 backdrop-blur-md flex items-center justify-center p-10">
|
|
<div className="relative w-full max-w-5xl h-full flex flex-col items-center justify-center animate-in zoom-in-95 duration-200">
|
|
<button onClick={() => setIsPreviewOpen(false)} className="fixed top-8 right-8 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-all group">
|
|
<X size={24} className="group-hover:rotate-90 transition-transform" />
|
|
</button>
|
|
<div className="w-full h-full bg-white/5 rounded-[4rem] border border-white/10 p-4 relative flex items-center justify-center overflow-hidden">
|
|
{investor.security_proof_document.toLowerCase().endsWith('.pdf') ? (
|
|
<iframe src={`/storage/${investor.security_proof_document}`} className="w-full h-full rounded-[3.5rem]" />
|
|
) : (
|
|
<img src={`/storage/${investor.security_proof_document}`} className="max-w-full max-h-full object-contain rounded-2xl shadow-2xl shadow-black/50" alt="Document Preview" />
|
|
)}
|
|
</div>
|
|
<div className="mt-8 flex gap-4">
|
|
<a
|
|
href={`/storage/${investor.security_proof_document}`}
|
|
download
|
|
className="px-8 py-3 bg-white text-gray-900 rounded-2xl font-black text-xs uppercase tracking-widest flex items-center gap-2 hover:scale-105 transition-all"
|
|
>
|
|
<Download size={18} />
|
|
Download Original
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Settle ROI Modal */}
|
|
{settleModal.isOpen && (
|
|
<div className="fixed inset-0 z-[90] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-[3rem] w-full max-w-md shadow-2xl border border-gray-100 overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
|
<div className="p-10 border-b border-gray-50 flex items-center justify-between bg-gray-50/50">
|
|
<div className="space-y-1">
|
|
<h3 className="text-2xl font-black text-[#111827] uppercase italic">ROI Settlement</h3>
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Distributing ROI for {settleModal.month}</p>
|
|
</div>
|
|
<button onClick={() => setSettleModal({...settleModal, isOpen: false})} className="p-3 hover:bg-white rounded-full transition-colors text-gray-400 border border-transparent hover:border-gray-100">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSettleROI} className="p-10 space-y-8">
|
|
<div className="space-y-6">
|
|
<div className="bg-[#111827] p-8 rounded-[2rem] text-center space-y-4 relative overflow-hidden group">
|
|
<TrendingUp className="absolute top-4 right-4 text-emerald-500/20 w-24 h-24 -rotate-12 transition-transform group-hover:scale-110" />
|
|
|
|
<div className="space-y-1 relative z-10">
|
|
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">
|
|
{parseFloat(settleModal.amount) !== parseFloat(settleModal.originalAmount) ? 'Adjusted Payout' : 'Calculated Payout'}
|
|
</p>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<input
|
|
type="number"
|
|
className="bg-transparent border-b border-gray-700 text-4xl font-black text-white text-center w-32 outline-none focus:border-emerald-500 transition-colors"
|
|
value={settleModal.amount}
|
|
onChange={(e) => setSettleModal({...settleModal, amount: e.target.value})}
|
|
/>
|
|
<span className="text-xs text-gray-500">AED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-gray-800 space-y-2 relative z-10">
|
|
<div className="flex justify-between text-[10px] font-black uppercase tracking-widest">
|
|
<span className="text-gray-500">Base ROI:</span>
|
|
<span className="text-gray-300">{parseFloat(settleModal.baseAmount).toLocaleString()} AED</span>
|
|
</div>
|
|
{parseFloat(settleModal.carryOver) !== 0 && (
|
|
<div className="flex justify-between text-[10px] font-black uppercase tracking-widest">
|
|
<span className="text-gray-500">Carry Over:</span>
|
|
<span className={parseFloat(settleModal.carryOver) > 0 ? 'text-amber-500' : 'text-emerald-500'}>
|
|
{parseFloat(settleModal.carryOver) > 0 ? '+' : ''}{parseFloat(settleModal.carryOver).toLocaleString()} AED
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{parseFloat(settleModal.amount) !== parseFloat(settleModal.originalAmount) && (
|
|
<p className="text-[9px] font-black text-amber-500 uppercase tracking-widest pt-2 relative z-10">Adjustment detected: Remarks required</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-gray-400 uppercase tracking-widest block pl-1">Settlement Date</label>
|
|
<input
|
|
type="date"
|
|
required
|
|
className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl outline-none focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 transition-all font-black text-sm"
|
|
value={settleModal.date}
|
|
onChange={(e) => setSettleModal({...settleModal, date: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-gray-400 uppercase tracking-widest block pl-1">Method</label>
|
|
<select
|
|
className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl outline-none focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 transition-all font-black text-[10px] tracking-widest uppercase appearance-none"
|
|
value={settleModal.method}
|
|
onChange={(e) => setSettleModal({...settleModal, method: e.target.value})}
|
|
>
|
|
<option value="Bank Transfer">Bank Transfer</option>
|
|
<option value="Cash">Cash</option>
|
|
<option value="Cheque">Cheque</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-gray-400 uppercase tracking-widest block pl-1">
|
|
Notes / Reference {parseFloat(settleModal.amount) !== parseFloat(settleModal.originalAmount) && <span className="text-red-500">*</span>}
|
|
</label>
|
|
<textarea
|
|
className={`w-full px-5 py-4 bg-gray-50 border ${parseFloat(settleModal.amount) !== parseFloat(settleModal.originalAmount) && !settleModal.remarks ? 'border-amber-200' : 'border-gray-100'} rounded-2xl outline-none focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 transition-all text-xs font-bold resize-none h-24 placeholder:text-gray-300`}
|
|
placeholder={parseFloat(settleModal.amount) !== parseFloat(settleModal.originalAmount) ? "Reason for adjustment (Mandatory)" : "Optional remarks..."}
|
|
value={settleModal.remarks}
|
|
onChange={(e) => setSettleModal({...settleModal, remarks: e.target.value})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSettleModal({...settleModal, isOpen: false})}
|
|
className="flex-1 px-8 py-5 bg-gray-50 text-gray-400 rounded-[1.5rem] font-black text-xs uppercase tracking-widest hover:bg-gray-100 transition-all"
|
|
>
|
|
Dismiss
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-[1.5] px-8 py-5 bg-emerald-600 text-white rounded-[1.5rem] font-black text-xs uppercase tracking-[0.2em] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-xl shadow-emerald-100 flex items-center justify-center gap-2"
|
|
>
|
|
<CheckCircle2 size={18} />
|
|
Confirm Pay
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|