661 lines
27 KiB
TypeScript
661 lines
27 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
|
|
import { Badge } from './ui/badge';
|
|
import { Button } from './ui/button';
|
|
import { toast } from 'sonner@2.0.3';
|
|
import { Progress } from './ui/progress';
|
|
import { Avatar, AvatarFallback } from './ui/avatar';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
|
|
import { CUSTOM_REQUEST_DATABASE } from '../utils/customRequestDatabase';
|
|
import {
|
|
ArrowLeft,
|
|
Clock,
|
|
User,
|
|
FileText,
|
|
MessageSquare,
|
|
Users,
|
|
CheckCircle,
|
|
XCircle,
|
|
Download,
|
|
Eye,
|
|
Flame,
|
|
Target,
|
|
TrendingUp,
|
|
RefreshCw,
|
|
Activity,
|
|
Mail,
|
|
Phone,
|
|
Upload,
|
|
UserPlus,
|
|
Edit3,
|
|
ClipboardList
|
|
} from 'lucide-react';
|
|
|
|
interface RequestDetailProps {
|
|
requestId: string;
|
|
onBack?: () => void;
|
|
onOpenModal?: (modal: string) => void;
|
|
dynamicRequests?: any[];
|
|
}
|
|
|
|
// Utility functions
|
|
const getPriorityConfig = (priority: string) => {
|
|
switch (priority) {
|
|
case 'express':
|
|
case 'urgent':
|
|
return {
|
|
color: 'bg-red-100 text-red-800 border-red-200',
|
|
label: 'urgent priority'
|
|
};
|
|
case 'standard':
|
|
return {
|
|
color: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
label: 'standard priority'
|
|
};
|
|
default:
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
label: 'normal priority'
|
|
};
|
|
}
|
|
};
|
|
|
|
const getStatusConfig = (status: string) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return {
|
|
color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
|
label: 'pending'
|
|
};
|
|
case 'in-review':
|
|
return {
|
|
color: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
label: 'in-review'
|
|
};
|
|
case 'approved':
|
|
return {
|
|
color: 'bg-green-100 text-green-800 border-green-200',
|
|
label: 'approved'
|
|
};
|
|
case 'rejected':
|
|
return {
|
|
color: 'bg-red-100 text-red-800 border-red-200',
|
|
label: 'rejected'
|
|
};
|
|
default:
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
label: status
|
|
};
|
|
}
|
|
};
|
|
|
|
const getSLAConfig = (progress: number) => {
|
|
if (progress >= 80) {
|
|
return {
|
|
bg: 'bg-red-50',
|
|
color: 'bg-red-500',
|
|
textColor: 'text-red-700'
|
|
};
|
|
} else if (progress >= 60) {
|
|
return {
|
|
bg: 'bg-orange-50',
|
|
color: 'bg-orange-500',
|
|
textColor: 'text-orange-700'
|
|
};
|
|
} else {
|
|
return {
|
|
bg: 'bg-green-50',
|
|
color: 'bg-green-500',
|
|
textColor: 'text-green-700'
|
|
};
|
|
}
|
|
};
|
|
|
|
const getStepIcon = (status: string) => {
|
|
switch (status) {
|
|
case 'approved':
|
|
return <CheckCircle className="w-5 h-5 text-green-600" />;
|
|
case 'rejected':
|
|
return <XCircle className="w-5 h-5 text-red-600" />;
|
|
case 'pending':
|
|
case 'in-review':
|
|
return <Clock className="w-5 h-5 text-blue-600" />;
|
|
default:
|
|
return <Clock className="w-5 h-5 text-gray-400" />;
|
|
}
|
|
};
|
|
|
|
const getActionTypeIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'approval':
|
|
case 'approved':
|
|
return <CheckCircle className="w-5 h-5 text-green-600" />;
|
|
case 'rejection':
|
|
case 'rejected':
|
|
return <XCircle className="w-5 h-5 text-red-600" />;
|
|
case 'comment':
|
|
return <MessageSquare className="w-5 h-5 text-blue-600" />;
|
|
case 'status_change':
|
|
case 'updated':
|
|
return <RefreshCw className="w-5 h-5 text-orange-600" />;
|
|
case 'assignment':
|
|
return <UserPlus className="w-5 h-5 text-purple-600" />;
|
|
case 'created':
|
|
return <FileText className="w-5 h-5 text-blue-600" />;
|
|
case 'reminder':
|
|
return <Clock className="w-5 h-5 text-yellow-600" />;
|
|
default:
|
|
return <Activity className="w-5 h-5 text-gray-600" />;
|
|
}
|
|
};
|
|
|
|
export function RequestDetail({
|
|
requestId,
|
|
onBack,
|
|
onOpenModal,
|
|
dynamicRequests = []
|
|
}: RequestDetailProps) {
|
|
const [activeTab, setActiveTab] = useState('overview');
|
|
|
|
// Get request from custom request database or dynamic requests
|
|
const request = useMemo(() => {
|
|
// First check static database
|
|
const staticRequest = CUSTOM_REQUEST_DATABASE[requestId];
|
|
if (staticRequest) return staticRequest;
|
|
|
|
// Then check dynamic requests
|
|
const dynamicRequest = dynamicRequests.find((req: any) => req.id === requestId);
|
|
if (dynamicRequest) return dynamicRequest;
|
|
|
|
return null;
|
|
}, [requestId, dynamicRequests]);
|
|
|
|
if (!request) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen">
|
|
<div className="text-center">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">Request Not Found</h2>
|
|
<p className="text-gray-600 mb-4">The custom request you're looking for doesn't exist.</p>
|
|
<Button onClick={onBack}>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Go Back
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const priorityConfig = getPriorityConfig(request.priority);
|
|
const statusConfig = getStatusConfig(request.status);
|
|
const slaConfig = getSLAConfig(request.slaProgress);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<div className="max-w-7xl mx-auto p-6">
|
|
{/* Header Section */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
|
|
{/* Top Header */}
|
|
<div className="p-6 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onBack}
|
|
className="rounded-lg"
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
|
|
<FileText className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="text-lg font-bold text-gray-900">{request.id}</h1>
|
|
<Badge className={`${priorityConfig.color} rounded-full px-3`} variant="outline">
|
|
{priorityConfig.label}
|
|
</Badge>
|
|
<Badge className={`${statusConfig.color} rounded-full px-3`} variant="outline">
|
|
{statusConfig.label}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<RefreshCw className="w-4 h-4" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-3 ml-14">
|
|
<h2 className="text-xl font-semibold text-gray-900">{request.title}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SLA Progress */}
|
|
<div className={`${slaConfig.bg} px-6 py-4`}>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-2">
|
|
<Clock className={`h-4 w-4 ${slaConfig.textColor}`} />
|
|
<span className="text-sm font-medium text-gray-900">SLA Progress</span>
|
|
</div>
|
|
<span className={`text-sm font-semibold ${slaConfig.textColor}`}>
|
|
{request.slaRemaining}
|
|
</span>
|
|
</div>
|
|
<Progress value={request.slaProgress} className="h-2 mb-2" />
|
|
<p className="text-xs text-gray-600">
|
|
Due: {request.slaEndDate} • {request.slaProgress}% elapsed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
|
<TabsList className="bg-white border border-gray-200 shadow-sm mb-6">
|
|
<TabsTrigger value="overview" className="gap-2">
|
|
<ClipboardList className="w-4 h-4" />
|
|
Overview
|
|
</TabsTrigger>
|
|
<TabsTrigger value="workflow" className="gap-2">
|
|
<TrendingUp className="w-4 h-4" />
|
|
Workflow
|
|
</TabsTrigger>
|
|
<TabsTrigger value="documents" className="gap-2">
|
|
<FileText className="w-4 h-4" />
|
|
Documents
|
|
</TabsTrigger>
|
|
<TabsTrigger value="activity" className="gap-2">
|
|
<Activity className="w-4 h-4" />
|
|
Activity
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Overview Tab */}
|
|
<TabsContent value="overview">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Left Column - Main Content (2/3 width) */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Request Initiator */}
|
|
<Card>
|
|
<CardHeader className="pb-4">
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<User className="w-5 h-5 text-blue-600" />
|
|
Request Initiator
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-start gap-4">
|
|
<Avatar className="h-12 w-12 ring-2 ring-white shadow-sm">
|
|
<AvatarFallback className="bg-gray-700 text-white font-semibold">
|
|
{request.initiator?.avatar || 'U'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900">{request.initiator?.name || 'N/A'}</h3>
|
|
<p className="text-sm text-gray-600">{request.initiator?.role || 'N/A'}</p>
|
|
<p className="text-sm text-gray-500">{request.initiator?.department || 'N/A'}</p>
|
|
|
|
<div className="mt-3 space-y-2">
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Mail className="w-4 h-4" />
|
|
<span>{request.initiator?.email || 'N/A'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Phone className="w-4 h-4" />
|
|
<span>{request.initiator?.phone || 'N/A'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Request Details */}
|
|
<Card>
|
|
<CardHeader className="pb-4">
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<FileText className="w-5 h-5 text-blue-600" />
|
|
Request Details
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700 block mb-2">Description</label>
|
|
<div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
|
<p className="text-sm text-gray-700 whitespace-pre-line leading-relaxed">
|
|
{request.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Details */}
|
|
{(request.category || request.subcategory) && (
|
|
<div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-200">
|
|
{request.category && (
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Category</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{request.category}</p>
|
|
</div>
|
|
)}
|
|
{request.subcategory && (
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Subcategory</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{request.subcategory}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{request.amount && (
|
|
<div className="pt-4 border-t border-gray-200">
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Amount</label>
|
|
<p className="text-lg font-bold text-gray-900 mt-1">{request.amount}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-200">
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Created</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{request.createdAt}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Last Updated</label>
|
|
<p className="text-sm text-gray-900 font-medium mt-1">{request.updatedAt}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right Column - Quick Actions Sidebar (1/3 width) */}
|
|
<div className="space-y-6">
|
|
{/* Quick Actions */}
|
|
<Card>
|
|
<CardHeader className="pb-4">
|
|
<CardTitle className="text-base">Quick Actions</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2 bg-[#1a472a] text-white hover:bg-[#152e1f] hover:text-white border-0"
|
|
onClick={() => onOpenModal?.('work-note')}
|
|
>
|
|
<MessageSquare className="w-4 h-4" />
|
|
Add Work Note
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2 border-gray-300 hover:bg-gray-50"
|
|
onClick={() => onOpenModal?.('add-approver')}
|
|
>
|
|
<UserPlus className="w-4 h-4" />
|
|
Add Approver
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2 border-gray-300 hover:bg-gray-50"
|
|
onClick={() => onOpenModal?.('add-spectator')}
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
Add Spectator
|
|
</Button>
|
|
|
|
|
|
<div className="pt-4 space-y-2">
|
|
<Button
|
|
className="w-full bg-green-600 hover:bg-green-700 text-white"
|
|
onClick={() => onOpenModal?.('approve')}
|
|
>
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|
Approve Request
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
className="w-full"
|
|
onClick={() => onOpenModal?.('reject')}
|
|
>
|
|
<XCircle className="w-4 h-4 mr-2" />
|
|
Reject Request
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Spectators */}
|
|
{request.spectators && request.spectators.length > 0 && (
|
|
<Card>
|
|
<CardHeader className="pb-4">
|
|
<CardTitle className="text-base">Spectators</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{request.spectators.map((spectator: any, index: number) => (
|
|
<div key={index} className="flex items-center gap-3">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarFallback className="bg-blue-100 text-blue-800 text-xs font-semibold">
|
|
{spectator.avatar}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-900">{spectator.name}</p>
|
|
<p className="text-xs text-gray-500 truncate">{spectator.role}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Workflow Tab */}
|
|
<TabsContent value="workflow">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<TrendingUp className="w-5 h-5 text-blue-600" />
|
|
Approval Workflow
|
|
</CardTitle>
|
|
<CardDescription className="mt-2">
|
|
Track the approval progress through each step
|
|
</CardDescription>
|
|
</div>
|
|
{request.totalSteps && (
|
|
<Badge variant="outline" className="font-medium">
|
|
Step {request.currentStep} of {request.totalSteps}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{request.approvalFlow && request.approvalFlow.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{request.approvalFlow.map((step: any, index: number) => {
|
|
const isActive = step.status === 'pending' || step.status === 'in-review';
|
|
const isCompleted = step.status === 'approved';
|
|
const isRejected = step.status === 'rejected';
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`relative p-5 rounded-lg border-2 transition-all ${
|
|
isActive
|
|
? 'border-blue-500 bg-blue-50 shadow-md'
|
|
: isCompleted
|
|
? 'border-green-500 bg-green-50'
|
|
: isRejected
|
|
? 'border-red-500 bg-red-50'
|
|
: 'border-gray-200 bg-white'
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className={`p-3 rounded-xl ${
|
|
isActive ? 'bg-blue-100' :
|
|
isCompleted ? 'bg-green-100' :
|
|
isRejected ? 'bg-red-100' :
|
|
'bg-gray-100'
|
|
}`}>
|
|
{getStepIcon(step.status)}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-4 mb-2">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h4 className="font-semibold text-gray-900">
|
|
{step.step ? `Step ${step.step}: ` : ''}{step.role}
|
|
</h4>
|
|
<Badge variant="outline" className={
|
|
isActive ? 'bg-blue-100 text-blue-800 border-blue-200' :
|
|
isCompleted ? 'bg-green-100 text-green-800 border-green-200' :
|
|
isRejected ? 'bg-red-100 text-red-800 border-red-200' :
|
|
'bg-gray-100 text-gray-800 border-gray-200'
|
|
}>
|
|
{step.status}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-sm text-gray-600">{step.approver}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
{step.tatHours && (
|
|
<p className="text-xs text-gray-500">TAT: {step.tatHours}h</p>
|
|
)}
|
|
{step.elapsedHours !== undefined && step.elapsedHours > 0 && (
|
|
<p className="text-xs text-gray-600 font-medium">Elapsed: {step.elapsedHours}h</p>
|
|
)}
|
|
{step.actualHours !== undefined && (
|
|
<p className="text-xs text-gray-600 font-medium">Completed in: {step.actualHours}h</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{step.comment && (
|
|
<div className="mt-3 p-3 bg-white rounded-lg border border-gray-200">
|
|
<p className="text-sm text-gray-700">{step.comment}</p>
|
|
</div>
|
|
)}
|
|
|
|
{step.timestamp && (
|
|
<p className="text-xs text-gray-500 mt-2">
|
|
{isCompleted ? 'Approved' : isRejected ? 'Rejected' : 'Actioned'} on {step.timestamp}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-500 text-center py-8">No workflow steps defined</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Documents Tab */}
|
|
<TabsContent value="documents">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<FileText className="w-5 h-5 text-blue-600" />
|
|
Request Documents
|
|
</CardTitle>
|
|
<Button size="sm">
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
Upload Document
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{request.documents && request.documents.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{request.documents.map((doc: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center justify-between p-4 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-blue-100 rounded-lg">
|
|
<FileText className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-gray-900">{doc.name}</p>
|
|
<p className="text-xs text-gray-500">
|
|
{doc.size} • Uploaded by {doc.uploadedBy} on {doc.uploadedAt}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="sm">
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm">
|
|
<Download className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-500 text-center py-8">No documents uploaded yet</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Activity Tab */}
|
|
<TabsContent value="activity">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Activity className="w-5 h-5 text-orange-600" />
|
|
Activity Timeline
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Complete audit trail of all request activities
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{request.auditTrail && request.auditTrail.length > 0 ? request.auditTrail.map((entry: any, index: number) => (
|
|
<div key={index} className="flex items-start gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors border border-gray-100">
|
|
<div className="mt-1">
|
|
{getActionTypeIcon(entry.type)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div>
|
|
<p className="font-medium text-gray-900">{entry.action}</p>
|
|
<p className="text-sm text-gray-600 mt-1">{entry.details}</p>
|
|
<p className="text-xs text-gray-500 mt-1">by {entry.user}</p>
|
|
</div>
|
|
<span className="text-xs text-gray-500 whitespace-nowrap">{entry.timestamp}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="text-center py-12">
|
|
<Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
|
<p className="text-sm text-gray-500">No activity recorded yet</p>
|
|
<p className="text-xs text-gray-400 mt-2">Actions and updates will appear here</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|