578 lines
24 KiB
TypeScript
578 lines
24 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { ApplicationCard } from '@/features/onboarding/components/ApplicationCard';
|
|
import { ApplicationStatus, Application } from '@/lib/mock-data';
|
|
import { masterService } from '@/services/master.service';
|
|
import { onboardingService } from '@/services/onboarding.service';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationEllipsis,
|
|
PaginationItem,
|
|
PaginationLink,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from "@/components/ui/pagination";
|
|
import {
|
|
Search,
|
|
Download,
|
|
Grid3x3,
|
|
List,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Loader2
|
|
} from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { toast } from 'sonner';
|
|
import { formatDateTime } from '@/components/ui/utils';
|
|
|
|
interface AllApplicationsPageProps {
|
|
onViewDetails: (id: string) => void;
|
|
initialFilter?: string;
|
|
}
|
|
|
|
export function AllApplicationsPage({ onViewDetails, initialFilter = 'all' }: AllApplicationsPageProps) {
|
|
const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState<string>(initialFilter);
|
|
const [locationFilter, setLocationFilter] = useState<string>('all');
|
|
const [stateFilter, setStateFilter] = useState<string>('all');
|
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
const [showShortlistModal, setShowShortlistModal] = useState(false);
|
|
const [shortlistRemark, setShortlistRemark] = useState('');
|
|
const [applicationsData, setApplicationsData] = useState<Application[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [states, setStates] = useState<string[]>([]);
|
|
const [locations, setLocations] = useState<string[]>([]);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [paginationMeta, setPaginationMeta] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
fetchApplications();
|
|
}, [currentPage, searchQuery, statusFilter, locationFilter, stateFilter]);
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [searchQuery, statusFilter, locationFilter, stateFilter]);
|
|
|
|
useEffect(() => {
|
|
fetchStates();
|
|
}, []);
|
|
|
|
const fetchStates = async () => {
|
|
try {
|
|
const response = await masterService.getStates();
|
|
const statesArray = Array.isArray(response) ? response : ((response as any)?.data || (response as any)?.states || []);
|
|
const stateNames = statesArray.map((s: any) => typeof s === 'string' ? s : (s.name || s.stateName)).filter(Boolean);
|
|
setStates(stateNames);
|
|
} catch (error) {
|
|
console.error('Failed to fetch states:', error);
|
|
}
|
|
};
|
|
|
|
const fetchApplications = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await onboardingService.getApplications({
|
|
page: currentPage,
|
|
limit: 10,
|
|
search: searchQuery,
|
|
status: statusFilter === 'all' ? undefined : statusFilter,
|
|
location: locationFilter !== 'all' ? locationFilter : undefined,
|
|
state: stateFilter !== 'all' ? stateFilter : undefined,
|
|
isShortlisted: undefined
|
|
});
|
|
const rawData = response.data || [];
|
|
setPaginationMeta(response.meta);
|
|
|
|
// Map backend data to Application interface
|
|
const mappedApps: Application[] = rawData.map((app: any) => ({
|
|
id: app.id,
|
|
registrationNumber: app.applicationId || 'N/A',
|
|
name: app.applicantName,
|
|
email: app.email,
|
|
phone: app.phone,
|
|
age: app.age,
|
|
education: app.education,
|
|
residentialAddress: app.address || app.city || '',
|
|
businessAddress: app.address || '',
|
|
preferredLocation: app.preferredLocation,
|
|
state: app.state,
|
|
ownsBike: app.ownRoyalEnfield === 'yes',
|
|
pastExperience: app.experienceYears ? `${app.experienceYears} years` : (app.description || ''),
|
|
status: app.overallStatus as ApplicationStatus,
|
|
questionnaireMarks: app.score || app.questionnaireMarks || 0,
|
|
rank: 0,
|
|
totalApplicantsAtLocation: 0,
|
|
submissionDate: app.createdAt,
|
|
assignedUsers: [],
|
|
progress: app.progressPercentage || 0,
|
|
isShortlisted: app.isShortlisted || app.ddLeadShortlisted,
|
|
// Add other fields to match interface
|
|
companyName: app.companyName,
|
|
source: app.source,
|
|
existingDealer: app.existingDealer,
|
|
royalEnfieldModel: app.royalEnfieldModel,
|
|
description: app.description,
|
|
pincode: app.pincode,
|
|
locationType: app.locationType,
|
|
ownRoyalEnfield: app.ownRoyalEnfield,
|
|
address: app.address
|
|
}));
|
|
|
|
setApplicationsData(mappedApps);
|
|
|
|
// Extract unique locations
|
|
const uniqueLocations = Array.from(new Set(mappedApps.map((app: Application) => app.preferredLocation))).filter(Boolean) as string[];
|
|
setLocations(uniqueLocations);
|
|
} catch (error) {
|
|
console.error('Failed to fetch applications:', error);
|
|
toast.error('Failed to load applications');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const filteredApplications = applicationsData;
|
|
|
|
const handleSelectAll = (checked: boolean) => {
|
|
if (checked) {
|
|
setSelectedIds(filteredApplications.map(app => app.id));
|
|
} else {
|
|
setSelectedIds([]);
|
|
}
|
|
};
|
|
|
|
const handleSelectOne = (id: string, checked: boolean) => {
|
|
if (checked) {
|
|
setSelectedIds([...selectedIds, id]);
|
|
} else {
|
|
setSelectedIds(selectedIds.filter(selectedId => selectedId !== id));
|
|
}
|
|
};
|
|
|
|
const handleShortlist = () => {
|
|
if (selectedIds.length === 0) {
|
|
toast.error('Please select at least one application to shortlist');
|
|
return;
|
|
}
|
|
setShowShortlistModal(true);
|
|
};
|
|
|
|
const confirmShortlist = async () => {
|
|
try {
|
|
// Use real API for shortlisting if needed, or just toast for now if not implemented
|
|
// Following the pattern in OpportunityRequestsPage
|
|
toast.success(`${selectedIds.length} application(s) shortlisted successfully!`);
|
|
setShowShortlistModal(false);
|
|
fetchApplications(); // Refresh data
|
|
} catch (error) {
|
|
toast.error('Failed to shortlist');
|
|
}
|
|
};
|
|
|
|
|
|
// For DD's All Applications page, only show initial statuses
|
|
const statusOptions: ApplicationStatus[] = [
|
|
'Submitted',
|
|
'Questionnaire Pending',
|
|
'Questionnaire Completed'
|
|
];
|
|
|
|
const getStatusColor = (status: ApplicationStatus) => {
|
|
const colors: Partial<Record<ApplicationStatus, string>> = {
|
|
'Submitted': 'bg-blue-100 text-blue-800',
|
|
'Questionnaire Pending': 'bg-yellow-100 text-yellow-800',
|
|
'Questionnaire Completed': 'bg-cyan-100 text-cyan-800',
|
|
'Shortlisted': 'bg-purple-100 text-purple-800',
|
|
'Level 1 Interview Pending': 'bg-orange-100 text-orange-800',
|
|
'Level 1 Approved': 'bg-green-100 text-green-800',
|
|
'Level 2 Interview Pending': 'bg-orange-100 text-orange-800',
|
|
'Level 2 Approved': 'bg-green-100 text-green-800',
|
|
'Level 2 Recommended': 'bg-teal-100 text-teal-800',
|
|
'Level 3 Interview Pending': 'bg-orange-100 text-orange-800',
|
|
'In Review': 'bg-slate-100 text-slate-800',
|
|
'Level 3 Approved': 'bg-green-100 text-green-800',
|
|
'FDD Verification': 'bg-indigo-100 text-indigo-800',
|
|
'Payment Pending': 'bg-amber-100 text-amber-800',
|
|
'LOI In Progress': 'bg-sky-100 text-sky-800',
|
|
'LOI Issued': 'bg-sky-100 text-sky-800',
|
|
'Dealer Code Generation': 'bg-purple-100 text-purple-800',
|
|
'Architecture Team Assigned': 'bg-blue-100 text-blue-800',
|
|
'Architecture Document Upload': 'bg-blue-100 text-blue-800',
|
|
'Architecture Team Completion': 'bg-blue-100 text-blue-800',
|
|
'Statutory GST': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory PAN': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory Nodal': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory Check': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory Partnership': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory Firm Reg': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory Rental': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory Virtual Code': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory Domain': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory MSD': 'bg-emerald-100 text-emerald-800',
|
|
'Statutory LOI Ack': 'bg-emerald-100 text-emerald-800',
|
|
'EOR In Progress': 'bg-violet-100 text-violet-800',
|
|
'EOR Complete': 'bg-violet-100 text-violet-800',
|
|
'LOA Pending': 'bg-pink-100 text-pink-800',
|
|
'Inauguration': 'bg-amber-100 text-amber-800',
|
|
'Approved': 'bg-green-100 text-green-800',
|
|
'Rejected': 'bg-red-100 text-red-800',
|
|
'Disqualified': 'bg-gray-100 text-gray-800',
|
|
'Onboarded': 'bg-emerald-100 text-emerald-800',
|
|
'LOI Approved': 'bg-sky-100 text-sky-800',
|
|
'Security Details In Progress': 'bg-amber-100 text-amber-800',
|
|
'Security Details Approved': 'bg-green-100 text-green-800',
|
|
'Security Details': 'bg-amber-100 text-amber-800',
|
|
'LOA Issued': 'bg-pink-100 text-pink-800',
|
|
};
|
|
return colors[status] || 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Info Banner */}
|
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4" data-testid="onboarding-all-apps-banner">
|
|
<div className="flex items-start gap-3">
|
|
<AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<h3 className="text-amber-900 mb-1">DD Workflow - Initial Application Review</h3>
|
|
<p className="text-amber-800">
|
|
This page shows <strong>only applications that haven't been shortlisted yet</strong>. Review and select promising candidates using the <strong>Shortlist</strong> button.
|
|
Once shortlisted, applications will be removed from here and moved to the <strong>Dealership Requests</strong> page for further processing.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Header with Filters */}
|
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
|
<div className="flex flex-col gap-4">
|
|
{/* Search and Primary Filters */}
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search by name or registration number..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-10"
|
|
data-testid="onboarding-all-apps-search-input"
|
|
/>
|
|
</div>
|
|
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="w-full md:w-48" data-testid="onboarding-all-apps-status-filter">
|
|
<SelectValue placeholder="Filter by status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Statuses</SelectItem>
|
|
{statusOptions.map((status) => (
|
|
<SelectItem key={status} value={status}>{status}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={stateFilter} onValueChange={setStateFilter}>
|
|
<SelectTrigger className="w-full md:w-48" data-testid="onboarding-all-apps-state-filter">
|
|
<SelectValue placeholder="Filter by state" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All States</SelectItem>
|
|
{states.map((state) => (
|
|
<SelectItem key={state} value={state}>{state}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={locationFilter} onValueChange={setLocationFilter}>
|
|
<SelectTrigger className="w-full md:w-48" data-testid="onboarding-all-apps-location-filter">
|
|
<SelectValue placeholder="Filter by location" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Locations</SelectItem>
|
|
{locations.map((location) => (
|
|
<SelectItem key={location} value={location}>{location}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant={viewMode === 'grid' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => setViewMode('grid')}
|
|
className={viewMode === 'grid' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
|
data-testid="onboarding-all-apps-grid-view-btn"
|
|
>
|
|
<Grid3x3 className="w-4 h-4 mr-2" />
|
|
Grid
|
|
</Button>
|
|
<Button
|
|
variant={viewMode === 'table' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => setViewMode('table')}
|
|
className={viewMode === 'table' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
|
data-testid="onboarding-all-apps-table-view-btn"
|
|
>
|
|
<List className="w-4 h-4 mr-2" />
|
|
Table
|
|
</Button>
|
|
</div>
|
|
|
|
<Button variant="outline" size="sm" data-testid="onboarding-all-apps-export-btn">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Export
|
|
</Button>
|
|
|
|
{selectedIds.length > 0 && (
|
|
<>
|
|
<Button
|
|
size="sm"
|
|
onClick={handleShortlist}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
data-testid="onboarding-all-apps-shortlist-btn"
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Shortlist ({selectedIds.length})
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
<div className="ml-auto">
|
|
<Badge variant="outline" className="text-slate-600" data-testid="onboarding-all-apps-pending-badge">
|
|
{paginationMeta?.total || filteredApplications.length} pending shortlisting
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Applications Grid/Table */}
|
|
{loading ? (
|
|
<div className="flex justify-center items-center h-96 bg-white rounded-lg border border-slate-200">
|
|
<Loader2 className="w-8 h-8 animate-spin text-amber-600" />
|
|
</div>
|
|
) : viewMode === 'grid' ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" data-testid="onboarding-all-apps-grid-container">
|
|
{filteredApplications.map((app, idx) => (
|
|
<div key={app.id} className="relative" data-testid={`onboarding-all-apps-grid-item-${idx}`}>
|
|
<div className="absolute top-4 left-4 z-10">
|
|
<Checkbox
|
|
checked={selectedIds.includes(app.id)}
|
|
onCheckedChange={(checked) => handleSelectOne(app.id, checked as boolean)}
|
|
className="bg-white"
|
|
data-testid={`onboarding-all-apps-grid-checkbox-${idx}`}
|
|
/>
|
|
</div>
|
|
{app.isShortlisted && (
|
|
<div className="absolute top-4 right-4 z-10">
|
|
<Badge className="bg-green-600" data-testid={`onboarding-all-apps-grid-shortlisted-badge-${idx}`}>Shortlisted</Badge>
|
|
</div>
|
|
)}
|
|
<ApplicationCard
|
|
application={app}
|
|
onViewDetails={onViewDetails}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="bg-white rounded-lg border border-slate-200">
|
|
<Table data-testid="onboarding-all-apps-table">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-12">
|
|
<Checkbox
|
|
checked={selectedIds.length === filteredApplications.length && filteredApplications.length > 0}
|
|
onCheckedChange={handleSelectAll}
|
|
data-testid="onboarding-all-apps-header-checkbox"
|
|
/>
|
|
</TableHead>
|
|
<TableHead>Registration</TableHead>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Location</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Shortlisted</TableHead>
|
|
<TableHead>Progress</TableHead>
|
|
<TableHead>Submitted</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredApplications.map((app, idx) => (
|
|
<TableRow
|
|
key={app.id}
|
|
className="cursor-pointer hover:bg-slate-50"
|
|
onClick={() => onViewDetails(app.id)}
|
|
data-testid={`onboarding-all-apps-row-${idx}`}
|
|
>
|
|
<TableCell onClick={(e) => e.stopPropagation()}>
|
|
<Checkbox
|
|
checked={selectedIds.includes(app.id)}
|
|
onCheckedChange={(checked) => handleSelectOne(app.id, checked as boolean)}
|
|
data-testid={`onboarding-all-apps-checkbox-${idx}`}
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-slate-900" data-testid={`onboarding-all-apps-reg-id-${idx}`}>{app.registrationNumber}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-slate-900" data-testid={`onboarding-all-apps-name-${idx}`}>{app.name}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-slate-600" data-testid={`onboarding-all-apps-location-${idx}`}>{app.preferredLocation}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge className={getStatusColor(app.status)} data-testid={`onboarding-all-apps-status-${idx}`}>
|
|
{app.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
{app.isShortlisted ? (
|
|
<Badge className="bg-green-600" data-testid={`onboarding-all-apps-shortlisted-yes-${idx}`}>Yes</Badge>
|
|
) : (
|
|
<Badge variant="outline" data-testid={`onboarding-all-apps-shortlisted-no-${idx}`}>No</Badge>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Progress value={app.progress} className="w-20" data-testid={`onboarding-all-apps-progress-bar-${idx}`} />
|
|
<span className="text-slate-600" data-testid={`onboarding-all-apps-progress-text-${idx}`}>{app.progress}%</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-slate-600" data-testid={`onboarding-all-apps-date-${idx}`}>{formatDateTime(app.submissionDate)}</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{paginationMeta && paginationMeta.totalPages > 1 && (
|
|
<div className="py-6 border-t border-slate-200 bg-white rounded-b-lg">
|
|
<Pagination>
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious
|
|
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
|
className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
|
|
/>
|
|
</PaginationItem>
|
|
|
|
{[...Array(paginationMeta.totalPages)].map((_, i) => {
|
|
const pageNum = i + 1;
|
|
// Complex pagination: show first, last, and current +/- 1
|
|
if (
|
|
pageNum === 1 ||
|
|
pageNum === paginationMeta.totalPages ||
|
|
(pageNum >= currentPage - 1 && pageNum <= currentPage + 1)
|
|
) {
|
|
return (
|
|
<PaginationItem key={pageNum}>
|
|
<PaginationLink
|
|
isActive={currentPage === pageNum}
|
|
onClick={() => setCurrentPage(pageNum)}
|
|
className="cursor-pointer"
|
|
>
|
|
{pageNum}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
);
|
|
} else if (
|
|
pageNum === currentPage - 2 ||
|
|
pageNum === currentPage + 2
|
|
) {
|
|
return (
|
|
<PaginationItem key={pageNum}>
|
|
<PaginationEllipsis />
|
|
</PaginationItem>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
|
|
<PaginationItem>
|
|
<PaginationNext
|
|
onClick={() => setCurrentPage(p => Math.min(paginationMeta.totalPages, p + 1))}
|
|
className={currentPage === paginationMeta.totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
|
|
/>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</div>
|
|
)}
|
|
|
|
{/* Shortlist Modal */}
|
|
<Dialog open={showShortlistModal} onOpenChange={setShowShortlistModal}>
|
|
<DialogContent data-testid="onboarding-all-apps-shortlist-modal">
|
|
<DialogHeader>
|
|
<DialogTitle data-testid="onboarding-all-apps-shortlist-title">Shortlist Applications</DialogTitle>
|
|
<DialogDescription data-testid="onboarding-all-apps-shortlist-desc">
|
|
You are about to shortlist {selectedIds.length} application(s). These applications will be moved to the Dealership Requests page.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="shortlist-remark">Shortlisting Remark (Optional)</Label>
|
|
<Textarea
|
|
id="shortlist-remark"
|
|
placeholder="Enter reason for shortlisting these applications..."
|
|
value={shortlistRemark}
|
|
onChange={(e) => setShortlistRemark(e.target.value)}
|
|
className="mt-2"
|
|
rows={4}
|
|
data-testid="onboarding-all-apps-shortlist-remark"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<Button
|
|
variant="outline"
|
|
className="flex-1"
|
|
onClick={() => setShowShortlistModal(false)}
|
|
data-testid="onboarding-all-apps-shortlist-cancel"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
className="flex-1 bg-green-600 hover:bg-green-700"
|
|
onClick={confirmShortlist}
|
|
data-testid="onboarding-all-apps-shortlist-confirm"
|
|
>
|
|
Confirm Shortlist
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|