summaryrefslogtreecommitdiff
path: root/lib/approval-line/table
diff options
context:
space:
mode:
authorjoonhoekim <26rote@gmail.com>2025-08-11 09:34:40 +0000
committerjoonhoekim <26rote@gmail.com>2025-08-11 09:34:40 +0000
commitbcd462d6e60871b86008e072f4b914138fc5c328 (patch)
treec22876fd6c6e7e48254587848b9dff50cdb8b032 /lib/approval-line/table
parentcbb4c7fe0b94459162ad5e998bc05cd293e0ff96 (diff)
(김준회) 리치텍스트에디터 (결재템플릿을 위한 공통컴포넌트), command-menu 에러 수정, 결재 템플릿 관리, 결재선 관리, ECC RFQ+PR Item 수신시 비즈니스테이블(ProcurementRFQ) 데이터 적재, WSDL 오류 수정
Diffstat (limited to 'lib/approval-line/table')
-rw-r--r--lib/approval-line/table/approval-line-table-columns.tsx197
-rw-r--r--lib/approval-line/table/approval-line-table-toolbar-actions.tsx73
-rw-r--r--lib/approval-line/table/approval-line-table.tsx130
-rw-r--r--lib/approval-line/table/create-approval-line-sheet.tsx224
-rw-r--r--lib/approval-line/table/delete-approval-line-dialog.tsx168
-rw-r--r--lib/approval-line/table/duplicate-approval-line-sheet.tsx206
-rw-r--r--lib/approval-line/table/update-approval-line-sheet.tsx264
7 files changed, 1262 insertions, 0 deletions
diff --git a/lib/approval-line/table/approval-line-table-columns.tsx b/lib/approval-line/table/approval-line-table-columns.tsx
new file mode 100644
index 00000000..5b35b92c
--- /dev/null
+++ b/lib/approval-line/table/approval-line-table-columns.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import * as React from "react"
+import { ColumnDef } from "@tanstack/react-table"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { type ApprovalLine } from "../service"
+import { formatApprovalLine } from "../utils/format"
+import { formatDate } from "@/lib/utils"
+import { MoreHorizontal, Copy, Edit, Trash2 } from "lucide-react"
+
+interface GetColumnsProps {
+ setRowAction: React.Dispatch<React.SetStateAction<{
+ type: "update" | "delete" | "duplicate";
+ row: { original: ApprovalLine };
+ } | null>>;
+}
+
+
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ApprovalLine>[] {
+ return [
+ {
+ id: "select",
+ header: ({ table }) => (
+ <Checkbox
+ checked={
+ table.getIsAllPageRowsSelected() ||
+ (table.getIsSomePageRowsSelected() && "indeterminate")
+ }
+ onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ className="translate-y-[2px]"
+ />
+ ),
+ cell: ({ row }) => (
+ <Checkbox
+ checked={row.getIsSelected()}
+ onCheckedChange={(value) => row.toggleSelected(!!value)}
+ aria-label="Select row"
+ className="translate-y-[2px]"
+ />
+ ),
+ enableSorting: false,
+ enableHiding: false,
+ },
+ {
+ accessorKey: "name",
+ header: ({ column }) => (
+ <DataTableColumnHeader column={column} title="결재선 이름" />
+ ),
+ cell: ({ row }) => {
+ return (
+ <div className="flex space-x-2">
+ <span className="max-w-[500px] truncate font-medium">
+ {row.getValue("name")}
+ </span>
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "description",
+ header: ({ column }) => (
+ <DataTableColumnHeader column={column} title="설명" />
+ ),
+ cell: ({ row }) => {
+ return (
+ <div className="flex space-x-2">
+ <span className="max-w-[500px] truncate">
+ {row.getValue("description") || "-"}
+ </span>
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "aplns",
+ header: ({ column }) => (
+ <DataTableColumnHeader column={column} title="결재선" />
+ ),
+ cell: ({ row }) => {
+ const aplns = row.getValue("aplns") as unknown as Array<{
+ seq: string;
+ name?: string;
+ emailAddress?: string;
+ role: string;
+ }>;
+ const approvalLineText = formatApprovalLine(aplns);
+
+ return (
+ <div className="flex space-x-2">
+ <div className="flex flex-col gap-1">
+ <div className="max-w-[400px] truncate text-sm">
+ {approvalLineText}
+ <Badge variant="secondary" className="w-fit">
+ {aplns?.length || 0}명
+ </Badge>
+ </div>
+ </div>
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "createdAt",
+ header: ({ column }) => (
+ <DataTableColumnHeader column={column} title="생성일" />
+ ),
+ cell: ({ row }) => {
+ return (
+ <div className="flex space-x-2">
+ <span className="max-w-[500px] truncate">
+ {formatDate(row.getValue("createdAt"))}
+ </span>
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "updatedAt",
+ header: ({ column }) => (
+ <DataTableColumnHeader column={column} title="수정일" />
+ ),
+ cell: ({ row }) => {
+ return (
+ <div className="flex space-x-2">
+ <span className="max-w-[500px] truncate">
+ {formatDate(row.getValue("updatedAt"))}
+ </span>
+ </div>
+ )
+ },
+ },
+ {
+ id: "actions",
+ cell: ({ row }) => {
+
+ return (
+ <DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button
+ aria-label="Open menu"
+ variant="ghost"
+ className="flex size-8 p-0 data-[state=open]:bg-muted"
+ >
+ <MoreHorizontal className="size-4" aria-hidden="true" />
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end" className="w-40">
+ <DropdownMenuItem
+ onClick={() => {
+ setRowAction({ type: "update", row });
+ }}
+ >
+ <Edit className="mr-2 size-4" aria-hidden="true" />
+ 수정하기
+ </DropdownMenuItem>
+
+ <DropdownMenuItem
+ onClick={() => {
+ setRowAction({ type: "duplicate", row });
+ }}
+ >
+ <Copy className="mr-2 size-4" aria-hidden="true" />
+ 복제하기
+ </DropdownMenuItem>
+
+ <DropdownMenuSeparator />
+
+ <DropdownMenuItem
+ onClick={() => {
+ setRowAction({ type: "delete", row });
+ }}
+ className="text-destructive focus:text-destructive"
+ >
+ <Trash2 className="mr-2 size-4" aria-hidden="true" />
+ 삭제하기
+ </DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ );
+ },
+ enableSorting: false,
+ enableHiding: false,
+ size: 80,
+ },
+ ]
+} \ No newline at end of file
diff --git a/lib/approval-line/table/approval-line-table-toolbar-actions.tsx b/lib/approval-line/table/approval-line-table-toolbar-actions.tsx
new file mode 100644
index 00000000..6b6600fe
--- /dev/null
+++ b/lib/approval-line/table/approval-line-table-toolbar-actions.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { DataTableViewOptions } from "@/components/data-table/data-table-view-options"
+import { Plus, Download, Upload } from "lucide-react"
+import { type ApprovalLine } from "../service"
+
+interface ApprovalLineTableToolbarActionsProps {
+ table: Table<ApprovalLine>
+ onCreateLine: () => void
+}
+
+export function ApprovalLineTableToolbarActions({
+ table,
+ onCreateLine,
+}: ApprovalLineTableToolbarActionsProps) {
+ const isFiltered = table.getState().columnFilters.length > 0
+
+ return (
+ <div className="flex items-center justify-between">
+ <div className="flex flex-1 items-center space-x-2">
+ <Input
+ placeholder="결재선 검색..."
+ value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+ onChange={(event) =>
+ table.getColumn("name")?.setFilterValue(event.target.value)
+ }
+ className="h-8 w-[150px] lg:w-[250px]"
+ />
+ {isFiltered && (
+ <Button
+ variant="ghost"
+ onClick={() => table.resetColumnFilters()}
+ className="h-8 px-2 lg:px-3"
+ >
+ 초기화
+ </Button>
+ )}
+ </div>
+ <div className="flex items-center space-x-2">
+ <Button
+ variant="outline"
+ size="sm"
+ className="ml-auto hidden h-8 lg:flex"
+ >
+ <Upload className="mr-2 h-4 w-4" />
+ 가져오기
+ </Button>
+ <Button
+ variant="outline"
+ size="sm"
+ className="ml-auto hidden h-8 lg:flex"
+ >
+ <Download className="mr-2 h-4 w-4" />
+ 내보내기
+ </Button>
+ <DataTableViewOptions table={table} />
+ <Button
+ variant="outline"
+ size="sm"
+ className="ml-auto h-8"
+ onClick={onCreateLine}
+ >
+ <Plus className="mr-2 h-4 w-4" />
+ 결재선 생성
+ </Button>
+ </div>
+ </div>
+ )
+} \ No newline at end of file
diff --git a/lib/approval-line/table/approval-line-table.tsx b/lib/approval-line/table/approval-line-table.tsx
new file mode 100644
index 00000000..21b9972c
--- /dev/null
+++ b/lib/approval-line/table/approval-line-table.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from 'react';
+import { useDataTable } from '@/hooks/use-data-table';
+import { DataTable } from '@/components/data-table/data-table';
+import { DataTableAdvancedToolbar } from '@/components/data-table/data-table-advanced-toolbar';
+import type {
+ DataTableAdvancedFilterField,
+ DataTableFilterField,
+ DataTableRowAction,
+} from '@/types/table';
+
+import { getColumns } from './approval-line-table-columns';
+import { getApprovalLineList } from '../service';
+import { type ApprovalLine } from '../service';
+import { ApprovalLineTableToolbarActions } from './approval-line-table-toolbar-actions';
+import { CreateApprovalLineSheet } from './create-approval-line-sheet';
+import { UpdateApprovalLineSheet } from './update-approval-line-sheet';
+import { DuplicateApprovalLineSheet } from './duplicate-approval-line-sheet';
+import { DeleteApprovalLineDialog } from './delete-approval-line-dialog';
+
+interface ApprovalLineTableProps {
+ promises: Promise<[
+ Awaited<ReturnType<typeof getApprovalLineList>>,
+ ]>;
+}
+
+export function ApprovalLineTable({ promises }: ApprovalLineTableProps) {
+ const [{ data, pageCount }] = React.use(promises);
+
+ const [rowAction, setRowAction] =
+ React.useState<DataTableRowAction<ApprovalLine> | null>(null);
+
+ const [showCreateSheet, setShowCreateSheet] = React.useState(false);
+
+ const columns = React.useMemo(
+ () => getColumns({ setRowAction }),
+ [setRowAction]
+ );
+
+ // 기본 & 고급 필터 필드
+ const filterFields: DataTableFilterField<ApprovalLine>[] = [];
+ const advancedFilterFields: DataTableAdvancedFilterField<ApprovalLine>[] = [
+ {
+ id: 'name',
+ label: '결재선 이름',
+ type: 'text',
+ },
+ {
+ id: 'description',
+ label: '설명',
+ type: 'text',
+ },
+ {
+ id: 'createdAt',
+ label: '생성일',
+ type: 'date',
+ },
+ {
+ id: 'updatedAt',
+ label: '수정일',
+ type: 'date',
+ },
+ ];
+
+ const { table } = useDataTable({
+ data,
+ columns,
+ pageCount,
+ filterFields,
+ enablePinning: true,
+ enableAdvancedFilter: true,
+ initialState: {
+ sorting: [{ id: 'updatedAt', desc: true }],
+ columnPinning: { right: ['actions'] },
+ },
+ getRowId: (row) => String(row.id),
+ shallow: false,
+ clearOnDefault: true,
+ });
+
+ return (
+ <>
+ <DataTable table={table}>
+ <DataTableAdvancedToolbar
+ table={table}
+ filterFields={advancedFilterFields}
+ shallow={false}
+ >
+ <ApprovalLineTableToolbarActions
+ table={table}
+ onCreateLine={() => setShowCreateSheet(true)}
+ />
+ </DataTableAdvancedToolbar>
+ </DataTable>
+
+ {/* 새 결재선 생성 Sheet */}
+ <CreateApprovalLineSheet
+ open={showCreateSheet}
+ onOpenChange={setShowCreateSheet}
+ />
+
+ {/* 결재선 수정 Sheet */}
+ <UpdateApprovalLineSheet
+ open={rowAction?.type === "update"}
+ onOpenChange={() => setRowAction(null)}
+ line={rowAction?.type === "update" ? rowAction.row.original : null}
+ />
+
+ {/* 결재선 복제 Sheet */}
+ <DuplicateApprovalLineSheet
+ open={rowAction?.type === "duplicate"}
+ onOpenChange={() => setRowAction(null)}
+ line={rowAction?.type === "duplicate" ? rowAction.row.original : null}
+ />
+
+ {/* 결재선 삭제 Dialog */}
+ <DeleteApprovalLineDialog
+ open={rowAction?.type === "delete"}
+ onOpenChange={() => setRowAction(null)}
+ lines={rowAction?.type === "delete" ? [rowAction.row.original] : []}
+ showTrigger={false}
+ onSuccess={() => {
+ setRowAction(null)
+ // 테이블 새로고침은 server action에서 자동으로 처리됨
+ }}
+ />
+ </>
+ );
+} \ No newline at end of file
diff --git a/lib/approval-line/table/create-approval-line-sheet.tsx b/lib/approval-line/table/create-approval-line-sheet.tsx
new file mode 100644
index 00000000..fdc8cc64
--- /dev/null
+++ b/lib/approval-line/table/create-approval-line-sheet.tsx
@@ -0,0 +1,224 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button } from "@/components/ui/button"
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet"
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Separator } from "@/components/ui/separator"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+import { createApprovalLine } from "../service"
+import { type ApprovalLineFormData, ApprovalLineSchema } from "../validations"
+import { ApprovalLineSelector } from "@/components/knox/approval/ApprovalLineSelector"
+import { OrganizationManagerSelector, type OrganizationManagerItem } from "@/components/common/organization/organization-manager-selector"
+import { useSession } from "next-auth/react"
+
+interface CreateApprovalLineSheetProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+}
+
+export function CreateApprovalLineSheet({ open, onOpenChange }: CreateApprovalLineSheetProps) {
+ const { data: session } = useSession();
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+ // 고유 ID 생성 함수 (조직 관리자 추가 시 사용)
+ const generateUniqueId = () => `apln-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+
+ const form = useForm<ApprovalLineFormData>({
+ resolver: zodResolver(ApprovalLineSchema),
+ defaultValues: {
+ name: "",
+ description: "",
+ aplns: [
+ // 기안자는 항상 첫 번째로 고정 (플레이스홀더)
+ {
+ id: generateUniqueId(),
+ epId: undefined,
+ userId: undefined,
+ emailAddress: undefined,
+ name: "기안자",
+ deptName: undefined,
+ role: "0",
+ seq: "0",
+ opinion: "",
+ },
+ ],
+ },
+ });
+
+ const aplns = form.watch("aplns");
+
+ // 조직 관리자 추가 (공용 선택기 외 보조 입력 경로)
+ const addOrganizationManagers = (managers: OrganizationManagerItem[]) => {
+ const next = [...aplns];
+ const uniqueSeqs = Array.from(new Set(next.map((a) => parseInt(a.seq))));
+ const maxSeq = uniqueSeqs.length ? Math.max(...uniqueSeqs) : 0;
+
+ managers.forEach((manager, idx) => {
+ const exists = next.findIndex((a) => a.epId === manager.managerId);
+ if (exists === -1) {
+ const newSeqNum = Math.max(1, maxSeq + 1 + idx);
+ const newSeq = newSeqNum.toString();
+ next.push({
+ id: generateUniqueId(),
+ epId: manager.managerId,
+ userId: undefined,
+ emailAddress: undefined,
+ name: manager.managerName,
+ deptName: manager.departmentName,
+ role: "1",
+ seq: newSeq,
+ opinion: "",
+ });
+ }
+ });
+
+ form.setValue("aplns", next, { shouldDirty: true });
+ };
+
+ const onSubmit = async (data: ApprovalLineFormData) => {
+ setIsSubmitting(true);
+ try {
+ if (!session?.user?.id) {
+ toast.error("로그인이 필요합니다.");
+ return;
+ }
+
+ await createApprovalLine({
+ name: data.name,
+ description: data.description,
+ aplns: data.aplns,
+ createdBy: Number(session.user.id),
+ });
+
+ toast.success("결재선이 성공적으로 생성되었습니다.");
+ form.reset();
+ onOpenChange(false);
+ } catch {
+ toast.error("결재선 생성 중 오류가 발생했습니다.");
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+ <Sheet open={open} onOpenChange={onOpenChange}>
+ <SheetContent className="w-full sm:max-w-4xl overflow-y-auto">
+ <SheetHeader>
+ <SheetTitle>결재선 생성</SheetTitle>
+ <SheetDescription>
+ 새로운 결재선을 생성합니다. 결재자를 추가하고 순서를 조정할 수 있습니다.
+ </SheetDescription>
+ </SheetHeader>
+
+ <div className="mt-6">
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+ {/* 기본 정보 */}
+ <div className="space-y-4">
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>결재선 이름 *</FormLabel>
+ <FormControl>
+ <Input placeholder="결재선 이름을 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="description"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>설명</FormLabel>
+ <FormControl>
+ <Textarea placeholder="결재선에 대한 설명을 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+
+ <Separator />
+
+ {/* 결재 경로 */}
+ <div className="space-y-4">
+ <h3 className="text-lg font-semibold">결재 경로</h3>
+
+ <ApprovalLineSelector
+ value={aplns}
+ onChange={(next) => form.setValue("aplns", next, { shouldDirty: true })}
+ placeholder="결재자를 검색하세요..."
+ domainFilter={{ type: "exclude", domains: ["partners"] }}
+ maxSelections={10}
+ />
+
+ {/* 조직 관리자 추가 (선택 사항) */}
+ {/* <div className="p-4 border border-dashed border-gray-300 rounded-lg">
+ <div className="mb-2">
+ <label className="text-sm font-medium text-gray-700">조직 관리자로 추가</label>
+ <p className="text-xs text-gray-500">조직별 책임자를 검색하여 추가하세요</p>
+ </div>
+ <OrganizationManagerSelector
+ selectedManagers={[]}
+ onManagersChange={addOrganizationManagers}
+ placeholder="조직 관리자를 검색하세요..."
+ maxSelections={10}
+ />
+ </div> */}
+ </div>
+
+ <Separator />
+
+ {/* 제출 버튼 */}
+ <div className="flex justify-end space-x-3">
+ <Button
+ type="button"
+ variant="outline"
+ onClick={() => onOpenChange(false)}
+ disabled={isSubmitting}
+ >
+ 취소
+ </Button>
+ <Button type="submit" disabled={isSubmitting}>
+ {isSubmitting ? (
+ <>
+ <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+ 생성 중...
+ </>
+ ) : (
+ "결재선 생성"
+ )}
+ </Button>
+ </div>
+ </form>
+ </Form>
+ </div>
+ </SheetContent>
+ </Sheet>
+ )
+} \ No newline at end of file
diff --git a/lib/approval-line/table/delete-approval-line-dialog.tsx b/lib/approval-line/table/delete-approval-line-dialog.tsx
new file mode 100644
index 00000000..aa1d8949
--- /dev/null
+++ b/lib/approval-line/table/delete-approval-line-dialog.tsx
@@ -0,0 +1,168 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "sonner"
+import { Loader2, Trash2, AlertTriangle } from "lucide-react"
+import { deleteApprovalLine, getApprovalLineUsage } from "../service"
+import { type ApprovalLine } from "../service"
+
+interface DeleteApprovalLineDialogProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ lines: ApprovalLine[]
+ showTrigger?: boolean
+ onSuccess?: () => void
+}
+
+export function DeleteApprovalLineDialog({
+ open,
+ onOpenChange,
+ lines,
+ showTrigger = true,
+ onSuccess,
+}: DeleteApprovalLineDialogProps) {
+ const [isDeleting, setIsDeleting] = React.useState(false)
+ const [usageInfo, setUsageInfo] = React.useState<{ templateCount: number } | null>(null)
+
+ // 사용량 정보 조회
+ React.useEffect(() => {
+ if (open && lines.length === 1) {
+ getApprovalLineUsage(lines[0].id).then(setUsageInfo)
+ }
+ }, [open, lines])
+
+ const handleDelete = async () => {
+ setIsDeleting(true)
+
+ try {
+ const deletePromises = lines.map((line) => deleteApprovalLine(line.id))
+ const results = await Promise.all(deletePromises)
+
+ const successCount = results.filter((r) => r.success).length
+ const errorCount = results.length - successCount
+
+ if (successCount > 0) {
+ toast.success(`${successCount}개의 결재선이 삭제되었습니다.`)
+ onSuccess?.()
+ onOpenChange(false)
+ }
+
+ if (errorCount > 0) {
+ toast.error(`${errorCount}개의 결재선 삭제에 실패했습니다.`)
+ }
+ } catch (error) {
+ toast.error("삭제 중 오류가 발생했습니다.")
+ } finally {
+ setIsDeleting(false)
+ }
+ }
+
+ const isSingleLine = lines.length === 1
+ const line = isSingleLine ? lines[0] : null
+
+ return (
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle className="flex items-center gap-2">
+ <Trash2 className="h-5 w-5 text-destructive" />
+ 결재선 삭제
+ </DialogTitle>
+ <DialogDescription>
+ {isSingleLine
+ ? `"${line?.name}" 결재선을 삭제하시겠습니까?`
+ : `${lines.length}개의 결재선을 삭제하시겠습니까?`}
+ </DialogDescription>
+ </DialogHeader>
+
+ <div className="space-y-4">
+ {/* 사용량 정보 표시 */}
+ {isSingleLine && usageInfo && (
+ <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+ <div className="flex items-center gap-2 text-yellow-700">
+ <AlertTriangle className="w-4 h-4" />
+ <span className="font-medium">사용 중인 결재선</span>
+ </div>
+ <p className="text-sm text-yellow-600 mt-1">
+ 이 결재선은 {usageInfo.templateCount}개의 템플릿에서 사용되고 있습니다.
+ </p>
+ </div>
+ )}
+
+ {/* 삭제할 결재선 목록 */}
+ <div className="space-y-2">
+ <h4 className="text-sm font-medium">삭제할 결재선:</h4>
+ <div className="space-y-2 max-h-40 overflow-y-auto">
+ {lines.map((line) => (
+ <div
+ key={line.id}
+ className="flex items-center justify-between p-3 border rounded-lg"
+ >
+ <div className="flex-1">
+ <div className="font-medium">{line.name}</div>
+ {line.description && (
+ <div className="text-sm text-gray-500">
+ {line.description}
+ </div>
+ )}
+ <div className="text-xs text-gray-400 mt-1">
+ 결재자 {(line.aplns as any[])?.length || 0}명
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ {/* 경고 메시지 */}
+ <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+ <div className="flex items-center gap-2 text-red-700">
+ <AlertTriangle className="w-4 h-4" />
+ <span className="font-medium">주의</span>
+ </div>
+ <p className="text-sm text-red-600 mt-1">
+ 삭제된 결재선은 복구할 수 없습니다. 이 작업은 되돌릴 수 없습니다.
+ </p>
+ </div>
+ </div>
+
+ <DialogFooter>
+ <Button
+ variant="outline"
+ onClick={() => onOpenChange(false)}
+ disabled={isDeleting}
+ >
+ 취소
+ </Button>
+ <Button
+ variant="destructive"
+ onClick={handleDelete}
+ disabled={isDeleting}
+ >
+ {isDeleting ? (
+ <>
+ <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+ 삭제 중...
+ </>
+ ) : (
+ <>
+ <Trash2 className="w-4 h-4 mr-2" />
+ 삭제
+ </>
+ )}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+} \ No newline at end of file
diff --git a/lib/approval-line/table/duplicate-approval-line-sheet.tsx b/lib/approval-line/table/duplicate-approval-line-sheet.tsx
new file mode 100644
index 00000000..0bb3ab2c
--- /dev/null
+++ b/lib/approval-line/table/duplicate-approval-line-sheet.tsx
@@ -0,0 +1,206 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet"
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { toast } from "sonner"
+import { Loader2, Copy } from "lucide-react"
+import { duplicateApprovalLine } from "../service"
+import { type ApprovalLine } from "../service"
+import { useSession } from "next-auth/react"
+
+const duplicateSchema = z.object({
+ name: z.string().min(1, "결재선 이름은 필수입니다"),
+ description: z.string().optional(),
+})
+
+type DuplicateFormData = z.infer<typeof duplicateSchema>
+
+interface DuplicateApprovalLineSheetProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ line: ApprovalLine | null
+}
+
+export function DuplicateApprovalLineSheet({
+ open,
+ onOpenChange,
+ line,
+}: DuplicateApprovalLineSheetProps) {
+ const { data: session } = useSession()
+ const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+ const form = useForm<DuplicateFormData>({
+ resolver: zodResolver(duplicateSchema),
+ defaultValues: {
+ name: line ? `${line.name} (복사본)` : "",
+ description: line?.description ? `${line.description} (복사본)` : "",
+ },
+ })
+
+ // line이 변경될 때 폼 초기화
+ React.useEffect(() => {
+ if (line) {
+ form.reset({
+ name: `${line.name} (복사본)`,
+ description: line.description ? `${line.description} (복사본)` : "",
+ })
+ }
+ }, [line, form])
+
+ const onSubmit = async (data: DuplicateFormData) => {
+ if (!line || !session?.user?.id) {
+ toast.error("복제할 결재선이 없거나 로그인이 필요합니다.")
+ return
+ }
+
+ setIsSubmitting(true)
+
+ try {
+ const result = await duplicateApprovalLine(
+ line.id,
+ data.name,
+ session.user.id
+ )
+
+ if (result.success) {
+ toast.success("결재선이 성공적으로 복제되었습니다.")
+ form.reset()
+ onOpenChange(false)
+ } else {
+ toast.error(result.error || "복제에 실패했습니다.")
+ }
+ } catch (error) {
+ toast.error("복제 중 오류가 발생했습니다.")
+ } finally {
+ setIsSubmitting(false)
+ }
+ }
+
+ if (!line) return null
+
+ return (
+ <Sheet open={open} onOpenChange={onOpenChange}>
+ <SheetContent>
+ <SheetHeader>
+ <SheetTitle className="flex items-center gap-2">
+ <Copy className="h-5 w-5" />
+ 결재선 복제
+ </SheetTitle>
+ <SheetDescription>
+ "{line.name}" 결재선을 복제하여 새로운 결재선을 만듭니다.
+ </SheetDescription>
+ </SheetHeader>
+
+ <div className="mt-6">
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+ {/* 원본 정보 표시 */}
+ <div className="p-4 bg-gray-50 border rounded-lg">
+ <h4 className="font-medium text-sm mb-2">원본 결재선 정보</h4>
+ <div className="space-y-2 text-sm">
+ <div>
+ <span className="font-medium">이름:</span> {line.name}
+ </div>
+ {line.description && (
+ <div>
+ <span className="font-medium">설명:</span> {line.description}
+ </div>
+ )}
+ <div>
+ <span className="font-medium">결재자:</span> {(line.aplns as any[])?.length || 0}명
+ </div>
+ </div>
+ </div>
+
+ {/* 새 결재선 정보 */}
+ <div className="space-y-4">
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>새 결재선 이름 *</FormLabel>
+ <FormControl>
+ <Input placeholder="새 결재선 이름을 입력하세요" {...field} />
+ </FormControl>
+ <FormDescription>
+ 원본과 구분할 수 있는 이름을 입력하세요.
+ </FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="description"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>설명</FormLabel>
+ <FormControl>
+ <Textarea
+ placeholder="새 결재선에 대한 설명을 입력하세요"
+ {...field}
+ />
+ </FormControl>
+ <FormDescription>
+ 선택사항입니다. 결재선의 용도나 특징을 설명할 수 있습니다.
+ </FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+
+ {/* 제출 버튼 */}
+ <div className="flex justify-end space-x-3">
+ <Button
+ type="button"
+ variant="outline"
+ onClick={() => onOpenChange(false)}
+ disabled={isSubmitting}
+ >
+ 취소
+ </Button>
+ <Button type="submit" disabled={isSubmitting}>
+ {isSubmitting ? (
+ <>
+ <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+ 복제 중...
+ </>
+ ) : (
+ <>
+ <Copy className="w-4 h-4 mr-2" />
+ 결재선 복제
+ </>
+ )}
+ </Button>
+ </div>
+ </form>
+ </Form>
+ </div>
+ </SheetContent>
+ </Sheet>
+ )
+} \ No newline at end of file
diff --git a/lib/approval-line/table/update-approval-line-sheet.tsx b/lib/approval-line/table/update-approval-line-sheet.tsx
new file mode 100644
index 00000000..efc720de
--- /dev/null
+++ b/lib/approval-line/table/update-approval-line-sheet.tsx
@@ -0,0 +1,264 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button } from "@/components/ui/button"
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet"
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Separator } from "@/components/ui/separator"
+import { toast } from "sonner"
+import { Loader2, Edit } from "lucide-react"
+import { updateApprovalLine, type ApprovalLine } from "../service"
+import { type ApprovalLineFormData, ApprovalLineSchema } from "../validations"
+import { OrganizationManagerSelector, type OrganizationManagerItem } from "@/components/common/organization/organization-manager-selector"
+import { useSession } from "next-auth/react"
+import { ApprovalLineSelector } from "@/components/knox/approval/ApprovalLineSelector"
+
+interface UpdateApprovalLineSheetProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ line: ApprovalLine | null
+}
+
+// 최소 형태의 Apln 아이템 타입 (line.aplns JSON 구조 대응)
+interface MinimalAplnItem {
+ id: string
+ epId?: string
+ userId?: string
+ emailAddress?: string
+ name?: string
+ deptName?: string
+ role: "0" | "1" | "2" | "3" | "4" | "7" | "9"
+ seq: string
+ opinion?: string
+ [key: string]: unknown
+}
+
+export function UpdateApprovalLineSheet({ open, onOpenChange, line }: UpdateApprovalLineSheetProps) {
+ const { data: session } = useSession();
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+ // 고유 ID 생성 함수 (조직 관리자 추가 시 사용)
+ const generateUniqueId = () => `apln-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+
+ const form = useForm<ApprovalLineFormData>({
+ resolver: zodResolver(ApprovalLineSchema),
+ defaultValues: {
+ name: "",
+ description: "",
+ aplns: [],
+ },
+ });
+
+ // line이 변경될 때 폼 초기화
+ React.useEffect(() => {
+ if (line) {
+ const existingAplns = (line.aplns as unknown as MinimalAplnItem[]) || [];
+
+ // 기안자가 없으면 추가
+ const hasDraft = existingAplns.some((a) => String(a.seq) === "0");
+ let nextAplns: MinimalAplnItem[] = existingAplns;
+
+ if (!hasDraft) {
+ nextAplns = [
+ {
+ id: generateUniqueId(),
+ epId: undefined,
+ userId: undefined,
+ emailAddress: undefined,
+ name: "기안자",
+ deptName: undefined,
+ role: "0",
+ seq: "0",
+ opinion: "",
+ },
+ ...existingAplns,
+ ];
+ }
+
+ form.reset({
+ name: line.name,
+ description: line.description || "",
+ aplns: nextAplns as ApprovalLineFormData["aplns"],
+ });
+ }
+ }, [line, form]);
+
+ const aplns = form.watch("aplns");
+
+ // 조직 관리자 추가 (공용 선택기 외 보조 입력 경로)
+ const addOrganizationManagers = (managers: OrganizationManagerItem[]) => {
+ const next = [...aplns];
+ const uniqueSeqs = Array.from(new Set(next.map((a) => parseInt(a.seq))));
+ const maxSeq = uniqueSeqs.length ? Math.max(...uniqueSeqs) : 0;
+
+ managers.forEach((manager, idx) => {
+ const exists = next.findIndex((a) => a.epId === manager.managerId);
+ if (exists === -1) {
+ const newSeqNum = Math.max(1, maxSeq + 1 + idx);
+ const newSeq = newSeqNum.toString();
+ next.push({
+ id: generateUniqueId(),
+ epId: manager.managerId,
+ userId: undefined,
+ emailAddress: undefined,
+ name: manager.managerName,
+ deptName: manager.departmentName,
+ role: "1",
+ seq: newSeq,
+ opinion: "",
+ });
+ }
+ });
+
+ form.setValue("aplns", next, { shouldDirty: true });
+ };
+
+ const onSubmit = async (data: ApprovalLineFormData) => {
+ if (!line || !session?.user?.id) {
+ toast.error("수정할 결재선이 없거나 로그인이 필요합니다.");
+ return;
+ }
+
+ setIsSubmitting(true);
+ try {
+ await updateApprovalLine(line.id, {
+ name: data.name,
+ description: data.description,
+ aplns: data.aplns,
+ updatedBy: Number(session.user.id),
+ });
+
+ toast.success("결재선이 성공적으로 수정되었습니다.");
+ onOpenChange(false);
+ } catch {
+ toast.error("결재선 수정 중 오류가 발생했습니다.");
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ if (!line) return null;
+
+ return (
+ <Sheet open={open} onOpenChange={onOpenChange}>
+ <SheetContent className="w-full sm:max-w-4xl overflow-y-auto">
+ <SheetHeader>
+ <SheetTitle className="flex items-center gap-2">
+ <Edit className="h-5 w-5" />
+ 결재선 수정
+ </SheetTitle>
+ <SheetDescription>
+ &quot;{line.name}&quot; 결재선을 수정합니다. 결재자를 추가하고 순서를 조정할 수 있습니다.
+ </SheetDescription>
+ </SheetHeader>
+
+ <div className="mt-6">
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+ {/* 기본 정보 */}
+ <div className="space-y-4">
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>결재선 이름 *</FormLabel>
+ <FormControl>
+ <Input placeholder="결재선 이름을 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="description"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>설명</FormLabel>
+ <FormControl>
+ <Textarea placeholder="결재선에 대한 설명을 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+
+ <Separator />
+
+ {/* 결재 경로 */}
+ <div className="space-y-4">
+ <h3 className="text-lg font-semibold">결재 경로</h3>
+
+ <ApprovalLineSelector
+ value={aplns}
+ onChange={(next) => form.setValue("aplns", next, { shouldDirty: true })}
+ placeholder="결재자를 검색하세요..."
+ domainFilter={{ type: "exclude", domains: ["partners"] }}
+ maxSelections={10}
+ />
+
+ {/* 조직 관리자 추가 (선택 사항) */}
+ {/* <div className="p-4 border border-dashed border-gray-300 rounded-lg">
+ <div className="mb-2">
+ <label className="text-sm font-medium text-gray-700">조직 관리자로 추가</label>
+ <p className="text-xs text-gray-500">조직별 책임자를 검색하여 추가하세요</p>
+ </div>
+ <OrganizationManagerSelector
+ selectedManagers={[]}
+ onManagersChange={addOrganizationManagers}
+ placeholder="조직 관리자를 검색하세요..."
+ maxSelections={10}
+ />
+ </div> */}
+ </div>
+
+ <Separator />
+
+ {/* 제출 버튼 */}
+ <div className="flex justify-end space-x-3">
+ <Button
+ type="button"
+ variant="outline"
+ onClick={() => onOpenChange(false)}
+ disabled={isSubmitting}
+ >
+ 취소
+ </Button>
+ <Button type="submit" disabled={isSubmitting}>
+ {isSubmitting ? (
+ <>
+ <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+ 수정 중...
+ </>
+ ) : (
+ "결재선 수정"
+ )}
+ </Button>
+ </div>
+ </form>
+ </Form>
+ </div>
+ </SheetContent>
+ </Sheet>
+ )
+} \ No newline at end of file