[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Dashboard with shadcn/ui *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/erose138-2868s-projects/v0-dashboard-with-shadcn-ui) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/iYBnE4LCcSd) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/erose138-2868s-projects/v0-dashboard-with-shadcn-ui](https://vercel.com/erose138-2868s-projects/v0-dashboard-with-shadcn-ui)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/iYBnE4LCcSd](https://v0.app/chat/projects/iYBnE4LCcSd)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/analysis/components/business-impact-tab.tsx" "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { ChartContainer, ChartTooltip } from "@/components/ui/chart"; import { Zap, Battery, Car, ArrowUp, TrendingUp } from "lucide-react"; import { ResponsiveContainer, BarChart, Bar, CartesianGrid, XAxis, YAxis, LabelList } from "recharts"; import { useState, useEffect } from "react"; interface RepairItem { item: string; revenue: number; pct: number; } interface VehicleTypeRevenue { type: string; customers: number; revenue: number; avgSpend: number; } interface OperationalData { metric: string; current: number; target: number; trend: string; } interface BusinessImpactTabProps { itemsForChart: RepairItem[]; totalRepairRevenue: number; vehicleTypeRevenue: VehicleTypeRevenue[]; operationalData: OperationalData[]; } export default function BusinessImpactTab({ itemsForChart, totalRepairRevenue, vehicleTypeRevenue, operationalData, }: BusinessImpactTabProps) { const [chartMounted, setChartMounted] = useState(false); useEffect(() => { // 컴포넌트가 마운트된 후 차트를 렌더링 const timer = setTimeout(() => { setChartMounted(true); }, 100); return () => clearTimeout(timer); }, []); return (

매출 상위 5개 수리 항목

항목별 매출 및 비중(%)

{/* 좌측: 차트 */}

{chartMounted ? ( v.toLocaleString()} /> { if (!active || !payload?.length) return null; const row = payload[0].payload as (typeof itemsForChart)[number]; return (

{label}

매출: {row.revenue.toLocaleString()}원

비중: {row.pct}%

); }} /> `${v.toLocaleString()}원`} className="text-xs" /> ) : (

차트 로딩 중...

)}

{/* 우측 요약 */}

총액

{totalRepairRevenue.toLocaleString()}원

{itemsForChart.map((row) => (

{row.item} {row.revenue.toLocaleString()}원

비중 {row.pct}%

))}

차량 유형별 매출 분석

세그먼트별 수익성 비교

{vehicleTypeRevenue.map((type, index) => (

{type.type === "전기차" && } {type.type === "하이브리드" && } {(type.type === "국산차" || type.type === "수입차") && ( )}

{type.type}

{type.customers.toLocaleString()}명

{type.revenue.toLocaleString()}원

평균 {type.avgSpend.toLocaleString()}원

))}

운영 효율성

업무 처리 현황 및 개선 추이

{operationalData .filter((data) => data.metric !== "No-Show 비율") .map((data, index) => (

{data.metric}

{data.trend === "up" ? ( ) : ( )}

{data.current} %

목표: {data.target}% 개선

))} {/* No-Show 비율 별도 스타일 */}

No-Show 비율

12.5%

지난달 대비 -2.3%p

); } [V0_FILE]typescriptreact:file="app/analysis/components/overview-tab.tsx" "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { ChartContainer, ChartTooltip } from "@/components/ui/chart"; import { Users, Crown, TrendingUp, ArrowUp } from "lucide-react"; import { ResponsiveContainer, LineChart, Line, CartesianGrid, XAxis, YAxis, LabelList } from "recharts"; interface CustomerTrendData { month: string; new: number; returning: number; total: number; } interface OverviewTabProps { customerTrendData: CustomerTrendData[]; } export default function OverviewTab({ customerTrendData }: OverviewTabProps) { return (

전체 고객 수

8,247

등록된 전체 고객

프리미엄 고객 수

1,432

VIP/프리미엄 등급 고객

재방문 비율

73.2%

전체 고객 중 재방문율

{/* LEFT CARD - 최근 3개월 방문 추이 */} 최근 3개월 방문 추이

평균 재방문 주기: 2.8개월

+15.3%

{ if (active && payload && payload.length) { return (

{`${label}`}

{payload.map((entry, index) => (

{`${ entry.name }: ${entry.value?.toLocaleString()}명`}

))}

); } return null; }} /> value?.toLocaleString()} content={({ x, y, value, index }) => { const adjustedX = index === 0 ? (x || 0) + 25 : x; return ( {value?.toLocaleString()} ); }} /> value?.toLocaleString()} content={({ x, y, value, index }) => { const adjustedX = index === 0 ? (x || 0) + 25 : x; return ( {value?.toLocaleString()} ); }} />

{/* RIGHT CARD - 고객 그룹 분포 */} 고객 그룹 분포

{/* Left side - Legend list (30%) */}

단골

45%

2,670명

일반

30%

2,474명

미방문

20%

1,649명

신규

454명

{/* Right side - Donut chart (70%) */}

총 고객

8,247

); } [V0_FILE]typescriptreact:file="app/analysis/components/vip-insights-tab.tsx" "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { AlertTriangle, Crown, Star, UserX } from "lucide-react"; interface TopVipCustomer { name: string; vehicle: string; totalSpend: number; tier: string; lastService: string; } interface FrequentCustomer { name: string; vehicle: string; visitsThisYear: number; avgInterval: string; lastVisit: string; } interface AtRiskCustomer { name: string; vehicle: string; lastVisit: string; riskLevel: "HIGH" | "MEDIUM" | "LOW"; recommendation: string; } export default function VipInsightsTab() { const topVipCustomers: TopVipCustomer[] = [ { name: "김철수", vehicle: "BMW X5", totalSpend: 2840000, tier: "PLATINUM", lastService: "2주 전" }, { name: "이영희", vehicle: "벤츠 E-Class", totalSpend: 2340000, tier: "GOLD", lastService: "1주 전" }, { name: "박민수", vehicle: "아우디 A6", totalSpend: 1980000, tier: "GOLD", lastService: "3일 전" }, { name: "정수진", vehicle: "렉서스 RX", totalSpend: 1750000, tier: "SILVER", lastService: "1주 전" }, { name: "최동훈", vehicle: "포르쉐 카이엔", totalSpend: 1620000, tier: "PLATINUM", lastService: "4일 전" }, ]; const frequentCustomers: FrequentCustomer[] = [ { name: "오지훈", vehicle: "현대 투싼", visitsThisYear: 7, avgInterval: "1.6개월", lastVisit: "1주 전" }, { name: "서민정", vehicle: "기아 스포티지", visitsThisYear: 6, avgInterval: "1.9개월", lastVisit: "2주 전" }, { name: "한도윤", vehicle: "BMW 320i", visitsThisYear: 6, avgInterval: "2.0개월", lastVisit: "3주 전" }, { name: "유지아", vehicle: "벤츠 C-Class", visitsThisYear: 5, avgInterval: "2.2개월", lastVisit: "3일 전" }, { name: "최현우", vehicle: "제네시스 G70", visitsThisYear: 5, avgInterval: "2.3개월", lastVisit: "1개월 전" }, ]; const atRiskCustomers: AtRiskCustomer[] = [ { name: "홍길동", vehicle: "현대 소나타", lastVisit: "4개월 전", riskLevel: "HIGH", recommendation: "정기점검 할인쿠폰", }, { name: "김영수", vehicle: "기아 K5", lastVisit: "3개월 전", riskLevel: "MEDIUM", recommendation: "엔진오일 교환 안내", }, { name: "이민호", vehicle: "쉐보레 말리부", lastVisit: "5개월 전", riskLevel: "HIGH", recommendation: "컴백 프로모션", }, ]; const riskCount = atRiskCustomers.length; return (

{/* 1라인: VIP / 단골 / 이탈위험 (3-UP) */}

{/* VIP TOP 5 */} VIP TOP 5

매출 기여 상위 고객

{topVipCustomers.map((customer, index) => (

{index + 1}

{customer.name}

{customer.vehicle}

{customer.totalSpend.toLocaleString()}원

{customer.tier}

))}

{/* 단골 TOP 5 */} 단골 TOP 5

방문 빈도 상위 고객

{frequentCustomers.map((cust, idx) => (

{idx + 1}

{cust.name}

{cust.vehicle}

{cust.visitsThisYear}회/년 · 평균 {cust.avgInterval}

마지막 {cust.lastVisit}

))}

{/* 이탈 위험 */} 이탈 위험

총 {riskCount}명 · HIGH/중 {atRiskCustomers.filter((c) => c.riskLevel === "HIGH").length}명

{atRiskCustomers.map((customer, index) => (

{customer.name}

{customer.vehicle}

마지막 {customer.lastVisit}

{customer.recommendation}

))}

맞춤 쿠폰 발송 시 약 23% 복귀율 예상

{/* AI 기반 고객 세그먼트 - 전체 너비 */} AI 기반 고객 세그먼트

고객 행동 패턴을 분석하여 자동으로 분류된 그룹

{/* 1. 고액 고객 */}

고액 고객

높은 지출을 보이는 프리미엄 고객

고객 수: 1,427명 (17.3%)

매출 기여도: 38.7%

평균 지출: 187,000원

{/* 2. 단골 고객 */}

단골 고객

정기적으로 방문하는 충성 고객

고객 수: 2,670명 (32.4%)

매출 기여도: 45.2%

평균 방문 주기: 1.8개월

{/* 3. 장기 미방문 */}

장기 미방문

6개월 이상 방문하지 않은 고객

고객 수: 1,987명 (24.1%)

매출 기여도: 8.3%

마지막 방문: 평균 8.2개월 전

); } [V0_FILE]typescriptreact:file="app/analysis/components/visit-behavior-tab.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ChartContainer, ChartTooltip } from "@/components/ui/chart" import { ResponsiveContainer, LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts" interface VisitFrequencyData { group: string count: number frequency: number } interface CustomerTrendData { month: string new: number returning: number total: number } interface VisitBehaviorTabProps { visitFrequencyData: VisitFrequencyData[] customerTrendData: CustomerTrendData[] } export default function VisitBehaviorTab({ visitFrequencyData, customerTrendData }: VisitBehaviorTabProps) { return (

그룹별 방문 빈도

고객 세그먼트별 방문 패턴 분석

{visitFrequencyData.map((group, index) => (

{group.group}

{group.count.toLocaleString()}명

{group.frequency}개월

평균 주기

))}

월별 방문 추이

최근 3개월 상세 분석

{ if (active && payload && payload.length) { return (

{`${label}`}

{payload.map((entry, index) => (

{`${entry.name}: ${entry.value?.toLocaleString()}명`}

))}

) } return null }} />

) } [V0_FILE]typescriptreact:file="app/analysis/page.tsx" "use client"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import SharedHeader from "@/components/shared-header"; import OverviewTab from "./components/overview-tab"; import VipInsightsTab from "./components/vip-insights-tab"; import BusinessImpactTab from "./components/business-impact-tab"; import VisitBehaviorTab from "./components/visit-behavior-tab"; import { useSearchParams, useRouter, usePathname } from "next/navigation"; export default function AnalysisPage() { const searchParams = useSearchParams(); const router = useRouter(); const pathname = usePathname(); const tab = searchParams.get("tab") || "overview"; const handleTabChange = (value: string) => { const params = new URLSearchParams(searchParams); params.set("tab", value); router.replace(`${pathname}?${params.toString()}`, { scroll: false }); }; const customerTrendData = [ { month: "10월", new: 140, returning: 340, total: 480 }, { month: "11월", new: 120, returning: 380, total: 500 }, { month: "12월", new: 110, returning: 420, total: 530 }, ]; const visitFrequencyData = [ { group: "신규 고객", count: 45, frequency: 1.2 }, { group: "단골 고객", count: 128, frequency: 3.8 }, { group: "VIP 고객", count: 34, frequency: 6.2 }, { group: "휴면 고객", count: 23, frequency: 0.3 }, ]; const topVipCustomers = [ { name: "김철수", vehicle: "BMW X5", totalSpend: 2840000, tier: "PLATINUM", lastService: "2주 전" }, { name: "이영희", vehicle: "벤츠 E-Class", totalSpend: 2340000, tier: "GOLD", lastService: "1주 전" }, { name: "박민수", vehicle: "아우디 A6", totalSpend: 1980000, tier: "GOLD", lastService: "3일 전" }, { name: "정수진", vehicle: "렉서스 RX", totalSpend: 1750000, tier: "SILVER", lastService: "1주 전" }, { name: "최동훈", vehicle: "포르쉐 카이엔", totalSpend: 1620000, tier: "PLATINUM", lastService: "4일 전" }, ]; const atRiskCustomers = [ { name: "홍길동", vehicle: "현대 소나타", lastVisit: "4개월 전", riskLevel: "HIGH", recommendation: "정기점검 할인쿠폰", }, { name: "김영수", vehicle: "기아 K5", lastVisit: "3개월 전", riskLevel: "MEDIUM", recommendation: "엔진오일 교환 안내", }, { name: "이민호", vehicle: "쉐보레 말리부", lastVisit: "5개월 전", riskLevel: "HIGH", recommendation: "컴백 프로모션", }, ]; const ltvData = [ { segment: "프리미엄", ltv: 3200000, growth: 12 }, { segment: "단골", ltv: 1800000, growth: 8 }, { segment: "일반", ltv: 950000, growth: 5 }, { segment: "신규", ltv: 420000, growth: 15 }, ]; const itemsForChart = [ { item: "엔진오일 교환", revenue: 12500000, pct: 28 }, { item: "타이어 교체", revenue: 9800000, pct: 22 }, { item: "브레이크 패드", revenue: 7200000, pct: 16 }, { item: "배터리 교체", revenue: 6100000, pct: 14 }, { item: "에어컨 정비", revenue: 4900000, pct: 11 }, ]; const totalRepairRevenue = itemsForChart.reduce((sum, item) => sum + item.revenue, 0); const vehicleTypeRevenue = [ { type: "전기차", customers: 342, revenue: 8900000, avgSpend: 260000 }, { type: "하이브리드", customers: 567, revenue: 12400000, avgSpend: 218000 }, { type: "수입차", customers: 1234, revenue: 28700000, avgSpend: 232000 }, { type: "국산차", customers: 6104, revenue: 45200000, avgSpend: 74000 }, ]; const operationalData = [ { metric: "차계부 처리율", current: 89, target: 85, trend: "up" }, { metric: "예약 방문율", current: 87, target: 90, trend: "up" }, { metric: "No-Show 비율", current: 12.5, target: 15, trend: "down" }, ]; return (

프리미엄 AI 고객관리

AI 기반 고객 분석과 맞춤형 마케팅 인사이트를 제공합니다

전체 요약 고객 분류 성과 분석 방문 행동

); } [V0_FILE]typescriptreact:file="app/carbook/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/carbook/page.tsx" "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { ChartContainer, ChartTooltip } from "@/components/ui/chart"; import { Users, TrendingUp, AlertTriangle, ArrowUp, ArrowDown, BarChart3, LineChart, Download, Calendar, Phone, X, } from "lucide-react"; import SharedHeader from "@/components/shared-header"; import { Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Line as RechartsLine, ComposedChart, AreaChart, Area, LabelList, // Added LabelList import for data labels } from "recharts"; import { useState } from "react"; // Sample data const trendData = [ { date: "1월", total: 8500, daily: 280, pending: 45 }, { date: "2월", total: 9200, daily: 310, pending: 52 }, { date: "3월", total: 10100, daily: 340, pending: 38 }, { date: "4월", total: 11200, daily: 380, pending: 41 }, { date: "5월", total: 12000, daily: 420, pending: 67 }, { date: "6월", total: 12847, daily: 450, pending: 89 }, ]; const dailyTrendData = [ { day: "월", issued: 180 }, { day: "화", issued: 220 }, { day: "수", issued: 190 }, { day: "목", issued: 250 }, { day: "금", issued: 280 }, { day: "토", issued: 160 }, { day: "", issued: 140 }, ]; const cumulativeData7Days = [ { date: "2024-01-08", cumulative: 15220 }, { date: "2024-01-09", cumulative: 15500 }, { date: "2024-01-10", cumulative: 15780 }, { date: "2024-01-11", cumulative: 16130 }, { date: "2024-01-12", cumulative: 16500 }, { date: "2024-01-13", cumulative: 16670 }, { date: "2024-01-14", cumulative: 16620 }, ]; const cumulativeData30Days = [ { date: "2024-01-01", cumulative: 8500 }, { date: "2024-01-05", cumulative: 9620 }, { date: "2024-01-10", cumulative: 11020 }, { date: "2024-01-15", cumulative: 12420 }, { date: "2024-01-20", cumulative: 13820 }, { date: "2024-01-25", cumulative: 15220 }, { date: "2024-01-30", cumulative: 16620 }, ]; const cumulativeData1Year = [ { date: "2023-02-01", cumulative: 2500 }, { date: "2023-04-01", cumulative: 4200 }, { date: "2023-06-01", cumulative: 6800 }, { date: "2023-08-01", cumulative: 9100 }, { date: "2023-10-01", cumulative: 11500 }, { date: "2023-12-01", cumulative: 14200 }, { date: "2024-01-30", cumulative: 16620 }, ]; const dailyComparisonData = [ { 날짜: "2025-01-08", 입고수: 212, 발행수: 163, "발행률(%)": 76.9 }, { 날짜: "2025-01-09", 입고수: 237, 발행수: 219, "발행률(%)": 92.4 }, { 날짜: "2025-01-10", 입고수: 206, 발행수: 168, "발행률(%)": 81.6 }, { 날짜: "2025-01-11", 입고수: 226, 발행수: 203, "발행률(%)": 89.8 }, { 날짜: "2025-01-12", 입고수: 245, 발행수: 216, "발행률(%)": 88.2 }, { 날짜: "2025-01-13", 입고수: 227, 발행수: 196, "발행률(%)": 86.3 }, { 날짜: "2025-01-14", 입고수: 220, 발행수: 208, "발행률(%)": 94.5 }, ]; const monthlyTrendData = [ { date: "2024-07", cumulative: 8500 }, { date: "2024-08", cumulative: 10200 }, { date: "2024-09", cumulative: 12100 }, { date: "2024-10", cumulative: 14300 }, { date: "2024-11", cumulative: 16800 }, { date: "2024-12", cumulative: 19500 }, { date: "2025-01", cumulative: 22340 }, ]; const monthlyTrendData6Months = [ { date: "2024-08", cumulative: 10200 }, { date: "2024-09", cumulative: 12100 }, { date: "2024-10", cumulative: 14300 }, { date: "2024-11", cumulative: 16800 }, { date: "2024-12", cumulative: 19500 }, { date: "2025-01", cumulative: 22340 }, ]; const monthlyTrendData12Months = [ { date: "2024-02", cumulative: 2500 }, { date: "2024-03", cumulative: 4200 }, { date: "2024-04", cumulative: 5800 }, { date: "2024-05", cumulative: 7100 }, { date: "2024-06", cumulative: 8500 }, { date: "2024-07", cumulative: 10200 }, { date: "2024-08", cumulative: 12100 }, { date: "2024-09", cumulative: 14300 }, { date: "2024-10", cumulative: 16800 }, { date: "2024-11", cumulative: 19500 }, { date: "2024-12", cumulative: 21200 }, { date: "2025-01", cumulative: 22340 }, ]; export default function CarbookManagement() { const [cumulativeRange, setCumulativeRange] = useState("6개월"); const [comparisonRange, setComparisonRange] = useState("30"); const [selectedBranch, setSelectedBranch] = useState("all"); const exportToCSV = (data: any[], filename: string) => { const csvContent = "data:text/csv;charset=utf-8," + Object.keys(data[0]).join(",") + "\n" + data.map((row) => Object.values(row).join(",")).join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", filename); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const getFilteredCumulativeData = () => { if (cumulativeRange === "6개월") { return monthlyTrendData6Months; } else if (cumulativeRange === "12개월") { return monthlyTrendData12Months; } return monthlyTrendData6Months; }; const filteredCumulativeData = getFilteredCumulativeData(); const currentTotal = filteredCumulativeData[filteredCumulativeData.length - 1]?.cumulative || 0; const previousTotal = filteredCumulativeData[filteredCumulativeData.length - 2]?.cumulative || 0; const changePercent = previousTotal > 0 ? (((currentTotal - previousTotal) / previousTotal) * 100).toFixed(1) : "0"; const absoluteDifference = currentTotal - previousTotal; const CustomLabel = (props: any) => { const { x, y, value } = props; return ( {value?.toLocaleString()} ); }; const CustomAreaLabel = (props: any) => { const { x, y, value, index } = props; // Add horizontal offset for the first data point to prevent Y-axis overlap const offsetX = index === 0 ? x + 25 : x; return ( {value?.toLocaleString()} ); }; return (

{/* Header */}

차계부 관리

발행 현황을 실시간으로 모니터링하고 관리하세요

{/* Top KPI Cards */}

총 발행수

12,847

+12% vs 지난달

오늘 발행수

1,234

+8% vs 어제

미 발행수

-3% vs 어제

{/* Trend Graphs - Side by Side Layout */}

{/* Left: Area Chart for Cumulative Trend */}

총 발행수 누적 추이

{ const [year, month] = value.split("-"); return `${year}.${month}`; }} /> value.toLocaleString()} /> { if (active && payload && payload.length) { const [year, month] = label.split("-"); return (

{`${year}년 ${month}월`}

{`총 발행수: ${payload[0]?.value?.toLocaleString()}건`}

); } return null; }} />

{currentTotal.toLocaleString()}

{Number.parseFloat(changePercent) >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600" }`} > {Number.parseFloat(changePercent) >= 0 ? "▲" : "▼"}{" "} {Math.abs(Number.parseFloat(changePercent))}% ({absoluteDifference >= 0 ? "+" : ""} {absoluteDifference.toLocaleString()}건) vs 전월

{/* Right: Daily Comparison Chart */}

일별 입고 수 대비 발행 수 (7일)

new Date(value).toLocaleDateString("ko-KR", { month: "short", day: "numeric", }) } /> { if (active && payload && payload.length) { const data = payload[0]?.payload; return (

{new Date(label).toLocaleDateString("ko-KR")}

{`입고수: ${data?.입고수?.toLocaleString()}건`}

{`발행수: ${data?.발행수?.toLocaleString()}건`}

{`발행률: ${data?.[ "발행률(%)" ]?.toFixed(1)}%`}

); } return null; }} />

입고수

발행수

발행률(%)

); } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { /* Primary Colors */ --primary: 218 79% 59%; /* #2563EB */ --primary-hover: 218 84% 53%; /* 8% darker */ --primary-pressed: 218 87% 50%; /* 12% darker */ --primary-foreground: 0 0% 98%; /* Background & Surface */ --background: 212 20% 98%; /* #F9FAFB */ --card: 0 0% 100%; /* #FFFFFF */ --card-foreground: 218 54% 11%; /* #0F172A */ /* Text Colors */ --foreground: 218 54% 11%; /* #0F172A - Dark Navy */ --muted-foreground: 215 16% 47%; /* #64748B - Subtext */ --border: 214 32% 91%; /* #E2E8F0 - Divider */ /* Status Colors */ --success: 158 64% 52%; /* #10B981 */ --warning: 38 92% 50%; /* #F59E0B */ --warning-dark: 38 92% 40%; /* Darker warning for better contrast */ --destructive: 0 84% 60%; /* #EF4444 */ --info: 214 86% 62%; /* #3B82F6 */ /* Secondary & Accent */ --secondary: 210 40% 96%; --secondary-foreground: 215 25% 27%; --muted: 210 40% 96%; --accent: 210 40% 96%; --accent-foreground: 218 54% 11%; /* Other UI Elements */ --popover: 0 0% 100%; --popover-foreground: 218 54% 11%; --input: 214 32% 91%; --ring: 218 79% 59%; /* Chart Colors */ --chart-1: 218 79% 59%; /* Primary Blue */ --chart-2: 158 64% 52%; /* Success Green */ --chart-3: 38 92% 50%; /* Warning Orange */ --chart-4: 271 81% 56%; /* Purple */ --chart-5: 197 71% 73%; /* Light Blue */ /* Border Radius */ --radius-sm: 0.5rem; /* 8px - buttons/inputs */ --radius-md: 0.75rem; /* 12px - cards */ --radius-lg: 1rem; /* 16px - dashboard panels */ /* Typography */ --font-heading-l: 1.5rem; /* 24px */ --font-heading-m: 1.25rem; /* 20px */ --font-body: 0.9375rem; /* 15px */ --font-caption: 0.75rem; /* 12px */ /* Shadows */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 2px 10px rgba(0, 0, 0, 0.1); /* Animation */ --animation-easing: cubic-bezier(0.4, 0, 0.2, 1); --animation-page: 240ms; --animation-modal: 200ms; --animation-button: 120ms; --animation-shimmer: 1200ms; --animation-tab: 140ms; --animation-list: 160ms; } .dark { --background: 218 54% 11%; --foreground: 0 0% 98%; --card: 218 50% 15%; --card-foreground: 0 0% 98%; --popover: 218 50% 15%; --popover-foreground: 0 0% 98%; --primary: 218 79% 59%; --primary-foreground: 218 54% 11%; --secondary: 218 50% 20%; --secondary-foreground: 0 0% 98%; --muted: 218 50% 20%; --muted-foreground: 215 16% 65%; --accent: 218 50% 20%; --accent-foreground: 0 0% 98%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --border: 218 50% 20%; --input: 218 50% 20%; --ring: 218 79% 59%; } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-family: "Inter", system-ui, sans-serif; letter-spacing: -0.025em; /* Tighter letter spacing */ line-height: 1.5; /* Body line height */ } /* Typography Classes */ .heading-l { font-size: var(--font-heading-l); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; color: hsl(var(--foreground)); } .heading-m { font-size: var(--font-heading-m); font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; color: hsl(var(--foreground)); } .body-text { font-size: var(--font-body); font-weight: 500; line-height: 1.5; letter-spacing: -0.025em; color: hsl(var(--foreground)); } .caption-text { font-size: var(--font-caption); font-weight: 400; line-height: 1.5; letter-spacing: -0.025em; color: hsl(var(--muted-foreground)); } } @layer components { /* Card Styles */ .dashboard-card { @apply bg-card text-card-foreground border border-border; border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: all var(--animation-button) var(--animation-easing); } .dashboard-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); } .dashboard-panel { @apply bg-card text-card-foreground border border-border; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } /* Button Enhancements */ .enhanced-button { transition: all var(--animation-button) var(--animation-easing); border-radius: var(--radius-sm); } .enhanced-button:hover { filter: brightness(0.95); } .enhanced-button:active { filter: brightness(0.9); transform: translateY(1px); } /* Input Enhancements */ .enhanced-input { border-radius: var(--radius-sm); transition: all var(--animation-button) var(--animation-easing); } /* Animation Classes */ .fade-in { animation: fadeIn var(--animation-page) var(--animation-easing); } .slide-up { animation: slideUp var(--animation-modal) var(--animation-easing); } .shimmer { animation: shimmer var(--animation-shimmer) ease-in-out infinite; } /* Status Indicators */ .status-success { color: hsl(var(--success)); } .status-warning { color: hsl(var(--warning)); } .status-danger { color: hsl(var(--destructive)); } .status-info { color: hsl(var(--info)); } } @keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Tab Animations */ .tabs-trigger { transition: all var(--animation-tab) var(--animation-easing); position: relative; } .tabs-trigger[data-state="active"]::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: hsl(var(--primary)); animation: slideIn var(--animation-tab) var(--animation-easing); } @keyframes slideIn { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from "next"; import { GeistSans } from "geist/font/sans"; import { GeistMono } from "geist/font/mono"; import { Analytics } from "@vercel/analytics/next"; import { ToastProvider } from "@/components/toast-provider"; import { ToastContainer } from "@/components/toast-container"; import "./globals.css"; export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" "use client"; import { useState, useMemo } from "react"; import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { CalendarDays, BarChart3, Crown, Eye, Send, TrendingUp, Users, MessageCircle, Calendar, Phone, } from "lucide-react"; import Link from "next/link"; import SharedHeader from "@/components/shared-header"; import CommonSendPopup from "@/components/common-send-popup"; import { useToast } from "@/components/toast-provider"; // ──────────────────────────────────────────────────────────── // 대시보드 // ──────────────────────────────────────────────────────────── export default function Dashboard() { // ======================= // TODO: 서버/클라이언트 fetch 로 실제 값 바인딩 // ======================= // 팝업 상태 관리 const [savingsPopup, setSavingsPopup] = useState(false); const [campaignPopup, setCampaignPopup] = useState({ open: false, campaignId: "", campaignName: "" }); const [statementsPopup, setStatementsPopup] = useState(false); // 토스트 테스트용 const { addToast } = useToast(); // 대기 메시지(캠페인) 목록 - useState로 관리 const [campaignQueue, setCampaignQueue] = useState([ { id: "cmp-001", name: "예약", schedule: "오늘 14:30", targets: 128, status: "", // 승인대기 | 예약 | 즉시가능 }, { id: "cmp-002", name: "여름철 점검", schedule: "오늘 16:00", targets: 86, status: "", }, { id: "cmp-003", name: "엔진오일", schedule: "즉시 가능", targets: 42, status: "", }, ]); // 오늘 입고/발송 집계 const todayIntake = 12; // 오늘 입고 수 const statementsSentToday = 9; // 샘플 고객 데이터 const generateCustomers = (type: string, count: number) => { const firstNames = [ "김", "이", "박", "최", "정", "강", "조", "윤", "장", "임", "한", "오", "서", "신", "권", "황", "안", "송", "류", "전", ]; const lastNames = [ "철수", "영희", "민수", "수영", "지현", "동현", "소영", "준호", "미영", "성호", "혜진", "태우", "은정", "상훈", "예린", "민재", "수빈", "현우", "다은", "건우", ]; const vehicles = [ "소나타", "아반떼", "그랜저", "투싼", "산타페", "K5", "K3", "스포티지", "셀토스", "BMW 320i", "벤츠 C200", "아우디 A4", ]; const plateNumbers = ["가", "나", "다", "라", "마", "바", "사", "아", "자", "차"]; return Array.from({ length: count }, (_, i) => ({ id: `${type}-${i + 1}`, name: firstNames[i % firstNames.length] + lastNames[i % lastNames.length], phone: `010-${String(Math.floor(Math.random() * 9000) + 1000)}-${String( Math.floor(Math.random() * 9000) + 1000 )}`, vehicle: vehicles[i % vehicles.length], plateNo: `${String(i + 10).padStart(2, "0")}${plateNumbers[i % plateNumbers.length]}${String( i + 1000 ).padStart(4, "0")}`, lastVisit: `2024-01-${String((i % 30) + 1).padStart(2, "0")}`, })); }; const sampleCustomers = { savings: generateCustomers("savings", 56), // 추가절감하기 대상자 56명 campaign: generateCustomers("campaign", 128), // 캠페인 대상자 128명 statements: generateCustomers("statements", todayIntake - statementsSentToday), // 명세서 발송 대상자 }; // 절감/이탈 const savedCostMonth = 182000; const lostCustomers = 37; // 핸들러 (실제 동작은 라우트/액션 연결) const handleSendCampaign = (id: string) => { // TODO: POST /api/push/send { campaignId: id } console.log("send campaign", id); // 발송 후 해당 캠페인을 목록에서 제거 setCampaignQueue((prev) => prev.filter((campaign) => campaign.id !== id)); }; const handlePreviewCampaign = (id: string) => { const campaign = campaignQueue.find((c) => c.id === id); setCampaignPopup({ open: true, campaignId: id, campaignName: campaign?.name || "" }); }; const handleBulkSendStatements = () => { setStatementsPopup(true); }; const handlePreviewStatements = () => { setStatementsPopup(true); }; // 토스트 테스트 함수들 const testReservationToast = () => { addToast({ type: "reservation", title: "신규 예약 요청", message: "고객님의 차량 점검 예약이 접수되었습니다.", customerName: "김철수", phoneNumber: "010-1234-5678", vehicleInfo: "BMW X5 (12가1234)", }); }; const testCallToast = () => { addToast({ type: "call", title: "전화 문의", message: "고객님께서 정비 문의 전화를 걸었습니다.", customerName: "이영희", phoneNumber: "010-9876-5432", vehicleInfo: "벤츠 E-Class (34나5678)", }); }; return (

{/* 본문 */}

{/* 히어로(간단 안내만 유지) */}

김사장님,

오늘 해야 할 작업을 바로 실행하고, 비용 절감과 재방문을 동시에 챙기세요.

{/* 차계부 설치 QR 코드 인쇄 */}

{/* ───────────────────────────────────────────────────── 1열(가장 중요): 절감/이탈 ──────────────────────────────────────────────────── */}

{/* 절감된 금액 */}

이달 절감액

{savedCostMonth.toLocaleString()}원

기존 SMS 비용 245,000원 → SMS 대비 24% 절감

{/* 잃어버린 고객 */}

잃어버린 고객 1년 이상 미방문

{lostCustomers}명

재방문 유도로 매출 회복 기회

{/* ───────────────────────────────────────────────────── 2열: 왼쪽 대기 메시지(캠페인별 액션), 오른쪽 명세서 일괄발송 ──────────────────────────────────────────────────── */}

{/* 대기 메시지 – 캠페인 리스트 + per-campaign 액션 */}

대기 메시지 관리 예정 {campaignQueue.length}건

캠페인 내용을 확인하고, 각 캠페인별로 바로 발송 전 확인를 실행하세요.

{campaignQueue.length > 0 ? ( campaignQueue.map((c, index) => (

{c.name} {c.status === "승인대기" && ( 승인대기 )} {c.status === "예약" && ( 예약 )} {c.status === "즉시가능" && ( 즉시가능 )}

일정: {c.schedule} · 대상자 {c.targets.toLocaleString()}명

)) ) : (

현재 대기 중인 캠페인이 없습니다.

)} {/* 점검정비명세서 일괄발송 - 두 개 카드로 분할 */}

{/* 상단 카드: 점검정비명세서 일괄발송 */}

점검정비명세서 일괄발송

{todayIntake}

오늘 입고 건

{statementsSentToday}

오늘 발송 건

{/* */}

{/* 빠른 이동 네비게이션 */}

발송 추세
/캘린더

차계부
관리

프리미엄
AI 고객관리

{/* 추가절감하기 팝업 */} setSavingsPopup(false)} title="추가절감하기" icon={} description="최근 1개월 내 입고 고객 중 *차계부 미설치 고객*에게 **차계부 설치 URL**을 즉시 푸시 발송합니다. (URL 자동 포함)" totalTargets={56} expectedAmount={42000} targetButtonText="대상자" previewContent={{ title: "차계부 온라인 발급 안내", message: "안녕하세요. 최근 방문해 주셔서 감사드립니다.\n\n점검·정비 명세서가 온라인으로 발급되었으며, \n언제든 확인하실 수 있도록 안내드립니다.\n\n차량 관리에 도움이 되는 차계부 앱을 설치하시면 정비 이력과 관리 내용을 편리하게 확인하실 수 있습니다.\n\n차계부 설치 URL: https://highway.autovan.kr/install\n\n감사합니다.", additionalInfo: [], }} onPreview={() => { // TODO: 미리보기 팝업 열기 console.log("미리보기"); }} onSend={() => { // TODO: 발송 실행 console.log("발송 실행"); setSavingsPopup(false); }} customerList={sampleCustomers.savings} /> {/* 대기 메시지 관리 팝업 */} setCampaignPopup({ open: false, campaignId: "", campaignName: "" })} title={`${campaignPopup.campaignName} 발송`} icon={} description="선택한 캠페인 메시지를 대상자들에게 발송합니다. 발송 전 미리보기를 통해 내용을 확인하세요." totalTargets={ campaignPopup.campaignId === "cmp-001" ? 128 : campaignPopup.campaignId === "cmp-002" ? 86 : 42 } targetButtonText="대상자 목록" previewContent={{ title: campaignPopup.campaignName, message: campaignPopup.campaignId === "cmp-001" ? "고객님, 예약하신 정비가 내일 예정되어 있습니다.\n안전한 방문을 위해 잊지 말고 방문 부탁드립니다.\n\n차량: 소나타\n번호판: 12가3456" : campaignPopup.campaignId === "cmp-002" ? "여름 장마철 대비 와이퍼/에어컨 필터 점검 안내드립니다.\n예약 시 빠른 점검 도와드립니다.\n\n차량: K5\n번호판: 34나5678" : "서비스 이용해주셔서 감사합니다.\n만족도 조사에 참여해주시면 감사하겠습니다.\n\n차량: BMW 320i\n번호판: 56다7890", additionalInfo: [ "개인화된 정보(고객명, 차량정보)가 자동으로 치환됩니다.", "발송 시간은 예약된 시간에 맞춰 자동 발송됩니다.", ], }} onPreview={() => { console.log("미리보기:", campaignPopup.campaignId); }} onSend={() => { console.log("캠페인 발송:", campaignPopup.campaignId); // 발송 후 해당 캠페인을 목록에서 제거 setCampaignQueue((prev) => prev.filter((campaign) => campaign.id !== campaignPopup.campaignId)); setCampaignPopup({ open: false, campaignId: "", campaignName: "" }); }} customerList={sampleCustomers.campaign} /> {/* 점검정비명세서 일괄발송 팝업 */} setStatementsPopup(false)} title="점검정비명세서 일괄발송" icon={} description="오늘 작업 완료된 차량들의 점검정비명세서를 고객들에게 일괄로 발송합니다. " totalTargets={todayIntake - statementsSentToday} targetButtonText="발송 대상" previewContent={{ title: "점검정비명세서 발송", message: "안녕하세요. 차량 점검 작업이 완료되었습니다.\n\n 점검정비명세서가 온라인으로 발급되었으니,\n [하이웨이 차계부]에서 \n 내용을 확인해주시기 바랍니다. \n\n궁금한 사항이 있으시면 언제든 연락 부탁드립니다.\n\n감사합니다.", additionalInfo: [], }} onPreview={() => { console.log("명세서 미리보기"); }} onSend={() => { console.log("점검정비명세서 일괄발송 실행"); setStatementsPopup(false); }} customerList={sampleCustomers.statements} /> {/* 토스트 테스트 버튼들 (개발용) */}

); } [V0_FILE]typescriptreact:file="app/pushmessage/components/RecipientsModal.tsx" "use client"; import { useEffect, useState, useCallback, useRef } from "react"; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Clock, Users, Search } from "lucide-react"; export type Recipient = { id: string; customerName: string; phone: string; vehicleNo: string; vehicleName: string; lastVisit: string; odometer: number; tags: string[]; channels: { push: boolean; sms: boolean; consentAt?: string }; preferred: "PUSH" | "SMS" | "NONE"; }; export type RecipientSummary = { total: number; eligiblePush: number; eligibleSms: number; optedOut: number; }; type Props = { open: boolean; campaignId: string | null; onOpenChange: (open: boolean) => void; fetchRecipients?: (args: { campaignId: string; query: string; page: number; pageSize: number; }) => Promise<{ items: Recipient[]; summary: RecipientSummary; hasMore: boolean; totalCount: number }>; pageSize?: number; }; export default function RecipientsModal({ open, campaignId, onOpenChange, fetchRecipients, pageSize = 10 }: Props) { const [search, setSearch] = useState(""); const [page, setPage] = useState(1); const [items, setItems] = useState([]); const [summary, setSummary] = useState({ total: 0, eligiblePush: 0, eligibleSms: 0, optedOut: 0, }); const [hasMore, setHasMore] = useState(true); const [totalCount, setTotalCount] = useState(0); const [loading, setLoading] = useState(false); const [loadingMore, setLoadingMore] = useState(false); const scrollContainerRef = useRef(null); // Reset state when search changes useEffect(() => { setPage(1); setItems([]); setHasMore(true); }, [search]); // Reset state when modal opens/closes useEffect(() => { if (open) { setSearch(""); setPage(1); setItems([]); setHasMore(true); } }, [open]); // Fetch data function const fetchData = useCallback( async (currentPage: number, currentSearch: string, isLoadMore = false) => { if (!campaignId) return; if (isLoadMore) { setLoadingMore(true); } else { setLoading(true); } try { const result = fetchRecipients ? await fetchRecipients({ campaignId, query: currentSearch, page: currentPage, pageSize }) : await fetchRecipientsMock({ query: currentSearch, page: currentPage, pageSize }); if (isLoadMore) { setItems((prev) => [...prev, ...result.items]); } else { setItems(result.items); setSummary(result.summary); setTotalCount(result.totalCount); } setHasMore(result.hasMore); } catch (err) { console.error("Failed to fetch recipients:", err); } finally { if (isLoadMore) { setLoadingMore(false); } else { setLoading(false); } } }, [campaignId, fetchRecipients, pageSize] ); // Initial load and search useEffect(() => { if (!open || !campaignId) return; fetchData(1, search, false); }, [open, campaignId, search, fetchData]); // Load more data const loadMore = useCallback(() => { if (!hasMore || loadingMore) return; const nextPage = page + 1; setPage(nextPage); fetchData(nextPage, search, true); }, [hasMore, loadingMore, page, search, fetchData]); // Scroll event handler const handleScroll = useCallback(() => { const container = scrollContainerRef.current; if (!container || !hasMore || loadingMore) return; const { scrollTop, scrollHeight, clientHeight } = container; // Load more when user scrolls to bottom (with 50px threshold) if (scrollTop + clientHeight >= scrollHeight - 50) { loadMore(); } }, [hasMore, loadingMore, loadMore]); // Attach scroll listener useEffect(() => { const container = scrollContainerRef.current; if (!container) return; container.addEventListener("scroll", handleScroll); return () => container.removeEventListener("scroll", handleScroll); }, [handleScroll]); const handleSearchSubmit = (e: React.FormEvent) => { e.preventDefault(); // Search change will trigger useEffect that resets and fetches }; return ( ); } // Mock data function with infinite scroll support async function fetchRecipientsMock({ query, page, pageSize }: { query: string; page: number; pageSize: number }) { // Generate comprehensive mock data (150 customers) const allCustomers: Recipient[] = []; const names = [ "김철수", "이영희", "박민수", "최수영", "정다영", "강호준", "송미영", "윤성호", "조현정", "황동현", "임수빈", "한지우", "오세영", "신예린", "배준호", "서윤아", "안태호", "문소연", "양지훈", "곽은정", "노현우", "유채영", "장성민", "권미정", "전병철", "홍수정", "금동혁", "남은주", "도준영", "류혜진", "변태현", "반지은", "석준호", "사윤정", "마현수", "라미영", "타성호", "차예린", "카동현", "파수빈", "하지우", "갸세영", "냐현정", "댜태호", "랴소연", "먀지훈", "뱌은정", "샤현우", "야채영", "쟈성민", "쵸미정", "쿄병철", "툐수정", "표동혁", "효은주", "기준영", "니혜진", "디태현", "리지은", "미준호", ]; const vehicles = [ "소나타", "아반떼", "그랜저", "투싼", "싼타페", "K5", "K3", "스포티지", "쏘렌토", "셀토스", "BMW 320i", "아우디 A4", "벤츠 C200", "볼보 XC60", "렉서스 ES300h", "제네시스 G80", "펠리세이드", ]; for (let i = 1; i <= 150; i++) { const randomName = names[i % names.length] + (i > names.length ? ` ${Math.floor(i / names.length)}` : ""); const randomVehicle = vehicles[i % vehicles.length]; const platePrefix = String(10 + (i % 90)).padStart(2, "0"); const plateChar = String.fromCharCode(0xac00 + (i % 11172)); // Random Korean character const plateNumber = String(1000 + (i % 9000)); allCustomers.push({ id: String(i), customerName: randomName, phone: `010-${String(Math.floor(Math.random() * 9000) + 1000)}-${String( Math.floor(Math.random() * 9000) + 1000 )}`, vehicleNo: `${platePrefix}${plateChar}${plateNumber}`, vehicleName: randomVehicle, lastVisit: `2024-${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}-${String( Math.floor(Math.random() * 28) + 1 ).padStart(2, "0")}`, odometer: Math.floor(Math.random() * 100000) + 10000, tags: [], channels: { push: Math.random() > 0.2, sms: Math.random() > 0.3, }, preferred: Math.random() > 0.3 ? "PUSH" : ("SMS" as const), }); } // Filter by query if provided let filteredCustomers = allCustomers; if (query.trim()) { const searchTerm = query.toLowerCase(); filteredCustomers = allCustomers.filter( (customer) => customer.customerName.toLowerCase().includes(searchTerm) || customer.phone.includes(searchTerm) || customer.vehicleNo.toLowerCase().includes(searchTerm) || customer.vehicleName.toLowerCase().includes(searchTerm) ); } // Calculate pagination const totalCount = filteredCustomers.length; const startIndex = (page - 1) * pageSize; const endIndex = startIndex + pageSize; const items = filteredCustomers.slice(startIndex, endIndex); const hasMore = endIndex < totalCount; // Calculate summary based on all customers (not just current page) const summary = { total: allCustomers.length, eligiblePush: allCustomers.filter((c) => c.channels.push).length, eligibleSms: allCustomers.filter((c) => c.channels.sms).length, optedOut: allCustomers.filter((c) => !c.channels.push && !c.channels.sms).length, }; // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 500)); return { items, summary, hasMore, totalCount, }; } [V0_FILE]typescriptreact:file="app/pushmessage/components/auto-send-tab.tsx" "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Switch } from "@/components/ui/switch"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; import { Eye, Clock, CheckCircle, XCircle, Info } from "lucide-react"; import { useMemo, useState } from "react"; interface AutoSendTabProps { globalApprovalRequired: boolean; setGlobalApprovalRequired: (value: boolean) => void; } type GroupState = { enabled: boolean; timing: "absolute" | "relative"; datetime: string; relativeRule: string; delegatedSend: boolean; // ★ 대행발송 여부 includeCarbookUrl: boolean; // ★ 차계부 URL 포함 여부 couponEnabled: boolean; // ★ 쿠폰 삽입 여부 couponType: string; // ★ 쿠폰 종류 }; export default function AutoSendTab({ globalApprovalRequired, setGlobalApprovalRequired }: AutoSendTabProps) { const [targetGroups, setTargetGroups] = useState>({ "insurance-expiration": { enabled: false, timing: "absolute", datetime: "", relativeRule: "3-days-before-10am", delegatedSend: false, includeCarbookUrl: true, couponEnabled: false, couponType: "none", }, "preventive-maintenance": { enabled: true, timing: "relative", datetime: "", relativeRule: "monthly-check", delegatedSend: true, includeCarbookUrl: true, couponEnabled: false, couponType: "none", }, "inspection-due": { enabled: false, timing: "absolute", datetime: "", relativeRule: "1-week-before", delegatedSend: false, includeCarbookUrl: true, couponEnabled: false, couponType: "none", }, "happy-call": { enabled: true, timing: "relative", datetime: "", relativeRule: "3-days-after-service", delegatedSend: false, includeCarbookUrl: false, couponEnabled: false, couponType: "none", }, "first-time-customers": { enabled: false, timing: "relative", datetime: "", relativeRule: "welcome-message", delegatedSend: false, includeCarbookUrl: false, couponEnabled: false, couponType: "none", }, "new-reservations": { enabled: true, timing: "relative", datetime: "", relativeRule: "1-day-before-10am", delegatedSend: false, includeCarbookUrl: true, couponEnabled: false, couponType: "none", }, "predicted-maintenance": { enabled: false, timing: "relative", datetime: "", relativeRule: "ai-prediction", delegatedSend: false, includeCarbookUrl: true, couponEnabled: false, couponType: "none", }, "recall-customers": { enabled: false, timing: "absolute", datetime: "", relativeRule: "immediate-notification", delegatedSend: false, includeCarbookUrl: false, couponEnabled: false, couponType: "none", }, "import-car-campaign": { enabled: false, timing: "absolute", datetime: "", relativeRule: "monthly-event", delegatedSend: false, includeCarbookUrl: false, couponEnabled: false, couponType: "none", }, "domestic-car-campaign": { enabled: false, timing: "absolute", datetime: "", relativeRule: "monthly-event", delegatedSend: false, includeCarbookUrl: false, couponEnabled: false, couponType: "none", }, "summer-inspection": { enabled: true, timing: "absolute", datetime: "", relativeRule: "seasonal", delegatedSend: true, includeCarbookUrl: true, couponEnabled: false, couponType: "none", }, "winter-inspection": { enabled: false, timing: "absolute", datetime: "", relativeRule: "seasonal", delegatedSend: false, includeCarbookUrl: true, couponEnabled: false, couponType: "none", }, "holiday-travel": { enabled: false, timing: "absolute", datetime: "", relativeRule: "before-holidays", delegatedSend: false, includeCarbookUrl: true, couponEnabled: false, couponType: "none", }, }); const [previewModal, setPreviewModal] = useState({ open: false, targetGroup: "" }); const targetGroupTemplates: Record = { "insurance-expiration": "고객님의 자동차보험이 곧 만료됩니다. 갱신 상담을 위해 연락드리겠습니다.", "preventive-maintenance": "정기 점검 시기가 되었습니다. 차량 안전을 위해 예방정비를 받아보세요.", "inspection-due": "환경검사 기한이 다가오고 있습니다. 미리 검사를 받으시기 바랍니다.", "happy-call": "서비스 이용해주셔서 감사합니다. 만족도 조사에 참여해주시면 감사하겠습니다.", "first-time-customers": "AutoVan에 오신 것을 환영합니다! 최고의 서비스로 보답하겠습니다.", "new-reservations": "고객님, 예약하신 정비가 내일 예정되어 있습니다. 안전한 방문을 위해 잊지 말고 방문 부탁드립니다.", "predicted-maintenance": "AI 분석 결과, 곧 정비가 필요할 것으로 예상됩니다. 미리 점검받으시기 바랍니다.", "recall-customers": "고객님의 차량이 리콜 대상에 포함되었습니다. 안전을 위해 서비스센터로 문의 부탁드립니다.", "import-car-campaign": "수입차 엔진오일 교환 이벤트 진행 중! 지금 예약 시 특별 혜택을 드립니다.", "domestic-car-campaign": "국산차 고객 대상 특별 할인 이벤트! 이번 기회를 놓치지 마세요.", "summer-inspection": "여름 장마철 대비 와이퍼와 에어컨 필터를 점검하세요. 예약 시 빠른 점검을 도와드립니다.", "winter-inspection": "한파 대비 부동액, 배터리, 타이어 상태를 점검하세요. 사전 예약으로 안전한 겨울 주행 준비하세요.", "holiday-travel": "휴가철 장거리 운행 전, 엔진오일과 타이어 점검을 꼭 받아보세요. 안전한 여행을 응원합니다.", }; const targetGroupInfo: Record = { "insurance-expiration": { name: "보험 만료 고객", count: 45 }, "preventive-maintenance": { name: "예방정비 고객", count: 89 }, "inspection-due": { name: "검사(환경) 대상 고객", count: 23 }, "happy-call": { name: "해피콜 고객", count: 156 }, "first-time-customers": { name: "처음 방문 고객", count: 34 }, "new-reservations": { name: "신규 예약 고객", count: 78 }, "predicted-maintenance": { name: "예방점검 예상 대상자", count: 67 }, "recall-customers": { name: "리콜 고객", count: 42 }, "import-car-campaign": { name: "수입차 캠페인", count: 92 }, "domestic-car-campaign": { name: "국산차 캠페인", count: 234 }, "summer-inspection": { name: "여름철 점검", count: 189 }, "winter-inspection": { name: "겨울철 점검", count: 201 }, "holiday-travel": { name: "휴가철 점검 캠페인", count: 145 }, }; const relativeTimeOptions: Record = { "3-days-before-10am": "3일 전 오전 10시", "1-day-before-10am": "1일 전 오전 10시", "1-week-before": "1주일 전", "monthly-check": "매월 정기점검일", "3-days-after-service": "서비스 완료 3일 후", "welcome-message": "첫 방문 당일", "ai-prediction": "AI 예측 시점", "immediate-notification": "즉시 알림", "monthly-event": "매월 이벤트일", seasonal: "계절별 자동", "before-holidays": "휴가철 전", }; const couponTypeOptions: Record = { none: "선택안함", discount: "정기점검 할인쿠폰", "oil-change": "엔진오일 교환쿠폰", "tire-check": "타이어점검 할인쿠폰", "brake-check": "브레이크점검 쿠폰", battery: "배터리점검 쿠폰", }; const handleToggleGroup = (groupId: string, enabled: boolean) => { setTargetGroups((prev) => ({ ...prev, [groupId]: { ...prev[groupId], enabled }, })); }; const handleTimingChange = (groupId: string, field: "timing" | "datetime" | "relativeRule", value: string) => { setTargetGroups((prev) => ({ ...prev, [groupId]: { ...prev[groupId], [field]: value }, })); }; const handleDelegatedToggle = (groupId: string, delegated: boolean) => { setTargetGroups((prev) => ({ ...prev, [groupId]: { ...prev[groupId], delegatedSend: delegated }, })); }; const handleCarbookUrlToggle = (groupId: string, includeUrl: boolean) => { setTargetGroups((prev) => ({ ...prev, [groupId]: { ...prev[groupId], includeCarbookUrl: includeUrl }, })); }; const handleCouponToggle = (groupId: string, enabled: boolean) => { setTargetGroups((prev) => ({ ...prev, [groupId]: { ...prev[groupId], couponEnabled: enabled }, })); }; const handleCouponTypeChange = (groupId: string, type: string) => { setTargetGroups((prev) => ({ ...prev, [groupId]: { ...prev[groupId], couponType: type }, })); }; const openPreview = (groupId: string) => { setPreviewModal({ open: true, targetGroup: groupId }); }; const summaryOf = (id: string) => { const g = targetGroups[id]; if (!g) return "-"; return g.timing === "absolute" ? g.datetime || "시간 미설정" : relativeTimeOptions[g.relativeRule] || "조건 미설정"; }; const groupKeys = useMemo(() => Object.keys(targetGroupInfo), []); return (

{/* 안내 */}

발송 설정

대상 그룹별/조건별로 자동 발송 설정을 관리하고 활성화된 그룹은 설정된 조건에 따라 자동으로 메시지를 발송합니다.

{/* 카드 그리드 (2열) */}

{groupKeys.map((groupId) => { const info = targetGroupInfo[groupId]; const state = targetGroups[groupId]; const highliteRing = state.enabled ? "ring-2 ring-blue-200 bg-blue-50/30" : ""; const delegateBorder = state.delegatedSend ? "border-violet-200" : ""; return (

{info.name} {/* 대행발송 배지 */} {state.delegatedSend ? "대행발송 ON" : "대행발송 OFF"} {/* 요약 행 (항상 노출) */}

{summaryOf(groupId)}

{/* 활성화 토글 */}

{/* 상태 아이콘 */} {state.enabled ? ( ) : ( )} handleToggleGroup(groupId, enabled)} aria-label="캠페인 활성화" /> {/* 대행발송 토글 (활성화 토글 바로 옆) */}

대행 handleDelegatedToggle(groupId, v)} aria-label="대행발송 설정" />

{/* 발송문구 보기 버튼 */}

{/* 상세 영역: 카드가 활성화된 경우에만 표시 */} {state.enabled && (

발송 시점

{state.timing === "absolute" ? (

발송 일시 handleTimingChange(groupId, "datetime", e.target.value) } />

) : (

발송 조건

)}

{/* 차계부 URL 포함 및 쿠폰 삽입 옵션 */}

{/* 차계부 URL 포함 */}

차계부 URL 포함

메시지에 고객의 차계부 링크를 포함하여 발송합니다

handleCarbookUrlToggle(groupId, includeUrl) } aria-label="차계부 URL 포함" />

{/* 쿠폰 삽입 옵션 */}

{/* 쿠폰 삽입 여부 */}

쿠폰 삽입 여부

메시지에 쿠폰을 포함하여 발송합니다

handleCouponToggle(groupId, enabled)} aria-label="쿠폰 삽입 설정" />

{/* 구분선 */}

{/* 쿠폰 종류 */}

쿠폰 종류

)} ); })}

{/* 전체 자동 발송 설정 */}

전체 자동 발송 설정

활성화 시 모든 자동 캠페인이 발송대기로 남지 않고, 설정된 발송 시점에 자동 발송됩니다.

활성화된 캠페인: {Object.values(targetGroups).filter((g) => g.enabled).length}개 {globalApprovalRequired ? "자동 발송 모드" : "발송 대기"}

{/* 미리보기 다이얼로그 */}

); } [V0_FILE]typescriptreact:file="app/pushmessage/components/effectiveness-tab.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Eye, DollarSign, ArrowUp } from "lucide-react" const effectivenessData = [ { type: "예약", openRate: 85, clickRate: 32, revisitRate: 78 }, { type: "예방정비", openRate: 78, clickRate: 28, revisitRate: 65 }, { type: "이벤트", openRate: 92, clickRate: 45, revisitRate: 58 }, { type: "계절점검", openRate: 73, clickRate: 25, revisitRate: 71 }, { type: "리콜알림", openRate: 96, clickRate: 67, revisitRate: 89 }, ] export default function EffectivenessTab() { return (

{/* Performance Overview */}

전체 열람률

82.4%

업계 평균 대비 +15%

매출 기여도

₩2.8M

이번 달 +23%

{/* Message Type Performance */} 메시지 유형별 성과

{effectivenessData.map((item) => ( ))}

메시지 유형	열람률	재방문율
{item.type}	{item.openRate}%	{item.revisitRate}%

) } [V0_FILE]typescriptreact:file="app/pushmessage/components/manual-send-tab.tsx" "use client"; import { useMemo, useState } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Checkbox } from "@/components/ui/checkbox"; import { Textarea } from "@/components/ui/textarea"; import { Input } from "@/components/ui/input"; import { Filter, LayoutGrid, Send, RotateCcw, Clock } from "lucide-react"; type Segment = { id: string; label: string; count: number; enabled: boolean }; type ViewMode = "cards" | "filters"; type Filters = { vehicleYear: string; vehicleType: string; mileage: string; visitHistory: string; serviceHistory: string; customerGrade: string; }; const DEFAULT_FILTERS: Filters = { vehicleYear: "all", vehicleType: "all", mileage: "all", visitHistory: "all", serviceHistory: "all", customerGrade: "all", }; // helpers function pad(n: number) { return String(n).padStart(2, "0"); } function toLocalInputValue(d: Date) { return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad( d.getMinutes() )}`; } export default function ManualSendTab() { // view & filters const [viewMode, setViewMode] = useState("cards"); const [filters, setFilters] = useState({ ...DEFAULT_FILTERS }); const [filteredCount, setFilteredCount] = useState(null); const [selectedSegIds, setSelectedSegIds] = useState>({}); // message const [message, setMessage] = useState(""); // send schedule const [sendMode, setSendMode] = useState<"now" | "schedule">("now"); const [scheduleAt, setScheduleAt] = useState(""); const minScheduleInput = useMemo(() => { const d = new Date(Date.now() + 5 * 60 * 1000); // now +5m return toLocalInputValue(d); }, []); const isScheduleInvalid = sendMode === "schedule" && (!scheduleAt || new Date(scheduleAt).getTime() < new Date(minScheduleInput).getTime()); // segments const segments: Segment[] = [ { id: "today-in", label: "오늘 입고 고객", count: 8, enabled: true }, { id: "no-app", label: "앱 미설치 고객", count: 337, enabled: true }, { id: "vip", label: "VIP 고객", count: 45, enabled: true }, { id: "lapsed", label: "장기 미방문 고객", count: 126, enabled: true }, { id: "high-mileage", label: "누적 100,000km 이상", count: 210, enabled: true }, ]; // filter chips const hasFiltersApplied = useMemo(() => Object.values(filters).some((v) => v !== "all"), [filters]); const filterChips = useMemo(() => { const chips: string[] = []; if (filters.vehicleYear !== "all") chips.push(`연식:${filters.vehicleYear}`); if (filters.vehicleType !== "all") chips.push(`차종:${filters.vehicleType}`); if (filters.mileage !== "all") chips.push(`주행:${filters.mileage}`); if (filters.visitHistory !== "all") chips.push(`방문:${filters.visitHistory}`); if (filters.serviceHistory !== "all") chips.push(`정비:${filters.serviceHistory}`); if (filters.customerGrade !== "all") chips.push(`등급:${filters.customerGrade}`); return chips; }, [filters]); // counts const selectedSegCount = useMemo(() => { return segments.filter((s) => selectedSegIds[s.id]).reduce((acc, s) => acc + (s.count ?? 0), 0); }, [segments, selectedSegIds]); const totalTargetCount = hasFiltersApplied ? filteredCount ?? 0 : selectedSegCount; // events const handleSegmentToggle = (id: string) => { const seg = segments.find((s) => s.id === id); if (!seg || !seg.enabled) return; setSelectedSegIds((prev) => ({ ...prev, [id]: !prev[id] })); }; const handleApplyFilters = () => { const nonAll = Object.values(filters).filter((v) => v !== "all").length; const mock = Math.max(0, 500 - nonAll * 80); setFilteredCount(mock); setViewMode("cards"); }; const handleResetFilters = () => { setFilters({ ...DEFAULT_FILTERS }); setFilteredCount(null); }; const canSend = totalTargetCount > 0 && message.trim().length > 0 && (sendMode === "now" || !isScheduleInvalid); const handleSend = () => { if (!canSend) return; if (sendMode === "now") { // TODO: send-now API console.info("SEND NOW", { message, targetCount: totalTargetCount }); } else { // TODO: schedule API console.info("SCHEDULE SEND", { message, scheduleAt, targetCount: totalTargetCount }); } }; // templates (t2 인용부호 수정) const templates = [ { id: "t1", title: "앱 설치 안내", body: "차계부 설치하면 예약·알림·차량관리가 한 번에! {coupon} 혜택도 드려요.", }, { id: "t2", title: "정비 완료 안내", body: "정비가 완료되었습니다. 점검·정비 명세서는 ‘하이웨이’ 차계부에서 확인하세요.", }, { id: "t3", title: "방문 감사 안내", body: "방문해주셔서 감사합니다. 감사 쿠폰이 발급되었습니다. 다음 예약 시 적용됩니다.", }, { id: "t4", title: "타이어 프로모션 안내", body: "타이어, 지금 바꿀 타이밍. 빗길 제동 걱정 줄이고 주행은 더 부드럽게, 인트라밴 모터스에서 바로 교체하세요.", }, { id: "t5", title: "안전점검 안내", body: "무상 10분 안전점검 진행 중입니다. 예약하고 안전하게 운행하세요." }, ]; return (

{/* 안내 */}

수동 발송 모드 안내

즉시 발송하거나 예약 발송할 수 있습니다. 발송 전 최종 확인 후 전송됩니다.

{/* 대상 선택 */}

발송 대상 선택

{hasFiltersApplied && ( 필터 적용됨 · {filteredCount ?? 0}명 )} {hasFiltersApplied && ( )}

{viewMode === "cards" && filterChips.length > 0 && (

{filterChips.map((c) => ( {c} ))}

)} {viewMode === "cards" ? (

{segments.map((segment) => ( handleSegmentToggle(segment.id)} >

{segment.label}

{segment.count.toLocaleString()}

))}

) : (

{/* 차량 연식 */}

차량 연식

{/* 차종 */}

차종

{/* 주행거리 */}

주행거리

{/* 방문이력 */}

방문이력

{/* 정비 이력 */}

정비 이력

{/* 고객 등급 */}

고객 등급

)} {/* 템플릿 */} 메시지 템플릿

{templates.map((t) => (

{t.title}

{t.body}

))}

{/* 메시지 & 발송/예약발송 */} 메시지 내용

setMessage(e.target.value)}
                        placeholder="발송할 메시지 내용을 입력하세요…"
                        className="min-h-[9rem]"
                    />

{/* 예약발송 컨트롤 */}
                    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between text-sm">
                        <div className="text-muted-foreground">
                            현재 대상자:{" "}
                            <span className="font-medium text-foreground">{totalTargetCount.toLocaleString()}명</span>
                        </div>

<div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3">
                            <div className="flex items-center gap-2">
                                <span className="text-xs text-muted-foreground">발송 방식</span>
                                <Select value={sendMode} onValueChange={(v) => setSendMode(v as "now" | "schedule")}>
                                    <SelectTrigger className="w-36 h-9">
                                        <SelectValue placeholder="선택" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="now">즉시 발송</SelectItem>
                                        <SelectItem value="schedule">예약 발송</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>

{sendMode === "schedule" && (
                                <div className="flex items-center gap-2">
                                    <Clock className="h-4 w-4 text-muted-foreground" />
                                    <Input
                                        type="datetime-local"
                                        value={scheduleAt}
                                        onChange={(e) => setScheduleAt(e.target.value)}
                                        min={minScheduleInput}
                                        className="h-9 w-56"
                                    />
                                </div>
                            )}
                        </div>
                    </div>

{sendMode === "schedule" && (
                        <div className="flex items-center justify-between">
                            <p className={`text-xs ${isScheduleInvalid ? "text-red-600" : "text-muted-foreground"}`}>
                                * 모든 시간은 Asia/Seoul 기준입니다.{" "}
                                {isScheduleInvalid ? "현재 시각 이후로 설정해주세요." : ""}
                            </p>
                            {!isScheduleInvalid && scheduleAt && (
                                <p className="text-xs text-muted-foreground">
                                    예약 시각: {scheduleAt.replace("T", " ").slice(0, 16)}
                                </p>
                            )}
                        </div>
                    )}

<div className="flex items-center justify-end">
                        <Button onClick={handleSend} disabled={!canSend} className="min-w-32">
                            <Send className="mr-1 h-4 w-4" />
                            {sendMode === "schedule" ? "예약 발송" : "즉시 발송"}
                        </Button>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}
[V0_FILE]typescriptreact:file="app/pushmessage/components/overview-tab.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartContainer, ChartTooltip } from "@/components/ui/chart"
import { Send, Eye, RotateCcw, TrendingUp, ArrowUp } from "lucide-react"
import {
  ResponsiveContainer,
  CartesianGrid,
  XAxis,
  YAxis,
  BarChart,
  Bar,
  LabelList,
} from "recharts"

type WeeklyPoint = { dow: "월" | "화" | "수" | "목" | "금" | "토" | "일"; count: number }

// 패턴: 평일↑, 금 피크, 주말↓
const weeklyMessageData: WeeklyPoint[] = [
  { dow: "월", count: 48 },
  { dow: "화", count: 55 },
  { dow: "수", count: 44 },
  { dow: "목", count: 66 },
  { dow: "금", count: 78 },
  { dow: "토", count: 40 },
  { dow: "일", count: 32 },
]

export default function OverviewTab() {
  return (
    <div className="space-y-6">
      {/* KPI Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center space-x-2">
              <Send className="h-5 w-5 text-blue-600" />
              <div>
                <p className="text-sm font-medium text-muted-foreground">이번 달 총 발송</p>
                <p className="text-2xl font-bold">1,247</p>
                <p className="text-xs text-green-600 flex items-center">
                  <ArrowUp className="h-3 w-3 mr-1" />
                  +12% vs 지난달
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center space-x-2">
              <Eye className="h-5 w-5 text-green-600" />
              <div>
                <p className="text-sm font-medium text-muted-foreground">평균 열람률</p>
                <p className="text-2xl font-bold">82.4%</p>
                <p className="text-xs text-green-600 flex items-center">
                  <ArrowUp className="h-3 w-3 mr-1" />
                  +3.2% vs 지난달
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center space-x-2">
              <RotateCcw className="h-5 w-5 text-orange-600" />
              <div>
                <p className="text-sm font-medium text-muted-foreground">재방문 고객</p>
                <p className="text-2xl font-bold">289</p>
                <p className="text-xs text-green-600 flex items-center">
                  <ArrowUp className="h-3 w-3 mr-1" />
                  +18% vs 지난달
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Weekly Summary Chart */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <TrendingUp className="h-5 w-5 text-blue-600" />
            <span>주간 발송량 요약</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          {/* 카드 밖 넘침 방지 */}
          <div className="w-full h-[300px] overflow-hidden">
            <ChartContainer
              // color 변수 안 씀(테마 의존성 제거)
              config={{ count: { label: "발송 건수", color: "#3b82f6" } }}
              className="h-full"
            >
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={weeklyMessageData}
                  margin={{ top: 16, right: 16, left: 16, bottom: 0 }}
                  barCategoryGap={"28%"}
                >
                  <CartesianGrid vertical={false} strokeDasharray="3 3" />
                  <XAxis
                    dataKey="dow"
                    tickMargin={8}
                    axisLine={false}
                    tickLine={false}
                    interval={0}
                  />
                  <YAxis allowDecimals={false} axisLine={false} tickLine={false} />

<ChartTooltip
                    content={({ active, payload }) => {
                      if (active && payload && payload.length) {
                        const p = payload[0]
                        return (
                          <div className="bg-background border rounded-lg p-3 shadow-lg">
                            <p className="font-medium">{p.payload.dow}요일</p>
                            <p className="text-blue-600">{`발송 건수: ${p.value}건`}</p>
                          </div>
                        )
                      }
                      return null
                    }}
                  />

{/* ✅ 명시적 그라데이션(검정 방지) */}
                  <defs>
                    <linearGradient id="barFill" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#60A5FA" />
                      <stop offset="100%" stopColor="#2563EB" />
                    </linearGradient>
                  </defs>

<Bar
                    dataKey="count"
                    name="발송량"
                    radius={[10, 10, 4, 4]}
                    fill="url(#barFill)"
                    stroke="#2563EB"
                    strokeOpacity={0.9}
                  >
                    <LabelList
                      dataKey="count"
                      position="top"
                      formatter={(v: number) => `${v}`}
                      fill="#2563EB"
                    />
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </ChartContainer>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pushmessage/components/send-management-tab.tsx"
"use client";

import { useEffect, useMemo, useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Settings, Zap, Clock, Send, MessageSquare } from "lucide-react";
import AutoSendTab from "./auto-send-tab";
import SendQueueTab from "./send-queue-tab";
import ManualSendTab from "./manual-send-tab";
import TemplateCampaignCard from "./template-campaign-card";
import TemplateAccordion from "./template-accordion";

/**
 * URL 쿼리 ?tab=automatic|queue|manual|template 를 읽어 초기 탭을 선택하고,
 * 탭 전환 시에도 쿼리를 업데이트(히스토리 변경)합니다.
 */
type TabKey = "automatic" | "queue" | "manual" | "template";

export default function SendManagementTab() {
    const [globalApprovalRequired, setGlobalApprovalRequired] = useState(false);

// --- URL 연동 ---
    const searchParams = useSearchParams();
    const router = useRouter();
    const pathname = usePathname();

const initialTab: TabKey = useMemo(() => {
        const t = (searchParams.get("subtab") ?? "automatic") as TabKey;
        return (["automatic", "queue", "manual", "template"] as const).includes(t) ? t : "automatic";
    }, [searchParams]);

const [tab, setTab] = useState<TabKey>(initialTab);

// 주소창 쿼리가 바뀌면 내부 상태도 동기화
    useEffect(() => {
        setTab(initialTab);
    }, [initialTab]);

const handleTabChange = (next: string) => {
        const nextTab = (next as TabKey) || "automatic";
        setTab(nextTab);

// 쿼리 업데이트 (스크롤 유지, 히스토리 대체)
        const sp = new URLSearchParams(Array.from(searchParams.entries()));
        sp.set("subtab", nextTab);
        router.replace(`${pathname}?${sp.toString()}`, { scroll: false });
    };

return (
        <div className="space-y-6">
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                        <Settings className="h-5 w-5 text-blue-600" />
                        <span>발송 모드 선택</span>
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    {/* value/onValueChange 로 URL과 양방향 연동 */}
                    <Tabs value={tab} onValueChange={handleTabChange} className="space-y-6">
                        <TabsList className="grid w-full grid-cols-4 gap-1">
                            <TabsTrigger
                                value="queue"
                                className="flex items-center justify-center space-x-1 md:space-x-2 text-xs md:text-sm"
                            >
                                <Clock className="h-3 w-3 md:h-4 md:w-4" />
                                <span>발송대기</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="manual"
                                className="flex items-center justify-center space-x-1 md:space-x-2 text-xs md:text-sm"
                            >
                                <Send className="h-3 w-3 md:h-4 md:w-4" />
                                <span>수동 발송</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="automatic"
                                className="flex items-center justify-center space-x-1 md:space-x-2 text-xs md:text-sm"
                            >
                                <Zap className="h-3 w-3 md:h-4 md:w-4" />
                                <span>발송 설정</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="template"
                                className="flex items-center justify-center space-x-1 md:space-x-2 text-xs md:text-sm"
                            >
                                <MessageSquare className="h-3 w-3 md:h-4 md:w-4" />
                                <span>발송문구 설정</span>
                            </TabsTrigger>
                        </TabsList>

<TabsContent value="template">
                            <div className="space-y-6">
                                {/* 안내 */}
                                <div className="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
                                    <h3 className="font-semibold text-orange-900">발송문구 설정</h3>
                                    <p className="text-sm text-orange-700 mt-1">
                                        캠페인별로 제공되는 발송문구를 관리하고 기본 문구를 설정할 수 있습니다. 각
                                        문구는 실제 푸시 메시지 형태로 미리보기할 수 있습니다.
                                    </p>
                                </div>

{/* 아코디언 방식 캠페인 목록 */}
                                <TemplateAccordion />
                            </div>
                        </TabsContent>

<TabsContent value="manual">
                            <ManualSendTab />
                        </TabsContent>
                    </Tabs>
                </CardContent>
            </Card>
        </div>
    );
}
[V0_FILE]typescriptreact:file="app/pushmessage/components/send-queue-tab.tsx"
"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Clock, CheckCircle, Eye, ChevronDown, ChevronUp } from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import RecipientsModal from "./RecipientsModal";
import { DialogDescription } from "@/components/ui/dialog";

export default function SendQueueTab() {
    const [expanded, setExpanded] = useState<string | null>(null);
    const [fullPreview, setFullPreview] = useState<{ open: boolean; title: string; body: string }>({
        open: false,
        title: "",
        body: "",
    });
    type Recipient = {
        id: string;
        customerName: string;
        phone: string;
        vehicleNo: string;
        vehicleName: string;
        lastVisit: string;
        odometer: number;
        tags: string[];
        channels: { push: boolean; sms: boolean; consentAt?: string };
        preferred: "PUSH" | "SMS" | "NONE";
    };

const [recipients, setRecipients] = useState<Recipient[]>([]);
    const [recSummary, setRecSummary] = useState<{
        total: number;
        eligiblePush: number;
        eligibleSms: number;
        optedOut: number;
    }>({ total: 0, eligiblePush: 0, eligibleSms: 0, optedOut: 0 });
    const [recSearch, setRecSearch] = useState("");
    const [recPage, setRecPage] = useState({ page: 1, pageSize: 10 });
    const [recSelected, setRecSelected] = useState<Record<string, boolean>>({});
    const [recipientsOpen, setRecipientsOpen] = useState<{ open: boolean; campaignId: string | null }>({
        open: false,
        campaignId: null,
    });

function openRecipients(campaignId: string) {
        setRecipientsOpen({ open: true, campaignId });
    }

// 샘플 메시지
    const msgRow1 = "고객님, 예약하신 정비가 내일 예정되어 있습니다. 안전한 방문을 위해 잊지 말고 방문 부탁드립니다.";
    const msgRow2 = "여름 장마철 대비 와이퍼/에어컨 필터 점검 안내드립니다. 예약 시 빠른 점검 도와드립니다.";
    const msgRow3 = "서비스 이용해주셔서 감사합니다. 만족도 조사에 참여해주시면 감사하겠습니다.";

const isLong = (txt: string) => txt.length > 200;

return (
        <div className="space-y-6">
            {/* 안내 */}
            <div className="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
                <h3 className="font-semibold text-orange-900">발송 대기 관리</h3>
                <p className="text-sm text-orange-700 mt-1">
                    월별/일별로 예약된 캠페인을 확인하고 발송할 수 있는 명확한 방법을 제공합니다.
                </p>
            </div>

{/* 상단 컨트롤 */}
            <Card>
                <CardContent className="pt-4 pb-4">
                    <div className="flex flex-wrap items-start gap-4">
                        {/* 월 선택 */}
                        <div className="space-y-1">
                            <label className="text-xs font-medium text-muted-foreground">월 선택</label>
                            <Select defaultValue="2025-08">
                                <SelectTrigger className="w-44 h-8">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="2025-06">2025년 06월</SelectItem>
                                    <SelectItem value="2025-07">2025년 07월</SelectItem>
                                    <SelectItem value="2025-08">2025년 08월</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

{/* 오늘 버튼 */}
                        <div className="self-end">
                            <Button variant="outline" className="h-8 px-3 bg-transparent">
                                <Clock className="h-4 w-4 mr-1" />
                                오늘
                            </Button>
                        </div>

{/* 상태 필터 */}
                        <div className="space-y-1">
                            <label className="text-xs font-medium text-muted-foreground">상태 필터</label>
                            <Select defaultValue="all">
                                <SelectTrigger className="w-32 h-8">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="all">전체</SelectItem>
                                    <SelectItem value="waiting">대기</SelectItem>
                                    <SelectItem value="push_scheduled">푸시발송 예정</SelectItem>
                                    <SelectItem value="sms_scheduled">SMS 발송 예정</SelectItem>
                                    <SelectItem value="send_scheduled">발송예정</SelectItem>
                                    <SelectItem value="sent">발송</SelectItem>
                                    <SelectItem value="failed">미발송</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

{/* 캠페인 검색 */}
                        {/*
            <div className="space-y-1 flex-1 min-w-48">
              <label className="text-xs font-medium text-muted-foreground">캠페인명 검색</label>
              <Input placeholder="캠페인명으로 검색..." className="w-full h-10" />
            </div>
            */}
                    </div>
                </CardContent>
            </Card>

{/* 일별 선택 */}
            <Card>
                <CardHeader>
                    <CardTitle className="text-base">일별 선택</CardTitle>
                </CardHeader>
                <CardContent>
                    {((start: number, end: number) => {
                        const Today = 26;
                        const campaignDays = new Set([24, 25, 26, 27, 28]);

return (
                            <>
                                <Row s={1} e={15} />
                                <Row s={16} e={31} />
                            </>
                        );
                    })(1, 31)}

<p className="text-xs text-muted-foreground mt-2">
                        * 오늘(26일)이 강조 표시됩니다. 주황색 점이 있는 날짜에 예약된 캠페인이 있습니다.
                    </p>
                </CardContent>
            </Card>

{/* 캠페인 목록 */}
            <Card>
                <CardHeader className="flex flex-row items-center justify-between">
                    <CardTitle>캠페인 목록 (08월 26일)</CardTitle>
                    <div>
                        <Button variant="outline" size="sm">
                            <CheckCircle className="h-4 w-4 mr-1" />
                            일괄 발송
                        </Button>
                    </div>
                </CardHeader>

<CardContent>
                    <div className="space-y-3">
                        {[
                            {
                                id: "r1",
                                title: "예약",
                                msg: msgRow1,
                                status: "waiting", // 대기
                                time: "10:00",
                                date: "2025-08-26",
                                count: 78,
                            },
                            {
                                id: "r2",
                                title: "여름철 점검",
                                msg: msgRow2,
                                status: "push_scheduled", // 푸시발송 예정
                                time: "14:00",
                                date: "2025-08-26",
                                count: 189,
                            },
                            {
                                id: "r3",
                                title: "해피콜 조사",
                                msg: msgRow3,
                                status: "sms_scheduled", // SMS 발송 예정
                                time: "16:00",
                                date: "2025-08-26",
                                count: 156,
                            },
                            {
                                id: "r4",
                                title: "정기점검 안내",
                                msg: "정기점검 시기가 도래했습니다. 예약 부탁드립니다.",
                                status: "send_scheduled", // 발송예정
                                time: "18:00",
                                date: "2025-08-26",
                                count: 92,
                            },
                            {
                                id: "r5",
                                title: "타이어 교체 안내",
                                msg: "겨울철 타이어 교체 시기입니다.",
                                status: "sent", // 발송
                                time: "09:00",
                                date: "2025-08-25",
                                count: 134,
                            },
                            {
                                id: "r6",
                                title: "이벤트 참여 안내",
                                msg: "신규 이벤트에 참여해보세요.",
                                status: "failed", // 미발송
                                time: "15:00",
                                date: "2025-08-25",
                                count: 67,
                            },
                        ].map((row) => {
                            const getStatusStyle = (status: string) => {
                                switch (status) {
                                    case "waiting":
                                        return "border-gray-200 bg-gray-50";
                                    case "push_scheduled":
                                        return "border-blue-200 bg-blue-50";
                                    case "sms_scheduled":
                                        return "border-green-200 bg-green-50";
                                    case "send_scheduled":
                                        return "border-orange-200 bg-orange-50";
                                    case "sent":
                                        return "border-gray-800 bg-gray-100";
                                    case "failed":
                                        return "border-red-200 bg-red-50";
                                    default:
                                        return "";
                                }
                            };

const getTitleStyle = (status: string) => {
                                switch (status) {
                                    case "waiting":
                                        return "text-gray-900";
                                    case "push_scheduled":
                                        return "text-blue-900";
                                    case "sms_scheduled":
                                        return "text-green-900";
                                    case "send_scheduled":
                                        return "text-orange-900";
                                    case "sent":
                                        return "text-gray-900";
                                    case "failed":
                                        return "text-red-900";
                                    default:
                                        return "";
                                }
                            };

const statusBadge = getStatusBadge(row.status);

return (
                                <div
                                    key={row.id}
                                    className={`grid grid-cols-12 gap-4 items-start p-4 border rounded-lg ${getStatusStyle(
                                        row.status
                                    )}`}
                                >
                                    {/* 1) 체크박스+제목: 2칸 그대로 */}
                                    <div className="col-span-2 flex items-start space-x-2 min-w-0">
                                        <input type="checkbox" className="mt-1 rounded" />
                                        <div className="min-w-0">
                                            <h4 className={`font-medium ${getTitleStyle(row.status)}`}>{row.title}</h4>
                                        </div>
                                    </div>

{/* 2) 메시지: 3칸 → 4칸 */}
                                    <div className="col-span-4 text-sm min-w-0">
                                        <button
                                            onClick={() => setExpanded(expanded === row.id ? null : row.id)}
                                            className="w-full text-left hover:underline flex items-start"
                                            aria-expanded={expanded === row.id}
                                        >
                                            <span className="mr-1 mt-0.5 flex-shrink-0">
                                                {expanded === row.id ? (
                                                    <ChevronUp className="h-4 w-4" />
                                                ) : (
                                                    <ChevronDown className="h-4 w-4" />
                                                )}
                                            </span>
                                            {/* 줄바꿈 허용 + 긴 단어 강제 개행 + 살짝 넓은 행간 */}
                                            <span className="whitespace-pre-line break-words leading-relaxed min-w-0">
                                                {row.msg}
                                            </span>
                                        </button>

{expanded === row.id && (
                                            <div className="mt-2 rounded bg-muted/30 p-3 max-h-48 overflow-auto">
                                                <p className="whitespace-pre-wrap text-sm">{row.msg}</p>
                                                {isLong(row.msg) && (
                                                    <Button
                                                        variant="link"
                                                        size="sm"
                                                        className="px-0 mt-2"
                                                        onClick={() =>
                                                            setFullPreview({
                                                                open: true,
                                                                title: row.title,
                                                                body: row.msg,
                                                            })
                                                        }
                                                    >
                                                        전체보기
                                                    </Button>
                                                )}
                                            </div>
                                        )}
                                    </div>

{/* 3) 예정 대상자 */}
                                    <div className="col-span-2 text-sm pl-1 min-w-0">
                                        <div className="mb-1">
                                            <div className="truncate">
                                                예정 대상자: <span className="font-medium">{row.count}</span>
                                            </div>
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                className="mt-1 w-full bg-white"
                                                onClick={() => openRecipients(row.id)}
                                            >
                                                <Eye className="h-3 w-3 mr-1" />
                                                대상자 보기
                                            </Button>
                                        </div>
                                    </div>

{/* 시간/날짜: col-span-2, 가운데 정렬 */}
                                    <div className="col-span-2 text-sm text-center leading-tight min-w-0">
                                        <div className="font-medium">{row.time}</div>
                                        <div className="text-xs text-muted-foreground mb-1">{row.date}</div>
                                        <Badge variant={statusBadge.variant} className={statusBadge.className}>
                                            {statusBadge.text}
                                        </Badge>
                                    </div>

{/* 6) 버튼: 3칸 → 2칸, 버튼 컴팩트 사이즈 */}
                                    <div className="col-span-2 flex justify-end">
                                        <div className="flex flex-col space-y-1 w-[180px] shrink-0">
                                            {" "}
                                            {/* 220 → 180 */}
                                            <div className="flex space-x-2">
                                                <Button
                                                    size="sm"
                                                    variant="outline"
                                                    className="h-8 px-2 text-xs bg-white flex-1"
                                                >
                                                    푸시발송
                                                </Button>
                                                <Button
                                                    size="sm"
                                                    variant="outline"
                                                    className="h-8 px-2 text-xs bg-white flex-1"
                                                >
                                                    SMS발송
                                                </Button>
                                            </div>
                                            <Button size="sm" variant="default" className="h-8 px-2 text-xs w-full">
                                                <CheckCircle className="h-3 w-3 mr-1" />
                                                전체발송
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </CardContent>
            </Card>
            {/* ── 발송 이력 테이블 (처리 결과: 발송 / 미발송) ── */}
            <Card>
                <CardHeader>
                    <CardTitle className="text-base">발송 이력</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="w-full overflow-x-auto">
                        <table className="w-full border-collapse text-sm">
                            <thead>
                                <tr className="text-muted-foreground text-xs">
                                    <th className="text-left font-medium py-2 px-3">캠페인명</th>
                                    <th className="text-left font-medium py-2 px-3">처리 결과</th>
                                    <th className="text-left font-medium py-2 px-3">발송자</th>
                                    <th className="text-left font-medium py-2 px-3">처리 일시</th>
                                    <th className="text-left font-medium py-2 px-3">대상자 수</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr className="border-t">
                                    <td className="py-3 px-3">예방정비 알림</td>
                                    <td className="py-3 px-3">
                                        {/* 발송(검정), 미발송(빨강) */}
                                        <Badge className="bg-black text-white">발송</Badge>
                                    </td>
                                    <td className="py-3 px-3">김관리자</td>
                                    <td className="py-3 px-3">2025-01-14 15:30</td>
                                    <td className="py-3 px-3">34명</td>
                                </tr>
                                <tr className="border-t">
                                    <td className="py-3 px-3">휴가철 점검</td>
                                    <td className="py-3 px-3">
                                        <Badge variant="destructive">미발송</Badge>
                                    </td>
                                    <td className="py-3 px-3">이매니저</td>
                                    <td className="py-3 px-3">2025-01-14 11:20</td>
                                    <td className="py-3 px-3">28명</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

{/* 하단 안내 */}
                    <div className="mt-4 pt-3 border-t">
                        <div className="flex items-center justify-between">
                            <Button variant="ghost" size="sm">
                                <Eye className="h-4 w-4 mr-1" />더 보기
                            </Button>
                        </div>
                    </div>
                </CardContent>
            </Card>

{/* 전체보기 모달 */}
            <Dialog open={fullPreview.open} onOpenChange={(open) => setFullPreview({ ...fullPreview, open })}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>{fullPreview.title}</DialogTitle>
                        <DialogDescription className="sr-only">
                            선택한 캠페인 메시지의 전체 내용을 확인하는 모달입니다.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="p-2">
                        <p className="whitespace-pre-wrap text-sm">{fullPreview.body}</p>
                    </div>
                </DialogContent>
            </Dialog>

{/* Recipients modal functionality can be added later with proper component */}
            <RecipientsModal
                open={recipientsOpen.open}
                campaignId={recipientsOpen.campaignId}
                onOpenChange={(open) => setRecipientsOpen((s) => ({ ...s, open }))}
            />
        </div>
    );
}
[V0_FILE]typescriptreact:file="app/pushmessage/components/template-accordion.tsx"
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ChevronDown, ChevronRight, Star, Smartphone, Zap, Clock, Send, Car, UserCheck, Calendar } from "lucide-react";

interface Template {
    id: string;
    text: string;
    isDefault: boolean;
}

interface Campaign {
    id: string;
    name: string;
    icon: React.ReactNode;
    templates: Template[];
}

export default function TemplateAccordion() {
    const [campaigns, setCampaigns] = useState<Campaign[]>([
        {
            id: "preventive-maintenance",
            name: "예방정비 고객",
            icon: <Zap className="h-5 w-5" />,
            templates: [
                {
                    id: "1",
                    text: "정기 점검 시기가 되었습니다. 차량 안전을 위해 예방정비를 받아보세요.",
                    isDefault: true,
                },
                {
                    id: "2",
                    text: "고객님의 차량 점검 시기입니다. 예약하시면 무료 진단 서비스를 제공해드립니다.",
                    isDefault: false,
                },
                {
                    id: "3",
                    text: "안전 점검으로 더 오래 타세요! 지금 예약하시면 특별 할인 혜택을 드립니다.",
                    isDefault: false,
                },
            ],
        },
        {
            id: "insurance-expiration",
            name: "보험만료 고객",
            icon: <Clock className="h-5 w-5" />,
            templates: [
                {
                    id: "4",
                    text: "고객님의 자동차보험이 곧 만료됩니다. 갱신 상담을 위해 연락드리겠습니다.",
                    isDefault: true,
                },
                {
                    id: "5",
                    text: "보험 만료 전 미리 준비하세요. 더 좋은 조건으로 갱신 도와드립니다.",
                    isDefault: false,
                },
            ],
        },
        {
            id: "happy-call",
            name: "해피콜 고객",
            icon: <Send className="h-5 w-5" />,
            templates: [
                {
                    id: "6",
                    text: "서비스 이용해주셔서 감사합니다. 만족도 조사에 참여해주시면 감사하겠습니다.",
                    isDefault: true,
                },
                { id: "7", text: "서비스는 어떠셨나요? 소중한 의견을 들려주세요.", isDefault: false },
            ],
        },
        {
            id: "inspection-due",
            name: "검사대상 고객",
            icon: <Car className="h-5 w-5" />,
            templates: [
                { id: "8", text: "환경검사 기한이 다가오고 있습니다. 미리 검사를 받으시기 바랍니다.", isDefault: true },
                { id: "9", text: "검사 기간 내 빠른 검사로 번거로움을 줄이세요.", isDefault: false },
            ],
        },
        {
            id: "new-reservations",
            name: "신규예약 고객",
            icon: <Calendar className="h-5 w-5" />,
            templates: [
                {
                    id: "10",
                    text: "고객님, 예약하신 정비가 내일 예정되어 있습니다. 안전한 방문을 위해 잊지 말고 방문 부탁드립니다.",
                    isDefault: true,
                },
                { id: "11", text: "예약 확인 메시지입니다. 약속 시간에 맞춰 방문해 주세요.", isDefault: false },
            ],
        },
    ]);

const [expandedCampaign, setExpandedCampaign] = useState<string | null>(null);
    const [previewModal, setPreviewModal] = useState({ open: false, template: "", campaignName: "" });

const handleToggleExpand = (campaignId: string) => {
        setExpandedCampaign(expandedCampaign === campaignId ? null : campaignId);
    };

const handleSetDefault = (campaignId: string, templateId: string) => {
        setCampaigns((prev) =>
            prev.map((campaign) =>
                campaign.id === campaignId
                    ? {
                          ...campaign,
                          templates: campaign.templates.map((template) => ({
                              ...template,
                              isDefault: template.id === templateId,
                          })),
                      }
                    : campaign
            )
        );
    };

const handlePreview = (campaignName: string, text: string) => {
        setPreviewModal({ open: true, template: text, campaignName });
    };

return (
        <>
            <div className="space-y-2">
                {campaigns.map((campaign) => {
                    const isExpanded = expandedCampaign === campaign.id;
                    const defaultTemplate = campaign.templates.find((t) => t.isDefault);

return (
                        <div key={campaign.id} className="border border-gray-200 rounded-lg overflow-hidden">
                            {/* 아코디언 헤더 */}
                            <div
                                className="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors"
                                onClick={() => handleToggleExpand(campaign.id)}
                            >
                                <div className="flex items-center gap-3">
                                    {isExpanded ? (
                                        <ChevronDown className="h-4 w-4 text-gray-500" />
                                    ) : (
                                        <ChevronRight className="h-4 w-4 text-gray-500" />
                                    )}
                                    {campaign.icon}
                                    <span className="font-medium">{campaign.name}</span>
                                    <Badge variant="outline" className="text-xs">
                                        {campaign.templates.length}개 문구
                                    </Badge>
                                </div>
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        defaultTemplate && handlePreview(campaign.name, defaultTemplate.text);
                                    }}
                                >
                                    <Smartphone className="h-4 w-4 mr-1" />
                                    미리보기
                                </Button>
                            </div>

{/* 아코디언 내용 */}
                            {isExpanded && (
                                <div className="p-4 bg-white border-t border-gray-200">
                                    <div className="space-y-3">
                                        {campaign.templates.map((template, index) => (
                                            <div
                                                key={template.id}
                                                className={`p-3 border rounded-lg ${
                                                    template.isDefault
                                                        ? "border-blue-300 bg-blue-50"
                                                        : "border-gray-200"
                                                }`}
                                            >
                                                <div className="flex items-center gap-2 mb-2">
                                                    <input
                                                        type="radio"
                                                        name={`template-${campaign.id}`}
                                                        checked={template.isDefault}
                                                        onChange={() => handleSetDefault(campaign.id, template.id)}
                                                        className="mt-0.5"
                                                    />
                                                    <label className="font-medium text-sm">
                                                        문구 {index + 1}
                                                        {template.isDefault && (
                                                            <Star className="inline h-4 w-4 text-yellow-500 ml-1" />
                                                        )}
                                                    </label>
                                                    {template.isDefault && (
                                                        <Badge variant="default" className="text-xs">
                                                            기본
                                                        </Badge>
                                                    )}
                                                </div>
                                                <p className="text-sm text-gray-700 leading-relaxed pl-6">
                                                    {template.text}
                                                </p>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>

{/* 푸시 메시지 미리보기 다이얼로그 */}
            <Dialog open={previewModal.open} onOpenChange={(open) => setPreviewModal({ ...previewModal, open })}>
                <DialogContent className="max-w-sm">
                    <DialogHeader>
                        <DialogTitle className="flex items-center gap-2">
                            <Smartphone className="h-5 w-5" />
                            푸시 메시지 미리보기
                        </DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4">
                        {/* 스마트폰 프레임 */}
                        <div className="mx-auto w-full max-w-xs">
                            <div className="bg-black rounded-3xl p-2">
                                <div className="bg-white rounded-2xl p-4 space-y-3">
                                    {/* 상태바 */}
                                    <div className="flex justify-between items-center text-xs text-gray-600">
                                        <span>9:41</span>
                                        <div className="flex gap-1">
                                            <div className="w-4 h-2 bg-green-500 rounded-sm"></div>
                                            <span>100%</span>
                                        </div>
                                    </div>

{/* 푸시 알림 */}
                                    <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
                                        <div className="flex items-start gap-3">
                                            <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
                                                <span className="text-white text-xs font-bold">A</span>
                                            </div>
                                            <div className="flex-1">
                                                <div className="flex items-center justify-between mb-1">
                                                    <span className="font-semibold text-sm">AutoVan</span>
                                                    <span className="text-xs text-gray-500">지금</span>
                                                </div>
                                                <p className="text-sm text-gray-800 leading-relaxed">
                                                    {previewModal.template}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

<div className="text-center">
                            <p className="text-xs text-gray-500">
                                {previewModal.campaignName} - 실제 고객의 스마트폰에서 보이는 모습입니다
                            </p>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
}
[V0_FILE]typescriptreact:file="app/pushmessage/components/template-campaign-card.tsx"
"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Star, Smartphone } from "lucide-react";

interface Template {
    id: string;
    text: string;
    isDefault: boolean;
}

interface TemplateCampaignCardProps {
    campaignName: string;
    campaignIcon: React.ReactNode;
    templates: Template[];
}

export default function TemplateCampaignCard({
    campaignName,
    campaignIcon,
    templates: initialTemplates,
}: TemplateCampaignCardProps) {
    const [templates, setTemplates] = useState<Template[]>(initialTemplates);
    const [previewModal, setPreviewModal] = useState({ open: false, template: "" });

const handleSetDefault = (templateId: string) => {
        setTemplates((prev) => prev.map((t) => ({ ...t, isDefault: t.id === templateId })));
    };

const handlePreview = (text: string) => {
        setPreviewModal({ open: true, template: text });
    };

const defaultTemplate = templates.find((t) => t.isDefault);

return (
        <>
            <Card>
                <CardHeader className="pb-4">
                    <div className="flex items-center justify-between">
                        <CardTitle className="flex items-center space-x-2">
                            {campaignIcon}
                            <span>{campaignName}</span>
                        </CardTitle>
                        <div className="flex gap-2">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => defaultTemplate && handlePreview(defaultTemplate.text)}
                            >
                                <Smartphone className="h-4 w-4 mr-1" />
                                미리보기
                            </Button>
                        </div>
                    </div>
                </CardHeader>
                <CardContent className="space-y-4">
                    {templates.map((template) => (
                        <div
                            key={template.id}
                            className={`p-4 border rounded-lg ${
                                template.isDefault ? "border-blue-300 bg-blue-50" : "border-gray-200"
                            }`}
                        >
                            <div className="flex items-start justify-between mb-2">
                                <div className="flex items-center gap-2">
                                    <input
                                        type="radio"
                                        name={`template-${campaignName}`}
                                        checked={template.isDefault}
                                        onChange={() => handleSetDefault(template.id)}
                                        className="mt-1"
                                    />
                                    <label className="font-medium text-sm">
                                        문구 {templates.indexOf(template) + 1}
                                        {template.isDefault && <Star className="inline h-4 w-4 text-yellow-500 ml-1" />}
                                    </label>
                                    {template.isDefault && (
                                        <Badge variant="default" className="text-xs">
                                            기본
                                        </Badge>
                                    )}
                                </div>
                            </div>
                            <p className="text-sm text-gray-700 leading-relaxed">{template.text}</p>
                        </div>
                    ))}
                </CardContent>
            </Card>

<div className="text-center">
                            <p className="text-xs text-gray-500">실제 고객의 스마트폰에서 보이는 모습입니다</p>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
}
[V0_FILE]typescriptreact:file="app/pushmessage/components/trends-tab.tsx"
"use client";

import { useMemo, useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
import { TrendingUp, BarChart3, Calendar } from "lucide-react";
import { ResponsiveContainer, CartesianGrid, XAxis, YAxis, Line, LineChart, Bar, BarChart, LabelList } from "recharts";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

/* -------------------- Mock Data -------------------- */
const dailyMessageData = [
    { day: 1, count: 45 },
    { day: 2, count: 52 },
    { day: 3, count: 38 },
    { day: 4, count: 67 },
    { day: 5, count: 73 },
    { day: 6, count: 41 },
    { day: 7, count: 29 },
    { day: 8, count: 58 },
    { day: 9, count: 64 },
    { day: 10, count: 71 },
    { day: 11, count: 55 },
    { day: 12, count: 48 },
    { day: 13, count: 62 },
    { day: 14, count: 39 },
    { day: 15, count: 76 },
    { day: 16, count: 68 },
    { day: 17, count: 54 },
    { day: 18, count: 43 },
    { day: 19, count: 59 },
    { day: 20, count: 72 },
    { day: 21, count: 47 },
    { day: 22, count: 65 },
    { day: 23, count: 51 },
    { day: 24, count: 58 },
    { day: 25, count: 44 },
    { day: 26, count: 69 },
    { day: 27, count: 53 },
    { day: 28, count: 61 },
    { day: 29, count: 46 },
    { day: 30, count: 57 },
];

const messageTypeData = [
    { type: "예약", count: 234, color: "#22c55e" },
    { type: "예방정비", count: 156, color: "#3b82f6" },
    { type: "이벤트", count: 89, color: "#a855f7" },
    { type: "계절점검", count: 67, color: "#f59e0b" },
    { type: "리콜알림", count: 23, color: "#ef4444" },
].sort((a, b) => b.count - a.count);

/* -------------------- Simple Trend (7-day MA only) -------------------- */
type Day = { day: number; count: number };

return (
        <ChartContainer config={{ ma7: { label: "7일 평균", color: "#2563EB" } }} className="h-[280px]">
            {chartMounted ? (
                <ResponsiveContainer>
                    <LineChart data={ma7} margin={{ top: 6, right: 8, left: 0, bottom: 0 }}>
                        <CartesianGrid vertical={false} strokeDasharray="3 3" />
                        <XAxis dataKey="day" tickMargin={6} />
                        <YAxis allowDecimals={false} domain={["dataMin-2", "dataMax+2"]} />
                        <ChartTooltip
                            content={({ active, payload, label }) =>
                                active && payload?.length ? (
                                    <div className="bg-background border rounded-lg p-2 shadow">
                                        <div className="font-medium">{label}일</div>
                                        <div className="text-blue-600">7일 평균: {payload[0].value}건</div>
                                    </div>
                                ) : null
                            }
                        />
                        <Line
                            type="monotone"
                            dataKey="ma7"
                            stroke="#2563EB"
                            strokeWidth={3}
                            dot={false}
                            activeDot={{ r: 3 }}
                        />
                    </LineChart>
                </ResponsiveContainer>
            ) : (
                <div className="h-full flex items-center justify-center">
                    <div className="text-muted-foreground">차트 로딩 중...</div>
                </div>
            )}
        </ChartContainer>
    );
}

/* -------------------- Page -------------------- */
export default function TrendsTab() {
    const now = new Date();
    const [year, setYear] = useState(now.getFullYear());
    const [month, setMonth] = useState(now.getMonth()); // 0~11
    const [chartMounted, setChartMounted] = useState(false);

useEffect(() => {
        // 컴포넌트가 마운트된 후 차트를 렌더링
        const timer = setTimeout(() => {
            setChartMounted(true);
        }, 100);
        return () => clearTimeout(timer);
    }, []);

// 간단한 시드 기반 mock 생성 (연/월마다 안정적으로 동일한 값)
    const dailyCalendar = useMemo(() => {
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        const phase = (year * 12 + month) % 12;
        const arr = Array.from({ length: daysInMonth }, (_, i) => {
            const day = i + 1;
            const base = 50 + 8 * Math.sin((day + phase) / 3); // 완만한 파형
            const noise = ((day * 37 + phase * 17) % 11) - 5; // -5 ~ +5
            const weekend = new Date(year, month, day).getDay() % 6 === 0 ? -6 : 0; // 토/일 약간 감소
            const count = Math.max(10, Math.round(base + noise + weekend));
            return { day, count };
        });
        return arr;
    }, [year, month]);

const firstWeekday = useMemo(
        () => new Date(year, month, 1).getDay(), // 0:일 ~ 6:토
        [year, month]
    );
    const daysInMonth = useMemo(() => new Date(year, month + 1, 0).getDate(), [year, month]);

// 셀 렌더링을 위해 빈칸 + 일수 배열
    const leadingEmpty = Array.from({ length: firstWeekday });
    const dayCells = Array.from({ length: daysInMonth }, (_, i) => i + 1);

const years = useMemo(() => {
        const y = now.getFullYear();
        return Array.from({ length: 7 }, (_, k) => y - 3 + k); // [y-3 ... y+3]
    }, [now]);

const months = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];

// 월 총 건수 계산
    const monthlyTotal = useMemo(() => {
        return dailyCalendar.reduce((sum, day) => sum + day.count, 0);
    }, [dailyCalendar]);

return (
        <div className="space-y-6">
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                        <TrendingUp className="h-5 w-5 text-blue-600" />
                        <span>월별 발송 현황</span>
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        {/* A. 가장 깔끔한 트렌드 */}
                        <div className="space-y-4">
                            <h3 className="text-lg font-semibold flex items-center space-x-2">
                                <TrendingUp className="h-4 w-4" />
                                <span>일별 발송량 추이</span>
                            </h3>
                            <DailyTrendSimple daily={dailyMessageData} chartMounted={chartMounted} />
                        </div>

{/* B. 메시지 유형별 발송량 */}
                        <div className="space-y-4">
                            <h3 className="text-lg font-semibold flex items-center space-x-2">
                                <BarChart3 className="h-4 w-4" />
                                <span>메시지 유형별 발송량</span>
                            </h3>

<ChartContainer
                                config={{ count: { label: "발송 건수", color: "#3B82F6" } }}
                                className="h-[280px]"
                            >
                                {chartMounted ? (
                                    <ResponsiveContainer>
                                        <BarChart
                                            data={messageTypeData}
                                            layout="vertical"
                                            margin={{ top: 8, right: 24, left: 12, bottom: 0 }}
                                            barCategoryGap={12}
                                        >
                                            <CartesianGrid horizontal strokeDasharray="3 3" />
                                            <XAxis type="number" allowDecimals={false} />
                                            <YAxis
                                                type="category"
                                                dataKey="type"
                                                width={100}
                                                tickLine={false}
                                                axisLine={false}
                                            />
                                            <ChartTooltip
                                                content={({ active, payload }) =>
                                                    active && payload?.length ? (
                                                        <div className="bg-background border rounded-lg p-3 shadow-lg">
                                                            <p className="font-medium">{payload[0].payload.type}</p>
                                                            <p className="text-blue-600">
                                                                발송 건수: {payload[0].value}건
                                                            </p>
                                                        </div>
                                                    ) : null
                                                }
                                            />
                                            <Bar
                                                dataKey="count"
                                                name="발송량"
                                                fill="url(#typeFill)"
                                                radius={[6, 6, 6, 6]}
                                            >
                                                <LabelList
                                                    dataKey="count"
                                                    position="right"
                                                    formatter={(v: number) => `${v}`}
                                                    fill="#1D4ED8"
                                                />
                                            </Bar>
                                            <defs>
                                                <linearGradient id="typeFill" x1="0" y1="0" x2="1" y2="0">
                                                    <stop offset="0%" stopColor="#93C5FD" />
                                                    <stop offset="100%" stopColor="#3B82F6" />
                                                </linearGradient>
                                            </defs>
                                        </BarChart>
                                    </ResponsiveContainer>
                                ) : (
                                    <div className="h-full flex items-center justify-center">
                                        <div className="text-muted-foreground">차트 로딩 중...</div>
                                    </div>
                                )}
                            </ChartContainer>
                        </div>
                    </div>
                </CardContent>
            </Card>

{/* Calendar View – 년/월 선택 시 달력 갱신 */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center justify-between">
                        <span className="flex items-center space-x-2">
                            <Calendar className="h-5 w-5 text-purple-600" />
                            <span>캘린더 뷰</span>
                        </span>

{/* 년/월 선택 */}
                        <div className="flex items-center gap-2">
                            <Select value={String(year)} onValueChange={(v) => setYear(parseInt(v))}>
                                <SelectTrigger className="w-[110px]">
                                    <SelectValue placeholder="연도" />
                                </SelectTrigger>
                                <SelectContent>
                                    {years.map((y) => (
                                        <SelectItem key={y} value={String(y)}>
                                            {y}년
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>

<Select value={String(month)} onValueChange={(v) => setMonth(parseInt(v))}>
                                <SelectTrigger className="w-[100px]">
                                    <SelectValue placeholder="월" />
                                </SelectTrigger>
                                <SelectContent>
                                    {months.map((m, idx) => (
                                        <SelectItem key={m} value={String(idx)}>
                                            {m}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                    </CardTitle>

{/* 월 총 건수 표시 */}
                    <div className="flex justify-end mt-2 pt-2 border-t">
                        <div className="flex items-center gap-2">
                            <span className="text-2xl font-bold text-primary">{monthlyTotal.toLocaleString()}</span>
                            <span className="text-sm text-muted-foreground">건</span>
                        </div>
                    </div>
                </CardHeader>

{/* 달력 그리드 */}
                    <div className="grid grid-cols-7 gap-2 text-center">
                        {/* 앞쪽 빈칸 */}
                        {leadingEmpty.map((_, i) => (
                            <div key={`empty-${i}`} className="p-2 rounded border border-transparent" />
                        ))}

{/* 실제 날짜 셀 */}
                        {dayCells.map((day) => {
                            const count = dailyCalendar[day - 1]?.count ?? 0;
                            const dow = (firstWeekday + (day - 1)) % 7; // 0:일~6:토
                            const isWeekend = dow === 0 || dow === 6;
                            return (
                                <div
                                    key={day}
                                    className={`p-2 border rounded hover:bg-muted/50 cursor-pointer text-left ${
                                        isWeekend ? "bg-muted/20" : ""
                                    }`}
                                >
                                    <div className="text-sm font-medium">{day}</div>
                                    <div className="text-xs text-muted-foreground">{count}건</div>
                                </div>
                            );
                        })}
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}
[V0_FILE]typescriptreact:file="app/pushmessage/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/pushmessage/page.tsx"
"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import SharedHeader from "@/components/shared-header";
import OverviewTab from "./components/overview-tab";
import SendManagementTab from "./components/send-management-tab";
import TrendsTab from "./components/trends-tab";
import EffectivenessTab from "./components/effectiveness-tab";
import { useSearchParams, useRouter, usePathname } from "next/navigation";

export default function PushMessageManagement() {
    const searchParams = useSearchParams();
    const router = useRouter();
    const pathname = usePathname();
    const tab = searchParams.get("tab") || "overview";

return (
        <div className="min-h-screen bg-background">
            <SharedHeader />

<div className="pt-16 md:pt-20 p-4 md:p-6">
                <div className="max-w-7xl mx-auto px-2 md:px-6">
                    <div className="ml-0 mr-0">
                        <div className="mb-8 mt-4">
                            <h1 className="text-3xl font-bold text-foreground">푸시 메시지 관리</h1>
                            <p className="text-muted-foreground mt-2">
                                고객 맞춤형 자동 푸시 메시지로 서비스 품질을 향상시키세요
                            </p>
                        </div>

<TabsContent value="effectiveness">
                                <EffectivenessTab />
                            </TabsContent>
                        </Tabs>
                    </div>
                </div>
            </div>
        </div>
    );
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/common-send-popup.tsx"
"use client";

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { X, Zap, FileText, Eye, Users } from "lucide-react";
import { useState } from "react";

interface CommonSendPopupProps {
    isOpen: boolean;
    onClose: () => void;
    title: string;
    icon?: React.ReactNode;
    description: string;
    totalTargets: number;
    expectedAmount?: number;
    targetButtonText?: string;
    onTargetView?: () => void;
    onPreview: () => void;
    onSend: () => void;
    isLoading?: boolean;
    // 미리보기 관련 props 추가
    previewContent?: {
        title: string;
        message: string;
        additionalInfo?: string[];
    };
    // 고객리스트 관련 props 추가
    customerList?: {
        id: string;
        name: string;
        phone: string;
        vehicle: string;
        plateNo: string;
        lastVisit: string;
    }[];
}

export default function CommonSendPopup({
    isOpen,
    onClose,
    title,
    icon = <Zap className="h-5 w-5" />,
    description,
    totalTargets,
    expectedAmount,
    targetButtonText = "대상자 상세 보기",
    onTargetView,
    onPreview,
    onSend,
    isLoading = false,
    previewContent,
    customerList,
}: CommonSendPopupProps) {
    const [activeTab, setActiveTab] = useState("info");

const handlePreview = () => {
        if (previewContent) {
            setActiveTab("preview");
        } else {
            onPreview();
        }
    };

// 기본 정보 콘텐츠를 별도 컴포넌트로 분리
    const InfoContent = () => (
        <div className="space-y-4">
            {/* Description */}
            <div className="space-y-2">
                <div className="flex items-center gap-2 text-sm font-medium">
                    <span>📄</span>
                    <span>설명</span>
                </div>
                <div className="text-xs text-muted-foreground leading-relaxed p-2 bg-muted/20 rounded border">
                    {description}
                </div>
            </div>

{/* Summary Card */}
            <Card className="bg-muted/30">
                <CardContent className="px-4 py-3">
                    <div className="text-sm font-medium text-center">
                        총 대상자 <span className="font-bold text-primary">{totalTargets}명</span>
                        {expectedAmount && (
                            <>
                                {" · "}예상 절감액{" "}
                                <span className="font-bold text-primary">{expectedAmount.toLocaleString()}원</span>
                            </>
                        )}
                    </div>
                </CardContent>
            </Card>

{/* Target Confirmation */}
            {(onTargetView || customerList) && (
                <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm font-medium">
                        <span>👥</span>
                        <span>대상자</span>
                    </div>
                    {customerList && customerList.length > 0 ? (
                        <div className="space-y-2">
                            <div className="text-xs text-muted-foreground">
                                총 {totalTargets}명의 대상자 (최대 20명까지 표시)
                            </div>
                            <div className="max-h-40 overflow-y-auto border rounded-md bg-muted/20">
                                <div className="text-xs">
                                    {/* 헤더 */}
                                    <div className="grid grid-cols-12 gap-1 p-2 border-b bg-muted/50 font-medium text-muted-foreground">
                                        <div className="col-span-2">이름</div>
                                        <div className="col-span-3">차량</div>
                                        <div className="col-span-2">번호판</div>
                                        <div className="col-span-3">연락처</div>
                                        <div className="col-span-2">최근방문</div>
                                    </div>
                                    {/* 데이터 행들 */}
                                    {customerList.slice(0, 20).map((customer, index) => (
                                        <div
                                            key={customer.id}
                                            className={`grid grid-cols-12 gap-1 p-2 border-b last:border-b-0 hover:bg-white/50 ${
                                                index % 2 === 0 ? "bg-white/30" : "bg-transparent"
                                            }`}
                                        >
                                            <div className="col-span-2 font-medium truncate">{customer.name}</div>
                                            <div className="col-span-3 truncate">{customer.vehicle}</div>
                                            <div className="col-span-2 truncate">{customer.plateNo}</div>
                                            <div className="col-span-3 truncate">{customer.phone}</div>
                                            <div className="col-span-2 truncate text-muted-foreground">
                                                {customer.lastVisit}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                                {customerList.length > 20 && (
                                    <div className="p-2 text-center text-xs text-muted-foreground bg-muted/30 border-t">
                                        + {customerList.length - 20}명 더 있음
                                    </div>
                                )}
                            </div>
                        </div>
                    ) : onTargetView ? (
                        <Button variant="outline" onClick={onTargetView} className="w-full justify-start gap-2">
                            <Users className="h-4 w-4" />
                            {targetButtonText} {totalTargets}명
                        </Button>
                    ) : null}
                </div>
            )}
        </div>
    );

return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="w-[600px] h-[650px] p-0 gap-0 fixed-size" showCloseButton={false}>
                {/* Header */}
                <DialogHeader className="px-6 py-4 border-b border-border">
                    <div className="flex items-center justify-between">
                        <DialogTitle className="flex items-center gap-2 text-lg font-semibold">
                            {icon}
                            {title}
                        </DialogTitle>
                        <Button variant="ghost" size="sm" onClick={onClose} className="h-6 w-6 p-0">
                            <X className="h-4 w-4" />
                        </Button>
                    </div>
                </DialogHeader>

{/* Content - 조건부로 탭 또는 직접 콘텐츠 표시 */}
                {previewContent ? (
                    <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full flex flex-col flex-1">
                        <div className="px-6 pt-4">
                            <TabsList className="grid w-full grid-cols-2">
                                <TabsTrigger value="info">대상자 보기</TabsTrigger>
                                <TabsTrigger value="preview">발송문구보기</TabsTrigger>
                            </TabsList>
                        </div>

<TabsContent value="preview" className="px-6 py-4 mt-0 flex-1">
                            <div className="h-[420px]">
                                <div className="space-y-3">
                                    <Card className="border-2 border-dashed border-gray-300">
                                        <CardContent className="p-4">
                                            <div className="space-y-3">
                                                <div className="text-sm">
                                                    <div className="font-medium text-gray-900 mb-2">
                                                        {previewContent.title}
                                                    </div>
                                                    <div className="text-gray-700 whitespace-pre-wrap leading-relaxed">
                                                        {previewContent.message}
                                                    </div>
                                                </div>

{/* 추가 정보 표시 */}
                                                {previewContent.additionalInfo &&
                                                    previewContent.additionalInfo.length > 0 && (
                                                        <div className="pt-2 border-t border-gray-200">
                                                            {previewContent.additionalInfo.map((info, index) => (
                                                                <div key={index} className="text-xs text-blue-600 mb-1">
                                                                    • {info}
                                                                </div>
                                                            ))}
                                                        </div>
                                                    )}
                                            </div>
                                        </CardContent>
                                    </Card>

<div className="text-xs text-muted-foreground">
                                        * 실제 발송 시 개인화된 정보(고객명, 차량정보 등)가 자동으로 치환됩니다.
                                    </div>
                                </div>
                            </div>
                        </TabsContent>
                    </Tabs>
                ) : (
                    <div className="px-6 py-4 flex-1">
                        <div className="h-[490px]">
                            <InfoContent />
                        </div>
                    </div>
                )}

{/* Footer */}
                <div className="px-6 py-4 border-t border-border">
                    <div className="flex items-center justify-between gap-3">
                        {!previewContent && (
                            <Button variant="outline" onClick={handlePreview} className="gap-2">
                                <Eye className="h-4 w-4" />
                                미리보기
                            </Button>
                        )}
                        <div className={`flex gap-2 ${previewContent ? "ml-auto" : ""}`}>
                            <Button variant="outline" onClick={onClose}>
                                취소
                            </Button>
                            <Button
                                onClick={onSend}
                                disabled={isLoading}
                                className="bg-primary hover:bg-primary-hover text-white"
                            >
                                {isLoading ? "발송 중..." : "발송"}
                            </Button>
                        </div>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}
[V0_FILE]typescriptreact:file="components/shared-header.tsx"
"use client";

import { Button } from "@/components/ui/button";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Settings } from "lucide-react";

const RIGHT_NAV = [
    {
        label: "차계부 관리",
        mobileLabel: "차계부",
        href: "/carbook",
    },
    {
        label: "푸시 메시지 관리",
        mobileLabel: "푸시메시지",
        href: "/pushmessage",
    },
    {
        label: "프리미엄 AI 고객관리",
        mobileLabel: "AI고객관리",
        href: "/analysis",
    },
];

// 설정 링크 (추후 실제 URL로 변경 예정)
const SETTINGS_URL = "#"; // 실제 링크로 교체 예정

export default function SharedHeader() {
    const pathname = usePathname();

return (
        <header className="fixed top-0 left-0 right-0 z-50 bg-background border-b border-border">
            <div className="max-w-7xl mx-auto px-3 md:px-6 py-3 md:py-4">
                <div className="flex items-center justify-between">
                    <Link href="/" className="flex items-center gap-2 md:gap-3">
                        <svg
                            width="32"
                            height="32"
                            viewBox="0 0 36 36"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            className="flex-shrink-0 md:w-9 md:h-9"
                        >
                            <rect width="36" height="36" rx="4" fill="url(#paint0_linear_3_12)" />
                            <path
                                d="M15.234 27.6564L8.966 16.8C8.5811 16.1333 9.06223 15.3 9.83203 15.3H16.1C16.6523 15.3 17.1 15.7477 17.1 16.3V27.1564C17.1 28.1795 15.7455 28.5424 15.234 27.6564Z"
                                fill="white"
                            />
                            <path
                                d="M18.9 26.919V7.91802C18.9 7.17464 19.6823 6.69114 20.3472 7.02359L27.0564 10.3782C27.5301 10.615 27.737 11.1801 27.5283 11.6668L20.819 27.3131C20.3905 28.3124 18.9 28.0063 18.9 26.919Z"
                                fill="white"
                            />
                            <defs>
                                <linearGradient
                                    id="paint0_linear_3_12"
                                    x1="0"
                                    y1="0"
                                    x2="36"
                                    y2="36"
                                    gradientUnits="userSpaceOnUse"
                                >
                                    <stop stopColor="#00E3D7" />
                                    <stop offset="1" stopColor="#0072B9" />
                                </linearGradient>
                            </defs>
                        </svg>
                        <span className="text-lg md:text-2xl font-bold text-foreground">AutoVan</span>
                    </Link>

<div className="flex items-center gap-2">
                        <nav className="flex items-center space-x-1 md:space-x-6">
                            {RIGHT_NAV.map((item) => {
                                const isActive = pathname.startsWith(item.href);
                                return (
                                    <Link key={item.href} href={item.href}>
                                        <Button
                                            variant={isActive ? "default" : "ghost"}
                                            className="text-xs md:text-sm font-medium px-2 md:px-4 py-1 md:py-2 h-8 md:h-10"
                                        >
                                            {/* 모바일에서는 축약 텍스트, PC에서는 전체 텍스트 */}
                                            <span className="md:hidden">{item.mobileLabel}</span>
                                            <span className="hidden md:inline">{item.label}</span>
                                        </Button>
                                    </Link>
                                );
                            })}
                        </nav>

{/* 설정 메뉴 */}
                        <Link href={SETTINGS_URL} target="_blank" rel="noopener noreferrer">
                            <Button
                                variant="ghost"
                                size="sm"
                                className="p-2 h-8 w-8 md:h-10 md:w-10 hover:bg-accent"
                                title="설정"
                            >
                                <Settings className="h-4 w-4 md:h-5 md:w-5" />
                            </Button>
                        </Link>
                    </div>
                </div>
            </div>
        </header>
    );
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/toast-container.tsx"
"use client";

import React, { useEffect } from "react";
import { X, Phone, Calendar, Info, CheckCircle, AlertTriangle, AlertCircle } from "lucide-react";
import { useToast, ToastMessage } from "./toast-provider";

interface ToastItemProps {
    toast: ToastMessage;
    onRemove: (id: string) => void;
}

function ToastItem({ toast, onRemove }: ToastItemProps) {
    // 자동 닫기 (10초 후)
    useEffect(() => {
        const timer = setTimeout(() => {
            onRemove(toast.id);
        }, 10000);

return () => clearTimeout(timer);
    }, [toast.id, onRemove]);

const getToastStyle = () => {
        switch (toast.type) {
            case "reservation":
                return "border-l-4 border-l-blue-500 bg-blue-50 text-blue-900";
            case "call":
                return "border-l-4 border-l-green-500 bg-green-50 text-green-900";
            case "success":
                return "border-l-4 border-l-emerald-500 bg-emerald-50 text-emerald-900";
            case "warning":
                return "border-l-4 border-l-yellow-500 bg-yellow-50 text-yellow-900";
            case "error":
                return "border-l-4 border-l-red-500 bg-red-50 text-red-900";
            default:
                return "border-l-4 border-l-gray-500 bg-gray-50 text-gray-900";
        }
    };

const getIcon = () => {
        switch (toast.type) {
            case "reservation":
                return <Calendar className="h-5 w-5 text-blue-500" />;
            case "call":
                return <Phone className="h-5 w-5 text-green-500" />;
            case "success":
                return <CheckCircle className="h-5 w-5 text-emerald-500" />;
            case "warning":
                return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
            case "error":
                return <AlertCircle className="h-5 w-5 text-red-500" />;
            default:
                return <Info className="h-5 w-5 text-gray-500" />;
        }
    };

const formatTime = (date: Date) => {
        return date.toLocaleTimeString("ko-KR", {
            hour: "2-digit",
            minute: "2-digit",
        });
    };

return (
        <div
            className={`relative w-full max-w-sm mx-auto mb-3 p-4 rounded-lg shadow-lg transition-all duration-300 ease-in-out transform animate-in slide-in-from-right ${getToastStyle()}`}
        >
            {/* 닫기 버튼 */}
            <button
                onClick={() => onRemove(toast.id)}
                className="absolute top-2 right-2 p-1 rounded-full hover:bg-black/10 transition-colors"
                aria-label="닫기"
            >
                <X className="h-4 w-4" />
            </button>

<div className="flex items-start gap-3 pr-6">
                {/* 아이콘 */}
                <div className="flex-shrink-0 mt-0.5">{getIcon()}</div>

{/* 내용 */}
                <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between mb-1">
                        <h3 className="text-sm font-semibold truncate">{toast.title}</h3>
                        <span className="text-xs opacity-75">{formatTime(toast.timestamp)}</span>
                    </div>

<p className="text-sm opacity-90 mb-2">{toast.message}</p>

{/* 추가 정보 */}
                    {(toast.customerName || toast.phoneNumber || toast.vehicleInfo) && (
                        <div className="text-xs opacity-75 space-y-1">
                            {toast.customerName && (
                                <div>
                                    고객명: <span className="font-medium">{toast.customerName}</span>
                                </div>
                            )}
                            {toast.phoneNumber && (
                                <div>
                                    연락처: <span className="font-medium">{toast.phoneNumber}</span>
                                </div>
                            )}
                            {toast.vehicleInfo && (
                                <div>
                                    차량: <span className="font-medium">{toast.vehicleInfo}</span>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

export function ToastContainer() {
    const { toasts, removeToast } = useToast();

if (toasts.length === 0) {
        return null;
    }

return (
        <div className="fixed top-20 md:top-24 right-4 z-[100] max-h-screen overflow-y-auto">
            <div className="space-y-2">
                {toasts.map((toast) => (
                    <ToastItem key={toast.id} toast={toast} onRemove={removeToast} />
                ))}
            </div>
        </div>
    );
}
[V0_FILE]typescriptreact:file="components/toast-demo.tsx"
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/toast-provider";
import { Calendar, Phone, Info } from "lucide-react";

// Mock 데이터 - 나중에 실제 메시지 서버에서 받을 데이터 형태
const mockReservationData = {
    type: "reservation" as const,
    title: "신규 예약 요청",
    message: "고객님의 차량 점검 예약이 접수되었습니다.",
    customerName: "김철수",
    phoneNumber: "010-1234-5678",
    vehicleInfo: "BMW X5 (12가1234)",
};

const mockCallData = {
    type: "call" as const,
    title: "전화 문의",
    message: "고객님께서 정비 문의 전화를 걸었습니다.",
    customerName: "이영희",
    phoneNumber: "010-9876-5432",
    vehicleInfo: "벤츠 E-Class (34나5678)",
};

const mockInfoData = {
    type: "info" as const,
    title: "차계부 앱 설치 완료",
    message: "고객님이 차계부 앱을 성공적으로 설치했습니다.",
    customerName: "박민수",
    phoneNumber: "010-5555-7777",
    vehicleInfo: "아우디 A6 (56다9012)",
};

export function ToastDemo() {
    const { addToast } = useToast();

const handleShowReservationToast = () => {
        addToast(mockReservationData);
    };

const handleShowCallToast = () => {
        addToast(mockCallData);
    };

const handleShowInfoToast = () => {
        addToast(mockInfoData);
    };

const handleShowAllToasts = () => {
        // 1초 간격으로 순차적으로 토스트 표시
        addToast(mockReservationData);

setTimeout(() => {
            addToast(mockCallData);
        }, 1000);

setTimeout(() => {
            addToast(mockInfoData);
        }, 2000);
    };

return (
        <div className="p-6 bg-gray-50 rounded-lg border border-gray-200">
            <h3 className="text-lg font-semibold mb-4 text-gray-800">토스트 팝업 테스트 (Mock 데이터)</h3>
            <p className="text-sm text-gray-600 mb-4">
                모바일 차계부 앱에서 예약하기/전화걸기 시 표시될 토스트 팝업을 테스트해볼 수 있습니다.
            </p>

<div className="mt-4 text-xs text-gray-500">
                * 토스트는 화면 우측 상단에 표시되며, 10초 후 자동으로 사라집니다.
                <br />* X 버튼을 클릭하여 수동으로 닫을 수도 있습니다.
            </div>
        </div>
    );
}
[V0_FILE]typescriptreact:file="components/toast-provider.tsx"
"use client";

import React, { createContext, useContext, useState, useCallback } from "react";

export interface ToastMessage {
    id: string;
    type: "reservation" | "call" | "info" | "success" | "warning" | "error";
    title: string;
    message: string;
    timestamp: Date;
    customerName?: string;
    phoneNumber?: string;
    vehicleInfo?: string;
}

interface ToastContextType {
    toasts: ToastMessage[];
    addToast: (toast: Omit<ToastMessage, "id" | "timestamp">) => void;
    removeToast: (id: string) => void;
    clearAllToasts: () => void;
}

const ToastContext = createContext<ToastContextType | undefined>(undefined);

export function useToast() {
    const context = useContext(ToastContext);
    if (!context) {
        throw new Error("useToast must be used within a ToastProvider");
    }
    return context;
}

interface ToastProviderProps {
    children: React.ReactNode;
}

export function ToastProvider({ children }: ToastProviderProps) {
    const [toasts, setToasts] = useState<ToastMessage[]>([]);

const addToast = useCallback((toast: Omit<ToastMessage, "id" | "timestamp">) => {
        const newToast: ToastMessage = {
            ...toast,
            id: `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
            timestamp: new Date(),
        };

setToasts((prev) => [...prev, newToast]);
    }, []);

const removeToast = useCallback((id: string) => {
        setToasts((prev) => prev.filter((toast) => toast.id !== id));
    }, []);

const clearAllToasts = useCallback(() => {
        setToasts([]);
    }, []);

return (
        <ToastContext.Provider value={{ toasts, addToast, removeToast, clearAllToasts }}>
            {children}
        </ToastContext.Provider>
    );
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "span"

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
        ghost:
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
        icon: "size-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-6", className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

if (!value) {
      return null
    }

return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

if (!active || !payload?.length) {
    return null
  }

const nestLabel = payload.length === 1 && indicator !== "dot"

return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
          const key = `${nameKey || item.name || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          const indicatorColor = color || item.payload.fill || item.color

return (
            <div
              key={item.dataKey}
              className={cn(
                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                indicator === "dot" && "items-center"
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn(
                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                          {
                            "h-2.5 w-2.5": indicator === "dot",
                            "w-1": indicator === "line",
                            "w-0 border-[1.5px] border-dashed bg-transparent":
                              indicator === "dashed",
                            "my-0.5": nestLabel && indicator === "dashed",
                          }
                        )}
                        style={
                          {
                            "--color-bg": indicatorColor,
                            "--color-border": indicatorColor,
                          } as React.CSSProperties
                        }
                      />
                    )
                  )}
                  <div
                    className={cn(
                      "flex flex-1 justify-between leading-none",
                      nestLabel ? "items-end" : "items-center"
                    )}
                  >
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label || item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

if (!payload?.length) {
    return null
  }

return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload.map((item) => {
        const key = `${nameKey || item.dataKey || "value"}`
        const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
          <div
            key={item.value}
            className={cn(
              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
            )}
          >
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }}
              />
            )}
            {itemConfig?.label}
          </div>
        )
      })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { CheckIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
          className
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-header"
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn("text-lg leading-none font-semibold", className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = "default",
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: "sm" | "default"
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = "popper",
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
          position === "popper" &&
            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
          className
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            "p-1",
            position === "popper" &&
              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitive from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
        )}
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        className
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("flex-1 outline-none", className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
    "name": "my-v0-project",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "build": "next build",
        "dev": "next dev",
        "lint": "next lint",
        "start": "next start"
    },
    "dependencies": {
        "@hookform/resolvers": "^3.10.0",
        "@radix-ui/react-accordion": "1.2.2",
        "@radix-ui/react-alert-dialog": "1.1.4",
        "@radix-ui/react-aspect-ratio": "1.1.1",
        "@radix-ui/react-avatar": "1.1.2",
        "@radix-ui/react-checkbox": "1.1.3",
        "@radix-ui/react-collapsible": "1.1.2",
        "@radix-ui/react-context-menu": "2.2.4",
        "@radix-ui/react-dialog": "1.1.4",
        "@radix-ui/react-dropdown-menu": "2.1.4",
        "@radix-ui/react-hover-card": "1.1.4",
        "@radix-ui/react-label": "2.1.1",
        "@radix-ui/react-menubar": "1.1.4",
        "@radix-ui/react-navigation-menu": "1.2.3",
        "@radix-ui/react-popover": "1.1.4",
        "@radix-ui/react-progress": "1.1.1",
        "@radix-ui/react-radio-group": "1.2.2",
        "@radix-ui/react-scroll-area": "1.2.2",
        "@radix-ui/react-select": "2.1.4",
        "@radix-ui/react-separator": "1.1.1",
        "@radix-ui/react-slider": "1.2.2",
        "@radix-ui/react-slot": "1.1.1",
        "@radix-ui/react-switch": "1.1.2",
        "@radix-ui/react-tabs": "1.1.2",
        "@radix-ui/react-toast": "1.2.4",
        "@radix-ui/react-toggle": "1.1.1",
        "@radix-ui/react-toggle-group": "1.1.1",
        "@radix-ui/react-tooltip": "1.1.6",
        "@vercel/analytics": "1.3.1",
        "autoprefixer": "^10.4.20",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "cmdk": "1.0.4",
        "date-fns": "4.1.0",
        "embla-carousel-react": "8.5.1",
        "geist": "^1.3.1",
        "input-otp": "1.4.1",
        "lucide-react": "^0.454.0",
        "next": "15.2.4",
        "next-themes": "^0.4.6",
        "react": "^19",
        "react-day-picker": "9.8.0",
        "react-dom": "^19",
        "react-hook-form": "^7.60.0",
        "react-resizable-panels": "^2.1.7",
        "recharts": "latest",
        "sonner": "^1.7.4",
        "tailwind-merge": "^2.5.5",
        "tailwindcss-animate": "^1.0.7",
        "vaul": "^0.9.9",
        "zod": "3.25.67"
    },
    "devDependencies": {
        "@types/node": "^22",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "autoprefixer": "^10.4.20",
        "postcss": "^8.5",
        "tailwindcss": "^3.4.0",
        "tailwindcss-animate": "^1.0.7",
        "typescript": "^5"
    }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

export default config;
[V0_FILE]css:file="styles/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss";

const config: Config = {
    darkMode: ["class"],
    content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
    prefix: "",
    theme: {
        container: {
            center: true,
            padding: "2rem",
            screens: {
                "2xl": "1400px",
            },
        },
        extend: {
            colors: {
                border: "hsl(var(--border))",
                input: "hsl(var(--input))",
                ring: "hsl(var(--ring))",
                background: "hsl(var(--background))",
                foreground: "hsl(var(--foreground))",
                primary: {
                    DEFAULT: "hsl(var(--primary))",
                    foreground: "hsl(var(--primary-foreground))",
                },
                secondary: {
                    DEFAULT: "hsl(var(--secondary))",
                    foreground: "hsl(var(--secondary-foreground))",
                },
                destructive: {
                    DEFAULT: "hsl(var(--destructive))",
                    foreground: "hsl(var(--destructive-foreground))",
                },
                muted: {
                    DEFAULT: "hsl(var(--muted))",
                    foreground: "hsl(var(--muted-foreground))",
                },
                accent: {
                    DEFAULT: "hsl(var(--accent))",
                    foreground: "hsl(var(--accent-foreground))",
                },
                popover: {
                    DEFAULT: "hsl(var(--popover))",
                    foreground: "hsl(var(--popover-foreground))",
                },
                card: {
                    DEFAULT: "hsl(var(--card))",
                    foreground: "hsl(var(--card-foreground))",
                },
            },
            borderRadius: {
                lg: "var(--radius)",
                md: "calc(var(--radius) - 2px)",
                sm: "calc(var(--radius) - 4px)",
            },
            keyframes: {
                "accordion-down": {
                    from: { height: "0" },
                    to: { height: "var(--radix-accordion-content-height)" },
                },
                "accordion-up": {
                    from: { height: "var(--radix-accordion-content-height)" },
                    to: { height: "0" },
                },
            },
            animation: {
                "accordion-down": "accordion-down 0.2s ease-out",
                "accordion-up": "accordion-up 0.2s ease-out",
            },
        },
    },
    plugins: [require("tailwindcss-animate")],
};

export default config;
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]xml:file="app/img/autovan.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HZqL7ymbl7A20kAKRz3iC4lyT68X/HmL9gf2L25qV8kBL2U_oZz/app/img/autovan.svg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HZqL7ymbl7A20kAKRz3iC4lyT68X/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HZqL7ymbl7A20kAKRz3iC4lyT68X/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HZqL7ymbl7A20kAKRz3iC4lyT68X/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HZqL7ymbl7A20kAKRz3iC4lyT68X/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HZqL7ymbl7A20kAKRz3iC4lyT68X/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"</article></body></html>