diff options
40 files changed, 12312 insertions, 0 deletions
diff --git a/app/[lng]/evcp/(evcp)/budgetary-tech-sales-ship/page.tsx b/app/[lng]/evcp/(evcp)/budgetary-tech-sales-ship/page.tsx new file mode 100644 index 00000000..05b856e5 --- /dev/null +++ b/app/[lng]/evcp/(evcp)/budgetary-tech-sales-ship/page.tsx @@ -0,0 +1,61 @@ +import { searchParamsCache } from "@/lib/techsales-rfq/validations" +import { getTechSalesRfqsWithJoin } from "@/lib/techsales-rfq/service" +import { getValidFilters } from "@/lib/data-table" +import { Shell } from "@/components/shell" +import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton" +import { RFQListTable } from "@/lib/techsales-rfq/table/rfq-table" +import { type SearchParams } from "@/types/table" +import * as React from "react" + +interface RfqPageProps { + searchParams: Promise<SearchParams> +} + +export default async function RfqPage(props: RfqPageProps) { + // searchParams를 await하여 resolve + const searchParams = await props.searchParams + + // 파라미터 파싱 + const search = searchParamsCache.parse(searchParams); + const validFilters = getValidFilters(search.filters); + + // 기술영업 조선 RFQ 데이터를 Promise.all로 감싸서 전달 + const promises = Promise.all([ + getTechSalesRfqsWithJoin({ + ...search, // 모든 파라미터 전달 (page, perPage, sort, basicFilters, filters 등) + filters: validFilters, // 고급 필터를 명시적으로 오버라이드 (파싱된 버전) + }) + ]) + + return ( + <Shell variant="fullscreen" className="h-full"> {/* fullscreen variant 사용 */} + {/* 고정 헤더 영역 */} + <div className="flex-shrink-0"> + <div className="flex items-center justify-between"> + <div> + <h2 className="text-2xl font-bold tracking-tight"> + 기술영업-조선 RFQ + </h2> + </div> + </div> + </div> + + {/* 테이블 영역 - 남은 공간 모두 차지 */} + <div className="flex-1 min-h-0"> + <React.Suspense + fallback={ + <DataTableSkeleton + columnCount={8} + searchableColumnCount={2} + filterableColumnCount={3} + cellWidths={["10rem", "15rem", "12rem", "12rem", "8rem", "8rem", "10rem", "8rem"]} + shrinkZero + /> + } + > + <RFQListTable promises={promises} className="h-full" /> + </React.Suspense> + </div> + </Shell> + ) +}
\ No newline at end of file diff --git a/app/[lng]/partners/(partners)/techsales/rfq-offshore-hull/page.tsx b/app/[lng]/partners/(partners)/techsales/rfq-offshore-hull/page.tsx new file mode 100644 index 00000000..40be6773 --- /dev/null +++ b/app/[lng]/partners/(partners)/techsales/rfq-offshore-hull/page.tsx @@ -0,0 +1,17 @@ +import { Shell } from "@/components/shell"; + +export default function TechSalesRfqShipPage() { + return ( + <Shell className="gap-6"> + <div> + <h1 className="text-2xl font-bold">기술영업 - 해양 Hull/Top RFQ</h1> + <p className="text-muted-foreground"> + 벤더가 해양 Hull/Top RFQ 목록을 확인하고 관리합니다. + </p> + <p className="text-muted-foreground"> + 기술영업 해양 Hull/Top 은 업무 요구사항이 동일하다면 통합으로 개발될 수 있습니다. + </p> + </div> + </Shell> + ); +}
\ No newline at end of file diff --git a/app/[lng]/partners/(partners)/techsales/rfq-offshore-top/page.tsx b/app/[lng]/partners/(partners)/techsales/rfq-offshore-top/page.tsx new file mode 100644 index 00000000..40be6773 --- /dev/null +++ b/app/[lng]/partners/(partners)/techsales/rfq-offshore-top/page.tsx @@ -0,0 +1,17 @@ +import { Shell } from "@/components/shell"; + +export default function TechSalesRfqShipPage() { + return ( + <Shell className="gap-6"> + <div> + <h1 className="text-2xl font-bold">기술영업 - 해양 Hull/Top RFQ</h1> + <p className="text-muted-foreground"> + 벤더가 해양 Hull/Top RFQ 목록을 확인하고 관리합니다. + </p> + <p className="text-muted-foreground"> + 기술영업 해양 Hull/Top 은 업무 요구사항이 동일하다면 통합으로 개발될 수 있습니다. + </p> + </div> + </Shell> + ); +}
\ No newline at end of file diff --git a/app/[lng]/partners/(partners)/techsales/rfq-ship/[id]/page.tsx b/app/[lng]/partners/(partners)/techsales/rfq-ship/[id]/page.tsx new file mode 100644 index 00000000..d748fc46 --- /dev/null +++ b/app/[lng]/partners/(partners)/techsales/rfq-ship/[id]/page.tsx @@ -0,0 +1,126 @@ +// app/[lng]/partners/(partners)/techsales/rfq-ship/[id]/page.tsx - 기술영업 RFQ 견적 응답 페이지 +import { Metadata } from "next" +import { notFound } from "next/navigation" +import * as React from "react" +import { Shell } from "@/components/shell" +import { Badge } from "@/components/ui/badge" +import { Separator } from "@/components/ui/separator" +import { BackButton } from "@/components/ui/back-button" +import { getTechSalesVendorQuotation } from "@/lib/techsales-rfq/service" +import { formatDate } from "@/lib/utils" +import { TechSalesQuotationTabs } from "@/lib/techsales-rfq/vendor-response/detail/quotation-tabs" + +interface TechSalesVendorQuotationDetailPageProps { + params: Promise<{ + id: string + lng: string + }> + searchParams: Promise<{ + tab?: string + }> +} + +export async function generateMetadata(): Promise<Metadata> { + return { + title: "기술영업 RFQ 견적서 상세", + description: "기술영업 RFQ 견적서 상세 정보 및 응답", + } +} + +export default async function TechSalesVendorQuotationDetailPage({ + params, + searchParams, +}: TechSalesVendorQuotationDetailPageProps) { + const { id } = await params + const { tab } = await searchParams + const quotationId = parseInt(id) + + if (isNaN(quotationId)) { + notFound() + } + + // 견적서 데이터 조회 + const { data: quotation, error } = await getTechSalesVendorQuotation(quotationId) + + if (error || !quotation) { + notFound() + } + + const rfq = quotation.rfq + const vendor = quotation.vendor + + // 상태별 배지 색상 + const getStatusBadgeVariant = (status: string) => { + switch (status) { + case "Draft": + return "secondary" + case "Submitted": + return "default" + case "Revised": + return "outline" + case "Rejected": + return "destructive" + case "Accepted": + return "success" + default: + return "secondary" + } + } + + const getStatusLabel = (status: string) => { + switch (status) { + case "Draft": + return "초안" + case "Submitted": + return "제출됨" + case "Revised": + return "수정됨" + case "Rejected": + return "반려됨" + case "Accepted": + return "승인됨" + default: + return status + } + } + + return ( + <Shell variant="sidebar" className="gap-4"> + {/* 헤더 */} + <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> + <div className="space-y-1"> + <div className="flex items-center gap-2"> + <h1 className="text-2xl font-bold">견적서 상세</h1> + <Badge variant={getStatusBadgeVariant(quotation.status)}> + {getStatusLabel(quotation.status)} + </Badge> + </div> + <div className="flex items-center gap-4 text-sm text-muted-foreground"> + <span>RFQ: {rfq?.rfqCode || "미할당"}</span> + <span>•</span> + <span>벤더: {vendor?.vendorName}</span> + <span>•</span> + <span>마감일: {rfq?.dueDate ? formatDate(rfq.dueDate) : "N/A"}</span> + </div> + </div> + + {/* 우측 상단 버튼 */} + <div className="flex items-center justify-end"> + <BackButton segmentsToRemove={1}> + 목록으로 돌아가기 + </BackButton> + </div> + </div> + + <Separator /> + + {/* 탭 컨텐츠 */} + <div className="flex-1 min-h-0"> + <TechSalesQuotationTabs + quotation={quotation} + defaultTab={tab || "project"} + /> + </div> + </Shell> + ) +}
\ No newline at end of file diff --git a/app/[lng]/partners/(partners)/techsales/rfq-ship/page.tsx b/app/[lng]/partners/(partners)/techsales/rfq-ship/page.tsx new file mode 100644 index 00000000..5b0ffb61 --- /dev/null +++ b/app/[lng]/partners/(partners)/techsales/rfq-ship/page.tsx @@ -0,0 +1,219 @@ +// app/vendor/quotations/page.tsx +import * as React from "react"; +import Link from "next/link"; +import { Metadata } from "next"; +import { getServerSession } from "next-auth/next"; +import { authOptions } from "@/app/api/auth/[...nextauth]/route"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { LogIn } from "lucide-react"; +import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; +import { Shell } from "@/components/shell"; +import { getValidFilters } from "@/lib/data-table"; +import { type SearchParams } from "@/types/table"; +import { searchParamsVendorRfqCache } from "@/lib/techsales-rfq/validations"; +import { + TECH_SALES_QUOTATION_STATUSES, + TECH_SALES_QUOTATION_STATUS_CONFIG +} from "@/db/schema"; + +import { getQuotationStatusCounts, getVendorQuotations } from "@/lib/techsales-rfq/service"; +import { VendorQuotationsTable } from "@/lib/techsales-rfq/vendor-response/table/vendor-quotations-table"; + +export const metadata: Metadata = { + title: "기술영업 견적서 관리", + description: "기술영업 RFQ 견적서를 관리합니다.", +}; + +interface VendorQuotationsPageProps { + searchParams: SearchParams; +} + +export default async function VendorQuotationsPage({ + searchParams, +}: VendorQuotationsPageProps) { + // 세션 확인 + const session = await getServerSession(authOptions); + + if (!session?.user) { + return ( + <Shell> + <div className="flex min-h-[400px] flex-col items-center justify-center space-y-4"> + <div className="text-center"> + <h2 className="text-2xl font-bold tracking-tight">로그인이 필요합니다</h2> + <p className="text-muted-foreground"> + 견적서를 확인하려면 로그인해주세요. + </p> + </div> + <Button asChild> + <Link href="/api/auth/signin"> + <LogIn className="mr-2 h-4 w-4" /> + 로그인 + </Link> + </Button> + </div> + </Shell> + ); + } + + // 벤더 ID 확인 (사용자의 회사 ID가 벤더 ID) + const vendorId = session.user.companyId; + if (!vendorId) { + return ( + <Shell> + <div className="flex min-h-[400px] flex-col items-center justify-center space-y-4"> + <div className="text-center"> + <h2 className="text-2xl font-bold tracking-tight">회사 정보가 없습니다</h2> + <p className="text-muted-foreground"> + 견적서를 확인하려면 회사 정보가 필요합니다. + </p> + </div> + </div> + </Shell> + ); + } + + // 검색 파라미터 파싱 및 검증 + const search = searchParamsVendorRfqCache.parse(searchParams); + const validFilters = getValidFilters(search.filters); + + // 견적서 상태별 개수 조회 + const statusCountsPromise = getQuotationStatusCounts(vendorId.toString()); + + // 견적서 목록 조회 + const quotationsPromise = getVendorQuotations( + { + flags: search.flags, + page: search.page, + perPage: search.perPage, + sort: search.sort, + filters: validFilters, + joinOperator: search.joinOperator, + search: search.search, + from: search.from, + to: search.to, + }, + vendorId.toString() + ); + + return ( + <Shell variant="fullscreen" className="h-full"> + {/* 고정 헤더 영역 */} + <div className="flex-shrink-0"> + <div className="flex-shrink-0 flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> + <div> + <h1 className="text-3xl font-bold tracking-tight">기술영업 견적서</h1> + <p className="text-muted-foreground"> + 할당받은 RFQ에 대한 견적서를 작성하고 관리합니다. + </p> + </div> + </div> + + {/* 상태별 개수 카드 */} + <div className="flex-shrink-0"> + <React.Suspense + fallback={ + <div className="w-full overflow-x-auto"> + <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 min-w-fit"> + {Array.from({ length: 5 }).map((_, i) => ( + <Card key={i} className="min-w-[160px]"> + <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> + <CardTitle className="text-sm font-medium truncate">로딩중...</CardTitle> + </CardHeader> + <CardContent> + <div className="text-2xl font-bold">-</div> + </CardContent> + </Card> + ))} + </div> + </div> + } + > + <StatusCards statusCountsPromise={statusCountsPromise} /> + </React.Suspense> + </div> + + {/* 견적서 테이블 */} + <div className="flex-1 min-h-0 overflow-hidden"> + <React.Suspense + fallback={ + <DataTableSkeleton + columnCount={12} + searchableColumnCount={2} + filterableColumnCount={3} + cellWidths={["10rem", "15rem", "12rem", "12rem", "8rem"]} + shrinkZero + /> + } + > + <div className="h-full overflow-auto"> + <VendorQuotationsTable promises={Promise.all([quotationsPromise.then(result => ({ data: result.data, pageCount: result.pageCount }))])} /> + </div> + </React.Suspense> + </div> + </div> + </Shell> + ); +} + +// 상태별 개수 카드 컴포넌트 +async function StatusCards({ + statusCountsPromise, +}: { + statusCountsPromise: Promise<{ + data: { status: string; count: number }[] | null; + error: string | null; + }>; +}) { + const { data: statusCounts, error } = await statusCountsPromise; + + if (error || !statusCounts) { + return ( + <div className="w-full overflow-x-auto"> + <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 min-w-fit"> + <Card className="min-w-[160px]"> + <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> + <CardTitle className="text-sm font-medium truncate">오류</CardTitle> + </CardHeader> + <CardContent> + <div className="text-2xl font-bold text-red-600">-</div> + <p className="text-xs text-muted-foreground truncate"> + 데이터를 불러올 수 없습니다 + </p> + </CardContent> + </Card> + </div> + </div> + ); + } + + // 중앙화된 상태 설정 사용 + const statusEntries = Object.entries(TECH_SALES_QUOTATION_STATUSES).map(([, statusValue]) => ({ + key: statusValue, + ...TECH_SALES_QUOTATION_STATUS_CONFIG[statusValue] + })); + + console.log(statusCounts, "statusCounts") + + return ( + <div className="w-full overflow-x-auto"> + <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 min-w-fit"> + {statusEntries.map((status) => ( + <Card key={status.key} className="min-w-[160px]"> + <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> + <CardTitle className="text-sm font-medium truncate">{status.label}</CardTitle> + </CardHeader> + <CardContent> + <div className={`text-2xl font-bold ${status.color}`}> + {statusCounts.find(item => item.status === status.key)?.count || 0} + </div> + <p className="text-xs text-muted-foreground truncate"> + {status.description} + </p> + </CardContent> + </Card> + ))} + </div> + </div> + ); +}
\ No newline at end of file diff --git a/app/not-found.tsx b/app/not-found.tsx new file mode 100644 index 00000000..b966d978 --- /dev/null +++ b/app/not-found.tsx @@ -0,0 +1,285 @@ +'use client' + +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" +import { Separator } from "@/components/ui/separator" +import { ArrowLeft, Building2, Users, Info, AlertCircle, Copy } from "lucide-react" +import Link from "next/link" +import { useRouter } from "next/navigation" +import { useState, useEffect } from "react" +import { toast } from "sonner" + +// 에러 정보 타입 +interface ErrorInfo { + timestamp: string; + url: string; + userAgent: string; + platform: string; + language: string; + cookieEnabled: boolean; + onLine: boolean; + screen: { + width: number; + height: number; + colorDepth: number; + }; + viewport: { + width: number; + height: number; + }; + referrer: string; + localStorage: boolean; + sessionStorage: boolean; +} + +export default function NotFound() { + const router = useRouter() + const [errorInfo, setErrorInfo] = useState<ErrorInfo | null>(null) + + useEffect(() => { + // 브라우저 환경 정보 수집 + const collectErrorInfo = () => { + const info: ErrorInfo = { + timestamp: new Date().toISOString(), + url: window.location.href, + userAgent: navigator.userAgent, + platform: navigator.platform, + language: navigator.language, + cookieEnabled: navigator.cookieEnabled, + onLine: navigator.onLine, + screen: { + width: screen.width, + height: screen.height, + colorDepth: screen.colorDepth, + }, + viewport: { + width: window.innerWidth, + height: window.innerHeight, + }, + referrer: document.referrer || '직접 접근', + localStorage: typeof Storage !== 'undefined', + sessionStorage: typeof Storage !== 'undefined', + } + setErrorInfo(info) + } + + collectErrorInfo() + }, []) + + const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text).then(() => { + toast.success("클립보드에 복사되었습니다") + }).catch(() => { + toast.error("복사에 실패했습니다") + }) + } + + const copyErrorInfo = () => { + if (!errorInfo) return + + const errorText = ` +=== 404 에러 정보 === +시간: ${errorInfo.timestamp} +URL: ${errorInfo.url} +리퍼러: ${errorInfo.referrer} +브라우저: ${errorInfo.userAgent} +플랫폼: ${errorInfo.platform} +언어: ${errorInfo.language} +화면 해상도: ${errorInfo.screen.width}x${errorInfo.screen.height} +뷰포트: ${errorInfo.viewport.width}x${errorInfo.viewport.height} +온라인 상태: ${errorInfo.onLine ? '온라인' : '오프라인'} +쿠키 활성화: ${errorInfo.cookieEnabled ? '예' : '아니오'} + `.trim() + + copyToClipboard(errorText) + } + + return ( + <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4"> + <Card className="w-full max-w-2xl shadow-lg"> + <CardHeader className="text-center space-y-4"> + <div className="mx-auto w-24 h-24 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center"> + <span className="text-4xl font-bold text-slate-600 dark:text-slate-400">404</span> + </div> + <CardTitle className="text-3xl font-bold text-slate-900 dark:text-slate-100"> + 이 페이지는 개발중이거나, 잘못된 URL 입니다. + </CardTitle> + <CardDescription className="text-lg text-slate-600 dark:text-slate-400"> + THIS PAGE IS UNDER DEVELOPMENT OR INVALID URL. + </CardDescription> + </CardHeader> + + <CardContent className="space-y-6"> + <Separator /> + + <div className="text-center text-sm text-slate-500 dark:text-slate-400"> + 아래 버튼을 통해 원하는 페이지로 이동하세요 + </div> + + <div className="grid gap-4 sm:grid-cols-3"> + {/* SHI 사용자 홈 */} + <Button + asChild + variant="outline" + className="h-auto p-4 flex flex-col items-center space-y-2 hover:bg-blue-50 hover:border-blue-200 dark:hover:bg-blue-950" + > + <Link href="/ko/evcp/dashboard"> + <Building2 className="h-6 w-6 text-blue-600 dark:text-blue-400" /> + <span className="font-medium">SHI 사용자 홈</span> + <span className="text-xs text-slate-500 dark:text-slate-400">EVCP 대시보드</span> + </Link> + </Button> + + {/* 벤더 홈 */} + <Button + asChild + variant="outline" + className="h-auto p-4 flex flex-col items-center space-y-2 hover:bg-green-50 hover:border-green-200 dark:hover:bg-green-950" + > + <Link href="/ko/partners"> + <Users className="h-6 w-6 text-green-600 dark:text-green-400" /> + <span className="font-medium">벤더 홈</span> + <span className="text-xs text-slate-500 dark:text-slate-400">협력업체 포털</span> + </Link> + </Button> + + {/* 뒤로 가기 */} + <Button + onClick={() => router.back()} + variant="outline" + className="h-auto p-4 flex flex-col items-center space-y-2 hover:bg-slate-50 hover:border-slate-200 dark:hover:bg-slate-800" + > + <ArrowLeft className="h-6 w-6 text-slate-600 dark:text-slate-400" /> + <span className="font-medium">뒤로 가기</span> + <span className="text-xs text-slate-500 dark:text-slate-400">이전 페이지로</span> + </Button> + </div> + + <Separator /> + + <div className="flex justify-center gap-4"> + + + {/* 에러 정보 다이얼로그 */} + <Dialog> + <DialogTrigger asChild> + <Button variant="ghost" size="sm"> + <Info className="h-4 w-4 mr-2" /> + 에러 정보 + </Button> + </DialogTrigger> + <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <AlertCircle className="h-5 w-5" /> + 에러 상세 정보 + </DialogTitle> + <DialogDescription> + 기술 지원을 위한 상세 환경 정보입니다. + </DialogDescription> + </DialogHeader> + + {errorInfo && ( + <div className="space-y-4"> + <div className="flex justify-end"> + <Button onClick={copyErrorInfo} size="sm" variant="outline"> + <Copy className="h-4 w-4 mr-2" /> + 전체 복사 + </Button> + </div> + + <div className="space-y-3"> + <div className="grid gap-2"> + <label className="text-sm font-medium">발생 시간</label> + <div className="p-2 bg-muted rounded text-sm font-mono"> + {errorInfo.timestamp} + </div> + </div> + + <div className="grid gap-2"> + <label className="text-sm font-medium">요청 URL</label> + <div className="p-2 bg-muted rounded text-sm font-mono break-all"> + {errorInfo.url} + </div> + </div> + + <div className="grid gap-2"> + <label className="text-sm font-medium">이전 페이지</label> + <div className="p-2 bg-muted rounded text-sm font-mono break-all"> + {errorInfo.referrer} + </div> + </div> + + <div className="grid gap-2"> + <label className="text-sm font-medium">브라우저 정보</label> + <div className="p-2 bg-muted rounded text-sm font-mono break-all"> + {errorInfo.userAgent} + </div> + </div> + + <div className="grid grid-cols-2 gap-4"> + <div className="grid gap-2"> + <label className="text-sm font-medium">플랫폼</label> + <div className="p-2 bg-muted rounded text-sm font-mono"> + {errorInfo.platform} + </div> + </div> + + <div className="grid gap-2"> + <label className="text-sm font-medium">언어</label> + <div className="p-2 bg-muted rounded text-sm font-mono"> + {errorInfo.language} + </div> + </div> + </div> + + <div className="grid grid-cols-2 gap-4"> + <div className="grid gap-2"> + <label className="text-sm font-medium">화면 해상도</label> + <div className="p-2 bg-muted rounded text-sm font-mono"> + {errorInfo.screen.width} × {errorInfo.screen.height} + </div> + </div> + + <div className="grid gap-2"> + <label className="text-sm font-medium">뷰포트 크기</label> + <div className="p-2 bg-muted rounded text-sm font-mono"> + {errorInfo.viewport.width} × {errorInfo.viewport.height} + </div> + </div> + </div> + + <div className="grid grid-cols-3 gap-4"> + <div className="grid gap-2"> + <label className="text-sm font-medium">온라인 상태</label> + <div className="p-2 bg-muted rounded text-sm font-mono"> + {errorInfo.onLine ? '온라인' : '오프라인'} + </div> + </div> + + <div className="grid gap-2"> + <label className="text-sm font-medium">쿠키 활성화</label> + <div className="p-2 bg-muted rounded text-sm font-mono"> + {errorInfo.cookieEnabled ? '예' : '아니오'} + </div> + </div> + + <div className="grid gap-2"> + <label className="text-sm font-medium">색상 깊이</label> + <div className="p-2 bg-muted rounded text-sm font-mono"> + {errorInfo.screen.colorDepth}bit + </div> + </div> + </div> + </div> + </div> + )} + </DialogContent> + </Dialog> + </div> + </CardContent> + </Card> + </div> + ) +}
\ No newline at end of file diff --git a/components/ui/back-button.tsx b/components/ui/back-button.tsx new file mode 100644 index 00000000..364c0b96 --- /dev/null +++ b/components/ui/back-button.tsx @@ -0,0 +1,112 @@ +"use client" + +import * as React from "react" +import { useRouter, usePathname } from "next/navigation" +import { ArrowLeft } from "lucide-react" +import { Button } from "@/components/ui/button" +import { cn } from "@/lib/utils" + +/** + * BackButton 컴포넌트 - 세그먼트를 동적으로 제거하여 상위 경로로 이동 + * + * 사용 예시: + * + * // 기본 사용 (1개 세그먼트 제거) + * <BackButton>목록으로</BackButton> + * + * // 2개 세그먼트 제거 (/a/b/c/d -> /a/b) + * <BackButton segmentsToRemove={2}>상위 목록으로</BackButton> + * + * // 커스텀 경로로 이동 + * <BackButton customPath="/dashboard">대시보드로</BackButton> + * + * // 아이콘 없이 사용 + * <BackButton showIcon={false}>돌아가기</BackButton> + * + * // 커스텀 스타일링 + * <BackButton className="text-blue-600" variant="outline"> + * 이전 페이지 + * </BackButton> + */ + +interface BackButtonProps extends React.ComponentPropsWithoutRef<typeof Button> { + /** + * 제거할 세그먼트 개수 (기본값: 1) + * 예: segmentsToRemove=1이면 /a/b/c -> /a/b + * segmentsToRemove=2이면 /a/b/c -> /a + */ + segmentsToRemove?: number + + /** + * 버튼에 표시할 텍스트 (기본값: "목록으로") + */ + children?: React.ReactNode + + /** + * 아이콘을 표시할지 여부 (기본값: true) + */ + showIcon?: boolean + + /** + * 커스텀 경로를 지정할 경우 (segmentsToRemove 대신 사용) + */ + customPath?: string +} + +export const BackButton = React.forwardRef< + React.ElementRef<typeof Button>, + BackButtonProps +>(({ + segmentsToRemove = 1, + children = "Go Back", + showIcon = true, + customPath, + className, + onClick, + ...props +}, ref) => { + const router = useRouter() + const pathname = usePathname() + + const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => { + // 커스텀 onClick이 있으면 먼저 실행 + if (onClick) { + onClick(event) + // preventDefault가 호출되었으면 기본 동작 중단 + if (event.defaultPrevented) { + return + } + } + + let targetPath: string + + if (customPath) { + targetPath = customPath + } else { + // 현재 경로에서 세그먼트 제거 + const segments = pathname.split('/').filter(Boolean) + const newSegments = segments.slice(0, -segmentsToRemove) + targetPath = newSegments.length > 0 ? `/${newSegments.join('/')}` : '/' + } + + router.push(targetPath) + }, [router, pathname, segmentsToRemove, customPath, onClick]) + + return ( + <Button + ref={ref} + variant="ghost" + className={cn( + "flex items-center text-primary hover:text-primary/80 transition-colors p-0 h-auto", + className + )} + onClick={handleClick} + {...props} + > + {showIcon && <ArrowLeft className="mr-1 h-4 w-4" />} + <span>{children}</span> + </Button> + ) +}) + +BackButton.displayName = "BackButton"
\ No newline at end of file diff --git a/config/menuConfig.ts b/config/menuConfig.ts index f1f5af63..eb6913c3 100644 --- a/config/menuConfig.ts +++ b/config/menuConfig.ts @@ -304,6 +304,7 @@ export const mainNavVendor: MenuSection[] = [ { title: "구매 관리", + useGrouping: true, items: [ { title: "기본 계약 서명", @@ -311,6 +312,24 @@ export const mainNavVendor: MenuSection[] = [ description: "기본 계약서 및 관련 문서에 대한 서명", }, { + title: "기술영업 - 조선 RFQ", + href: `/partners/techsales/rfq-ship`, + description: "견적 요청에 대한 응답 작성", + group: "기술영업" + }, + { + title: "기술영업 - 해양 Hull RFQ", + href: `/partners/techsales/rfq-offshore-hull`, + description: "견적 요청에 대한 응답 작성", + group: "기술영업" + }, + { + title: "기술영업 - 해양 Top RFQ", + href: `/partners/techsales/rfq-offshore-top`, + description: "견적 요청에 대한 응답 작성", + group: "기술영업" + }, + { title: "RFQ", href: `/partners/rfq`, description: "견적 요청에 대한 응답 작성", diff --git a/db/schema/index.ts b/db/schema/index.ts index fdd73344..309af050 100644 --- a/db/schema/index.ts +++ b/db/schema/index.ts @@ -14,3 +14,4 @@ export * from './logs'; export * from './basicContractDocumnet'; export * from './procurementRFQ'; export * from './setting'; +export * from './techSales';
\ No newline at end of file diff --git a/db/schema/techSales.ts b/db/schema/techSales.ts new file mode 100644 index 00000000..590ddc76 --- /dev/null +++ b/db/schema/techSales.ts @@ -0,0 +1,473 @@ +/** + * 기술영업 조선 및 해양을 위한 스키마 관련 설명 + * + * 배경지식: + * 기술영업 조선은 TBE, CBE 없이 RFQ로 업무가 종결됩니다. + * 기술영업 해양은 RFQ,TBE, CBE 진행를 모두 진행해 업무를 종결합니다. + * + * 기술영업은 projects.ts 스키마의 biddingProjects 테이블을 참조하고, 기술영업의 아이템리스트를 참조하여 RFQ를 자동생성합니다. + * 기술영업 RFQ 추가는 버튼 >> 모달로 진행합니다. + * 모달에서 견적프로젝트를 선택하면, 해당하는 자재그룹들을 리스팅합니다. + * 각 자재그룹별로 RFQ 여러 개를 한번에 생성할 수 있습니다. (전체 선택하고 만들면 자동 생성과 동일한 기능) + * + * 벤더가 토탈 가격을 산정하는데 필요한 프로젝트 관련 정보는 벤더에게 제공됩니다. (각 시리즈별 K/L 일정을 제공) + * 구매와 달리 지불조건, 인코텀즈, 배송지 등의 세부적인 정보는 벤더에게 제공되지 않습니다. + * + * 즉, 벤더는 대략적인 일정과 척수, 선종, 자재 이름만 보고 가격을 어림잡아 산정하는 것입니다. + * 이 가격은 내부적으로 사용되며, 구매 분과로는 '자재그룹코드'를 기준으로 이어질 수 있습니다. + * + * 기준정보인 견적프로젝트 정보가 변경되면 RFQ도 변경되어야 하는가? -> 아니다. 별도로 저장하게 해달라. (장민욱 프로) + * + */ + +// 기술영업 RFQ는 별도의 PR 아이템 테이블을 사용하지 않음. +// 해당 자재그룹에 대해 프로젝트 스펙만 보고 토탈가를 리턴하는 방식임 (선종, 척수, 자재 이름 등 프로젝트 정보와 자재 정보만 보고 가격을 어림잡아 산정하는 것) + +import { + foreignKey, + pgTable, + serial, + varchar, + text, + timestamp, + boolean, + integer, + numeric, + date, + jsonb, +} from "drizzle-orm/pg-core"; +import { relations } from "drizzle-orm"; +import { biddingProjects } from "./projects"; +import { users } from "./users"; +import { items } from "./items"; +import { vendors } from "./vendors"; + +// ===== 기술영업 상태 관리 상수 및 타입 ===== + +// 기술영업 RFQ 상태 +export const TECH_SALES_RFQ_STATUSES = { + RFQ_CREATED: "RFQ Created", + RFQ_VENDOR_ASSIGNED: "RFQ Vendor Assignned", + RFQ_SENT: "RFQ Sent", + QUOTATION_ANALYSIS: "Quotation Analysis", + CLOSED: "Closed", +} as const; + +export type TechSalesRfqStatus = typeof TECH_SALES_RFQ_STATUSES[keyof typeof TECH_SALES_RFQ_STATUSES]; + +// 기술영업 벤더 견적서 상태 +export const TECH_SALES_QUOTATION_STATUSES = { + DRAFT: "Draft", + SUBMITTED: "Submitted", + REVISED: "Revised", + REJECTED: "Rejected", + ACCEPTED: "Accepted", +} as const; + +export type TechSalesQuotationStatus = typeof TECH_SALES_QUOTATION_STATUSES[keyof typeof TECH_SALES_QUOTATION_STATUSES]; + +// 상태 설정 객체 (UI에서 사용) +export const TECH_SALES_QUOTATION_STATUS_CONFIG = { + [TECH_SALES_QUOTATION_STATUSES.DRAFT]: { + label: "초안", + variant: "secondary" as const, + description: "작성 중인 견적서", + color: "text-yellow-600", + }, + [TECH_SALES_QUOTATION_STATUSES.SUBMITTED]: { + label: "제출됨", + variant: "default" as const, + description: "제출된 견적서", + color: "text-blue-600", + }, + [TECH_SALES_QUOTATION_STATUSES.REVISED]: { + label: "수정됨", + variant: "outline" as const, + description: "수정된 견적서", + color: "text-purple-600", + }, + [TECH_SALES_QUOTATION_STATUSES.REJECTED]: { + label: "반려됨", + variant: "destructive" as const, + description: "반려된 견적서", + color: "text-red-600", + }, + [TECH_SALES_QUOTATION_STATUSES.ACCEPTED]: { + label: "승인됨", + variant: "success" as const, + description: "승인된 견적서", + color: "text-green-600", + }, +} as const; + +// ===== 스키마 정의 ===== + +// 기술영업 RFQ 테이블 +export const techSalesRfqs = pgTable("tech_sales_rfqs", { + id: serial("id").primaryKey(), + rfqCode: varchar("rfq_code", { length: 50 }).unique(), // ex) "RFQ-2025-001" + + // item에서 기술영업에서 사용하는 추가 정보는 itemShipbuilding 테이블에 저장되어 있다. + itemId: integer("item_id") + .notNull() + .references(() => items.id, { onDelete: "cascade" }), + + // 프로젝트 참조 ID + biddingProjectId: integer("bidding_project_id").references(() => biddingProjects.id, { onDelete: "set null" }), + + // 기술영업에서 벤더에게 제공할 정보로, 모든 벤더에게 동일하게 제공함. + materialCode: varchar("material_code", { length: 255 }), + + // 벤더별로 보내는 날짜는 다르지만, 이 업무를 언제까지 처리하겠다는 의미의 dueDate + dueDate: date("due_date", { mode: "date" }).$type<Date>().notNull(), + + rfqSendDate: date("rfq_send_date", { mode: "date" }).$type<Date | null>(), + status: varchar("status", { length: 30 }) + .$type<TechSalesRfqStatus>() + .default(TECH_SALES_RFQ_STATUSES.RFQ_CREATED) + .notNull(), + + // rfq 밀봉 기능은, 기술영업에서 사용하지 않겠다고 함. + + //picCode: 발주자 코드 + picCode: varchar("pic_code", { length: 50 }), + remark: text("remark"), + + // WHO + sentBy: integer("sent_by").references(() => users.id, { + onDelete: "set null", + }), + createdBy: integer("created_by") + .notNull() + .references(() => users.id, { onDelete: "set null" }), + updatedBy: integer("updated_by") + .notNull() + .references(() => users.id, { onDelete: "set null" }), + + // WHEN + createdAt: timestamp("created_at").defaultNow().notNull(), + updatedAt: timestamp("updated_at").defaultNow().notNull(), + + // 삼성중공업이 RFQ를 취소한 경우 + cancelReason: text("cancel_reason"), + + // 프로젝트 정보 스냅샷 (프로젝트 관련 모든 정보) + // 기존 개별 컬럼 방식에서 jsonb로 마이그레이션 시: + // 1. 기존 RFQ 데이터는 pspid 등의 개별 컬럼 값을 기반으로 jsonb 형태로 변환하여 마이그레이션 + // 2. 새로운 RFQ 생성 시에는 biddingProjects와 projectSeries 테이블에서 정보를 조회하여 스냅샷으로 저장 + projectSnapshot: jsonb("project_snapshot").$type<{ + pspid: string; // 견적프로젝트번호 + projNm?: string; // 견적프로젝트명 + sector?: string; // 부문(S / M) + projMsrm?: number; // 척수 + kunnr?: string; // 선주코드 + kunnrNm?: string; // 선주명 + cls1?: string; // 선급코드 + cls1Nm?: string; // 선급명 + ptype?: string; // 선종코드 + ptypeNm?: string; // 선종명 + pmodelCd?: string; // 선형코드 + pmodelNm?: string; // 선형명 + pmodelSz?: string; // 선형크기 + pmodelUom?: string; // 선형단위 + txt04?: string; // 견적상태코드 + txt30?: string; // 견적상태명 + estmPm?: string; // 견적대표PM 성명 + pspCreatedAt?: Date | string; // 원래 생성 일자 + pspUpdatedAt?: Date | string; // 원래 업데이트 일자 + }>(), + + // 프로젝트 시리즈 정보 스냅샷 + // 시리즈 정보는 배열 형태로 저장되며, 프로젝트의 모든 시리즈 정보를 포함 + // RFQ 생성 시점의 시리즈 정보를 스냅샷으로 보존함으로써 후속 변경에 영향을 받지 않음 + seriesSnapshot: jsonb("series_snapshot").$type<Array<{ + pspid: string; // 견적프로젝트번호 + sersNo: string; // 시리즈번호 + scDt?: string; // Steel Cutting Date + klDt?: string; // Keel Laying Date + lcDt?: string; // Launching Date + dlDt?: string; // Delivery Date + dockNo?: string; // 도크코드 + dockNm?: string; // 도크명 + projNo?: string; // SN공사번호(계약후) + post1?: string; // SN공사명(계약후) + }>>(), +}); + +// 기술영업 첨부파일 테이블 (RFQ 에 첨부되는 것임) +export const techSalesAttachments = pgTable( + "tech_sales_attachments", + { + id: serial("id").primaryKey(), + attachmentType: varchar("attachment_type", { length: 50 }).notNull(), // 'RFQ_COMMON', 'VENDOR_SPECIFIC' + techSalesRfqId: integer("tech_sales_rfq_id").references( + () => techSalesRfqs.id, + { onDelete: "cascade" } + ), + fileName: varchar("file_name", { length: 255 }).notNull(), + originalFileName: varchar("original_file_name", { length: 255 }).notNull(), + filePath: varchar("file_path", { length: 512 }).notNull(), + fileSize: integer("file_size"), + fileType: varchar("file_type", { length: 100 }), + description: varchar("description", { length: 500 }), + createdBy: integer("created_by") + .references(() => users.id, { onDelete: "set null" }) + .notNull(), + createdAt: timestamp("created_at").defaultNow().notNull(), + }, +); + +// 기술영업 벤더 견적서(응답) 테이블 (핵심: Total Price, Currency, Validity) 토탈가격, 통화, 유효기간 +export const techSalesVendorQuotations = pgTable( + "tech_sales_vendor_quotations", + { + id: serial("id").primaryKey(), + rfqId: integer("rfq_id") + .notNull() + .references(() => techSalesRfqs.id, { onDelete: "cascade" }), + vendorId: integer("vendor_id") + .notNull() + .references(() => vendors.id, { onDelete: "set null" }), + + // === [시작]견적 응답 정보 === + quotationCode: varchar("quotation_code", { length: 50 }), + quotationVersion: integer("quotation_version").default(1), + totalPrice: numeric("total_price"), + currency: varchar("currency", { length: 10 }), + + // 견적 유효 기간 + validUntil: date("valid_until", { mode: "date" }).$type<Date>(), + + // === [끝] 견적 응답 정보 === + // 상태 관리 + status: varchar("status", { length: 30 }) + .$type<TechSalesQuotationStatus>() + .default(TECH_SALES_QUOTATION_STATUSES.DRAFT) + .notNull(), + + // 기타 정보 + remark: text("remark"), + rejectionReason: text("rejection_reason"), + submittedAt: timestamp("submitted_at"), + acceptedAt: timestamp("accepted_at"), + + // 감사 필드 + createdBy: integer("created_by"), + updatedBy: integer("updated_by"), + createdAt: timestamp("created_at").defaultNow().notNull(), + updatedAt: timestamp("updated_at").defaultNow().notNull(), + } +); + +export const techSalesRfqComments = pgTable( + "tech_sales_rfq_comments", + { + id: serial("id").primaryKey(), + rfqId: integer("rfq_id") + .notNull() + .references(() => techSalesRfqs.id, { onDelete: "cascade" }), + vendorId: integer("vendor_id").references(() => vendors.id, { + onDelete: "set null", + }), + userId: integer("user_id").references(() => users.id, { + onDelete: "set null", + }), + content: text("content").notNull(), + isVendorComment: boolean("is_vendor_comment").default(false), + isRead: boolean("is_read").default(false), // 읽음 상태 추가 + parentCommentId: integer("parent_comment_id"), + createdAt: timestamp("created_at").defaultNow().notNull(), + updatedAt: timestamp("updated_at").defaultNow().notNull(), + }, + // 자기참조 FK 정의 + (table) => { + return { + parentFk: foreignKey({ + columns: [table.parentCommentId], + foreignColumns: [table.id], + }).onDelete("set null"), + }; + } +); + +// 코멘트 파일 첨부 +export const techSalesRfqCommentAttachments = pgTable("tech_sales_rfq_comment_attachments", { + id: serial("id").primaryKey(), + rfqId: integer("rfq_id") + .notNull() + .references(() => techSalesRfqs.id, { onDelete: "cascade" }), + commentId: integer("comment_id").references(() => techSalesRfqComments.id, { + onDelete: "cascade", + }), + quotationId: integer("quotation_id").references( + () => techSalesVendorQuotations.id, + { onDelete: "cascade" } + ), + fileName: varchar("file_name", { length: 255 }).notNull(), + fileSize: integer("file_size").notNull(), + fileType: varchar("file_type", { length: 100 }), + filePath: varchar("file_path", { length: 500 }).notNull(), + isVendorUpload: boolean("is_vendor_upload").default(false), + uploadedBy: integer("uploaded_by").references(() => users.id, { + onDelete: "set null", + }), + vendorId: integer("vendor_id").references(() => vendors.id, { + onDelete: "set null", + }), + uploadedAt: timestamp("uploaded_at").defaultNow().notNull(), +}); + + +// 타입 정의 +export type TechSalesVendorQuotations = + typeof techSalesVendorQuotations.$inferSelect; + +// Relations 정의 +export const techSalesRfqsRelations = relations(techSalesRfqs, ({ one, many }) => ({ + // 아이템 관계 + item: one(items, { + fields: [techSalesRfqs.itemId], + references: [items.id], + }), + + // 프로젝트 관계 + biddingProject: one(biddingProjects, { + fields: [techSalesRfqs.biddingProjectId], + references: [biddingProjects.id], + }), + + // 사용자 관계 + createdByUser: one(users, { + fields: [techSalesRfqs.createdBy], + references: [users.id], + relationName: "techSalesRfqCreatedBy", + }), + updatedByUser: one(users, { + fields: [techSalesRfqs.updatedBy], + references: [users.id], + relationName: "techSalesRfqUpdatedBy", + }), + sentByUser: one(users, { + fields: [techSalesRfqs.sentBy], + references: [users.id], + relationName: "techSalesRfqSentBy", + }), + + // 하위 관계들 + vendorQuotations: many(techSalesVendorQuotations), + attachments: many(techSalesAttachments), + comments: many(techSalesRfqComments), +})); + +export const techSalesVendorQuotationsRelations = relations(techSalesVendorQuotations, ({ one, many }) => ({ + // 상위 RFQ 관계 + rfq: one(techSalesRfqs, { + fields: [techSalesVendorQuotations.rfqId], + references: [techSalesRfqs.id], + }), + + // 벤더 관계 + vendor: one(vendors, { + fields: [techSalesVendorQuotations.vendorId], + references: [vendors.id], + }), + + // 사용자 관계 + createdByUser: one(users, { + fields: [techSalesVendorQuotations.createdBy], + references: [users.id], + relationName: "techSalesQuotationCreatedBy", + }), + updatedByUser: one(users, { + fields: [techSalesVendorQuotations.updatedBy], + references: [users.id], + relationName: "techSalesQuotationUpdatedBy", + }), + + // 첨부파일 관계 + attachments: many(techSalesRfqCommentAttachments), +})); + +export const techSalesAttachmentsRelations = relations(techSalesAttachments, ({ one }) => ({ + // 상위 RFQ 관계 + rfq: one(techSalesRfqs, { + fields: [techSalesAttachments.techSalesRfqId], + references: [techSalesRfqs.id], + }), + + // 생성자 관계 + createdByUser: one(users, { + fields: [techSalesAttachments.createdBy], + references: [users.id], + relationName: "techSalesAttachmentCreatedBy", + }), +})); + +export const techSalesRfqCommentsRelations = relations(techSalesRfqComments, ({ one, many }) => ({ + // 상위 RFQ 관계 + rfq: one(techSalesRfqs, { + fields: [techSalesRfqComments.rfqId], + references: [techSalesRfqs.id], + }), + + // 벤더 관계 + vendor: one(vendors, { + fields: [techSalesRfqComments.vendorId], + references: [vendors.id], + }), + + // 사용자 관계 + user: one(users, { + fields: [techSalesRfqComments.userId], + references: [users.id], + relationName: "techSalesCommentUser", + }), + + // 부모 댓글 관계 (자기참조) + parentComment: one(techSalesRfqComments, { + fields: [techSalesRfqComments.parentCommentId], + references: [techSalesRfqComments.id], + relationName: "techSalesCommentParent", + }), + + // 자식 댓글들 + childComments: many(techSalesRfqComments, { + relationName: "techSalesCommentParent", + }), + + // 첨부파일 관계 + attachments: many(techSalesRfqCommentAttachments), +})); + +export const techSalesRfqCommentAttachmentsRelations = relations(techSalesRfqCommentAttachments, ({ one }) => ({ + // 상위 RFQ 관계 + rfq: one(techSalesRfqs, { + fields: [techSalesRfqCommentAttachments.rfqId], + references: [techSalesRfqs.id], + }), + + // 댓글 관계 + comment: one(techSalesRfqComments, { + fields: [techSalesRfqCommentAttachments.commentId], + references: [techSalesRfqComments.id], + }), + + // 견적서 관계 + quotation: one(techSalesVendorQuotations, { + fields: [techSalesRfqCommentAttachments.quotationId], + references: [techSalesVendorQuotations.id], + }), + + // 업로드한 사용자 관계 + uploadedByUser: one(users, { + fields: [techSalesRfqCommentAttachments.uploadedBy], + references: [users.id], + relationName: "techSalesCommentAttachmentUploadedBy", + }), + + // 벤더 관계 + vendor: one(vendors, { + fields: [techSalesRfqCommentAttachments.vendorId], + references: [vendors.id], + }), +}));
\ No newline at end of file diff --git a/lib/items-tech/service.ts b/lib/items-tech/service.ts index 70c664f3..ee2c718d 100644 --- a/lib/items-tech/service.ts +++ b/lib/items-tech/service.ts @@ -1008,3 +1008,158 @@ export async function getAllOffshoreItems(): Promise<(ItemOffshoreHull | ItemOff throw new Error("Failed to get items");
}
}
+
+
+// -----------------------------------------------------------
+// 기술영업을 위한 로직
+// -----------------------------------------------------------
+
+// 조선 공종 타입
+export type WorkType = '기장' | '전장' | '선실' | '배관' | '철의'
+
+// 조선 아이템 with 공종 정보
+export interface ShipbuildingItem {
+ id: number
+ itemCode: string
+ itemName: string
+ description: string | null
+ workType: WorkType
+ itemList: string | null // 실제 아이템명
+ shipTypes: string
+ createdAt: Date
+ updatedAt: Date
+}
+
+// 공종별 아이템 조회
+export async function getShipbuildingItemsByWorkType(workType?: WorkType) {
+ try {
+ const query = db
+ .select({
+ id: itemShipbuilding.id,
+ itemCode: itemShipbuilding.itemCode,
+ itemName: items.itemName,
+ description: items.description,
+ workType: itemShipbuilding.workType,
+ itemList: itemShipbuilding.itemList,
+ shipTypes: itemShipbuilding.shipTypes,
+ createdAt: itemShipbuilding.createdAt,
+ updatedAt: itemShipbuilding.updatedAt,
+ })
+ .from(itemShipbuilding)
+ .leftJoin(items, eq(itemShipbuilding.itemCode, items.itemCode))
+
+ if (workType) {
+ query.where(eq(itemShipbuilding.workType, workType))
+ }
+
+ const result = await query
+
+ return {
+ data: result as ShipbuildingItem[],
+ error: null
+ }
+ } catch (error) {
+ console.error("조선 아이템 조회 오류:", error)
+ return {
+ data: null,
+ error: error instanceof Error ? error.message : "알 수 없는 오류"
+ }
+ }
+}
+
+// 아이템 검색
+export async function searchShipbuildingItems(searchQuery: string, workType?: WorkType) {
+ try {
+ const searchConditions = [
+ ilike(itemShipbuilding.itemCode, `%${searchQuery}%`),
+ ilike(items.itemName, `%${searchQuery}%`),
+ ilike(items.description, `%${searchQuery}%`),
+ ilike(itemShipbuilding.itemList, `%${searchQuery}%`)
+ ]
+
+ let whereCondition = or(...searchConditions)
+
+ if (workType) {
+ whereCondition = and(
+ eq(itemShipbuilding.workType, workType),
+ or(...searchConditions)
+ )
+ }
+
+ const result = await db
+ .select({
+ id: itemShipbuilding.id,
+ itemCode: itemShipbuilding.itemCode,
+ itemName: items.itemName,
+ description: items.description,
+ workType: itemShipbuilding.workType,
+ itemList: itemShipbuilding.itemList,
+ shipTypes: itemShipbuilding.shipTypes,
+ createdAt: itemShipbuilding.createdAt,
+ updatedAt: itemShipbuilding.updatedAt,
+ })
+ .from(itemShipbuilding)
+ .leftJoin(items, eq(itemShipbuilding.itemCode, items.itemCode))
+ .where(whereCondition)
+
+ return {
+ data: result as ShipbuildingItem[],
+ error: null
+ }
+ } catch (error) {
+ console.error("조선 아이템 검색 오류:", error)
+ return {
+ data: null,
+ error: error instanceof Error ? error.message : "알 수 없는 오류"
+ }
+ }
+}
+
+// 모든 공종 목록 조회
+export async function getWorkTypes() {
+ return [
+ { code: '기장' as WorkType, name: '기장품', description: '기계 장치 및 엔진' },
+ { code: '전장' as WorkType, name: '전장품', description: '전기 장치 및 제어 시스템' },
+ { code: '선실' as WorkType, name: '선실품', description: '선실 및 거주 구역' },
+ { code: '배관' as WorkType, name: '배관품', description: '배관 및 파이프 시스템' },
+ { code: '철의' as WorkType, name: '철의품', description: '선체 구조물 및 강재' },
+ ]
+}
+
+// 특정 아이템 코드들로 아이템 조회
+export async function getShipbuildingItemsByCodes(itemCodes: string[]) {
+ try {
+ const result = await db
+ .select({
+ id: itemShipbuilding.id,
+ itemCode: itemShipbuilding.itemCode,
+ itemName: items.itemName,
+ description: items.description,
+ workType: itemShipbuilding.workType,
+ itemList: itemShipbuilding.itemList,
+ shipTypes: itemShipbuilding.shipTypes,
+ createdAt: itemShipbuilding.createdAt,
+ updatedAt: itemShipbuilding.updatedAt,
+ })
+ .from(itemShipbuilding)
+ .leftJoin(items, eq(itemShipbuilding.itemCode, items.itemCode))
+ .where(
+ or(...itemCodes.map(code => eq(itemShipbuilding.itemCode, code)))
+ )
+
+ return {
+ data: result as ShipbuildingItem[],
+ error: null
+ }
+ } catch (error) {
+ console.error("조선 아이템 코드별 조회 오류:", error)
+ return {
+ data: null,
+ error: error instanceof Error ? error.message : "알 수 없는 오류"
+ }
+ }
+}
+
+// -----------------------------------------------------------
+// 기술영업을 위한 로직 끝
+// -----------------------------------------------------------
\ No newline at end of file diff --git a/lib/techsales-rfq/actions.ts b/lib/techsales-rfq/actions.ts new file mode 100644 index 00000000..9bcb20e5 --- /dev/null +++ b/lib/techsales-rfq/actions.ts @@ -0,0 +1,59 @@ +"use server" + +import { revalidatePath } from "next/cache" +import { + acceptTechSalesVendorQuotation, + rejectTechSalesVendorQuotation +} from "./service" + +// ... existing code ... + +/** + * 기술영업 벤더 견적 승인 (벤더 선택) Server Action + */ +export async function acceptTechSalesVendorQuotationAction(quotationId: number) { + try { + const result = await acceptTechSalesVendorQuotation(quotationId) + + if (result.success) { + // 관련 페이지들 재검증 + revalidatePath("/evcp/budgetary-tech-sales-ship") + revalidatePath("/partners/techsales") + + return { success: true, message: "벤더가 성공적으로 선택되었습니다" } + } else { + return { success: false, error: result.error } + } + } catch (error) { + console.error("벤더 선택 액션 오류:", error) + return { + success: false, + error: error instanceof Error ? error.message : "벤더 선택에 실패했습니다" + } + } +} + +/** + * 기술영업 벤더 견적 거절 Server Action + */ +export async function rejectTechSalesVendorQuotationAction(quotationId: number, rejectionReason?: string) { + try { + const result = await rejectTechSalesVendorQuotation(quotationId, rejectionReason) + + if (result.success) { + // 관련 페이지들 재검증 + revalidatePath("/evcp/budgetary-tech-sales-ship") + revalidatePath("/partners/techsales") + + return { success: true, message: "견적이 성공적으로 거절되었습니다" } + } else { + return { success: false, error: result.error } + } + } catch (error) { + console.error("견적 거절 액션 오류:", error) + return { + success: false, + error: error instanceof Error ? error.message : "견적 거절에 실패했습니다" + } + } +}
\ No newline at end of file diff --git a/lib/techsales-rfq/repository.ts b/lib/techsales-rfq/repository.ts new file mode 100644 index 00000000..260eef19 --- /dev/null +++ b/lib/techsales-rfq/repository.ts @@ -0,0 +1,380 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ + +import { + techSalesRfqs, + techSalesVendorQuotations, + items, + vendors, + users +} from "@/db/schema"; +import { + asc, + desc, count, SQL, sql +} from "drizzle-orm"; +import { PgTransaction } from "drizzle-orm/pg-core"; + + +export type NewTechSalesRfq = typeof techSalesRfqs.$inferInsert; +/** + * 기술영업 RFQ 생성 + * ID 및 생성일 리턴 + */ +export async function insertTechSalesRfq( + tx: PgTransaction<any, any, any>, + data: NewTechSalesRfq +) { + return tx + .insert(techSalesRfqs) + .values(data) + .returning({ id: techSalesRfqs.id, createdAt: techSalesRfqs.createdAt }); +} + +/** + * 단건/복수 조회 시 공통으로 사용 가능한 SELECT 함수 예시 + * - 트랜잭션(tx)을 받아서 사용하도록 구현 + */ +export async function selectTechSalesRfqs( + tx: PgTransaction<any, any, any>, + params: { + where?: any; + orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[]; + offset?: number; + limit?: number; + } +) { + const { where, orderBy, offset = 0, limit = 10 } = params; + + return tx + .select() + .from(techSalesRfqs) + .where(where ?? undefined) + .orderBy(...(orderBy ?? [])) + .offset(offset) + .limit(limit); +} +/** 총 개수 count */ +export async function countTechSalesRfqs( + tx: PgTransaction<any, any, any>, + where?: any +) { + const res = await tx.select({ count: count() }).from(techSalesRfqs).where(where); + return res[0]?.count ?? 0; +} + +/** + * RFQ 정보 직접 조인 조회 (뷰 대신 테이블 조인 사용) + */ +export async function selectTechSalesRfqsWithJoin( + tx: PgTransaction<any, any, any>, + params: { + where?: any; + orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc> | SQL<unknown>)[]; + offset?: number; + limit?: number; + } +) { + const { where, orderBy, offset = 0, limit = 10 } = params; + + // 별칭 방식을 변경하여 select, join, where, orderBy 등을 순차적으로 수행 + const query = tx.select({ + // RFQ 기본 정보 + id: techSalesRfqs.id, + rfqCode: techSalesRfqs.rfqCode, + itemId: techSalesRfqs.itemId, + itemName: items.itemName, + materialCode: techSalesRfqs.materialCode, + + // 날짜 및 상태 정보 + dueDate: techSalesRfqs.dueDate, + rfqSendDate: techSalesRfqs.rfqSendDate, + status: techSalesRfqs.status, + + // 담당자 및 비고 + picCode: techSalesRfqs.picCode, + remark: techSalesRfqs.remark, + cancelReason: techSalesRfqs.cancelReason, + + // 생성/수정 정보 + createdAt: techSalesRfqs.createdAt, + updatedAt: techSalesRfqs.updatedAt, + + // 사용자 정보 + createdBy: techSalesRfqs.createdBy, + createdByName: sql<string>`created_user.name`, + updatedBy: techSalesRfqs.updatedBy, + updatedByName: sql<string>`updated_user.name`, + sentBy: techSalesRfqs.sentBy, + sentByName: sql<string | null>`sent_user.name`, + + // 프로젝트 정보 (스냅샷) + projectSnapshot: techSalesRfqs.projectSnapshot, + seriesSnapshot: techSalesRfqs.seriesSnapshot, + + // 프로젝트 핵심 정보 + pspid: sql<string>`${techSalesRfqs.projectSnapshot}->>'pspid'`, + projNm: sql<string>`${techSalesRfqs.projectSnapshot}->>'projNm'`, + sector: sql<string>`${techSalesRfqs.projectSnapshot}->>'sector'`, + projMsrm: sql<number>`(${techSalesRfqs.projectSnapshot}->>'projMsrm')::int`, + ptypeNm: sql<string>`${techSalesRfqs.projectSnapshot}->>'ptypeNm'`, + + // 첨부파일 개수 + attachmentCount: sql<number>`( + SELECT COUNT(*) + FROM tech_sales_attachments + WHERE tech_sales_attachments.tech_sales_rfq_id = ${techSalesRfqs.id} + )`, + + // 벤더 견적 개수 + quotationCount: sql<number>`( + SELECT COUNT(*) + FROM tech_sales_vendor_quotations + WHERE tech_sales_vendor_quotations.rfq_id = ${techSalesRfqs.id} + )`, + }) + .from(techSalesRfqs) + .leftJoin(items, sql`${techSalesRfqs.itemId} = ${items.id}`) + .leftJoin(sql`${users} AS created_user`, sql`${techSalesRfqs.createdBy} = created_user.id`) + .leftJoin(sql`${users} AS updated_user`, sql`${techSalesRfqs.updatedBy} = updated_user.id`) + .leftJoin(sql`${users} AS sent_user`, sql`${techSalesRfqs.sentBy} = sent_user.id`); + + // where 조건 적용 + const queryWithWhere = where ? query.where(where) : query; + + // orderBy 적용 + const queryWithOrderBy = orderBy?.length + ? queryWithWhere.orderBy(...orderBy) + : queryWithWhere.orderBy(desc(techSalesRfqs.createdAt)); + + // offset과 limit 적용 후 실행 + return queryWithOrderBy.offset(offset).limit(limit); +} + +/** + * RFQ 개수 직접 조회 (뷰 대신 테이블 조인 사용) + */ +export async function countTechSalesRfqsWithJoin( + tx: PgTransaction<any, any, any>, + where?: any +) { + const res = await tx + .select({ count: count() }) + .from(techSalesRfqs) + .leftJoin(items, sql`${techSalesRfqs.itemId} = ${items.id}`) + .where(where ?? undefined); + return res[0]?.count ?? 0; +} + +/** + * 벤더 견적서 직접 조인 조회 (뷰 대신 테이블 조인 사용) + */ +export async function selectTechSalesVendorQuotationsWithJoin( + tx: PgTransaction<any, any, any>, + params: { + where?: any; + orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc> | SQL<unknown>)[]; + offset?: number; + limit?: number; + } +) { + const { where, orderBy, offset = 0, limit = 10 } = params; + + // 별칭 방식을 변경하여 select, join, where, orderBy 등을 순차적으로 수행 + const query = tx.select({ + // 견적 기본 정보 + id: techSalesVendorQuotations.id, + rfqId: techSalesVendorQuotations.rfqId, + rfqCode: techSalesRfqs.rfqCode, + vendorId: techSalesVendorQuotations.vendorId, + vendorName: vendors.vendorName, + vendorCode: vendors.vendorCode, + + // 견적 상세 정보 + totalPrice: techSalesVendorQuotations.totalPrice, + currency: techSalesVendorQuotations.currency, + validUntil: techSalesVendorQuotations.validUntil, + status: techSalesVendorQuotations.status, + remark: techSalesVendorQuotations.remark, + rejectionReason: techSalesVendorQuotations.rejectionReason, + + // 날짜 정보 + submittedAt: techSalesVendorQuotations.submittedAt, + acceptedAt: techSalesVendorQuotations.acceptedAt, + createdAt: techSalesVendorQuotations.createdAt, + updatedAt: techSalesVendorQuotations.updatedAt, + + // 생성/수정 사용자 + createdBy: techSalesVendorQuotations.createdBy, + createdByName: sql<string | null>`created_user.name`, + updatedBy: techSalesVendorQuotations.updatedBy, + updatedByName: sql<string | null>`updated_user.name`, + + // 프로젝트 정보 + materialCode: techSalesRfqs.materialCode, + itemId: techSalesRfqs.itemId, + itemName: items.itemName, + + // 프로젝트 핵심 정보 + pspid: sql<string>`${techSalesRfqs.projectSnapshot}->>'pspid'`, + projNm: sql<string>`${techSalesRfqs.projectSnapshot}->>'projNm'`, + sector: sql<string>`${techSalesRfqs.projectSnapshot}->>'sector'`, + + // 첨부파일 개수 + attachmentCount: sql<number>`( + SELECT COUNT(*) + FROM tech_sales_rfq_comment_attachments + WHERE tech_sales_rfq_comment_attachments.quotation_id = ${techSalesVendorQuotations.id} + )`, + }) + .from(techSalesVendorQuotations) + .leftJoin(techSalesRfqs, sql`${techSalesVendorQuotations.rfqId} = ${techSalesRfqs.id}`) + .leftJoin(vendors, sql`${techSalesVendorQuotations.vendorId} = ${vendors.id}`) + .leftJoin(items, sql`${techSalesRfqs.itemId} = ${items.id}`) + .leftJoin(sql`${users} AS created_user`, sql`${techSalesVendorQuotations.createdBy} = created_user.id`) + .leftJoin(sql`${users} AS updated_user`, sql`${techSalesVendorQuotations.updatedBy} = updated_user.id`); + + // where 조건 적용 + const queryWithWhere = where ? query.where(where) : query; + + // orderBy 적용 + const queryWithOrderBy = orderBy?.length + ? queryWithWhere.orderBy(...orderBy) + : queryWithWhere.orderBy(desc(techSalesVendorQuotations.createdAt)); + + // offset과 limit 적용 후 실행 + return queryWithOrderBy.offset(offset).limit(limit); +} + +/** + * 벤더 견적서 개수 직접 조회 (뷰 대신 테이블 조인 사용) + */ +export async function countTechSalesVendorQuotationsWithJoin( + tx: PgTransaction<any, any, any>, + where?: any +) { + const res = await tx + .select({ count: count() }) + .from(techSalesVendorQuotations) + .leftJoin(techSalesRfqs, sql`${techSalesVendorQuotations.rfqId} = ${techSalesRfqs.id}`) + .leftJoin(vendors, sql`${techSalesVendorQuotations.vendorId} = ${vendors.id}`) + .where(where ?? undefined); + return res[0]?.count ?? 0; +} + +/** + * RFQ 대시보드 데이터 직접 조인 조회 (뷰 대신 테이블 조인 사용) + */ +export async function selectTechSalesDashboardWithJoin( + tx: PgTransaction<any, any, any>, + params: { + where?: any; + orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc> | SQL<unknown>)[]; + offset?: number; + limit?: number; + } +) { + const { where, orderBy, offset = 0, limit = 10 } = params; + + // 별칭 방식을 변경하여 select, join, where, orderBy 등을 순차적으로 수행 + const query = tx.select({ + // RFQ 기본 정보 + id: techSalesRfqs.id, + rfqCode: techSalesRfqs.rfqCode, + status: techSalesRfqs.status, + dueDate: techSalesRfqs.dueDate, + rfqSendDate: techSalesRfqs.rfqSendDate, + materialCode: techSalesRfqs.materialCode, + + // 아이템 정보 + itemId: techSalesRfqs.itemId, + itemName: items.itemName, + + // 프로젝트 정보 + pspid: sql<string>`${techSalesRfqs.projectSnapshot}->>'pspid'`, + projNm: sql<string>`${techSalesRfqs.projectSnapshot}->>'projNm'`, + sector: sql<string>`${techSalesRfqs.projectSnapshot}->>'sector'`, + projMsrm: sql<number>`(${techSalesRfqs.projectSnapshot}->>'projMsrm')::int`, + ptypeNm: sql<string>`${techSalesRfqs.projectSnapshot}->>'ptypeNm'`, + + // 벤더 견적 통계 + vendorCount: sql<number>`( + SELECT COUNT(DISTINCT vendor_id) + FROM tech_sales_vendor_quotations + WHERE tech_sales_vendor_quotations.rfq_id = ${techSalesRfqs.id} + )`, + + quotationCount: sql<number>`( + SELECT COUNT(*) + FROM tech_sales_vendor_quotations + WHERE tech_sales_vendor_quotations.rfq_id = ${techSalesRfqs.id} + )`, + + submittedQuotationCount: sql<number>`( + SELECT COUNT(*) + FROM tech_sales_vendor_quotations + WHERE tech_sales_vendor_quotations.rfq_id = ${techSalesRfqs.id} + AND tech_sales_vendor_quotations.status = 'Submitted' + )`, + + minPrice: sql<string | null>`( + SELECT MIN(total_price) + FROM tech_sales_vendor_quotations + WHERE tech_sales_vendor_quotations.rfq_id = ${techSalesRfqs.id} + AND tech_sales_vendor_quotations.status = 'Submitted' + )`, + + maxPrice: sql<string | null>`( + SELECT MAX(total_price) + FROM tech_sales_vendor_quotations + WHERE tech_sales_vendor_quotations.rfq_id = ${techSalesRfqs.id} + AND tech_sales_vendor_quotations.status = 'Submitted' + )`, + + avgPrice: sql<string | null>`( + SELECT AVG(total_price) + FROM tech_sales_vendor_quotations + WHERE tech_sales_vendor_quotations.rfq_id = ${techSalesRfqs.id} + AND tech_sales_vendor_quotations.status = 'Submitted' + )`, + + // 첨부파일 통계 + attachmentCount: sql<number>`( + SELECT COUNT(*) + FROM tech_sales_attachments + WHERE tech_sales_attachments.tech_sales_rfq_id = ${techSalesRfqs.id} + )`, + + // 코멘트 통계 + commentCount: sql<number>`( + SELECT COUNT(*) + FROM tech_sales_rfq_comments + WHERE tech_sales_rfq_comments.rfq_id = ${techSalesRfqs.id} + )`, + + unreadCommentCount: sql<number>`( + SELECT COUNT(*) + FROM tech_sales_rfq_comments + WHERE tech_sales_rfq_comments.rfq_id = ${techSalesRfqs.id} + AND tech_sales_rfq_comments.is_read = false + )`, + + // 생성/수정 정보 + createdAt: techSalesRfqs.createdAt, + updatedAt: techSalesRfqs.updatedAt, + createdByName: sql<string>`created_user.name`, + }) + .from(techSalesRfqs) + .leftJoin(items, sql`${techSalesRfqs.itemId} = ${items.id}`) + .leftJoin(sql`${users} AS created_user`, sql`${techSalesRfqs.createdBy} = created_user.id`); + + // where 조건 적용 + const queryWithWhere = where ? query.where(where) : query; + + // orderBy 적용 + const queryWithOrderBy = orderBy?.length + ? queryWithWhere.orderBy(...orderBy) + : queryWithWhere.orderBy(desc(techSalesRfqs.updatedAt)); + + // offset과 limit 적용 후 실행 + return queryWithOrderBy.offset(offset).limit(limit); +} + diff --git a/lib/techsales-rfq/service.ts b/lib/techsales-rfq/service.ts new file mode 100644 index 00000000..88fef4b7 --- /dev/null +++ b/lib/techsales-rfq/service.ts @@ -0,0 +1,1540 @@ +'use server' + +import { unstable_noStore, revalidateTag, revalidatePath } from "next/cache"; +import db from "@/db/db"; +import { + techSalesRfqs, + techSalesVendorQuotations, + items, + users, + TECH_SALES_QUOTATION_STATUSES +} from "@/db/schema"; +import { and, desc, eq, ilike, or, sql, ne } from "drizzle-orm"; +import { unstable_cache } from "@/lib/unstable-cache"; +import { filterColumns } from "@/lib/filter-columns"; +import { getErrorMessage } from "@/lib/handle-error"; +import type { Filter } from "@/types/table"; +import { + selectTechSalesRfqsWithJoin, + countTechSalesRfqsWithJoin, + selectTechSalesVendorQuotationsWithJoin, + countTechSalesVendorQuotationsWithJoin, + selectTechSalesDashboardWithJoin +} from "./repository"; +import { GetTechSalesRfqsSchema } from "./validations"; +import { getServerSession } from "next-auth/next"; +import { authOptions } from "@/app/api/auth/[...nextauth]/route"; +import { sendEmail } from "../mail/sendEmail"; +import { formatDate, formatDateToQuarter } from "../utils"; + +// 정렬 타입 정의 +// 의도적으로 any 사용 - drizzle ORM의 orderBy 타입이 복잡함 +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type OrderByType = any; + +// 시리즈 스냅샷 타입 정의 +interface SeriesSnapshot { + pspid: string; + sersNo: string; + scDt?: string; + klDt?: string; + lcDt?: string; + dlDt?: string; + dockNo?: string; + dockNm?: string; + projNo?: string; + post1?: string; +} + +/** + * 연도별 순차 RFQ 코드 생성 함수 (다중 생성 지원) + * 형식: RFQ-YYYY-001, RFQ-YYYY-002, ... + */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +async function generateRfqCodes(tx: any, count: number, year?: number): Promise<string[]> { + const currentYear = year || new Date().getFullYear(); + const yearPrefix = `RFQ-${currentYear}-`; + + // 해당 연도의 가장 최근 RFQ 코드 조회 + const latestRfq = await tx + .select({ rfqCode: techSalesRfqs.rfqCode }) + .from(techSalesRfqs) + .where(ilike(techSalesRfqs.rfqCode, `${yearPrefix}%`)) + .orderBy(desc(techSalesRfqs.rfqCode)) + .limit(1); + + let nextNumber = 1; + + if (latestRfq.length > 0) { + // 기존 코드에서 번호 추출 (RFQ-2024-001 -> 001) + const lastCode = latestRfq[0].rfqCode; + const numberPart = lastCode.split('-').pop(); + if (numberPart) { + const lastNumber = parseInt(numberPart, 10); + if (!isNaN(lastNumber)) { + nextNumber = lastNumber + 1; + } + } + } + + // 요청된 개수만큼 순차적으로 코드 생성 + const codes: string[] = []; + for (let i = 0; i < count; i++) { + const paddedNumber = (nextNumber + i).toString().padStart(3, '0'); + codes.push(`${yearPrefix}${paddedNumber}`); + } + + return codes; +} + +/** + * 기술영업 조선 RFQ 생성 액션 + * + * 받을 파라미터 (생성시 입력하는 것) + * 1. RFQ 관련 + * 2. 프로젝트 관련 + * 3. 자재 관련 (자재그룹) + * + * 나머지 벤더, 첨부파일 등은 생성 이후 처리 + */ +export async function createTechSalesRfq(input: { + // 프로젝트 관련 + biddingProjectId: number; + // 자재 관련 (자재그룹 코드들) + materialGroupCodes: string[]; + // 기본 정보 + dueDate?: Date; + remark?: string; + createdBy: number; +}) { + unstable_noStore(); + try { + const results: typeof techSalesRfqs.$inferSelect[] = []; + + // 트랜잭션으로 처리 + await db.transaction(async (tx) => { + // 실제 프로젝트 정보 조회 + const biddingProject = await tx.query.biddingProjects.findFirst({ + where: (biddingProjects, { eq }) => eq(biddingProjects.id, input.biddingProjectId) + }); + + if (!biddingProject) { + throw new Error(`프로젝트 ID ${input.biddingProjectId}를 찾을 수 없습니다.`); + } + + // 프로젝트 시리즈 정보 조회 + const seriesInfo = await tx.query.projectSeries.findMany({ + where: (projectSeries, { eq }) => eq(projectSeries.pspid, biddingProject.pspid) + }); + + // 프로젝트 스냅샷 생성 + const projectSnapshot = { + pspid: biddingProject.pspid, + projNm: biddingProject.projNm || undefined, + sector: biddingProject.sector || undefined, + projMsrm: biddingProject.projMsrm ? Number(biddingProject.projMsrm) : undefined, + kunnr: biddingProject.kunnr || undefined, + kunnrNm: biddingProject.kunnrNm || undefined, + cls1: biddingProject.cls1 || undefined, + cls1Nm: biddingProject.cls1Nm || undefined, + ptype: biddingProject.ptype || undefined, + ptypeNm: biddingProject.ptypeNm || undefined, + pmodelCd: biddingProject.pmodelCd || undefined, + pmodelNm: biddingProject.pmodelNm || undefined, + pmodelSz: biddingProject.pmodelSz || undefined, + pmodelUom: biddingProject.pmodelUom || undefined, + txt04: biddingProject.txt04 || undefined, + txt30: biddingProject.txt30 || undefined, + estmPm: biddingProject.estmPm || undefined, + pspCreatedAt: biddingProject.createdAt, + pspUpdatedAt: biddingProject.updatedAt, + }; + + // 시리즈 스냅샷 생성 + const seriesSnapshot = seriesInfo.map(series => ({ + pspid: series.pspid, + sersNo: series.sersNo.toString(), + scDt: series.scDt || undefined, + klDt: series.klDt || undefined, + lcDt: series.lcDt || undefined, + dlDt: series.dlDt || undefined, + dockNo: series.dockNo || undefined, + dockNm: series.dockNm || undefined, + projNo: series.projNo || undefined, + post1: series.post1 || undefined, + })); + + // 각 자재그룹 코드별로 RFQ 생성 + for (const materialCode of input.materialGroupCodes) { + // RFQ 코드 생성 (임시로 타임스탬프 기반) + const rfqCode = await generateRfqCodes(tx, 1); + + // 기본 due date 설정 (7일 후) + const dueDate = input.dueDate || new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); + + // 기존 item 확인 또는 새로 생성 + let itemId: number; + const existingItem = await tx.query.items.findFirst({ + where: (items, { eq }) => eq(items.itemCode, materialCode), + columns: { id: true } + }); + + if (existingItem) { + // 기존 item 사용 + itemId = existingItem.id; + } else { + // 새 item 생성 + const [newItem] = await tx.insert(items).values({ + itemCode: materialCode, + itemName: `자재그룹 ${materialCode}`, + description: `기술영업 자재그룹`, + }).returning(); + itemId = newItem.id; + } + + // 새 기술영업 RFQ 작성 (스냅샷 포함) + const [newRfq] = await tx.insert(techSalesRfqs).values({ + rfqCode: rfqCode[0], + itemId: itemId, + biddingProjectId: input.biddingProjectId, + materialCode, + dueDate, + remark: input.remark, + createdBy: input.createdBy, + updatedBy: input.createdBy, + // 스냅샷 데이터 추가 + projectSnapshot, + seriesSnapshot, + }).returning(); + + results.push(newRfq); + } + }); + + // 캐시 무효화 + revalidateTag("techSalesRfqs"); + revalidatePath("/evcp/budgetary-tech-sales-ship"); + + return { data: results, error: null }; + } catch (err) { + console.error("Error creating RFQ:", err); + return { data: null, error: getErrorMessage(err) }; + } +} + +/** + * 직접 조인을 사용하여 RFQ 데이터 조회하는 함수 + * 페이지네이션, 필터링, 정렬 등 지원 + */ +export async function getTechSalesRfqsWithJoin(input: GetTechSalesRfqsSchema) { + return unstable_cache( + async () => { + try { + const offset = (input.page - 1) * input.perPage; + + // 기본 필터 처리 - RFQFilterBox에서 오는 필터 + const basicFilters = input.basicFilters || []; + const basicJoinOperator = input.basicJoinOperator || "and"; + + // 고급 필터 처리 - 테이블의 DataTableFilterList에서 오는 필터 + const advancedFilters = input.filters || []; + const advancedJoinOperator = input.joinOperator || "and"; + + // 기본 필터 조건 생성 + let basicWhere; + if (basicFilters.length > 0) { + basicWhere = filterColumns({ + table: techSalesRfqs, + filters: basicFilters, + joinOperator: basicJoinOperator, + }); + } + + // 고급 필터 조건 생성 + let advancedWhere; + if (advancedFilters.length > 0) { + advancedWhere = filterColumns({ + table: techSalesRfqs, + filters: advancedFilters, + joinOperator: advancedJoinOperator, + }); + } + + // 전역 검색 조건 + let globalWhere; + if (input.search) { + const s = `%${input.search}%`; + globalWhere = or( + ilike(techSalesRfqs.rfqCode, s), + ilike(techSalesRfqs.materialCode, s), + // JSON 필드 검색 + sql`${techSalesRfqs.projectSnapshot}->>'pspid' ILIKE ${s}`, + sql`${techSalesRfqs.projectSnapshot}->>'projNm' ILIKE ${s}`, + sql`${techSalesRfqs.projectSnapshot}->>'ptypeNm' ILIKE ${s}` + ); + } + + // 모든 조건 결합 + const whereConditions = []; + if (basicWhere) whereConditions.push(basicWhere); + if (advancedWhere) whereConditions.push(advancedWhere); + if (globalWhere) whereConditions.push(globalWhere); + + // 조건이 있을 때만 and() 사용 + const finalWhere = whereConditions.length > 0 + ? and(...whereConditions) + : undefined; + + // 정렬 기준 설정 + let orderBy: OrderByType[] = [desc(techSalesRfqs.createdAt)]; // 기본 정렬 + + if (input.sort?.length) { + // 안전하게 접근하여 정렬 기준 설정 + orderBy = input.sort.map(item => { + switch (item.id) { + case 'id': + return item.desc ? desc(techSalesRfqs.id) : techSalesRfqs.id; + case 'rfqCode': + return item.desc ? desc(techSalesRfqs.rfqCode) : techSalesRfqs.rfqCode; + case 'materialCode': + return item.desc ? desc(techSalesRfqs.materialCode) : techSalesRfqs.materialCode; + case 'status': + return item.desc ? desc(techSalesRfqs.status) : techSalesRfqs.status; + case 'dueDate': + return item.desc ? desc(techSalesRfqs.dueDate) : techSalesRfqs.dueDate; + case 'createdAt': + return item.desc ? desc(techSalesRfqs.createdAt) : techSalesRfqs.createdAt; + case 'updatedAt': + return item.desc ? desc(techSalesRfqs.updatedAt) : techSalesRfqs.updatedAt; + default: + return item.desc ? desc(techSalesRfqs.createdAt) : techSalesRfqs.createdAt; + } + }); + } + + // 트랜잭션 내부에서 Repository 호출 + const { data, total } = await db.transaction(async (tx) => { + const data = await selectTechSalesRfqsWithJoin(tx, { + where: finalWhere, + orderBy, + offset, + limit: input.perPage, + }); + + const total = await countTechSalesRfqsWithJoin(tx, finalWhere); + return { data, total }; + }); + + const pageCount = Math.ceil(total / input.perPage); + + return { data, pageCount, total }; + } catch (err) { + console.error("Error fetching RFQs with join:", err); + return { data: [], pageCount: 0, total: 0 }; + } + }, + [JSON.stringify(input)], // 캐싱 키 + { + revalidate: 60, // 1분간 캐시 + tags: ["techSalesRfqs"], + } + )(); +} + +/** + * 직접 조인을 사용하여 벤더 견적서 조회하는 함수 + */ +export async function getTechSalesVendorQuotationsWithJoin(input: { + rfqId?: number; + vendorId?: number; + search?: string; + filters?: Filter<typeof techSalesVendorQuotations>[]; + sort?: { id: string; desc: boolean }[]; + page: number; + perPage: number; +}) { + return unstable_cache( + async () => { + try { + const offset = (input.page - 1) * input.perPage; + + // 기본 필터 조건들 + const whereConditions = []; + + // RFQ ID 필터 + if (input.rfqId) { + whereConditions.push(eq(techSalesVendorQuotations.rfqId, input.rfqId)); + } + + // 벤더 ID 필터 + if (input.vendorId) { + whereConditions.push(eq(techSalesVendorQuotations.vendorId, input.vendorId)); + } + + // 검색 조건 + if (input.search) { + const s = `%${input.search}%`; + const searchCondition = or( + ilike(techSalesVendorQuotations.currency, s), + ilike(techSalesVendorQuotations.status, s) + ); + if (searchCondition) { + whereConditions.push(searchCondition); + } + } + + // 고급 필터 처리 + if (input.filters && input.filters.length > 0) { + const filterWhere = filterColumns({ + table: techSalesVendorQuotations, + filters: input.filters as Filter<typeof techSalesVendorQuotations>[], + joinOperator: "and", + }); + if (filterWhere) { + whereConditions.push(filterWhere); + } + } + + // 최종 WHERE 조건 + const finalWhere = whereConditions.length > 0 + ? and(...whereConditions) + : undefined; + + // 정렬 기준 설정 + let orderBy: OrderByType[] = [desc(techSalesVendorQuotations.createdAt)]; + + if (input.sort?.length) { + orderBy = input.sort.map(item => { + switch (item.id) { + case 'id': + return item.desc ? desc(techSalesVendorQuotations.id) : techSalesVendorQuotations.id; + case 'status': + return item.desc ? desc(techSalesVendorQuotations.status) : techSalesVendorQuotations.status; + case 'currency': + return item.desc ? desc(techSalesVendorQuotations.currency) : techSalesVendorQuotations.currency; + case 'totalPrice': + return item.desc ? desc(techSalesVendorQuotations.totalPrice) : techSalesVendorQuotations.totalPrice; + case 'createdAt': + return item.desc ? desc(techSalesVendorQuotations.createdAt) : techSalesVendorQuotations.createdAt; + case 'updatedAt': + return item.desc ? desc(techSalesVendorQuotations.updatedAt) : techSalesVendorQuotations.updatedAt; + default: + return item.desc ? desc(techSalesVendorQuotations.createdAt) : techSalesVendorQuotations.createdAt; + } + }); + } + + // 트랜잭션 내부에서 Repository 호출 + const { data, total } = await db.transaction(async (tx) => { + const data = await selectTechSalesVendorQuotationsWithJoin(tx, { + where: finalWhere, + orderBy, + offset, + limit: input.perPage, + }); + + const total = await countTechSalesVendorQuotationsWithJoin(tx, finalWhere); + return { data, total }; + }); + + const pageCount = Math.ceil(total / input.perPage); + + return { data, pageCount, total }; + } catch (err) { + console.error("Error fetching vendor quotations with join:", err); + return { data: [], pageCount: 0, total: 0 }; + } + }, + [JSON.stringify(input)], + { + revalidate: 60, + tags: [ + "techSalesVendorQuotations", + ...(input.rfqId ? [`techSalesRfq-${input.rfqId}`] : []) + ], + } + )(); +} + +/** + * 직접 조인을 사용하여 RFQ 대시보드 데이터 조회하는 함수 + */ +export async function getTechSalesDashboardWithJoin(input: { + search?: string; + filters?: Filter<typeof techSalesRfqs>[]; + sort?: { id: string; desc: boolean }[]; + page: number; + perPage: number; +}) { + unstable_noStore(); // 대시보드는 항상 최신 데이터를 보여주기 위해 캐시하지 않음 + + try { + const offset = (input.page - 1) * input.perPage; + + // Advanced filtering + const advancedWhere = input.filters ? filterColumns({ + table: techSalesRfqs, + filters: input.filters as Filter<typeof techSalesRfqs>[], + joinOperator: 'and', + }) : undefined; + + // Global search + let globalWhere; + if (input.search) { + const s = `%${input.search}%`; + globalWhere = or( + ilike(techSalesRfqs.rfqCode, s), + ilike(techSalesRfqs.materialCode, s), + // JSON 필드 검색 + sql`${techSalesRfqs.projectSnapshot}->>'pspid' ILIKE ${s}`, + sql`${techSalesRfqs.projectSnapshot}->>'projNm' ILIKE ${s}` + ); + } + + const finalWhere = and( + advancedWhere, + globalWhere + ); + + // 정렬 기준 설정 + let orderBy: OrderByType[] = [desc(techSalesRfqs.updatedAt)]; // 기본 정렬 + + if (input.sort?.length) { + // 안전하게 접근하여 정렬 기준 설정 + orderBy = input.sort.map(item => { + switch (item.id) { + case 'id': + return item.desc ? desc(techSalesRfqs.id) : techSalesRfqs.id; + case 'rfqCode': + return item.desc ? desc(techSalesRfqs.rfqCode) : techSalesRfqs.rfqCode; + case 'status': + return item.desc ? desc(techSalesRfqs.status) : techSalesRfqs.status; + case 'dueDate': + return item.desc ? desc(techSalesRfqs.dueDate) : techSalesRfqs.dueDate; + case 'createdAt': + return item.desc ? desc(techSalesRfqs.createdAt) : techSalesRfqs.createdAt; + case 'updatedAt': + return item.desc ? desc(techSalesRfqs.updatedAt) : techSalesRfqs.updatedAt; + default: + return item.desc ? desc(techSalesRfqs.updatedAt) : techSalesRfqs.updatedAt; + } + }); + } + + // 트랜잭션 내부에서 Repository 호출 + const data = await db.transaction(async (tx) => { + return await selectTechSalesDashboardWithJoin(tx, { + where: finalWhere, + orderBy, + offset, + limit: input.perPage, + }); + }); + + return { data, success: true }; + } catch (err) { + console.error("Error fetching dashboard data with join:", err); + return { data: [], success: false, error: getErrorMessage(err) }; + } +} + +/** + * 기술영업 RFQ에 벤더 추가 (단일) + */ +export async function addVendorToTechSalesRfq(input: { + rfqId: number; + vendorId: number; + createdBy: number; +}) { + unstable_noStore(); + try { + // 이미 해당 RFQ에 벤더가 추가되어 있는지 확인 + const existingQuotation = await db + .select() + .from(techSalesVendorQuotations) + .where( + and( + eq(techSalesVendorQuotations.rfqId, input.rfqId), + eq(techSalesVendorQuotations.vendorId, input.vendorId) + ) + ) + .limit(1); + + if (existingQuotation.length > 0) { + return { + data: null, + error: "이미 해당 벤더가 이 RFQ에 추가되어 있습니다." + }; + } + + // 새 벤더 견적서 레코드 생성 + const [newQuotation] = await db + .insert(techSalesVendorQuotations) + .values({ + rfqId: input.rfqId, + vendorId: input.vendorId, + status: "Draft", + totalPrice: "0", + currency: "USD", + createdBy: input.createdBy, + updatedBy: input.createdBy, + }) + .returning(); + + return { data: newQuotation, error: null }; + } catch (err) { + console.error("Error adding vendor to RFQ:", err); + return { data: null, error: getErrorMessage(err) }; + } +} + +/** + * 기술영업 RFQ에 여러 벤더 추가 (다중) + */ +export async function addVendorsToTechSalesRfq(input: { + rfqId: number; + vendorIds: number[]; + createdBy: number; +}) { + unstable_noStore(); + try { + const results: typeof techSalesVendorQuotations.$inferSelect[] = []; + const errors: string[] = []; + + // 트랜잭션으로 처리 + await db.transaction(async (tx) => { + // 1. RFQ 상태 확인 + const rfq = await tx.query.techSalesRfqs.findFirst({ + where: eq(techSalesRfqs.id, input.rfqId), + columns: { + id: true, + status: true + } + }); + + if (!rfq) { + throw new Error("RFQ를 찾을 수 없습니다"); + } + + // 2. 각 벤더에 대해 처리 + for (const vendorId of input.vendorIds) { + try { + // 이미 해당 RFQ에 벤더가 추가되어 있는지 확인 + const existingQuotation = await tx + .select() + .from(techSalesVendorQuotations) + .where( + and( + eq(techSalesVendorQuotations.rfqId, input.rfqId), + eq(techSalesVendorQuotations.vendorId, vendorId) + ) + ) + .limit(1); + + if (existingQuotation.length > 0) { + errors.push(`벤더 ID ${vendorId}는 이미 추가되어 있습니다.`); + continue; + } + + // 새 벤더 견적서 레코드 생성 + const [newQuotation] = await tx + .insert(techSalesVendorQuotations) + .values({ + rfqId: input.rfqId, + vendorId: vendorId, + status: "Draft", + totalPrice: "0", + currency: "USD", + createdBy: input.createdBy, + updatedBy: input.createdBy, + }) + .returning(); + + results.push(newQuotation); + } catch (vendorError) { + console.error(`Error adding vendor ${vendorId}:`, vendorError); + errors.push(`벤더 ID ${vendorId} 추가 중 오류가 발생했습니다.`); + } + } + + // 3. RFQ 상태가 "RFQ Created"이고 성공적으로 추가된 벤더가 있는 경우 상태 업데이트 + if (rfq.status === "RFQ Created" && results.length > 0) { + await tx.update(techSalesRfqs) + .set({ + status: "RFQ Vendor Assignned", + updatedBy: input.createdBy, + updatedAt: new Date() + }) + .where(eq(techSalesRfqs.id, input.rfqId)); + } + }); + + // 캐시 무효화 추가 + revalidateTag("techSalesVendorQuotations"); + revalidateTag(`techSalesRfq-${input.rfqId}`); + revalidatePath("/evcp/budgetary-tech-sales-ship"); + + return { + data: results, + error: errors.length > 0 ? errors.join(", ") : null, + successCount: results.length, + errorCount: errors.length + }; + } catch (err) { + console.error("Error adding vendors to RFQ:", err); + return { data: null, error: getErrorMessage(err) }; + } +} + +/** + * 기술영업 RFQ에서 벤더 제거 (Draft 상태 체크 포함) + */ +export async function removeVendorFromTechSalesRfq(input: { + rfqId: number; + vendorId: number; +}) { + unstable_noStore(); + try { + // 먼저 해당 벤더의 견적서 상태 확인 + const existingQuotation = await db + .select() + .from(techSalesVendorQuotations) + .where( + and( + eq(techSalesVendorQuotations.rfqId, input.rfqId), + eq(techSalesVendorQuotations.vendorId, input.vendorId) + ) + ) + .limit(1); + + if (existingQuotation.length === 0) { + return { + data: null, + error: "해당 벤더가 이 RFQ에 존재하지 않습니다." + }; + } + + // Draft 상태가 아닌 경우 삭제 불가 + if (existingQuotation[0].status !== "Draft") { + return { + data: null, + error: "Draft 상태의 벤더만 삭제할 수 있습니다." + }; + } + + // 해당 벤더의 견적서 삭제 + const deletedQuotations = await db + .delete(techSalesVendorQuotations) + .where( + and( + eq(techSalesVendorQuotations.rfqId, input.rfqId), + eq(techSalesVendorQuotations.vendorId, input.vendorId) + ) + ) + .returning(); + + // 캐시 무효화 추가 + revalidateTag("techSalesVendorQuotations"); + revalidateTag(`techSalesRfq-${input.rfqId}`); + revalidatePath("/evcp/budgetary-tech-sales-ship"); + + return { data: deletedQuotations[0], error: null }; + } catch (err) { + console.error("Error removing vendor from RFQ:", err); + return { data: null, error: getErrorMessage(err) }; + } +} + +/** + * 기술영업 RFQ에서 여러 벤더 일괄 제거 (Draft 상태 체크 포함) + */ +export async function removeVendorsFromTechSalesRfq(input: { + rfqId: number; + vendorIds: number[]; +}) { + unstable_noStore(); + try { + const results: typeof techSalesVendorQuotations.$inferSelect[] = []; + const errors: string[] = []; + + // 트랜잭션으로 처리 + await db.transaction(async (tx) => { + for (const vendorId of input.vendorIds) { + try { + // 먼저 해당 벤더의 견적서 상태 확인 + const existingQuotation = await tx + .select() + .from(techSalesVendorQuotations) + .where( + and( + eq(techSalesVendorQuotations.rfqId, input.rfqId), + eq(techSalesVendorQuotations.vendorId, vendorId) + ) + ) + .limit(1); + + if (existingQuotation.length === 0) { + errors.push(`벤더 ID ${vendorId}가 이 RFQ에 존재하지 않습니다.`); + continue; + } + + // Draft 상태가 아닌 경우 삭제 불가 + if (existingQuotation[0].status !== "Draft") { + errors.push(`벤더 ID ${vendorId}는 Draft 상태가 아니므로 삭제할 수 없습니다.`); + continue; + } + + // 해당 벤더의 견적서 삭제 + const deletedQuotations = await tx + .delete(techSalesVendorQuotations) + .where( + and( + eq(techSalesVendorQuotations.rfqId, input.rfqId), + eq(techSalesVendorQuotations.vendorId, vendorId) + ) + ) + .returning(); + + if (deletedQuotations.length > 0) { + results.push(deletedQuotations[0]); + } + } catch (vendorError) { + console.error(`Error removing vendor ${vendorId}:`, vendorError); + errors.push(`벤더 ID ${vendorId} 삭제 중 오류가 발생했습니다.`); + } + } + }); + + // 캐시 무효화 추가 + revalidateTag("techSalesVendorQuotations"); + revalidateTag(`techSalesRfq-${input.rfqId}`); + revalidatePath("/evcp/budgetary-tech-sales-ship"); + + return { + data: results, + error: errors.length > 0 ? errors.join(", ") : null, + successCount: results.length, + errorCount: errors.length + }; + } catch (err) { + console.error("Error removing vendors from RFQ:", err); + return { data: null, error: getErrorMessage(err) }; + } +} + +/** + * 특정 RFQ의 벤더 목록 조회 + */ +export async function getTechSalesRfqVendors(rfqId: number) { + unstable_noStore(); + try { + // Repository 함수를 사용하여 벤더 견적 목록 조회 + const result = await getTechSalesVendorQuotationsWithJoin({ + rfqId, + page: 1, + perPage: 1000, // 충분히 큰 수로 설정하여 모든 벤더 조회 + }); + + return { data: result.data, error: null }; + } catch (err) { + console.error("Error fetching RFQ vendors:", err); + return { data: [], error: getErrorMessage(err) }; + } +} + +/** + * 기술영업 RFQ 발송 (선택된 벤더들에게) + */ +export async function sendTechSalesRfqToVendors(input: { + rfqId: number; + vendorIds: number[]; +}) { + unstable_noStore(); + try { + // 인증 확인 + const session = await getServerSession(authOptions); + + if (!session?.user) { + return { + success: false, + message: "인증이 필요합니다", + }; + } + + // RFQ 정보 조회 + const rfq = await db.query.techSalesRfqs.findFirst({ + where: eq(techSalesRfqs.id, input.rfqId), + columns: { + id: true, + rfqCode: true, + status: true, + dueDate: true, + rfqSendDate: true, + remark: true, + materialCode: true, + projectSnapshot: true, + seriesSnapshot: true, + }, + with: { + item: { + columns: { + id: true, + itemCode: true, + itemName: true, + } + }, + biddingProject: { + columns: { + id: true, + pspid: true, + projNm: true, + sector: true, + ptypeNm: true, + } + }, + createdByUser: { + columns: { + id: true, + name: true, + email: true, + } + } + } + }); + + if (!rfq) { + return { + success: false, + message: "RFQ를 찾을 수 없습니다", + }; + } + + // 발송 가능한 상태인지 확인 + if (rfq.status !== "RFQ Vendor Assignned" && rfq.status !== "RFQ Sent") { + return { + success: false, + message: "벤더가 할당된 RFQ 또는 이미 전송된 RFQ만 다시 전송할 수 있습니다", + }; + } + + const isResend = rfq.status === "RFQ Sent"; + + // 현재 사용자 정보 조회 + const sender = await db.query.users.findFirst({ + where: eq(users.id, Number(session.user.id)), + columns: { + id: true, + email: true, + name: true, + } + }); + + if (!sender || !sender.email) { + return { + success: false, + message: "보내는 사람의 이메일 정보를 찾을 수 없습니다", + }; + } + + // 선택된 벤더들의 견적서 정보 조회 + const vendorQuotations = await db.query.techSalesVendorQuotations.findMany({ + where: and( + eq(techSalesVendorQuotations.rfqId, input.rfqId), + sql`${techSalesVendorQuotations.vendorId} IN (${input.vendorIds.join(',')})` + ), + columns: { + id: true, + vendorId: true, + status: true, + currency: true, + }, + with: { + vendor: { + columns: { + id: true, + vendorName: true, + vendorCode: true, + } + } + } + }); + + if (vendorQuotations.length === 0) { + return { + success: false, + message: "선택된 벤더가 이 RFQ에 할당되어 있지 않습니다", + }; + } + + // 트랜잭션 시작 + await db.transaction(async (tx) => { + // 1. RFQ 상태 업데이트 (첫 발송인 경우에만) + if (!isResend) { + await tx.update(techSalesRfqs) + .set({ + status: "RFQ Sent", + rfqSendDate: new Date(), + sentBy: Number(session.user.id), + updatedBy: Number(session.user.id), + updatedAt: new Date(), + }) + .where(eq(techSalesRfqs.id, input.rfqId)); + } + + // 2. 각 벤더에 대해 이메일 발송 처리 + for (const quotation of vendorQuotations) { + if (!quotation.vendorId || !quotation.vendor) continue; + + // 벤더에 속한 모든 사용자 조회 + const vendorUsers = await db.query.users.findMany({ + where: eq(users.companyId, quotation.vendorId), + columns: { + id: true, + email: true, + name: true, + language: true + } + }); + + // 유효한 이메일 주소만 필터링 + const vendorEmailsString = vendorUsers + .filter(user => user.email) + .map(user => user.email) + .join(", "); + + if (vendorEmailsString) { + // 대표 언어 결정 (첫 번째 사용자의 언어 또는 기본값) + const language = vendorUsers[0]?.language || "ko"; + + // 시리즈 정보 처리 + const seriesInfo = rfq.seriesSnapshot ? rfq.seriesSnapshot.map((series: SeriesSnapshot) => ({ + sersNo: series.sersNo, + klQuarter: series.klDt ? formatDateToQuarter(series.klDt) : '', + scDt: series.scDt, + lcDt: series.lcDt, + dlDt: series.dlDt, + dockNo: series.dockNo, + dockNm: series.dockNm, + projNo: series.projNo, + post1: series.post1, + })) : []; + + // 이메일 컨텍스트 구성 + const emailContext = { + language: language, + rfq: { + id: rfq.id, + code: rfq.rfqCode, + title: rfq.item?.itemName || '', + projectCode: rfq.biddingProject?.pspid || '', + projectName: rfq.biddingProject?.projNm || '', + description: rfq.remark || '', + dueDate: rfq.dueDate ? formatDate(rfq.dueDate) : 'N/A', + materialCode: rfq.materialCode || '', + }, + vendor: { + id: quotation.vendor.id, + code: quotation.vendor.vendorCode || '', + name: quotation.vendor.vendorName, + }, + sender: { + fullName: sender.name || '', + email: sender.email, + }, + project: { + // 기본 정보 + id: rfq.projectSnapshot?.pspid || rfq.biddingProject?.pspid || '', + name: rfq.projectSnapshot?.projNm || rfq.biddingProject?.projNm || '', + sector: rfq.projectSnapshot?.sector || rfq.biddingProject?.sector || '', + shipType: rfq.projectSnapshot?.ptypeNm || rfq.biddingProject?.ptypeNm || '', + + // 추가 프로젝트 정보 + shipCount: rfq.projectSnapshot?.projMsrm || 0, + ownerCode: rfq.projectSnapshot?.kunnr || '', + ownerName: rfq.projectSnapshot?.kunnrNm || '', + classCode: rfq.projectSnapshot?.cls1 || '', + className: rfq.projectSnapshot?.cls1Nm || '', + shipTypeCode: rfq.projectSnapshot?.ptype || '', + shipModelCode: rfq.projectSnapshot?.pmodelCd || '', + shipModelName: rfq.projectSnapshot?.pmodelNm || '', + shipModelSize: rfq.projectSnapshot?.pmodelSz || '', + shipModelUnit: rfq.projectSnapshot?.pmodelUom || '', + estimateStatus: rfq.projectSnapshot?.txt30 || '', + projectManager: rfq.projectSnapshot?.estmPm || '', + }, + series: seriesInfo, + details: { + currency: quotation.currency || 'USD', + }, + quotationCode: `${rfq.rfqCode}-${quotation.vendorId}`, + systemUrl: process.env.NEXT_PUBLIC_APP_URL || 'http://60.101.108.100/ko/partners', + isResend: isResend, + versionInfo: isResend ? '(재전송)' : '', + }; + + // 이메일 전송 + await sendEmail({ + to: vendorEmailsString, + subject: isResend + ? `[기술영업 RFQ 재전송] ${rfq.rfqCode} - ${rfq.item?.itemName || '견적 요청'} ${emailContext.versionInfo}` + : `[기술영업 RFQ] ${rfq.rfqCode} - ${rfq.item?.itemName || '견적 요청'}`, + template: 'tech-sales-rfq-invite-ko', // 기술영업용 템플릿 + context: emailContext, + cc: sender.email, // 발신자를 CC에 추가 + }); + } + } + }); + + // 캐시 무효화 + revalidateTag("techSalesRfqs"); + revalidateTag("techSalesVendorQuotations"); + revalidateTag(`techSalesRfq-${input.rfqId}`); + revalidatePath("/evcp/budgetary-tech-sales-ship"); + + return { + success: true, + message: `${vendorQuotations.length}개 벤더에게 RFQ가 성공적으로 발송되었습니다`, + sentCount: vendorQuotations.length, + }; + } catch (err) { + console.error("기술영업 RFQ 발송 오류:", err); + return { + success: false, + message: "RFQ 발송 중 오류가 발생했습니다", + }; + } +} + +/** + * 벤더용 기술영업 RFQ 견적서 조회 + */ +export async function getTechSalesVendorQuotation(quotationId: number) { + unstable_noStore(); + try { + const quotation = await db.query.techSalesVendorQuotations.findFirst({ + where: eq(techSalesVendorQuotations.id, quotationId), + with: { + rfq: { + with: { + item: true, + biddingProject: true, + createdByUser: { + columns: { + id: true, + name: true, + email: true, + } + } + } + }, + vendor: true, + } + }); + + if (!quotation) { + return { data: null, error: "견적서를 찾을 수 없습니다." }; + } + + return { data: quotation, error: null }; + } catch (err) { + console.error("Error fetching vendor quotation:", err); + return { data: null, error: getErrorMessage(err) }; + } +} + +/** + * 기술영업 벤더 견적서 업데이트 (임시저장) + */ +export async function updateTechSalesVendorQuotation(data: { + id: number + currency: string + totalPrice: string + validUntil: Date + remark?: string + updatedBy: number +}) { + try { + // 현재 견적서 상태 확인 + const currentQuotation = await db.query.techSalesVendorQuotations.findFirst({ + where: eq(techSalesVendorQuotations.id, data.id), + columns: { + status: true, + } + }); + + if (!currentQuotation) { + return { data: null, error: "견적서를 찾을 수 없습니다." }; + } + + // Draft 또는 Revised 상태에서만 수정 가능 + if (!["Draft", "Revised"].includes(currentQuotation.status)) { + return { data: null, error: "현재 상태에서는 견적서를 수정할 수 없습니다." }; + } + + const result = await db + .update(techSalesVendorQuotations) + .set({ + currency: data.currency, + totalPrice: data.totalPrice, + validUntil: data.validUntil, + remark: data.remark || null, + updatedAt: new Date(), + }) + .where(eq(techSalesVendorQuotations.id, data.id)) + .returning() + + // 캐시 무효화 + revalidateTag("techSalesVendorQuotations") + revalidatePath(`/partners/techsales/rfq-ship/${data.id}`) + + return { data: result[0], error: null } + } catch (error) { + console.error("Error updating tech sales vendor quotation:", error) + return { data: null, error: "견적서 업데이트 중 오류가 발생했습니다" } + } +} + +/** + * 기술영업 벤더 견적서 제출 + */ +export async function submitTechSalesVendorQuotation(data: { + id: number + currency: string + totalPrice: string + validUntil: Date + remark?: string + updatedBy: number +}) { + try { + // 현재 견적서 상태 확인 + const currentQuotation = await db.query.techSalesVendorQuotations.findFirst({ + where: eq(techSalesVendorQuotations.id, data.id), + columns: { + status: true, + } + }); + + if (!currentQuotation) { + return { data: null, error: "견적서를 찾을 수 없습니다." }; + } + + // Draft 또는 Revised 상태에서만 제출 가능 + if (!["Draft", "Revised"].includes(currentQuotation.status)) { + return { data: null, error: "현재 상태에서는 견적서를 제출할 수 없습니다." }; + } + + const result = await db + .update(techSalesVendorQuotations) + .set({ + currency: data.currency, + totalPrice: data.totalPrice, + validUntil: data.validUntil, + remark: data.remark || null, + status: "Submitted", + submittedAt: new Date(), + updatedAt: new Date(), + }) + .where(eq(techSalesVendorQuotations.id, data.id)) + .returning() + + // 캐시 무효화 + revalidateTag("techSalesVendorQuotations") + revalidatePath(`/partners/techsales/rfq-ship/${data.id}`) + + return { data: result[0], error: null } + } catch (error) { + console.error("Error submitting tech sales vendor quotation:", error) + return { data: null, error: "견적서 제출 중 오류가 발생했습니다" } + } +} + +/** + * 통화 목록 조회 + */ +export async function fetchCurrencies() { + try { + // 기본 통화 목록 (실제로는 DB에서 가져와야 함) + const currencies = [ + { code: "USD", name: "미국 달러" }, + { code: "KRW", name: "한국 원" }, + { code: "EUR", name: "유로" }, + { code: "JPY", name: "일본 엔" }, + { code: "CNY", name: "중국 위안" }, + ] + + return { data: currencies, error: null } + } catch (error) { + console.error("Error fetching currencies:", error) + return { data: null, error: "통화 목록 조회 중 오류가 발생했습니다" } + } +} + +/** + * 벤더용 기술영업 견적서 목록 조회 (페이지네이션 포함) + */ +export async function getVendorQuotations(input: { + flags?: string[]; + page: number; + perPage: number; + sort?: { id: string; desc: boolean }[]; + filters?: Filter<typeof techSalesVendorQuotations>[]; + joinOperator?: "and" | "or"; + basicFilters?: Filter<typeof techSalesVendorQuotations>[]; + basicJoinOperator?: "and" | "or"; + search?: string; + from?: string; + to?: string; +}, vendorId: string) { + unstable_noStore(); + try { + const { page, perPage, sort, filters = [], search = "", from = "", to = "" } = input; + const offset = (page - 1) * perPage; + const limit = perPage; + + // 기본 조건: 해당 벤더의 견적서만 조회 + const baseConditions = [eq(techSalesVendorQuotations.vendorId, parseInt(vendorId))]; + + // 검색 조건 추가 + if (search) { + const s = `%${search}%`; + const searchCondition = or( + ilike(techSalesVendorQuotations.currency, s), + ilike(techSalesVendorQuotations.status, s) + ); + if (searchCondition) { + baseConditions.push(searchCondition); + } + } + + // 날짜 범위 필터 + if (from) { + baseConditions.push(sql`${techSalesVendorQuotations.createdAt} >= ${from}`); + } + if (to) { + baseConditions.push(sql`${techSalesVendorQuotations.createdAt} <= ${to}`); + } + + // 고급 필터 처리 + if (filters.length > 0) { + const filterWhere = filterColumns({ + table: techSalesVendorQuotations, + filters: filters as Filter<typeof techSalesVendorQuotations>[], + joinOperator: input.joinOperator || "and", + }); + if (filterWhere) { + baseConditions.push(filterWhere); + } + } + + // 최종 WHERE 조건 + const finalWhere = baseConditions.length > 0 + ? and(...baseConditions) + : undefined; + + // 정렬 기준 설정 + let orderBy: OrderByType[] = [desc(techSalesVendorQuotations.updatedAt)]; + + if (sort?.length) { + orderBy = sort.map(item => { + switch (item.id) { + case 'id': + return item.desc ? desc(techSalesVendorQuotations.id) : techSalesVendorQuotations.id; + case 'status': + return item.desc ? desc(techSalesVendorQuotations.status) : techSalesVendorQuotations.status; + case 'currency': + return item.desc ? desc(techSalesVendorQuotations.currency) : techSalesVendorQuotations.currency; + case 'totalPrice': + return item.desc ? desc(techSalesVendorQuotations.totalPrice) : techSalesVendorQuotations.totalPrice; + case 'validUntil': + return item.desc ? desc(techSalesVendorQuotations.validUntil) : techSalesVendorQuotations.validUntil; + case 'submittedAt': + return item.desc ? desc(techSalesVendorQuotations.submittedAt) : techSalesVendorQuotations.submittedAt; + case 'createdAt': + return item.desc ? desc(techSalesVendorQuotations.createdAt) : techSalesVendorQuotations.createdAt; + case 'updatedAt': + return item.desc ? desc(techSalesVendorQuotations.updatedAt) : techSalesVendorQuotations.updatedAt; + default: + return item.desc ? desc(techSalesVendorQuotations.updatedAt) : techSalesVendorQuotations.updatedAt; + } + }); + } + + // 조인을 포함한 데이터 조회 + const data = await db + .select({ + id: techSalesVendorQuotations.id, + rfqId: techSalesVendorQuotations.rfqId, + vendorId: techSalesVendorQuotations.vendorId, + status: techSalesVendorQuotations.status, + currency: techSalesVendorQuotations.currency, + totalPrice: techSalesVendorQuotations.totalPrice, + validUntil: techSalesVendorQuotations.validUntil, + submittedAt: techSalesVendorQuotations.submittedAt, + remark: techSalesVendorQuotations.remark, + createdAt: techSalesVendorQuotations.createdAt, + updatedAt: techSalesVendorQuotations.updatedAt, + createdBy: techSalesVendorQuotations.createdBy, + updatedBy: techSalesVendorQuotations.updatedBy, + // RFQ 정보 + rfqCode: techSalesRfqs.rfqCode, + materialCode: techSalesRfqs.materialCode, + dueDate: techSalesRfqs.dueDate, + rfqStatus: techSalesRfqs.status, + // 아이템 정보 + itemName: items.itemName, + // 프로젝트 정보 (JSON에서 추출) + projNm: sql<string>`${techSalesRfqs.projectSnapshot}->>'projNm'`, + }) + .from(techSalesVendorQuotations) + .leftJoin(techSalesRfqs, eq(techSalesVendorQuotations.rfqId, techSalesRfqs.id)) + .leftJoin(items, eq(techSalesRfqs.itemId, items.id)) + .where(finalWhere) + .orderBy(...orderBy) + .limit(limit) + .offset(offset); + + // 총 개수 조회 + const totalResult = await db + .select({ count: sql<number>`count(*)` }) + .from(techSalesVendorQuotations) + .leftJoin(techSalesRfqs, eq(techSalesVendorQuotations.rfqId, techSalesRfqs.id)) + .leftJoin(items, eq(techSalesRfqs.itemId, items.id)) + .where(finalWhere); + + const total = totalResult[0]?.count || 0; + const pageCount = Math.ceil(total / perPage); + + return { data, pageCount, total }; + } catch (err) { + console.error("Error fetching vendor quotations:", err); + return { data: [], pageCount: 0, total: 0 }; + } +} + +/** + * 벤더용 기술영업 견적서 상태별 개수 조회 + */ +export async function getQuotationStatusCounts(vendorId: string) { + unstable_noStore(); + try { + const result = await db + .select({ + status: techSalesVendorQuotations.status, + count: sql<number>`count(*)`, + }) + .from(techSalesVendorQuotations) + .where(eq(techSalesVendorQuotations.vendorId, parseInt(vendorId))) + .groupBy(techSalesVendorQuotations.status); + + return { data: result, error: null }; + } catch (err) { + console.error("Error fetching quotation status counts:", err); + return { data: null, error: getErrorMessage(err) }; + } +} + +/** + * 기술영업 벤더 견적 승인 (벤더 선택) + */ +export async function acceptTechSalesVendorQuotation(quotationId: number) { + try { + const result = await db.transaction(async (tx) => { + // 1. 선택된 견적 정보 조회 + const selectedQuotation = await tx + .select() + .from(techSalesVendorQuotations) + .where(eq(techSalesVendorQuotations.id, quotationId)) + .limit(1) + + if (selectedQuotation.length === 0) { + throw new Error("견적을 찾을 수 없습니다") + } + + const quotation = selectedQuotation[0] + + // 2. 선택된 견적을 Accepted로 변경 + await tx + .update(techSalesVendorQuotations) + .set({ + status: "Accepted", + acceptedAt: new Date(), + updatedAt: new Date(), + }) + .where(eq(techSalesVendorQuotations.id, quotationId)) + + // 3. 같은 RFQ의 다른 견적들을 Rejected로 변경 + await tx + .update(techSalesVendorQuotations) + .set({ + status: "Rejected", + rejectionReason: "다른 벤더가 선택됨", + updatedAt: new Date(), + }) + .where( + and( + eq(techSalesVendorQuotations.rfqId, quotation.rfqId), + ne(techSalesVendorQuotations.id, quotationId), + eq(techSalesVendorQuotations.status, "Submitted") + ) + ) + + // 4. RFQ 상태를 Closed로 변경 + await tx + .update(techSalesRfqs) + .set({ + status: "Closed", + updatedAt: new Date(), + }) + .where(eq(techSalesRfqs.id, quotation.rfqId)) + + return quotation + }) + + // 캐시 무효화 + revalidateTag("techSalesVendorQuotations") + revalidateTag(`techSalesRfq-${result.rfqId}`) + revalidateTag("techSalesRfqs") + + return { success: true, data: result } + } catch (error) { + console.error("벤더 견적 승인 오류:", error) + return { + success: false, + error: error instanceof Error ? error.message : "벤더 견적 승인에 실패했습니다" + } + } +} + +/** + * 기술영업 벤더 견적 거절 + */ +export async function rejectTechSalesVendorQuotation(quotationId: number, rejectionReason?: string) { + try { + const result = await db + .update(techSalesVendorQuotations) + .set({ + status: "Rejected", + rejectionReason: rejectionReason || "기술영업 담당자에 의해 거절됨", + updatedAt: new Date(), + }) + .where(eq(techSalesVendorQuotations.id, quotationId)) + .returning() + + if (result.length === 0) { + throw new Error("견적을 찾을 수 없습니다") + } + + // 캐시 무효화 + revalidateTag("techSalesVendorQuotations") + revalidateTag(`techSalesRfq-${result[0].rfqId}`) + + return { success: true, data: result[0] } + } catch (error) { + console.error("벤더 견적 거절 오류:", error) + return { + success: false, + error: error instanceof Error ? error.message : "벤더 견적 거절에 실패했습니다" + } + } +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/README.md b/lib/techsales-rfq/table/README.md new file mode 100644 index 00000000..74d0005f --- /dev/null +++ b/lib/techsales-rfq/table/README.md @@ -0,0 +1,41 @@ + +# 기술영업 RFQ + +1. 마스터 테이블 +---컬럼--- +상태 +견적프로젝트 이름 +rfqCode (RFQ-YYYY-001) +프로젝트 상세보기 액션컬럼 >> 다이얼로그로 해당 프로젝트 정보 보여줌. (SHI/벤더 동일) + +- 견적 프로젝트명 +- 척수 +- 선주명 +- 선급코드(선급명) +- 선종명 +- 선형명 +- 시리즈 상세보기 >> 시리즈별 K/L 연도분기 >> 2026.2Q 형식 +dueDate (마감일) +sentDate (발송일) +sentBy (발송자) +createdBy (생성자) +updatedBy (수정자) +createdAt (생성일) +updatedAt (수정일) +첨부파일 첨부 테이블 +취소 이유 (삼중이 취소했을 때) +데이터 없으면 취소하기 버튼으로 보여주기. +코멘트 액션컬럼 +---컬럼--- + +2. 디테일 테이블 +디테일 테이블에서는 마스터 테이블의 레코드를 선택했을 때 해당 레코드의 상세내역을 보여줌. +여기서는 벤더별 rfq 송신 및 현황 확인을 응답을 확인할 수 있도록, 발주용 견적과 유사하게 처리 +---컬럼--- +벤더명 +상태 +응답 (가격) +발송일 +발송자 +응답일 +응답자 diff --git a/lib/techsales-rfq/table/create-rfq-dialog.tsx b/lib/techsales-rfq/table/create-rfq-dialog.tsx new file mode 100644 index 00000000..cc652b44 --- /dev/null +++ b/lib/techsales-rfq/table/create-rfq-dialog.tsx @@ -0,0 +1,537 @@ +"use client" + +import * as React from "react" +import { toast } from "sonner" +import { ArrowUpDown, CheckSquare, Plus, Search, Square, X, Loader2 } from "lucide-react" +import { Input } from "@/components/ui/input" +import { Calendar } from "@/components/ui/calendar" +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" +import { CalendarIcon } from "lucide-react" +import { format } from "date-fns" +import { ko } from "date-fns/locale" + +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, + FormDescription, +} from "@/components/ui/form" +import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" +import * as z from "zod" +import { EstimateProjectSelector } from "@/components/BidProjectSelector" +import { type Project } from "@/lib/rfqs/service" +import { createTechSalesRfq } from "@/lib/techsales-rfq/service" +import { useSession } from "next-auth/react" +import { Separator } from "@/components/ui/separator" +import { Badge } from "@/components/ui/badge" +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { cn } from "@/lib/utils" +import { ScrollArea } from "@/components/ui/scroll-area" + +// 실제 데이터 서비스 import +import { + getShipbuildingItemsByWorkType, + searchShipbuildingItems, + getWorkTypes, + type ShipbuildingItem, + type WorkType +} from "@/lib/items-tech/service" + +// 유효성 검증 스키마 - 자재코드(item_code) 배열로 변경 +const createRfqSchema = z.object({ + biddingProjectId: z.number({ + required_error: "프로젝트를 선택해주세요.", + }), + materialCodes: z.array(z.string()).min(1, { + message: "적어도 하나의 자재코드를 선택해야 합니다.", + }), + dueDate: z.date({ + required_error: "마감일을 선택해주세요.", + }), +}) + +// 폼 데이터 타입 +type CreateRfqFormValues = z.infer<typeof createRfqSchema> + +// 공종 타입 정의 +interface WorkTypeOption { + code: WorkType + name: string + description: string +} + +interface CreateRfqDialogProps { + onCreated?: () => void; +} + +export function CreateRfqDialog({ onCreated }: CreateRfqDialogProps) { + const { data: session } = useSession() + const [isProcessing, setIsProcessing] = React.useState(false) + const [isDialogOpen, setIsDialogOpen] = React.useState(false) + const [selectedProject, setSelectedProject] = React.useState<Project | null>(null) + + // 검색 및 필터링 상태 + const [itemSearchQuery, setItemSearchQuery] = React.useState("") + const [selectedWorkType, setSelectedWorkType] = React.useState<WorkType | null>(null) + const [selectedItems, setSelectedItems] = React.useState<ShipbuildingItem[]>([]) + const [isSearchingItems, setIsSearchingItems] = React.useState(false) + + // 데이터 상태 + const [workTypes, setWorkTypes] = React.useState<WorkTypeOption[]>([]) + const [availableItems, setAvailableItems] = React.useState<ShipbuildingItem[]>([]) + const [isLoadingItems, setIsLoadingItems] = React.useState(false) + + // RFQ 생성 폼 + const form = useForm<CreateRfqFormValues>({ + resolver: zodResolver(createRfqSchema), + defaultValues: { + biddingProjectId: undefined, + materialCodes: [], + dueDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), // 14일 후 + } + }) + + // 공종 목록 로드 + React.useEffect(() => { + const loadWorkTypes = async () => { + const types = await getWorkTypes() + setWorkTypes(types) + } + loadWorkTypes() + }, []) + + // 아이템 데이터 로드 + const loadItems = React.useCallback(async () => { + setIsLoadingItems(true) + try { + let result + if (itemSearchQuery.trim()) { + result = await searchShipbuildingItems(itemSearchQuery, selectedWorkType || undefined) + } else { + result = await getShipbuildingItemsByWorkType(selectedWorkType || undefined) + } + + if (result.error) { + toast.error(`아이템 로드 오류: ${result.error}`) + setAvailableItems([]) + } else { + setAvailableItems(result.data || []) + } + } catch (error) { + console.error("아이템 로드 오류:", error) + toast.error("아이템을 불러오는 중 오류가 발생했습니다") + setAvailableItems([]) + } finally { + setIsLoadingItems(false) + } + }, [itemSearchQuery, selectedWorkType]) + + // 아이템 검색 디바운스 + React.useEffect(() => { + setIsSearchingItems(true) + const timer = setTimeout(() => { + loadItems() + setIsSearchingItems(false) + }, 300) + + return () => clearTimeout(timer) + }, [loadItems]) + + // 프로젝트 선택 처리 + const handleProjectSelect = (project: Project) => { + setSelectedProject(project) + form.setValue("biddingProjectId", project.id) + // 선택 초기화 + setSelectedItems([]) + form.setValue("materialCodes", []) + } + + // 아이템 선택/해제 처리 + const handleItemToggle = (item: ShipbuildingItem) => { + const isSelected = selectedItems.some(selected => selected.id === item.id) + + if (isSelected) { + // 아이템 선택 해제 + const newSelectedItems = selectedItems.filter(selected => selected.id !== item.id) + setSelectedItems(newSelectedItems) + form.setValue("materialCodes", newSelectedItems.map(item => item.itemCode)) + } else { + // 아이템 선택 추가 + const newSelectedItems = [...selectedItems, item] + setSelectedItems(newSelectedItems) + form.setValue("materialCodes", newSelectedItems.map(item => item.itemCode)) + } + } + + // 아이템 제거 처리 + const handleRemoveItem = (itemId: number) => { + const newSelectedItems = selectedItems.filter(item => item.id !== itemId) + setSelectedItems(newSelectedItems) + form.setValue("materialCodes", newSelectedItems.map(item => item.itemCode)) + } + + // RFQ 생성 함수 + const handleCreateRfq = async (data: CreateRfqFormValues) => { + try { + setIsProcessing(true) + + // 사용자 인증 확인 + if (!session?.user?.id) { + throw new Error("로그인이 필요합니다") + } + + // 자재코드(item_code) 배열을 materialGroupCodes로 전달 + const result = await createTechSalesRfq({ + biddingProjectId: data.biddingProjectId, + materialGroupCodes: data.materialCodes, // item_code를 자재코드로 사용 + createdBy: Number(session.user.id), + dueDate: data.dueDate, + }) + + if (result.error) { + throw new Error(result.error) + } + + // 성공적으로 생성되면 다이얼로그 닫기 및 메시지 표시 + toast.success(`${result.data?.length || 0}개의 RFQ가 성공적으로 생성되었습니다`) + setIsDialogOpen(false) + form.reset({ + biddingProjectId: undefined, + materialCodes: [], + dueDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), // 14일 후로 재설정 + }) + setSelectedProject(null) + setItemSearchQuery("") + setSelectedWorkType(null) + setSelectedItems([]) + setAvailableItems([]) + + // 생성 후 콜백 실행 + if (onCreated) { + onCreated() + } + + } catch (error) { + console.error("RFQ 생성 오류:", error) + toast.error(`RFQ 생성 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`) + } finally { + setIsProcessing(false) + } + } + + return ( + <Dialog + open={isDialogOpen} + onOpenChange={(open) => { + setIsDialogOpen(open) + if (!open) { + form.reset({ + biddingProjectId: undefined, + materialCodes: [], + dueDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), // 14일 후로 재설정 + }) + setSelectedProject(null) + setItemSearchQuery("") + setSelectedWorkType(null) + setSelectedItems([]) + setAvailableItems([]) + } + }} + > + <DialogTrigger asChild> + <Button + variant="default" + size="sm" + className="gap-2" + disabled={isProcessing} + > + <Plus className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline">RFQ 생성</span> + </Button> + </DialogTrigger> + <DialogContent className="max-w-4xl w-[90vw] h-[90vh] overflow-hidden flex flex-col"> + <DialogHeader> + <DialogTitle>RFQ 생성</DialogTitle> + </DialogHeader> + + <div className="flex-1 overflow-y-auto"> + <Form {...form}> + <form onSubmit={form.handleSubmit(handleCreateRfq)} className="space-y-4"> + {/* 프로젝트 선택 */} + <FormField + control={form.control} + name="biddingProjectId" + render={({ field }) => ( + <FormItem> + <FormLabel>입찰 프로젝트</FormLabel> + <FormControl> + <EstimateProjectSelector + selectedProjectId={field.value} + onProjectSelect={handleProjectSelect} + placeholder="입찰 프로젝트를 선택하세요" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <Separator className="my-4" /> + + {/* 마감일 설정 */} + <FormField + control={form.control} + name="dueDate" + render={({ field }) => ( + <FormItem className="flex flex-col"> + <FormLabel>마감일</FormLabel> + <Popover> + <PopoverTrigger asChild> + <FormControl> + <Button + variant="outline" + className={cn( + "w-full pl-3 text-left font-normal", + !field.value && "text-muted-foreground" + )} + > + {field.value ? ( + format(field.value, "PPP", { locale: ko }) + ) : ( + <span>마감일을 선택하세요</span> + )} + <CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> + </Button> + </FormControl> + </PopoverTrigger> + <PopoverContent className="w-auto p-0" align="start"> + <Calendar + mode="single" + selected={field.value} + onSelect={field.onChange} + disabled={(date) => + date < new Date() || date < new Date("1900-01-01") + } + initialFocus + /> + </PopoverContent> + </Popover> + <FormDescription> + 벤더가 견적을 제출해야 하는 마감일입니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <Separator className="my-4" /> + + {!selectedProject ? ( + <div className="text-sm text-muted-foreground italic text-center py-8"> + 먼저 프로젝트를 선택해주세요 + </div> + ) : ( + <div className="space-y-6"> + {/* 아이템 선택 영역 */} + <div className="space-y-4"> + <div> + <FormLabel>조선 아이템 선택</FormLabel> + <FormDescription> + 공종별 아이템을 선택하세요 + </FormDescription> + </div> + + {/* 아이템 검색 및 필터 */} + <div className="space-y-2"> + <div className="flex space-x-2"> + <div className="relative flex-1"> + <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" /> + <Input + placeholder="아이템 검색..." + value={itemSearchQuery} + onChange={(e) => setItemSearchQuery(e.target.value)} + className="pl-8 pr-8" + /> + {itemSearchQuery && ( + <Button + variant="ghost" + size="sm" + className="absolute right-0 top-0 h-full px-3" + onClick={() => setItemSearchQuery("")} + > + <X className="h-4 w-4" /> + </Button> + )} + {isSearchingItems && ( + <Loader2 className="absolute right-8 top-2.5 h-4 w-4 animate-spin text-muted-foreground" /> + )} + </div> + + {/* 공종 필터 */} + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="outline" className="gap-1"> + {selectedWorkType ? workTypes.find(wt => wt.code === selectedWorkType)?.name : "전체 공종"} + <ArrowUpDown className="ml-2 h-4 w-4 opacity-50" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end"> + <DropdownMenuCheckboxItem + checked={selectedWorkType === null} + onCheckedChange={() => setSelectedWorkType(null)} + > + 전체 공종 + </DropdownMenuCheckboxItem> + {workTypes.map(workType => ( + <DropdownMenuCheckboxItem + key={workType.code} + checked={selectedWorkType === workType.code} + onCheckedChange={() => setSelectedWorkType(workType.code)} + > + {workType.name} + </DropdownMenuCheckboxItem> + ))} + </DropdownMenuContent> + </DropdownMenu> + </div> + </div> + + {/* 아이템 목록 */} + <div className="border rounded-md"> + <ScrollArea className="h-[300px]"> + <div className="p-2 space-y-1"> + {isLoadingItems ? ( + <div className="text-center py-8 text-muted-foreground"> + <Loader2 className="h-6 w-6 animate-spin mx-auto mb-2" /> + 아이템을 불러오는 중... + </div> + ) : availableItems.length > 0 ? ( + availableItems.map((item) => { + const isSelected = selectedItems.some(selected => selected.id === item.id) + return ( + <div + key={item.id} + className={cn( + "flex items-center space-x-2 p-2 rounded-md cursor-pointer hover:bg-muted", + isSelected && "bg-muted" + )} + onClick={() => handleItemToggle(item)} + > + <div className="flex items-center space-x-2 flex-1"> + {isSelected ? ( + <CheckSquare className="h-4 w-4" /> + ) : ( + <Square className="h-4 w-4" /> + )} + <div className="flex-1"> + <div className="font-medium"> + {item.itemList || item.itemName} + </div> + <div className="text-sm text-muted-foreground"> + {item.itemCode} • {item.description || '설명 없음'} + </div> + <div className="text-xs text-muted-foreground"> + 공종: {item.workType} • 선종: {item.shipTypes} + </div> + </div> + </div> + </div> + ) + }) + ) : ( + <div className="text-center py-8 text-muted-foreground"> + {itemSearchQuery ? "검색 결과가 없습니다" : "아이템이 없습니다"} + </div> + )} + </div> + </ScrollArea> + </div> + + {/* 선택된 아이템 목록 */} + <FormField + control={form.control} + name="materialCodes" + render={() => ( + <FormItem> + <FormLabel>선택된 아이템 ({selectedItems.length}개)</FormLabel> + <div className="min-h-[80px] p-3 border rounded-md bg-muted/50"> + {selectedItems.length > 0 ? ( + <div className="flex flex-wrap gap-2"> + {selectedItems.map((item) => ( + <Badge + key={item.id} + variant="secondary" + className="flex items-center gap-1" + > + {item.itemList || item.itemName} ({item.itemCode}) + <X + className="h-3 w-3 cursor-pointer hover:text-destructive" + onClick={() => handleRemoveItem(item.id)} + /> + </Badge> + ))} + </div> + ) : ( + <div className="flex items-center justify-center h-full text-sm text-muted-foreground"> + 선택된 아이템이 없습니다 + </div> + )} + </div> + <FormMessage /> + </FormItem> + )} + /> + </div> + </div> + )} + + {/* 안내 메시지 */} + {selectedProject && ( + <div className="text-sm text-muted-foreground bg-muted p-3 rounded-md"> + <p>• 공종별 조선 아이템을 선택하세요.</p> + <p>• 선택된 아이템의 자재코드(item_code)별로 개별 RFQ가 생성됩니다.</p> + <p>• 아이템 코드가 자재 그룹 코드로 사용됩니다.</p> + <p>• 마감일은 벤더가 견적을 제출해야 하는 날짜입니다.</p> + </div> + )} + + <div className="flex justify-end space-x-2 pt-4"> + <Button + type="button" + variant="outline" + onClick={() => setIsDialogOpen(false)} + disabled={isProcessing} + > + 취소 + </Button> + <Button + type="submit" + disabled={isProcessing || !selectedProject || selectedItems.length === 0} + > + {isProcessing ? "처리 중..." : `${selectedItems.length}개 자재코드로 생성하기`} + </Button> + </div> + </form> + </Form> + </div> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx b/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx new file mode 100644 index 00000000..b66f4d77 --- /dev/null +++ b/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx @@ -0,0 +1,357 @@ +"use client" + +import * as React from "react" +import { useState, useEffect, useCallback } from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { z } from "zod" +import { toast } from "sonner" +import { Check, X, Search, Loader2 } from "lucide-react" +import { useSession } from "next-auth/react" + +import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Form, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { ScrollArea } from "@/components/ui/scroll-area" +import { Badge } from "@/components/ui/badge" +import { addVendorsToTechSalesRfq } from "@/lib/techsales-rfq/service" +import { searchVendors } from "@/lib/vendors/service" + +// 폼 유효성 검증 스키마 - 간단화 +const vendorFormSchema = z.object({ + vendorIds: z.array(z.number()).min(1, "최소 하나의 벤더를 선택해주세요"), +}) + +type VendorFormValues = z.infer<typeof vendorFormSchema> + +// 기술영업 RFQ 타입 정의 +type TechSalesRfq = { + id: number + rfqCode: string | null + status: string + [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any +} + +// 벤더 검색 결과 타입 (searchVendors 함수 반환 타입과 일치) +type VendorSearchResult = { + id: number + vendorName: string + vendorCode: string | null + status: string + country: string | null +} + +interface AddVendorDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedRfq: TechSalesRfq | null + onSuccess?: () => void + existingVendorIds?: number[] +} + +export function AddVendorDialog({ + open, + onOpenChange, + selectedRfq, + onSuccess, + existingVendorIds = [], +}: AddVendorDialogProps) { + const { data: session } = useSession() + const [isSubmitting, setIsSubmitting] = useState(false) + const [searchTerm, setSearchTerm] = useState("") + const [searchResults, setSearchResults] = useState<VendorSearchResult[]>([]) + const [isSearching, setIsSearching] = useState(false) + const [hasSearched, setHasSearched] = useState(false) + // 선택된 벤더들을 별도로 관리하여 검색과 독립적으로 유지 + const [selectedVendorData, setSelectedVendorData] = useState<VendorSearchResult[]>([]) + + const form = useForm<VendorFormValues>({ + resolver: zodResolver(vendorFormSchema), + defaultValues: { + vendorIds: [], + }, + }) + + const selectedVendorIds = form.watch("vendorIds") + + // 검색 함수 (디바운스 적용) + const searchVendorsDebounced = useCallback( + async (term: string) => { + if (!term.trim()) { + setSearchResults([]) + setHasSearched(false) + return + } + + setIsSearching(true) + try { + const results = await searchVendors(term, 100) + // 이미 추가된 벤더 제외 + const filteredResults = results.filter(vendor => !existingVendorIds.includes(vendor.id)) + setSearchResults(filteredResults) + setHasSearched(true) + } catch (error) { + console.error("벤더 검색 오류:", error) + toast.error("벤더 검색 중 오류가 발생했습니다") + setSearchResults([]) + } finally { + setIsSearching(false) + } + }, + [existingVendorIds] + ) + + // 검색어 변경 시 디바운스 적용 + useEffect(() => { + const timer = setTimeout(() => { + searchVendorsDebounced(searchTerm) + }, 300) + + return () => clearTimeout(timer) + }, [searchTerm, searchVendorsDebounced]) + + // 벤더 선택/해제 핸들러 + const handleVendorToggle = (vendor: VendorSearchResult) => { + const currentIds = form.getValues("vendorIds") + const isSelected = currentIds.includes(vendor.id) + + if (isSelected) { + // 선택 해제 + const newIds = currentIds.filter(id => id !== vendor.id) + const newSelectedData = selectedVendorData.filter(v => v.id !== vendor.id) + form.setValue("vendorIds", newIds, { shouldValidate: true }) + setSelectedVendorData(newSelectedData) + } else { + // 선택 추가 + const newIds = [...currentIds, vendor.id] + const newSelectedData = [...selectedVendorData, vendor] + form.setValue("vendorIds", newIds, { shouldValidate: true }) + setSelectedVendorData(newSelectedData) + } + } + + // 선택된 벤더 제거 핸들러 + const handleRemoveVendor = (vendorId: number) => { + const currentIds = form.getValues("vendorIds") + const newIds = currentIds.filter(id => id !== vendorId) + const newSelectedData = selectedVendorData.filter(v => v.id !== vendorId) + form.setValue("vendorIds", newIds, { shouldValidate: true }) + setSelectedVendorData(newSelectedData) + } + + // 폼 제출 핸들러 + async function onSubmit(values: VendorFormValues) { + if (!selectedRfq) { + toast.error("선택된 RFQ가 없습니다") + return + } + + if (!session?.user?.id) { + toast.error("로그인이 필요합니다") + return + } + + try { + setIsSubmitting(true) + + // 서비스 함수 호출 + const result = await addVendorsToTechSalesRfq({ + rfqId: selectedRfq.id, + vendorIds: values.vendorIds, + createdBy: Number(session.user.id), + }) + + if (result.error) { + toast.error(result.error) + } else { + const successMessage = `${result.successCount}개의 벤더가 성공적으로 추가되었습니다` + const errorMessage = result.errorCount && result.errorCount > 0 ? ` (${result.errorCount}개 실패)` : "" + toast.success(successMessage + errorMessage) + + onOpenChange(false) + form.reset() + setSearchTerm("") + setSearchResults([]) + setHasSearched(false) + setSelectedVendorData([]) + onSuccess?.() + } + } catch (error) { + console.error("벤더 추가 오류:", error) + toast.error("벤더 추가 중 오류가 발생했습니다") + } finally { + setIsSubmitting(false) + } + } + + // 다이얼로그 닫기 시 폼 리셋 + React.useEffect(() => { + if (!open) { + form.reset() + setSearchTerm("") + setSearchResults([]) + setHasSearched(false) + setSelectedVendorData([]) + } + }, [open, form]) + + return ( + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="sm:max-w-[700px] max-h-[80vh] flex flex-col"> + {/* 헤더 */} + <DialogHeader> + <DialogTitle>벤더 추가</DialogTitle> + <DialogDescription> + {selectedRfq ? ( + <> + <span className="font-medium">{selectedRfq.rfqCode}</span> RFQ에 벤더를 추가합니다. + </> + ) : ( + "RFQ에 벤더를 추가합니다." + )} + </DialogDescription> + </DialogHeader> + + {/* 콘텐츠 */} + <div className="flex-1 overflow-y-auto"> + <Form {...form}> + <form id="vendor-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> + {/* 벤더 검색 필드 */} + <div className="space-y-2"> + <label className="text-sm font-medium">벤더 검색</label> + <div className="relative"> + <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" /> + <Input + placeholder="벤더명 또는 벤더코드로 검색..." + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} + className="pl-10" + /> + {isSearching && ( + <Loader2 className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" /> + )} + </div> + </div> + + {/* 검색 결과 */} + {hasSearched && ( + <div className="space-y-2"> + <div className="text-sm font-medium"> + 검색 결과 ({searchResults.length}개) + </div> + <ScrollArea className="h-60 border rounded-md"> + <div className="p-2 space-y-1"> + {searchResults.length > 0 ? ( + searchResults.map((vendor) => ( + <div + key={vendor.id} + className={`flex items-center space-x-2 p-2 rounded-md cursor-pointer hover:bg-muted ${ + selectedVendorIds.includes(vendor.id) ? "bg-muted" : "" + }`} + onClick={() => handleVendorToggle(vendor)} + > + <div className="flex items-center space-x-2 flex-1"> + <Check + className={`h-4 w-4 ${ + selectedVendorIds.includes(vendor.id) + ? "opacity-100" + : "opacity-0" + }`} + /> + <div className="flex-1"> + <div className="font-medium">{vendor.vendorName}</div> + <div className="text-sm text-muted-foreground"> + {vendor.vendorCode || 'N/A'} {vendor.country && `• ${vendor.country}`} + </div> + </div> + </div> + </div> + )) + ) : ( + <div className="text-center py-8 text-muted-foreground"> + 검색 결과가 없습니다 + </div> + )} + </div> + </ScrollArea> + </div> + )} + + {/* 검색 안내 메시지 */} + {!hasSearched && !searchTerm && ( + <div className="text-center py-8 text-muted-foreground border rounded-md"> + 벤더명 또는 벤더코드를 입력하여 검색해주세요 + </div> + )} + + {/* 선택된 벤더 목록 - 하단에 항상 표시 */} + <FormField + control={form.control} + name="vendorIds" + render={() => ( + <FormItem> + <div className="space-y-2"> + <FormLabel>선택된 벤더 ({selectedVendorData.length}개)</FormLabel> + <div className="min-h-[60px] p-3 border rounded-md bg-muted/50"> + {selectedVendorData.length > 0 ? ( + <div className="flex flex-wrap gap-2"> + {selectedVendorData.map((vendor) => ( + <Badge + key={vendor.id} + variant="secondary" + className="flex items-center gap-1" + > + {vendor.vendorName} ({vendor.vendorCode || 'N/A'}) + <X + className="h-3 w-3 cursor-pointer hover:text-destructive" + onClick={() => handleRemoveVendor(vendor.id)} + /> + </Badge> + ))} + </div> + ) : ( + <div className="flex items-center justify-center h-full text-sm text-muted-foreground"> + 선택된 벤더가 없습니다 + </div> + )} + </div> + </div> + <FormMessage /> + </FormItem> + )} + /> + + {/* 안내 메시지 */} + <div className="text-sm text-muted-foreground bg-muted p-3 rounded-md"> + {/* <p>• 검색은 ACTIVE 상태의 벤더만 대상으로 합니다.</p> */} + <p>• 선택된 벤더들은 Draft 상태로 추가됩니다.</p> + <p>• 벤더별 견적 정보는 추가 후 개별적으로 입력할 수 있습니다.</p> + <p>• 이미 추가된 벤더는 검색 결과에서 체크됩니다.</p> + </div> + </form> + </Form> + </div> + + {/* 푸터 */} + <DialogFooter> + <Button + type="button" + variant="outline" + onClick={() => onOpenChange(false)} + disabled={isSubmitting} + > + 취소 + </Button> + <Button + type="submit" + form="vendor-form" + disabled={isSubmitting || selectedVendorIds.length === 0} + > + {isSubmitting ? "처리 중..." : `${selectedVendorIds.length}개 벤더 추가`} + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/delete-vendor-dialog.tsx b/lib/techsales-rfq/table/detail-table/delete-vendor-dialog.tsx new file mode 100644 index 00000000..d7e3403b --- /dev/null +++ b/lib/techsales-rfq/table/detail-table/delete-vendor-dialog.tsx @@ -0,0 +1,150 @@ +"use client" + +import * as React from "react" +import { type RfqDetailView } from "./rfq-detail-column" +import { type Row } from "@tanstack/react-table" +import { Loader, Trash } from "lucide-react" +import { toast } from "sonner" + +import { useMediaQuery } from "@/hooks/use-media-query" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from "@/components/ui/drawer" +import { deleteRfqDetail } from "@/lib/procurement-rfqs/services" + + +interface DeleteRfqDetailDialogProps + extends React.ComponentPropsWithoutRef<typeof Dialog> { + detail: RfqDetailView | null + showTrigger?: boolean + onSuccess?: () => void +} + +export function DeleteVendorDialog({ + detail, + showTrigger = true, + onSuccess, + ...props +}: DeleteRfqDetailDialogProps) { + const [isDeletePending, startDeleteTransition] = React.useTransition() + const isDesktop = useMediaQuery("(min-width: 640px)") + + function onDelete() { + if (!detail) return + + startDeleteTransition(async () => { + try { + const result = await deleteRfqDetail(detail.id) + + if (!result.success) { + toast.error(result.message || "삭제 중 오류가 발생했습니다") + return + } + + props.onOpenChange?.(false) + toast.success("RFQ 벤더 정보가 삭제되었습니다") + onSuccess?.() + } catch (error) { + console.error("RFQ 벤더 삭제 오류:", error) + toast.error("삭제 중 오류가 발생했습니다") + } + }) + } + + if (isDesktop) { + return ( + <Dialog {...props}> + {showTrigger ? ( + <DialogTrigger asChild> + <Button variant="destructive" size="sm"> + <Trash className="mr-2 size-4" aria-hidden="true" /> + 삭제 + </Button> + </DialogTrigger> + ) : null} + <DialogContent> + <DialogHeader> + <DialogTitle>정말로 삭제하시겠습니까?</DialogTitle> + <DialogDescription> + 이 작업은 되돌릴 수 없습니다. 벤더 "{detail?.vendorName}"({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다. + </DialogDescription> + </DialogHeader> + <DialogFooter className="gap-2 sm:space-x-0"> + <DialogClose asChild> + <Button variant="outline">취소</Button> + </DialogClose> + <Button + aria-label="선택한 RFQ 벤더 정보 삭제" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending} + > + {isDeletePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + 삭제 + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ) + } + + return ( + <Drawer {...props}> + {showTrigger ? ( + <DrawerTrigger asChild> + <Button variant="destructive" size="sm"> + <Trash className="mr-2 size-4" aria-hidden="true" /> + 삭제 + </Button> + </DrawerTrigger> + ) : null} + <DrawerContent> + <DrawerHeader> + <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle> + <DrawerDescription> + 이 작업은 되돌릴 수 없습니다. 벤더 "{detail?.vendorName}"({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다. + </DrawerDescription> + </DrawerHeader> + <DrawerFooter className="gap-2 sm:space-x-0"> + <DrawerClose asChild> + <Button variant="outline">취소</Button> + </DrawerClose> + <Button + aria-label="선택한 RFQ 벤더 정보 삭제" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending} + > + {isDeletePending && ( + <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> + )} + 삭제 + </Button> + </DrawerFooter> + </DrawerContent> + </Drawer> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/rfq-detail-column.tsx b/lib/techsales-rfq/table/detail-table/rfq-detail-column.tsx new file mode 100644 index 00000000..c4a7edde --- /dev/null +++ b/lib/techsales-rfq/table/detail-table/rfq-detail-column.tsx @@ -0,0 +1,291 @@ +"use client" + +import * as React from "react" +import type { ColumnDef, Row } from "@tanstack/react-table"; +import { formatDate } from "@/lib/utils" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Ellipsis, MessageCircle } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; + +export interface DataTableRowAction<TData> { + row: Row<TData>; + type: "delete" | "update" | "communicate"; +} + +// 벤더 견적 데이터 타입 정의 +export interface RfqDetailView { + id: number + rfqId: number + vendorId?: number | null + vendorName: string | null + vendorCode: string | null + totalPrice: string | number | null + currency: string | null + validUntil: Date | null + status: string | null + remark: string | null + submittedAt: Date | null + acceptedAt: Date | null + rejectionReason: string | null + createdAt: Date | null + updatedAt: Date | null + createdByName: string | null +} + +interface GetColumnsProps<TData> { + setRowAction: React.Dispatch< + React.SetStateAction<DataTableRowAction<TData> | null> + >; + unreadMessages?: Record<number, number>; // 읽지 않은 메시지 개수 +} + +export function getRfqDetailColumns({ + setRowAction, + unreadMessages = {} +}: GetColumnsProps<RfqDetailView>): ColumnDef<RfqDetailView>[] { + return [ + { + id: "select", + header: ({ table }) => ( + <Checkbox + checked={ + table.getIsAllPageRowsSelected() || + (table.getIsSomePageRowsSelected() && "indeterminate") + } + onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} + aria-label="모두 선택" + /> + ), + cell: ({ row }) => { + const status = row.original.status; + const isDraft = status === "Draft"; + + return ( + <Checkbox + checked={row.getIsSelected()} + onCheckedChange={(value) => row.toggleSelected(!!value)} + disabled={!isDraft} + aria-label="행 선택" + className={!isDraft ? "opacity-50 cursor-not-allowed" : ""} + /> + ); + }, + enableSorting: false, + enableHiding: false, + size: 40, + }, + { + accessorKey: "status", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="견적 상태" /> + ), + cell: ({ row }) => { + const status = row.getValue("status") as string; + // 상태에 따른 배지 색상 설정 + let variant: "default" | "secondary" | "outline" | "destructive" = "outline"; + + if (status === "Submitted") { + variant = "default"; // 제출됨 - 기본 색상 + } else if (status === "Accepted") { + variant = "secondary"; // 승인됨 - 보조 색상 + } else if (status === "Rejected") { + variant = "destructive"; // 거부됨 - 위험 색상 + } + + return ( + <Badge variant={variant}>{status || "Draft"}</Badge> + ); + }, + meta: { + excelHeader: "견적 상태" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "vendorCode", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="벤더 코드" /> + ), + cell: ({ row }) => <div>{row.getValue("vendorCode")}</div>, + meta: { + excelHeader: "벤더 코드" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "vendorName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="벤더명" /> + ), + cell: ({ row }) => <div>{row.getValue("vendorName")}</div>, + meta: { + excelHeader: "벤더명" + }, + enableResizing: true, + size: 160, + }, + { + accessorKey: "totalPrice", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="견적 금액" /> + ), + cell: ({ row }) => { + const value = row.getValue("totalPrice") as string | number | null; + const currency = row.getValue("currency") as string | null; + + if (value === null || value === undefined) return "-"; + + // 숫자로 변환 시도 + const numValue = typeof value === 'string' ? parseFloat(value) : value; + + return ( + <div className="font-medium"> + {isNaN(numValue) ? value : numValue.toLocaleString()} {currency} + </div> + ); + }, + meta: { + excelHeader: "견적 금액" + }, + enableResizing: true, + size: 140, + }, + { + accessorKey: "currency", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="통화" /> + ), + cell: ({ row }) => <div>{row.getValue("currency")}</div>, + meta: { + excelHeader: "통화" + }, + enableResizing: true, + size: 80, + }, + { + accessorKey: "validUntil", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="유효기간" /> + ), + cell: ({ cell }) => { + const value = cell.getValue() as Date | null; + return value ? formatDate(value, "KR") : "-"; + }, + meta: { + excelHeader: "유효기간" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "submittedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="제출일" /> + ), + cell: ({ cell }) => { + const value = cell.getValue() as Date | null; + return value ? formatDate(value, "KR") : "-"; + }, + meta: { + excelHeader: "제출일" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "createdByName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="등록자" /> + ), + cell: ({ row }) => <div>{row.getValue("createdByName")}</div>, + meta: { + excelHeader: "등록자" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "remark", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="비고" /> + ), + cell: ({ row }) => <div>{row.getValue("remark") || "-"}</div>, + meta: { + excelHeader: "비고" + }, + enableResizing: true, + size: 200, + }, + { + id: "actions", + header: () => <div className="text-right">동작</div>, + cell: function Cell({ row }) { + const vendorId = row.original.vendorId; + const unreadCount = vendorId ? unreadMessages[vendorId] || 0 : 0; + + return ( + <div className="text-right flex items-center justify-end gap-1"> + {/* 커뮤니케이션 버튼 */} + <div className="relative"> + <Button + variant="ghost" + size="sm" + className="h-8 w-8 p-0" + onClick={() => setRowAction({ row, type: "communicate" })} + title="벤더와 커뮤니케이션" + > + <MessageCircle className="h-4 w-4" /> + </Button> + {unreadCount > 0 && ( + <Badge + variant="destructive" + className="absolute -top-1 -right-1 h-4 w-4 p-0 text-xs flex items-center justify-center" + > + {unreadCount > 9 ? '9+' : unreadCount} + </Badge> + )} + </div> + + {/* 기존 드롭다운 메뉴 */} + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button + variant="ghost" + className="flex h-8 w-8 p-0 data-[state=open]:bg-muted" + > + <Ellipsis className="h-4 w-4" /> + <span className="sr-only">메뉴 열기</span> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end" className="w-[160px]"> + <DropdownMenuItem + onClick={() => setRowAction({ row, type: "update" })} + > + 벤더 수정 + </DropdownMenuItem> + <DropdownMenuItem + onClick={() => setRowAction({ row, type: "delete" })} + className="text-destructive focus:text-destructive" + > + 벤더 제거 + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + </div> + ); + }, + enableResizing: false, + size: 80, + }, + ]; +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/rfq-detail-table.tsx b/lib/techsales-rfq/table/detail-table/rfq-detail-table.tsx new file mode 100644 index 00000000..4f8ac37b --- /dev/null +++ b/lib/techsales-rfq/table/detail-table/rfq-detail-table.tsx @@ -0,0 +1,654 @@ +"use client" + +import * as React from "react" +import { useEffect, useState, useCallback, useMemo } from "react" +import { + DataTableRowAction, + getRfqDetailColumns, + RfqDetailView +} from "./rfq-detail-column" +import { toast } from "sonner" + +import { Skeleton } from "@/components/ui/skeleton" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Loader2, UserPlus, BarChart2, Send, Trash2, MessageCircle } from "lucide-react" +import { ClientDataTable } from "@/components/client-data-table/data-table" +import { AddVendorDialog } from "./add-vendor-dialog" +import { DeleteVendorDialog } from "./delete-vendor-dialog" +import { UpdateVendorSheet } from "./update-vendor-sheet" +import { VendorCommunicationDrawer } from "./vendor-communication-drawer" +import { VendorQuotationComparisonDialog } from "./vendor-quotation-comparison-dialog" + +// 기본적인 RFQ 타입 정의 +interface TechSalesRfq { + id: number + rfqCode: string | null + status: string + materialCode?: string | null + itemName?: string | null + remark?: string | null + rfqSendDate?: Date | null + dueDate?: Date | null + createdByName?: string | null + // 필요에 따라 다른 필드들 추가 + [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any +} + +// 프로퍼티 정의 +interface RfqDetailTablesProps { + selectedRfq: TechSalesRfq | null + maxHeight?: string | number +} + +// 데이터 타입 정의 +interface Vendor { + id: number; + vendorName: string; + vendorCode: string; + // 기타 필요한 벤더 속성들 +} + +interface Currency { + code: string; + name: string; +} + +interface PaymentTerm { + code: string; + description: string; +} + +interface Incoterm { + code: string; + description: string; +} + +export function RfqDetailTables({ selectedRfq, maxHeight }: RfqDetailTablesProps) { + // console.log("selectedRfq", selectedRfq) + + // 상태 관리 + const [isLoading, setIsLoading] = useState(false) + const [details, setDetails] = useState<RfqDetailView[]>([]) + const [vendorDialogOpen, setVendorDialogOpen] = React.useState(false) + const [updateSheetOpen, setUpdateSheetOpen] = React.useState(false) + const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false) + const [selectedDetail, setSelectedDetail] = React.useState<RfqDetailView | null>(null) + + const [vendors, setVendors] = React.useState<Vendor[]>([]) + const [currencies, setCurrencies] = React.useState<Currency[]>([]) + const [paymentTerms, setPaymentTerms] = React.useState<PaymentTerm[]>([]) + const [incoterms, setIncoterms] = React.useState<Incoterm[]>([]) + const [isAdddialogLoading, setIsAdddialogLoading] = useState(false) + + const [rowAction, setRowAction] = React.useState<DataTableRowAction<RfqDetailView> | null>(null) + + // 벤더 커뮤니케이션 상태 관리 + const [communicationDrawerOpen, setCommunicationDrawerOpen] = useState(false) + const [selectedVendor, setSelectedVendor] = useState<RfqDetailView | null>(null) + + // 읽지 않은 메시지 개수 + const [unreadMessages, setUnreadMessages] = useState<Record<number, number>>({}) + + // 견적 비교 다이얼로그 상태 관리 + const [comparisonDialogOpen, setComparisonDialogOpen] = useState(false) + + // 테이블 선택 상태 관리 + const [selectedRows, setSelectedRows] = useState<RfqDetailView[]>([]) + const [isSendingRfq, setIsSendingRfq] = useState(false) + const [isDeletingVendors, setIsDeletingVendors] = useState(false) + + // selectedRfq ID 메모이제이션 (객체 참조 변경 방지) + const selectedRfqId = useMemo(() => selectedRfq?.id, [selectedRfq?.id]) + + // existingVendorIds 메모이제이션 + const existingVendorIds = useMemo(() => { + return details.map(detail => Number(detail.vendorId)).filter(Boolean); + }, [details]); + + // 읽지 않은 메시지 로드 함수 메모이제이션 + const loadUnreadMessages = useCallback(async () => { + if (!selectedRfqId) return; + + try { + // TODO: 기술영업용 읽지 않은 메시지 수 가져오기 함수 구현 필요 + // const unreadData = await fetchUnreadMessages(selectedRfqId); + // setUnreadMessages(unreadData); + setUnreadMessages({}); + } catch (error) { + console.error("읽지 않은 메시지 로드 오류:", error); + } + }, [selectedRfqId]); + + // 데이터 새로고침 함수 메모이제이션 + const handleRefreshData = useCallback(async () => { + if (!selectedRfqId) return + + try { + // 실제 벤더 견적 데이터 다시 로딩 + const { getTechSalesVendorQuotationsWithJoin } = await import("@/lib/techsales-rfq/service") + + const result = await getTechSalesVendorQuotationsWithJoin({ + rfqId: selectedRfqId, + page: 1, + perPage: 1000, + }) + + // 데이터 변환 + const transformedData = result.data?.map(item => ({ + ...item, + detailId: item.id, + rfqId: selectedRfqId, + rfqCode: selectedRfq?.rfqCode || null, + vendorId: item.vendorId ? Number(item.vendorId) : undefined, + })) || [] + + setDetails(transformedData) + + // 읽지 않은 메시지 개수 업데이트 + await loadUnreadMessages(); + + toast.success("데이터를 성공적으로 새로고침했습니다") + } catch (error) { + console.error("데이터 새로고침 오류:", error) + toast.error("데이터를 새로고침하는 중 오류가 발생했습니다") + } + }, [selectedRfqId, selectedRfq?.rfqCode, loadUnreadMessages]) + + // 벤더 추가 핸들러 메모이제이션 + const handleAddVendor = useCallback(async () => { + try { + setIsAdddialogLoading(true) + + // TODO: 기술영업용 벤더, 통화, 지불조건, 인코텀즈 데이터 로드 함수 구현 필요 + // const [vendorsData, currenciesData, paymentTermsData, incotermsData] = await Promise.all([ + // fetchVendors(), + // fetchCurrencies(), + // fetchPaymentTerms(), + // fetchIncoterms() + // ]) + + // 임시 데이터 + setVendors([]) + setCurrencies([]) + setPaymentTerms([]) + setIncoterms([]) + + setVendorDialogOpen(true) + } catch (error) { + console.error("데이터 로드 오류:", error) + toast.error("벤더 정보를 불러오는 중 오류가 발생했습니다") + } finally { + setIsAdddialogLoading(false) + } + }, []) + + // RFQ 발송 핸들러 메모이제이션 + const handleSendRfq = useCallback(async () => { + if (selectedRows.length === 0) { + toast.warning("발송할 벤더를 선택해주세요."); + return; + } + + if (!selectedRfqId) { + toast.error("선택된 RFQ가 없습니다."); + return; + } + + try { + setIsSendingRfq(true); + + // 기술영업 RFQ 발송 서비스 함수 호출 + const vendorIds = selectedRows.map(row => row.vendorId).filter(Boolean); + const { sendTechSalesRfqToVendors } = await import("@/lib/techsales-rfq/service"); + + const result = await sendTechSalesRfqToVendors({ + rfqId: selectedRfqId, + vendorIds: vendorIds as number[] + }); + + if (result.success) { + toast.success(result.message || `${selectedRows.length}개 벤더에게 RFQ가 발송되었습니다.`); + } else { + toast.error(result.message || "RFQ 발송 중 오류가 발생했습니다."); + } + + // 선택 해제 + setSelectedRows([]); + + // 데이터 새로고침 + await handleRefreshData(); + + } catch (error) { + console.error("RFQ 발송 오류:", error); + toast.error("RFQ 발송 중 오류가 발생했습니다."); + } finally { + setIsSendingRfq(false); + } + }, [selectedRows, selectedRfqId, handleRefreshData]); + + // 벤더 삭제 핸들러 메모이제이션 + const handleDeleteVendors = useCallback(async () => { + if (selectedRows.length === 0) { + toast.warning("삭제할 벤더를 선택해주세요."); + return; + } + + if (!selectedRfqId) { + toast.error("선택된 RFQ가 없습니다."); + return; + } + + try { + setIsDeletingVendors(true); + + const vendorIds = selectedRows.map(row => row.vendorId).filter(Boolean) as number[]; + + if (vendorIds.length === 0) { + toast.error("유효한 벤더 ID가 없습니다."); + return; + } + + // 서비스 함수 호출 + const { removeVendorsFromTechSalesRfq } = await import("@/lib/techsales-rfq/service"); + + const result = await removeVendorsFromTechSalesRfq({ + rfqId: selectedRfqId, + vendorIds: vendorIds + }); + + if (result.error) { + toast.error(result.error); + } else { + const successMessage = `${result.successCount}개의 벤더가 성공적으로 삭제되었습니다`; + const errorMessage = result.errorCount && result.errorCount > 0 ? ` (${result.errorCount}개 실패)` : ""; + toast.success(successMessage + errorMessage); + } + + // 선택 해제 + setSelectedRows([]); + + // 데이터 새로고침 + await handleRefreshData(); + + } catch (error) { + console.error("벤더 삭제 오류:", error); + toast.error("벤더 삭제 중 오류가 발생했습니다."); + } finally { + setIsDeletingVendors(false); + } + }, [selectedRows, selectedRfqId, handleRefreshData]); + + // 견적 비교 다이얼로그 열기 핸들러 메모이제이션 + const handleOpenComparisonDialog = useCallback(() => { + // 제출된 견적이 있는 벤더가 최소 1개 이상 있는지 확인 + const hasSubmittedQuotations = details.some(detail => + detail.status === "Submitted" // RfqDetailView의 실제 필드 사용 + ); + + if (!hasSubmittedQuotations) { + toast.warning("제출된 견적이 없습니다."); + return; + } + + setComparisonDialogOpen(true); + }, [details]) + + // 칼럼 정의 - unreadMessages 상태 전달 (메모이제이션) + const columns = useMemo(() => + getRfqDetailColumns({ + setRowAction, + unreadMessages + }), [unreadMessages]) + + // 필터 필드 정의 (메모이제이션) + const advancedFilterFields = useMemo( + () => [ + { + id: "vendorName", + label: "벤더명", + type: "text", + }, + { + id: "vendorCode", + label: "벤더 코드", + type: "text", + }, + { + id: "currency", + label: "통화", + type: "text", + }, + ], + [] + ) + + // 계산된 값들 메모이제이션 + const totalUnreadMessages = useMemo(() => + Object.values(unreadMessages).reduce((sum, count) => sum + count, 0), + [unreadMessages] + ); + + const vendorsWithQuotations = useMemo(() => + details.filter(detail => detail.status === "Submitted").length, + [details] + ); + + // RFQ ID가 변경될 때 데이터 로드 + useEffect(() => { + async function loadRfqDetails() { + if (!selectedRfqId) { + setDetails([]) + return + } + + try { + setIsLoading(true) + + // 실제 벤더 견적 데이터 로딩 + const { getTechSalesVendorQuotationsWithJoin } = await import("@/lib/techsales-rfq/service") + + const result = await getTechSalesVendorQuotationsWithJoin({ + rfqId: selectedRfqId, + page: 1, + perPage: 1000, // 모든 데이터 가져오기 + }) + + // 데이터 변환 (procurement 패턴에 맞게) + const transformedData = result.data?.map(item => ({ + ...item, + detailId: item.id, + rfqId: selectedRfqId, + rfqCode: selectedRfq?.rfqCode || null, + vendorId: item.vendorId ? Number(item.vendorId) : undefined, + // 기타 필요한 필드 변환 + })) || [] + + setDetails(transformedData) + + // 읽지 않은 메시지 개수 로드 + await loadUnreadMessages(); + + } catch (error) { + console.error("RFQ 디테일 로드 오류:", error) + setDetails([]) + toast.error("RFQ 세부정보를 불러오는 중 오류가 발생했습니다") + } finally { + setIsLoading(false) + } + } + + loadRfqDetails() + }, [selectedRfqId, selectedRfq?.rfqCode, loadUnreadMessages]) + + // 주기적으로 읽지 않은 메시지 갱신 (60초마다) - 메모이제이션된 함수 사용 + useEffect(() => { + if (!selectedRfqId) return; + + const intervalId = setInterval(() => { + loadUnreadMessages(); + }, 60000); // 60초마다 갱신 + + return () => clearInterval(intervalId); + }, [selectedRfqId, loadUnreadMessages]); + + // rowAction 처리 - procurement 패턴 적용 (메모이제이션) + useEffect(() => { + if (!rowAction) return + + const handleRowAction = async () => { + try { + // 통신 액션인 경우 드로어 열기 + if (rowAction.type === "communicate") { + setSelectedVendor(rowAction.row.original); + setCommunicationDrawerOpen(true); + + // 해당 벤더의 읽지 않은 메시지를 0으로 설정 (메시지를 읽은 것으로 간주) + const vendorId = rowAction.row.original.vendorId; + if (vendorId) { + setUnreadMessages(prev => ({ + ...prev, + [vendorId]: 0 + })); + } + + // rowAction 초기화 + setRowAction(null); + return; + } + + // 다른 액션들은 기존과 동일하게 처리 + setIsAdddialogLoading(true); + + // TODO: 필요한 데이터 로드 (벤더, 통화, 지불조건, 인코텀즈) + // const [vendorsData, currenciesData, paymentTermsData, incotermsData] = await Promise.all([ + // fetchVendors(), + // fetchCurrencies(), + // fetchPaymentTerms(), + // fetchIncoterms() + // ]); + + // 임시 데이터 + setVendors([]); + setCurrencies([]); + setPaymentTerms([]); + setIncoterms([]); + + // 이제 데이터가 로드되었으므로 필요한 작업 수행 + if (rowAction.type === "update") { + setSelectedDetail(rowAction.row.original); + setUpdateSheetOpen(true); + } else if (rowAction.type === "delete") { + setSelectedDetail(rowAction.row.original); + setDeleteDialogOpen(true); + } + } catch (error) { + console.error("데이터 로드 오류:", error); + toast.error("데이터를 불러오는 중 오류가 발생했습니다"); + } finally { + // communicate 타입이 아닌 경우에만 로딩 상태 변경 + if (rowAction && rowAction.type !== "communicate") { + setIsAdddialogLoading(false); + } + } + }; + + handleRowAction(); + }, [rowAction]) + + // 선택된 행 변경 핸들러 메모이제이션 + const handleSelectedRowsChange = useCallback((selectedRowsData: RfqDetailView[]) => { + setSelectedRows(selectedRowsData); + }, []); + + // 커뮤니케이션 드로어 변경 핸들러 메모이제이션 + const handleCommunicationDrawerChange = useCallback((open: boolean) => { + setCommunicationDrawerOpen(open); + // 드로어가 닫힐 때 읽지 않은 메시지 개수 갱신 + if (!open) loadUnreadMessages(); + }, [loadUnreadMessages]); + + if (!selectedRfq) { + return ( + <div className="flex items-center justify-center h-full text-muted-foreground"> + RFQ를 선택하세요 + </div> + ) + } + + // 로딩 중인 경우 + if (isLoading) { + return ( + <div className="p-4 space-y-4"> + <Skeleton className="h-8 w-1/2" /> + <Skeleton className="h-24 w-full" /> + <Skeleton className="h-48 w-full" /> + </div> + ) + } + + return ( + <div className="h-full overflow-hidden pt-4"> + {/* 테이블 또는 빈 상태 표시 */} + {details.length > 0 ? ( + <ClientDataTable + columns={columns} + data={details} + advancedFilterFields={advancedFilterFields} + maxHeight={maxHeight} + onSelectedRowsChange={handleSelectedRowsChange} + > + <div className="flex justify-between items-center"> + <div className="flex items-center gap-2 mr-2"> + {selectedRows.length > 0 && ( + <Badge variant="default" className="h-6"> + {selectedRows.length}개 선택됨 + </Badge> + )} + {totalUnreadMessages > 0 && ( + <Badge variant="destructive" className="h-6"> + 읽지 않은 메시지: {totalUnreadMessages}건 + </Badge> + )} + {vendorsWithQuotations > 0 && ( + <Badge variant="outline" className="h-6"> + 견적 제출: {vendorsWithQuotations}개 벤더 + </Badge> + )} + </div> + <div className="flex gap-2"> + {/* RFQ 발송 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleSendRfq} + disabled={selectedRows.length === 0 || isSendingRfq} + className="gap-2" + > + {isSendingRfq ? ( + <Loader2 className="size-4 animate-spin" aria-hidden="true" /> + ) : ( + <Send className="size-4" aria-hidden="true" /> + )} + <span>RFQ 발송</span> + </Button> + + {/* 벤더 삭제 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleDeleteVendors} + disabled={selectedRows.length === 0 || isDeletingVendors} + className="gap-2" + > + {isDeletingVendors ? ( + <Loader2 className="size-4 animate-spin" aria-hidden="true" /> + ) : ( + <Trash2 className="size-4" aria-hidden="true" /> + )} + <span>벤더 삭제</span> + </Button> + + {/* 견적 비교 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleOpenComparisonDialog} + className="gap-2" + disabled={ + !selectedRfq || + details.length === 0 || + vendorsWithQuotations === 0 + } + > + <BarChart2 className="size-4" aria-hidden="true" /> + <span>견적 비교/선택</span> + </Button> + + {/* 벤더 추가 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleAddVendor} + disabled={isAdddialogLoading} + className="gap-2" + > + {isAdddialogLoading ? ( + <Loader2 className="size-4 animate-spin" aria-hidden="true" /> + ) : ( + <UserPlus className="size-4" aria-hidden="true" /> + )} + <span>벤더 추가</span> + </Button> + </div> + </div> + </ClientDataTable> + ) : ( + <div className="flex h-full items-center justify-center text-muted-foreground"> + <div className="text-center"> + <p className="text-lg font-medium">벤더가 없습니다</p> + <p className="text-sm">벤더를 추가하여 RFQ를 시작하세요</p> + <Button + variant="outline" + size="sm" + onClick={handleAddVendor} + disabled={isAdddialogLoading} + className="mt-4 gap-2" + > + {isAdddialogLoading ? ( + <Loader2 className="size-4 animate-spin" aria-hidden="true" /> + ) : ( + <UserPlus className="size-4" aria-hidden="true" /> + )} + <span>벤더 추가</span> + </Button> + </div> + </div> + )} + + {/* 다이얼로그들 */} + <AddVendorDialog + open={vendorDialogOpen} + onOpenChange={setVendorDialogOpen} + selectedRfq={selectedRfq} + existingVendorIds={existingVendorIds} + onSuccess={handleRefreshData} + /> + + <UpdateVendorSheet + open={updateSheetOpen} + onOpenChange={setUpdateSheetOpen} + detail={selectedDetail} + vendors={vendors} + currencies={currencies} + paymentTerms={paymentTerms} + incoterms={incoterms} + onSuccess={handleRefreshData} + /> + + <DeleteVendorDialog + open={deleteDialogOpen} + onOpenChange={setDeleteDialogOpen} + detail={selectedDetail} + showTrigger={false} + onSuccess={handleRefreshData} + /> + + {/* 벤더 커뮤니케이션 드로어 */} + <VendorCommunicationDrawer + open={communicationDrawerOpen} + onOpenChange={handleCommunicationDrawerChange} + selectedRfq={selectedRfq} + selectedVendor={selectedVendor} + onSuccess={handleRefreshData} + /> + + {/* 견적 비교 다이얼로그 */} + <VendorQuotationComparisonDialog + open={comparisonDialogOpen} + onOpenChange={setComparisonDialogOpen} + selectedRfq={selectedRfq} + /> + </div> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/update-vendor-sheet.tsx b/lib/techsales-rfq/table/detail-table/update-vendor-sheet.tsx new file mode 100644 index 00000000..0399f4df --- /dev/null +++ b/lib/techsales-rfq/table/detail-table/update-vendor-sheet.tsx @@ -0,0 +1,449 @@ +"use client" + +import * as React from "react" +import { zodResolver } from "@hookform/resolvers/zod" +import { Check, ChevronsUpDown, Loader } from "lucide-react" +import { useForm } from "react-hook-form" +import { toast } from "sonner" +import { z } from "zod" + +import { cn } from "@/lib/utils" +import { Button } from "@/components/ui/button" +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, +} from "@/components/ui/command" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { + Sheet, + SheetClose, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, +} from "@/components/ui/sheet" +import { Checkbox } from "@/components/ui/checkbox" +import { ScrollArea } from "@/components/ui/scroll-area" + +import { RfqDetailView } from "./rfq-detail-column" +import { updateRfqDetail } from "@/lib/procurement-rfqs/services" + +// 폼 유효성 검증 스키마 +const updateRfqDetailSchema = z.object({ + vendorId: z.string().min(1, "벤더를 선택해주세요"), + currency: z.string().min(1, "통화를 선택해주세요"), + paymentTermsCode: z.string().min(1, "지불 조건을 선택해주세요"), + incotermsCode: z.string().min(1, "인코텀즈를 선택해주세요"), + incotermsDetail: z.string().optional(), + deliveryDate: z.string().optional(), + taxCode: z.string().optional(), + placeOfShipping: z.string().optional(), + placeOfDestination: z.string().optional(), + materialPriceRelatedYn: z.boolean().default(false), +}) + +type UpdateRfqDetailFormValues = z.infer<typeof updateRfqDetailSchema> + +// 데이터 타입 정의 +interface Vendor { + id: number; + vendorName: string; + vendorCode: string; +} + +interface Currency { + code: string; + name: string; +} + +interface PaymentTerm { + code: string; + description: string; +} + +interface Incoterm { + code: string; + description: string; +} + +interface UpdateRfqDetailSheetProps + extends React.ComponentPropsWithRef<typeof Sheet> { + detail: RfqDetailView | null; + vendors: Vendor[]; + currencies: Currency[]; + paymentTerms: PaymentTerm[]; + incoterms: Incoterm[]; + onSuccess?: () => void; +} + +export function UpdateVendorSheet({ + detail, + vendors, + currencies, + paymentTerms, + incoterms, + onSuccess, + ...props +}: UpdateRfqDetailSheetProps) { + const [isUpdatePending, startUpdateTransition] = React.useTransition() + const [vendorOpen, setVendorOpen] = React.useState(false) + + const form = useForm<UpdateRfqDetailFormValues>({ + resolver: zodResolver(updateRfqDetailSchema), + defaultValues: { + vendorId: detail?.vendorName ? String(vendors.find(v => v.vendorName === detail.vendorName)?.id || "") : "", + currency: detail?.currency || "", + paymentTermsCode: detail?.paymentTermsCode || "", + incotermsCode: detail?.incotermsCode || "", + incotermsDetail: detail?.incotermsDetail || "", + deliveryDate: detail?.deliveryDate ? new Date(detail.deliveryDate).toISOString().split('T')[0] : "", + taxCode: detail?.taxCode || "", + placeOfShipping: detail?.placeOfShipping || "", + placeOfDestination: detail?.placeOfDestination || "", + materialPriceRelatedYn: detail?.materialPriceRelatedYn || false, + }, + }) + + // detail이 변경될 때 form 값 업데이트 + React.useEffect(() => { + if (detail) { + const vendorId = vendors.find(v => v.vendorName === detail.vendorName)?.id + + form.reset({ + vendorId: vendorId ? String(vendorId) : "", + currency: detail.currency || "", + paymentTermsCode: detail.paymentTermsCode || "", + incotermsCode: detail.incotermsCode || "", + incotermsDetail: detail.incotermsDetail || "", + deliveryDate: detail.deliveryDate ? new Date(detail.deliveryDate).toISOString().split('T')[0] : "", + taxCode: detail.taxCode || "", + placeOfShipping: detail.placeOfShipping || "", + placeOfDestination: detail.placeOfDestination || "", + materialPriceRelatedYn: detail.materialPriceRelatedYn || false, + }) + } + }, [detail, form, vendors]) + + function onSubmit(values: UpdateRfqDetailFormValues) { + if (!detail) return + + startUpdateTransition(async () => { + try { + const result = await updateRfqDetail(detail.detailId, values) + + if (!result.success) { + toast.error(result.message || "수정 중 오류가 발생했습니다") + return + } + + props.onOpenChange?.(false) + toast.success("RFQ 벤더 정보가 수정되었습니다") + onSuccess?.() + } catch (error) { + console.error("RFQ 벤더 수정 오류:", error) + toast.error("수정 중 오류가 발생했습니다") + } + }) + } + + return ( + <Sheet {...props}> + <SheetContent className="flex w-full flex-col gap-6 sm:max-w-xl"> + <SheetHeader className="text-left"> + <SheetTitle>RFQ 벤더 정보 수정</SheetTitle> + <SheetDescription> + 벤더 정보를 수정하고 저장하세요 + </SheetDescription> + </SheetHeader> + <ScrollArea className="flex-1 pr-4"> + <Form {...form}> + <form + id="update-rfq-detail-form" + onSubmit={form.handleSubmit(onSubmit)} + className="flex flex-col gap-4" + > + {/* 검색 가능한 벤더 선택 필드 */} + <FormField + control={form.control} + name="vendorId" + render={({ field }) => ( + <FormItem className="flex flex-col"> + <FormLabel>벤더 <span className="text-red-500">*</span></FormLabel> + <Popover open={vendorOpen} onOpenChange={setVendorOpen}> + <PopoverTrigger asChild> + <FormControl> + <Button + variant="outline" + role="combobox" + aria-expanded={vendorOpen} + className={cn( + "w-full justify-between", + !field.value && "text-muted-foreground" + )} + > + {field.value + ? vendors.find((vendor) => String(vendor.id) === field.value) + ? `${vendors.find((vendor) => String(vendor.id) === field.value)?.vendorName} (${vendors.find((vendor) => String(vendor.id) === field.value)?.vendorCode})` + : "벤더를 선택하세요" + : "벤더를 선택하세요"} + <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> + </Button> + </FormControl> + </PopoverTrigger> + <PopoverContent className="w-[400px] p-0"> + <Command> + <CommandInput placeholder="벤더 검색..." /> + <CommandEmpty>검색 결과가 없습니다</CommandEmpty> + <ScrollArea className="h-60"> + <CommandGroup> + {vendors.map((vendor) => ( + <CommandItem + key={vendor.id} + value={`${vendor.vendorName} ${vendor.vendorCode}`} + onSelect={() => { + form.setValue("vendorId", String(vendor.id), { + shouldValidate: true, + }) + setVendorOpen(false) + }} + > + <Check + className={cn( + "mr-2 h-4 w-4", + String(vendor.id) === field.value + ? "opacity-100" + : "opacity-0" + )} + /> + {vendor.vendorName} ({vendor.vendorCode}) + </CommandItem> + ))} + </CommandGroup> + </ScrollArea> + </Command> + </PopoverContent> + </Popover> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="currency" + render={({ field }) => ( + <FormItem> + <FormLabel>통화 <span className="text-red-500">*</span></FormLabel> + <Select onValueChange={field.onChange} value={field.value}> + <FormControl> + <SelectTrigger> + <SelectValue placeholder="통화를 선택하세요" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {currencies.map((currency) => ( + <SelectItem key={currency.code} value={currency.code}> + {currency.name} ({currency.code}) + </SelectItem> + ))} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + <div className="grid grid-cols-2 gap-4"> + <FormField + control={form.control} + name="paymentTermsCode" + render={({ field }) => ( + <FormItem> + <FormLabel>지불 조건 <span className="text-red-500">*</span></FormLabel> + <Select onValueChange={field.onChange} value={field.value}> + <FormControl> + <SelectTrigger> + <SelectValue placeholder="지불 조건 선택" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {paymentTerms.map((term) => ( + <SelectItem key={term.code} value={term.code}> + {term.description} + </SelectItem> + ))} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="incotermsCode" + render={({ field }) => ( + <FormItem> + <FormLabel>인코텀즈 <span className="text-red-500">*</span></FormLabel> + <Select onValueChange={field.onChange} value={field.value}> + <FormControl> + <SelectTrigger> + <SelectValue placeholder="인코텀즈 선택" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {incoterms.map((incoterm) => ( + <SelectItem key={incoterm.code} value={incoterm.code}> + {incoterm.description} + </SelectItem> + ))} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <FormField + control={form.control} + name="incotermsDetail" + render={({ field }) => ( + <FormItem> + <FormLabel>인코텀즈 세부사항</FormLabel> + <FormControl> + <Input {...field} placeholder="인코텀즈 세부사항" /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <div className="grid grid-cols-2 gap-4"> + <FormField + control={form.control} + name="deliveryDate" + render={({ field }) => ( + <FormItem> + <FormLabel>납품 예정일</FormLabel> + <FormControl> + <Input {...field} type="date" /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="taxCode" + render={({ field }) => ( + <FormItem> + <FormLabel>세금 코드</FormLabel> + <FormControl> + <Input {...field} placeholder="세금 코드" /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <div className="grid grid-cols-2 gap-4"> + <FormField + control={form.control} + name="placeOfShipping" + render={({ field }) => ( + <FormItem> + <FormLabel>선적지</FormLabel> + <FormControl> + <Input {...field} placeholder="선적지" /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="placeOfDestination" + render={({ field }) => ( + <FormItem> + <FormLabel>도착지</FormLabel> + <FormControl> + <Input {...field} placeholder="도착지" /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <FormField + control={form.control} + name="materialPriceRelatedYn" + render={({ field }) => ( + <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <div className="space-y-1 leading-none"> + <FormLabel>자재 가격 관련 여부</FormLabel> + </div> + </FormItem> + )} + /> + </form> + </Form> + </ScrollArea> + <SheetFooter className="gap-2 pt-2 sm:space-x-0"> + <SheetClose asChild> + <Button type="button" variant="outline"> + 취소 + </Button> + </SheetClose> + <Button + type="submit" + form="update-rfq-detail-form" + disabled={isUpdatePending} + > + {isUpdatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + 저장 + </Button> + </SheetFooter> + </SheetContent> + </Sheet> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/vendor-communication-drawer.tsx b/lib/techsales-rfq/table/detail-table/vendor-communication-drawer.tsx new file mode 100644 index 00000000..51ef7b38 --- /dev/null +++ b/lib/techsales-rfq/table/detail-table/vendor-communication-drawer.tsx @@ -0,0 +1,521 @@ +"use client" + +import * as React from "react" +import { useState, useEffect, useRef } from "react" +import { RfqDetailView } from "./rfq-detail-column" +import { Button } from "@/components/ui/button" +import { Textarea } from "@/components/ui/textarea" +import { Avatar, AvatarFallback } from "@/components/ui/avatar" +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, +} from "@/components/ui/drawer" +import { ScrollArea } from "@/components/ui/scroll-area" +import { Badge } from "@/components/ui/badge" +import { toast } from "sonner" +import { + Send, + Paperclip, + DownloadCloud, + File, + FileText, + Image as ImageIcon, + AlertCircle, + X +} from "lucide-react" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { formatDateTime } from "@/lib/utils" +import { formatFileSize } from "@/lib/utils" // formatFileSize 유틸리티 임포트 +import { fetchVendorComments, markMessagesAsRead } from "@/lib/procurement-rfqs/services" + +// 타입 정의 +interface Comment { + id: number; + rfqId: number; + vendorId: number | null // null 허용으로 변경 + userId?: number | null // null 허용으로 변경 + content: string; + isVendorComment: boolean | null; // null 허용으로 변경 + createdAt: Date; + updatedAt: Date; + userName?: string | null // null 허용으로 변경 + vendorName?: string | null // null 허용으로 변경 + attachments: Attachment[]; + isRead: boolean | null // null 허용으로 변경 +} + +interface Attachment { + id: number; + fileName: string; + fileSize: number; + fileType: string; + filePath: string; + uploadedAt: Date; +} + +// 프롭스 정의 +interface VendorCommunicationDrawerProps { + open: boolean; + onOpenChange: (open: boolean) => void; + selectedRfq: { + id: number; + rfqCode: string | null; + status: string; + [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any + } | null; + selectedVendor: RfqDetailView | null; + onSuccess?: () => void; +} + +async function sendComment(params: { + rfqId: number; + vendorId: number; + content: string; + attachments?: File[]; +}): Promise<Comment> { + try { + // 폼 데이터 생성 (파일 첨부를 위해) + const formData = new FormData(); + formData.append('rfqId', params.rfqId.toString()); + formData.append('vendorId', params.vendorId.toString()); + formData.append('content', params.content); + formData.append('isVendorComment', 'false'); + + // 첨부파일 추가 + if (params.attachments && params.attachments.length > 0) { + params.attachments.forEach((file) => { + formData.append(`attachments`, file); + }); + } + + // API 엔드포인트 구성 + const url = `/api/procurement-rfqs/${params.rfqId}/vendors/${params.vendorId}/comments`; + + // API 호출 + const response = await fetch(url, { + method: 'POST', + body: formData, // multipart/form-data 형식 사용 + }); + + if (!response.ok) { + const errorText = await response.text(); + throw new Error(`API 요청 실패: ${response.status} ${errorText}`); + } + + // 응답 데이터 파싱 + const result = await response.json(); + + if (!result.success || !result.data) { + throw new Error(result.message || '코멘트 전송 중 오류가 발생했습니다'); + } + + return result.data.comment; + } catch (error) { + console.error('코멘트 전송 오류:', error); + throw error; + } +} + +export function VendorCommunicationDrawer({ + open, + onOpenChange, + selectedRfq, + selectedVendor, + onSuccess +}: VendorCommunicationDrawerProps) { + // 상태 관리 + const [comments, setComments] = useState<Comment[]>([]); + const [newComment, setNewComment] = useState(""); + const [attachments, setAttachments] = useState<File[]>([]); + const [isLoading, setIsLoading] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); + const fileInputRef = useRef<HTMLInputElement>(null); + const messagesEndRef = useRef<HTMLDivElement>(null); + + // 첨부파일 관련 상태 + const [previewDialogOpen, setPreviewDialogOpen] = useState(false); + const [selectedAttachment, setSelectedAttachment] = useState<Attachment | null>(null); + + // 드로어가 열릴 때 데이터 로드 + useEffect(() => { + if (open && selectedRfq && selectedVendor) { + loadComments(); + } + }, [open, selectedRfq, selectedVendor]); + + // 스크롤 최하단으로 이동 + useEffect(() => { + if (messagesEndRef.current) { + messagesEndRef.current.scrollIntoView({ behavior: "smooth" }); + } + }, [comments]); + + // 코멘트 로드 함수 + const loadComments = async () => { + if (!selectedRfq || !selectedVendor) return; + + try { + setIsLoading(true); + + // Server Action을 사용하여 코멘트 데이터 가져오기 + const commentsData = await fetchVendorComments(selectedRfq.id, selectedVendor.vendorId || 0); + setComments(commentsData as Comment[]); // 구체적인 타입으로 캐스팅 + + // Server Action을 사용하여 읽지 않은 메시지를 읽음 상태로 변경 + await markMessagesAsRead(selectedRfq.id, selectedVendor.vendorId || 0); + } catch (error) { + console.error("코멘트 로드 오류:", error); + toast.error("메시지를 불러오는 중 오류가 발생했습니다"); + } finally { + setIsLoading(false); + } + }; + + // 파일 선택 핸들러 + const handleFileSelect = () => { + fileInputRef.current?.click(); + }; + + // 파일 변경 핸들러 + const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { + if (e.target.files && e.target.files.length > 0) { + const newFiles = Array.from(e.target.files); + setAttachments(prev => [...prev, ...newFiles]); + } + }; + + // 파일 제거 핸들러 + const handleRemoveFile = (index: number) => { + setAttachments(prev => prev.filter((_, i) => i !== index)); + }; + + console.log(newComment) + + // 코멘트 전송 핸들러 + const handleSubmitComment = async () => { + console.log("버튼 클릭1", selectedRfq,selectedVendor, selectedVendor?.vendorId ) + console.log(!newComment.trim() && attachments.length === 0) + + if (!newComment.trim() && attachments.length === 0) return; + if (!selectedRfq || !selectedVendor || !selectedVendor.vendorId) return; + + console.log("버튼 클릭") + + try { + setIsSubmitting(true); + + // API를 사용하여 새 코멘트 전송 (파일 업로드 때문에 FormData 사용) + const newCommentObj = await sendComment({ + rfqId: selectedRfq.id, + vendorId: selectedVendor.vendorId, + content: newComment, + attachments: attachments + }); + + // 상태 업데이트 + setComments(prev => [...prev, newCommentObj]); + setNewComment(""); + setAttachments([]); + + toast.success("메시지가 전송되었습니다"); + + // 데이터 새로고침 + if (onSuccess) { + onSuccess(); + } + } catch (error) { + console.error("코멘트 전송 오류:", error); + toast.error("메시지 전송 중 오류가 발생했습니다"); + } finally { + setIsSubmitting(false); + } + }; + + // 첨부파일 미리보기 + const handleAttachmentPreview = (attachment: Attachment) => { + setSelectedAttachment(attachment); + setPreviewDialogOpen(true); + }; + + // 첨부파일 다운로드 + const handleAttachmentDownload = (attachment: Attachment) => { + // TODO: 실제 다운로드 구현 + window.open(attachment.filePath, '_blank'); + }; + + // 파일 아이콘 선택 + const getFileIcon = (fileType: string) => { + if (fileType.startsWith("image/")) return <ImageIcon className="h-5 w-5 text-blue-500" />; + if (fileType.includes("pdf")) return <FileText className="h-5 w-5 text-red-500" />; + if (fileType.includes("spreadsheet") || fileType.includes("excel")) + return <FileText className="h-5 w-5 text-green-500" />; + if (fileType.includes("document") || fileType.includes("word")) + return <FileText className="h-5 w-5 text-blue-500" />; + return <File className="h-5 w-5 text-gray-500" />; + }; + + // 첨부파일 미리보기 다이얼로그 + const renderAttachmentPreviewDialog = () => { + if (!selectedAttachment) return null; + + const isImage = selectedAttachment.fileType.startsWith("image/"); + const isPdf = selectedAttachment.fileType.includes("pdf"); + + return ( + <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}> + <DialogContent className="max-w-3xl"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + {getFileIcon(selectedAttachment.fileType)} + {selectedAttachment.fileName} + </DialogTitle> + <DialogDescription> + {formatFileSize(selectedAttachment.fileSize)} • {formatDateTime(selectedAttachment.uploadedAt)} + </DialogDescription> + </DialogHeader> + + <div className="min-h-[300px] flex items-center justify-center p-4"> + {isImage ? ( + <img + src={selectedAttachment.filePath} + alt={selectedAttachment.fileName} + className="max-h-[500px] max-w-full object-contain" + /> + ) : isPdf ? ( + <iframe + src={`${selectedAttachment.filePath}#toolbar=0`} + className="w-full h-[500px]" + title={selectedAttachment.fileName} + /> + ) : ( + <div className="flex flex-col items-center gap-4 p-8"> + {getFileIcon(selectedAttachment.fileType)} + <p className="text-muted-foreground text-sm">미리보기를 지원하지 않는 파일 형식입니다.</p> + <Button + variant="outline" + onClick={() => handleAttachmentDownload(selectedAttachment)} + > + <DownloadCloud className="h-4 w-4 mr-2" /> + 다운로드 + </Button> + </div> + )} + </div> + </DialogContent> + </Dialog> + ); + }; + + if (!selectedRfq || !selectedVendor) { + return null; + } + + return ( + <Drawer open={open} onOpenChange={onOpenChange}> + <DrawerContent className="max-h-[85vh]"> + <DrawerHeader className="border-b"> + <DrawerTitle className="flex items-center gap-2"> + <Avatar className="h-8 w-8"> + <AvatarFallback className="bg-primary/10"> + {selectedVendor.vendorName?.[0] || 'V'} + </AvatarFallback> + </Avatar> + <div> + <span>{selectedVendor.vendorName}</span> + <Badge variant="outline" className="ml-2">{selectedVendor.vendorCode}</Badge> + </div> + </DrawerTitle> + <DrawerDescription> + RFQ: {selectedRfq.rfqCode} • 프로젝트: {selectedRfq.projectName} + </DrawerDescription> + </DrawerHeader> + + <div className="p-0 flex flex-col h-[60vh]"> + {/* 메시지 목록 */} + <ScrollArea className="flex-1 p-4"> + {isLoading ? ( + <div className="flex h-full items-center justify-center"> + <p className="text-muted-foreground">메시지 로딩 중...</p> + </div> + ) : comments.length === 0 ? ( + <div className="flex h-full items-center justify-center"> + <div className="flex flex-col items-center gap-2"> + <AlertCircle className="h-6 w-6 text-muted-foreground" /> + <p className="text-muted-foreground">아직 메시지가 없습니다</p> + </div> + </div> + ) : ( + <div className="space-y-4"> + {comments.map(comment => ( + <div + key={comment.id} + className={`flex gap-3 ${comment.isVendorComment ? 'justify-start' : 'justify-end'}`} + > + {comment.isVendorComment && ( + <Avatar className="h-8 w-8 mt-1"> + <AvatarFallback className="bg-primary/10"> + {comment.vendorName?.[0] || 'V'} + </AvatarFallback> + </Avatar> + )} + + <div className={`rounded-lg p-3 max-w-[80%] ${ + comment.isVendorComment + ? 'bg-muted' + : 'bg-primary text-primary-foreground' + }`}> + <div className="text-sm font-medium mb-1"> + {comment.isVendorComment ? comment.vendorName : comment.userName} + </div> + + {comment.content && ( + <div className="text-sm whitespace-pre-wrap break-words"> + {comment.content} + </div> + )} + + {/* 첨부파일 표시 */} + {comment.attachments.length > 0 && ( + <div className={`mt-2 pt-2 ${ + comment.isVendorComment + ? 'border-t border-t-border/30' + : 'border-t border-t-primary-foreground/20' + }`}> + {comment.attachments.map(attachment => ( + <div + key={attachment.id} + className="flex items-center text-xs gap-2 mb-1 p-1 rounded hover:bg-black/5 cursor-pointer" + onClick={() => handleAttachmentPreview(attachment)} + > + {getFileIcon(attachment.fileType)} + <span className="flex-1 truncate">{attachment.fileName}</span> + <span className="text-xs opacity-70"> + {formatFileSize(attachment.fileSize)} + </span> + <Button + variant="ghost" + size="icon" + className="h-6 w-6 rounded-full" + onClick={(e) => { + e.stopPropagation(); + handleAttachmentDownload(attachment); + }} + > + <DownloadCloud className="h-3 w-3" /> + </Button> + </div> + ))} + </div> + )} + + <div className="text-xs mt-1 opacity-70 flex items-center gap-1 justify-end"> + {formatDateTime(comment.createdAt)} + </div> + </div> + + {!comment.isVendorComment && ( + <Avatar className="h-8 w-8 mt-1"> + <AvatarFallback className="bg-primary/20"> + {comment.userName?.[0] || 'U'} + </AvatarFallback> + </Avatar> + )} + </div> + ))} + <div ref={messagesEndRef} /> + </div> + )} + </ScrollArea> + + {/* 선택된 첨부파일 표시 */} + {attachments.length > 0 && ( + <div className="p-2 bg-muted mx-4 rounded-md mb-2"> + <div className="text-xs font-medium mb-1">첨부파일</div> + <div className="flex flex-wrap gap-2"> + {attachments.map((file, index) => ( + <div key={index} className="flex items-center bg-background rounded-md p-1 pr-2 text-xs"> + {file.type.startsWith("image/") ? ( + <ImageIcon className="h-4 w-4 mr-1 text-blue-500" /> + ) : ( + <File className="h-4 w-4 mr-1 text-gray-500" /> + )} + <span className="truncate max-w-[100px]">{file.name}</span> + <Button + variant="ghost" + size="icon" + className="h-4 w-4 ml-1 p-0" + onClick={() => handleRemoveFile(index)} + > + <X className="h-3 w-3" /> + </Button> + </div> + ))} + </div> + </div> + )} + + {/* 메시지 입력 영역 */} + <div className="p-4 border-t"> + <div className="flex gap-2 items-end"> + <div className="flex-1"> + <Textarea + placeholder="메시지를 입력하세요..." + className="min-h-[80px] resize-none" + value={newComment} + onChange={(e) => setNewComment(e.target.value)} + /> + </div> + <div className="flex flex-col gap-2"> + <input + type="file" + ref={fileInputRef} + className="hidden" + multiple + onChange={handleFileChange} + /> + <Button + variant="outline" + size="icon" + onClick={handleFileSelect} + title="파일 첨부" + > + <Paperclip className="h-4 w-4" /> + </Button> + <Button + onClick={handleSubmitComment} + disabled={(!newComment.trim() && attachments.length === 0) || isSubmitting} + > + <Send className="h-4 w-4" /> + </Button> + </div> + </div> + </div> + </div> + + <DrawerFooter className="border-t"> + <div className="flex justify-between"> + <Button variant="outline" onClick={() => loadComments()}> + 새로고침 + </Button> + <DrawerClose asChild> + <Button variant="outline">닫기</Button> + </DrawerClose> + </div> + </DrawerFooter> + </DrawerContent> + + {renderAttachmentPreviewDialog()} + </Drawer> + ); +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/vendor-quotation-comparison-dialog.tsx b/lib/techsales-rfq/table/detail-table/vendor-quotation-comparison-dialog.tsx new file mode 100644 index 00000000..d58dbd00 --- /dev/null +++ b/lib/techsales-rfq/table/detail-table/vendor-quotation-comparison-dialog.tsx @@ -0,0 +1,340 @@ +"use client" + +import * as React from "react" +import { useEffect, useState } from "react" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Skeleton } from "@/components/ui/skeleton" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table" +import { toast } from "sonner" +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog" + +// Lucide 아이콘 +import { Plus, Minus, CheckCircle, Loader2 } from "lucide-react" + +import { getTechSalesVendorQuotationsWithJoin } from "@/lib/techsales-rfq/service" +import { acceptTechSalesVendorQuotationAction } from "@/lib/techsales-rfq/actions" +import { formatCurrency, formatDate } from "@/lib/utils" + +// 기술영업 견적 정보 타입 +interface TechSalesVendorQuotation { + id: number + rfqId: number + vendorId: number + vendorName?: string | null + totalPrice: string | null + currency: string | null + validUntil: Date | null + status: string + remark: string | null + submittedAt: Date | null + acceptedAt: Date | null + createdAt: Date + updatedAt: Date +} + +interface VendorQuotationComparisonDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedRfq: { + id: number; + rfqCode: string | null; + status: string; + [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any + } | null +} + +export function VendorQuotationComparisonDialog({ + open, + onOpenChange, + selectedRfq, +}: VendorQuotationComparisonDialogProps) { + const [isLoading, setIsLoading] = useState(false) + const [quotations, setQuotations] = useState<TechSalesVendorQuotation[]>([]) + const [selectedVendorId, setSelectedVendorId] = useState<number | null>(null) + const [isAccepting, setIsAccepting] = useState(false) + const [showConfirmDialog, setShowConfirmDialog] = useState(false) + + useEffect(() => { + async function loadQuotationData() { + if (!open || !selectedRfq?.id) return + + try { + setIsLoading(true) + // 기술영업 견적 목록 조회 (제출된 견적만) + const result = await getTechSalesVendorQuotationsWithJoin({ + rfqId: selectedRfq.id, + page: 1, + perPage: 100, + filters: [ + { + id: "status" as keyof typeof techSalesVendorQuotations, + value: "Submitted", + type: "select" as const, + operator: "eq" as const, + rowId: "status" + } + ] + }) + + setQuotations(result.data || []) + } catch (error) { + console.error("견적 데이터 로드 오류:", error) + toast.error("견적 데이터를 불러오는 데 실패했습니다") + } finally { + setIsLoading(false) + } + } + + loadQuotationData() + }, [open, selectedRfq]) + + // 견적 상태 -> 뱃지 색 + const getStatusBadgeVariant = (status: string) => { + switch (status) { + case "Submitted": + return "default" + case "Accepted": + return "default" + case "Rejected": + return "destructive" + case "Revised": + return "destructive" + default: + return "secondary" + } + } + + // 벤더 선택 핸들러 + const handleSelectVendor = (vendorId: number) => { + setSelectedVendorId(vendorId) + setShowConfirmDialog(true) + } + + // 벤더 선택 확정 + const handleConfirmSelection = async () => { + if (!selectedVendorId) return + + try { + setIsAccepting(true) + + // 선택된 견적의 ID 찾기 + const selectedQuotation = quotations.find(q => q.vendorId === selectedVendorId) + if (!selectedQuotation) { + toast.error("선택된 견적을 찾을 수 없습니다") + return + } + + // 벤더 선택 API 호출 + const result = await acceptTechSalesVendorQuotationAction(selectedQuotation.id) + + if (result.success) { + toast.success(result.message || "벤더가 선택되었습니다") + setShowConfirmDialog(false) + onOpenChange(false) + + // 페이지 새로고침 또는 데이터 재로드 + window.location.reload() + } else { + toast.error(result.error || "벤더 선택에 실패했습니다") + } + } catch (error) { + console.error("벤더 선택 오류:", error) + toast.error("벤더 선택에 실패했습니다") + } finally { + setIsAccepting(false) + } + } + + const selectedVendor = quotations.find(q => q.vendorId === selectedVendorId) + + return ( + <> + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="max-w-[90vw] lg:max-w-5xl max-h-[90vh]"> + <DialogHeader> + <DialogTitle>벤더 견적 비교 및 선택</DialogTitle> + <DialogDescription> + {selectedRfq + ? `RFQ ${selectedRfq.rfqCode} - 제출된 견적을 비교하고 벤더를 선택하세요` + : ""} + </DialogDescription> + </DialogHeader> + + {isLoading ? ( + <div className="space-y-4"> + <Skeleton className="h-8 w-1/2" /> + <Skeleton className="h-48 w-full" /> + </div> + ) : quotations.length === 0 ? ( + <div className="py-8 text-center text-muted-foreground"> + 제출된(Submitted) 견적이 없습니다 + </div> + ) : ( + <div className="border rounded-md max-h-[60vh] overflow-auto"> + <table className="table-fixed w-full border-collapse"> + <thead className="sticky top-0 bg-background z-10"> + <TableRow> + <TableHead className="sticky left-0 top-0 z-20 bg-background p-2 w-32"> + 항목 + </TableHead> + {quotations.map((q) => ( + <TableHead key={q.id} className="p-2 text-center whitespace-nowrap w-48"> + <div className="flex flex-col items-center gap-2"> + <span>{q.vendorName || `벤더 ID: ${q.vendorId}`}</span> + <Button + size="sm" + variant={q.status === "Accepted" ? "default" : "outline"} + onClick={() => handleSelectVendor(q.vendorId)} + disabled={q.status === "Accepted"} + className="gap-1" + > + {q.status === "Accepted" ? ( + <> + <CheckCircle className="h-4 w-4" /> + 선택됨 + </> + ) : ( + "선택" + )} + </Button> + </div> + </TableHead> + ))} + </TableRow> + </thead> + <tbody> + {/* 견적 상태 */} + <TableRow> + <TableCell className="sticky left-0 z-10 bg-muted/30 p-2 font-medium"> + 견적 상태 + </TableCell> + {quotations.map((q) => ( + <TableCell key={`status-${q.id}`} className="p-2 text-center"> + <Badge variant={getStatusBadgeVariant(q.status)}> + {q.status} + </Badge> + </TableCell> + ))} + </TableRow> + + {/* 총 금액 */} + <TableRow> + <TableCell className="sticky left-0 z-10 bg-muted/30 p-2 font-medium"> + 총 금액 + </TableCell> + {quotations.map((q) => ( + <TableCell key={`total-${q.id}`} className="p-2 font-semibold text-center"> + {q.totalPrice ? formatCurrency(Number(q.totalPrice), q.currency || 'USD') : '-'} + </TableCell> + ))} + </TableRow> + + {/* 통화 */} + <TableRow> + <TableCell className="sticky left-0 z-10 bg-muted/30 p-2 font-medium"> + 통화 + </TableCell> + {quotations.map((q) => ( + <TableCell key={`currency-${q.id}`} className="p-2 text-center"> + {q.currency || '-'} + </TableCell> + ))} + </TableRow> + + {/* 유효기간 */} + <TableRow> + <TableCell className="sticky left-0 z-10 bg-muted/30 p-2 font-medium"> + 유효 기간 + </TableCell> + {quotations.map((q) => ( + <TableCell key={`valid-${q.id}`} className="p-2 text-center"> + {q.validUntil ? formatDate(q.validUntil, "KR") : '-'} + </TableCell> + ))} + </TableRow> + + {/* 제출일 */} + <TableRow> + <TableCell className="sticky left-0 z-10 bg-muted/30 p-2 font-medium"> + 제출일 + </TableCell> + {quotations.map((q) => ( + <TableCell key={`submitted-${q.id}`} className="p-2 text-center"> + {q.submittedAt ? formatDate(q.submittedAt, "KR") : '-'} + </TableCell> + ))} + </TableRow> + + {/* 비고 */} + <TableRow> + <TableCell className="sticky left-0 z-10 bg-muted/30 p-2 font-medium"> + 비고 + </TableCell> + {quotations.map((q) => ( + <TableCell + key={`remark-${q.id}`} + className="p-2 whitespace-pre-wrap text-center" + > + {q.remark || "-"} + </TableCell> + ))} + </TableRow> + </tbody> + </table> + </div> + )} + + <DialogFooter> + <Button variant="outline" onClick={() => onOpenChange(false)}> + 닫기 + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + + {/* 벤더 선택 확인 다이얼로그 */} + <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}> + <AlertDialogContent> + <AlertDialogHeader> + <AlertDialogTitle>벤더 선택 확인</AlertDialogTitle> + <AlertDialogDescription> + <strong>{selectedVendor?.vendorName || `벤더 ID: ${selectedVendorId}`}</strong>를 선택하시겠습니까? + <br /> + <br /> + 선택된 벤더의 견적이 승인되며, 다른 벤더들의 견적은 자동으로 거절됩니다. + 이 작업은 되돌릴 수 없습니다. + </AlertDialogDescription> + </AlertDialogHeader> + <AlertDialogFooter> + <AlertDialogCancel disabled={isAccepting}>취소</AlertDialogCancel> + <AlertDialogAction + onClick={handleConfirmSelection} + disabled={isAccepting} + className="gap-2" + > + {isAccepting && <Loader2 className="h-4 w-4 animate-spin" />} + 확인 + </AlertDialogAction> + </AlertDialogFooter> + </AlertDialogContent> + </AlertDialog> + </> + ) +} diff --git a/lib/techsales-rfq/table/project-detail-dialog.tsx b/lib/techsales-rfq/table/project-detail-dialog.tsx new file mode 100644 index 00000000..b8219d7f --- /dev/null +++ b/lib/techsales-rfq/table/project-detail-dialog.tsx @@ -0,0 +1,322 @@ +"use client" + +import * as React from "react" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { Badge } from "@/components/ui/badge" +import { Separator } from "@/components/ui/separator" +import { Button } from "@/components/ui/button" +import { formatDateToQuarter } from "@/lib/utils" + +// 프로젝트 스냅샷 타입 정의 +interface ProjectSnapshot { + scDt?: string + klDt?: string + lcDt?: string + dlDt?: string + dockNo?: string + dockNm?: string + projNo?: string + projNm?: string + ownerNm?: string + kunnrNm?: string + cls1Nm?: string + projMsrm?: number + ptypeNm?: string + sector?: string + estmPm?: string +} + +// 시리즈 스냅샷 타입 정의 +interface SeriesSnapshot { + sersNo?: string + scDt?: string + klDt?: string + lcDt?: string + dlDt?: string + dockNo?: string + dockNm?: string +} + +// 기본적인 RFQ 타입 정의 (rfq-table.tsx와 일치) +interface TechSalesRfq { + id: number + rfqCode: string | null + itemId: number + itemName: string | null + materialCode: string | null + dueDate: Date + rfqSendDate: Date | null + status: "RFQ Created" | "RFQ Vendor Assignned" | "RFQ Sent" | "Quotation Analysis" | "Closed" + picCode: string | null + remark: string | null + cancelReason: string | null + createdAt: Date + updatedAt: Date + createdBy: number | null + createdByName: string + updatedBy: number | null + updatedByName: string + sentBy: number | null + sentByName: string | null + projectSnapshot: ProjectSnapshot | null + seriesSnapshot: SeriesSnapshot[] | null + pspid: string + projNm: string + sector: string + projMsrm: number + ptypeNm: string + attachmentCount: number + quotationCount: number +} + +interface ProjectDetailDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedRfq: TechSalesRfq | null +} + +export function ProjectDetailDialog({ + open, + onOpenChange, + selectedRfq, +}: ProjectDetailDialogProps) { + if (!selectedRfq) { + return null + } + + const projectSnapshot = selectedRfq.projectSnapshot + const seriesSnapshot = selectedRfq.seriesSnapshot + + return ( + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="max-w-4xl w-[80vw] max-h-[80vh] overflow-hidden flex flex-col"> + <DialogHeader className="border-b pb-4"> + <DialogTitle className="flex items-center gap-2"> + 프로젝트 상세정보 + <Badge variant="outline">{selectedRfq.pspid}</Badge> + </DialogTitle> + <DialogDescription className="space-y-1"> + <div className="flex items-center gap-2 text-base font-medium"> + <span>RFQ:</span> + <Badge variant="secondary">{selectedRfq.rfqCode || "미할당"}</Badge> + <span>|</span> + <span>자재:</span> + <span className="text-foreground">{selectedRfq.materialCode || "N/A"}</span> + </div> + <div className="text-sm text-muted-foreground"> + {selectedRfq.projNm} - {selectedRfq.ptypeNm} ({selectedRfq.itemName || "자재명 없음"}) + </div> + </DialogDescription> + </DialogHeader> + <div className="space-y-6 p-1 overflow-y-auto"> + {/* 기본 프로젝트 정보 */} + <div className="space-y-4"> + <h3 className="text-lg font-semibold">기본 정보</h3> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">프로젝트 ID</div> + <div className="text-sm">{selectedRfq.pspid}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">프로젝트명</div> + <div className="text-sm">{selectedRfq.projNm}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">선종</div> + <div className="text-sm">{selectedRfq.ptypeNm}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">척수</div> + <div className="text-sm">{selectedRfq.projMsrm}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">섹터</div> + <div className="text-sm">{selectedRfq.sector}</div> + </div> + </div> + </div> + + <Separator /> + + {/* 프로젝트 스냅샷 정보 */} + {projectSnapshot && ( + <div className="space-y-4"> + <h3 className="text-lg font-semibold">프로젝트 스냅샷</h3> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4"> + {projectSnapshot.scDt && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">S/C</div> + <div className="text-sm">{formatDateToQuarter(projectSnapshot.scDt)}</div> + </div> + )} + {projectSnapshot.klDt && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">K/L</div> + <div className="text-sm">{formatDateToQuarter(projectSnapshot.klDt)}</div> + </div> + )} + {projectSnapshot.lcDt && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">L/C</div> + <div className="text-sm">{formatDateToQuarter(projectSnapshot.lcDt)}</div> + </div> + )} + {projectSnapshot.dlDt && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">D/L</div> + <div className="text-sm">{formatDateToQuarter(projectSnapshot.dlDt)}</div> + </div> + )} + {projectSnapshot.dockNo && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">도크번호</div> + <div className="text-sm">{projectSnapshot.dockNo}</div> + </div> + )} + {projectSnapshot.dockNm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">도크명</div> + <div className="text-sm">{projectSnapshot.dockNm}</div> + </div> + )} + {projectSnapshot.projNo && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">공사번호</div> + <div className="text-sm">{projectSnapshot.projNo}</div> + </div> + )} + {projectSnapshot.projNm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">공사명</div> + <div className="text-sm">{projectSnapshot.projNm}</div> + </div> + )} + {projectSnapshot.ownerNm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">선주</div> + <div className="text-sm">{projectSnapshot.ownerNm}</div> + </div> + )} + {projectSnapshot.kunnrNm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">선주명</div> + <div className="text-sm">{projectSnapshot.kunnrNm}</div> + </div> + )} + {projectSnapshot.cls1Nm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">선급명</div> + <div className="text-sm">{projectSnapshot.cls1Nm}</div> + </div> + )} + {projectSnapshot.projMsrm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">척수</div> + <div className="text-sm">{projectSnapshot.projMsrm}</div> + </div> + )} + {projectSnapshot.ptypeNm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">선종명</div> + <div className="text-sm">{projectSnapshot.ptypeNm}</div> + </div> + )} + {projectSnapshot.sector && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">섹터</div> + <div className="text-sm">{projectSnapshot.sector}</div> + </div> + )} + {projectSnapshot.estmPm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">견적 PM</div> + <div className="text-sm">{projectSnapshot.estmPm}</div> + </div> + )} + </div> + </div> + )} + + {/* 시리즈 스냅샷 정보 */} + {seriesSnapshot && Array.isArray(seriesSnapshot) && seriesSnapshot.length > 0 && ( + <> + <Separator /> + <div className="space-y-4"> + <h3 className="text-lg font-semibold">시리즈 정보 스냅샷</h3> + <div className="space-y-4"> + {seriesSnapshot.map((series: SeriesSnapshot, index: number) => ( + <div key={index} className="border rounded-lg p-4 space-y-3"> + <div className="flex items-center gap-2"> + <Badge variant="secondary">시리즈 {series.sersNo || index + 1}</Badge> + </div> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> + {series.scDt && ( + <div className="space-y-1"> + <div className="text-xs font-medium text-muted-foreground">S/C</div> + <div className="text-sm">{formatDateToQuarter(series.scDt)}</div> + </div> + )} + {series.klDt && ( + <div className="space-y-1"> + <div className="text-xs font-medium text-muted-foreground">K/L</div> + <div className="text-sm">{formatDateToQuarter(series.klDt)}</div> + </div> + )} + {series.lcDt && ( + <div className="space-y-1"> + <div className="text-xs font-medium text-muted-foreground">L/C</div> + <div className="text-sm">{formatDateToQuarter(series.lcDt)}</div> + </div> + )} + {series.dlDt && ( + <div className="space-y-1"> + <div className="text-xs font-medium text-muted-foreground">D/L</div> + <div className="text-sm">{formatDateToQuarter(series.dlDt)}</div> + </div> + )} + {series.dockNo && ( + <div className="space-y-1"> + <div className="text-xs font-medium text-muted-foreground">도크번호</div> + <div className="text-sm">{series.dockNo}</div> + </div> + )} + {series.dockNm && ( + <div className="space-y-1"> + <div className="text-xs font-medium text-muted-foreground">도크명</div> + <div className="text-sm">{series.dockNm}</div> + </div> + )} + </div> + </div> + ))} + </div> + </div> + </> + )} + + {/* 추가 정보가 없는 경우 */} + {!projectSnapshot && !seriesSnapshot && ( + <div className="text-center py-8 text-muted-foreground"> + 추가 프로젝트 상세정보가 없습니다. + </div> + )} + </div> + + {/* 닫기 버튼 */} + <div className="sticky bottom-0 left-0 z-20 bg-background border-t pt-4 mt-4"> + <div className="flex justify-end"> + <Button variant="outline" onClick={() => onOpenChange(false)}> + 닫기 + </Button> + </div> + </div> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/rfq-filter-sheet.tsx b/lib/techsales-rfq/table/rfq-filter-sheet.tsx new file mode 100644 index 00000000..6021699f --- /dev/null +++ b/lib/techsales-rfq/table/rfq-filter-sheet.tsx @@ -0,0 +1,759 @@ +"use client" + +import { useEffect, useTransition, useState, useRef } from "react" +import { useRouter, useParams } from "next/navigation" +import { z } from "zod" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Search, X } from "lucide-react" +import { customAlphabet } from "nanoid" +import { parseAsStringEnum, useQueryState } from "nuqs" + +import { Button } from "@/components/ui/button" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { DateRangePicker } from "@/components/date-range-picker" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { cn } from "@/lib/utils" +import { useTranslation } from '@/i18n/client' +import { getFiltersStateParser } from "@/lib/parsers" + +// nanoid 생성기 +const generateId = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", 6) + +// 필터 스키마 정의 (TechSales RFQ에 맞게 수정) +const filterSchema = z.object({ + rfqCode: z.string().optional(), + materialCode: z.string().optional(), + itemName: z.string().optional(), + pspid: z.string().optional(), + projNm: z.string().optional(), + ptypeNm: z.string().optional(), + createdByName: z.string().optional(), + status: z.string().optional(), + dateRange: z.object({ + from: z.date().optional(), + to: z.date().optional(), + }).optional(), +}) + +// 상태 옵션 정의 (TechSales RFQ 상태에 맞게 수정) +const statusOptions = [ + { value: "RFQ Created", label: "RFQ Created" }, + { value: "RFQ Vendor Assignned", label: "RFQ Vendor Assignned" }, + { value: "RFQ Sent", label: "RFQ Sent" }, + { value: "Quotation Analysis", label: "Quotation Analysis" }, + { value: "Closed", label: "Closed" }, +] + +type FilterFormValues = z.infer<typeof filterSchema> + +interface RFQFilterSheetProps { + isOpen: boolean; + onClose: () => void; + onSearch?: () => void; + isLoading?: boolean; +} + +// Updated component for inline use (not a sheet anymore) +export function RFQFilterSheet({ + isOpen, + onClose, + onSearch, + isLoading = false +}: RFQFilterSheetProps) { + const router = useRouter() + const params = useParams(); + const lng = params ? (params.lng as string) : 'ko'; + const { t } = useTranslation(lng); + + const [isPending, startTransition] = useTransition() + + // 초기화 상태 추가 - 폼 초기화 중에는 상태 변경을 방지 + const [isInitializing, setIsInitializing] = useState(false) + // 마지막으로 적용된 필터를 추적하기 위한 ref + const lastAppliedFilters = useRef<string>("") + + // nuqs로 URL 상태 관리 - 파라미터명을 'basicFilters'로 변경 + const [filters, setFilters] = useQueryState( + "basicFilters", + getFiltersStateParser().withDefault([]) + ) + + // joinOperator 설정 + const [joinOperator, setJoinOperator] = useQueryState( + "basicJoinOperator", + parseAsStringEnum(["and", "or"]).withDefault("and") + ) + + // 현재 URL의 페이지 파라미터도 가져옴 + const [page, setPage] = useQueryState("page", { defaultValue: "1" }) + + // 폼 상태 초기화 + const form = useForm<FilterFormValues>({ + resolver: zodResolver(filterSchema), + defaultValues: { + rfqCode: "", + materialCode: "", + itemName: "", + pspid: "", + projNm: "", + ptypeNm: "", + createdByName: "", + status: "", + dateRange: { + from: undefined, + to: undefined, + }, + }, + }) + + // URL 필터에서 초기 폼 상태 설정 - 개선된 버전 + useEffect(() => { + // 현재 필터를 문자열로 직렬화 + const currentFiltersString = JSON.stringify(filters); + + // 패널이 열렸고, 필터가 있고, 마지막에 적용된 필터와 다를 때만 업데이트 + if (isOpen && filters && filters.length > 0 && currentFiltersString !== lastAppliedFilters.current) { + setIsInitializing(true); + + const formValues = { ...form.getValues() }; + let formUpdated = false; + + filters.forEach(filter => { + if (filter.id === "rfqSendDate" && Array.isArray(filter.value) && filter.value.length > 0) { + formValues.dateRange = { + from: filter.value[0] ? new Date(filter.value[0]) : undefined, + to: filter.value[1] ? new Date(filter.value[1]) : undefined, + }; + formUpdated = true; + } else if (filter.id in formValues) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (formValues as any)[filter.id] = filter.value; + formUpdated = true; + } + }); + + // 폼 값이 변경된 경우에만 reset으로 한 번에 업데이트 + if (formUpdated) { + form.reset(formValues); + lastAppliedFilters.current = currentFiltersString; + } + + setIsInitializing(false); + } + }, [filters, isOpen, form]) // form 의존성 추가 + + // 현재 적용된 필터 카운트 + const getActiveFilterCount = () => { + return filters?.length || 0 + } + + // 조회 버튼 클릭 핸들러 + const handleSearch = () => { + // 필터 패널 닫기 로직이 있다면 여기에 추가 + if (onSearch) { + onSearch(); + } + } + + // 폼 제출 핸들러 - 개선된 버전 + async function onSubmit(data: FilterFormValues) { + // 초기화 중이면 제출 방지 + if (isInitializing) return; + + startTransition(async () => { + try { + // 필터 배열 생성 + const newFilters = [] + + if (data.rfqCode?.trim()) { + newFilters.push({ + id: "rfqCode", + value: data.rfqCode.trim(), + type: "text" as const, + operator: "iLike" as const, + rowId: generateId() + }) + } + + if (data.materialCode?.trim()) { + newFilters.push({ + id: "materialCode", + value: data.materialCode.trim(), + type: "text" as const, + operator: "iLike" as const, + rowId: generateId() + }) + } + + if (data.itemName?.trim()) { + newFilters.push({ + id: "itemName", + value: data.itemName.trim(), + type: "text" as const, + operator: "iLike" as const, + rowId: generateId() + }) + } + + if (data.pspid?.trim()) { + newFilters.push({ + id: "pspid", + value: data.pspid.trim(), + type: "text" as const, + operator: "iLike" as const, + rowId: generateId() + }) + } + + if (data.projNm?.trim()) { + newFilters.push({ + id: "projNm", + value: data.projNm.trim(), + type: "text" as const, + operator: "iLike" as const, + rowId: generateId() + }) + } + + if (data.ptypeNm?.trim()) { + newFilters.push({ + id: "ptypeNm", + value: data.ptypeNm.trim(), + type: "text" as const, + operator: "iLike" as const, + rowId: generateId() + }) + } + + if (data.createdByName?.trim()) { + newFilters.push({ + id: "createdByName", + value: data.createdByName.trim(), + type: "text" as const, + operator: "iLike" as const, + rowId: generateId() + }) + } + + if (data.status?.trim()) { + newFilters.push({ + id: "status", + value: data.status.trim(), + type: "select" as const, + operator: "eq" as const, + rowId: generateId() + }) + } + + // Add date range to params if it exists + if (data.dateRange?.from) { + newFilters.push({ + id: "rfqSendDate", + value: [ + data.dateRange.from.toISOString().split('T')[0], + data.dateRange.to ? data.dateRange.to.toISOString().split('T')[0] : undefined + ].filter(Boolean) as string[], + type: "date" as const, + operator: "isBetween" as const, + rowId: generateId() + }) + } + + console.log("기본 필터 적용:", newFilters); + + // 마지막 적용된 필터 업데이트 + lastAppliedFilters.current = JSON.stringify(newFilters); + + // 먼저 필터를 설정 + await setFilters(newFilters.length > 0 ? newFilters : null); + + // 그 다음 페이지를 1로 설정 + await setPage("1"); + + // 필터 업데이트 후 조회 핸들러 호출 (제공된 경우) + handleSearch(); + + // 페이지 새로고침으로 서버 데이터 다시 가져오기 + setTimeout(() => { + window.location.reload(); + }, 100); + } catch (error) { + console.error("필터 적용 오류:", error); + } + }) + } + + // 필터 초기화 핸들러 - 개선된 버전 + async function handleReset() { + try { + setIsInitializing(true); + + form.reset({ + rfqCode: "", + materialCode: "", + itemName: "", + pspid: "", + projNm: "", + ptypeNm: "", + createdByName: "", + status: "", + dateRange: { from: undefined, to: undefined }, + }); + + // 필터와 조인 연산자를 초기화 + await setFilters(null); + await setJoinOperator("and"); + await setPage("1"); + + // 마지막 적용된 필터 초기화 + lastAppliedFilters.current = ""; + + console.log("필터 초기화 완료"); + setIsInitializing(false); + + // 페이지 새로고침으로 서버 데이터 다시 가져오기 + setTimeout(() => { + window.location.reload(); + }, 100); + } catch (error) { + console.error("필터 초기화 오류:", error); + setIsInitializing(false); + } + } + + // Don't render if not open (for side panel use) + if (!isOpen) { + return null; + } + + return ( + <div className="flex flex-col h-full max-h-full p-4"> + {/* Filter Panel Header - 보더 제거, 배경 색상 적용 */} + <div className="flex items-center justify-between px-6 min-h-[60px] shrink-0"> + <h3 className="text-lg font-semibold whitespace-nowrap">검색 필터</h3> + </div> + + {/* Join Operator Selection - 보더 제거, 배경 색상 적용 */} + <div className="px-6 shrink-0"> + <label className="text-sm font-medium">조건 결합 방식</label> + <Select + value={joinOperator} + onValueChange={(value: "and" | "or") => setJoinOperator(value)} + disabled={isInitializing} + > + <SelectTrigger className="h-8 w-[180px] mt-2 bg-white"> + <SelectValue placeholder="조건 결합 방식" /> + </SelectTrigger> + <SelectContent> + <SelectItem value="and">모든 조건 충족 (AND)</SelectItem> + <SelectItem value="or">하나라도 충족 (OR)</SelectItem> + </SelectContent> + </Select> + </div> + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col h-full min-h-0"> + {/* Scrollable content area - 헤더와 버튼 사이에서 스크롤 */} + <div className="flex-1 min-h-0 overflow-y-auto px-6 pb-4"> + <div className="space-y-6 pt-4"> + {/* RFQ NO. */} + <FormField + control={form.control} + name="rfqCode" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("RFQ NO.")}</FormLabel> + <FormControl> + <div className="relative"> + <Input + placeholder={t("RFQ 번호 입력")} + {...field} + className={cn(field.value && "pr-8", "bg-white")} + disabled={isInitializing} + /> + {field.value && ( + <Button + type="button" + variant="ghost" + size="icon" + className="absolute right-0 top-0 h-full px-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("rfqCode", ""); + }} + disabled={isInitializing} + > + <X className="size-3.5" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 자재코드 */} + <FormField + control={form.control} + name="materialCode" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("자재코드")}</FormLabel> + <FormControl> + <div className="relative"> + <Input + placeholder={t("자재코드 입력")} + {...field} + className={cn(field.value && "pr-8", "bg-white")} + disabled={isInitializing} + /> + {field.value && ( + <Button + type="button" + variant="ghost" + size="icon" + className="absolute right-0 top-0 h-full px-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("materialCode", ""); + }} + disabled={isInitializing} + > + <X className="size-3.5" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 자재명 */} + <FormField + control={form.control} + name="itemName" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("자재명")}</FormLabel> + <FormControl> + <div className="relative"> + <Input + placeholder={t("자재명 입력")} + {...field} + className={cn(field.value && "pr-8", "bg-white")} + disabled={isInitializing} + /> + {field.value && ( + <Button + type="button" + variant="ghost" + size="icon" + className="absolute right-0 top-0 h-full px-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("itemName", ""); + }} + disabled={isInitializing} + > + <X className="size-3.5" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 프로젝트 ID */} + <FormField + control={form.control} + name="pspid" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("프로젝트 ID")}</FormLabel> + <FormControl> + <div className="relative"> + <Input + placeholder={t("프로젝트 ID 입력")} + {...field} + className={cn(field.value && "pr-8", "bg-white")} + disabled={isInitializing} + /> + {field.value && ( + <Button + type="button" + variant="ghost" + size="icon" + className="absolute right-0 top-0 h-full px-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("pspid", ""); + }} + disabled={isInitializing} + > + <X className="size-3.5" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 프로젝트명 */} + <FormField + control={form.control} + name="projNm" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("프로젝트명")}</FormLabel> + <FormControl> + <div className="relative"> + <Input + placeholder={t("프로젝트명 입력")} + {...field} + className={cn(field.value && "pr-8", "bg-white")} + disabled={isInitializing} + /> + {field.value && ( + <Button + type="button" + variant="ghost" + size="icon" + className="absolute right-0 top-0 h-full px-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("projNm", ""); + }} + disabled={isInitializing} + > + <X className="size-3.5" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 선종명 */} + <FormField + control={form.control} + name="ptypeNm" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("선종명")}</FormLabel> + <FormControl> + <div className="relative"> + <Input + placeholder={t("선종명 입력")} + {...field} + className={cn(field.value && "pr-8", "bg-white")} + disabled={isInitializing} + /> + {field.value && ( + <Button + type="button" + variant="ghost" + size="icon" + className="absolute right-0 top-0 h-full px-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("ptypeNm", ""); + }} + disabled={isInitializing} + > + <X className="size-3.5" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 요청자 */} + <FormField + control={form.control} + name="createdByName" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("요청자")}</FormLabel> + <FormControl> + <div className="relative"> + <Input + placeholder={t("요청자 입력")} + {...field} + className={cn(field.value && "pr-8", "bg-white")} + disabled={isInitializing} + /> + {field.value && ( + <Button + type="button" + variant="ghost" + size="icon" + className="absolute right-0 top-0 h-full px-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("createdByName", ""); + }} + disabled={isInitializing} + > + <X className="size-3.5" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* Status */} + <FormField + control={form.control} + name="status" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("Status")}</FormLabel> + <Select + value={field.value} + onValueChange={field.onChange} + disabled={isInitializing} + > + <FormControl> + <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}> + <div className="flex justify-between w-full"> + <SelectValue placeholder={t("Select status")} /> + {field.value && ( + <Button + type="button" + variant="ghost" + size="icon" + className="h-4 w-4 -mr-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("status", ""); + }} + disabled={isInitializing} + > + <X className="size-3" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </SelectTrigger> + </FormControl> + <SelectContent> + {statusOptions.map(option => ( + <SelectItem key={option.value} value={option.value}> + {option.label} + </SelectItem> + ))} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + {/* RFQ 전송일 */} + <FormField + control={form.control} + name="dateRange" + render={({ field }) => ( + <FormItem> + <FormLabel>{t("RFQ 전송일")}</FormLabel> + <FormControl> + <div className="relative"> + <DateRangePicker + triggerSize="default" + triggerClassName="w-full bg-white" + align="start" + showClearButton={true} + placeholder={t("RFQ 전송일 범위를 고르세요")} + date={field.value || undefined} + onDateChange={field.onChange} + disabled={isInitializing} + /> + {(field.value?.from || field.value?.to) && ( + <Button + type="button" + variant="ghost" + size="icon" + className="absolute right-10 top-0 h-full px-2" + onClick={(e) => { + e.stopPropagation(); + form.setValue("dateRange", { from: undefined, to: undefined }); + }} + disabled={isInitializing} + > + <X className="size-3.5" /> + <span className="sr-only">Clear</span> + </Button> + )} + </div> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + </div> + + {/* Fixed buttons at bottom - 보더 제거, 배경 색상 적용 */} + <div className="p-4 shrink-0"> + <div className="flex gap-2 justify-end"> + <Button + type="button" + variant="outline" + onClick={handleReset} + disabled={isPending || getActiveFilterCount() === 0 || isInitializing} + className="px-4" + > + {t("초기화")} + </Button> + <Button + type="submit" + variant="samsung" + disabled={isPending || isLoading || isInitializing} + className="px-4" + > + <Search className="size-4 mr-2" /> + {isPending || isLoading ? t("조회 중...") : t("조회")} + </Button> + </div> + </div> + </form> + </Form> + </div> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/rfq-table-column.tsx b/lib/techsales-rfq/table/rfq-table-column.tsx new file mode 100644 index 00000000..caaa1c97 --- /dev/null +++ b/lib/techsales-rfq/table/rfq-table-column.tsx @@ -0,0 +1,409 @@ +"use client" + +import * as React from "react" +import { ColumnDef } from "@tanstack/react-table" +import { formatDate, formatDateTime } from "@/lib/utils" +import { Checkbox } from "@/components/ui/checkbox" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { DataTableRowAction } from "@/types/table" +import { Check, Pencil, X, Info } from "lucide-react" +import { Button } from "@/components/ui/button" +import { toast } from "sonner" +import { Input } from "@/components/ui/input" + +// 기본적인 RFQ 타입 정의 (rfq-table.tsx 파일과 일치해야 함) +type TechSalesRfq = { + id: number + rfqCode: string | null + itemId: number + itemName: string | null + materialCode: string | null + dueDate: Date + rfqSendDate: Date | null + status: "RFQ Created" | "RFQ Vendor Assignned" | "RFQ Sent" | "Quotation Analysis" | "Closed" + picCode: string | null + remark: string | null + cancelReason: string | null + createdAt: Date + updatedAt: Date + createdBy: number | null + createdByName: string + updatedBy: number | null + updatedByName: string + sentBy: number | null + sentByName: string | null + projectSnapshot: any + seriesSnapshot: any + pspid: string + projNm: string + sector: string + projMsrm: number + ptypeNm: string + attachmentCount: number + quotationCount: number + // 나머지 필드는 사용할 때마다 추가 + [key: string]: any +} + +interface GetColumnsProps { + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TechSalesRfq> | null>>; + // 상태와 상태 설정 함수를 props로 받음 + editingCell: EditingCellState | null; + setEditingCell: (state: EditingCellState | null) => void; + updateRemark: (rfqId: number, remark: string) => Promise<void>; +} + +export interface EditingCellState { + rowId: string | number; + value: string; +} + + +export function getColumns({ + setRowAction, + editingCell, + setEditingCell, + updateRemark, +}: GetColumnsProps): ColumnDef<TechSalesRfq>[] { + return [ + { + id: "select", + // Remove the "Select all" checkbox in header since we're doing single-select + header: () => <span className="sr-only">Select</span>, + cell: ({ row, table }) => ( + <Checkbox + checked={row.getIsSelected()} + onCheckedChange={(value) => { + // If selecting this row + if (value) { + // First deselect all rows (to ensure single selection) + table.toggleAllRowsSelected(false) + // Then select just this row + row.toggleSelected(true) + // Trigger the same action that was in the "Select" button + setRowAction({ row, type: "select" }) + } else { + // Just deselect this row + row.toggleSelected(false) + } + }} + aria-label="Select row" + className="translate-y-0.5" + /> + ), + enableSorting: false, + enableHiding: false, + enableResizing: false, + size: 40, + minSize: 40, + maxSize: 40, + }, + + { + accessorKey: "status", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="진행상태" /> + ), + cell: ({ row }) => <div>{row.getValue("status")}</div>, + meta: { + excelHeader: "진행상태" + }, + enableResizing: true, + minSize: 80, + size: 100, + }, + { + accessorKey: "rfqCode", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="RFQ No." /> + ), + cell: ({ row }) => <div>{row.getValue("rfqCode")}</div>, + meta: { + excelHeader: "RFQ No." + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "materialCode", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="자재코드" /> + ), + cell: ({ row }) => <div>{row.getValue("materialCode")}</div>, + meta: { + excelHeader: "자재코드" + }, + enableResizing: true, + minSize: 80, + size: 120, + }, + { + accessorKey: "itemName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="자재명" /> + ), + cell: ({ row }) => <div>{row.getValue("itemName")}</div>, + meta: { + excelHeader: "자재명" + }, + enableResizing: true, + size: 180, + }, + { + accessorKey: "pspid", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="프로젝트 번호" /> + ), + cell: ({ row }) => <div>{row.getValue("pspid")}</div>, + meta: { + excelHeader: "프로젝트 번호" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "projNm", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="프로젝트명" /> + ), + cell: ({ row }) => <div>{row.getValue("projNm")}</div>, + meta: { + excelHeader: "프로젝트명" + }, + enableResizing: true, + size: 160, + }, + { + accessorKey: "projMsrm", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="척수" /> + ), + cell: ({ row }) => <div>{row.getValue("projMsrm")}</div>, + meta: { + excelHeader: "척수" + }, + enableResizing: true, + minSize: 60, + size: 80, + }, + { + accessorKey: "ptypeNm", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="선종" /> + ), + cell: ({ row }) => <div>{row.getValue("ptypeNm")}</div>, + meta: { + excelHeader: "선종" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "quotationCount", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="견적수" /> + ), + cell: ({ row }) => <div>{row.getValue("quotationCount")}</div>, + meta: { + excelHeader: "견적수" + }, + enableResizing: true, + size: 80, + }, + { + accessorKey: "rfqSendDate", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="RFQ 전송일" /> + ), + cell: ({ cell }) => { + const value = cell.getValue(); + return value ? formatDate(value as Date, "KR") : ""; + }, + meta: { + excelHeader: "RFQ 전송일" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "dueDate", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="RFQ 마감일" /> + ), + cell: ({ cell }) => { + const value = cell.getValue(); + return value ? formatDate(value as Date, "KR") : ""; + }, + meta: { + excelHeader: "RFQ 마감일" + }, + enableResizing: true, + minSize: 80, + size: 120, + }, + { + accessorKey: "createdByName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="요청자" /> + ), + cell: ({ row }) => <div>{row.getValue("createdByName")}</div>, + meta: { + excelHeader: "요청자" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "createdAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="등록일" /> + ), + cell: ({ cell }) => { + const value = cell.getValue(); + return value ? formatDateTime(value as Date) : ""; + }, + meta: { + excelHeader: "등록일" + }, + enableResizing: true, + size: 160, + }, + { + accessorKey: "updatedAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="수정일" /> + ), + cell: ({ cell }) => { + const value = cell.getValue(); + return value ? formatDateTime(value as Date) : ""; + }, + meta: { + excelHeader: "수정일" + }, + enableResizing: true, + size: 160, + }, + // { + // accessorKey: "remark", + // header: ({ column }) => ( + // <DataTableColumnHeaderSimple column={column} title="비고" /> + // ), + // cell: ({ row }) => { + // const id = row.original.id; + // const value = row.getValue("remark") as string; + + // const isEditing = + // editingCell?.rowId === row.id && + // editingCell.value !== undefined; + + // const startEditing = () => { + // setEditingCell({ + // rowId: row.id, + // value: value || "" + // }); + // }; + + // const cancelEditing = () => { + // setEditingCell(null); + // }; + + // const saveChanges = async () => { + // if (!editingCell) return; + + // try { + // await updateRemark(id, editingCell.value); + // setEditingCell(null); + // } catch (error) { + // toast.error("비고 업데이트 중 오류가 발생했습니다."); + // console.error("Error updating remark:", error); + // } + // }; + + // const handleKeyDown = (e: React.KeyboardEvent) => { + // if (e.key === "Enter") { + // saveChanges(); + // } else if (e.key === "Escape") { + // cancelEditing(); + // } + // }; + + // if (isEditing) { + // return ( + // <div className="flex items-center gap-1"> + // <Input + // value={editingCell?.value || ""} + // onChange={(e) => setEditingCell({ + // rowId: row.id, + // value: e.target.value + // })} + // onKeyDown={handleKeyDown} + // autoFocus + // className="h-8 w-full" + // /> + // <Button + // variant="ghost" + // size="icon" + // onClick={saveChanges} + // className="h-8 w-8" + // > + // <Check className="h-4 w-4" /> + // </Button> + // <Button + // variant="ghost" + // size="icon" + // onClick={cancelEditing} + // className="h-8 w-8" + // > + // <X className="h-4 w-4" /> + // </Button> + // </div> + // ); + // } + + // return ( + // <div className="flex items-center gap-1 group"> + // <span className="truncate">{value || ""}</span> + // <Button + // variant="ghost" + // size="icon" + // onClick={startEditing} + // className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity" + // > + // <Pencil className="h-3 w-3" /> + // </Button> + // </div> + // ); + // }, + // meta: { + // excelHeader: "비고" + // }, + // enableResizing: true, + // size: 200, + // }, + { + id: "actions", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="액션" /> + ), + cell: ({ row }) => { + return ( + <Button + variant="ghost" + size="sm" + onClick={() => setRowAction({ row, type: "project-detail" })} + className="h-8 px-2 gap-1" + > + <Info className="h-4 w-4" /> + <span className="hidden sm:inline">프로젝트 상세</span> + </Button> + ); + }, + enableSorting: false, + enableHiding: false, + enableResizing: false, + size: 120, + minSize: 120, + maxSize: 120, + }, + ] +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/rfq-table-toolbar-actions.tsx b/lib/techsales-rfq/table/rfq-table-toolbar-actions.tsx new file mode 100644 index 00000000..da716eeb --- /dev/null +++ b/lib/techsales-rfq/table/rfq-table-toolbar-actions.tsx @@ -0,0 +1,63 @@ +"use client" + +import * as React from "react" +import { Download, RefreshCw } from "lucide-react" +import { toast } from "sonner" + +import { exportTableToExcel } from "@/lib/export" +import { Button } from "@/components/ui/button" +import { type Table } from "@tanstack/react-table" +import { CreateRfqDialog } from "./create-rfq-dialog" + +interface RFQTableToolbarActionsProps<TData> { + selection: Table<TData>; + onRefresh?: () => void; +} + +export function RFQTableToolbarActions<TData>({ + selection, + onRefresh +}: RFQTableToolbarActionsProps<TData>) { + + // 데이터 새로고침 + const handleRefresh = () => { + if (onRefresh) { + onRefresh(); + toast.success("데이터를 새로고침했습니다"); + } + } + + return ( + <div className="flex items-center gap-2"> + {/* RFQ 생성 다이얼로그 */} + <CreateRfqDialog onCreated={onRefresh} /> + + {/* 새로고침 버튼 */} + <Button + variant="outline" + size="sm" + onClick={handleRefresh} + className="gap-2" + > + <RefreshCw className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline">새로고침</span> + </Button> + + {/* 내보내기 버튼 */} + <Button + variant="outline" + size="sm" + onClick={() => + exportTableToExcel(selection, { + filename: "tech_sales_rfq", + excludeColumns: ["select", "actions"], + }) + } + className="gap-2" + > + <Download className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline">내보내기</span> + </Button> + </div> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/table/rfq-table.tsx b/lib/techsales-rfq/table/rfq-table.tsx new file mode 100644 index 00000000..3139b1a3 --- /dev/null +++ b/lib/techsales-rfq/table/rfq-table.tsx @@ -0,0 +1,524 @@ +"use client" + +import * as React from "react" +import { useSearchParams } from "next/navigation" +import { Button } from "@/components/ui/button" +import { PanelLeftClose, PanelLeftOpen } from "lucide-react" +import type { + DataTableAdvancedFilterField, + DataTableRowAction, +} from "@/types/table" +import { + ResizablePanelGroup, + ResizablePanel, + ResizableHandle, +} from "@/components/ui/resizable" + +import { useDataTable } from "@/hooks/use-data-table" +import { DataTable } from "@/components/data-table/data-table" +import { getColumns, EditingCellState } from "./rfq-table-column" +import { useEffect, useCallback, useMemo } from "react" +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" +import { RFQTableToolbarActions } from "./rfq-table-toolbar-actions" +import { getTechSalesRfqsWithJoin } from "@/lib/techsales-rfq/service" +import { toast } from "sonner" +import { useTablePresets } from "@/components/data-table/use-table-presets" +import { TablePresetManager } from "@/components/data-table/data-table-preset" +import { RfqDetailTables } from "./detail-table/rfq-detail-table" +import { cn } from "@/lib/utils" +import { ProjectDetailDialog } from "./project-detail-dialog" +import { RFQFilterSheet } from "./rfq-filter-sheet" + +// 기본적인 RFQ 타입 정의 (repository selectTechSalesRfqsWithJoin 반환 타입에 맞춤) +interface TechSalesRfq { + id: number + rfqCode: string | null + itemId: number + itemName: string | null + materialCode: string | null + dueDate: Date + rfqSendDate: Date | null + status: "RFQ Created" | "RFQ Vendor Assignned" | "RFQ Sent" | "Quotation Analysis" | "Closed" + picCode: string | null + remark: string | null + cancelReason: string | null + createdAt: Date + updatedAt: Date + createdBy: number | null + createdByName: string + updatedBy: number | null + updatedByName: string + sentBy: number | null + sentByName: string | null + projectSnapshot: any + seriesSnapshot: any + pspid: string + projNm: string + sector: string + projMsrm: number + ptypeNm: string + attachmentCount: number + quotationCount: number + // 필요에 따라 다른 필드들 추가 + // eslint-disable-next-line @typescript-eslint/no-explicit-any + [key: string]: any +} + +interface RFQListTableProps { + promises: Promise<[Awaited<ReturnType<typeof getTechSalesRfqsWithJoin>>]> + className?: string; + calculatedHeight?: string; // 계산된 높이 추가 +} + +export function RFQListTable({ + promises, + className, + calculatedHeight +}: RFQListTableProps) { + const searchParams = useSearchParams() + + // 필터 패널 상태 + const [isFilterPanelOpen, setIsFilterPanelOpen] = React.useState(false) + + // 선택된 RFQ 상태 + const [selectedRfq, setSelectedRfq] = React.useState<TechSalesRfq | null>(null) + + // 프로젝트 상세정보 다이얼로그 상태 + const [isProjectDetailOpen, setIsProjectDetailOpen] = React.useState(false) + const [projectDetailRfq, setProjectDetailRfq] = React.useState<TechSalesRfq | null>(null) + + // 패널 collapse 상태 + const [panelHeight, setPanelHeight] = React.useState<number>(55) + + // 고정 높이 설정을 위한 상수 (실제 측정값으로 조정 필요) + const LAYOUT_HEADER_HEIGHT = 64 // Layout Header 높이 + const LAYOUT_FOOTER_HEIGHT = 60 // Layout Footer 높이 (있다면 실제 값) + const LOCAL_HEADER_HEIGHT = 72 // 로컬 헤더 바 높이 (p-4 + border) + const FILTER_PANEL_WIDTH = 400 // 필터 패널 너비 + + // 높이 계산 + // 필터 패널 높이 - Layout Header와 Footer 사이 + const FIXED_FILTER_HEIGHT = `calc(100vh - ${LAYOUT_HEADER_HEIGHT*2}px)` + + console.log(calculatedHeight) + + // 테이블 컨텐츠 높이 - 전달받은 높이에서 로컬 헤더 제외 + const FIXED_TABLE_HEIGHT = calculatedHeight + ? `calc(${calculatedHeight} - ${LOCAL_HEADER_HEIGHT}px)` + : `calc(100vh - ${LAYOUT_HEADER_HEIGHT + LAYOUT_FOOTER_HEIGHT + LOCAL_HEADER_HEIGHT+76}px)` // fallback + + // Suspense 방식으로 데이터 처리 + const [promiseData] = React.use(promises) + const tableData = promiseData + + const [rowAction, setRowAction] = React.useState<DataTableRowAction<TechSalesRfq> | null>(null) + const [editingCell, setEditingCell] = React.useState<EditingCellState | null>(null) + + // 초기 설정 정의 + const initialSettings = React.useMemo(() => ({ + page: parseInt(searchParams?.get('page') || '1'), + perPage: parseInt(searchParams?.get('perPage') || '10'), + sort: searchParams?.get('sort') ? JSON.parse(searchParams.get('sort')!) : [{ id: "updatedAt", desc: true }], + filters: searchParams?.get('filters') ? JSON.parse(searchParams.get('filters')!) : [], + joinOperator: (searchParams?.get('joinOperator') as "and" | "or") || "and", + basicFilters: searchParams?.get('basicFilters') ? JSON.parse(searchParams.get('basicFilters')!) : [], + basicJoinOperator: (searchParams?.get('basicJoinOperator') as "and" | "or") || "and", + search: searchParams?.get('search') || '', + from: searchParams?.get('from') || undefined, + to: searchParams?.get('to') || undefined, + columnVisibility: {}, + columnOrder: [], + pinnedColumns: { left: [], right: [] }, + groupBy: [], + expandedRows: [] + }), [searchParams]) + + // DB 기반 프리셋 훅 사용 + const { + presets, + activePresetId, + hasUnsavedChanges, + isLoading: presetsLoading, + createPreset, + applyPreset, + updatePreset, + deletePreset, + setDefaultPreset, + renamePreset, + getCurrentSettings, + } = useTablePresets<TechSalesRfq>('rfq-list-table', initialSettings) + + // 비고 업데이트 함수 + const updateRemark = useCallback(async (rfqId: number, remark: string) => { + try { + // 기술영업 RFQ 비고 업데이트 함수 구현 필요 + // const result = await updateTechSalesRfqRemark(rfqId, remark); + console.log("Update remark for RFQ:", rfqId, "with:", remark); + + toast.success("비고가 업데이트되었습니다"); + } catch (error) { + console.error("비고 업데이트 오류:", error); + toast.error("업데이트 중 오류가 발생했습니다"); + } + }, []) + + // 조회 버튼 클릭 핸들러 + const handleSearch = () => { + setIsFilterPanelOpen(false) + } + + // 행 액션 처리 + useEffect(() => { + if (rowAction) { + switch (rowAction.type) { + case "select": + // 객체 참조 안정화를 위해 필요한 필드만 추출 + const rfqData = rowAction.row.original; + setSelectedRfq({ + id: rfqData.id, + rfqCode: rfqData.rfqCode, + itemId: rfqData.itemId, + itemName: rfqData.itemName, + materialCode: rfqData.materialCode, + dueDate: rfqData.dueDate, + rfqSendDate: rfqData.rfqSendDate, + status: rfqData.status, + picCode: rfqData.picCode, + remark: rfqData.remark, + cancelReason: rfqData.cancelReason, + createdAt: rfqData.createdAt, + updatedAt: rfqData.updatedAt, + createdBy: rfqData.createdBy, + createdByName: rfqData.createdByName, + updatedBy: rfqData.updatedBy, + updatedByName: rfqData.updatedByName, + sentBy: rfqData.sentBy, + sentByName: rfqData.sentByName, + projectSnapshot: rfqData.projectSnapshot, + seriesSnapshot: rfqData.seriesSnapshot, + pspid: rfqData.pspid, + projNm: rfqData.projNm, + sector: rfqData.sector, + projMsrm: rfqData.projMsrm, + ptypeNm: rfqData.ptypeNm, + attachmentCount: rfqData.attachmentCount, + quotationCount: rfqData.quotationCount, + }); + break; + case "project-detail": + // 프로젝트 상세정보 다이얼로그 열기 + const projectRfqData = rowAction.row.original; + setProjectDetailRfq({ + id: projectRfqData.id, + rfqCode: projectRfqData.rfqCode, + itemId: projectRfqData.itemId, + itemName: projectRfqData.itemName, + materialCode: projectRfqData.materialCode, + dueDate: projectRfqData.dueDate, + rfqSendDate: projectRfqData.rfqSendDate, + status: projectRfqData.status, + picCode: projectRfqData.picCode, + remark: projectRfqData.remark, + cancelReason: projectRfqData.cancelReason, + createdAt: projectRfqData.createdAt, + updatedAt: projectRfqData.updatedAt, + createdBy: projectRfqData.createdBy, + createdByName: projectRfqData.createdByName, + updatedBy: projectRfqData.updatedBy, + updatedByName: projectRfqData.updatedByName, + sentBy: projectRfqData.sentBy, + sentByName: projectRfqData.sentByName, + projectSnapshot: projectRfqData.projectSnapshot, + seriesSnapshot: projectRfqData.seriesSnapshot, + pspid: projectRfqData.pspid, + projNm: projectRfqData.projNm, + sector: projectRfqData.sector, + projMsrm: projectRfqData.projMsrm, + ptypeNm: projectRfqData.ptypeNm, + attachmentCount: projectRfqData.attachmentCount, + quotationCount: projectRfqData.quotationCount, + }); + setIsProjectDetailOpen(true); + break; + case "update": + console.log("Update rfq:", rowAction.row.original) + break; + case "delete": + console.log("Delete rfq:", rowAction.row.original) + break; + } + setRowAction(null) + } + }, [rowAction]) + + const columns = React.useMemo( + () => getColumns({ + setRowAction, + editingCell, + setEditingCell, + updateRemark + }), + [editingCell, setEditingCell, updateRemark] + ) + + // 고급 필터 필드 정의 + const advancedFilterFields: DataTableAdvancedFilterField<TechSalesRfq>[] = [ + { + id: "rfqCode", + label: "RFQ No.", + type: "text", + }, + { + id: "materialCode", + label: "자재코드", + type: "text", + }, + { + id: "itemName", + label: "자재명", + type: "text", + }, + { + id: "pspid", + label: "프로젝트 ID", + type: "text", + }, + { + id: "projNm", + label: "프로젝트명", + type: "text", + }, + { + id: "ptypeNm", + label: "선종명", + type: "text", + }, + { + id: "rfqSendDate", + label: "RFQ 전송일", + type: "date", + }, + { + id: "dueDate", + label: "RFQ 마감일", + type: "date", + }, + { + id: "createdByName", + label: "요청자", + type: "text", + }, + { + id: "status", + label: "상태", + type: "text", + }, + ] + + // 현재 설정 가져오기 + const currentSettings = useMemo(() => { + return getCurrentSettings() + }, [getCurrentSettings]) + + // useDataTable 초기 상태 설정 + const initialState = useMemo(() => { + return { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + sorting: initialSettings.sort.filter((sortItem: any) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const columnExists = columns.some((col: any) => col.accessorKey === sortItem.id) + return columnExists + // eslint-disable-next-line @typescript-eslint/no-explicit-any + }) as any, + columnVisibility: currentSettings.columnVisibility, + columnPinning: currentSettings.pinnedColumns, + } + }, [currentSettings, initialSettings.sort, columns]) + + // useDataTable 훅 설정 + const { table } = useDataTable({ + data: tableData?.data || [], + // eslint-disable-next-line @typescript-eslint/no-explicit-any + columns: columns as any, + pageCount: tableData?.pageCount || 0, + rowCount: tableData?.total || 0, + filterFields: [], + enablePinning: true, + enableAdvancedFilter: true, + initialState, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + columnResizeMode: "onEnd", + }) + + // Get active basic filter count + const getActiveBasicFilterCount = () => { + try { + const basicFilters = searchParams?.get('basicFilters') + return basicFilters ? JSON.parse(basicFilters).length : 0 + } catch { + return 0 + } + } + + console.log(panelHeight) + + return ( + <div + className={cn("flex flex-col relative", className)} + style={{ height: calculatedHeight }} + > + {/* Filter Panel - 계산된 높이 적용 */} + <div + className={cn( + "fixed left-0 bg-background border-r z-30 flex flex-col transition-all duration-300 ease-in-out overflow-hidden", + isFilterPanelOpen ? "border-r shadow-lg" : "border-r-0" + )} + style={{ + width: isFilterPanelOpen ? `${FILTER_PANEL_WIDTH}px` : '0px', + top: `${LAYOUT_HEADER_HEIGHT*2}px`, + height: FIXED_FILTER_HEIGHT + }} + > + {/* Filter Content */} + <div className="h-full"> + <RFQFilterSheet + isOpen={isFilterPanelOpen} + onClose={() => setIsFilterPanelOpen(false)} + onSearch={handleSearch} + isLoading={false} + /> + </div> + </div> + + {/* Main Content */} + <div + className="flex flex-col transition-all duration-300 ease-in-out" + style={{ + width: isFilterPanelOpen ? `calc(100% - ${FILTER_PANEL_WIDTH}px)` : '100%', + marginLeft: isFilterPanelOpen ? `${FILTER_PANEL_WIDTH}px` : '0px', + height: '100%' + }} + > + {/* Header Bar - 고정 높이 */} + <div + className="flex items-center justify-between p-4 bg-background border-b" + style={{ + height: `${LOCAL_HEADER_HEIGHT}px`, + flexShrink: 0 + }} + > + <div className="flex items-center gap-3"> + <Button + variant="outline" + size="sm" + type='button' + onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)} + className="flex items-center shadow-sm" + > + {isFilterPanelOpen ? <PanelLeftClose className="size-4"/> : <PanelLeftOpen className="size-4"/>} + {getActiveBasicFilterCount() > 0 && ( + <span className="ml-2 bg-primary text-primary-foreground rounded-full px-2 py-0.5 text-xs"> + {getActiveBasicFilterCount()} + </span> + )} + </Button> + </div> + + {/* Right side info */} + <div className="text-sm text-muted-foreground"> + {tableData && ( + <span>총 {tableData.total || 0}건</span> + )} + </div> + </div> + + {/* Table Content Area - 계산된 높이 사용 */} + <div + className="relative bg-background" + style={{ + height: FIXED_TABLE_HEIGHT, + display: 'grid', + gridTemplateRows: '1fr', + gridTemplateColumns: '1fr' + }} + > + <ResizablePanelGroup + direction="vertical" + className="w-full h-full" + > + <ResizablePanel + defaultSize={60} + minSize={25} + maxSize={75} + collapsible={false} + onResize={(size) => { + setPanelHeight(size) + }} + className="flex flex-col overflow-hidden" + > + {/* 상단 테이블 영역 */} + <div className="flex-1 min-h-0 overflow-hidden"> + <DataTable + table={table} + maxHeight={`${panelHeight*0.5}vh`} + > + <DataTableAdvancedToolbar + // eslint-disable-next-line @typescript-eslint/no-explicit-any + table={table as any} + filterFields={advancedFilterFields} + shallow={false} + > + <div className="flex items-center gap-2"> + <TablePresetManager<TechSalesRfq> + presets={presets} + activePresetId={activePresetId} + currentSettings={currentSettings} + hasUnsavedChanges={hasUnsavedChanges} + isLoading={presetsLoading} + onCreatePreset={createPreset} + onUpdatePreset={updatePreset} + onDeletePreset={deletePreset} + onApplyPreset={applyPreset} + onSetDefaultPreset={setDefaultPreset} + onRenamePreset={renamePreset} + /> + + <RFQTableToolbarActions + selection={table} + onRefresh={() => {}} + /> + </div> + </DataTableAdvancedToolbar> + </DataTable> + </div> + </ResizablePanel> + + <ResizableHandle withHandle /> + + <ResizablePanel + minSize={25} + defaultSize={40} + collapsible={false} + className="flex flex-col overflow-hidden" + > + {/* 하단 상세 테이블 영역 */} + <div className="flex-1 min-h-0 overflow-hidden bg-background"> + <RfqDetailTables selectedRfq={selectedRfq} maxHeight={`${(100-panelHeight)*0.4}vh`}/> + </div> + </ResizablePanel> + </ResizablePanelGroup> + </div> + </div> + + {/* 프로젝트 상세정보 다이얼로그 */} + <ProjectDetailDialog + open={isProjectDetailOpen} + onOpenChange={setIsProjectDetailOpen} + // eslint-disable-next-line @typescript-eslint/no-explicit-any + selectedRfq={projectDetailRfq as any} + /> + </div> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/validations.ts b/lib/techsales-rfq/validations.ts new file mode 100644 index 00000000..9d960525 --- /dev/null +++ b/lib/techsales-rfq/validations.ts @@ -0,0 +1,119 @@ +import { + createSearchParamsCache, + parseAsArrayOf, + parseAsInteger, + parseAsString, + parseAsStringEnum, +} from "nuqs/server"; +import * as z from "zod"; + +import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"; +import { techSalesRfqs, techSalesVendorQuotations } from "@/db/schema"; + + +// ======================= +// 1) SearchParams (목록 필터링/정렬) +// ======================= +export const searchParamsCache = createSearchParamsCache({ + flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]), + page: parseAsInteger.withDefault(1), + perPage: parseAsInteger.withDefault(10), + sort: getSortingStateParser<typeof techSalesRfqs>().withDefault([ + { id: "updatedAt", desc: true }, + ]), + + // 고급 필터 + filters: getFiltersStateParser().withDefault([]), + joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), + + // 기본 필터 (RFQFilterBox) - 새로운 필드 추가 + basicFilters: getFiltersStateParser().withDefault([]), + basicJoinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), + + search: parseAsString.withDefault(""), + from: parseAsString.withDefault(""), + to: parseAsString.withDefault(""), +}); + +export type GetTechSalesRfqsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>; + + +export const searchParamsVendorQuotationsCache = createSearchParamsCache({ + flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]), + page: parseAsInteger.withDefault(1), + perPage: parseAsInteger.withDefault(10), + sort: getSortingStateParser<typeof techSalesVendorQuotations>().withDefault([ + { id: "updatedAt", desc: true }, + ]), + + // 고급 필터 + filters: getFiltersStateParser().withDefault([]), + joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), + + // 기본 필터 (RFQFilterBox) - 새로운 필드 추가 + basicFilters: getFiltersStateParser().withDefault([]), + basicJoinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), + + search: parseAsString.withDefault(""), + from: parseAsString.withDefault(""), + to: parseAsString.withDefault(""), + +}); + +export type GetTechSalesVendorQuotationsSchema = Awaited<ReturnType<typeof searchParamsVendorQuotationsCache.parse>>; + +export const searchParamsDashboardCache = createSearchParamsCache({ + flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]), + page: parseAsInteger.withDefault(1), + perPage: parseAsInteger.withDefault(10), + sort: getSortingStateParser<typeof techSalesRfqs>().withDefault([ + { id: "updatedAt", desc: true }, + ]), + + // 고급 필터 + filters: getFiltersStateParser().withDefault([]), + joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), + + search: parseAsString.withDefault(""), +}); + +export type GetTechSalesDashboardSchema = Awaited<ReturnType<typeof searchParamsDashboardCache.parse>>; + +// RFQ 생성 스키마 +export const createTechSalesRfqSchema = z.object({ + itemId: z.number(), + biddingProjectId: z.number().optional(), + materialCode: z.string().optional(), + dueDate: z.date(), + status: z.string().default("RFQ Created"), + rfqSealedYn: z.boolean().default(false), + picCode: z.string().optional(), + remark: z.string().optional().nullable(), +}); + +export type CreateTechSalesRfqSchema = z.infer<typeof createTechSalesRfqSchema>; + +// 결합도 우려가 있지만 +// 벤더가 기술영업(조선) RFQ 조회할 때 쓸 밸리데이션 +export const searchParamsVendorRfqCache = createSearchParamsCache({ + flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]), + page: parseAsInteger.withDefault(1), + perPage: parseAsInteger.withDefault(10), + sort: getSortingStateParser<typeof techSalesVendorQuotations>().withDefault([ + { id: "updatedAt", desc: true }, + ]), + + // 고급 필터 + filters: getFiltersStateParser().withDefault([]), + joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), + + // 기본 필터 (RFQFilterBox) - 새로운 필드 추가 + basicFilters: getFiltersStateParser().withDefault([]), + basicJoinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), + + search: parseAsString.withDefault(""), + from: parseAsString.withDefault(""), + to: parseAsString.withDefault(""), +}); + +export type GetQuotationsSchema = Awaited<ReturnType<typeof searchParamsVendorRfqCache.parse>>;
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/buyer-communication-drawer.tsx b/lib/techsales-rfq/vendor-response/buyer-communication-drawer.tsx new file mode 100644 index 00000000..69ba0363 --- /dev/null +++ b/lib/techsales-rfq/vendor-response/buyer-communication-drawer.tsx @@ -0,0 +1,522 @@ +"use client" + +import * as React from "react" +import { useState, useEffect, useRef } from "react" +import { toast } from "sonner" +import { + Send, + Paperclip, + DownloadCloud, + File, + FileText, + Image as ImageIcon, + AlertCircle, + X, + User, + Building +} from "lucide-react" +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, +} from "@/components/ui/drawer" +import { Button } from "@/components/ui/button" +import { Textarea } from "@/components/ui/textarea" +import { Avatar, AvatarFallback } from "@/components/ui/avatar" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { formatDateTime, formatFileSize } from "@/lib/utils" +import { useSession } from "next-auth/react" +import { fetchBuyerVendorComments } from "../services" + +// 타입 정의 +interface Comment { + id: number; + rfqId: number; + vendorId: number | null // null 허용으로 변경 + userId?: number | null // null 허용으로 변경 + content: string; + isVendorComment: boolean | null; // null 허용으로 변경 + createdAt: Date; + updatedAt: Date; + userName?: string | null // null 허용으로 변경 + vendorName?: string | null // null 허용으로 변경 + attachments: Attachment[]; + isRead: boolean | null // null 허용으로 변경 +} + +interface Attachment { + id: number; + fileName: string; + fileSize: number; + fileType: string | null; // null 허용으로 변경 + filePath: string; + uploadedAt: Date; +} + +// 프롭스 정의 +interface BuyerCommunicationDrawerProps { + open: boolean; + onOpenChange: (open: boolean) => void; + quotation: { + id: number; + rfqId: number; + vendorId: number; + quotationCode: string; + rfq?: { + rfqCode: string; + }; + } | null; + onSuccess?: () => void; +} + + + +// 벤더 코멘트 전송 함수 +export function sendVendorCommentClient(params: { + rfqId: number; + vendorId: number; + content: string; + attachments?: File[]; +}): Promise<Comment> { + // 폼 데이터 생성 (파일 첨부를 위해) + const formData = new FormData(); + formData.append('rfqId', params.rfqId.toString()); + formData.append('vendorId', params.vendorId.toString()); + formData.append('content', params.content); + formData.append('isVendorComment', 'true'); // 벤더가 보내는 메시지이므로 true + + // 첨부파일 추가 + if (params.attachments && params.attachments.length > 0) { + params.attachments.forEach((file) => { + formData.append(`attachments`, file); + }); + } + + // API 엔드포인트 구성 (벤더 API 경로) + const url = `/api/procurement-rfqs/${params.rfqId}/vendors/${params.vendorId}/comments`; + + // API 호출 + return fetch(url, { + method: 'POST', + body: formData, // multipart/form-data 형식 사용 + }) + .then(response => { + if (!response.ok) { + return response.text().then(text => { + throw new Error(`API 요청 실패: ${response.status} ${text}`); + }); + } + return response.json(); + }) + .then(result => { + if (!result.success || !result.data) { + throw new Error(result.message || '코멘트 전송 중 오류가 발생했습니다'); + } + return result.data.comment; + }); +} + + +export function BuyerCommunicationDrawer({ + open, + onOpenChange, + quotation, + onSuccess +}: BuyerCommunicationDrawerProps) { + // 세션 정보 + const { data: session } = useSession(); + + // 상태 관리 + const [comments, setComments] = useState<Comment[]>([]); + const [newComment, setNewComment] = useState(""); + const [attachments, setAttachments] = useState<File[]>([]); + const [isLoading, setIsLoading] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); + const fileInputRef = useRef<HTMLInputElement>(null); + const messagesEndRef = useRef<HTMLDivElement>(null); + + // 첨부파일 관련 상태 + const [previewDialogOpen, setPreviewDialogOpen] = useState(false); + const [selectedAttachment, setSelectedAttachment] = useState<Attachment | null>(null); + + // 드로어가 열릴 때 데이터 로드 + useEffect(() => { + if (open && quotation) { + loadComments(); + } + }, [open, quotation]); + + // 스크롤 최하단으로 이동 + useEffect(() => { + if (messagesEndRef.current) { + messagesEndRef.current.scrollIntoView({ behavior: "smooth" }); + } + }, [comments]); + + // 코멘트 로드 함수 + const loadComments = async () => { + if (!quotation) return; + + try { + setIsLoading(true); + + // API를 사용하여 코멘트 데이터 가져오기 + const commentsData = await fetchBuyerVendorComments(quotation.rfqId, quotation.vendorId); + setComments(commentsData); + + // 읽음 상태 처리는 API 측에서 처리되는 것으로 가정 + } catch (error) { + console.error("코멘트 로드 오류:", error); + toast.error("메시지를 불러오는 중 오류가 발생했습니다"); + } finally { + setIsLoading(false); + } + }; + + // 파일 선택 핸들러 + const handleFileSelect = () => { + fileInputRef.current?.click(); + }; + + // 파일 변경 핸들러 + const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { + if (e.target.files && e.target.files.length > 0) { + const newFiles = Array.from(e.target.files); + setAttachments(prev => [...prev, ...newFiles]); + } + }; + + // 파일 제거 핸들러 + const handleRemoveFile = (index: number) => { + setAttachments(prev => prev.filter((_, i) => i !== index)); + }; + + // 코멘트 전송 핸들러 + const handleSubmitComment = async () => { + if (!newComment.trim() && attachments.length === 0) return; + if (!quotation) return; + + try { + setIsSubmitting(true); + + // API를 사용하여 새 코멘트 전송 (파일 업로드 때문에 FormData 사용) + const newCommentObj = await sendVendorCommentClient({ + rfqId: quotation.rfqId, + vendorId: quotation.vendorId, + content: newComment, + attachments: attachments + }); + + // 상태 업데이트 + setComments(prev => [...prev, newCommentObj]); + setNewComment(""); + setAttachments([]); + + toast.success("메시지가 전송되었습니다"); + + // 데이터 새로고침 + if (onSuccess) { + onSuccess(); + } + } catch (error) { + console.error("코멘트 전송 오류:", error); + toast.error("메시지 전송 중 오류가 발생했습니다"); + } finally { + setIsSubmitting(false); + } + }; + + // 첨부파일 미리보기 + const handleAttachmentPreview = (attachment: Attachment) => { + setSelectedAttachment(attachment); + setPreviewDialogOpen(true); + }; + + // 첨부파일 다운로드 + const handleAttachmentDownload = (attachment: Attachment) => { + // 실제 다운로드 구현 + window.open(attachment.filePath, '_blank'); + }; + + // 파일 아이콘 선택 + const getFileIcon = (fileType: string) => { + if (fileType.startsWith("image/")) return <ImageIcon className="h-5 w-5 text-blue-500" />; + if (fileType.includes("pdf")) return <FileText className="h-5 w-5 text-red-500" />; + if (fileType.includes("spreadsheet") || fileType.includes("excel")) + return <FileText className="h-5 w-5 text-green-500" />; + if (fileType.includes("document") || fileType.includes("word")) + return <FileText className="h-5 w-5 text-blue-500" />; + return <File className="h-5 w-5 text-gray-500" />; + }; + + // 첨부파일 미리보기 다이얼로그 + const renderAttachmentPreviewDialog = () => { + if (!selectedAttachment) return null; + + const isImage = selectedAttachment.fileType.startsWith("image/"); + const isPdf = selectedAttachment.fileType.includes("pdf"); + + return ( + <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}> + <DialogContent className="max-w-3xl"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + {getFileIcon(selectedAttachment.fileType)} + {selectedAttachment.fileName} + </DialogTitle> + <DialogDescription> + {formatFileSize(selectedAttachment.fileSize)} • {formatDateTime(selectedAttachment.uploadedAt)} + </DialogDescription> + </DialogHeader> + + <div className="min-h-[300px] flex items-center justify-center p-4"> + {isImage ? ( + <img + src={selectedAttachment.filePath} + alt={selectedAttachment.fileName} + className="max-h-[500px] max-w-full object-contain" + /> + ) : isPdf ? ( + <iframe + src={`${selectedAttachment.filePath}#toolbar=0`} + className="w-full h-[500px]" + title={selectedAttachment.fileName} + /> + ) : ( + <div className="flex flex-col items-center gap-4 p-8"> + {getFileIcon(selectedAttachment.fileType)} + <p className="text-muted-foreground text-sm">미리보기를 지원하지 않는 파일 형식입니다.</p> + <Button + variant="outline" + onClick={() => handleAttachmentDownload(selectedAttachment)} + > + <DownloadCloud className="h-4 w-4 mr-2" /> + 다운로드 + </Button> + </div> + )} + </div> + </DialogContent> + </Dialog> + ); + }; + + if (!quotation) { + return null; + } + + // 구매자 정보 (실제로는 API에서 가져와야 함) + const buyerName = "구매 담당자"; + + return ( + <Drawer open={open} onOpenChange={onOpenChange}> + <DrawerContent className="max-h-[85vh]"> + <DrawerHeader className="border-b"> + <DrawerTitle className="flex items-center gap-2"> + <Avatar className="h-8 w-8"> + <AvatarFallback className="bg-primary/10"> + <User className="h-4 w-4" /> + </AvatarFallback> + </Avatar> + <div> + <span>{buyerName}</span> + <Badge variant="outline" className="ml-2">구매자</Badge> + </div> + </DrawerTitle> + <DrawerDescription> + RFQ: {quotation.rfq?.rfqCode || "N/A"} • 견적서: {quotation.quotationCode} + </DrawerDescription> + </DrawerHeader> + + <div className="p-0 flex flex-col h-[60vh]"> + {/* 메시지 목록 */} + <ScrollArea className="flex-1 p-4"> + {isLoading ? ( + <div className="flex h-full items-center justify-center"> + <p className="text-muted-foreground">메시지 로딩 중...</p> + </div> + ) : comments.length === 0 ? ( + <div className="flex h-full items-center justify-center"> + <div className="flex flex-col items-center gap-2"> + <AlertCircle className="h-6 w-6 text-muted-foreground" /> + <p className="text-muted-foreground">아직 메시지가 없습니다</p> + </div> + </div> + ) : ( + <div className="space-y-4"> + {comments.map(comment => ( + <div + key={comment.id} + className={`flex gap-3 ${comment.isVendorComment ? 'justify-end' : 'justify-start'}`} + > + {!comment.isVendorComment && ( + <Avatar className="h-8 w-8 mt-1"> + <AvatarFallback className="bg-primary/10"> + <User className="h-4 w-4" /> + </AvatarFallback> + </Avatar> + )} + + <div className={`rounded-lg p-3 max-w-[80%] ${comment.isVendorComment + ? 'bg-primary text-primary-foreground' + : 'bg-muted' + }`}> + <div className="text-sm font-medium mb-1"> + {comment.isVendorComment ? ( + session?.user?.name || "벤더" + ) : ( + comment.userName || buyerName + )} + </div> + + {comment.content && ( + <div className="text-sm whitespace-pre-wrap break-words"> + {comment.content} + </div> + )} + + {/* 첨부파일 표시 */} + {comment.attachments.length > 0 && ( + <div className={`mt-2 pt-2 ${comment.isVendorComment + ? 'border-t border-t-primary-foreground/20' + : 'border-t border-t-border/30' + }`}> + {comment.attachments.map(attachment => ( + <div + key={attachment.id} + className="flex items-center text-xs gap-2 mb-1 p-1 rounded hover:bg-black/5 cursor-pointer" + onClick={() => handleAttachmentPreview(attachment)} + > + {getFileIcon(attachment.fileType)} + <span className="flex-1 truncate">{attachment.fileName}</span> + <span className="text-xs opacity-70"> + {formatFileSize(attachment.fileSize)} + </span> + <Button + variant="ghost" + size="icon" + className="h-6 w-6 rounded-full" + onClick={(e) => { + e.stopPropagation(); + handleAttachmentDownload(attachment); + }} + > + <DownloadCloud className="h-3 w-3" /> + </Button> + </div> + ))} + </div> + )} + + <div className="text-xs mt-1 opacity-70 flex items-center gap-1 justify-end"> + {formatDateTime(comment.createdAt)} + </div> + </div> + + {comment.isVendorComment && ( + <Avatar className="h-8 w-8 mt-1"> + <AvatarFallback className="bg-primary/20"> + <Building className="h-4 w-4" /> + </AvatarFallback> + </Avatar> + )} + </div> + ))} + <div ref={messagesEndRef} /> + </div> + )} + </ScrollArea> + + {/* 선택된 첨부파일 표시 */} + {attachments.length > 0 && ( + <div className="p-2 bg-muted mx-4 rounded-md mb-2"> + <div className="text-xs font-medium mb-1">첨부파일</div> + <div className="flex flex-wrap gap-2"> + {attachments.map((file, index) => ( + <div key={index} className="flex items-center bg-background rounded-md p-1 pr-2 text-xs"> + {file.type.startsWith("image/") ? ( + <ImageIcon className="h-4 w-4 mr-1 text-blue-500" /> + ) : ( + <File className="h-4 w-4 mr-1 text-gray-500" /> + )} + <span className="truncate max-w-[100px]">{file.name}</span> + <Button + variant="ghost" + size="icon" + className="h-4 w-4 ml-1 p-0" + onClick={() => handleRemoveFile(index)} + > + <X className="h-3 w-3" /> + </Button> + </div> + ))} + </div> + </div> + )} + + {/* 메시지 입력 영역 */} + <div className="p-4 border-t"> + <div className="flex gap-2 items-end"> + <div className="flex-1"> + <Textarea + placeholder="메시지를 입력하세요..." + className="min-h-[80px] resize-none" + value={newComment} + onChange={(e) => setNewComment(e.target.value)} + /> + </div> + <div className="flex flex-col gap-2"> + <input + type="file" + ref={fileInputRef} + className="hidden" + multiple + onChange={handleFileChange} + /> + <Button + variant="outline" + size="icon" + onClick={handleFileSelect} + title="파일 첨부" + > + <Paperclip className="h-4 w-4" /> + </Button> + <Button + onClick={handleSubmitComment} + disabled={(!newComment.trim() && attachments.length === 0) || isSubmitting} + > + <Send className="h-4 w-4" /> + </Button> + </div> + </div> + </div> + </div> + + <DrawerFooter className="border-t"> + <div className="flex justify-between"> + <Button variant="outline" onClick={() => loadComments()}> + 새로고침 + </Button> + <DrawerClose asChild> + <Button variant="outline">닫기</Button> + </DrawerClose> + </div> + </DrawerFooter> + </DrawerContent> + + {renderAttachmentPreviewDialog()} + </Drawer> + ); +}
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/detail/communication-tab.tsx b/lib/techsales-rfq/vendor-response/detail/communication-tab.tsx new file mode 100644 index 00000000..0332232c --- /dev/null +++ b/lib/techsales-rfq/vendor-response/detail/communication-tab.tsx @@ -0,0 +1,215 @@ +"use client" + +import * as React from "react" +import { useState } from "react" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { Textarea } from "@/components/ui/textarea" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" +import { Separator } from "@/components/ui/separator" +import { Avatar, AvatarFallback } from "@/components/ui/avatar" +import { Send, MessageCircle } from "lucide-react" +import { formatDateTime } from "@/lib/utils" +import { toast } from "sonner" + +interface CommunicationTabProps { + quotation: { + id: number + rfq: { + id: number + rfqCode: string | null + createdByUser?: { + id: number + name: string | null + email: string | null + } | null + } | null + vendor: { + vendorName: string + } | null + } +} + +// 임시 코멘트 데이터 (실제로는 API에서 가져와야 함) +const MOCK_COMMENTS = [ + { + id: 1, + content: "안녕하세요. 해당 자재에 대한 견적 요청 드립니다. 납기일은 언제까지 가능한지 문의드립니다.", + createdAt: new Date("2024-01-15T09:00:00"), + author: { + name: "김구매", + email: "buyer@company.com", + role: "구매담당자" + } + }, + { + id: 2, + content: "안녕하세요. 견적 요청 확인했습니다. 해당 자재의 경우 약 2주 정도의 제작 기간이 필요합니다. 상세한 견적은 내일까지 제출하겠습니다.", + createdAt: new Date("2024-01-15T14:30:00"), + author: { + name: "이벤더", + email: "vendor@supplier.com", + role: "벤더" + } + }, + { + id: 3, + content: "감사합니다. 추가로 품질 인증서도 함께 제출 가능한지 확인 부탁드립니다.", + createdAt: new Date("2024-01-16T10:15:00"), + author: { + name: "김구매", + email: "buyer@company.com", + role: "구매담당자" + } + } +] + +export function CommunicationTab({ quotation }: CommunicationTabProps) { + const [newComment, setNewComment] = useState("") + const [isLoading, setIsLoading] = useState(false) + const [comments, setComments] = useState(MOCK_COMMENTS) + + const handleSendComment = async () => { + if (!newComment.trim()) { + toast.error("메시지를 입력해주세요.") + return + } + + setIsLoading(true) + try { + // TODO: API 호출로 코멘트 전송 + const newCommentData = { + id: comments.length + 1, + content: newComment, + createdAt: new Date(), + author: { + name: "현재사용자", // 실제로는 세션에서 가져와야 함 + email: "current@user.com", + role: "벤더" + } + } + + setComments([...comments, newCommentData]) + setNewComment("") + toast.success("메시지가 전송되었습니다.") + } catch { + toast.error("메시지 전송 중 오류가 발생했습니다.") + } finally { + setIsLoading(false) + } + } + + const getAuthorInitials = (name: string) => { + return name + .split(" ") + .map(word => word[0]) + .join("") + .toUpperCase() + .slice(0, 2) + } + + const getRoleBadgeVariant = (role: string) => { + return role === "구매담당자" ? "default" : "secondary" + } + + return ( + <div className="h-full flex flex-col"> + {/* 헤더 */} + <Card className="mb-4"> + <CardHeader> + <CardTitle className="flex items-center gap-2"> + <MessageCircle className="h-5 w-5" /> + 커뮤니케이션 + </CardTitle> + <CardDescription> + RFQ {quotation.rfq?.rfqCode || "미할당"}에 대한 구매담당자와의 커뮤니케이션 + </CardDescription> + </CardHeader> + <CardContent> + <div className="flex items-center gap-4 text-sm text-muted-foreground"> + <span>구매담당자: {quotation.rfq?.createdByUser?.name || "N/A"}</span> + <span>•</span> + <span>벤더: {quotation.vendor?.vendorName}</span> + </div> + </CardContent> + </Card> + + {/* 메시지 목록 */} + <Card className="flex-1 flex flex-col min-h-0"> + <CardHeader> + <CardTitle className="text-lg">메시지 ({comments.length})</CardTitle> + </CardHeader> + <CardContent className="flex-1 flex flex-col min-h-0"> + <ScrollArea className="flex-1 pr-4"> + <div className="space-y-4"> + {comments.length === 0 ? ( + <div className="text-center py-8 text-muted-foreground"> + <MessageCircle className="h-12 w-12 mx-auto mb-4 opacity-50" /> + <p>아직 메시지가 없습니다.</p> + <p className="text-sm">첫 번째 메시지를 보내보세요.</p> + </div> + ) : ( + comments.map((comment) => ( + <div key={comment.id} className="flex gap-3"> + <Avatar className="h-8 w-8 mt-1"> + <AvatarFallback className="text-xs"> + {getAuthorInitials(comment.author.name)} + </AvatarFallback> + </Avatar> + <div className="flex-1 space-y-2"> + <div className="flex items-center gap-2"> + <span className="font-medium text-sm">{comment.author.name}</span> + <Badge variant={getRoleBadgeVariant(comment.author.role)} className="text-xs"> + {comment.author.role} + </Badge> + <span className="text-xs text-muted-foreground"> + {formatDateTime(comment.createdAt)} + </span> + </div> + <div className="bg-muted p-3 rounded-lg text-sm"> + {comment.content} + </div> + </div> + </div> + )) + )} + </div> + </ScrollArea> + + <Separator className="my-4" /> + + {/* 새 메시지 입력 */} + <div className="space-y-3"> + <Textarea + placeholder="메시지를 입력하세요..." + value={newComment} + onChange={(e) => setNewComment(e.target.value)} + rows={3} + className="resize-none" + onKeyDown={(e) => { + if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { + e.preventDefault() + handleSendComment() + } + }} + /> + <div className="flex justify-between items-center"> + <div className="text-xs text-muted-foreground"> + Ctrl + Enter로 빠른 전송 + </div> + <Button + onClick={handleSendComment} + disabled={isLoading || !newComment.trim()} + size="sm" + > + <Send className="h-4 w-4 mr-2" /> + 전송 + </Button> + </div> + </div> + </CardContent> + </Card> + </div> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/detail/project-info-tab.tsx b/lib/techsales-rfq/vendor-response/detail/project-info-tab.tsx new file mode 100644 index 00000000..7ba3320d --- /dev/null +++ b/lib/techsales-rfq/vendor-response/detail/project-info-tab.tsx @@ -0,0 +1,269 @@ +"use client" + +import * as React from "react" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" +import { formatDateToQuarter, formatDate } from "@/lib/utils" + +interface ProjectSnapshot { + pspid?: string + projNm?: string + projMsrm?: number + kunnr?: string + kunnrNm?: string + cls1?: string + cls1Nm?: string + ptype?: string + ptypeNm?: string + estmPm?: string + scDt?: string + klDt?: string + lcDt?: string + dlDt?: string + dockNo?: string + dockNm?: string + projNo?: string + ownerNm?: string + pspUpdatedAt?: string | Date +} + +interface SeriesSnapshot { + sersNo?: string + klDt?: string +} + +interface ProjectInfoTabProps { + quotation: { + id: number + rfq: { + id: number + rfqCode: string | null + materialCode: string | null + dueDate: Date | null + status: string | null + remark: string | null + projectSnapshot?: ProjectSnapshot | null + seriesSnapshot?: SeriesSnapshot[] | null + item?: { + id: number + itemCode: string | null + itemName: string | null + } | null + biddingProject?: { + id: number + pspid: string | null + projNm: string | null + } | null + createdByUser?: { + id: number + name: string | null + email: string | null + } | null + } | null + vendor: { + id: number + vendorName: string + vendorCode: string | null + } | null + } +} + +export function ProjectInfoTab({ quotation }: ProjectInfoTabProps) { + const rfq = quotation.rfq + const projectSnapshot = rfq?.projectSnapshot + const seriesSnapshot = rfq?.seriesSnapshot + + if (!rfq) { + return ( + <div className="flex items-center justify-center h-full"> + <div className="text-center"> + <h3 className="text-lg font-medium">RFQ 정보를 찾을 수 없습니다</h3> + <p className="text-sm text-muted-foreground mt-1"> + 연결된 RFQ 정보가 없습니다. + </p> + </div> + </div> + ) + } + + return ( + <ScrollArea className="h-full"> + <div className="space-y-6 p-1"> + {/* RFQ 기본 정보 */} + <Card> + <CardHeader> + <CardTitle className="flex items-center gap-2"> + RFQ 기본 정보 + <Badge variant="outline">{rfq.rfqCode || "미할당"}</Badge> + </CardTitle> + <CardDescription> + 요청서 기본 정보 및 자재 정보 + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">RFQ 번호</div> + <div className="text-sm">{rfq.rfqCode || "미할당"}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">자재 코드</div> + <div className="text-sm">{rfq.materialCode || "N/A"}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">품목명</div> + <div className="text-sm">{rfq.item?.itemName || "N/A"}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">마감일</div> + <div className="text-sm"> + {rfq.dueDate ? formatDate(rfq.dueDate) : "N/A"} + </div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">RFQ 상태</div> + <div className="text-sm">{rfq.status || "N/A"}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">담당자</div> + <div className="text-sm">{rfq.createdByUser?.name || "N/A"}</div> + </div> + </div> + {rfq.remark && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">비고</div> + <div className="text-sm p-3 bg-muted rounded-md">{rfq.remark}</div> + </div> + )} + </CardContent> + </Card> + + {/* 프로젝트 기본 정보 */} + {rfq.biddingProject && ( + <Card> + <CardHeader> + <CardTitle className="flex items-center gap-2"> + 프로젝트 기본 정보 + <Badge variant="outline">{rfq.biddingProject.pspid || "N/A"}</Badge> + </CardTitle> + <CardDescription> + 연결된 프로젝트의 기본 정보 + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">프로젝트 ID</div> + <div className="text-sm">{rfq.biddingProject.pspid || "N/A"}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">프로젝트명</div> + <div className="text-sm">{rfq.biddingProject.projNm || "N/A"}</div> + </div> + </div> + </CardContent> + </Card> + )} + + {/* 프로젝트 스냅샷 정보 */} + {projectSnapshot && ( + <Card> + <CardHeader> + <CardTitle>프로젝트 스냅샷</CardTitle> + <CardDescription> + RFQ 생성 시점의 프로젝트 상세 정보 + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> + {projectSnapshot.projNo && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">공사번호</div> + <div className="text-sm">{projectSnapshot.projNo}</div> + </div> + )} + {projectSnapshot.projNm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">공사명</div> + <div className="text-sm">{projectSnapshot.projNm}</div> + </div> + )} + {projectSnapshot.estmPm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">견적 PM</div> + <div className="text-sm">{projectSnapshot.estmPm}</div> + </div> + )} + {projectSnapshot.kunnrNm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">선주</div> + <div className="text-sm">{projectSnapshot.kunnrNm}</div> + </div> + )} + {projectSnapshot.cls1Nm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">선급</div> + <div className="text-sm">{projectSnapshot.cls1Nm}</div> + </div> + )} + {projectSnapshot.projMsrm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">척수</div> + <div className="text-sm">{projectSnapshot.projMsrm}</div> + </div> + )} + {projectSnapshot.ptypeNm && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">선종</div> + <div className="text-sm">{projectSnapshot.ptypeNm}</div> + </div> + )} + </div> + </CardContent> + </Card> + )} + + {/* 시리즈 스냅샷 정보 */} + {seriesSnapshot && Array.isArray(seriesSnapshot) && seriesSnapshot.length > 0 && ( + <Card> + <CardHeader> + <CardTitle>시리즈 정보 스냅샷</CardTitle> + <CardDescription> + 프로젝트의 시리즈별 K/L 일정 정보 + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + {seriesSnapshot.map((series: SeriesSnapshot, index: number) => ( + <div key={index} className="border rounded-lg p-4 space-y-3"> + <div className="flex items-center gap-2"> + <Badge variant="secondary">시리즈 {series.sersNo || index + 1}</Badge> + </div> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + {series.klDt && ( + <div className="space-y-1"> + <div className="text-xs font-medium text-muted-foreground">K/L</div> + <div className="text-sm">{formatDateToQuarter(series.klDt)}</div> + </div> + )} + </div> + </div> + ))} + </CardContent> + </Card> + )} + + {/* 정보가 없는 경우 */} + {!projectSnapshot && !seriesSnapshot && ( + <Card> + <CardContent className="text-center py-8"> + <div className="text-muted-foreground"> + 추가 프로젝트 상세정보가 없습니다. + </div> + </CardContent> + </Card> + )} + </div> + </ScrollArea> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/detail/quotation-response-tab.tsx b/lib/techsales-rfq/vendor-response/detail/quotation-response-tab.tsx new file mode 100644 index 00000000..3449dcb6 --- /dev/null +++ b/lib/techsales-rfq/vendor-response/detail/quotation-response-tab.tsx @@ -0,0 +1,382 @@ +"use client" + +import * as React from "react" +import { useState } from "react" +import { useRouter } from "next/navigation" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { Textarea } from "@/components/ui/textarea" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" +import { CalendarIcon, Save, Send, AlertCircle } from "lucide-react" +import { Calendar } from "@/components/ui/calendar" +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" +import { Alert, AlertDescription } from "@/components/ui/alert" +import { formatDate, cn } from "@/lib/utils" +import { toast } from "sonner" + +interface QuotationResponseTabProps { + quotation: { + id: number + status: string + totalPrice: string | null + currency: string | null + validUntil: Date | null + remark: string | null + rfq: { + id: number + rfqCode: string | null + materialCode: string | null + dueDate: Date | null + status: string | null + item?: { + itemName: string | null + } | null + } | null + vendor: { + vendorName: string + } | null + } +} + +const CURRENCIES = [ + { value: "KRW", label: "KRW (원)" }, + { value: "USD", label: "USD (달러)" }, + { value: "EUR", label: "EUR (유로)" }, + { value: "JPY", label: "JPY (엔)" }, + { value: "CNY", label: "CNY (위안)" }, +] + +export function QuotationResponseTab({ quotation }: QuotationResponseTabProps) { + const [totalPrice, setTotalPrice] = useState(quotation.totalPrice?.toString() || "") + const [currency, setCurrency] = useState(quotation.currency || "KRW") + const [validUntil, setValidUntil] = useState<Date | undefined>( + quotation.validUntil ? new Date(quotation.validUntil) : undefined + ) + const [remark, setRemark] = useState(quotation.remark || "") + const [isLoading, setIsLoading] = useState(false) + const router = useRouter() + + const rfq = quotation.rfq + const isDueDatePassed = rfq?.dueDate ? new Date(rfq.dueDate) < new Date() : false + const canSubmit = quotation.status === "Draft" && !isDueDatePassed + const canEdit = ["Draft", "Revised"].includes(quotation.status) && !isDueDatePassed + + const handleSaveDraft = async () => { + setIsLoading(true) + try { + const { updateTechSalesVendorQuotation } = await import("@/lib/techsales-rfq/service") + + const result = await updateTechSalesVendorQuotation({ + id: quotation.id, + currency, + totalPrice, + validUntil: validUntil!, + remark, + updatedBy: 1 // TODO: 실제 사용자 ID로 변경 + }) + + if (result.error) { + toast.error(result.error) + } else { + toast.success("임시 저장되었습니다.") + // 페이지 새로고침 대신 router.refresh() 사용 + router.refresh() + } + } catch { + toast.error("저장 중 오류가 발생했습니다.") + } finally { + setIsLoading(false) + } + } + + const handleSubmit = async () => { + if (!totalPrice || !currency || !validUntil) { + toast.error("모든 필수 항목을 입력해주세요.") + return + } + + setIsLoading(true) + try { + const { submitTechSalesVendorQuotation } = await import("@/lib/techsales-rfq/service") + + const result = await submitTechSalesVendorQuotation({ + id: quotation.id, + currency, + totalPrice, + validUntil: validUntil!, + remark, + updatedBy: 1 // TODO: 실제 사용자 ID로 변경 + }) + + if (result.error) { + toast.error(result.error) + } else { + toast.success("견적서가 제출되었습니다.") + // 페이지 새로고침 대신 router.refresh() 사용 + router.refresh() + } + } catch { + toast.error("제출 중 오류가 발생했습니다.") + } finally { + setIsLoading(false) + } + } + + const getStatusBadgeVariant = (status: string) => { + switch (status) { + case "Draft": + return "secondary" + case "Submitted": + return "default" + case "Revised": + return "outline" + case "Rejected": + return "destructive" + case "Accepted": + return "success" + default: + return "secondary" + } + } + + const getStatusLabel = (status: string) => { + switch (status) { + case "Draft": + return "초안" + case "Submitted": + return "제출됨" + case "Revised": + return "수정됨" + case "Rejected": + return "반려됨" + case "Accepted": + return "승인됨" + default: + return status + } + } + + return ( + <ScrollArea className="h-full"> + <div className="space-y-6 p-1"> + {/* 견적서 상태 정보 */} + <Card> + <CardHeader> + <CardTitle className="flex items-center gap-2"> + 견적서 상태 + <Badge variant={getStatusBadgeVariant(quotation.status)}> + {getStatusLabel(quotation.status)} + </Badge> + </CardTitle> + <CardDescription> + 현재 견적서 상태 및 마감일 정보 + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">견적서 상태</div> + <div className="text-sm">{getStatusLabel(quotation.status)}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">RFQ 마감일</div> + <div className="text-sm"> + {rfq?.dueDate ? formatDate(rfq.dueDate) : "N/A"} + </div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">남은 시간</div> + <div className="text-sm"> + {isDueDatePassed ? ( + <span className="text-destructive">마감됨</span> + ) : rfq?.dueDate ? ( + <span className="text-green-600"> + {Math.ceil((new Date(rfq.dueDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))}일 + </span> + ) : ( + "N/A" + )} + </div> + </div> + </div> + + {isDueDatePassed && ( + <Alert> + <AlertCircle className="h-4 w-4" /> + <AlertDescription> + RFQ 마감일이 지났습니다. 견적서를 수정하거나 제출할 수 없습니다. + </AlertDescription> + </Alert> + )} + + {!canEdit && !isDueDatePassed && ( + <Alert> + <AlertCircle className="h-4 w-4" /> + <AlertDescription> + 현재 상태에서는 견적서를 수정할 수 없습니다. + </AlertDescription> + </Alert> + )} + </CardContent> + </Card> + + {/* 견적 응답 폼 */} + <Card> + <CardHeader> + <CardTitle>견적 응답</CardTitle> + <CardDescription> + 총 가격, 통화, 유효기간을 입력해주세요. + </CardDescription> + </CardHeader> + <CardContent className="space-y-6"> + {/* 총 가격 */} + <div className="space-y-2"> + <Label htmlFor="totalPrice"> + 총 가격 <span className="text-destructive">*</span> + </Label> + <Input + id="totalPrice" + type="number" + placeholder="총 가격을 입력하세요" + value={totalPrice} + onChange={(e) => setTotalPrice(e.target.value)} + disabled={!canEdit} + className="text-right" + /> + </div> + + {/* 통화 */} + <div className="space-y-2"> + <Label htmlFor="currency"> + 통화 <span className="text-destructive">*</span> + </Label> + <Select value={currency} onValueChange={setCurrency} disabled={!canEdit}> + <SelectTrigger> + <SelectValue placeholder="통화를 선택하세요" /> + </SelectTrigger> + <SelectContent> + {CURRENCIES.map((curr) => ( + <SelectItem key={curr.value} value={curr.value}> + {curr.label} + </SelectItem> + ))} + </SelectContent> + </Select> + </div> + + {/* 유효기간 */} + <div className="space-y-2"> + <Label> + 견적 유효기간 <span className="text-destructive">*</span> + </Label> + <Popover> + <PopoverTrigger asChild> + <Button + variant="outline" + className={cn( + "w-full justify-start text-left font-normal", + !validUntil && "text-muted-foreground" + )} + disabled={!canEdit} + > + <CalendarIcon className="mr-2 h-4 w-4" /> + {validUntil ? formatDate(validUntil) : "날짜를 선택하세요"} + </Button> + </PopoverTrigger> + <PopoverContent className="w-auto p-0" align="start"> + <Calendar + mode="single" + selected={validUntil} + onSelect={setValidUntil} + disabled={(date) => date < new Date()} + initialFocus + /> + </PopoverContent> + </Popover> + </div> + + {/* 비고 */} + <div className="space-y-2"> + <Label htmlFor="remark">비고</Label> + <Textarea + id="remark" + placeholder="추가 설명이나 조건을 입력하세요" + value={remark} + onChange={(e) => setRemark(e.target.value)} + disabled={!canEdit} + rows={4} + /> + </div> + + {/* 액션 버튼 */} + {canEdit && ( + <div className="flex gap-2 pt-4"> + <Button + variant="outline" + onClick={handleSaveDraft} + disabled={isLoading} + className="flex-1" + > + <Save className="mr-2 h-4 w-4" /> + 임시 저장 + </Button> + {canSubmit && ( + <Button + onClick={handleSubmit} + disabled={isLoading || !totalPrice || !currency || !validUntil} + className="flex-1" + > + <Send className="mr-2 h-4 w-4" /> + 견적서 제출 + </Button> + )} + </div> + )} + </CardContent> + </Card> + + {/* 현재 견적 정보 (읽기 전용) */} + {quotation.totalPrice && ( + <Card> + <CardHeader> + <CardTitle>현재 견적 정보</CardTitle> + <CardDescription> + 저장된 견적 정보 + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">총 가격</div> + <div className="text-lg font-semibold"> + {parseFloat(quotation.totalPrice).toLocaleString()} {quotation.currency} + </div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">통화</div> + <div className="text-sm">{quotation.currency}</div> + </div> + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">유효기간</div> + <div className="text-sm"> + {quotation.validUntil ? formatDate(quotation.validUntil) : "N/A"} + </div> + </div> + </div> + {quotation.remark && ( + <div className="space-y-2"> + <div className="text-sm font-medium text-muted-foreground">비고</div> + <div className="text-sm p-3 bg-muted rounded-md">{quotation.remark}</div> + </div> + )} + </CardContent> + </Card> + )} + </div> + </ScrollArea> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/detail/quotation-tabs.tsx b/lib/techsales-rfq/vendor-response/detail/quotation-tabs.tsx new file mode 100644 index 00000000..a800dd95 --- /dev/null +++ b/lib/techsales-rfq/vendor-response/detail/quotation-tabs.tsx @@ -0,0 +1,118 @@ +"use client" + +import * as React from "react" +import { useRouter, useSearchParams } from "next/navigation" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { ProjectInfoTab } from "./project-info-tab" +import { QuotationResponseTab } from "./quotation-response-tab" +import { CommunicationTab } from "./communication-tab" + +// 프로젝트 스냅샷 타입 정의 +interface ProjectSnapshot { + scDt?: string + klDt?: string + lcDt?: string + dlDt?: string + dockNo?: string + dockNm?: string + projNo?: string + projNm?: string + ownerNm?: string + kunnrNm?: string + cls1Nm?: string + projMsrm?: number + ptypeNm?: string + sector?: string + estmPm?: string +} + +// 시리즈 스냅샷 타입 정의 +interface SeriesSnapshot { + sersNo?: string + scDt?: string + klDt?: string + lcDt?: string + dlDt?: string + dockNo?: string + dockNm?: string +} + +interface QuotationData { + id: number + status: string + totalPrice: string | null + currency: string | null + validUntil: Date | null + remark: string | null + rfq: { + id: number + rfqCode: string | null + materialCode: string | null + dueDate: Date | null + status: string | null + remark: string | null + projectSnapshot?: ProjectSnapshot | null + seriesSnapshot?: SeriesSnapshot[] | null + item?: { + id: number + itemCode: string | null + itemName: string | null + } | null + biddingProject?: { + id: number + pspid: string | null + projNm: string | null + } | null + createdByUser?: { + id: number + name: string | null + email: string | null + } | null + } | null + vendor: { + id: number + vendorName: string + vendorCode: string | null + } | null +} + +interface TechSalesQuotationTabsProps { + quotation: QuotationData + defaultTab?: string +} + +export function TechSalesQuotationTabs({ quotation, defaultTab = "project" }: TechSalesQuotationTabsProps) { + const router = useRouter() + const searchParams = useSearchParams() + const currentTab = searchParams?.get("tab") || defaultTab + + const handleTabChange = (value: string) => { + const params = new URLSearchParams(searchParams?.toString() || "") + params.set("tab", value) + router.push(`?${params.toString()}`, { scroll: false }) + } + + return ( + <Tabs value={currentTab} onValueChange={handleTabChange} className="h-full flex flex-col"> + <TabsList className="grid w-full grid-cols-3"> + <TabsTrigger value="project">프로젝트 및 RFQ 정보</TabsTrigger> + <TabsTrigger value="quotation">견적 응답</TabsTrigger> + <TabsTrigger value="communication">커뮤니케이션</TabsTrigger> + </TabsList> + + <div className="flex-1 mt-4 overflow-hidden"> + <TabsContent value="project" className="h-full m-0"> + <ProjectInfoTab quotation={quotation} /> + </TabsContent> + + <TabsContent value="quotation" className="h-full m-0"> + <QuotationResponseTab quotation={quotation} /> + </TabsContent> + + <TabsContent value="communication" className="h-full m-0"> + <CommunicationTab quotation={quotation} /> + </TabsContent> + </div> + </Tabs> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/quotation-editor.tsx b/lib/techsales-rfq/vendor-response/quotation-editor.tsx new file mode 100644 index 00000000..f3fab10d --- /dev/null +++ b/lib/techsales-rfq/vendor-response/quotation-editor.tsx @@ -0,0 +1,559 @@ +"use client" + +import * as React from "react" +import { useState, useEffect } from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import * as z from "zod" +import { toast } from "sonner" +import { useRouter } from "next/navigation" +import { CalendarIcon, Save, Send, ArrowLeft } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" +import { Separator } from "@/components/ui/separator" +import { DatePicker } from "@/components/ui/date-picker" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" +import { Skeleton } from "@/components/ui/skeleton" + +import { formatCurrency, formatDate } from "@/lib/utils" +import { + updateTechSalesVendorQuotation, + submitTechSalesVendorQuotation, + fetchCurrencies +} from "../service" + +// 견적서 폼 스키마 (techsales용 단순화) +const quotationFormSchema = z.object({ + currency: z.string().min(1, "통화를 선택해주세요"), + totalPrice: z.string().min(1, "총액을 입력해주세요"), + validUntil: z.date({ + required_error: "견적 유효기간을 선택해주세요", + invalid_type_error: "유효한 날짜를 선택해주세요", + }), + remark: z.string().optional(), +}) + +type QuotationFormValues = z.infer<typeof quotationFormSchema> + +// 통화 타입 +interface Currency { + code: string + name: string +} + +// 이 컴포넌트에 전달되는 견적서 데이터 타입 (techsales용 단순화) +interface TechSalesVendorQuotation { + id: number + rfqId: number + vendorId: number + quotationCode: string | null + quotationVersion: number | null + totalPrice: string | null + currency: string | null + validUntil: Date | null + status: "Draft" | "Submitted" | "Revised" | "Rejected" | "Accepted" + remark: string | null + rejectionReason: string | null + submittedAt: Date | null + acceptedAt: Date | null + createdAt: Date + updatedAt: Date + rfq: { + id: number + rfqCode: string | null + dueDate: Date | null + status: string | null + materialCode: string | null + remark: string | null + projectSnapshot?: { + pspid?: string + projNm?: string + sector?: string + projMsrm?: number + kunnr?: string + kunnrNm?: string + ptypeNm?: string + } | null + seriesSnapshot?: Array<{ + pspid: string + sersNo: string + scDt?: string + klDt?: string + lcDt?: string + dlDt?: string + dockNo?: string + dockNm?: string + projNo?: string + post1?: string + }> | null + item?: { + id: number + itemCode: string | null + itemName: string | null + } | null + biddingProject?: { + id: number + pspid: string | null + projNm: string | null + } | null + createdByUser?: { + id: number + name: string | null + email: string | null + } | null + } + vendor: { + id: number + vendorName: string + vendorCode: string | null + } +} + +interface TechSalesQuotationEditorProps { + quotation: TechSalesVendorQuotation +} + +export default function TechSalesQuotationEditor({ quotation }: TechSalesQuotationEditorProps) { + const router = useRouter() + const [isSubmitting, setIsSubmitting] = useState(false) + const [isSaving, setIsSaving] = useState(false) + const [currencies, setCurrencies] = useState<Currency[]>([]) + const [loadingCurrencies, setLoadingCurrencies] = useState(true) + + // 폼 초기화 + const form = useForm<QuotationFormValues>({ + resolver: zodResolver(quotationFormSchema), + defaultValues: { + currency: quotation.currency || "USD", + totalPrice: quotation.totalPrice || "", + validUntil: quotation.validUntil || undefined, + remark: quotation.remark || "", + }, + }) + + // 통화 목록 로드 + useEffect(() => { + const loadCurrencies = async () => { + try { + const { data, error } = await fetchCurrencies() + if (error) { + toast.error("통화 목록을 불러오는데 실패했습니다") + return + } + setCurrencies(data || []) + } catch (error) { + console.error("Error loading currencies:", error) + toast.error("통화 목록을 불러오는데 실패했습니다") + } finally { + setLoadingCurrencies(false) + } + } + + loadCurrencies() + }, []) + + // 마감일 확인 + const isBeforeDueDate = () => { + if (!quotation.rfq.dueDate) return true + return new Date() <= new Date(quotation.rfq.dueDate) + } + + // 편집 가능 여부 확인 + const isEditable = () => { + return quotation.status === "Draft" || quotation.status === "Rejected" + } + + // 제출 가능 여부 확인 + const isSubmitReady = () => { + const values = form.getValues() + return values.currency && + values.totalPrice && + parseFloat(values.totalPrice) > 0 && + values.validUntil && + isBeforeDueDate() + } + + // 저장 핸들러 + const handleSave = async () => { + if (!isEditable()) { + toast.error("편집할 수 없는 상태입니다") + return + } + + setIsSaving(true) + try { + const values = form.getValues() + const { data, error } = await updateTechSalesVendorQuotation({ + id: quotation.id, + currency: values.currency, + totalPrice: values.totalPrice, + validUntil: values.validUntil, + remark: values.remark, + updatedBy: quotation.vendorId, // 임시로 vendorId 사용 + }) + + if (error) { + toast.error(error) + return + } + + toast.success("견적서가 저장되었습니다") + router.refresh() + } catch (error) { + console.error("Error saving quotation:", error) + toast.error("견적서 저장 중 오류가 발생했습니다") + } finally { + setIsSaving(false) + } + } + + // 제출 핸들러 + const handleSubmit = async () => { + if (!isEditable()) { + toast.error("제출할 수 없는 상태입니다") + return + } + + if (!isSubmitReady()) { + toast.error("필수 항목을 모두 입력해주세요") + return + } + + if (!isBeforeDueDate()) { + toast.error("마감일이 지났습니다") + return + } + + setIsSubmitting(true) + try { + const values = form.getValues() + const { data, error } = await submitTechSalesVendorQuotation({ + id: quotation.id, + currency: values.currency, + totalPrice: values.totalPrice, + validUntil: values.validUntil, + remark: values.remark, + updatedBy: quotation.vendorId, // 임시로 vendorId 사용 + }) + + if (error) { + toast.error(error) + return + } + + toast.success("견적서가 제출되었습니다") + router.push("/ko/partners/techsales/rfq-ship") + } catch (error) { + console.error("Error submitting quotation:", error) + toast.error("견적서 제출 중 오류가 발생했습니다") + } finally { + setIsSubmitting(false) + } + } + + // 상태 배지 + const getStatusBadge = (status: string) => { + const statusConfig = { + "Draft": { label: "초안", variant: "secondary" as const }, + "Submitted": { label: "제출됨", variant: "default" as const }, + "Revised": { label: "수정됨", variant: "outline" as const }, + "Rejected": { label: "반려됨", variant: "destructive" as const }, + "Accepted": { label: "승인됨", variant: "success" as const }, + } + + const config = statusConfig[status as keyof typeof statusConfig] || { + label: status, + variant: "secondary" as const + } + + return <Badge variant={config.variant}>{config.label}</Badge> + } + + return ( + <div className="container max-w-4xl mx-auto py-6 space-y-6"> + {/* 헤더 */} + <div className="flex items-center justify-between"> + <div className="flex items-center space-x-4"> + <Button + variant="ghost" + size="sm" + onClick={() => router.back()} + > + <ArrowLeft className="h-4 w-4 mr-2" /> + 뒤로가기 + </Button> + <div> + <h1 className="text-2xl font-bold">기술영업 견적서</h1> + <p className="text-muted-foreground"> + RFQ: {quotation.rfq.rfqCode} | {getStatusBadge(quotation.status)} + </p> + </div> + </div> + <div className="flex items-center space-x-2"> + {isEditable() && ( + <> + <Button + variant="outline" + onClick={handleSave} + disabled={isSaving} + > + <Save className="h-4 w-4 mr-2" /> + {isSaving ? "저장 중..." : "저장"} + </Button> + <Button + onClick={handleSubmit} + disabled={isSubmitting || !isSubmitReady()} + > + <Send className="h-4 w-4 mr-2" /> + {isSubmitting ? "제출 중..." : "제출"} + </Button> + </> + )} + </div> + </div> + + <div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> + {/* 왼쪽: RFQ 정보 */} + <div className="lg:col-span-1 space-y-6"> + {/* RFQ 기본 정보 */} + <Card> + <CardHeader> + <CardTitle>RFQ 정보</CardTitle> + </CardHeader> + <CardContent className="space-y-4"> + <div> + <label className="text-sm font-medium text-muted-foreground">RFQ 번호</label> + <p className="font-mono">{quotation.rfq.rfqCode}</p> + </div> + <div> + <label className="text-sm font-medium text-muted-foreground">자재 코드</label> + <p>{quotation.rfq.materialCode || "N/A"}</p> + </div> + <div> + <label className="text-sm font-medium text-muted-foreground">품목명</label> + <p>{quotation.rfq.item?.itemName || "N/A"}</p> + </div> + <div> + <label className="text-sm font-medium text-muted-foreground">마감일</label> + <p className={!isBeforeDueDate() ? "text-red-600 font-medium" : ""}> + {quotation.rfq.dueDate ? formatDate(quotation.rfq.dueDate) : "N/A"} + </p> + </div> + {quotation.rfq.remark && ( + <div> + <label className="text-sm font-medium text-muted-foreground">비고</label> + <p className="text-sm">{quotation.rfq.remark}</p> + </div> + )} + </CardContent> + </Card> + + {/* 프로젝트 정보 */} + {quotation.rfq.projectSnapshot && ( + <Card> + <CardHeader> + <CardTitle>프로젝트 정보</CardTitle> + </CardHeader> + <CardContent className="space-y-3"> + <div> + <label className="text-sm font-medium text-muted-foreground">프로젝트 번호</label> + <p className="font-mono">{quotation.rfq.projectSnapshot.pspid}</p> + </div> + <div> + <label className="text-sm font-medium text-muted-foreground">프로젝트명</label> + <p>{quotation.rfq.projectSnapshot.projNm || "N/A"}</p> + </div> + <div> + <label className="text-sm font-medium text-muted-foreground">선종</label> + <p>{quotation.rfq.projectSnapshot.ptypeNm || "N/A"}</p> + </div> + <div> + <label className="text-sm font-medium text-muted-foreground">척수</label> + <p>{quotation.rfq.projectSnapshot.projMsrm || "N/A"}</p> + </div> + <div> + <label className="text-sm font-medium text-muted-foreground">선주</label> + <p>{quotation.rfq.projectSnapshot.kunnrNm || "N/A"}</p> + </div> + </CardContent> + </Card> + )} + + {/* 시리즈 정보 */} + {quotation.rfq.seriesSnapshot && quotation.rfq.seriesSnapshot.length > 0 && ( + <Card> + <CardHeader> + <CardTitle>시리즈 일정</CardTitle> + </CardHeader> + <CardContent> + <div className="space-y-3"> + {quotation.rfq.seriesSnapshot.map((series, index) => ( + <div key={index} className="border rounded p-3"> + <div className="font-medium mb-2">시리즈 {series.sersNo}</div> + <div className="grid grid-cols-2 gap-2 text-sm"> + {series.klDt && ( + <div> + <span className="text-muted-foreground">K/L:</span> {formatDate(series.klDt)} + </div> + )} + {series.dlDt && ( + <div> + <span className="text-muted-foreground">인도:</span> {formatDate(series.dlDt)} + </div> + )} + </div> + </div> + ))} + </div> + </CardContent> + </Card> + )} + </div> + + {/* 오른쪽: 견적서 입력 폼 */} + <div className="lg:col-span-2"> + <Card> + <CardHeader> + <CardTitle>견적서 작성</CardTitle> + <CardDescription> + 총액 기반으로 견적을 작성해주세요. + </CardDescription> + </CardHeader> + <CardContent> + <Form {...form}> + <form className="space-y-6"> + {/* 통화 선택 */} + <FormField + control={form.control} + name="currency" + render={({ field }) => ( + <FormItem> + <FormLabel>통화 *</FormLabel> + <Select + onValueChange={field.onChange} + defaultValue={field.value} + disabled={!isEditable()} + > + <FormControl> + <SelectTrigger> + <SelectValue placeholder="통화를 선택하세요" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {loadingCurrencies ? ( + <div className="p-2"> + <Skeleton className="h-4 w-full" /> + </div> + ) : ( + currencies.map((currency) => ( + <SelectItem key={currency.code} value={currency.code}> + {currency.code} - {currency.name} + </SelectItem> + )) + )} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + {/* 총액 입력 */} + <FormField + control={form.control} + name="totalPrice" + render={({ field }) => ( + <FormItem> + <FormLabel>총액 *</FormLabel> + <FormControl> + <Input + type="number" + step="0.01" + placeholder="총액을 입력하세요" + disabled={!isEditable()} + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 유효기간 */} + <FormField + control={form.control} + name="validUntil" + render={({ field }) => ( + <FormItem> + <FormLabel>견적 유효기간 *</FormLabel> + <FormControl> + <DatePicker + date={field.value} + onDateChange={field.onChange} + disabled={!isEditable()} + placeholder="유효기간을 선택하세요" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 비고 */} + <FormField + control={form.control} + name="remark" + render={({ field }) => ( + <FormItem> + <FormLabel>비고</FormLabel> + <FormControl> + <Textarea + placeholder="추가 설명이나 특이사항을 입력하세요" + disabled={!isEditable()} + rows={4} + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 반려 사유 (반려된 경우에만 표시) */} + {quotation.status === "Rejected" && quotation.rejectionReason && ( + <div className="p-4 bg-red-50 border border-red-200 rounded-lg"> + <label className="text-sm font-medium text-red-800">반려 사유</label> + <p className="text-sm text-red-700 mt-1">{quotation.rejectionReason}</p> + </div> + )} + + {/* 제출 정보 */} + {quotation.submittedAt && ( + <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg"> + <label className="text-sm font-medium text-blue-800">제출 정보</label> + <p className="text-sm text-blue-700 mt-1"> + 제출일: {formatDate(quotation.submittedAt)} + </p> + </div> + )} + </form> + </Form> + </CardContent> + </Card> + </div> + </div> + </div> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/quotation-item-editor.tsx b/lib/techsales-rfq/vendor-response/quotation-item-editor.tsx new file mode 100644 index 00000000..e11864dc --- /dev/null +++ b/lib/techsales-rfq/vendor-response/quotation-item-editor.tsx @@ -0,0 +1,664 @@ +"use client" + +import * as React from "react" +import { useState, useEffect, useRef } from "react" +import { toast } from "sonner" +import { format } from "date-fns" + +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Checkbox } from "@/components/ui/checkbox" +import { DatePicker } from "@/components/ui/date-picker" +import { + Table, + TableBody, + TableCaption, + TableCell, + TableHead, + TableHeader, + TableRow +} from "@/components/ui/table" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger +} from "@/components/ui/tooltip" +import { + Info, + Clock, + CalendarIcon, + ClipboardCheck, + AlertTriangle, + CheckCircle2, + RefreshCw, + Save, + FileText, + Sparkles +} from "lucide-react" + +import { formatCurrency } from "@/lib/utils" +import { updateQuotationItem } from "../services" +import { Textarea } from "@/components/ui/textarea" + +// 견적 아이템 타입 +interface QuotationItem { + id: number + quotationId: number + prItemId: number + materialCode: string | null + materialDescription: string | null + quantity: number + uom: string | null + unitPrice: number + totalPrice: number + currency: string + vendorMaterialCode: string | null + vendorMaterialDescription: string | null + deliveryDate: Date | null + leadTimeInDays: number | null + taxRate: number | null + taxAmount: number | null + discountRate: number | null + discountAmount: number | null + remark: string | null + isAlternative: boolean + isRecommended: boolean // 남겨두지만 UI에서는 사용하지 않음 + createdAt: Date + updatedAt: Date + prItem?: { + id: number + materialCode: string | null + materialDescription: string | null + // 기타 필요한 정보 + } +} + +// debounce 함수 구현 +function debounce<T extends (...args: any[]) => any>( + func: T, + wait: number +): (...args: Parameters<T>) => void { + let timeout: NodeJS.Timeout | null = null; + + return function (...args: Parameters<T>) { + if (timeout) clearTimeout(timeout); + timeout = setTimeout(() => func(...args), wait); + }; +} + +interface QuotationItemEditorProps { + items: QuotationItem[] + onItemsChange: (items: QuotationItem[]) => void + disabled?: boolean + currency: string +} + +export function QuotationItemEditor({ + items, + onItemsChange, + disabled = false, + currency +}: QuotationItemEditorProps) { + const [editingItem, setEditingItem] = useState<number | null>(null) + const [isSaving, setIsSaving] = useState(false) + + // 저장이 필요한 항목들을 추적 + const [pendingChanges, setPendingChanges] = useState<Set<number>>(new Set()) + + // 로컬 상태 업데이트 함수 - 화면에 즉시 반영하지만 서버에는 즉시 저장하지 않음 + const updateLocalItem = <K extends keyof QuotationItem>( + index: number, + field: K, + value: QuotationItem[K] + ) => { + // 로컬 상태 업데이트 + const updatedItems = [...items] + const item = { ...updatedItems[index] } + + // 필드 업데이트 + item[field] = value + + // 대체품 체크 해제 시 관련 필드 초기화 + if (field === 'isAlternative' && value === false) { + item.vendorMaterialCode = null; + item.vendorMaterialDescription = null; + item.remark = null; + } + + // 단가나 수량이 변경되면 총액 계산 + if (field === 'unitPrice' || field === 'quantity') { + item.totalPrice = Number(item.unitPrice) * Number(item.quantity) + + // 세금이 있으면 세액 계산 + if (item.taxRate) { + item.taxAmount = item.totalPrice * (item.taxRate / 100) + } + + // 할인이 있으면 할인액 계산 + if (item.discountRate) { + item.discountAmount = item.totalPrice * (item.discountRate / 100) + } + } + + // 세율이 변경되면 세액 계산 + if (field === 'taxRate') { + item.taxAmount = item.totalPrice * (value as number / 100) + } + + // 할인율이 변경되면 할인액 계산 + if (field === 'discountRate') { + item.discountAmount = item.totalPrice * (value as number / 100) + } + + // 변경된 아이템으로 교체 + updatedItems[index] = item + + // 미저장 항목으로 표시 + setPendingChanges(prev => new Set(prev).add(item.id)) + + // 부모 컴포넌트에 변경 사항 알림 + onItemsChange(updatedItems) + + // 저장 필요함을 표시 + return item + } + + // 서버에 저장하는 함수 + const saveItemToServer = async (item: QuotationItem, field: keyof QuotationItem, value: any) => { + if (disabled) return + + try { + setIsSaving(true) + + const result = await updateQuotationItem({ + id: item.id, + [field]: value, + totalPrice: item.totalPrice, + taxAmount: item.taxAmount ?? 0, + discountAmount: item.discountAmount ?? 0 + }) + + // 저장 완료 후 pendingChanges에서 제거 + setPendingChanges(prev => { + const newSet = new Set(prev) + newSet.delete(item.id) + return newSet + }) + + if (!result.success) { + toast.error(result.message || "항목 저장 중 오류가 발생했습니다") + } + } catch (error) { + console.error("항목 저장 오류:", error) + toast.error("항목 저장 중 오류가 발생했습니다") + } finally { + setIsSaving(false) + } + } + + // debounce된 저장 함수 + const debouncedSave = useRef(debounce( + (item: QuotationItem, field: keyof QuotationItem, value: any) => { + saveItemToServer(item, field, value) + }, + 800 // 800ms 지연 + )).current + + // 견적 항목 업데이트 함수 + const handleItemUpdate = (index: number, field: keyof QuotationItem, value: any) => { + const updatedItem = updateLocalItem(index, field, value) + + // debounce를 통해 서버 저장 지연 + if (!disabled) { + debouncedSave(updatedItem, field, value) + } + } + + // 모든 변경 사항 저장 + const saveAllChanges = async () => { + if (disabled || pendingChanges.size === 0) return + + setIsSaving(true) + toast.info(`${pendingChanges.size}개 항목 저장 중...`) + + try { + // 변경된 모든 항목 저장 + for (const itemId of pendingChanges) { + const index = items.findIndex(item => item.id === itemId) + if (index !== -1) { + const item = items[index] + await updateQuotationItem({ + id: item.id, + unitPrice: item.unitPrice, + totalPrice: item.totalPrice, + taxRate: item.taxRate ?? 0, + taxAmount: item.taxAmount ?? 0, + discountRate: item.discountRate ?? 0, + discountAmount: item.discountAmount ?? 0, + deliveryDate: item.deliveryDate, + leadTimeInDays: item.leadTimeInDays ?? 0, + vendorMaterialCode: item.vendorMaterialCode ?? "", + vendorMaterialDescription: item.vendorMaterialDescription ?? "", + isAlternative: item.isAlternative, + isRecommended: false, // 항상 false로 설정 (사용하지 않음) + remark: item.remark ?? "" + }) + } + } + + // 모든 변경 사항 저장 완료 + setPendingChanges(new Set()) + toast.success("모든 변경 사항이 저장되었습니다") + } catch (error) { + console.error("변경 사항 저장 오류:", error) + toast.error("변경 사항 저장 중 오류가 발생했습니다") + } finally { + setIsSaving(false) + } + } + + // blur 이벤트로 저장 트리거 (사용자가 입력 완료 후) + const handleBlur = (index: number, field: keyof QuotationItem, value: any) => { + const itemId = items[index].id + + // 해당 항목이 pendingChanges에 있다면 즉시 저장 + if (pendingChanges.has(itemId)) { + const item = items[index] + saveItemToServer(item, field, value) + } + } + + // 전체 단가 업데이트 (일괄 반영) + const handleBulkUnitPriceUpdate = () => { + if (items.length === 0) return + + // 첫 번째 아이템의 단가 가져오기 + const firstUnitPrice = items[0].unitPrice + + if (!firstUnitPrice) { + toast.error("첫 번째 항목의 단가를 먼저 입력해주세요") + return + } + + // 모든 아이템에 동일한 단가 적용 + const updatedItems = items.map(item => ({ + ...item, + unitPrice: firstUnitPrice, + totalPrice: firstUnitPrice * item.quantity, + taxAmount: item.taxRate ? (firstUnitPrice * item.quantity) * (item.taxRate / 100) : item.taxAmount, + discountAmount: item.discountRate ? (firstUnitPrice * item.quantity) * (item.discountRate / 100) : item.discountAmount + })) + + // 모든 아이템을 변경 필요 항목으로 표시 + setPendingChanges(new Set(updatedItems.map(item => item.id))) + + // 부모 컴포넌트에 변경 사항 알림 + onItemsChange(updatedItems) + + toast.info("모든 항목의 단가가 업데이트되었습니다. 변경 사항을 저장하려면 '저장' 버튼을 클릭하세요.") + } + + // 입력 핸들러 + const handleNumberInputChange = ( + index: number, + field: keyof QuotationItem, + e: React.ChangeEvent<HTMLInputElement> + ) => { + const value = e.target.value === '' ? 0 : parseFloat(e.target.value) + handleItemUpdate(index, field, value) + } + + const handleTextInputChange = ( + index: number, + field: keyof QuotationItem, + e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> + ) => { + handleItemUpdate(index, field, e.target.value) + } + + const handleDateChange = ( + index: number, + field: keyof QuotationItem, + date: Date | undefined + ) => { + handleItemUpdate(index, field, date || null) + } + + const handleCheckboxChange = ( + index: number, + field: keyof QuotationItem, + checked: boolean + ) => { + handleItemUpdate(index, field, checked) + } + + // 날짜 형식 지정 + const formatDeliveryDate = (date: Date | null) => { + if (!date) return "-" + return format(date, "yyyy-MM-dd") + } + + // 입력 폼 필드 렌더링 + const renderInputField = (item: QuotationItem, index: number, field: keyof QuotationItem) => { + if (field === 'unitPrice' || field === 'taxRate' || field === 'discountRate' || field === 'leadTimeInDays') { + return ( + <Input + type="number" + min={0} + step={field === 'unitPrice' ? 0.01 : field === 'taxRate' || field === 'discountRate' ? 0.1 : 1} + value={item[field] as number || 0} + onChange={(e) => handleNumberInputChange(index, field, e)} + onBlur={(e) => handleBlur(index, field, parseFloat(e.target.value) || 0)} + disabled={disabled || isSaving} + className="w-full" + /> + ) + } else if (field === 'vendorMaterialCode' || field === 'vendorMaterialDescription') { + return ( + <Input + type="text" + value={item[field] as string || ''} + onChange={(e) => handleTextInputChange(index, field, e)} + onBlur={(e) => handleBlur(index, field, e.target.value)} + disabled={disabled || isSaving || !item.isAlternative} + className="w-full" + placeholder={field === 'vendorMaterialCode' ? "벤더 자재코드" : "벤더 자재명"} + /> + ) + } else if (field === 'deliveryDate') { + return ( + <DatePicker + date={item.deliveryDate ? new Date(item.deliveryDate) : undefined} + onSelect={(date) => { + handleDateChange(index, field, date); + // DatePicker는 blur 이벤트가 없으므로 즉시 저장 트리거 + if (date) handleBlur(index, field, date); + }} + disabled={disabled || isSaving} + /> + ) + } else if (field === 'isAlternative') { + return ( + <div className="flex items-center gap-1"> + <Checkbox + checked={item.isAlternative} + onCheckedChange={(checked) => { + handleCheckboxChange(index, field, checked as boolean); + handleBlur(index, field, checked as boolean); + }} + disabled={disabled || isSaving} + /> + <span className="text-xs">대체품</span> + </div> + ) + } + + return null + } + + // 대체품 필드 렌더링 + const renderAlternativeFields = (item: QuotationItem, index: number) => { + if (!item.isAlternative) return null; + + return ( + <div className="mt-2 p-3 bg-blue-50 rounded-md space-y-2 text-sm"> + {/* <div className="flex flex-col gap-2"> + <label className="text-xs font-medium text-blue-700">벤더 자재코드</label> + <Input + value={item.vendorMaterialCode || ""} + onChange={(e) => handleTextInputChange(index, 'vendorMaterialCode', e)} + onBlur={(e) => handleBlur(index, 'vendorMaterialCode', e.target.value)} + disabled={disabled || isSaving} + className="h-8 text-sm" + placeholder="벤더 자재코드 입력" + /> + </div> */} + + <div className="flex flex-col gap-2"> + <label className="text-xs font-medium text-blue-700">벤더 자재명</label> + <Input + value={item.vendorMaterialDescription || ""} + onChange={(e) => handleTextInputChange(index, 'vendorMaterialDescription', e)} + onBlur={(e) => handleBlur(index, 'vendorMaterialDescription', e.target.value)} + disabled={disabled || isSaving} + className="h-8 text-sm" + placeholder="벤더 자재명 입력" + /> + </div> + + <div className="flex flex-col gap-2"> + <label className="text-xs font-medium text-blue-700">대체품 설명</label> + <Textarea + value={item.remark || ""} + onChange={(e) => handleTextInputChange(index, 'remark', e)} + onBlur={(e) => handleBlur(index, 'remark', e.target.value)} + disabled={disabled || isSaving} + className="min-h-[60px] text-sm" + placeholder="원본과의 차이점, 대체 사유, 장점 등을 설명해주세요" + /> + </div> + </div> + ); + }; + + // 항목의 저장 상태 아이콘 표시 + const renderSaveStatus = (itemId: number) => { + if (pendingChanges.has(itemId)) { + return ( + <TooltipProvider> + <Tooltip> + <TooltipTrigger> + <RefreshCw className="h-4 w-4 text-yellow-500 animate-spin" /> + </TooltipTrigger> + <TooltipContent> + <p>저장되지 않은 변경 사항이 있습니다</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + ) + } + + return null + } + + return ( + <div className="space-y-4"> + <div className="flex justify-between items-center"> + <div className="flex items-center gap-2"> + <h3 className="text-lg font-medium">항목 목록 ({items.length}개)</h3> + {pendingChanges.size > 0 && ( + <Badge variant="outline" className="bg-yellow-50"> + 변경 {pendingChanges.size}개 + </Badge> + )} + </div> + + <div className="flex items-center gap-2"> + {pendingChanges.size > 0 && !disabled && ( + <Button + variant="default" + size="sm" + onClick={saveAllChanges} + disabled={isSaving} + > + {isSaving ? ( + <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> + ) : ( + <Save className="h-4 w-4 mr-2" /> + )} + 변경사항 저장 ({pendingChanges.size}개) + </Button> + )} + + {!disabled && ( + <Button + variant="outline" + size="sm" + onClick={handleBulkUnitPriceUpdate} + disabled={items.length === 0 || isSaving} + > + 첫 항목 단가로 일괄 적용 + </Button> + )} + </div> + </div> + + <ScrollArea className="h-[500px] rounded-md border"> + <Table> + <TableHeader className="sticky top-0 bg-background"> + <TableRow> + <TableHead className="w-[50px]">번호</TableHead> + <TableHead>자재코드</TableHead> + <TableHead>자재명</TableHead> + <TableHead>수량</TableHead> + <TableHead>단위</TableHead> + <TableHead>단가</TableHead> + <TableHead>금액</TableHead> + <TableHead> + <div className="flex items-center gap-1"> + 세율(%) + <TooltipProvider> + <Tooltip> + <TooltipTrigger> + <Info className="h-4 w-4" /> + </TooltipTrigger> + <TooltipContent> + <p>세율을 입력하면 자동으로 세액이 계산됩니다.</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + </TableHead> + <TableHead> + <div className="flex items-center gap-1"> + 납품일 + <TooltipProvider> + <Tooltip> + <TooltipTrigger> + <Info className="h-4 w-4" /> + </TooltipTrigger> + <TooltipContent> + <p>납품 가능한 날짜를 선택해주세요.</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + </TableHead> + <TableHead>리드타임(일)</TableHead> + <TableHead> + <div className="flex items-center gap-1"> + 대체품 + <TooltipProvider> + <Tooltip> + <TooltipTrigger> + <Info className="h-4 w-4" /> + </TooltipTrigger> + <TooltipContent> + <p>요청된 제품의 대체품을 제안할 경우 선택하세요.</p> + <p>대체품을 선택하면 추가 정보를 입력할 수 있습니다.</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + </TableHead> + <TableHead className="w-[50px]">상태</TableHead> + </TableRow> + </TableHeader> + <TableBody> + {items.length === 0 ? ( + <TableRow> + <TableCell colSpan={12} className="text-center py-10"> + 견적 항목이 없습니다 + </TableCell> + </TableRow> + ) : ( + items.map((item, index) => ( + <React.Fragment key={item.id}> + <TableRow className={pendingChanges.has(item.id) ? "bg-yellow-50/30" : ""}> + <TableCell> + {index + 1} + </TableCell> + <TableCell> + {item.materialCode || "-"} + </TableCell> + <TableCell> + <div className="font-medium max-w-xs truncate"> + {item.materialDescription || "-"} + </div> + </TableCell> + <TableCell> + {item.quantity} + </TableCell> + <TableCell> + {item.uom || "-"} + </TableCell> + <TableCell> + {renderInputField(item, index, 'unitPrice')} + </TableCell> + <TableCell> + {formatCurrency(item.totalPrice, currency)} + </TableCell> + <TableCell> + {renderInputField(item, index, 'taxRate')} + </TableCell> + <TableCell> + {renderInputField(item, index, 'deliveryDate')} + </TableCell> + <TableCell> + {renderInputField(item, index, 'leadTimeInDays')} + </TableCell> + <TableCell> + {renderInputField(item, index, 'isAlternative')} + </TableCell> + <TableCell> + {renderSaveStatus(item.id)} + </TableCell> + </TableRow> + + {/* 대체품으로 선택된 경우 추가 정보 행 표시 */} + {item.isAlternative && ( + <TableRow className={pendingChanges.has(item.id) ? "bg-blue-50/40" : "bg-blue-50/20"}> + <TableCell colSpan={1}></TableCell> + <TableCell colSpan={10}> + {renderAlternativeFields(item, index)} + </TableCell> + <TableCell colSpan={1}></TableCell> + </TableRow> + )} + </React.Fragment> + )) + )} + </TableBody> + </Table> + </ScrollArea> + + {isSaving && ( + <div className="flex items-center justify-center text-sm text-muted-foreground"> + <Clock className="h-4 w-4 animate-spin mr-2" /> + 변경 사항을 저장 중입니다... + </div> + )} + + <div className="bg-muted p-4 rounded-md"> + <h4 className="text-sm font-medium mb-2">안내 사항</h4> + <ul className="text-sm space-y-1 text-muted-foreground"> + <li className="flex items-start gap-2"> + <AlertTriangle className="h-4 w-4 mt-0.5 flex-shrink-0" /> + <span>단가와 납품일은 필수로 입력해야 합니다.</span> + </li> + <li className="flex items-start gap-2"> + <ClipboardCheck className="h-4 w-4 mt-0.5 flex-shrink-0" /> + <span>입력 후 다른 필드로 이동하면 자동으로 저장됩니다. 여러 항목을 변경한 후 '저장' 버튼을 사용할 수도 있습니다.</span> + </li> + <li className="flex items-start gap-2"> + <FileText className="h-4 w-4 mt-0.5 flex-shrink-0" /> + <span><strong>대체품</strong>으로 제안하는 경우 자재명, 대체품 설명을 입력해주세요.</span> + </li> + </ul> + </div> + </div> + ) +}
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/table/vendor-quotations-table-columns.tsx b/lib/techsales-rfq/vendor-response/table/vendor-quotations-table-columns.tsx new file mode 100644 index 00000000..5c6971cc --- /dev/null +++ b/lib/techsales-rfq/vendor-response/table/vendor-quotations-table-columns.tsx @@ -0,0 +1,365 @@ +"use client" + +import * as React from "react" +import { type ColumnDef } from "@tanstack/react-table" +import { Edit } from "lucide-react" +import { formatCurrency, formatDate, formatDateTime } from "@/lib/utils" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Checkbox } from "@/components/ui/checkbox" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip" +import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header" +import { + TechSalesVendorQuotations, + TECH_SALES_QUOTATION_STATUS_CONFIG +} from "@/db/schema" +import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime" + +interface QuotationWithRfqCode extends TechSalesVendorQuotations { + rfqCode?: string; + materialCode?: string; + dueDate?: Date; + rfqStatus?: string; + itemName?: string; + projNm?: string; + quotationCode?: string | null; + quotationVersion?: number | null; + rejectionReason?: string | null; + acceptedAt?: Date | null; +} + +interface GetColumnsProps { + router: AppRouterInstance; +} + +export function getColumns({ router }: GetColumnsProps): ColumnDef<QuotationWithRfqCode>[] { + return [ + { + id: "select", + header: ({ table }) => ( + <Checkbox + checked={ + table.getIsAllPageRowsSelected() || + (table.getIsSomePageRowsSelected() && "indeterminate") + } + onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} + aria-label="모두 선택" + className="translate-y-0.5" + /> + ), + cell: ({ row }) => ( + <Checkbox + checked={row.getIsSelected()} + onCheckedChange={(value) => row.toggleSelected(!!value)} + aria-label="행 선택" + className="translate-y-0.5" + /> + ), + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "id", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="ID" /> + ), + cell: ({ row }) => ( + <div className="w-20"> + <span className="font-mono text-xs">{row.getValue("id")}</span> + </div> + ), + enableSorting: true, + enableHiding: true, + }, + { + accessorKey: "rfqCode", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="RFQ 번호" /> + ), + cell: ({ row }) => { + const rfqCode = row.getValue("rfqCode") as string; + return ( + <div className="min-w-32"> + <span className="font-mono text-sm">{rfqCode || "N/A"}</span> + </div> + ); + }, + enableSorting: true, + enableHiding: false, + }, + { + accessorKey: "materialCode", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="자재 코드" /> + ), + cell: ({ row }) => { + const materialCode = row.getValue("materialCode") as string; + return ( + <div className="min-w-32"> + <span className="font-mono text-sm">{materialCode || "N/A"}</span> + </div> + ); + }, + enableSorting: true, + enableHiding: true, + }, + { + accessorKey: "itemName", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="품목명" /> + ), + cell: ({ row }) => { + const itemName = row.getValue("itemName") as string; + return ( + <div className="min-w-48 max-w-64"> + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <span className="truncate block text-sm"> + {itemName || "N/A"} + </span> + </TooltipTrigger> + <TooltipContent> + <p className="max-w-xs">{itemName || "N/A"}</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + ); + }, + enableSorting: false, + enableHiding: true, + }, + { + accessorKey: "projNm", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="프로젝트명" /> + ), + cell: ({ row }) => { + const projNm = row.getValue("projNm") as string; + return ( + <div className="min-w-48 max-w-64"> + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <span className="truncate block text-sm"> + {projNm || "N/A"} + </span> + </TooltipTrigger> + <TooltipContent> + <p className="max-w-xs">{projNm || "N/A"}</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + ); + }, + enableSorting: false, + enableHiding: true, + }, + { + accessorKey: "status", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="상태" /> + ), + cell: ({ row }) => { + const status = row.getValue("status") as string; + + const statusConfig = TECH_SALES_QUOTATION_STATUS_CONFIG[status as keyof typeof TECH_SALES_QUOTATION_STATUS_CONFIG] || { + label: status, + variant: "secondary" as const + }; + + return ( + <div className="w-24"> + <Badge variant={statusConfig.variant} className="text-xs"> + {statusConfig.label} + </Badge> + </div> + ); + }, + enableSorting: true, + enableHiding: false, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)); + }, + }, + { + accessorKey: "currency", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="통화" /> + ), + cell: ({ row }) => { + const currency = row.getValue("currency") as string; + return ( + <div className="w-16"> + <span className="font-mono text-sm">{currency || "N/A"}</span> + </div> + ); + }, + enableSorting: true, + enableHiding: true, + }, + { + accessorKey: "totalPrice", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="총액" /> + ), + cell: ({ row }) => { + const totalPrice = row.getValue("totalPrice") as string; + const currency = row.getValue("currency") as string; + + if (!totalPrice || totalPrice === "0") { + return ( + <div className="w-32 text-right"> + <span className="text-muted-foreground text-sm">미입력</span> + </div> + ); + } + + return ( + <div className="w-32 text-right"> + <span className="font-mono text-sm"> + {formatCurrency(parseFloat(totalPrice), currency || "USD")} + </span> + </div> + ); + }, + enableSorting: true, + enableHiding: true, + }, + { + accessorKey: "validUntil", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="유효기간" /> + ), + cell: ({ row }) => { + const validUntil = row.getValue("validUntil") as Date; + return ( + <div className="w-28"> + <span className="text-sm"> + {validUntil ? formatDate(validUntil) : "N/A"} + </span> + </div> + ); + }, + enableSorting: true, + enableHiding: true, + }, + { + accessorKey: "submittedAt", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="제출일" /> + ), + cell: ({ row }) => { + const submittedAt = row.getValue("submittedAt") as Date; + return ( + <div className="w-36"> + <span className="text-sm"> + {submittedAt ? formatDateTime(submittedAt) : "미제출"} + </span> + </div> + ); + }, + enableSorting: true, + enableHiding: true, + }, + { + accessorKey: "dueDate", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="마감일" /> + ), + cell: ({ row }) => { + const dueDate = row.getValue("dueDate") as Date; + const isOverdue = dueDate && new Date() > new Date(dueDate); + + return ( + <div className="w-28"> + <span className={`text-sm ${isOverdue ? "text-red-600 font-medium" : ""}`}> + {dueDate ? formatDate(dueDate) : "N/A"} + </span> + </div> + ); + }, + enableSorting: true, + enableHiding: true, + }, + { + accessorKey: "createdAt", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="생성일" /> + ), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as Date; + return ( + <div className="w-36"> + <span className="text-sm"> + {createdAt ? formatDateTime(createdAt) : "N/A"} + </span> + </div> + ); + }, + enableSorting: true, + enableHiding: true, + }, + { + accessorKey: "updatedAt", + header: ({ column }) => ( + <DataTableColumnHeader column={column} title="수정일" /> + ), + cell: ({ row }) => { + const updatedAt = row.getValue("updatedAt") as Date; + return ( + <div className="w-36"> + <span className="text-sm"> + {updatedAt ? formatDateTime(updatedAt) : "N/A"} + </span> + </div> + ); + }, + enableSorting: true, + enableHiding: true, + }, + { + id: "actions", + header: "작업", + cell: ({ row }) => { + const quotation = row.original; + const rfqCode = quotation.rfqCode || "N/A"; + const tooltipText = `${rfqCode} 견적서 작성`; + + return ( + <div className="w-16"> + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="icon" + onClick={() => { + router.push(`/ko/partners/techsales/rfq-ship/${quotation.id}`); + }} + className="h-8 w-8" + > + <Edit className="h-4 w-4" /> + <span className="sr-only">견적서 작성</span> + </Button> + </TooltipTrigger> + <TooltipContent> + <p>{tooltipText}</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + ); + }, + enableSorting: false, + enableHiding: false, + }, + ]; +}
\ No newline at end of file diff --git a/lib/techsales-rfq/vendor-response/table/vendor-quotations-table.tsx b/lib/techsales-rfq/vendor-response/table/vendor-quotations-table.tsx new file mode 100644 index 00000000..63d4674b --- /dev/null +++ b/lib/techsales-rfq/vendor-response/table/vendor-quotations-table.tsx @@ -0,0 +1,143 @@ +// lib/techsales-rfq/vendor-response/table/vendor-quotations-table.tsx +"use client" + +import * as React from "react" +import { type DataTableAdvancedFilterField, type DataTableFilterField } from "@/types/table" +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 { TechSalesVendorQuotations, TECH_SALES_QUOTATION_STATUSES, TECH_SALES_QUOTATION_STATUS_CONFIG } from "@/db/schema" +import { useRouter } from "next/navigation" +import { getColumns } from "./vendor-quotations-table-columns" + +interface QuotationWithRfqCode extends TechSalesVendorQuotations { + rfqCode?: string; + materialCode?: string; + dueDate?: Date; + rfqStatus?: string; + itemName?: string; + projNm?: string; + quotationCode?: string | null; + quotationVersion?: number | null; + rejectionReason?: string | null; + acceptedAt?: Date | null; +} + +interface VendorQuotationsTableProps { + promises: Promise<[{ data: any[], pageCount: number, total?: number }]>; +} + +export function VendorQuotationsTable({ promises }: VendorQuotationsTableProps) { + + // TODO: 안정화 이후 삭제 + console.log("렌더링 사이클 점검용 로그: VendorQuotationsTable 렌더링됨"); + + const [{ data, pageCount }] = React.use(promises); + const router = useRouter(); + + // 데이터 안정성을 위한 메모이제이션 - 핵심 속성만 비교 + const stableData = React.useMemo(() => { + return data; + }, [data.length, data.map(item => `${item.id}-${item.status}-${item.updatedAt}`).join(',')]); + + // 테이블 컬럼 정의 - router는 안정적이므로 한 번만 생성 + const columns = React.useMemo(() => getColumns({ + router, + }), [router]); + + // 필터 필드 - 중앙화된 상태 상수 사용 + const filterFields = React.useMemo<DataTableFilterField<QuotationWithRfqCode>[]>(() => [ + { + id: "status", + label: "상태", + options: Object.entries(TECH_SALES_QUOTATION_STATUSES).map(([, statusValue]) => ({ + label: TECH_SALES_QUOTATION_STATUS_CONFIG[statusValue].label, + value: statusValue, + })) + }, + { + id: "rfqCode", + label: "RFQ 번호", + placeholder: "RFQ 번호 검색...", + }, + { + id: "materialCode", + label: "자재 코드", + placeholder: "자재 코드 검색...", + } + ], []); + + // 고급 필터 필드 - 중앙화된 상태 상수 사용 + const advancedFilterFields = React.useMemo<DataTableAdvancedFilterField<QuotationWithRfqCode>[]>(() => [ + { + id: "rfqCode", + label: "RFQ 번호", + type: "text", + }, + { + id: "materialCode", + label: "자재 코드", + type: "text", + }, + { + id: "status", + label: "상태", + type: "multi-select", + options: Object.entries(TECH_SALES_QUOTATION_STATUSES).map(([, statusValue]) => ({ + label: TECH_SALES_QUOTATION_STATUS_CONFIG[statusValue].label, + value: statusValue, + })), + }, + { + id: "validUntil", + label: "유효기간", + type: "date", + }, + { + id: "submittedAt", + label: "제출일", + type: "date", + }, + ], []); + + // useDataTable 훅 사용 + const { table } = useDataTable({ + data: stableData, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + enableColumnResizing: true, + columnResizeMode: 'onChange', + initialState: { + sorting: [{ id: "updatedAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + defaultColumn: { + minSize: 50, + maxSize: 500, + }, + }); + + return ( + <div className="w-full"> + <div className="overflow-x-auto"> + <DataTable + table={table} + className="min-w-full" + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + </DataTableAdvancedToolbar> + </DataTable> + </div> + </div> + ); +}
\ No newline at end of file diff --git a/lib/utils.ts b/lib/utils.ts index c7015638..c09589d5 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -149,4 +149,37 @@ export function formatCurrency( // minimumFractionDigits: 0, // maximumFractionDigits: 2, }).format(value) +} + +/** + * YYYYMMDD 형태의 날짜를 YYYY nQ 형태의 분기로 변환 + * @param dateString YYYYMMDD 형태의 문자열 (예: "20240315") + * @returns YYYY nQ 형태의 문자열 (예: "2024 1Q") + */ +export function formatDateToQuarter(dateString: string | null | undefined): string { + if (!dateString) return "-" + + // YYYYMMDD 형태인지 확인 + if (typeof dateString !== 'string' || dateString.length !== 8) { + return "-" + } + + const year = dateString.substring(0, 4) + const month = parseInt(dateString.substring(4, 6), 10) + + // 월을 분기로 변환 + let quarter: number + if (month >= 1 && month <= 3) { + quarter = 1 + } else if (month >= 4 && month <= 6) { + quarter = 2 + } else if (month >= 7 && month <= 9) { + quarter = 3 + } else if (month >= 10 && month <= 12) { + quarter = 4 + } else { + return "-" // 잘못된 월 + } + + return `${year} ${quarter}Q` }
\ No newline at end of file diff --git a/lib/vendors/service.ts b/lib/vendors/service.ts index c9ee55be..16f57b57 100644 --- a/lib/vendors/service.ts +++ b/lib/vendors/service.ts @@ -2131,4 +2131,46 @@ export async function exportVendorDetails(vendorIds: number[]) { console.error("Failed to export vendor details:", error); return []; } +} + +/** + * 벤더 검색 (검색어 기반, 최대 100개) + * RFQ 벤더 추가 시 사용 + */ +export async function searchVendors(searchTerm: string = "", limit: number = 100) { + try { + let whereCondition; + + if (searchTerm.trim()) { + const s = `%${searchTerm.trim()}%`; + whereCondition = or( + ilike(vendorsWithTypesView.vendorName, s), + ilike(vendorsWithTypesView.vendorCode, s) + ); + } + + const vendors = await db + .select({ + id: vendorsWithTypesView.id, + vendorName: vendorsWithTypesView.vendorName, + vendorCode: vendorsWithTypesView.vendorCode, + status: vendorsWithTypesView.status, + country: vendorsWithTypesView.country, + }) + .from(vendorsWithTypesView) + .where( + and( + whereCondition, + // ACTIVE 상태인 벤더만 검색 + // eq(vendorsWithTypesView.status, "ACTIVE"), + ) + ) + .orderBy(asc(vendorsWithTypesView.vendorName)) + .limit(limit); + + return vendors; + } catch (error) { + console.error("벤더 검색 오류:", error); + return []; + } }
\ No newline at end of file |