[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { BreweryDashboard } from "@/components/brewery-dashboard" export default function Home() { return } [V0_FILE]typescriptreact:file="components/brewery-filter.tsx" isMerged="true" "use client" import { Search } from "lucide-react" interface BreweryFilterProps { selectedStatus: "all" | "normal" | "warning" | "critical" searchQuery: string onStatusChange: (status: "all" | "normal" | "warning" | "critical") => void onSearchChange: (query: string) => void } export function BreweryFilter({ selectedStatus, searchQuery, onStatusChange, onSearchChange }: BreweryFilterProps) { return (

{/* Search */}

onSearchChange(e.target.value)} className="w-full rounded-lg border border-border bg-background py-2 pl-10 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring" />

{/* Status Filters */}

{(["all", "normal", "warning", "critical"] as const).map((status) => ( ))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { AuthProvider } from "@/lib/auth-context" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "酒蔵 DX パイロット", description: "複数の酒蔵のリアルタイム環境監視ダッシュボード", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/temperature-chart.tsx" isMerged="true" "use client" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" interface TemperatureChartProps { label: string color: string data: Array<{ time: string; value: number }> } export function TemperatureChart({ label, color, data }: TemperatureChartProps) { return (

`${value.toFixed(1)}°C`} />

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @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 { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --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]typescriptreact:file="components/weather-widget.tsx" isMerged="true" "use client" import { Cloud, CloudRain, Sun, CloudSnow, Wind, Droplets } from "lucide-react" interface WeatherData { condition: "sunny" | "cloudy" | "rainy" | "snowy" temperature: number humidity: number windSpeed: number } interface WeatherWidgetProps { weather: WeatherData } export function WeatherWidget({ weather }: WeatherWidgetProps) { const getWeatherIcon = (condition: string) => { switch (condition) { case "sunny": return case "cloudy": return case "rainy": return case "snowy": return default: return } } const getWeatherLabel = (condition: string) => { switch (condition) { case "sunny": return "晴天" case "cloudy": return "曇り" case "rainy": return "雨" case "snowy": return "雪" default: return "不明" } } return (

天気

{getWeatherIcon(weather.condition)}

{weather.temperature}°C

{getWeatherLabel(weather.condition)}

湿度

{weather.humidity}%

風速

{weather.windSpeed} m/s

) } [V0_FILE]typescriptreact:file="app/brewery/[id]/page.tsx" isMerged="true" "use client" import { useParams, useRouter } from "next/navigation" import { DetailChart } from "@/components/detail-chart" import { WeatherWidget } from "@/components/weather-widget" import { breweries, getStatusLabel } from "@/lib/brewery-data" import { ChevronLeft, MapPin, Clock, Activity } from "lucide-react" export default function BreweryDetailPage() { const params = useParams() const router = useRouter() const brewery = breweries.find((b) => b.id === params.id) if (!brewery) { return (

酒蔵データが見つかりません

{/* Header */}

{brewery.id}

{brewery.name}

{brewery.prefecture} {brewery.address}

最終更新: {brewery.lastUpdated}

{getStatusLabel(brewery.status)}

{/* Content */}

{/* Weather */}

天気情報

{/* Charts */}

24時間推移グラフ

{/* Brewery Info */}

酒蔵情報

酒蔵ID {brewery.id}

酒蔵名 {brewery.name}

都道府県 {brewery.prefecture}

住所 {brewery.address}

ステータス {getStatusLabel(brewery.status)}

) } [V0_FILE]typescriptreact:file="app/view/page.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { breweries } from "@/lib/brewery-data" import { MapPin, ArrowRight } from "lucide-react" export default function BrewerySelectPage() { const router = useRouter() return (

Sake Brewery DX

酒蔵別閲覧画面

ご自身の酒蔵を選択して、環境データを確認してください

{breweries.map((brewery) => ( ))}

) } [V0_FILE]typescriptreact:file="components/detail-chart.tsx" isMerged="true" "use client" import { useState } from "react" import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart, } from "recharts" import { TimeRangeSelector } from "./time-range-selector" import type { TimeRange } from "@/lib/brewery-data" interface DetailChartProps { title: string unit: string color: string currentValue: number data: Record> } export function DetailChart({ title, unit, color, currentValue, data }: DetailChartProps) { const [timeRange, setTimeRange] = useState("24h") const chartData = data[timeRange] const minValue = Math.min(...chartData.map((d) => d.value)) const maxValue = Math.max(...chartData.map((d) => d.value)) const avgValue = chartData.reduce((sum, d) => sum + d.value, 0) / chartData.length return (

{title}

{currentValue.toFixed(1)} {unit}

最小

{minValue.toFixed(1)}{unit}

平均

{avgValue.toFixed(1)}{unit}

最大

{maxValue.toFixed(1)}{unit}

[`${value.toFixed(1)}${unit}`, title]} />

) } [V0_FILE]typescriptreact:file="app/view/[id]/page.tsx" isMerged="true" "use client" import { useParams, useRouter } from "next/navigation" import { breweries, getStatusLabel } from "@/lib/brewery-data" import { DetailChart } from "@/components/detail-chart" import { WeatherWidget } from "@/components/weather-widget" import { ChevronLeft, MapPin, Clock, Thermometer, Droplets, Home, Activity, } from "lucide-react" export default function BreweryViewPage() { const params = useParams() const router = useRouter() const brewery = breweries.find((b) => b.id === params.id) if (!brewery) { return (

酒蔵データが見つかりません

) } const statusBadgeClass = brewery.status === "normal" ? "bg-chart-2/15 text-chart-2 border-chart-2/30" : brewery.status === "warning" ? "bg-chart-4/15 text-chart-4 border-chart-4/30" : "bg-destructive/15 text-destructive border-destructive/30" const today = new Date().toLocaleDateString("ja-JP", { year: "numeric", month: "long", day: "numeric", weekday: "long", }) return (

{/* Navigation */}

{/* Header */}

{brewery.id}

{brewery.name}

{today}

{brewery.prefecture} {brewery.address}

最終更新: {brewery.lastUpdated}

{getStatusLabel(brewery.status)}

{/* Content */}

{/* Current Values Summary */}

気温

{brewery.ambientTemp.toFixed(1)}°C

室温

{brewery.roomTemp.toFixed(1)}°C

品温

{brewery.productTemp.toFixed(1)}°C

湿度

{brewery.humidity}%

{/* Weather */}

天気情報

{/* Charts */}

24時間推移グラフ

{/* Brewery Info */}

酒蔵情報

酒蔵ID {brewery.id}

酒蔵名 {brewery.name}

都道府県 {brewery.prefecture}

住所 {brewery.address}

ステータス {getStatusLabel(brewery.status)}

) } [V0_FILE]typescript:file="lib/brewery-data.ts" isMerged="true" export interface WeatherData { condition: "sunny" | "cloudy" | "rainy" | "snowy" temperature: number humidity: number windSpeed: number } export type TimeRange = "10m" | "1h" | "6h" | "12h" | "24h" export const TIME_RANGE_OPTIONS: { value: TimeRange; label: string }[] = [ { value: "10m", label: "10分" }, { value: "1h", label: "1時間" }, { value: "6h", label: "6時間" }, { value: "12h", label: "12時間" }, { value: "24h", label: "24時間" }, ] export interface BreweryData { id: string name: string address: string prefecture: string ambientTemp: number roomTemp: number productTemp: number humidity: number lastUpdated: string status: "normal" | "warning" | "critical" ambientTempHistory: Record> roomTempHistory: Record> productTempHistory: Record> humidityHistory: Record> weather: WeatherData } function generateHistoryForRange(baseValue: number, variance: number, range: TimeRange): Array<{ time: string; value: number }> { let count: number let labelFn: (i: number) => string switch (range) { case "10m": count = 10 labelFn = (i) => `${i + 1}分` break case "1h": count = 12 labelFn = (i) => `${i * 5}分` break case "6h": count = 12 labelFn = (i) => `${i * 30}分` break case "12h": count = 12 labelFn = (i) => `${i}:00` break case "24h": default: count = 24 labelFn = (i) => `${i}:00` break } return Array.from({ length: count }, (_, i) => ({ time: labelFn(i), value: Math.round((baseValue + (Math.random() - 0.5) * variance) * 10) / 10, })) } function generateAllRanges(baseValue: number, variance: number): Record> { return { "10m": generateHistoryForRange(baseValue, variance * 0.3, "10m"), "1h": generateHistoryForRange(baseValue, variance * 0.5, "1h"), "6h": generateHistoryForRange(baseValue, variance * 0.8, "6h"), "12h": generateHistoryForRange(baseValue, variance, "12h"), "24h": generateHistoryForRange(baseValue, variance, "24h"), } } export const breweries: BreweryData[] = [ { id: "0001", name: "石川酒造", address: "東京都福生市熊川1番地", prefecture: "東京都", ambientTemp: 15.2, roomTemp: 18.5, productTemp: 8.3, humidity: 62, lastUpdated: "2分前", status: "normal", ambientTempHistory: generateAllRanges(15, 2), roomTempHistory: generateAllRanges(18.5, 2), productTempHistory: generateAllRanges(8.3, 1.5), humidityHistory: generateAllRanges(62, 8), weather: { condition: "cloudy", temperature: 14.8, humidity: 58, windSpeed: 3.2 }, }, { id: "0002", name: "落酒造", address: "岡山県真庭市落合垂水124", prefecture: "岡山県", ambientTemp: 14.8, roomTemp: 17.2, productTemp: 7.9, humidity: 58, lastUpdated: "1分前", status: "normal", ambientTempHistory: generateAllRanges(14.8, 2), roomTempHistory: generateAllRanges(17.2, 2), productTempHistory: generateAllRanges(7.9, 1.5), humidityHistory: generateAllRanges(58, 8), weather: { condition: "sunny", temperature: 13.5, humidity: 52, windSpeed: 2.8 }, }, { id: "0003", name: "千古乃岩酒造", address: "岐阜県土岐市駄知町2177-1", prefecture: "岐阜県", ambientTemp: 18.1, roomTemp: 20.6, productTemp: 10.2, humidity: 71, lastUpdated: "3分前", status: "warning", ambientTempHistory: generateAllRanges(18.1, 3), roomTempHistory: generateAllRanges(20.6, 3), productTempHistory: generateAllRanges(10.2, 2), humidityHistory: generateAllRanges(71, 10), weather: { condition: "rainy", temperature: 16.2, humidity: 75, windSpeed: 4.5 }, }, { id: "0004", name: "サンプル酒造A", address: "XX県XX市XX町1-2-3", prefecture: "XX県", ambientTemp: 12.5, roomTemp: 15.8, productTemp: 6.1, humidity: 55, lastUpdated: "1分前", status: "normal", ambientTempHistory: generateAllRanges(12.5, 2), roomTempHistory: generateAllRanges(15.8, 2), productTempHistory: generateAllRanges(6.1, 1), humidityHistory: generateAllRanges(55, 7), weather: { condition: "sunny", temperature: 12.1, humidity: 50, windSpeed: 2.3 }, }, { id: "0005", name: "サンプル酒造B", address: "XX県XX市XX町4-5-6", prefecture: "XX県", ambientTemp: 22.3, roomTemp: 24.1, productTemp: 12.8, humidity: 78, lastUpdated: "5分前", status: "critical", ambientTempHistory: generateAllRanges(22.3, 4), roomTempHistory: generateAllRanges(24.1, 4), productTempHistory: generateAllRanges(12.8, 2.5), humidityHistory: generateAllRanges(78, 12), weather: { condition: "rainy", temperature: 20.5, humidity: 82, windSpeed: 5.1 }, }, { id: "0006", name: "サンプル酒造C", address: "XX県XX市XX町7-8-9", prefecture: "XX県", ambientTemp: 16.7, roomTemp: 19.3, productTemp: 9.1, humidity: 64, lastUpdated: "2分前", status: "normal", ambientTempHistory: generateAllRanges(16.7, 2), roomTempHistory: generateAllRanges(19.3, 2), productTempHistory: generateAllRanges(9.1, 1.5), humidityHistory: generateAllRanges(64, 8), weather: { condition: "cloudy", temperature: 15.8, humidity: 61, windSpeed: 3.1 }, }, { id: "0007", name: "サンプル酒造D", address: "XX県XX市XX町10-11-12", prefecture: "XX県", ambientTemp: 13.9, roomTemp: 16.4, productTemp: 7.2, humidity: 59, lastUpdated: "1分前", status: "normal", ambientTempHistory: generateAllRanges(13.9, 2), roomTempHistory: generateAllRanges(16.4, 2), productTempHistory: generateAllRanges(7.2, 1), humidityHistory: generateAllRanges(59, 7), weather: { condition: "sunny", temperature: 13.2, humidity: 55, windSpeed: 2.4 }, }, { id: "0008", name: "サンプル酒造E", address: "XX県XX市XX町13-14-15", prefecture: "XX県", ambientTemp: 17.5, roomTemp: 20.2, productTemp: 9.7, humidity: 67, lastUpdated: "2分前", status: "normal", ambientTempHistory: generateAllRanges(17.5, 2), roomTempHistory: generateAllRanges(20.2, 2), productTempHistory: generateAllRanges(9.7, 1.5), humidityHistory: generateAllRanges(67, 9), weather: { condition: "cloudy", temperature: 16.8, humidity: 64, windSpeed: 3.3 }, }, { id: "0009", name: "サンプル酒造F", address: "XX県XX市XX町16-17-18", prefecture: "XX県", ambientTemp: 14.2, roomTemp: 17.8, productTemp: 8.1, humidity: 61, lastUpdated: "3分前", status: "normal", ambientTempHistory: generateAllRanges(14.2, 2), roomTempHistory: generateAllRanges(17.8, 2), productTempHistory: generateAllRanges(8.1, 1), humidityHistory: generateAllRanges(61, 8), weather: { condition: "sunny", temperature: 13.9, humidity: 57, windSpeed: 2.6 }, }, ] export function getBreweryById(id: string): BreweryData | undefined { return breweries.find((b) => b.id === id) } export function getStatusLabel(status: string): string { switch (status) { case "normal": return "正常" case "warning": return "警告" case "critical": return "異常" default: return "" } } export function getStatusColor(status: string): string { switch (status) { case "normal": return "text-chart-2" case "warning": return "text-chart-4" case "critical": return "text-destructive" default: return "text-muted-foreground" } } [V0_FILE]typescriptreact:file="components/comparison-chart.tsx" isMerged="true" "use client" import { useState } from "react" import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, Legend, } from "recharts" import { TimeRangeSelector } from "./time-range-selector" import type { TimeRange } from "@/lib/brewery-data" interface ComparisonChartProps { title: string unit: string dataA: Record> dataB: Record> nameA: string nameB: string colorA: string colorB: string currentA: number currentB: number } export function ComparisonChart({ title, unit, dataA, dataB, nameA, nameB, colorA, colorB, currentA, currentB, }: ComparisonChartProps) { const [timeRange, setTimeRange] = useState("24h") const seriesA = dataA[timeRange] const seriesB = dataB[timeRange] const mergedData = seriesA.map((item, i) => ({ time: item.time, [nameA]: item.value, [nameB]: seriesB[i]?.value ?? 0, })) const diff = currentA - currentB return (

{title}

{currentA.toFixed(1)} {unit}

{currentB.toFixed(1)} {unit}

差分

0 ? "text-chart-1" : diff < 0 ? "text-chart-2" : "text-foreground"}`}> {diff > 0 ? "+" : ""}{diff.toFixed(1)} {unit}

[`${value.toFixed(1)}${unit}`, name]} />

) } [V0_FILE]typescriptreact:file="app/compare/page.tsx" isMerged="true" "use client" import { useState, useMemo } from "react" import { useRouter } from "next/navigation" import { ComparisonChart } from "@/components/comparison-chart" import { breweries, getStatusLabel, type BreweryData } from "@/lib/brewery-data" import { ChevronLeft, ArrowLeftRight, MapPin, Clock, Thermometer, Droplets } from "lucide-react" const CHART_COLORS = { a: "#2563eb", b: "#e11d48", } function BrewerySelector({ label, selectedId, onChange, color, }: { label: string selectedId: string onChange: (id: string) => void color: string }) { const selected = breweries.find((b) => b.id === selectedId) return (

{label}

{selected && (

{selected.address}

{"最終更新: "}{selected.lastUpdated}

品温

{selected.productTemp.toFixed(1)}°C

湿度

{selected.humidity.toFixed(1)}%

)}

) } function SummaryTable({ breweryA, breweryB }: { breweryA: BreweryData; breweryB: BreweryData }) { const rows = [ { label: "気温", valueA: breweryA.ambientTemp, valueB: breweryB.ambientTemp, unit: "\u00B0C" }, { label: "室温", valueA: breweryA.roomTemp, valueB: breweryB.roomTemp, unit: "\u00B0C" }, { label: "品温", valueA: breweryA.productTemp, valueB: breweryB.productTemp, unit: "\u00B0C" }, { label: "湿度", valueA: breweryA.humidity, valueB: breweryB.humidity, unit: "%" }, ] return (

{rows.map((row) => { const diff = row.valueA - row.valueB return ( ) })}

項目	{breweryA.name}	{breweryB.name}	差分
{row.label}	{row.valueA.toFixed(1)}{row.unit}	{row.valueB.toFixed(1)}{row.unit}	0 ? "text-chart-1" : diff < 0 ? "text-chart-2" : "text-foreground"}`}> {diff > 0 ? "+" : ""}{diff.toFixed(1)}{row.unit}

) } export default function ComparePage() { const router = useRouter() const [idA, setIdA] = useState("0001") const [idB, setIdB] = useState("0002") const breweryA = useMemo(() => breweries.find((b) => b.id === idA)!, [idA]) const breweryB = useMemo(() => breweries.find((b) => b.id === idB)!, [idB]) const handleSwap = () => { setIdA(idB) setIdB(idA) } return (

{/* Header */}

酒蔵データ比較

2つの酒蔵の環境データを並べて比較できます

{/* Brewery Selectors */}

{/* Summary Table */}

現在値サマリー

{/* Comparison Charts */}

24時間推移比較

) } [V0_FILE]typescriptreact:file="components/brewery-dashboard.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { BreweryCard } from "./brewery-card" import { BreweryFilter } from "./brewery-filter" import { breweries } from "@/lib/brewery-data" import { Eye, ArrowLeftRight } from "lucide-react" export function BreweryDashboard() { const router = useRouter() const [selectedStatus, setSelectedStatus] = useState<"all" | "normal" | "warning" | "critical">("all") const [searchQuery, setSearchQuery] = useState("") const filteredBreweries = breweries.filter((brewery) => { const matchesStatus = selectedStatus === "all" || brewery.status === selectedStatus const matchesSearch = brewery.name.toLowerCase().includes(searchQuery.toLowerCase()) return matchesStatus && matchesSearch }) const handleBreweryClick = (id: string) => { router.push(`/brewery/${id}`) } return (

{/* Header */}

酒蔵 DX パイロット

複数の酒蔵のリアルタイム環境監視ダッシュボード

{/* Stats Bar */}

合計

{breweries.length}

正常

{breweries.filter((b) => b.status === "normal").length}

警告

{breweries.filter((b) => b.status === "warning").length}

異常

{breweries.filter((b) => b.status === "critical").length}

{/* Filters */}

{/* Content */}

{filteredBreweries.length === 0 ? (

検索条件に合致する酒蔵がありません

) : (

{filteredBreweries.map((brewery) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="components/time-range-selector.tsx" isMerged="true" "use client" import { TIME_RANGE_OPTIONS, type TimeRange } from "@/lib/brewery-data" interface TimeRangeSelectorProps { value: TimeRange onChange: (value: TimeRange) => void } export function TimeRangeSelector({ value, onChange }: TimeRangeSelectorProps) { return (

{TIME_RANGE_OPTIONS.map((option) => ( ))}

) } [V0_FILE]typescriptreact:file="components/brewery-card.tsx" isMerged="true" "use client" import { TemperatureChart } from "./temperature-chart" import { WeatherWidget } from "./weather-widget" import type { BreweryData } from "@/lib/brewery-data" interface BreweryCardProps { brewery: BreweryData } const getStatusBg = (status: string): string => { switch (status) { case "normal": return "bg-chart-2/10 border-chart-2" case "warning": return "bg-chart-4/10 border-chart-4" case "critical": return "bg-destructive/10 border-destructive" default: return "bg-background border-border" } } const getStatusBadge = (status: string): string => { switch (status) { case "normal": return "text-chart-2 bg-chart-2/20" case "warning": return "text-chart-4 bg-chart-4/20" case "critical": return "text-destructive bg-destructive/20" default: return "text-muted-foreground bg-muted" } } const getStatusLabel = (status: string): string => { switch (status) { case "normal": return "正常" case "warning": return "警告" case "critical": return "異常" default: return "" } } export function BreweryCard({ brewery }: BreweryCardProps) { return (

{/* Header */}

{brewery.name}

{new Date().toLocaleDateString("ja-JP", { year: "numeric", month: "long", day: "numeric", })}

ID: {brewery.id}

{brewery.prefecture}

{getStatusLabel(brewery.status)}

{/* Weather Widget Section */}

{/* Ambient Temperature */}

気温

{brewery.ambientTemp.toFixed(1)}°C

{/* Room Temperature */}

室温

{brewery.roomTemp.toFixed(1)}°C

{/* Product Temperature */}

品温

{brewery.productTemp.toFixed(1)}°C

{/* Humidity */}

湿度

{brewery.humidity}%

{/* Footer */}

最終更新: {brewery.lastUpdated}

) } [V0_FILE]typescriptreact:file="lib/auth-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" export type UserRole = "admin" | "user" export interface User { id: string name: string email: string role: UserRole breweryId?: string breweryName?: string } interface AuthContextType { user: User | null isLoading: boolean login: (email: string, password: string) => Promise<{ success: boolean; error?: string }> logout: () => void } const AuthContext = createContext(undefined) // Demo users for testing const DEMO_USERS: Array = [ { id: "admin-001", name: "管理者", email: "admin@sakagura-dx.jp", password: "admin123", role: "admin", }, { id: "user-001", name: "石川太郎", email: "ishikawa@sakagura-dx.jp", password: "user123", role: "user", breweryId: "0001", breweryName: "石川酒造", }, { id: "user-002", name: "落花子", email: "ochi@sakagura-dx.jp", password: "user123", role: "user", breweryId: "0002", breweryName: "落酒造", }, ] export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Check for stored session const storedUser = typeof window !== "undefined" ? localStorage.getItem("sakagura-dx-user") : null if (storedUser) { try { setUser(JSON.parse(storedUser)) } catch { localStorage.removeItem("sakagura-dx-user") } } setIsLoading(false) }, []) const login = async (email: string, password: string): Promise<{ success: boolean; error?: string }> => { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 500)) const foundUser = DEMO_USERS.find((u) => u.email === email && u.password === password) if (foundUser) { const { password: _, ...userWithoutPassword } = foundUser setUser(userWithoutPassword) localStorage.setItem("sakagura-dx-user", JSON.stringify(userWithoutPassword)) return { success: true } } return { success: false, error: "メールアドレスまたはパスワードが正しくありません" } } const logout = () => { setUser(null) localStorage.removeItem("sakagura-dx-user") } return {children} } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/lib/auth-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { FieldGroup, Field, FieldLabel } from "@/components/ui/field" import { Wine, Loader2, AlertCircle } from "lucide-react" export default function LoginPage() { const router = useRouter() const { login } = useAuth() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") setIsLoading(true) const result = await login(email, password) if (result.success) { router.push("/dashboard") } else { setError(result.error || "ログインに失敗しました") } setIsLoading(false) } return (

{/* Logo / Branding */}

酒蔵DX

製造管理システム

{/* Login Card */} ログインメールアドレスとパスワードを入力してください

メールアドレス setEmail(e.target.value)} required autoComplete="email" /> パスワード setPassword(e.target.value)} required autoComplete="current-password" /> {error && (

{error}

)}

{/* Demo Credentials */}

デモ用アカウント

管理者: admin@sakagura-dx.jp / admin123

利用者: ishikawa@sakagura-dx.jp / user123

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname, useRouter } from "next/navigation" import { useAuth } from "@/lib/auth-context" import { Wine, LayoutDashboard, Users, Package, Calendar, ClipboardCheck, Download, LogOut, Eye, ArrowLeftRight, ChevronLeft, ChevronRight, } from "lucide-react" import { cn } from "@/lib/utils" import { useState } from "react" import { Button } from "@/components/ui/button" interface NavItem { label: string href: string icon: React.ReactNode adminOnly?: boolean } const navItems: NavItem[] = [ { label: "ダッシュボード", href: "/dashboard", icon: }, { label: "酒蔵別閲覧", href: "/view", icon: }, { label: "酒蔵比較", href: "/compare", icon: }, { label: "ユーザー管理", href: "/dashboard/users", icon: , adminOnly: true }, { label: "製造ロット管理", href: "/dashboard/lots", icon: }, { label: "製造日程", href: "/dashboard/schedule", icon: }, { label: "品質管理", href: "/dashboard/quality", icon: }, { label: "データ出力", href: "/dashboard/export", icon: }, ] export function AppSidebar() { const pathname = usePathname() const router = useRouter() const { user, logout } = useAuth() const [collapsed, setCollapsed] = useState(false) const handleLogout = () => { logout() router.push("/login") } const filteredNavItems = navItems.filter((item) => { if (item.adminOnly && user?.role !== "admin") return false return true }) return (

{/* Header */}

{!collapsed && 酒蔵DX}

{/* User Info */} {user && !collapsed && (

{user.name}

{user.role === "admin" ? "管理者" : user.breweryName}

)} {/* Navigation */} {/* Logout */}

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/lib/auth-context" import { AppSidebar } from "@/components/app-sidebar" import { Spinner } from "@/components/ui/spinner" export default function DashboardLayout({ children }: { children: React.ReactNode }) { const router = useRouter() const { user, isLoading } = useAuth() useEffect(() => { if (!isLoading && !user) { router.push("/login") } }, [user, isLoading, router]) if (isLoading) { return (

) } if (!user) { return null } return (

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/lib/auth-context" import { BreweryCard } from "@/components/brewery-card" import { BreweryFilter } from "@/components/brewery-filter" import { breweries } from "@/lib/brewery-data" export default function DashboardPage() { const router = useRouter() const { user } = useAuth() const [selectedStatus, setSelectedStatus] = useState("all") const [searchQuery, setSearchQuery] = useState("") // If user is not admin, filter to only their brewery const userBreweries = user?.role === "admin" ? breweries : breweries.filter((b) => b.id === user?.breweryId) const filteredBreweries = userBreweries.filter((brewery) => { const matchesStatus = selectedStatus === "all" || brewery.status === selectedStatus const matchesSearch = brewery.name.toLowerCase().includes(searchQuery.toLowerCase()) return matchesStatus && matchesSearch }) const handleBreweryClick = (id: string) => { router.push(`/brewery/${id}`) } return (

{/* Header */}

ダッシュボード

{user?.role === "admin" ? "全酒蔵のリアルタイム環境監視" : `${user?.breweryName}の環境監視`}

{/* Stats Bar */} {user?.role === "admin" && (

合計

{breweries.length}

正常

{breweries.filter((b) => b.status === "normal").length}

警告

{breweries.filter((b) => b.status === "warning").length}

異常

{breweries.filter((b) => b.status === "critical").length}

)} {/* Filters */} {user?.role === "admin" && (

)} {/* Grid */}

{filteredBreweries.length === 0 ? (

該当する酒蔵が見つかりません

) : (

{filteredBreweries.map((brewery) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/users/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/lib/auth-context" import { breweries } from "@/lib/brewery-data" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { FieldGroup, Field, FieldLabel } from "@/components/ui/field" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Pencil, Trash2, Search, Shield, User } from "lucide-react" interface UserData { id: string name: string email: string role: "admin" | "user" breweryId?: string breweryName?: string createdAt: string } const initialUsers: UserData[] = [ { id: "admin-001", name: "管理者", email: "admin@sakagura-dx.jp", role: "admin", createdAt: "2024-01-01" }, { id: "user-001", name: "石川太郎", email: "ishikawa@sakagura-dx.jp", role: "user", breweryId: "0001", breweryName: "石川酒造", createdAt: "2024-01-15", }, { id: "user-002", name: "落花子", email: "ochi@sakagura-dx.jp", role: "user", breweryId: "0002", breweryName: "落酒造", createdAt: "2024-02-01", }, ] export default function UserManagementPage() { const router = useRouter() const { user } = useAuth() const [users, setUsers] = useState(initialUsers) const [searchQuery, setSearchQuery] = useState("") const [isDialogOpen, setIsDialogOpen] = useState(false) const [editingUser, setEditingUser] = useState(null) // Form state const [formName, setFormName] = useState("") const [formEmail, setFormEmail] = useState("") const [formRole, setFormRole] = useState<"admin" | "user">("user") const [formBreweryId, setFormBreweryId] = useState("") // Redirect if not admin if (user?.role !== "admin") { router.push("/dashboard") return null } const filteredUsers = users.filter( (u) => u.name.toLowerCase().includes(searchQuery.toLowerCase()) || u.email.toLowerCase().includes(searchQuery.toLowerCase()) ) const resetForm = () => { setFormName("") setFormEmail("") setFormRole("user") setFormBreweryId("") setEditingUser(null) } const openCreateDialog = () => { resetForm() setIsDialogOpen(true) } const openEditDialog = (userData: UserData) => { setEditingUser(userData) setFormName(userData.name) setFormEmail(userData.email) setFormRole(userData.role) setFormBreweryId(userData.breweryId || "") setIsDialogOpen(true) } const handleSubmit = () => { const brewery = breweries.find((b) => b.id === formBreweryId) if (editingUser) { // Update existing user setUsers( users.map((u) => u.id === editingUser.id ? { ...u, name: formName, email: formEmail, role: formRole, breweryId: formRole === "user" ? formBreweryId : undefined, breweryName: formRole === "user" ? brewery?.name : undefined, } : u ) ) } else { // Create new user const newUser: UserData = { id: `user-${Date.now()}`, name: formName, email: formEmail, role: formRole, breweryId: formRole === "user" ? formBreweryId : undefined, breweryName: formRole === "user" ? brewery?.name : undefined, createdAt: new Date().toISOString().split("T")[0], } setUsers([...users, newUser]) } setIsDialogOpen(false) resetForm() } const handleDelete = (userId: string) => { if (window.confirm("このユーザーを削除しますか？")) { setUsers(users.filter((u) => u.id !== userId)) } } return (

{/* Header */}

ユーザー管理

ユーザーアカウントの作成および権限設定

{/* Search */}

setSearchQuery(e.target.value)} className="pl-10" />

{/* User List */}

登録ユーザー ({filteredUsers.length})

{filteredUsers.map((userData) => (

{userData.role === "admin" ? ( ) : ( )}

{userData.name}

{userData.email}

{userData.role === "admin" ? "管理者" : "利用者"} {userData.breweryName && ( {userData.breweryName} )}

))}

) } [V0_FILE]typescriptreact:file="app/dashboard/lots/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useAuth } from "@/lib/auth-context" import { breweries } from "@/lib/brewery-data" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { FieldGroup, Field, FieldLabel } from "@/components/ui/field" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Pencil, Trash2, Search, Package } from "lucide-react" interface LotData { id: string productName: string lotNumber: string breweryId: string breweryName: string createdAt: string status: "in-progress" | "completed" } const initialLots: LotData[] = [ { id: "lot-001", productName: "純米大吟醸華", lotNumber: "2024-001", breweryId: "0001", breweryName: "石川酒造", createdAt: "2024-01-15", status: "in-progress", }, { id: "lot-002", productName: "本醸造月", lotNumber: "2024-002", breweryId: "0001", breweryName: "石川酒造", createdAt: "2024-02-01", status: "completed", }, { id: "lot-003", productName: "純米酒風", lotNumber: "2024-003", breweryId: "0002", breweryName: "落酒造", createdAt: "2024-02-10", status: "in-progress", }, ] export default function LotsPage() { const { user } = useAuth() const [lots, setLots] = useState(initialLots) const [searchQuery, setSearchQuery] = useState("") const [isDialogOpen, setIsDialogOpen] = useState(false) const [editingLot, setEditingLot] = useState(null) // Form state const [formProductName, setFormProductName] = useState("") const [formLotNumber, setFormLotNumber] = useState("") const [formBreweryId, setFormBreweryId] = useState(user?.breweryId || "") // Filter lots based on user role const userLots = user?.role === "admin" ? lots : lots.filter((l) => l.breweryId === user?.breweryId) const filteredLots = userLots.filter( (l) => l.productName.toLowerCase().includes(searchQuery.toLowerCase()) || l.lotNumber.toLowerCase().includes(searchQuery.toLowerCase()) ) const resetForm = () => { setFormProductName("") setFormLotNumber("") setFormBreweryId(user?.breweryId || "") setEditingLot(null) } const openCreateDialog = () => { resetForm() setIsDialogOpen(true) } const openEditDialog = (lot: LotData) => { setEditingLot(lot) setFormProductName(lot.productName) setFormLotNumber(lot.lotNumber) setFormBreweryId(lot.breweryId) setIsDialogOpen(true) } const handleSubmit = () => { const brewery = breweries.find((b) => b.id === formBreweryId) if (editingLot) { setLots( lots.map((l) => l.id === editingLot.id ? { ...l, productName: formProductName, lotNumber: formLotNumber, breweryId: formBreweryId, breweryName: brewery?.name || "", } : l ) ) } else { const newLot: LotData = { id: `lot-${Date.now()}`, productName: formProductName, lotNumber: formLotNumber, breweryId: formBreweryId, breweryName: brewery?.name || "", createdAt: new Date().toISOString().split("T")[0], status: "in-progress", } setLots([...lots, newLot]) } setIsDialogOpen(false) resetForm() } const handleDelete = (lotId: string) => { if (window.confirm("このロットを削除しますか？")) { setLots(lots.filter((l) => l.id !== lotId)) } } return (

{/* Header */}

製造ロット管理

製品ごとの製造単位を管理

{/* Search */}

setSearchQuery(e.target.value)} className="pl-10" />

{/* Lot List */}

製造ロット一覧 ({filteredLots.length}) {filteredLots.length === 0 ? (

ロットが登録されていません

) : (

{filteredLots.map((lot) => (

{lot.productName}

ロット番号: {lot.lotNumber} | {lot.breweryName}

{lot.status === "in-progress" ? "製造中" : "完了"} 登録日: {lot.createdAt}

))}

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/schedule/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useAuth } from "@/lib/auth-context" import { breweries } from "@/lib/brewery-data" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { FieldGroup, Field, FieldLabel } from "@/components/ui/field" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Pencil, Trash2, Search, Calendar } from "lucide-react" interface ScheduleData { id: string lotId: string lotNumber: string productName: string breweryId: string breweryName: string startDateTime: string endDateTime: string assignee: string status: "scheduled" | "in-progress" | "completed" } const mockLots = [ { id: "lot-001", lotNumber: "2024-001", productName: "純米大吟醸華", breweryId: "0001" }, { id: "lot-002", lotNumber: "2024-002", productName: "本醸造月", breweryId: "0001" }, { id: "lot-003", lotNumber: "2024-003", productName: "純米酒風", breweryId: "0002" }, ] const initialSchedules: ScheduleData[] = [ { id: "sch-001", lotId: "lot-001", lotNumber: "2024-001", productName: "純米大吟醸華", breweryId: "0001", breweryName: "石川酒造", startDateTime: "2024-03-01T08:00", endDateTime: "2024-03-01T17:00", assignee: "田中一郎", status: "completed", }, { id: "sch-002", lotId: "lot-001", lotNumber: "2024-001", productName: "純米大吟醸華", breweryId: "0001", breweryName: "石川酒造", startDateTime: "2024-03-02T08:00", endDateTime: "2024-03-02T17:00", assignee: "佐藤花子", status: "in-progress", }, { id: "sch-003", lotId: "lot-003", lotNumber: "2024-003", productName: "純米酒風", breweryId: "0002", breweryName: "落酒造", startDateTime: "2024-03-03T09:00", endDateTime: "2024-03-03T18:00", assignee: "山田太郎", status: "scheduled", }, ] export default function SchedulePage() { const { user } = useAuth() const [schedules, setSchedules] = useState(initialSchedules) const [searchQuery, setSearchQuery] = useState("") const [isDialogOpen, setIsDialogOpen] = useState(false) const [editingSchedule, setEditingSchedule] = useState(null) // Form state const [formLotId, setFormLotId] = useState("") const [formStartDateTime, setFormStartDateTime] = useState("") const [formEndDateTime, setFormEndDateTime] = useState("") const [formAssignee, setFormAssignee] = useState("") // Filter based on user role const userSchedules = user?.role === "admin" ? schedules : schedules.filter((s) => s.breweryId === user?.breweryId) const userLots = user?.role === "admin" ? mockLots : mockLots.filter((l) => l.breweryId === user?.breweryId) const filteredSchedules = userSchedules.filter( (s) => s.productName.toLowerCase().includes(searchQuery.toLowerCase()) || s.assignee.toLowerCase().includes(searchQuery.toLowerCase()) || s.lotNumber.toLowerCase().includes(searchQuery.toLowerCase()) ) const resetForm = () => { setFormLotId("") setFormStartDateTime("") setFormEndDateTime("") setFormAssignee("") setEditingSchedule(null) } const openCreateDialog = () => { resetForm() setIsDialogOpen(true) } const openEditDialog = (schedule: ScheduleData) => { setEditingSchedule(schedule) setFormLotId(schedule.lotId) setFormStartDateTime(schedule.startDateTime) setFormEndDateTime(schedule.endDateTime) setFormAssignee(schedule.assignee) setIsDialogOpen(true) } const handleSubmit = () => { const lot = mockLots.find((l) => l.id === formLotId) const brewery = breweries.find((b) => b.id === lot?.breweryId) if (editingSchedule) { setSchedules( schedules.map((s) => s.id === editingSchedule.id ? { ...s, lotId: formLotId, lotNumber: lot?.lotNumber || "", productName: lot?.productName || "", breweryId: lot?.breweryId || "", breweryName: brewery?.name || "", startDateTime: formStartDateTime, endDateTime: formEndDateTime, assignee: formAssignee, } : s ) ) } else { const newSchedule: ScheduleData = { id: `sch-${Date.now()}`, lotId: formLotId, lotNumber: lot?.lotNumber || "", productName: lot?.productName || "", breweryId: lot?.breweryId || "", breweryName: brewery?.name || "", startDateTime: formStartDateTime, endDateTime: formEndDateTime, assignee: formAssignee, status: "scheduled", } setSchedules([...schedules, newSchedule]) } setIsDialogOpen(false) resetForm() } const handleDelete = (scheduleId: string) => { if (window.confirm("この製造日程を削除しますか？")) { setSchedules(schedules.filter((s) => s.id !== scheduleId)) } } const formatDateTime = (dateTime: string) => { const date = new Date(dateTime) return date.toLocaleString("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", }) } const getStatusBadge = (status: string) => { switch (status) { case "scheduled": return "bg-muted text-muted-foreground" case "in-progress": return "bg-chart-4/10 text-chart-4" case "completed": return "bg-chart-2/10 text-chart-2" default: return "bg-muted text-muted-foreground" } } const getStatusLabel = (status: string) => { switch (status) { case "scheduled": return "予定" case "in-progress": return "作業中" case "completed": return "完了" default: return "" } } return (

{/* Header */}

製造日程

製造工程の作業時間および担当者を記録

{/* Search */}

setSearchQuery(e.target.value)} className="pl-10" />

{/* Schedule List */}

製造日程一覧 ({filteredSchedules.length}) {filteredSchedules.length === 0 ? (

製造日程が登録されていません

) : (

{filteredSchedules.map((schedule) => (

{schedule.lotNumber} - {schedule.productName}

{formatDateTime(schedule.startDateTime)} 〜 {formatDateTime(schedule.endDateTime)}

{getStatusLabel(schedule.status)} 担当: {schedule.assignee} | {schedule.breweryName}

))}

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/quality/page.tsx" "use client" import { useState } from "react" import { useAuth } from "@/lib/auth-context" import { breweries } from "@/lib/brewery-data" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { FieldGroup, Field, FieldLabel } from "@/components/ui/field" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Pencil, Trash2, Search, ClipboardCheck, Thermometer, Droplets } from "lucide-react" interface QualityData { id: string lotId: string lotNumber: string productName: string breweryId: string breweryName: string temperature: number humidity: number productTemp: number roomTemp: number measuredAt: string } const mockLots = [ { id: "lot-001", lotNumber: "2024-001", productName: "純米大吟醸華", breweryId: "0001" }, { id: "lot-002", lotNumber: "2024-002", productName: "本醸造月", breweryId: "0001" }, { id: "lot-003", lotNumber: "2024-003", productName: "純米酒風", breweryId: "0002" }, ] const initialQualityRecords: QualityData[] = [ { id: "qc-001", lotId: "lot-001", lotNumber: "2024-001", productName: "純米大吟醸華", breweryId: "0001", breweryName: "石川酒造", temperature: 15.2, humidity: 62, productTemp: 8.3, roomTemp: 18.5, measuredAt: "2024-03-01T10:00", }, { id: "qc-002", lotId: "lot-001", lotNumber: "2024-001", productName: "純米大吟醸華", breweryId: "0001", breweryName: "石川酒造", temperature: 15.5, humidity: 60, productTemp: 8.5, roomTemp: 18.8, measuredAt: "2024-03-01T14:00", }, { id: "qc-003", lotId: "lot-003", lotNumber: "2024-003", productName: "純米酒風", breweryId: "0002", breweryName: "落酒造", temperature: 14.8, humidity: 58, productTemp: 7.9, roomTemp: 17.2, measuredAt: "2024-03-02T09:00", }, ] export default function QualityPage() { const { user } = useAuth() const [records, setRecords] = useState(initialQualityRecords) const [searchQuery, setSearchQuery] = useState("") const [isDialogOpen, setIsDialogOpen] = useState(false) const [editingRecord, setEditingRecord] = useState(null) // Form state const [formLotId, setFormLotId] = useState("") const [formTemperature, setFormTemperature] = useState("") const [formHumidity, setFormHumidity] = useState("") const [formProductTemp, setFormProductTemp] = useState("") const [formRoomTemp, setFormRoomTemp] = useState("") const [formMeasuredAt, setFormMeasuredAt] = useState("") // Filter based on user role const userRecords = user?.role === "admin" ? records : records.filter((r) => r.breweryId === user?.breweryId) const userLots = user?.role === "admin" ? mockLots : mockLots.filter((l) => l.breweryId === user?.breweryId) const filteredRecords = userRecords.filter( (r) => r.productName.toLowerCase().includes(searchQuery.toLowerCase()) || r.lotNumber.toLowerCase().includes(searchQuery.toLowerCase()) ) const resetForm = () => { setFormLotId("") setFormTemperature("") setFormHumidity("") setFormProductTemp("") setFormRoomTemp("") setFormMeasuredAt("") setEditingRecord(null) } const openCreateDialog = () => { resetForm() setIsDialogOpen(true) } const openEditDialog = (record: QualityData) => { setEditingRecord(record) setFormLotId(record.lotId) setFormTemperature(record.temperature.toString()) setFormHumidity(record.humidity.toString()) setFormProductTemp(record.productTemp.toString()) setFormRoomTemp(record.roomTemp.toString()) setFormMeasuredAt(record.measuredAt) setIsDialogOpen(true) } const handleSubmit = () => { const lot = mockLots.find((l) => l.id === formLotId) const brewery = breweries.find((b) => b.id === lot?.breweryId) if (editingRecord) { setRecords( records.map((r) => r.id === editingRecord.id ? { ...r, lotId: formLotId, lotNumber: lot?.lotNumber || "", productName: lot?.productName || "", breweryId: lot?.breweryId || "", breweryName: brewery?.name || "", temperature: parseFloat(formTemperature), humidity: parseFloat(formHumidity), productTemp: parseFloat(formProductTemp), roomTemp: parseFloat(formRoomTemp), measuredAt: formMeasuredAt, } : r ) ) } else { const newRecord: QualityData = { id: `qc-${Date.now()}`, lotId: formLotId, lotNumber: lot?.lotNumber || "", productName: lot?.productName || "", breweryId: lot?.breweryId || "", breweryName: brewery?.name || "", temperature: parseFloat(formTemperature), humidity: parseFloat(formHumidity), productTemp: parseFloat(formProductTemp), roomTemp: parseFloat(formRoomTemp), measuredAt: formMeasuredAt, } setRecords([...records, newRecord]) } setIsDialogOpen(false) resetForm() } const handleDelete = (recordId: string) => { if (window.confirm("この品質記録を削除しますか？")) { setRecords(records.filter((r) => r.id !== recordId)) } } const formatDateTime = (dateTime: string) => { const date = new Date(dateTime) return date.toLocaleString("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", }) } return (

{/* Header */}

品質管理

品質管理のための測定データを登録

{/* Search */}

setSearchQuery(e.target.value)} className="pl-10" />

{/* Records List */}

品質記録一覧 ({filteredRecords.length}) {filteredRecords.length === 0 ? (

品質記録がありません

) : (

{filteredRecords.map((record) => (

{record.lotNumber} - {record.productName}

{formatDateTime(record.measuredAt)} | {record.breweryName}

{/* Measurement Values */}

温度:{" "} {record.temperature}°C

湿度:{" "} {record.humidity}%

品温:{" "} {record.productTemp}°C

室温:{" "} {record.roomTemp}°C

))}

)}

) }