245 lines
9.2 KiB
TypeScript
245 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { Calendar, Wrench, Truck, Check, Clock, AlertTriangle } from "lucide-react";
|
|
|
|
interface MaintenanceSchedule {
|
|
id: string;
|
|
vehicleNumber: string;
|
|
vehicleType: string;
|
|
maintenanceType: "정기점검" | "수리" | "타이어교체" | "오일교환" | "기타";
|
|
scheduledDate: string;
|
|
status: "scheduled" | "in_progress" | "completed" | "overdue";
|
|
notes?: string;
|
|
estimatedCost?: number;
|
|
}
|
|
|
|
// 목 데이터
|
|
const mockSchedules: MaintenanceSchedule[] = [
|
|
{
|
|
id: "1",
|
|
vehicleNumber: "서울12가3456",
|
|
vehicleType: "1톤 트럭",
|
|
maintenanceType: "정기점검",
|
|
scheduledDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
|
|
status: "scheduled",
|
|
notes: "6개월 정기점검",
|
|
estimatedCost: 300000,
|
|
},
|
|
{
|
|
id: "2",
|
|
vehicleNumber: "경기34나5678",
|
|
vehicleType: "2.5톤 트럭",
|
|
maintenanceType: "오일교환",
|
|
scheduledDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString(),
|
|
status: "scheduled",
|
|
estimatedCost: 150000,
|
|
},
|
|
{
|
|
id: "3",
|
|
vehicleNumber: "인천56다7890",
|
|
vehicleType: "라보",
|
|
maintenanceType: "타이어교체",
|
|
scheduledDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
|
|
status: "overdue",
|
|
notes: "긴급",
|
|
estimatedCost: 400000,
|
|
},
|
|
{
|
|
id: "4",
|
|
vehicleNumber: "부산78라1234",
|
|
vehicleType: "1톤 트럭",
|
|
maintenanceType: "수리",
|
|
scheduledDate: new Date().toISOString(),
|
|
status: "in_progress",
|
|
notes: "엔진 점검 중",
|
|
estimatedCost: 800000,
|
|
},
|
|
];
|
|
|
|
export default function MaintenanceWidget() {
|
|
const [schedules] = useState<MaintenanceSchedule[]>(mockSchedules);
|
|
const [filter, setFilter] = useState<"all" | MaintenanceSchedule["status"]>("all");
|
|
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
|
|
|
const filteredSchedules = schedules.filter(
|
|
(s) => filter === "all" || s.status === filter
|
|
);
|
|
|
|
const getStatusBadge = (status: MaintenanceSchedule["status"]) => {
|
|
switch (status) {
|
|
case "scheduled":
|
|
return <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700">예정</span>;
|
|
case "in_progress":
|
|
return <span className="rounded bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700">진행중</span>;
|
|
case "completed":
|
|
return <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-700">완료</span>;
|
|
case "overdue":
|
|
return <span className="rounded bg-red-100 px-2 py-1 text-xs font-medium text-red-700">지연</span>;
|
|
}
|
|
};
|
|
|
|
const getMaintenanceIcon = (type: MaintenanceSchedule["maintenanceType"]) => {
|
|
switch (type) {
|
|
case "정기점검":
|
|
return "🔍";
|
|
case "수리":
|
|
return "🔧";
|
|
case "타이어교체":
|
|
return "⚙️";
|
|
case "오일교환":
|
|
return "🛢️";
|
|
default:
|
|
return "🔧";
|
|
}
|
|
};
|
|
|
|
const getDaysUntil = (date: string) => {
|
|
const now = new Date();
|
|
const scheduled = new Date(date);
|
|
const diff = scheduled.getTime() - now.getTime();
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
|
|
if (days < 0) return `${Math.abs(days)}일 지연`;
|
|
if (days === 0) return "오늘";
|
|
if (days === 1) return "내일";
|
|
return `${days}일 후`;
|
|
};
|
|
|
|
const stats = {
|
|
total: schedules.length,
|
|
scheduled: schedules.filter((s) => s.status === "scheduled").length,
|
|
inProgress: schedules.filter((s) => s.status === "in_progress").length,
|
|
overdue: schedules.filter((s) => s.status === "overdue").length,
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full flex-col bg-gradient-to-br from-slate-50 to-teal-50">
|
|
{/* 헤더 */}
|
|
<div className="border-b border-gray-200 bg-white px-4 py-3">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-lg font-bold text-gray-800">🔧 정비 일정 관리</h3>
|
|
<button className="rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90">
|
|
+ 일정 추가
|
|
</button>
|
|
</div>
|
|
|
|
{/* 통계 */}
|
|
<div className="mb-3 grid grid-cols-4 gap-2 text-xs">
|
|
<div className="rounded bg-blue-50 px-2 py-1.5 text-center">
|
|
<div className="font-bold text-blue-700">{stats.scheduled}</div>
|
|
<div className="text-blue-600">예정</div>
|
|
</div>
|
|
<div className="rounded bg-amber-50 px-2 py-1.5 text-center">
|
|
<div className="font-bold text-amber-700">{stats.inProgress}</div>
|
|
<div className="text-amber-600">진행중</div>
|
|
</div>
|
|
<div className="rounded bg-red-50 px-2 py-1.5 text-center">
|
|
<div className="font-bold text-red-700">{stats.overdue}</div>
|
|
<div className="text-red-600">지연</div>
|
|
</div>
|
|
<div className="rounded bg-gray-50 px-2 py-1.5 text-center">
|
|
<div className="font-bold text-gray-700">{stats.total}</div>
|
|
<div className="text-gray-600">전체</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 필터 */}
|
|
<div className="flex gap-2">
|
|
{(["all", "scheduled", "in_progress", "overdue"] as const).map((f) => (
|
|
<button
|
|
key={f}
|
|
onClick={() => setFilter(f)}
|
|
className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
|
|
filter === f ? "bg-primary text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
|
}`}
|
|
>
|
|
{f === "all" ? "전체" : f === "scheduled" ? "예정" : f === "in_progress" ? "진행중" : "지연"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 일정 리스트 */}
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{filteredSchedules.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center text-gray-400">
|
|
<div className="text-center">
|
|
<div className="mb-2 text-4xl">📅</div>
|
|
<div>정비 일정이 없습니다</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{filteredSchedules.map((schedule) => (
|
|
<div
|
|
key={schedule.id}
|
|
className={`group rounded-lg border-2 bg-white p-4 shadow-sm transition-all hover:shadow-md ${
|
|
schedule.status === "overdue" ? "border-red-300" : "border-gray-200"
|
|
}`}
|
|
>
|
|
<div className="mb-2 flex items-start justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-2xl">{getMaintenanceIcon(schedule.maintenanceType)}</span>
|
|
<div>
|
|
<div className="font-bold text-gray-800">{schedule.vehicleNumber}</div>
|
|
<div className="text-xs text-gray-600">{schedule.vehicleType}</div>
|
|
</div>
|
|
</div>
|
|
{getStatusBadge(schedule.status)}
|
|
</div>
|
|
|
|
<div className="mb-3 rounded bg-gray-50 p-2">
|
|
<div className="text-sm font-medium text-gray-700">{schedule.maintenanceType}</div>
|
|
{schedule.notes && <div className="mt-1 text-xs text-gray-600">{schedule.notes}</div>}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 text-xs">
|
|
<div className="flex items-center gap-1 text-gray-600">
|
|
<Calendar className="h-3 w-3" />
|
|
{new Date(schedule.scheduledDate).toLocaleDateString()}
|
|
</div>
|
|
<div
|
|
className={`flex items-center gap-1 font-medium ${
|
|
schedule.status === "overdue" ? "text-red-600" : "text-blue-600"
|
|
}`}
|
|
>
|
|
<Clock className="h-3 w-3" />
|
|
{getDaysUntil(schedule.scheduledDate)}
|
|
</div>
|
|
{schedule.estimatedCost && (
|
|
<div className="col-span-2 font-bold text-primary">
|
|
예상 비용: {schedule.estimatedCost.toLocaleString()}원
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 액션 버튼 */}
|
|
{schedule.status === "scheduled" && (
|
|
<div className="mt-3 flex gap-2">
|
|
<button className="flex-1 rounded bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-600">
|
|
시작
|
|
</button>
|
|
<button className="flex-1 rounded bg-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-300">
|
|
일정 변경
|
|
</button>
|
|
</div>
|
|
)}
|
|
{schedule.status === "in_progress" && (
|
|
<div className="mt-3">
|
|
<button className="w-full rounded bg-green-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-600">
|
|
<Check className="mr-1 inline h-3 w-3" />
|
|
완료 처리
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|