1898 lines
86 KiB
TypeScript
1898 lines
86 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useMemo, useCallback, useEffect } from "react";
|
||
|
|
import {
|
||
|
|
BarChart3,
|
||
|
|
Circle,
|
||
|
|
CheckCircle2,
|
||
|
|
AlertCircle,
|
||
|
|
Clock,
|
||
|
|
LayoutGrid,
|
||
|
|
List,
|
||
|
|
Timer,
|
||
|
|
ChevronLeft,
|
||
|
|
ChevronRight,
|
||
|
|
ChevronDown,
|
||
|
|
ChevronUp,
|
||
|
|
Plus,
|
||
|
|
Trash2,
|
||
|
|
Paperclip,
|
||
|
|
ShoppingCart,
|
||
|
|
Handshake,
|
||
|
|
FileText,
|
||
|
|
Image as ImageIcon,
|
||
|
|
Ruler,
|
||
|
|
Box,
|
||
|
|
FolderOpen,
|
||
|
|
Upload,
|
||
|
|
X,
|
||
|
|
Pencil,
|
||
|
|
Calendar,
|
||
|
|
Search,
|
||
|
|
RotateCcw,
|
||
|
|
ClipboardList,
|
||
|
|
FileEdit,
|
||
|
|
Inbox,
|
||
|
|
Loader2,
|
||
|
|
PointerIcon,
|
||
|
|
} from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { Card } from "@/components/ui/card";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Textarea } from "@/components/ui/textarea";
|
||
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||
|
|
import { Progress } from "@/components/ui/progress";
|
||
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
|
|
import { Slider } from "@/components/ui/slider";
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select";
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
DialogDescription,
|
||
|
|
DialogFooter,
|
||
|
|
} from "@/components/ui/dialog";
|
||
|
|
import {
|
||
|
|
ResizablePanelGroup,
|
||
|
|
ResizablePanel,
|
||
|
|
ResizableHandle,
|
||
|
|
} from "@/components/ui/resizable";
|
||
|
|
import {
|
||
|
|
Table,
|
||
|
|
TableBody,
|
||
|
|
TableCell,
|
||
|
|
TableHead,
|
||
|
|
TableHeader,
|
||
|
|
TableRow,
|
||
|
|
} from "@/components/ui/table";
|
||
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
import { useAuth } from "@/hooks/useAuth";
|
||
|
|
import {
|
||
|
|
getMyWork,
|
||
|
|
updateTask,
|
||
|
|
createWorkLog,
|
||
|
|
deleteWorkLog,
|
||
|
|
createSubItem,
|
||
|
|
updateSubItem,
|
||
|
|
deleteSubItem,
|
||
|
|
createPurchaseReq,
|
||
|
|
createCoopReq,
|
||
|
|
addCoopResponse,
|
||
|
|
} from "@/lib/api/design";
|
||
|
|
|
||
|
|
// ========== 타입 ==========
|
||
|
|
interface SubItem {
|
||
|
|
id: number | string;
|
||
|
|
_id?: string;
|
||
|
|
name: string;
|
||
|
|
weight: number;
|
||
|
|
progress: number;
|
||
|
|
status: string;
|
||
|
|
}
|
||
|
|
interface Attachment {
|
||
|
|
id: number;
|
||
|
|
name: string;
|
||
|
|
type: string;
|
||
|
|
size: string;
|
||
|
|
}
|
||
|
|
interface PurchaseReq {
|
||
|
|
id: number | string;
|
||
|
|
_id?: string;
|
||
|
|
item: string;
|
||
|
|
qty: number;
|
||
|
|
unit: string;
|
||
|
|
reason: string;
|
||
|
|
status: string;
|
||
|
|
}
|
||
|
|
interface CoopResponse {
|
||
|
|
date: string;
|
||
|
|
user: string;
|
||
|
|
content: string;
|
||
|
|
}
|
||
|
|
interface CoopReq {
|
||
|
|
id: string;
|
||
|
|
_id?: string;
|
||
|
|
toUser: string;
|
||
|
|
toDept: string;
|
||
|
|
title: string;
|
||
|
|
desc: string;
|
||
|
|
status: string;
|
||
|
|
dueDate: string;
|
||
|
|
responses: CoopResponse[];
|
||
|
|
}
|
||
|
|
interface WorkLog {
|
||
|
|
_id?: string;
|
||
|
|
startDt: string;
|
||
|
|
endDt: string;
|
||
|
|
hours: number;
|
||
|
|
desc: string;
|
||
|
|
subItemId: number | string | null;
|
||
|
|
attachments: Attachment[];
|
||
|
|
purchaseReqs: PurchaseReq[];
|
||
|
|
coopReqs: CoopReq[];
|
||
|
|
}
|
||
|
|
interface Task {
|
||
|
|
_id?: string;
|
||
|
|
name: string;
|
||
|
|
category: string;
|
||
|
|
assignee: string;
|
||
|
|
start: string;
|
||
|
|
end: string;
|
||
|
|
status: string;
|
||
|
|
progress: number;
|
||
|
|
priority: string;
|
||
|
|
subItems: SubItem[];
|
||
|
|
workLogs: WorkLog[];
|
||
|
|
}
|
||
|
|
interface Project {
|
||
|
|
id: string;
|
||
|
|
project_id?: string;
|
||
|
|
name: string;
|
||
|
|
customer: string;
|
||
|
|
status: string;
|
||
|
|
tasks: Task[];
|
||
|
|
}
|
||
|
|
interface MyTask extends Task {
|
||
|
|
projectId: string;
|
||
|
|
projectName: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ========== 유틸 ==========
|
||
|
|
const USER_INFO: Record<string, { role: string; color: string }> = {
|
||
|
|
최기구: { role: "기구설계 파트", color: "bg-blue-500" },
|
||
|
|
이설계: { role: "기구설계 파트", color: "bg-emerald-500" },
|
||
|
|
김전장: { role: "전장설계 파트", color: "bg-amber-500" },
|
||
|
|
박도면: { role: "기구설계 파트", color: "bg-violet-500" },
|
||
|
|
정SW: { role: "SW개발 파트", color: "bg-pink-500" },
|
||
|
|
한조립: { role: "조립/시운전 파트", color: "bg-red-500" },
|
||
|
|
박구매: { role: "구매/조달 파트", color: "bg-teal-500" },
|
||
|
|
팀장: { role: "설계팀 팀장", color: "bg-indigo-500" },
|
||
|
|
};
|
||
|
|
|
||
|
|
const USERS = Object.keys(USER_INFO);
|
||
|
|
|
||
|
|
function calcHours(s: string, e: string): number {
|
||
|
|
if (!s || !e) return 0;
|
||
|
|
const d = (new Date(e).getTime() - new Date(s).getTime()) / 3600000;
|
||
|
|
return d > 0 ? Math.round(d * 10) / 10 : 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
function calcAutoProgress(task: Task): number {
|
||
|
|
if (!task.subItems?.length) return task.progress;
|
||
|
|
const tw = task.subItems.reduce((s, i) => s + i.weight, 0);
|
||
|
|
if (!tw) return 0;
|
||
|
|
return Math.round(
|
||
|
|
task.subItems.reduce((s, i) => s + (i.progress * i.weight) / tw, 0)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function fmtDtShort(dt: string) {
|
||
|
|
if (!dt) return "";
|
||
|
|
return dt.substring(5, 10) + " " + dt.substring(11, 16);
|
||
|
|
}
|
||
|
|
|
||
|
|
function getWeekStart(d: Date): Date {
|
||
|
|
const r = new Date(d);
|
||
|
|
const day = r.getDay();
|
||
|
|
r.setDate(r.getDate() - day + (day === 0 ? -6 : 1));
|
||
|
|
r.setHours(0, 0, 0, 0);
|
||
|
|
return r;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getFileIcon(type: string) {
|
||
|
|
switch (type) {
|
||
|
|
case "image":
|
||
|
|
return <ImageIcon className="h-4 w-4" />;
|
||
|
|
case "drawing":
|
||
|
|
return <Ruler className="h-4 w-4" />;
|
||
|
|
case "3d":
|
||
|
|
return <Box className="h-4 w-4" />;
|
||
|
|
case "document":
|
||
|
|
return <FileText className="h-4 w-4" />;
|
||
|
|
default:
|
||
|
|
return <FolderOpen className="h-4 w-4" />;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getFileType(name: string): string {
|
||
|
|
const ext = (name.split(".").pop() || "").toLowerCase();
|
||
|
|
if (["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext))
|
||
|
|
return "image";
|
||
|
|
if (["dwg", "dxf"].includes(ext)) return "drawing";
|
||
|
|
if (["step", "stp", "igs", "stl"].includes(ext)) return "3d";
|
||
|
|
if (
|
||
|
|
["pdf", "doc", "docx", "xlsx", "xls", "pptx", "txt", "csv"].includes(ext)
|
||
|
|
)
|
||
|
|
return "document";
|
||
|
|
return "other";
|
||
|
|
}
|
||
|
|
|
||
|
|
function getProgressColor(p: number) {
|
||
|
|
if (p >= 80) return "text-emerald-500";
|
||
|
|
if (p >= 40) return "text-blue-500";
|
||
|
|
if (p > 0) return "text-amber-500";
|
||
|
|
return "text-muted-foreground";
|
||
|
|
}
|
||
|
|
|
||
|
|
function getProgressBg(p: number) {
|
||
|
|
if (p >= 80) return "bg-emerald-500";
|
||
|
|
if (p >= 40) return "bg-blue-500";
|
||
|
|
if (p > 0) return "bg-amber-500";
|
||
|
|
return "bg-muted";
|
||
|
|
}
|
||
|
|
|
||
|
|
const STATUS_STYLES: Record<string, string> = {
|
||
|
|
대기: "bg-muted text-foreground",
|
||
|
|
진행중: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
|
||
|
|
검토중:
|
||
|
|
"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
|
||
|
|
완료: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
|
||
|
|
지연: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
|
||
|
|
};
|
||
|
|
|
||
|
|
const PRIORITY_STYLES: Record<string, string> = {
|
||
|
|
긴급: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
|
||
|
|
높음: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
|
||
|
|
보통: "bg-muted text-foreground",
|
||
|
|
낮음: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
|
||
|
|
};
|
||
|
|
|
||
|
|
const PR_STATUS_STYLES: Record<string, string> = {
|
||
|
|
요청: "bg-red-100 text-red-800",
|
||
|
|
견적중: "bg-amber-100 text-amber-800",
|
||
|
|
발주완료: "bg-blue-100 text-blue-800",
|
||
|
|
입고완료: "bg-emerald-100 text-emerald-800",
|
||
|
|
};
|
||
|
|
|
||
|
|
const CR_STATUS_STYLES: Record<string, string> = {
|
||
|
|
요청: "bg-amber-100 text-amber-800",
|
||
|
|
접수: "bg-amber-100 text-amber-800",
|
||
|
|
진행중: "bg-blue-100 text-blue-800",
|
||
|
|
완료: "bg-emerald-100 text-emerald-800",
|
||
|
|
};
|
||
|
|
|
||
|
|
const CR_NEXT: Record<string, string> = {
|
||
|
|
요청: "접수",
|
||
|
|
접수: "진행중",
|
||
|
|
진행중: "완료",
|
||
|
|
};
|
||
|
|
|
||
|
|
// ========== API 응답 매핑 ==========
|
||
|
|
function mapApiTaskToTask(api: any): Task {
|
||
|
|
const subItems: SubItem[] = (api.sub_items || []).map((s: any) => ({
|
||
|
|
id: s.id,
|
||
|
|
_id: String(s.id),
|
||
|
|
name: s.name || "",
|
||
|
|
weight: Number(s.weight) || 0,
|
||
|
|
progress: Number(s.progress) || 0,
|
||
|
|
status: s.status || "대기",
|
||
|
|
}));
|
||
|
|
const workLogs: WorkLog[] = (api.work_logs || []).map((w: any) => {
|
||
|
|
const attachments: Attachment[] = (w.attachments || []).map((a: any) => ({
|
||
|
|
id: a.id ?? a.file_name?.length ?? 0,
|
||
|
|
name: a.file_name || a.name || "",
|
||
|
|
type: a.file_type || getFileType(a.file_name || ""),
|
||
|
|
size: a.file_size || a.size || "",
|
||
|
|
}));
|
||
|
|
const purchaseReqs: PurchaseReq[] = (w.purchase_reqs || []).map((pr: any) => ({
|
||
|
|
id: pr.id,
|
||
|
|
_id: pr.id ? String(pr.id) : undefined,
|
||
|
|
item: pr.item || "",
|
||
|
|
qty: Number(pr.qty) || 1,
|
||
|
|
unit: pr.unit || "EA",
|
||
|
|
reason: pr.reason || "",
|
||
|
|
status: pr.status || "요청",
|
||
|
|
}));
|
||
|
|
const coopReqs: CoopReq[] = (w.coop_reqs || []).map((c: any) => ({
|
||
|
|
id: c.id || `CR-${String(c.id)}`,
|
||
|
|
_id: c.id ? String(c.id) : undefined,
|
||
|
|
toUser: c.to_user || "",
|
||
|
|
toDept: c.to_dept || "",
|
||
|
|
title: c.title || "",
|
||
|
|
desc: c.description || c.desc || "",
|
||
|
|
status: c.status || "요청",
|
||
|
|
dueDate: c.due_date || "",
|
||
|
|
responses: (c.responses || []).map((r: any) => ({
|
||
|
|
date: r.response_date || r.date || "",
|
||
|
|
user: r.user_name || r.user || "",
|
||
|
|
content: r.content || "",
|
||
|
|
})),
|
||
|
|
}));
|
||
|
|
return {
|
||
|
|
_id: w.id ? String(w.id) : undefined,
|
||
|
|
startDt: w.start_dt || "",
|
||
|
|
endDt: w.end_dt || "",
|
||
|
|
hours: Number(w.hours) || 0,
|
||
|
|
desc: w.description || w.desc || "",
|
||
|
|
subItemId: w.sub_item_id ?? null,
|
||
|
|
attachments,
|
||
|
|
purchaseReqs,
|
||
|
|
coopReqs,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
_id: api.id ? String(api.id) : undefined,
|
||
|
|
name: api.name || "",
|
||
|
|
category: api.category || "",
|
||
|
|
assignee: api.assignee || "",
|
||
|
|
start: api.start_date || api.start || "",
|
||
|
|
end: api.end_date || api.end || "",
|
||
|
|
status: api.status || "대기",
|
||
|
|
progress: Number(api.progress) || 0,
|
||
|
|
priority: api.priority || "보통",
|
||
|
|
subItems,
|
||
|
|
workLogs,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function mapApiTasksToProjects(apiTasks: any[]): Project[] {
|
||
|
|
const projectMap = new Map<string, Project>();
|
||
|
|
for (const api of apiTasks) {
|
||
|
|
const pId = api.project_id || api.project_no;
|
||
|
|
const pNo = api.project_no || api.project_id || "";
|
||
|
|
if (!projectMap.has(pId)) {
|
||
|
|
projectMap.set(pId, {
|
||
|
|
id: pNo,
|
||
|
|
project_id: pId,
|
||
|
|
name: api.project_name || "",
|
||
|
|
customer: api.project_customer || "",
|
||
|
|
status: api.project_status || "진행중",
|
||
|
|
tasks: [],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
projectMap.get(pId)!.tasks.push(mapApiTaskToTask(api));
|
||
|
|
}
|
||
|
|
return Array.from(projectMap.values());
|
||
|
|
}
|
||
|
|
|
||
|
|
// ========== 메인 컴포넌트 ==========
|
||
|
|
export default function MyWorkPage() {
|
||
|
|
const { userName } = useAuth();
|
||
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [currentUser, setCurrentUser] = useState(userName || "최기구");
|
||
|
|
const [viewMode, setViewMode] = useState<"kanban" | "list" | "timesheet">("kanban");
|
||
|
|
const [timesheetWeekOffset, setTimesheetWeekOffset] = useState(0);
|
||
|
|
|
||
|
|
// 필터
|
||
|
|
const [filterProject, setFilterProject] = useState("");
|
||
|
|
const [filterStatus, setFilterStatus] = useState("");
|
||
|
|
const [filterPriority, setFilterPriority] = useState("");
|
||
|
|
const [filterCategory, setFilterCategory] = useState("");
|
||
|
|
const [filterKeyword, setFilterKeyword] = useState("");
|
||
|
|
|
||
|
|
// 선택된 업무
|
||
|
|
const [selectedTaskKey, setSelectedTaskKey] = useState<string | null>(null);
|
||
|
|
const [selectedSubItemId, setSelectedSubItemId] = useState<number | string>("__unassigned__");
|
||
|
|
|
||
|
|
// 편집 상태
|
||
|
|
const [editingLogIdx, setEditingLogIdx] = useState<number>(-1);
|
||
|
|
const [editForm, setEditForm] = useState({ startDt: "", endDt: "", desc: "" });
|
||
|
|
|
||
|
|
// 수행항목 추가
|
||
|
|
const [newSiName, setNewSiName] = useState("");
|
||
|
|
const [newSiWeight, setNewSiWeight] = useState("");
|
||
|
|
|
||
|
|
// 모달
|
||
|
|
const [attModalOpen, setAttModalOpen] = useState(false);
|
||
|
|
const [prModalOpen, setPrModalOpen] = useState(false);
|
||
|
|
const [crModalOpen, setCrModalOpen] = useState(false);
|
||
|
|
const [modalLogIdx, setModalLogIdx] = useState(-1);
|
||
|
|
const [modalAttachments, setModalAttachments] = useState<Attachment[]>([]);
|
||
|
|
const [modalPurchaseReqs, setModalPurchaseReqs] = useState<PurchaseReq[]>([]);
|
||
|
|
const [modalCoopReqs, setModalCoopReqs] = useState<CoopReq[]>([]);
|
||
|
|
|
||
|
|
// 구매요청 폼
|
||
|
|
const [prForm, setPrForm] = useState({ item: "", qty: "1", unit: "EA", reason: "", status: "요청" });
|
||
|
|
// 협조요청 폼
|
||
|
|
const [crForm, setCrForm] = useState({ title: "", toUser: "", desc: "", dueDate: "" });
|
||
|
|
|
||
|
|
const today = useMemo(() => new Date(), []);
|
||
|
|
const todayStr = useMemo(() => {
|
||
|
|
const dn = ["일", "월", "화", "수", "목", "금", "토"];
|
||
|
|
return `${today.getFullYear()}.${String(today.getMonth() + 1).padStart(2, "0")}.${String(today.getDate()).padStart(2, "0")} (${dn[today.getDay()]})`;
|
||
|
|
}, [today]);
|
||
|
|
|
||
|
|
const projectsRef = React.useRef<Project[]>([]);
|
||
|
|
projectsRef.current = projects;
|
||
|
|
|
||
|
|
const fetchMyWork = useCallback(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const params: { status?: string; project_id?: string } = {};
|
||
|
|
if (filterStatus && filterStatus !== "__all__") params.status = filterStatus;
|
||
|
|
if (filterProject && filterProject !== "__all__") {
|
||
|
|
const proj = projectsRef.current.find((p) => p.id === filterProject || p.project_id === filterProject);
|
||
|
|
if (proj?.project_id) params.project_id = proj.project_id;
|
||
|
|
else params.project_id = filterProject;
|
||
|
|
}
|
||
|
|
const res = await getMyWork(params);
|
||
|
|
if (res.success && res.data) {
|
||
|
|
setProjects(mapApiTasksToProjects(res.data));
|
||
|
|
} else {
|
||
|
|
setProjects([]);
|
||
|
|
}
|
||
|
|
} catch {
|
||
|
|
toast.error("업무 목록을 불러오는데 실패했습니다.");
|
||
|
|
setProjects([]);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [filterStatus, filterProject]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (userName) setCurrentUser(userName);
|
||
|
|
}, [userName]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchMyWork();
|
||
|
|
}, [fetchMyWork]);
|
||
|
|
|
||
|
|
const projectList = useMemo(() => {
|
||
|
|
const ids = new Set<string>();
|
||
|
|
projects.forEach((p) => ids.add(`${p.id}|${p.name}`));
|
||
|
|
return Array.from(ids).map((v) => {
|
||
|
|
const [id, name] = v.split("|");
|
||
|
|
return { id, name };
|
||
|
|
});
|
||
|
|
}, [projects]);
|
||
|
|
|
||
|
|
// 내 업무 목록
|
||
|
|
const myTasks = useMemo<MyTask[]>(() => {
|
||
|
|
const tasks: MyTask[] = [];
|
||
|
|
projects.forEach((p) =>
|
||
|
|
p.tasks.forEach((t) => {
|
||
|
|
if (t.assignee === currentUser)
|
||
|
|
tasks.push({ ...t, projectId: p.id, projectName: p.name });
|
||
|
|
})
|
||
|
|
);
|
||
|
|
return tasks;
|
||
|
|
}, [projects, currentUser]);
|
||
|
|
|
||
|
|
// 필터링된 업무
|
||
|
|
const filteredTasks = useMemo(() => {
|
||
|
|
return myTasks.filter((t) => {
|
||
|
|
if (filterProject && filterProject !== "__all__" && t.projectId !== filterProject) return false;
|
||
|
|
if (filterStatus && filterStatus !== "__all__" && t.status !== filterStatus) return false;
|
||
|
|
if (filterPriority && filterPriority !== "__all__" && (t.priority || "보통") !== filterPriority) return false;
|
||
|
|
if (filterCategory && filterCategory !== "__all__" && t.category !== filterCategory) return false;
|
||
|
|
if (filterKeyword && !t.name.toLowerCase().includes(filterKeyword.toLowerCase()) && !t.projectName.toLowerCase().includes(filterKeyword.toLowerCase())) return false;
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
}, [myTasks, filterProject, filterStatus, filterPriority, filterCategory, filterKeyword]);
|
||
|
|
|
||
|
|
// 수신된 협조요청
|
||
|
|
const receivedCoops = useMemo(() => {
|
||
|
|
const coops: (CoopReq & { projectId: string; projectName: string; taskName: string; fromUser: string })[] = [];
|
||
|
|
projects.forEach((p) =>
|
||
|
|
p.tasks.forEach((t) =>
|
||
|
|
(t.workLogs || []).forEach((wl) =>
|
||
|
|
(wl.coopReqs || []).forEach((cr) => {
|
||
|
|
if (cr.toUser === currentUser && cr.status !== "완료")
|
||
|
|
coops.push({ ...cr, projectId: p.id, projectName: p.name, taskName: t.name, fromUser: t.assignee });
|
||
|
|
})
|
||
|
|
)
|
||
|
|
)
|
||
|
|
);
|
||
|
|
return coops;
|
||
|
|
}, [projects, currentUser]);
|
||
|
|
|
||
|
|
// 선택된 업무 참조
|
||
|
|
const selectedTask = useMemo(() => {
|
||
|
|
if (!selectedTaskKey) return null;
|
||
|
|
const [pid, tname] = selectedTaskKey.split("||");
|
||
|
|
for (const p of projects) {
|
||
|
|
if (p.id === pid) {
|
||
|
|
const t = p.tasks.find((task) => task.name === tname);
|
||
|
|
if (t) return { task: t, projectId: p.id, projectName: p.name };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}, [selectedTaskKey, projects]);
|
||
|
|
|
||
|
|
// 통계
|
||
|
|
const stats = useMemo(() => {
|
||
|
|
const total = myTasks.length + receivedCoops.length;
|
||
|
|
const progress = myTasks.filter((t) => t.status === "진행중").length;
|
||
|
|
const done = myTasks.filter((t) => t.status === "완료").length;
|
||
|
|
const delay = myTasks.filter((t) => t.status !== "완료" && new Date(t.end) < today).length;
|
||
|
|
const ws = getWeekStart(today);
|
||
|
|
const we = new Date(ws);
|
||
|
|
we.setDate(we.getDate() + 6);
|
||
|
|
let wh = 0;
|
||
|
|
myTasks.forEach((t) =>
|
||
|
|
(t.workLogs || []).forEach((l) => {
|
||
|
|
const ld = new Date(l.startDt);
|
||
|
|
if (ld >= ws && ld <= we) wh += l.hours;
|
||
|
|
})
|
||
|
|
);
|
||
|
|
return { total, progress, done, delay, weekHours: wh };
|
||
|
|
}, [myTasks, receivedCoops, today]);
|
||
|
|
|
||
|
|
const handleSelectTask = useCallback((pid: string, tname: string) => {
|
||
|
|
setSelectedTaskKey(`${pid}||${tname}`);
|
||
|
|
setEditingLogIdx(-1);
|
||
|
|
setSelectedSubItemId("__unassigned__");
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleResetFilter = useCallback(() => {
|
||
|
|
setFilterProject("");
|
||
|
|
setFilterStatus("");
|
||
|
|
setFilterPriority("");
|
||
|
|
setFilterCategory("");
|
||
|
|
setFilterKeyword("");
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 업무 데이터 변경 헬퍼
|
||
|
|
const updateProjects = useCallback((updater: (draft: Project[]) => void) => {
|
||
|
|
setProjects((prev) => {
|
||
|
|
const copy = JSON.parse(JSON.stringify(prev));
|
||
|
|
updater(copy);
|
||
|
|
return copy;
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const getTaskRef = useCallback(
|
||
|
|
(projectId: string, taskName: string) => {
|
||
|
|
for (const p of projects) {
|
||
|
|
if (p.id === projectId) {
|
||
|
|
return p.tasks.find((t) => t.name === taskName) || null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
[projects]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 수행항목 추가
|
||
|
|
const handleAddSubItem = useCallback(async () => {
|
||
|
|
if (!selectedTask || !newSiName.trim()) return;
|
||
|
|
const w = parseInt(newSiWeight) || 0;
|
||
|
|
if (w <= 0) return;
|
||
|
|
const taskId = selectedTask.task._id;
|
||
|
|
if (!taskId) return;
|
||
|
|
const res = await createSubItem(taskId, { name: newSiName.trim(), weight: w, progress: 0, status: "대기" });
|
||
|
|
if (res.success) {
|
||
|
|
toast.success("수행항목이 추가되었습니다.");
|
||
|
|
setNewSiName("");
|
||
|
|
setNewSiWeight("");
|
||
|
|
fetchMyWork();
|
||
|
|
} else {
|
||
|
|
toast.error(res.message || "수행항목 추가에 실패했습니다.");
|
||
|
|
}
|
||
|
|
}, [selectedTask, newSiName, newSiWeight, fetchMyWork]);
|
||
|
|
|
||
|
|
// 수행항목 삭제
|
||
|
|
const handleDeleteSubItem = useCallback(
|
||
|
|
async (idx: number) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
const si = selectedTask.task.subItems[idx];
|
||
|
|
const siId = si?._id ?? si?.id;
|
||
|
|
if (siId) {
|
||
|
|
const res = await deleteSubItem(String(siId));
|
||
|
|
if (res.success) {
|
||
|
|
toast.success("수행항목이 삭제되었습니다.");
|
||
|
|
fetchMyWork();
|
||
|
|
} else {
|
||
|
|
toast.error(res.message || "수행항목 삭제에 실패했습니다.");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
updateProjects((draft) => {
|
||
|
|
for (const p of draft) {
|
||
|
|
if (p.id === selectedTask.projectId) {
|
||
|
|
const t = p.tasks.find((x) => x.name === selectedTask.task.name);
|
||
|
|
if (t) {
|
||
|
|
t.subItems.splice(idx, 1);
|
||
|
|
t.progress = calcAutoProgress(t);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[selectedTask, updateProjects, fetchMyWork]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 수행항목 체크 토글
|
||
|
|
const handleToggleSubCheck = useCallback(
|
||
|
|
async (idx: number) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
const si = selectedTask.task.subItems[idx];
|
||
|
|
const siId = si?._id ?? si?.id;
|
||
|
|
const newProgress = (si?.progress ?? 0) >= 100 ? 0 : 100;
|
||
|
|
const newStatus = newProgress >= 100 ? "완료" : "대기";
|
||
|
|
if (siId) {
|
||
|
|
const res = await updateSubItem(String(siId), { progress: newProgress, status: newStatus });
|
||
|
|
if (res.success) {
|
||
|
|
toast.success("수행항목이 업데이트되었습니다.");
|
||
|
|
fetchMyWork();
|
||
|
|
} else {
|
||
|
|
toast.error(res.message || "수행항목 업데이트에 실패했습니다.");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
updateProjects((draft) => {
|
||
|
|
for (const p of draft) {
|
||
|
|
if (p.id === selectedTask.projectId) {
|
||
|
|
const t = p.tasks.find((x) => x.name === selectedTask.task.name);
|
||
|
|
if (t && t.subItems[idx]) {
|
||
|
|
t.subItems[idx].progress = newProgress;
|
||
|
|
t.subItems[idx].status = newStatus;
|
||
|
|
t.progress = calcAutoProgress(t);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[selectedTask, updateProjects, fetchMyWork]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 수행항목 진행률 변경
|
||
|
|
const handleUpdateSubProgress = useCallback(
|
||
|
|
async (siId: number | string, val: number) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
const si = selectedTask.task.subItems.find((s) => s.id === siId || s._id === String(siId));
|
||
|
|
const apiId = si?._id ?? si?.id;
|
||
|
|
if (apiId) {
|
||
|
|
const res = await updateSubItem(String(apiId), {
|
||
|
|
progress: val,
|
||
|
|
status: val >= 100 ? "완료" : val > 0 ? "진행중" : "대기",
|
||
|
|
});
|
||
|
|
if (res.success) {
|
||
|
|
fetchMyWork();
|
||
|
|
} else {
|
||
|
|
toast.error(res.message || "진행률 업데이트에 실패했습니다.");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
updateProjects((draft) => {
|
||
|
|
for (const p of draft) {
|
||
|
|
if (p.id === selectedTask.projectId) {
|
||
|
|
const t = p.tasks.find((x) => x.name === selectedTask.task.name);
|
||
|
|
if (t) {
|
||
|
|
const subSi = t.subItems.find((s) => s.id === siId || s._id === String(siId));
|
||
|
|
if (subSi) {
|
||
|
|
subSi.progress = val;
|
||
|
|
subSi.status = val >= 100 ? "완료" : val > 0 ? "진행중" : "대기";
|
||
|
|
t.progress = calcAutoProgress(t);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[selectedTask, updateProjects, fetchMyWork]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 수행기록 편집 시작
|
||
|
|
const handleStartEdit = useCallback(
|
||
|
|
(idx: number) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
const log = selectedTask.task.workLogs[idx];
|
||
|
|
if (log) {
|
||
|
|
setEditForm({ startDt: log.startDt, endDt: log.endDt, desc: log.desc });
|
||
|
|
}
|
||
|
|
setEditingLogIdx(idx);
|
||
|
|
},
|
||
|
|
[selectedTask]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 새 기록 추가 시작
|
||
|
|
const handleStartNewLog = useCallback(
|
||
|
|
(siId: number | string | null) => {
|
||
|
|
const now = new Date();
|
||
|
|
const ds = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
||
|
|
setEditForm({ startDt: `${ds}T08:00`, endDt: `${ds}T17:00`, desc: "" });
|
||
|
|
setEditingLogIdx(-2);
|
||
|
|
if (siId === null) setSelectedSubItemId("__unassigned__");
|
||
|
|
else setSelectedSubItemId(siId);
|
||
|
|
},
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 기록 저장
|
||
|
|
const handleSaveLog = useCallback(
|
||
|
|
async (logIdx: number, siId: number | string | null) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
if (!editForm.startDt || !editForm.endDt || !editForm.desc.trim()) return;
|
||
|
|
const hours = calcHours(editForm.startDt, editForm.endDt);
|
||
|
|
if (hours <= 0) return;
|
||
|
|
const taskId = selectedTask.task._id;
|
||
|
|
if (!taskId) return;
|
||
|
|
if (logIdx < 0) {
|
||
|
|
const res = await createWorkLog(taskId, {
|
||
|
|
start_dt: editForm.startDt,
|
||
|
|
end_dt: editForm.endDt,
|
||
|
|
hours,
|
||
|
|
description: editForm.desc.trim(),
|
||
|
|
sub_item_id: siId ?? null,
|
||
|
|
});
|
||
|
|
if (res.success) {
|
||
|
|
toast.success("작업일지가 등록되었습니다.");
|
||
|
|
setEditingLogIdx(-1);
|
||
|
|
fetchMyWork();
|
||
|
|
} else {
|
||
|
|
toast.error(res.message || "작업일지 등록에 실패했습니다.");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
updateProjects((draft) => {
|
||
|
|
for (const p of draft) {
|
||
|
|
if (p.id === selectedTask.projectId) {
|
||
|
|
const t = p.tasks.find((x) => x.name === selectedTask.task.name);
|
||
|
|
if (t) {
|
||
|
|
t.workLogs[logIdx] = { ...t.workLogs[logIdx], startDt: editForm.startDt, endDt: editForm.endDt, hours, desc: editForm.desc.trim(), subItemId: siId, attachments: t.workLogs[logIdx].attachments || [], purchaseReqs: t.workLogs[logIdx].purchaseReqs || [], coopReqs: t.workLogs[logIdx].coopReqs || [] };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
setEditingLogIdx(-1);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[selectedTask, editForm, updateProjects, fetchMyWork]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 기록 삭제
|
||
|
|
const handleDeleteLog = useCallback(
|
||
|
|
async (idx: number) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
const log = selectedTask.task.workLogs[idx];
|
||
|
|
const workLogId = log?._id;
|
||
|
|
if (workLogId) {
|
||
|
|
const res = await deleteWorkLog(String(workLogId));
|
||
|
|
if (res.success) {
|
||
|
|
toast.success("작업일지가 삭제되었습니다.");
|
||
|
|
setEditingLogIdx(-1);
|
||
|
|
fetchMyWork();
|
||
|
|
} else {
|
||
|
|
toast.error(res.message || "작업일지 삭제에 실패했습니다.");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
updateProjects((draft) => {
|
||
|
|
for (const p of draft) {
|
||
|
|
if (p.id === selectedTask.projectId) {
|
||
|
|
const t = p.tasks.find((x) => x.name === selectedTask.task.name);
|
||
|
|
if (t) t.workLogs.splice(idx, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
setEditingLogIdx(-1);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[selectedTask, updateProjects, fetchMyWork]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 모달: 첨부파일
|
||
|
|
const openAttModal = useCallback(
|
||
|
|
(logIdx: number) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
setModalLogIdx(logIdx);
|
||
|
|
const atts = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.attachments || [])] : [];
|
||
|
|
setModalAttachments(atts);
|
||
|
|
setAttModalOpen(true);
|
||
|
|
},
|
||
|
|
[selectedTask]
|
||
|
|
);
|
||
|
|
|
||
|
|
const saveAttModal = useCallback(() => {
|
||
|
|
if (!selectedTask || modalLogIdx < 0) return;
|
||
|
|
updateProjects((draft) => {
|
||
|
|
for (const p of draft) {
|
||
|
|
if (p.id === selectedTask.projectId) {
|
||
|
|
const t = p.tasks.find((x) => x.name === selectedTask.task.name);
|
||
|
|
if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].attachments = [...modalAttachments];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
setAttModalOpen(false);
|
||
|
|
}, [selectedTask, modalLogIdx, modalAttachments, updateProjects]);
|
||
|
|
|
||
|
|
// 모달: 구매요청
|
||
|
|
const openPrModal = useCallback(
|
||
|
|
(logIdx: number) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
setModalLogIdx(logIdx);
|
||
|
|
const prs = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.purchaseReqs || []).map((p) => ({ ...p }))] : [];
|
||
|
|
setModalPurchaseReqs(prs);
|
||
|
|
setPrModalOpen(true);
|
||
|
|
},
|
||
|
|
[selectedTask]
|
||
|
|
);
|
||
|
|
|
||
|
|
const savePrModal = useCallback(async () => {
|
||
|
|
if (!selectedTask || modalLogIdx < 0) return;
|
||
|
|
const workLog = selectedTask.task.workLogs[modalLogIdx];
|
||
|
|
const workLogId = workLog?._id;
|
||
|
|
if (workLogId) {
|
||
|
|
const newItems = modalPurchaseReqs.filter((pr) => !pr._id);
|
||
|
|
for (const pr of newItems) {
|
||
|
|
const res = await createPurchaseReq(String(workLogId), {
|
||
|
|
item: pr.item,
|
||
|
|
qty: pr.qty,
|
||
|
|
unit: pr.unit,
|
||
|
|
reason: pr.reason,
|
||
|
|
status: pr.status,
|
||
|
|
});
|
||
|
|
if (!res.success) {
|
||
|
|
toast.error(res.message || "구매요청 등록에 실패했습니다.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (newItems.length > 0) toast.success("구매요청이 등록되었습니다.");
|
||
|
|
}
|
||
|
|
updateProjects((draft) => {
|
||
|
|
for (const p of draft) {
|
||
|
|
if (p.id === selectedTask.projectId) {
|
||
|
|
const t = p.tasks.find((x) => x.name === selectedTask.task.name);
|
||
|
|
if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].purchaseReqs = [...modalPurchaseReqs];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
setPrModalOpen(false);
|
||
|
|
if (workLogId && newItems.length > 0) fetchMyWork();
|
||
|
|
}, [selectedTask, modalLogIdx, modalPurchaseReqs, updateProjects, fetchMyWork]);
|
||
|
|
|
||
|
|
// 모달: 협조요청
|
||
|
|
const openCrModal = useCallback(
|
||
|
|
(logIdx: number) => {
|
||
|
|
if (!selectedTask) return;
|
||
|
|
setModalLogIdx(logIdx);
|
||
|
|
const crs = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.coopReqs || []).map((c) => ({ ...c, responses: [...(c.responses || [])] }))] : [];
|
||
|
|
setModalCoopReqs(crs);
|
||
|
|
setCrModalOpen(true);
|
||
|
|
},
|
||
|
|
[selectedTask]
|
||
|
|
);
|
||
|
|
|
||
|
|
const saveCrModal = useCallback(async () => {
|
||
|
|
if (!selectedTask || modalLogIdx < 0) return;
|
||
|
|
const workLog = selectedTask.task.workLogs[modalLogIdx];
|
||
|
|
const workLogId = workLog?._id;
|
||
|
|
if (workLogId) {
|
||
|
|
const newItems = modalCoopReqs.filter((cr) => !cr._id);
|
||
|
|
for (const cr of newItems) {
|
||
|
|
const res = await createCoopReq(String(workLogId), {
|
||
|
|
to_user: cr.toUser,
|
||
|
|
to_dept: cr.toDept,
|
||
|
|
title: cr.title,
|
||
|
|
description: cr.desc,
|
||
|
|
due_date: cr.dueDate,
|
||
|
|
});
|
||
|
|
if (!res.success) {
|
||
|
|
toast.error(res.message || "협조요청 등록에 실패했습니다.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (newItems.length > 0) toast.success("협조요청이 등록되었습니다.");
|
||
|
|
}
|
||
|
|
updateProjects((draft) => {
|
||
|
|
for (const p of draft) {
|
||
|
|
if (p.id === selectedTask.projectId) {
|
||
|
|
const t = p.tasks.find((x) => x.name === selectedTask.task.name);
|
||
|
|
if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].coopReqs = [...modalCoopReqs];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
setCrModalOpen(false);
|
||
|
|
if (workLogId && modalCoopReqs.filter((cr) => !cr._id).length > 0) fetchMyWork();
|
||
|
|
}, [selectedTask, modalLogIdx, modalCoopReqs, updateProjects, fetchMyWork]);
|
||
|
|
|
||
|
|
// ===== 칸반 보드 =====
|
||
|
|
const kanbanCols = useMemo(() => {
|
||
|
|
const cols: Record<string, MyTask[]> = { 대기: [], 진행중: [], 검토중: [], 완료: [] };
|
||
|
|
filteredTasks.forEach((t) => {
|
||
|
|
if (cols[t.status]) cols[t.status].push(t);
|
||
|
|
});
|
||
|
|
return cols;
|
||
|
|
}, [filteredTasks]);
|
||
|
|
|
||
|
|
const kanbanConfig = [
|
||
|
|
{ key: "대기", icon: <Circle className="h-3.5 w-3.5" />, color: "border-muted-foreground/30", titleColor: "text-muted-foreground" },
|
||
|
|
{ key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-blue-500" />, color: "border-blue-500", titleColor: "text-blue-500" },
|
||
|
|
{ key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-amber-500" />, color: "border-amber-500", titleColor: "text-amber-500" },
|
||
|
|
{ key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />, color: "border-emerald-500", titleColor: "text-emerald-500" },
|
||
|
|
];
|
||
|
|
|
||
|
|
// ===== 타임시트 =====
|
||
|
|
const timesheetData = useMemo(() => {
|
||
|
|
const ws = getWeekStart(today);
|
||
|
|
ws.setDate(ws.getDate() + timesheetWeekOffset * 7);
|
||
|
|
const we = new Date(ws);
|
||
|
|
we.setDate(we.getDate() + 6);
|
||
|
|
const dn = ["월", "화", "수", "목", "금", "토", "일"];
|
||
|
|
const wds: Date[] = [];
|
||
|
|
for (let i = 0; i < 7; i++) {
|
||
|
|
const d = new Date(ws);
|
||
|
|
d.setDate(d.getDate() + i);
|
||
|
|
wds.push(d);
|
||
|
|
}
|
||
|
|
const ph: Record<string, { id: string; name: string; days: number[]; total: number; tasks: Record<string, number[]> }> = {};
|
||
|
|
myTasks.forEach((t) => {
|
||
|
|
const k = `${t.projectId}|${t.projectName}`;
|
||
|
|
if (!ph[k]) ph[k] = { id: t.projectId, name: t.projectName, days: [0, 0, 0, 0, 0, 0, 0], total: 0, tasks: {} };
|
||
|
|
(t.workLogs || []).forEach((l) => {
|
||
|
|
const ld = new Date(l.startDt);
|
||
|
|
const di = wds.findIndex((d) => d.toDateString() === ld.toDateString());
|
||
|
|
if (di >= 0) {
|
||
|
|
ph[k].days[di] += l.hours;
|
||
|
|
ph[k].total += l.hours;
|
||
|
|
if (!ph[k].tasks[t.name]) ph[k].tasks[t.name] = [0, 0, 0, 0, 0, 0, 0];
|
||
|
|
ph[k].tasks[t.name][di] += l.hours;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
const dt = [0, 0, 0, 0, 0, 0, 0];
|
||
|
|
Object.values(ph).forEach((p) => p.days.forEach((h, i) => (dt[i] += h)));
|
||
|
|
const gt = dt.reduce((s, h) => s + h, 0);
|
||
|
|
return { ws, we, dn, wds, ph, dt, gt };
|
||
|
|
}, [myTasks, today, timesheetWeekOffset]);
|
||
|
|
|
||
|
|
// ========== 렌더링 ==========
|
||
|
|
if (loading && projects.length === 0) {
|
||
|
|
return (
|
||
|
|
<div className="flex h-full flex-col items-center justify-center gap-2 p-3">
|
||
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||
|
|
<span className="text-sm text-muted-foreground">업무 목록을 불러오는 중...</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full flex-col gap-2 p-3">
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="flex shrink-0 items-center justify-between">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<h1 className="text-xl font-bold">
|
||
|
|
<BarChart3 className="mr-1.5 inline h-5 w-5" />
|
||
|
|
내 업무 현황
|
||
|
|
</h1>
|
||
|
|
<div className="flex items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
|
||
|
|
<Avatar className="h-7 w-7">
|
||
|
|
<AvatarFallback className={cn("text-xs font-bold text-white", USER_INFO[currentUser]?.color || "bg-primary")}>
|
||
|
|
{currentUser.charAt(0)}
|
||
|
|
</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<div className="leading-tight">
|
||
|
|
<div className="text-xs font-semibold">{currentUser}</div>
|
||
|
|
<div className="text-[10px] text-muted-foreground">{USER_INFO[currentUser]?.role}</div>
|
||
|
|
</div>
|
||
|
|
<Select value={currentUser} onValueChange={(v) => { setCurrentUser(v); setSelectedTaskKey(null); }}>
|
||
|
|
<SelectTrigger className="h-6 w-20 border-0 bg-transparent text-xs text-primary" size="xs">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{USERS.map((u) => (
|
||
|
|
<SelectItem key={u} value={u}>{u}</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1.5 rounded-lg border bg-card px-2.5 py-1.5 text-xs text-muted-foreground">
|
||
|
|
<Calendar className="h-3.5 w-3.5" />
|
||
|
|
{todayStr}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 검색 필터 */}
|
||
|
|
<div className="flex shrink-0 flex-wrap items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
|
||
|
|
<Select value={filterProject} onValueChange={setFilterProject}>
|
||
|
|
<SelectTrigger className="h-7 w-[130px] text-xs" size="xs"><SelectValue placeholder="전체 프로젝트" /></SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="__all__">전체 프로젝트</SelectItem>
|
||
|
|
{projectList.map((p) => (
|
||
|
|
<SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select value={filterStatus} onValueChange={setFilterStatus}>
|
||
|
|
<SelectTrigger className="h-7 w-[100px] text-xs" size="xs"><SelectValue placeholder="전체 상태" /></SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="__all__">전체 상태</SelectItem>
|
||
|
|
{["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select value={filterPriority} onValueChange={setFilterPriority}>
|
||
|
|
<SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="전체 우선순위" /></SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="__all__">전체 우선순위</SelectItem>
|
||
|
|
{["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select value={filterCategory} onValueChange={setFilterCategory}>
|
||
|
|
<SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="전체 유형" /></SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="__all__">전체 유형</SelectItem>
|
||
|
|
{["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<div className="relative">
|
||
|
|
<Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||
|
|
<Input
|
||
|
|
value={filterKeyword}
|
||
|
|
onChange={(e) => setFilterKeyword(e.target.value)}
|
||
|
|
placeholder="업무명 검색..."
|
||
|
|
className="h-7 w-[120px] pl-7 text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleResetFilter}>
|
||
|
|
<RotateCcw className="mr-1 h-3 w-3" />초기화
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 통계 카드 */}
|
||
|
|
<div className="grid shrink-0 grid-cols-5 gap-2">
|
||
|
|
{[
|
||
|
|
{ icon: <ClipboardList className="h-4 w-4 text-blue-500" />, value: stats.total, label: "전체 업무", bg: "bg-blue-50 dark:bg-blue-900/20" },
|
||
|
|
{ icon: <Circle className="h-4 w-4 text-amber-500" />, value: stats.progress, label: "진행중", bg: "bg-amber-50 dark:bg-amber-900/20" },
|
||
|
|
{ icon: <CheckCircle2 className="h-4 w-4 text-emerald-500" />, value: stats.done, label: "완료", bg: "bg-emerald-50 dark:bg-emerald-900/20" },
|
||
|
|
{ icon: <AlertCircle className="h-4 w-4 text-red-500" />, value: stats.delay, label: "지연", bg: "bg-red-50 dark:bg-red-900/20" },
|
||
|
|
{ icon: <Clock className="h-4 w-4 text-violet-500" />, value: `${stats.weekHours}h`, label: "이번주 투입", bg: "bg-violet-50 dark:bg-violet-900/20" },
|
||
|
|
].map((s, i) => (
|
||
|
|
<Card key={i} className="flex flex-row items-center gap-2 rounded-lg border px-3 py-2 shadow-none">
|
||
|
|
<div className={cn("flex h-8 w-8 items-center justify-center rounded-lg", s.bg)}>{s.icon}</div>
|
||
|
|
<div>
|
||
|
|
<div className="text-lg font-bold">{s.value}</div>
|
||
|
|
<div className="text-[11px] text-muted-foreground">{s.label}</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 메인 영역 */}
|
||
|
|
<ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
|
||
|
|
{/* 왼쪽: 업무 현황 */}
|
||
|
|
<ResizablePanel defaultSize={45} minSize={25}>
|
||
|
|
<div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
|
||
|
|
<div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
|
||
|
|
<span className="text-sm font-bold">
|
||
|
|
<ClipboardList className="mr-1 inline h-4 w-4" />
|
||
|
|
업무 현황
|
||
|
|
</span>
|
||
|
|
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
|
||
|
|
<TabsList className="h-7">
|
||
|
|
<TabsTrigger value="kanban" className="h-5 gap-1 px-2 text-[11px]">
|
||
|
|
<LayoutGrid className="h-3 w-3" />보드
|
||
|
|
</TabsTrigger>
|
||
|
|
<TabsTrigger value="list" className="h-5 gap-1 px-2 text-[11px]">
|
||
|
|
<List className="h-3 w-3" />목록
|
||
|
|
</TabsTrigger>
|
||
|
|
<TabsTrigger value="timesheet" className="h-5 gap-1 px-2 text-[11px]">
|
||
|
|
<Timer className="h-3 w-3" />타임시트
|
||
|
|
</TabsTrigger>
|
||
|
|
</TabsList>
|
||
|
|
</Tabs>
|
||
|
|
</div>
|
||
|
|
<ScrollArea className="flex-1">
|
||
|
|
<div className="p-2">
|
||
|
|
{viewMode === "kanban" && (
|
||
|
|
<div className="grid grid-cols-4 gap-2">
|
||
|
|
{kanbanConfig.map((col) => {
|
||
|
|
const tasks = kanbanCols[col.key] || [];
|
||
|
|
const extraCount = col.key === "대기" ? receivedCoops.length : 0;
|
||
|
|
return (
|
||
|
|
<div key={col.key} className="flex flex-col rounded-lg bg-muted/50 p-2">
|
||
|
|
<div className={cn("mb-2 flex items-center justify-between border-b-2 pb-1.5", col.color)}>
|
||
|
|
<span className={cn("flex items-center gap-1 text-xs font-bold", col.titleColor)}>
|
||
|
|
{col.icon}{col.key}
|
||
|
|
</span>
|
||
|
|
<Badge variant="outline" className="h-5 px-1.5 text-[10px]">{tasks.length + extraCount}</Badge>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-1 flex-col gap-1.5 overflow-y-auto">
|
||
|
|
{col.key === "대기" && receivedCoops.map((cr, i) => (
|
||
|
|
<div key={`coop-${i}`} className="rounded-md border border-amber-200 bg-amber-50 p-2 dark:border-amber-900/50 dark:bg-amber-900/10">
|
||
|
|
<div className="text-[10px] text-amber-600">
|
||
|
|
<Handshake className="mr-0.5 inline h-3 w-3" /> 협조 · {cr.fromUser}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs font-semibold">{cr.title}</div>
|
||
|
|
<div className="mt-0.5 text-[10px] text-muted-foreground">{cr.projectName}</div>
|
||
|
|
<div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-emerald-600")}>
|
||
|
|
<Calendar className="mr-0.5 inline h-3 w-3" />{cr.dueDate}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
{tasks.map((t) => {
|
||
|
|
const isDelay = t.status !== "완료" && new Date(t.end) < today;
|
||
|
|
const dd = Math.ceil((new Date(t.end).getTime() - today.getTime()) / 86400000);
|
||
|
|
const dueText = isDelay ? `${Math.abs(dd)}일 초과` : dd === 0 ? "오늘" : dd <= 3 ? `D-${dd}` : t.end;
|
||
|
|
const attCount = (t.workLogs || []).reduce((n, wl) => n + (wl.attachments || []).length, 0);
|
||
|
|
const coopCount = (t.workLogs || []).reduce((n, wl) => n + (wl.coopReqs || []).filter((c) => c.status !== "완료").length, 0);
|
||
|
|
const isSelected = selectedTaskKey === `${t.projectId}||${t.name}`;
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={`${t.projectId}-${t.name}`}
|
||
|
|
className={cn(
|
||
|
|
"cursor-pointer rounded-md border bg-card p-2 transition-all hover:shadow-sm",
|
||
|
|
isSelected && "border-primary ring-2 ring-primary/20"
|
||
|
|
)}
|
||
|
|
onClick={() => handleSelectTask(t.projectId, t.name)}
|
||
|
|
>
|
||
|
|
<div className="text-[10px] text-muted-foreground">{t.projectId} · {t.projectName}</div>
|
||
|
|
<div className="text-xs font-semibold">{t.name}</div>
|
||
|
|
<div className="mt-1 flex items-center justify-between">
|
||
|
|
<Badge className={cn("h-4 px-1.5 text-[9px]", PRIORITY_STYLES[t.priority || "보통"])}>{t.priority || "보통"}</Badge>
|
||
|
|
<span className="text-[10px] text-muted-foreground">{t.category}</span>
|
||
|
|
</div>
|
||
|
|
<div className="mt-1 flex items-center gap-1.5">
|
||
|
|
<div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
|
||
|
|
<div className={cn("h-full rounded-full", getProgressBg(t.progress))} style={{ width: `${t.progress}%` }} />
|
||
|
|
</div>
|
||
|
|
<span className={cn("text-[10px] font-semibold", getProgressColor(t.progress))}>{t.progress}%</span>
|
||
|
|
</div>
|
||
|
|
<div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-amber-500" : "text-emerald-600")}>
|
||
|
|
<Calendar className="mr-0.5 inline h-3 w-3" />{dueText}
|
||
|
|
</div>
|
||
|
|
{(coopCount > 0 || attCount > 0) && (
|
||
|
|
<div className="mt-1 flex gap-1">
|
||
|
|
{coopCount > 0 && <Badge variant="outline" className="h-4 gap-0.5 px-1 text-[9px]"><Handshake className="h-2.5 w-2.5" />{coopCount}</Badge>}
|
||
|
|
{attCount > 0 && <Badge variant="outline" className="h-4 gap-0.5 px-1 text-[9px]"><Paperclip className="h-2.5 w-2.5" />{attCount}</Badge>}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{tasks.length === 0 && extraCount === 0 && (
|
||
|
|
<div className="py-3 text-center text-[11px] text-muted-foreground">없음</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{viewMode === "list" && (
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead className="w-[90px] text-[11px]">프로젝트</TableHead>
|
||
|
|
<TableHead className="text-[11px]">업무명</TableHead>
|
||
|
|
<TableHead className="w-[65px] text-[11px]">유형</TableHead>
|
||
|
|
<TableHead className="w-[55px] text-center text-[11px]">상태</TableHead>
|
||
|
|
<TableHead className="w-[80px] text-[11px]">종료일</TableHead>
|
||
|
|
<TableHead className="w-[70px] text-[11px]">진행률</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{filteredTasks
|
||
|
|
.sort((a, b) => {
|
||
|
|
const ad = a.status !== "완료" && new Date(a.end) < today;
|
||
|
|
const bd = b.status !== "완료" && new Date(b.end) < today;
|
||
|
|
if (ad && !bd) return -1;
|
||
|
|
if (!ad && bd) return 1;
|
||
|
|
const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
|
||
|
|
return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
|
||
|
|
})
|
||
|
|
.map((t) => {
|
||
|
|
const isDelay = t.status !== "완료" && new Date(t.end) < today;
|
||
|
|
const displayStatus = isDelay ? "지연" : t.status;
|
||
|
|
const isSelected = selectedTaskKey === `${t.projectId}||${t.name}`;
|
||
|
|
return (
|
||
|
|
<TableRow
|
||
|
|
key={`${t.projectId}-${t.name}`}
|
||
|
|
className={cn("cursor-pointer", isSelected && "bg-accent")}
|
||
|
|
onClick={() => handleSelectTask(t.projectId, t.name)}
|
||
|
|
>
|
||
|
|
<TableCell className="text-[10px]">
|
||
|
|
<span className="font-semibold text-primary">{t.projectId}</span>
|
||
|
|
<br />
|
||
|
|
<span className="text-muted-foreground">{t.projectName}</span>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-xs font-medium">{t.name}</TableCell>
|
||
|
|
<TableCell className="text-[11px]">{t.category}</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
<Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{t.end}</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<div className="flex items-center gap-1.5">
|
||
|
|
<div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
|
||
|
|
<div className={cn("h-full rounded-full", getProgressBg(t.progress))} style={{ width: `${t.progress}%` }} />
|
||
|
|
</div>
|
||
|
|
<span className="text-[10px]">{t.progress}%</span>
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{filteredTasks.length === 0 && (
|
||
|
|
<TableRow>
|
||
|
|
<TableCell colSpan={6} className="py-8 text-center text-xs text-muted-foreground">검색 결과 없음</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
)}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{viewMode === "timesheet" && (
|
||
|
|
<div>
|
||
|
|
<div className="mb-2 flex items-center gap-2">
|
||
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setTimesheetWeekOffset((p) => p - 1)}>
|
||
|
|
<ChevronLeft className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
<span className="text-sm font-semibold">
|
||
|
|
<Calendar className="mr-1 inline h-3.5 w-3.5" />
|
||
|
|
{timesheetData.ws.getMonth() + 1}/{timesheetData.ws.getDate()} ~ {timesheetData.we.getMonth() + 1}/{timesheetData.we.getDate()}
|
||
|
|
</span>
|
||
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setTimesheetWeekOffset((p) => p + 1)}>
|
||
|
|
<ChevronRight className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
{timesheetWeekOffset !== 0 && (
|
||
|
|
<Button variant="outline" size="sm" className="h-7 text-xs text-primary" onClick={() => setTimesheetWeekOffset(0)}>이번주</Button>
|
||
|
|
)}
|
||
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
||
|
|
총 <strong className="text-primary">{timesheetData.gt}h</strong>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead className="min-w-[120px] text-[11px]">프로젝트/업무</TableHead>
|
||
|
|
{timesheetData.wds.map((d, i) => (
|
||
|
|
<TableHead
|
||
|
|
key={i}
|
||
|
|
className={cn(
|
||
|
|
"text-center text-[10px]",
|
||
|
|
i >= 5 && "bg-red-50 dark:bg-red-900/10",
|
||
|
|
d.toDateString() === today.toDateString() && "bg-blue-50 text-primary dark:bg-blue-900/10"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{timesheetData.dn[i]}
|
||
|
|
<br />
|
||
|
|
<span className="text-[9px]">{d.getMonth() + 1}/{d.getDate()}</span>
|
||
|
|
</TableHead>
|
||
|
|
))}
|
||
|
|
<TableHead className="text-center text-[11px] font-bold">합계</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{Object.keys(timesheetData.ph).length === 0 && (
|
||
|
|
<TableRow>
|
||
|
|
<TableCell colSpan={9} className="py-8 text-center text-xs text-muted-foreground">기록 없음</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
)}
|
||
|
|
{Object.values(timesheetData.ph).map((p) => (
|
||
|
|
<React.Fragment key={p.id}>
|
||
|
|
<TableRow className="bg-muted/30">
|
||
|
|
<TableCell className="text-[10px] font-bold text-primary">{p.id} {p.name}</TableCell>
|
||
|
|
{p.days.map((v, i) => (
|
||
|
|
<TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "" : "text-muted-foreground/30")}>
|
||
|
|
{v > 0 ? `${v}h` : "-"}
|
||
|
|
</TableCell>
|
||
|
|
))}
|
||
|
|
<TableCell className="text-center text-xs font-bold text-primary">{p.total}h</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
{Object.entries(p.tasks).map(([tn, days]) => {
|
||
|
|
const tt = days.reduce((s, v) => s + v, 0);
|
||
|
|
return (
|
||
|
|
<TableRow key={tn}>
|
||
|
|
<TableCell className="pl-4 text-[10px] text-muted-foreground">└ {tn}</TableCell>
|
||
|
|
{days.map((v, i) => (
|
||
|
|
<TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "" : "text-muted-foreground/30")}>
|
||
|
|
{v > 0 ? `${v}h` : "-"}
|
||
|
|
</TableCell>
|
||
|
|
))}
|
||
|
|
<TableCell className="text-center text-[10px] font-semibold">{tt}h</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</React.Fragment>
|
||
|
|
))}
|
||
|
|
<TableRow className="bg-blue-50 font-bold dark:bg-blue-900/10">
|
||
|
|
<TableCell className="text-[11px]">합계</TableCell>
|
||
|
|
{timesheetData.dt.map((v, i) => (
|
||
|
|
<TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
|
||
|
|
{v > 0 ? `${v}h` : "-"}
|
||
|
|
</TableCell>
|
||
|
|
))}
|
||
|
|
<TableCell className="text-center text-sm font-bold text-primary">{timesheetData.gt}h</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</ScrollArea>
|
||
|
|
</div>
|
||
|
|
</ResizablePanel>
|
||
|
|
|
||
|
|
<ResizableHandle withHandle />
|
||
|
|
|
||
|
|
{/* 오른쪽: 상세 패널 */}
|
||
|
|
<ResizablePanel defaultSize={55} minSize={30}>
|
||
|
|
<div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
|
||
|
|
{!selectedTask ? (
|
||
|
|
<div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
|
||
|
|
<PointerIcon className="h-8 w-8" />
|
||
|
|
<span className="text-sm">왼쪽에서 업무를 선택하세요</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{/* 상세 헤더 */}
|
||
|
|
<div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-2">
|
||
|
|
<span className="text-sm font-bold">{selectedTask.task.name}</span>
|
||
|
|
<Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setSelectedTaskKey(null)}>
|
||
|
|
<X className="h-3.5 w-3.5" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 업무 정보 바 */}
|
||
|
|
<div className="shrink-0 border-b bg-muted/10 px-3 py-2">
|
||
|
|
<div className="grid grid-cols-[auto_1fr_auto_1fr] gap-x-3 gap-y-0.5 text-xs">
|
||
|
|
<span className="text-muted-foreground">프로젝트</span>
|
||
|
|
<span className="font-semibold text-primary">{selectedTask.projectId} {selectedTask.projectName}</span>
|
||
|
|
<span className="text-muted-foreground">상태</span>
|
||
|
|
<span className="flex items-center gap-1.5">
|
||
|
|
<Badge className={cn("text-[10px]", STATUS_STYLES[selectedTask.task.status])}>{selectedTask.task.status}</Badge>
|
||
|
|
{selectedTask.task.subItems.length > 0 && <Badge variant="outline" className="text-[9px]">자동</Badge>}
|
||
|
|
</span>
|
||
|
|
<span className="text-muted-foreground">유형</span>
|
||
|
|
<span className="font-semibold">{selectedTask.task.category}</span>
|
||
|
|
<span className="text-muted-foreground">기간</span>
|
||
|
|
<span className="font-semibold">{selectedTask.task.start} ~ {selectedTask.task.end}</span>
|
||
|
|
</div>
|
||
|
|
<div className="mt-1.5 flex items-center gap-2">
|
||
|
|
<Progress value={selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress} className="h-1.5 flex-1" />
|
||
|
|
<span className={cn("text-sm font-bold", getProgressColor(selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress))}>
|
||
|
|
{selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress}%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 수행항목 + 기록 분할 */}
|
||
|
|
<ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
|
||
|
|
{/* 수행항목 */}
|
||
|
|
<ResizablePanel defaultSize={40} minSize={20}>
|
||
|
|
<div className="flex h-full flex-col">
|
||
|
|
<div className="shrink-0 border-b bg-muted/30 px-3 py-1.5 text-xs font-bold">
|
||
|
|
<ClipboardList className="mr-1 inline h-3.5 w-3.5" />수행항목
|
||
|
|
</div>
|
||
|
|
<ScrollArea className="flex-1">
|
||
|
|
{/* 추가 입력 */}
|
||
|
|
<div className="flex gap-1 border-b bg-muted/10 p-2">
|
||
|
|
<Input value={newSiName} onChange={(e) => setNewSiName(e.target.value)} placeholder="수행항목 추가..." className="h-6 flex-1 text-xs" />
|
||
|
|
<Input value={newSiWeight} onChange={(e) => setNewSiWeight(e.target.value)} placeholder="%" type="number" className="h-6 w-10 text-xs" min={1} max={100} />
|
||
|
|
<Button size="sm" className="h-6 px-2 text-[10px]" onClick={handleAddSubItem}>
|
||
|
|
<Plus className="mr-0.5 h-3 w-3" />추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 수행항목 리스트 */}
|
||
|
|
{selectedTask.task.subItems.map((si, idx) => {
|
||
|
|
const done = si.progress >= 100;
|
||
|
|
const siLogs = selectedTask.task.workLogs.filter((wl) => wl.subItemId == si.id || String(wl.subItemId) === String(si.id));
|
||
|
|
const isSelected = selectedSubItemId === si.id;
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={si.id}
|
||
|
|
className={cn(
|
||
|
|
"flex cursor-pointer items-center gap-1.5 border-b px-2.5 py-1.5 transition-colors hover:bg-accent/50",
|
||
|
|
isSelected && "border-l-2 border-l-primary bg-accent"
|
||
|
|
)}
|
||
|
|
onClick={() => { setSelectedSubItemId(si.id); setEditingLogIdx(-1); }}
|
||
|
|
>
|
||
|
|
<Checkbox
|
||
|
|
checked={done}
|
||
|
|
onCheckedChange={() => handleToggleSubCheck(idx)}
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
className="h-4 w-4"
|
||
|
|
/>
|
||
|
|
<span className={cn("min-w-0 flex-1 truncate text-xs font-semibold", done && "text-muted-foreground line-through")}>
|
||
|
|
{si.name}
|
||
|
|
</span>
|
||
|
|
<Badge variant="outline" className="h-4 px-1 text-[9px]">{si.weight}%</Badge>
|
||
|
|
<div className="h-1 w-10 overflow-hidden rounded-full bg-muted">
|
||
|
|
<div className={cn("h-full rounded-full", getProgressBg(si.progress))} style={{ width: `${si.progress}%` }} />
|
||
|
|
</div>
|
||
|
|
<span className={cn("min-w-[28px] text-right text-[10px] font-bold", getProgressColor(si.progress))}>{si.progress}%</span>
|
||
|
|
<span className="min-w-[16px] text-center text-[10px] text-muted-foreground">{siLogs.length}</span>
|
||
|
|
<Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-20 hover:opacity-100" onClick={(e) => { e.stopPropagation(); handleDeleteSubItem(idx); }}>
|
||
|
|
<Trash2 className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
|
||
|
|
{/* 요약 */}
|
||
|
|
{selectedTask.task.subItems.length > 0 && (
|
||
|
|
<div className="flex items-center justify-between border-b bg-blue-50 px-2.5 py-1 text-[11px] dark:bg-blue-900/10">
|
||
|
|
<span>
|
||
|
|
가중 진행률: <strong className="text-primary">{calcAutoProgress(selectedTask.task)}%</strong>
|
||
|
|
{selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0) !== 100 && (
|
||
|
|
<span className="text-destructive"> (합계:{selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0)}%)</span>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
<span className="text-muted-foreground">
|
||
|
|
{selectedTask.task.subItems.filter((i) => i.progress >= 100).length}/{selectedTask.task.subItems.length}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 일반 수행기록 */}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex cursor-pointer items-center gap-1.5 border-t px-2.5 py-1.5 text-xs font-bold text-muted-foreground transition-colors hover:bg-accent/50",
|
||
|
|
selectedSubItemId === "__unassigned__" && "border-l-2 border-l-primary bg-accent"
|
||
|
|
)}
|
||
|
|
onClick={() => { setSelectedSubItemId("__unassigned__"); setEditingLogIdx(-1); }}
|
||
|
|
>
|
||
|
|
<FileEdit className="h-3.5 w-3.5" />
|
||
|
|
일반 수행기록
|
||
|
|
<span className="ml-1 text-[10px] font-normal text-muted-foreground">
|
||
|
|
({selectedTask.task.workLogs.filter((wl) => !wl.subItemId).length}건)
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</ScrollArea>
|
||
|
|
</div>
|
||
|
|
</ResizablePanel>
|
||
|
|
|
||
|
|
<ResizableHandle />
|
||
|
|
|
||
|
|
{/* 수행기록 */}
|
||
|
|
<ResizablePanel defaultSize={60} minSize={30}>
|
||
|
|
<div className="flex h-full flex-col">
|
||
|
|
<div className="shrink-0 border-b bg-muted/30 px-3 py-1.5 text-xs font-bold">
|
||
|
|
<FileEdit className="mr-1 inline h-3.5 w-3.5" />수행기록
|
||
|
|
</div>
|
||
|
|
<ScrollArea className="flex-1">
|
||
|
|
{selectedSubItemId === "__unassigned__" ? (
|
||
|
|
<RenderLogs
|
||
|
|
title="일반 수행기록"
|
||
|
|
logs={selectedTask.task.workLogs
|
||
|
|
.map((wl, i) => ({ ...wl, _idx: i }))
|
||
|
|
.filter((wl) => !wl.subItemId)
|
||
|
|
.sort((a, b) => b.startDt.localeCompare(a.startDt))}
|
||
|
|
editingLogIdx={editingLogIdx}
|
||
|
|
editForm={editForm}
|
||
|
|
setEditForm={setEditForm}
|
||
|
|
onStartEdit={handleStartEdit}
|
||
|
|
onStartNew={() => handleStartNewLog(null)}
|
||
|
|
onSave={(logIdx) => handleSaveLog(logIdx, null)}
|
||
|
|
onCancel={() => setEditingLogIdx(-1)}
|
||
|
|
onDelete={handleDeleteLog}
|
||
|
|
onOpenAtt={openAttModal}
|
||
|
|
onOpenPr={openPrModal}
|
||
|
|
onOpenCr={openCrModal}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
(() => {
|
||
|
|
const si = selectedTask.task.subItems.find((s) => s.id === selectedSubItemId);
|
||
|
|
if (!si) return (
|
||
|
|
<div className="flex h-full flex-col items-center justify-center gap-1 text-muted-foreground">
|
||
|
|
<PointerIcon className="h-6 w-6" />
|
||
|
|
<span className="text-xs">왼쪽에서 수행항목을 선택하세요</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
const siLogs = selectedTask.task.workLogs
|
||
|
|
.map((wl, i) => ({ ...wl, _idx: i }))
|
||
|
|
.filter((wl) => wl.subItemId == si.id || String(wl.subItemId) === String(si.id))
|
||
|
|
.sort((a, b) => b.startDt.localeCompare(a.startDt));
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="border-b bg-muted/10 p-2.5">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-sm font-bold">{si.name}</span>
|
||
|
|
<Badge variant="outline" className="text-[9px]">{si.weight}%</Badge>
|
||
|
|
</div>
|
||
|
|
<div className="mt-1.5 flex items-center gap-2">
|
||
|
|
<Slider
|
||
|
|
className="flex-1"
|
||
|
|
value={[si.progress]}
|
||
|
|
min={0}
|
||
|
|
max={100}
|
||
|
|
step={5}
|
||
|
|
onValueChange={([v]) => handleUpdateSubProgress(si.id, v)}
|
||
|
|
/>
|
||
|
|
<span className={cn("min-w-[32px] text-right text-xs font-bold", getProgressColor(si.progress))}>{si.progress}%</span>
|
||
|
|
</div>
|
||
|
|
<div className="mt-0.5 text-[10px] text-muted-foreground">{siLogs.length}건의 기록</div>
|
||
|
|
</div>
|
||
|
|
<RenderLogs
|
||
|
|
title={si.name}
|
||
|
|
logs={siLogs}
|
||
|
|
editingLogIdx={editingLogIdx}
|
||
|
|
editForm={editForm}
|
||
|
|
setEditForm={setEditForm}
|
||
|
|
onStartEdit={handleStartEdit}
|
||
|
|
onStartNew={() => handleStartNewLog(si.id)}
|
||
|
|
onSave={(logIdx) => handleSaveLog(logIdx, si.id)}
|
||
|
|
onCancel={() => setEditingLogIdx(-1)}
|
||
|
|
onDelete={handleDeleteLog}
|
||
|
|
onOpenAtt={openAttModal}
|
||
|
|
onOpenPr={openPrModal}
|
||
|
|
onOpenCr={openCrModal}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
})()
|
||
|
|
)}
|
||
|
|
</ScrollArea>
|
||
|
|
</div>
|
||
|
|
</ResizablePanel>
|
||
|
|
</ResizablePanelGroup>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</ResizablePanel>
|
||
|
|
</ResizablePanelGroup>
|
||
|
|
|
||
|
|
{/* 첨부파일 모달 */}
|
||
|
|
<Dialog open={attModalOpen} onOpenChange={setAttModalOpen}>
|
||
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="text-base"><Paperclip className="mr-1.5 inline h-4 w-4" />첨부파일 ({modalAttachments.length})</DialogTitle>
|
||
|
|
<DialogDescription className="text-xs">파일을 추가하거나 삭제할 수 있습니다.</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{modalAttachments.map((f, i) => (
|
||
|
|
<div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
|
||
|
|
{getFileIcon(f.type)}
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="text-xs font-semibold">{f.name}</div>
|
||
|
|
<div className="text-[10px] text-muted-foreground">{f.type} · {f.size}</div>
|
||
|
|
</div>
|
||
|
|
<Button variant="outline" size="sm" className="h-6 text-[10px] text-destructive" onClick={() => setModalAttachments((p) => p.filter((_, idx) => idx !== i))}>삭제</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<div
|
||
|
|
className="cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors hover:border-primary hover:bg-accent/50"
|
||
|
|
onClick={() => {
|
||
|
|
const name = prompt("파일명 (예: photo.jpg, drawing.dwg)");
|
||
|
|
if (!name) return;
|
||
|
|
setModalAttachments((p) => [...p, { id: Date.now(), name, type: getFileType(name), size: `${(Math.random() * 10 + 0.5).toFixed(1)}MB` }]);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Upload className="mx-auto h-5 w-5 text-muted-foreground" />
|
||
|
|
<div className="mt-1 text-xs text-muted-foreground">클릭하여 파일 추가</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
||
|
|
<Button variant="outline" onClick={() => setAttModalOpen(false)} className="h-8 text-xs">닫기</Button>
|
||
|
|
<Button onClick={saveAttModal} className="h-8 text-xs">저장</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
|
||
|
|
{/* 구매요청 모달 */}
|
||
|
|
<Dialog open={prModalOpen} onOpenChange={setPrModalOpen}>
|
||
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="text-base"><ShoppingCart className="mr-1.5 inline h-4 w-4" />구매요청 관리</DialogTitle>
|
||
|
|
<DialogDescription className="text-xs">구매요청을 등록하고 관리합니다.</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">자재명 *</Label>
|
||
|
|
<Input value={prForm.item} onChange={(e) => setPrForm((p) => ({ ...p, item: e.target.value }))} placeholder="예: LM가이드 HSR15-R" className="h-7 text-xs" />
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-2 gap-1">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">수량</Label>
|
||
|
|
<Input value={prForm.qty} onChange={(e) => setPrForm((p) => ({ ...p, qty: e.target.value }))} type="number" className="h-7 text-xs" min={1} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">단위</Label>
|
||
|
|
<Select value={prForm.unit} onValueChange={(v) => setPrForm((p) => ({ ...p, unit: v }))}>
|
||
|
|
<SelectTrigger className="h-7 text-xs" size="xs"><SelectValue /></SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{["EA", "SET", "BOX", "M", "KG"].map((u) => (<SelectItem key={u} value={u}>{u}</SelectItem>))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">사유</Label>
|
||
|
|
<Input value={prForm.reason} onChange={(e) => setPrForm((p) => ({ ...p, reason: e.target.value }))} placeholder="구매 사유 입력" className="h-7 text-xs" />
|
||
|
|
</div>
|
||
|
|
<div className="flex items-end gap-2">
|
||
|
|
<div className="flex-1">
|
||
|
|
<Label className="text-xs">상태</Label>
|
||
|
|
<Select value={prForm.status} onValueChange={(v) => setPrForm((p) => ({ ...p, status: v }))}>
|
||
|
|
<SelectTrigger className="h-7 text-xs" size="xs"><SelectValue /></SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{["요청", "견적중", "발주완료", "입고완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
<Button size="sm" className="h-7 text-xs" onClick={() => {
|
||
|
|
if (!prForm.item.trim()) return;
|
||
|
|
setModalPurchaseReqs((p) => [...p, { id: Date.now(), item: prForm.item.trim(), qty: parseInt(prForm.qty) || 1, unit: prForm.unit, reason: prForm.reason, status: prForm.status }]);
|
||
|
|
setPrForm((p) => ({ ...p, item: "", reason: "" }));
|
||
|
|
}}>
|
||
|
|
<Plus className="mr-0.5 h-3 w-3" />추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className="text-xs font-semibold">등록된 구매요청 ({modalPurchaseReqs.length})</div>
|
||
|
|
{modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없습니다.</div>}
|
||
|
|
{modalPurchaseReqs.map((pr, i) => (
|
||
|
|
<div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
|
||
|
|
<ShoppingCart className="h-3.5 w-3.5" />
|
||
|
|
<strong className="text-xs">{pr.item}</strong>
|
||
|
|
<span className="text-[10px] text-muted-foreground">{pr.qty} {pr.unit}</span>
|
||
|
|
{pr.reason && <span className="text-[10px] text-muted-foreground">{pr.reason}</span>}
|
||
|
|
<Badge className={cn("text-[9px]", PR_STATUS_STYLES[pr.status])}>{pr.status}</Badge>
|
||
|
|
<Button variant="ghost" size="sm" className="ml-auto h-5 w-5 p-0 opacity-30 hover:opacity-100" onClick={() => setModalPurchaseReqs((p) => p.filter((_, idx) => idx !== i))}>
|
||
|
|
<Trash2 className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
||
|
|
<Button variant="outline" onClick={() => setPrModalOpen(false)} className="h-8 text-xs">닫기</Button>
|
||
|
|
<Button onClick={savePrModal} className="h-8 text-xs">저장</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
|
||
|
|
{/* 협조요청 모달 */}
|
||
|
|
<Dialog open={crModalOpen} onOpenChange={setCrModalOpen}>
|
||
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="text-base"><Handshake className="mr-1.5 inline h-4 w-4" />협조요청 관리</DialogTitle>
|
||
|
|
<DialogDescription className="text-xs">협조요청을 등록하고 관리합니다.</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">요청 제목 *</Label>
|
||
|
|
<Input value={crForm.title} onChange={(e) => setCrForm((p) => ({ ...p, title: e.target.value }))} placeholder="협조 요청 제목" className="h-7 text-xs" />
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">대상자 *</Label>
|
||
|
|
<Select value={crForm.toUser} onValueChange={(v) => setCrForm((p) => ({ ...p, toUser: v }))}>
|
||
|
|
<SelectTrigger className="h-7 text-xs" size="xs"><SelectValue placeholder="선택" /></SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{USERS.filter((u) => u !== currentUser).map((u) => (<SelectItem key={u} value={u}>{u} ({USER_INFO[u].role})</SelectItem>))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">기한</Label>
|
||
|
|
<Input type="date" value={crForm.dueDate} onChange={(e) => setCrForm((p) => ({ ...p, dueDate: e.target.value }))} className="h-7 text-xs" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">요청 내용</Label>
|
||
|
|
<Textarea value={crForm.desc} onChange={(e) => setCrForm((p) => ({ ...p, desc: e.target.value }))} placeholder="상세 요청 내용" className="min-h-[50px] text-xs" rows={2} />
|
||
|
|
</div>
|
||
|
|
<div className="text-right">
|
||
|
|
<Button size="sm" className="h-7 text-xs" onClick={() => {
|
||
|
|
if (!crForm.title.trim() || !crForm.toUser) return;
|
||
|
|
setModalCoopReqs((p) => [...p, { id: `CR-${Date.now()}`, toUser: crForm.toUser, toDept: USER_INFO[crForm.toUser]?.role || "", title: crForm.title.trim(), desc: crForm.desc, status: "요청", dueDate: crForm.dueDate, responses: [] }]);
|
||
|
|
setCrForm((p) => ({ ...p, title: "", desc: "" }));
|
||
|
|
}}>
|
||
|
|
<Plus className="mr-0.5 h-3 w-3" />추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className="text-xs font-semibold">등록된 협조요청 ({modalCoopReqs.length})</div>
|
||
|
|
{modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없습니다.</div>}
|
||
|
|
{modalCoopReqs.map((cr, i) => (
|
||
|
|
<div key={cr.id} className="space-y-1 rounded-md border bg-muted/30 p-2">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Handshake className="h-3.5 w-3.5" />
|
||
|
|
<strong className="flex-1 text-xs">{cr.title}</strong>
|
||
|
|
<span className="text-[10px] text-muted-foreground">{cr.toUser} ({cr.toDept})</span>
|
||
|
|
<Badge className={cn("text-[9px]", CR_STATUS_STYLES[cr.status])}>{cr.status}</Badge>
|
||
|
|
<Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-30 hover:opacity-100" onClick={() => setModalCoopReqs((p) => p.filter((_, idx) => idx !== i))}>
|
||
|
|
<Trash2 className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
{cr.desc && <div className="pl-5 text-[11px] text-muted-foreground">{cr.desc}</div>}
|
||
|
|
<div className="pl-5 text-[10px] text-muted-foreground">기한: {cr.dueDate}</div>
|
||
|
|
{(cr.responses || []).map((r, ri) => (
|
||
|
|
<div key={ri} className="pl-5 text-[10px] text-muted-foreground">
|
||
|
|
<strong className="text-primary">{r.user}</strong>: {r.content} <span className="text-muted-foreground">({r.date})</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
{cr.toUser === currentUser && cr.status !== "완료" && CR_NEXT[cr.status] && (
|
||
|
|
<div className="pl-5">
|
||
|
|
<Button size="sm" className="h-5 px-2 text-[10px]" onClick={() => {
|
||
|
|
setModalCoopReqs((p) => p.map((c, idx) => idx === i ? { ...c, status: CR_NEXT[c.status] || c.status } : c));
|
||
|
|
}}>
|
||
|
|
{CR_NEXT[cr.status]}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
||
|
|
<Button variant="outline" onClick={() => setCrModalOpen(false)} className="h-8 text-xs">닫기</Button>
|
||
|
|
<Button onClick={saveCrModal} className="h-8 text-xs">저장</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ========== 수행기록 렌더 서브컴포넌트 ==========
|
||
|
|
interface RenderLogsProps {
|
||
|
|
title: string;
|
||
|
|
logs: (WorkLog & { _idx: number })[];
|
||
|
|
editingLogIdx: number;
|
||
|
|
editForm: { startDt: string; endDt: string; desc: string };
|
||
|
|
setEditForm: React.Dispatch<React.SetStateAction<{ startDt: string; endDt: string; desc: string }>>;
|
||
|
|
onStartEdit: (idx: number) => void;
|
||
|
|
onStartNew: () => void;
|
||
|
|
onSave: (logIdx: number) => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
onDelete: (idx: number) => void;
|
||
|
|
onOpenAtt: (idx: number) => void;
|
||
|
|
onOpenPr: (idx: number) => void;
|
||
|
|
onOpenCr: (idx: number) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStartEdit, onStartNew, onSave, onCancel, onDelete, onOpenAtt, onOpenPr, onOpenCr }: RenderLogsProps) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{logs.length === 0 && editingLogIdx !== -2 && (
|
||
|
|
<div className="flex flex-col items-center justify-center gap-1 py-8 text-muted-foreground">
|
||
|
|
<FileEdit className="h-6 w-6" />
|
||
|
|
<span className="text-xs">기록이 없습니다</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{logs.map((log) => {
|
||
|
|
const idx = log._idx;
|
||
|
|
if (editingLogIdx === idx) {
|
||
|
|
return (
|
||
|
|
<EditLogRow
|
||
|
|
key={idx}
|
||
|
|
logIdx={idx}
|
||
|
|
editForm={editForm}
|
||
|
|
setEditForm={setEditForm}
|
||
|
|
onSave={onSave}
|
||
|
|
onCancel={onCancel}
|
||
|
|
onOpenAtt={onOpenAtt}
|
||
|
|
onOpenPr={onOpenPr}
|
||
|
|
onOpenCr={onOpenCr}
|
||
|
|
attCount={(log.attachments || []).length}
|
||
|
|
prCount={(log.purchaseReqs || []).length}
|
||
|
|
crCount={(log.coopReqs || []).length}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
const attC = (log.attachments || []).length;
|
||
|
|
const prC = (log.purchaseReqs || []).length;
|
||
|
|
const crC = (log.coopReqs || []).length;
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={idx}
|
||
|
|
className="flex cursor-pointer items-center gap-1.5 border-b px-2.5 py-1.5 text-xs transition-colors hover:bg-accent/50"
|
||
|
|
onClick={() => onStartEdit(idx)}
|
||
|
|
title="클릭하여 수정"
|
||
|
|
>
|
||
|
|
<span className="min-w-[75px] text-[11px] text-muted-foreground">{fmtDtShort(log.startDt)}~{log.endDt.substring(11, 16)}</span>
|
||
|
|
<Badge variant="outline" className="h-4 min-w-[26px] justify-center px-1 text-[10px] font-bold text-primary">{log.hours}h</Badge>
|
||
|
|
<span className="min-w-0 flex-1 truncate">{log.desc}</span>
|
||
|
|
<div className="flex gap-1">
|
||
|
|
{attC > 0 && (
|
||
|
|
<Badge variant="outline" className="h-4 cursor-pointer gap-0.5 px-1 text-[9px] hover:border-primary" onClick={(e) => { e.stopPropagation(); onOpenAtt(idx); }}>
|
||
|
|
<Paperclip className="h-2.5 w-2.5" />{attC}
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
{prC > 0 && (
|
||
|
|
<Badge className="h-4 cursor-pointer gap-0.5 bg-amber-50 px-1 text-[9px] text-amber-800 hover:bg-amber-100 dark:bg-amber-900/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
|
||
|
|
<ShoppingCart className="h-2.5 w-2.5" />{prC}
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
{crC > 0 && (
|
||
|
|
<Badge className="h-4 cursor-pointer gap-0.5 bg-pink-50 px-1 text-[9px] text-pink-800 hover:bg-pink-100 dark:bg-pink-900/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
|
||
|
|
<Handshake className="h-2.5 w-2.5" />{crC}
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-20 hover:opacity-100" onClick={(e) => { e.stopPropagation(); onDelete(idx); }}>
|
||
|
|
<Trash2 className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{editingLogIdx === -2 && (
|
||
|
|
<EditLogRow
|
||
|
|
logIdx={-1}
|
||
|
|
editForm={editForm}
|
||
|
|
setEditForm={setEditForm}
|
||
|
|
onSave={onSave}
|
||
|
|
onCancel={onCancel}
|
||
|
|
onOpenAtt={onOpenAtt}
|
||
|
|
onOpenPr={onOpenPr}
|
||
|
|
onOpenCr={onOpenCr}
|
||
|
|
attCount={0}
|
||
|
|
prCount={0}
|
||
|
|
crCount={0}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
<Button variant="outline" size="sm" className="m-2 h-6 border-dashed text-[10px] text-muted-foreground" onClick={onStartNew}>
|
||
|
|
<Plus className="mr-0.5 h-3 w-3" />기록 추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ========== 편집 행 ==========
|
||
|
|
interface EditLogRowProps {
|
||
|
|
logIdx: number;
|
||
|
|
editForm: { startDt: string; endDt: string; desc: string };
|
||
|
|
setEditForm: React.Dispatch<React.SetStateAction<{ startDt: string; endDt: string; desc: string }>>;
|
||
|
|
onSave: (logIdx: number) => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
onOpenAtt: (idx: number) => void;
|
||
|
|
onOpenPr: (idx: number) => void;
|
||
|
|
onOpenCr: (idx: number) => void;
|
||
|
|
attCount: number;
|
||
|
|
prCount: number;
|
||
|
|
crCount: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt, onOpenPr, onOpenCr, attCount, prCount, crCount }: EditLogRowProps) {
|
||
|
|
const hours = calcHours(editForm.startDt, editForm.endDt);
|
||
|
|
return (
|
||
|
|
<div className="space-y-1.5 rounded-md border border-emerald-300 bg-emerald-50/50 p-2.5 dark:border-emerald-800 dark:bg-emerald-900/10">
|
||
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
||
|
|
<Input type="datetime-local" value={editForm.startDt} onChange={(e) => setEditForm((p) => ({ ...p, startDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
|
||
|
|
<span className="text-xs text-muted-foreground">~</span>
|
||
|
|
<Input type="datetime-local" value={editForm.endDt} onChange={(e) => setEditForm((p) => ({ ...p, endDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
|
||
|
|
<span className="min-w-[30px] text-xs font-semibold text-primary">{hours}h</span>
|
||
|
|
</div>
|
||
|
|
<Textarea
|
||
|
|
value={editForm.desc}
|
||
|
|
onChange={(e) => setEditForm((p) => ({ ...p, desc: e.target.value }))}
|
||
|
|
placeholder="수행 내용을 입력하세요..."
|
||
|
|
className="min-h-[32px] text-xs"
|
||
|
|
rows={1}
|
||
|
|
/>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="flex gap-1">
|
||
|
|
<Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenAtt(logIdx)}>
|
||
|
|
<Paperclip className="mr-0.5 h-2.5 w-2.5" />첨부{attCount > 0 && ` (${attCount})`}
|
||
|
|
</Button>
|
||
|
|
<Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenPr(logIdx)}>
|
||
|
|
<ShoppingCart className="mr-0.5 h-2.5 w-2.5" />구매{prCount > 0 && ` (${prCount})`}
|
||
|
|
</Button>
|
||
|
|
<Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenCr(logIdx)}>
|
||
|
|
<Handshake className="mr-0.5 h-2.5 w-2.5" />협조{crCount > 0 && ` (${crCount})`}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-1">
|
||
|
|
<Button variant="outline" size="sm" className="h-5 px-2 text-[10px]" onClick={onCancel}>취소</Button>
|
||
|
|
<Button size="sm" className="h-5 bg-emerald-500 px-2 text-[10px] hover:bg-emerald-600" onClick={() => onSave(logIdx)}>저장</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|