348 lines
14 KiB
TypeScript
348 lines
14 KiB
TypeScript
import {
|
|
Award,
|
|
Bike,
|
|
Building2,
|
|
ClipboardList,
|
|
CreditCard,
|
|
GraduationCap,
|
|
Loader2,
|
|
Mail,
|
|
MapPin,
|
|
Pencil,
|
|
Phone,
|
|
User,
|
|
} from 'lucide-react';
|
|
import { Application } from '../../../lib/mock-data';
|
|
import { Button } from '../../ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card';
|
|
import { Input } from '../../ui/input';
|
|
import { Label } from '../../ui/label';
|
|
import { Separator } from '../../ui/separator';
|
|
|
|
interface StatutoryFormState {
|
|
accountHolderName: string;
|
|
panNumber: string;
|
|
gstNumber: string;
|
|
registeredAddress: string;
|
|
bankName: string;
|
|
accountNumber: string;
|
|
ifscCode: string;
|
|
}
|
|
|
|
interface ApplicantInformationCardProps {
|
|
application: Application;
|
|
canEditStatutory: boolean;
|
|
isEditingStatutory: boolean;
|
|
isSavingStatutory: boolean;
|
|
statutoryForm: StatutoryFormState;
|
|
onEditFirmType: () => void;
|
|
onEditStatutory: () => void;
|
|
onCancelEditStatutory: () => void;
|
|
onSaveStatutory: () => void;
|
|
onStatutoryFormChange: (nextState: StatutoryFormState) => void;
|
|
}
|
|
|
|
export function ApplicantInformationCard({
|
|
application,
|
|
canEditStatutory,
|
|
isEditingStatutory,
|
|
isSavingStatutory,
|
|
statutoryForm,
|
|
onEditFirmType,
|
|
onEditStatutory,
|
|
onCancelEditStatutory,
|
|
onSaveStatutory,
|
|
onStatutoryFormChange,
|
|
}: ApplicantInformationCardProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Applicant Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-4 sm:p-6 space-y-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<User className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Full Name</p>
|
|
<p className="text-slate-900">{application.name}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<Mail className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Email</p>
|
|
<p className="text-slate-900">{application.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<Phone className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Phone</p>
|
|
<p className="text-slate-900">{application.phone}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<User className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Age</p>
|
|
<p className="text-slate-900">{application.age ? `${application.age} years` : 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<GraduationCap className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Education</p>
|
|
<p className="text-slate-900">{application.education || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<MapPin className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Preferred Location</p>
|
|
<p className="text-slate-900">{application.preferredLocation || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<MapPin className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Location Type</p>
|
|
<p className="text-slate-900">{application.locationType || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<Building2 className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div className="flex-1">
|
|
<p className="text-slate-600 flex items-center justify-between group cursor-pointer" onClick={onEditFirmType}>
|
|
Proposed Firm Type
|
|
<Pencil className="w-3 h-3 text-slate-300 group-hover:text-amber-600 transition-colors" />
|
|
</p>
|
|
<p className="text-slate-900 font-black text-amber-700 tracking-tight leading-none mt-1">
|
|
{application.constitutionType || 'Not Provided'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<Bike className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Owns Bike</p>
|
|
<p className="text-slate-900">{application.ownRoyalEnfield === 'yes' ? 'Yes' : 'No'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{application.ownRoyalEnfield === 'yes' && (
|
|
<div className="flex items-start gap-3">
|
|
<Bike className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Bike Model</p>
|
|
<p className="text-slate-900">{application.royalEnfieldModel || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-start gap-3">
|
|
<User className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Existing Dealer</p>
|
|
<p className="text-slate-900">{application.existingDealer === 'yes' ? 'Yes' : 'No'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{application.existingDealer === 'yes' && (
|
|
<div className="flex items-start gap-3">
|
|
<User className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Company Name</p>
|
|
<p className="text-slate-900">{application.companyName || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-start gap-3">
|
|
<ClipboardList className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Source</p>
|
|
<p className="text-slate-900">{application.source || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{application.questionnaireMarks !== undefined && (
|
|
<div className="flex items-start gap-3">
|
|
<Award className="w-5 h-5 text-slate-400 mt-1" />
|
|
<div>
|
|
<p className="text-slate-600">Questionnaire Score</p>
|
|
<p className="text-slate-900">{application.questionnaireMarks}/100</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<p className="text-slate-600 mb-2">Address</p>
|
|
<p className="text-slate-900">{application.address || 'N/A'}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-slate-600 mb-2">Pincode</p>
|
|
<p className="text-slate-900">{application.pincode || 'N/A'}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-slate-600 mb-2">Description</p>
|
|
<p className="text-slate-900">{application.description || 'N/A'}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-slate-600 mb-2">Past Experience</p>
|
|
<p className="text-slate-900">{application.pastExperience || 'N/A'}</p>
|
|
</div>
|
|
|
|
<div className="pt-6 border-t mt-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-sm font-black text-slate-900 uppercase tracking-widest flex items-center gap-2">
|
|
<CreditCard className="w-4 h-4 text-amber-600" /> Statutory & Bank Information
|
|
</h3>
|
|
{canEditStatutory && !isEditingStatutory && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onEditStatutory}
|
|
className="h-8 text-amber-600 hover:text-amber-700 hover:bg-amber-50 gap-1.5"
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" />
|
|
Edit Details
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{isEditingStatutory ? (
|
|
<div className="bg-slate-50/50 p-6 rounded-xl border-2 border-amber-100 space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] uppercase font-bold text-slate-500">Legal Entity Name</Label>
|
|
<Input
|
|
value={statutoryForm.accountHolderName}
|
|
onChange={(e) => onStatutoryFormChange({ ...statutoryForm, accountHolderName: e.target.value })}
|
|
placeholder="Enter Legal Entity Name"
|
|
className="bg-white border-slate-200"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] uppercase font-bold text-slate-500">PAN Number</Label>
|
|
<Input
|
|
value={statutoryForm.panNumber}
|
|
onChange={(e) => onStatutoryFormChange({ ...statutoryForm, panNumber: e.target.value.toUpperCase() })}
|
|
placeholder="10-digit PAN"
|
|
maxLength={10}
|
|
className="bg-white border-slate-200 uppercase"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] uppercase font-bold text-slate-500">GST Number</Label>
|
|
<Input
|
|
value={statutoryForm.gstNumber}
|
|
onChange={(e) => onStatutoryFormChange({ ...statutoryForm, gstNumber: e.target.value.toUpperCase() })}
|
|
placeholder="15-digit GSTIN"
|
|
maxLength={15}
|
|
className="bg-white border-slate-200 uppercase"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] uppercase font-bold text-slate-500">Registered Address</Label>
|
|
<Input
|
|
value={statutoryForm.registeredAddress}
|
|
onChange={(e) => onStatutoryFormChange({ ...statutoryForm, registeredAddress: e.target.value })}
|
|
placeholder="Enter Registered Office Address"
|
|
className="bg-white border-slate-200"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] uppercase font-bold text-slate-500">Bank Name</Label>
|
|
<Input
|
|
value={statutoryForm.bankName}
|
|
onChange={(e) => onStatutoryFormChange({ ...statutoryForm, bankName: e.target.value })}
|
|
placeholder="Enter Bank Name"
|
|
className="bg-white border-slate-200"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] uppercase font-bold text-slate-500">Account Number</Label>
|
|
<Input
|
|
value={statutoryForm.accountNumber}
|
|
onChange={(e) => onStatutoryFormChange({ ...statutoryForm, accountNumber: e.target.value })}
|
|
placeholder="Enter Account Number"
|
|
className="bg-white border-slate-200"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] uppercase font-bold text-slate-500">IFSC Code</Label>
|
|
<Input
|
|
value={statutoryForm.ifscCode}
|
|
onChange={(e) => onStatutoryFormChange({ ...statutoryForm, ifscCode: e.target.value.toUpperCase() })}
|
|
placeholder="11-digit IFSC"
|
|
maxLength={11}
|
|
className="bg-white border-slate-200 uppercase"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-3 pt-4 border-t">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onCancelEditStatutory}
|
|
disabled={isSavingStatutory}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={onSaveStatutory}
|
|
disabled={isSavingStatutory}
|
|
className="bg-amber-600 hover:bg-amber-700"
|
|
>
|
|
{isSavingStatutory ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Save Details'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 bg-slate-50/50 p-4 rounded-xl border border-slate-100">
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">Legal Entity Name</p>
|
|
<p className="text-xs font-semibold text-slate-900">{application.accountHolderName || 'Pending'}</p>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">PAN Number</p>
|
|
<p className="text-xs font-semibold text-slate-900 uppercase">{application.panNumber || 'Pending'}</p>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">GST Number</p>
|
|
<p className="text-xs font-semibold text-slate-900 uppercase">{application.gstNumber || 'Pending'}</p>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">Registered Address</p>
|
|
<p className="text-xs font-semibold text-slate-900">{application.registeredAddress || 'Pending'}</p>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] text-slate-500 uppercase font-bold tracking-tight">Bank Details</p>
|
|
<p className="text-xs font-semibold text-slate-900">{application.bankName || 'N/A'}</p>
|
|
<p className="text-[10px] text-slate-600">A/C: {application.accountNumber || 'N/A'}</p>
|
|
<p className="text-[10px] text-slate-600">IFSC: {application.ifscCode || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|