Nattanin
ef20839f99
Phase 1-2: Setup, SQL schema, enums, queue constants, base entities
Phase 3 (US1): ReviewTeam, ReviewTeamMember, ReviewTask, TaskCreationService
Phase 4 (US2): ResponseCode, ResponseCodeRule, ImplicationsService, NotificationTriggerService
Phase 5 (US3): Delegation entity, CircularDetectionService, DelegationService/Controller/Module
Phase 6 (US4): ReminderRule, SchedulerService, EscalationService, ReminderProcessor, ReminderModule
Phase 7 (US5): DistributionMatrix, DistributionRecipient, ApprovalListenerService (Strangler),
TransmittalCreatorService, DistributionProcessor, DistributionModule
Phase 8 (US6): MatrixManagementService, InheritanceService (global→project override)
Phase 9 (Polish): AggregateStatusService, ConsensusService, VetoOverrideService,
ParallelGatewayHandler, review-validators, optimistic locking in completeReview,
test stubs (unit/integration/e2e), jest.config.js updated for tests/ directory
Frontend: ReviewTaskInbox, ParallelProgress, VetoOverrideDialog, DelegationForm,
DelegatedBadge, MatrixEditor, ProjectOverrideManager, DistributionStatus,
ReminderHistory, ResponseCodeSelector, CodeImplications, CompleteReviewForm,
ReviewTeamForm, ReviewTeamSelector, TeamMemberManager
Closes #1
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
// File: components/review-task/ParallelProgress.tsx
|
|
// Parallel review progress indicator แสดงทุก discipline tracks (T072)
|
|
import React from 'react';
|
|
import { CheckCircle2, Clock, AlertTriangle } from 'lucide-react';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
type TaskStatus = 'PENDING' | 'IN_PROGRESS' | 'COMPLETED' | 'DELEGATED' | 'EXPIRED' | 'CANCELLED';
|
|
|
|
interface DisciplineTrack {
|
|
disciplineId: string;
|
|
disciplineName: string;
|
|
taskStatus: TaskStatus;
|
|
responseCode?: string;
|
|
dueDate?: string;
|
|
assigneeName?: string;
|
|
}
|
|
|
|
interface ParallelProgressProps {
|
|
tracks: DisciplineTrack[];
|
|
overallPct: number;
|
|
isAllComplete: boolean;
|
|
}
|
|
|
|
const TRACK_ICON: Record<TaskStatus, React.ElementType> = {
|
|
PENDING: Clock,
|
|
IN_PROGRESS: Clock,
|
|
COMPLETED: CheckCircle2,
|
|
DELEGATED: Clock,
|
|
EXPIRED: AlertTriangle,
|
|
CANCELLED: AlertTriangle,
|
|
};
|
|
|
|
const TRACK_COLOR: Record<TaskStatus, string> = {
|
|
PENDING: 'text-muted-foreground',
|
|
IN_PROGRESS: 'text-blue-500',
|
|
COMPLETED: 'text-green-500',
|
|
DELEGATED: 'text-amber-500',
|
|
EXPIRED: 'text-destructive',
|
|
CANCELLED: 'text-muted-foreground',
|
|
};
|
|
|
|
export function ParallelProgress({ tracks, overallPct, isAllComplete }: ParallelProgressProps) {
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">Parallel Review Tracks</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-semibold">{overallPct}%</span>
|
|
{isAllComplete && (
|
|
<Badge variant="default" className="text-xs">All Complete</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Progress value={overallPct} className="h-1.5" />
|
|
|
|
<div className="space-y-1.5">
|
|
{tracks.map((track) => {
|
|
const Icon = TRACK_ICON[track.taskStatus];
|
|
const colorClass = TRACK_COLOR[track.taskStatus];
|
|
|
|
return (
|
|
<div
|
|
key={track.disciplineId}
|
|
className="flex items-center justify-between py-1.5 px-2 rounded bg-muted/30"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Icon className={`h-4 w-4 ${colorClass} flex-shrink-0`} />
|
|
<div>
|
|
<p className="text-sm font-medium">{track.disciplineName}</p>
|
|
{track.assigneeName && (
|
|
<p className="text-xs text-muted-foreground">{track.assigneeName}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
{track.responseCode && (
|
|
<span className="font-mono font-bold text-foreground">{track.responseCode}</span>
|
|
)}
|
|
{track.dueDate && (
|
|
<span>{new Date(track.dueDate).toLocaleDateString('th-TH', { day: '2-digit', month: 'short' })}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|