467 lines
20 KiB
TypeScript
467 lines
20 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Calendar, Filter, Search, FileText, AlertCircle, CheckCircle, ArrowRight, SortAsc, SortDesc, Flame, Target, RefreshCw, Settings2, X, XCircle } from 'lucide-react';
|
|
import workflowApi from '@/services/workflowApi';
|
|
|
|
interface Request {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
status: 'approved' | 'rejected';
|
|
priority: 'express' | 'standard';
|
|
initiator: { name: string; avatar: string };
|
|
createdAt: string;
|
|
dueDate?: string;
|
|
reason?: string;
|
|
department?: string;
|
|
}
|
|
|
|
interface ClosedRequestsProps {
|
|
onViewRequest?: (requestId: string, requestTitle?: string) => void;
|
|
}
|
|
|
|
// Removed static data; will load from API
|
|
|
|
// Utility functions
|
|
const getPriorityConfig = (priority: string) => {
|
|
switch (priority) {
|
|
case 'express':
|
|
return {
|
|
color: 'bg-red-100 text-red-800 border-red-200',
|
|
icon: Flame,
|
|
iconColor: 'text-red-600'
|
|
};
|
|
case 'standard':
|
|
return {
|
|
color: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
icon: Target,
|
|
iconColor: 'text-blue-600'
|
|
};
|
|
default:
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
icon: Target,
|
|
iconColor: 'text-gray-600'
|
|
};
|
|
}
|
|
};
|
|
|
|
const getStatusConfig = (status: string) => {
|
|
switch (status) {
|
|
case 'approved':
|
|
return {
|
|
color: 'bg-green-100 text-green-800 border-green-200',
|
|
icon: CheckCircle,
|
|
iconColor: 'text-green-600'
|
|
};
|
|
case 'rejected':
|
|
return {
|
|
color: 'bg-red-100 text-red-800 border-red-200',
|
|
icon: AlertCircle,
|
|
iconColor: 'text-red-600'
|
|
};
|
|
default:
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
icon: AlertCircle,
|
|
iconColor: 'text-gray-600'
|
|
};
|
|
}
|
|
};
|
|
|
|
export function ClosedRequests({ onViewRequest }: ClosedRequestsProps) {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [priorityFilter, setPriorityFilter] = useState('all');
|
|
const [statusFilter, setStatusFilter] = useState('all');
|
|
const [sortBy, setSortBy] = useState<'created' | 'due' | 'priority'>('due');
|
|
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
|
|
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
|
|
const [items, setItems] = useState<Request[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const result = await workflowApi.listClosedByMe({ page: 1, limit: 50 });
|
|
const data = Array.isArray((result as any)?.data)
|
|
? (result as any).data
|
|
: Array.isArray((result as any)?.data?.data)
|
|
? (result as any).data.data
|
|
: Array.isArray(result as any)
|
|
? (result as any)
|
|
: [];
|
|
if (!mounted) return;
|
|
const mapped: Request[] = data
|
|
.filter((r: any) => ['APPROVED', 'REJECTED'].includes((r.status || '').toString()))
|
|
.map((r: any) => ({
|
|
id: r.requestNumber || r.request_number || r.requestId, // Use requestNumber as primary identifier
|
|
requestId: r.requestId, // Keep requestId for reference
|
|
displayId: r.requestNumber || r.request_number || r.requestId,
|
|
title: r.title,
|
|
description: r.description,
|
|
status: (r.status || '').toString().toLowerCase(),
|
|
priority: (r.priority || '').toString().toLowerCase(),
|
|
initiator: { name: r.initiator?.displayName || r.initiator?.email || '—', avatar: (r.initiator?.displayName || 'NA').split(' ').map((s: string) => s[0]).join('').slice(0,2).toUpperCase() },
|
|
createdAt: r.submittedAt || '—',
|
|
dueDate: undefined,
|
|
reason: r.conclusionRemark,
|
|
department: r.department
|
|
}));
|
|
setItems(mapped);
|
|
} finally {
|
|
if (mounted) setLoading(false);
|
|
}
|
|
})();
|
|
return () => { mounted = false; };
|
|
}, []);
|
|
|
|
const filteredAndSortedRequests = useMemo(() => {
|
|
let filtered = items.filter(request => {
|
|
const matchesSearch =
|
|
request.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
request.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
request.initiator.name.toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
const matchesPriority = priorityFilter === 'all' || request.priority === priorityFilter;
|
|
const matchesStatus = statusFilter === 'all' || request.status === statusFilter;
|
|
|
|
return matchesSearch && matchesPriority && matchesStatus;
|
|
});
|
|
|
|
// Sort requests
|
|
filtered.sort((a, b) => {
|
|
let aValue: any, bValue: any;
|
|
|
|
switch (sortBy) {
|
|
case 'created':
|
|
aValue = new Date(a.createdAt);
|
|
bValue = new Date(b.createdAt);
|
|
break;
|
|
case 'due':
|
|
aValue = new Date(a.dueDate);
|
|
bValue = new Date(b.dueDate);
|
|
break;
|
|
case 'priority':
|
|
const priorityOrder = { express: 2, standard: 1 };
|
|
aValue = priorityOrder[a.priority as keyof typeof priorityOrder];
|
|
bValue = priorityOrder[b.priority as keyof typeof priorityOrder];
|
|
break;
|
|
default:
|
|
return 0;
|
|
}
|
|
|
|
if (sortOrder === 'asc') {
|
|
return aValue > bValue ? 1 : -1;
|
|
} else {
|
|
return aValue < bValue ? 1 : -1;
|
|
}
|
|
});
|
|
|
|
return filtered;
|
|
}, [items, searchTerm, priorityFilter, statusFilter, sortBy, sortOrder]);
|
|
|
|
const clearFilters = () => {
|
|
setSearchTerm('');
|
|
setPriorityFilter('all');
|
|
setStatusFilter('all');
|
|
};
|
|
|
|
const activeFiltersCount = [
|
|
searchTerm,
|
|
priorityFilter !== 'all' ? priorityFilter : null,
|
|
statusFilter !== 'all' ? statusFilter : null
|
|
].filter(Boolean).length;
|
|
|
|
return (
|
|
<div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto">
|
|
{/* Enhanced Header */}
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 sm:gap-4 md:gap-6">
|
|
<div className="space-y-1 sm:space-y-2">
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center shadow-lg">
|
|
<FileText className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">Closed Requests</h1>
|
|
<p className="text-sm sm:text-base text-gray-600">Review completed and archived requests</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<Badge variant="secondary" className="text-xs sm:text-sm md:text-base px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 bg-slate-100 text-slate-800 font-semibold">
|
|
{loading ? 'Loading…' : `${filteredAndSortedRequests.length} closed`}
|
|
<span className="hidden sm:inline ml-1">requests</span>
|
|
</Badge>
|
|
<Button variant="outline" size="sm" className="gap-1 sm:gap-2 h-8 sm:h-9">
|
|
<RefreshCw className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
|
<span className="hidden sm:inline">Refresh</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced Filters Section */}
|
|
<Card className="shadow-lg border-0">
|
|
<CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
|
|
<Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
|
|
<CardDescription className="text-xs sm:text-sm">
|
|
{activeFiltersCount > 0 && (
|
|
<span className="text-blue-600 font-medium">
|
|
{activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
|
|
</span>
|
|
)}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 sm:gap-2">
|
|
{activeFiltersCount > 0 && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={clearFilters}
|
|
className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
|
|
>
|
|
<X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
|
|
<span className="text-xs sm:text-sm">Clear</span>
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
|
|
className="gap-1 sm:gap-2 h-8 sm:h-9 px-2 sm:px-3"
|
|
>
|
|
<Settings2 className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
|
<span className="text-xs sm:text-sm hidden md:inline">{showAdvancedFilters ? 'Basic' : 'Advanced'}</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
|
|
{/* Primary filters */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
|
<Input
|
|
placeholder="Search requests, IDs..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<Select value={priorityFilter} onValueChange={setPriorityFilter}>
|
|
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white">
|
|
<SelectValue placeholder="All Priorities" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Priorities</SelectItem>
|
|
<SelectItem value="express">
|
|
<div className="flex items-center gap-2">
|
|
<Flame className="w-4 h-4 text-orange-600" />
|
|
<span>Express</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="standard">
|
|
<div className="flex items-center gap-2">
|
|
<Target className="w-4 h-4 text-blue-600" />
|
|
<span>Standard</span>
|
|
</div>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white">
|
|
<SelectValue placeholder="All Statuses" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Statuses</SelectItem>
|
|
<SelectItem value="approved">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
<span>Approved</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="rejected">
|
|
<div className="flex items-center gap-2">
|
|
<XCircle className="w-4 h-4 text-red-600" />
|
|
<span>Rejected</span>
|
|
</div>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<div className="flex gap-2">
|
|
<Select value={sortBy} onValueChange={(value: any) => setSortBy(value)}>
|
|
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white">
|
|
<SelectValue placeholder="Sort by" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="due">Due Date</SelectItem>
|
|
<SelectItem value="created">Date Created</SelectItem>
|
|
<SelectItem value="priority">Priority</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
|
|
className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
|
|
>
|
|
{sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Requests List */}
|
|
<div className="space-y-4">
|
|
{filteredAndSortedRequests.map((request) => {
|
|
const priorityConfig = getPriorityConfig(request.priority);
|
|
const statusConfig = getStatusConfig(request.status);
|
|
|
|
return (
|
|
<Card
|
|
key={request.id}
|
|
className="group hover:shadow-xl transition-all duration-300 cursor-pointer border-0 shadow-md hover:scale-[1.01]"
|
|
onClick={() => onViewRequest?.(request.id, request.title)}
|
|
>
|
|
<CardContent className="p-3 sm:p-6">
|
|
<div className="flex flex-col sm:flex-row items-start gap-3 sm:gap-6">
|
|
{/* Priority Indicator */}
|
|
<div className="flex sm:flex-col items-center gap-2 pt-1 w-full sm:w-auto">
|
|
<div className={`p-2 sm:p-3 rounded-xl ${priorityConfig.color} border flex-shrink-0`}>
|
|
<priorityConfig.icon className={`w-4 h-4 sm:w-5 sm:h-5 ${priorityConfig.iconColor}`} />
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className={`text-xs font-medium ${priorityConfig.color} capitalize flex-shrink-0`}
|
|
>
|
|
{request.priority}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 min-w-0 space-y-3 sm:space-y-4 w-full">
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between gap-2 sm:gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex flex-wrap items-center gap-1.5 sm:gap-3 mb-2">
|
|
<h3 className="text-sm sm:text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
|
|
{(request as any).displayId || request.id}
|
|
</h3>
|
|
<Badge
|
|
variant="outline"
|
|
className={`${statusConfig.color} border font-medium text-xs shrink-0`}
|
|
>
|
|
<statusConfig.icon className="w-3 h-3 mr-1" />
|
|
<span className="capitalize">{request.status}</span>
|
|
</Badge>
|
|
{request.department && (
|
|
<Badge variant="secondary" className="bg-gray-100 text-gray-700 text-xs hidden sm:inline-flex shrink-0">
|
|
{request.department}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<h4 className="text-base sm:text-xl font-bold text-gray-900 mb-2 line-clamp-2">
|
|
{request.title}
|
|
</h4>
|
|
<p className="text-xs sm:text-sm text-gray-600 line-clamp-2 leading-relaxed">
|
|
{request.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-end gap-2 flex-shrink-0">
|
|
<ArrowRight className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status Info */}
|
|
<div className="flex items-center gap-2 sm:gap-4 p-3 sm:p-4 bg-gray-50 rounded-lg">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-green-500 flex-shrink-0" />
|
|
<span className="text-xs sm:text-sm text-gray-700 font-medium truncate">
|
|
{request.reason}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Participants & Metadata */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-6">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<Avatar className="h-7 w-7 sm:h-8 sm:w-8 ring-2 ring-white shadow-sm flex-shrink-0">
|
|
<AvatarFallback className="bg-slate-700 text-white text-xs sm:text-sm font-semibold">
|
|
{request.initiator.avatar}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="min-w-0">
|
|
<p className="text-xs sm:text-sm font-medium text-gray-900 truncate">{request.initiator.name}</p>
|
|
<p className="text-xs text-gray-500">Initiator</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-left sm:text-right">
|
|
<div className="flex flex-col gap-1 text-xs text-gray-500">
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="w-3 h-3 flex-shrink-0" />
|
|
<span className="truncate">Created {request.createdAt}</span>
|
|
</span>
|
|
<span className="truncate">Closed {request.dueDate}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Empty State */}
|
|
{filteredAndSortedRequests.length === 0 && (
|
|
<Card className="shadow-lg border-0">
|
|
<CardContent className="flex flex-col items-center justify-center py-16">
|
|
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<FileText className="h-8 w-8 text-gray-400" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">No requests found</h3>
|
|
<p className="text-gray-600 text-center max-w-md">
|
|
{searchTerm || activeFiltersCount > 0
|
|
? 'Try adjusting your filters or search terms to see more results.'
|
|
: 'No closed requests available at the moment.'
|
|
}
|
|
</p>
|
|
{activeFiltersCount > 0 && (
|
|
<Button
|
|
variant="outline"
|
|
className="mt-4"
|
|
onClick={clearFilters}
|
|
>
|
|
Clear all filters
|
|
</Button>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|