401 lines
13 KiB
TypeScript
401 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { DashboardElement } from "@/components/admin/dashboard/types";
|
||
|
||
interface StatusSummaryWidgetProps {
|
||
element: DashboardElement;
|
||
title?: string;
|
||
icon?: string;
|
||
bgGradient?: string;
|
||
statusConfig?: StatusConfig;
|
||
}
|
||
|
||
interface StatusConfig {
|
||
[key: string]: {
|
||
label: string;
|
||
color: "blue" | "green" | "red" | "yellow" | "orange" | "purple" | "gray";
|
||
};
|
||
}
|
||
|
||
// 영어 상태명 → 한글 자동 변환
|
||
const statusTranslations: { [key: string]: string } = {
|
||
// 배송 관련
|
||
"delayed": "지연",
|
||
"pickup_waiting": "픽업 대기",
|
||
"in_transit": "배송 중",
|
||
"delivered": "배송완료",
|
||
"pending": "대기중",
|
||
"processing": "처리중",
|
||
"completed": "완료",
|
||
"cancelled": "취소됨",
|
||
"failed": "실패",
|
||
|
||
// 일반 상태
|
||
"active": "활성",
|
||
"inactive": "비활성",
|
||
"enabled": "사용중",
|
||
"disabled": "사용안함",
|
||
"online": "온라인",
|
||
"offline": "오프라인",
|
||
"available": "사용가능",
|
||
"unavailable": "사용불가",
|
||
|
||
// 승인 관련
|
||
"approved": "승인됨",
|
||
"rejected": "거절됨",
|
||
"waiting": "대기중",
|
||
|
||
// 차량 관련
|
||
"driving": "운행중",
|
||
"parked": "주차",
|
||
"maintenance": "정비중",
|
||
|
||
// 기사 관련 (존중하는 표현)
|
||
"waiting": "대기중",
|
||
"resting": "휴식중",
|
||
"unavailable": "운행불가",
|
||
|
||
// 기사 평가
|
||
"excellent": "우수",
|
||
"good": "양호",
|
||
"average": "보통",
|
||
"poor": "미흡",
|
||
|
||
// 기사 경력
|
||
"veteran": "베테랑",
|
||
"experienced": "숙련",
|
||
"intermediate": "중급",
|
||
"beginner": "초급",
|
||
};
|
||
|
||
// 영어 테이블명 → 한글 자동 변환
|
||
const tableTranslations: { [key: string]: string } = {
|
||
// 배송/물류 관련
|
||
"deliveries": "배송",
|
||
"delivery": "배송",
|
||
"shipments": "출하",
|
||
"shipment": "출하",
|
||
"orders": "주문",
|
||
"order": "주문",
|
||
"cargo": "화물",
|
||
"cargos": "화물",
|
||
"packages": "소포",
|
||
"package": "소포",
|
||
|
||
// 차량 관련
|
||
"vehicles": "차량",
|
||
"vehicle": "차량",
|
||
"vehicle_locations": "차량위치",
|
||
"vehicle_status": "차량상태",
|
||
"drivers": "기사",
|
||
"driver": "기사",
|
||
|
||
// 사용자/고객 관련
|
||
"users": "사용자",
|
||
"user": "사용자",
|
||
"customers": "고객",
|
||
"customer": "고객",
|
||
"members": "회원",
|
||
"member": "회원",
|
||
|
||
// 제품/재고 관련
|
||
"products": "제품",
|
||
"product": "제품",
|
||
"items": "항목",
|
||
"item": "항목",
|
||
"inventory": "재고",
|
||
"stock": "재고",
|
||
|
||
// 업무 관련
|
||
"tasks": "작업",
|
||
"task": "작업",
|
||
"projects": "프로젝트",
|
||
"project": "프로젝트",
|
||
"issues": "이슈",
|
||
"issue": "이슈",
|
||
"tickets": "티켓",
|
||
"ticket": "티켓",
|
||
|
||
// 기타
|
||
"logs": "로그",
|
||
"log": "로그",
|
||
"reports": "리포트",
|
||
"report": "리포트",
|
||
"alerts": "알림",
|
||
"alert": "알림",
|
||
};
|
||
|
||
interface StatusData {
|
||
status: string;
|
||
count: number;
|
||
}
|
||
|
||
/**
|
||
* 범용 상태 요약 위젯
|
||
* - 쿼리 결과를 상태별로 카운트해서 카드로 표시
|
||
* - 색상과 라벨은 statusConfig로 커스터마이징 가능
|
||
*/
|
||
export default function StatusSummaryWidget({
|
||
element,
|
||
title = "상태 요약",
|
||
icon = "📊",
|
||
bgGradient = "from-slate-50 to-blue-50",
|
||
statusConfig
|
||
}: StatusSummaryWidgetProps) {
|
||
const [statusData, setStatusData] = useState<StatusData[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [tableName, setTableName] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
|
||
// 자동 새로고침 (30초마다)
|
||
const interval = setInterval(loadData, 30000);
|
||
return () => clearInterval(interval);
|
||
}, [element]);
|
||
|
||
const loadData = async () => {
|
||
if (!element?.dataSource?.query) {
|
||
// 쿼리가 없으면 에러가 아니라 초기 상태로 처리
|
||
setError(null);
|
||
setLoading(false);
|
||
setTableName(null);
|
||
return;
|
||
}
|
||
|
||
// 쿼리에서 테이블 이름 추출
|
||
const extractTableName = (query: string): string | null => {
|
||
const fromMatch = query.match(/FROM\s+([a-zA-Z0-9_가-힣]+)/i);
|
||
if (fromMatch) {
|
||
return fromMatch[1];
|
||
}
|
||
return null;
|
||
};
|
||
|
||
try {
|
||
setLoading(true);
|
||
const extractedTableName = extractTableName(element.dataSource.query);
|
||
setTableName(extractedTableName);
|
||
|
||
const token = localStorage.getItem("authToken");
|
||
const response = await fetch("/api/dashboards/execute-query", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
body: JSON.stringify({
|
||
query: element.dataSource.query,
|
||
connectionType: element.dataSource.connectionType || "current",
|
||
connectionId: element.dataSource.connectionId,
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) throw new Error("데이터 로딩 실패");
|
||
|
||
const result = await response.json();
|
||
|
||
// 데이터 처리
|
||
if (result.success && result.data?.rows) {
|
||
const rows = result.data.rows;
|
||
|
||
// 상태별 카운트 계산
|
||
const statusCounts: { [key: string]: number } = {};
|
||
|
||
// GROUP BY 형식인지 확인
|
||
const isGroupedData = rows.length > 0 && rows[0].count !== undefined;
|
||
|
||
if (isGroupedData) {
|
||
// GROUP BY 형식: SELECT status, COUNT(*) as count
|
||
rows.forEach((row: any) => {
|
||
// 다양한 컬럼명 지원 (status, 상태, state 등)
|
||
let status = row.status || row.상태 || row.state || row.STATUS || row.label || row.name || "알 수 없음";
|
||
// 영어 → 한글 자동 번역
|
||
status = statusTranslations[status] || statusTranslations[status.toLowerCase()] || status;
|
||
const count = parseInt(row.count || row.개수 || row.COUNT || row.cnt) || 0;
|
||
statusCounts[status] = count;
|
||
});
|
||
} else {
|
||
// SELECT * 형식: 전체 데이터를 가져와서 카운트
|
||
rows.forEach((row: any) => {
|
||
// 다양한 컬럼명 지원
|
||
let status = row.status || row.상태 || row.state || row.STATUS || row.label || row.name || "알 수 없음";
|
||
// 영어 → 한글 자동 번역
|
||
status = statusTranslations[status] || statusTranslations[status.toLowerCase()] || status;
|
||
statusCounts[status] = (statusCounts[status] || 0) + 1;
|
||
});
|
||
}
|
||
|
||
// statusConfig가 있으면 해당 순서대로, 없으면 전체 표시
|
||
let formattedData: StatusData[];
|
||
if (statusConfig) {
|
||
formattedData = Object.keys(statusConfig).map((key) => ({
|
||
status: statusConfig[key].label,
|
||
count: statusCounts[key] || 0,
|
||
}));
|
||
} else {
|
||
formattedData = Object.entries(statusCounts).map(([status, count]) => ({
|
||
status,
|
||
count,
|
||
}));
|
||
}
|
||
|
||
setStatusData(formattedData);
|
||
}
|
||
|
||
setError(null);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : "데이터 로딩 실패");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const getColorClasses = (status: string) => {
|
||
// statusConfig에서 색상 찾기
|
||
let color: string = "gray";
|
||
if (statusConfig) {
|
||
const configEntry = Object.entries(statusConfig).find(([_, v]) => v.label === status);
|
||
if (configEntry) {
|
||
color = configEntry[1].color;
|
||
}
|
||
}
|
||
|
||
const colorMap = {
|
||
blue: { border: "border-blue-500", dot: "bg-blue-500", text: "text-blue-600" },
|
||
green: { border: "border-green-500", dot: "bg-green-500", text: "text-green-600" },
|
||
red: { border: "border-red-500", dot: "bg-red-500", text: "text-red-600" },
|
||
yellow: { border: "border-yellow-500", dot: "bg-yellow-500", text: "text-yellow-600" },
|
||
orange: { border: "border-orange-500", dot: "bg-orange-500", text: "text-orange-600" },
|
||
purple: { border: "border-purple-500", dot: "bg-purple-500", text: "text-purple-600" },
|
||
gray: { border: "border-gray-500", dot: "bg-gray-500", text: "text-gray-600" },
|
||
};
|
||
|
||
return colorMap[color as keyof typeof colorMap] || colorMap.gray;
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex h-full items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="border-primary mx-auto h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
|
||
<p className="mt-2 text-sm text-gray-500">데이터 로딩 중...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex h-full items-center justify-center">
|
||
<div className="text-center text-red-500">
|
||
<p className="text-sm">⚠️ {error}</p>
|
||
<button
|
||
onClick={loadData}
|
||
className="mt-2 rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200"
|
||
>
|
||
다시 시도
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!element?.dataSource?.query) {
|
||
return (
|
||
<div className="flex h-full items-center justify-center p-3">
|
||
<div className="max-w-xs space-y-2 text-center">
|
||
<div className="text-3xl">{icon}</div>
|
||
<h3 className="text-sm font-bold text-gray-900">{title}</h3>
|
||
<div className="space-y-1.5 text-xs text-gray-600">
|
||
<p className="font-medium">📊 상태별 데이터 집계 위젯</p>
|
||
<ul className="space-y-0.5 text-left">
|
||
<li>• SQL 쿼리로 데이터를 불러옵니다</li>
|
||
<li>• 상태별로 자동 집계하여 카드로 표시</li>
|
||
<li>• 실시간 데이터 모니터링 가능</li>
|
||
<li>• 색상과 라벨 커스터마이징 지원</li>
|
||
</ul>
|
||
</div>
|
||
<div className="mt-2 rounded-lg bg-blue-50 p-2 text-[10px] text-blue-700">
|
||
<p className="font-medium">⚙️ 설정 방법</p>
|
||
<p className="mt-0.5">우측 상단 톱니바퀴 버튼을 클릭하여</p>
|
||
<p>SQL 쿼리를 입력하고 저장하세요</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const totalCount = statusData.reduce((sum, item) => sum + item.count, 0);
|
||
|
||
// 테이블 이름이 있으면 제목을 테이블 이름으로 변경
|
||
const translateTableName = (name: string): string => {
|
||
// 정확한 매칭 시도
|
||
if (tableTranslations[name]) {
|
||
return tableTranslations[name];
|
||
}
|
||
// 소문자로 변환하여 매칭 시도
|
||
if (tableTranslations[name.toLowerCase()]) {
|
||
return tableTranslations[name.toLowerCase()];
|
||
}
|
||
// 언더스코어 제거하고 매칭 시도
|
||
const nameWithoutUnderscore = name.replace(/_/g, '');
|
||
if (tableTranslations[nameWithoutUnderscore.toLowerCase()]) {
|
||
return tableTranslations[nameWithoutUnderscore.toLowerCase()];
|
||
}
|
||
// 번역이 없으면 원본 반환
|
||
return name;
|
||
};
|
||
|
||
// customTitle이 있으면 사용, 없으면 테이블명으로 자동 생성
|
||
const displayTitle = element.customTitle || (tableName ? `${translateTableName(tableName)} 현황` : title);
|
||
|
||
return (
|
||
<div className={`flex h-full w-full flex-col overflow-hidden bg-gradient-to-br ${bgGradient} p-2`}>
|
||
{/* 헤더 */}
|
||
<div className="mb-2 flex flex-shrink-0 items-center justify-between">
|
||
<div className="flex-1">
|
||
<h3 className="text-sm font-bold text-gray-900">{icon} {displayTitle}</h3>
|
||
{totalCount > 0 ? (
|
||
<p className="text-xs text-gray-500">총 {totalCount.toLocaleString()}건</p>
|
||
) : (
|
||
<p className="text-xs text-orange-500">⚙️ 데이터 연결 필요</p>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={loadData}
|
||
className="flex h-7 w-7 items-center justify-center rounded border border-border bg-white p-0 text-xs hover:bg-accent disabled:opacity-50"
|
||
disabled={loading}
|
||
>
|
||
{loading ? "⏳" : "🔄"}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 스크롤 가능한 콘텐츠 영역 */}
|
||
<div className="flex-1 overflow-y-auto">
|
||
{/* 상태별 카드 */}
|
||
<div className="grid grid-cols-2 gap-1.5">
|
||
{statusData.map((item) => {
|
||
const colors = getColorClasses(item.status);
|
||
return (
|
||
<div
|
||
key={item.status}
|
||
className="rounded border border-gray-200 bg-white p-1.5 shadow-sm"
|
||
>
|
||
<div className="mb-0.5 flex items-center gap-1">
|
||
<div className={`h-1.5 w-1.5 rounded-full ${colors.dot}`}></div>
|
||
<div className="text-xs font-medium text-gray-600">{item.status}</div>
|
||
</div>
|
||
<div className={`text-lg font-bold ${colors.text}`}>{item.count.toLocaleString()}</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|