\n \n Heuristics analysis is not available for individual dishes.\n \n \n Heuristics analysis is designed to evaluate menu-level patterns and relationships between courses.\n For individual dishes, please use the taste, texture, or aroma analysis options.\n \n

\n );\n default:\n return ;\n }\n};",[],[187,193,199,206,213],{"_103":223,"_95":224,"_157":225,"_159":207,"_160":137,"_161":226,"_163":164,"_105":227,"_100":228,"_166":218,"_168":229,"_169":22,"_170":-5,"_171":230,"_98":231},"216f3ada-5ba8-11f0-abbb-f69ea79377d9","DishAromaAnalysis.tsx","ebeb9330-551d-11f0-abff-f69ea79377d9",562,["D",1751943812199],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"react\";\nimport { Dish } from \"../../../types.ts\";\nimport AnalysisView from \"../AnalysisView.tsx\";\nimport AromaTimeSeriesChart from \"../AromaTimeSeriesChart.tsx\";\nimport ChartCard from \"../ChartCard.tsx\";\nimport IntensityRangeChart from \"../IntensityRangeChart.tsx\";\nimport KPI from \"../KPI.tsx\";\n\nexport default function DishAromaAnalysis({ dish }: { dish: Dish }) {\n // const [syncId] = useState('aromaCharts'); // Unique sync ID for these charts\n\n // Transform the data into the format Recharts expects\n // const components = dish.components.map(c => ({ name: c.name, aroma: c.flavor?.aroma }))\n\n // // Create the VIP Dish Aroma Model once in the parent\n // const vipDishAromaModel = new VIPDishAromaModel([\n // ...components.map(c => new VIPAroma(c.name, c.aromaV2.volatility, c.aromaV2.intensity, c.aromaV2.persistence)),\n // ]);\n\n const analysis = dish.analysis\n\n const kpis = [\n ,\n ,\n \n ];\n\n const charts = [\n \n \n ,\n \n \n \n ];\n\n return ;\n}\n\n// Bad aroma shit\n// - Everything hits (peaks) at the same time\n// - Deeply mismatched finishes\n// - Unintegrated aromas",[],[187,193,199,206,224],{"_103":233,"_95":234,"_157":235,"_159":207,"_160":137,"_161":236,"_163":164,"_105":237,"_100":238,"_166":218,"_168":239,"_169":22,"_170":-5,"_171":240,"_98":241},"bce8b560-5ba6-11f0-ab0a-f69ea79377d9","DishTasteAnalysis.tsx","6d79b380-550c-11f0-ba31-f69ea79377d9",552,["D",1751943213950],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { capitalize, Tooltip } from '@mui/material';\nimport chroma from 'chroma-js';\nimport React, { ReactNode } from 'react';\nimport { Dish } from '../../../types.ts';\nimport AnalysisView from '../AnalysisView.tsx';\nimport ChartCard from '../ChartCard.tsx';\nimport KPI from '../KPI.tsx';\nimport TasteChart from '../TasteChart.tsx';\n\nexport function shortForm(s: string) {\n return s[0]!.toUpperCase() + s[1]\n}\n\ntype DotProps = {\n tooltip?: ReactNode\n intensity: number; // Should be in the range 0 - 10\n color: (intensity: number) => string\n content: string\n};\n\nconst Dot: React.FC = ({ tooltip, intensity, color, content }) => {\n // Ensure intensity is within range\n const intensityValue = Math.min(Math.max(intensity, 0), 10);\n\n // Style for the dot\n const dotStyle = {\n width: '30px',\n height: '30px',\n borderRadius: '50%',\n backgroundColor: color(intensity),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'white',\n fontWeight: 'bold',\n fontSize: '14px',\n transition: 'background-color 0.3s ease-in-out', // Add a smooth transition effect\n };\n\n return (\n \n

{content}

\n \n );\n};\n\nconst scale = chroma.scale(['#A9A9A9', '#5FBD73', '#FFFF00']).domain([0, 10])\n\nfunction color(intensity: number) {\n return scale(intensity).hex()\n}\n\nconst Tastes = ['sweet', 'sour', 'salty', 'bitter', 'umami'] as const;\n\ninterface TasteDisplayProps {\n taste?: {\n sweet: number;\n sour: number;\n salty: number;\n bitter: number;\n umami: number;\n }\n}\n\nexport function TasteDisplay({ taste: tasteInstance }: TasteDisplayProps) {\n const content = !tasteInstance\n ? \"Analyzing...\"\n : Tastes.map((taste) => (\n \n

{capitalize(taste)}

Intensity: {tasteInstance[taste].toFixed(2)}/10

\n } />\n ))\n\n return (\n

\n {content}\n

\n );\n};\n\nexport default function DishTasteAnalysis({ dish }: { dish: Dish }) {\n const kpis = [\n ,\n \n ];\n\n const charts = [\n \n {dish.analysis?.combinedTaste && }\n \n ];\n\n return ;\n}",[],[187,193,199,206,234],{"_103":243,"_95":244,"_157":245,"_159":207,"_160":137,"_161":246,"_163":164,"_105":247,"_100":248,"_166":218,"_168":249,"_169":22,"_170":-5,"_171":250,"_98":251},"bcd9b3b2-5ba6-11f0-9273-f69ea79377d9","DishTextureAnalysis.tsx","11046df8-554c-11f0-903a-f69ea79377d9",550,["D",1751943213946],8,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"react\";\nimport { Dish } from \"../../../types.ts\";\nimport AnalysisView from \"../AnalysisView.tsx\";\nimport ChartCard from \"../ChartCard.tsx\";\nimport HardnessMoistureScatter, { HardnessMoistureDataPoint } from \"../HardnessMoistureScatter.tsx\";\nimport KPI from \"../KPI.tsx\";\n\nexport default function DishTextureAnalysis({ dish }: { dish: Dish }) {\n const scatterData: HardnessMoistureDataPoint[] = []\n\n for (const component of dish.components) {\n if (component.flavor?.texture) {\n scatterData.push({\n name: component.name,\n moistureLevel: component.flavor.texture.moistureLevel,\n hardness: component.flavor.texture.hardness,\n })\n }\n }\n\n const kpis = [\n \n ];\n\n const charts = [\n \n \n \n ];\n\n return ;\n}",[],[187,193,199,206,244],[187,193,199,206],{"_103":254,"_95":255,"_157":256,"_159":200,"_160":137,"_161":257,"_163":164,"_105":258,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":259,"_98":379},"6f5068ea-569f-11f0-9c3c-f69ea79377d9","menu","6f50699e-569f-11f0-9c3c-f69ea79377d9",342,["D",1751390321575],[260,333,342,351,360,370],{"_103":261,"_95":262,"_157":263,"_159":256,"_160":137,"_161":264,"_163":164,"_105":265,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":266,"_98":332},"a4fa5a1e-56a4-11f0-b5d1-f69ea79377d9","charts","a4fa5af0-56a4-11f0-b5d1-f69ea79377d9",348,["D",1751392559089],[267,276,285,295,304,314,323],{"_103":268,"_95":269,"_157":270,"_159":263,"_160":137,"_161":271,"_163":164,"_105":272,"_100":162,"_166":218,"_168":273,"_169":22,"_170":-5,"_171":274,"_98":275},"4e9a757e-5c66-11f0-ade2-0224a6c84d84","AromaBalanceChart.tsx","b10a4976-5c63-11f0-ae20-0224a6c84d84",568,["D",1752025492356],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { Line, LineChart, ReferenceArea, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\nimport { MenuAnalysis } from '../../../../types';\n\ninterface Props {\n analysis: MenuAnalysis\n width: `${number}%`\n height: number\n}\n\nexport default function AromaBalanceChart({ analysis, width, height }: Props) {\n const augmentedData = analysis.aromaBalanceSeries\n\n return (\n \n \n {/* */}\n \n {\n if (v === 0) return ''\n if (v === 1/6) return 'Unbalanced'\n if (v === 0.5) return 'Okay'\n if (v === 5/6) return 'Balanced'\n return ''\n }} \n />\n `${value.toFixed(0)}%`} />\n \n \n \n \n \n \n );\n};",[],[187,193,199,255,262,269],{"_103":277,"_95":278,"_157":279,"_159":263,"_160":137,"_161":280,"_163":164,"_105":281,"_100":32,"_166":218,"_168":282,"_169":22,"_170":-5,"_171":283,"_98":284},"b0fdc516-5c63-11f0-841d-0224a6c84d84","AromaIntensityChart.tsx","b0fdc5d4-5c63-11f0-841d-0224a6c84d84",564,["D",1752024368938],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"react\";\nimport { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from \"recharts\";\nimport { MenuAnalysis } from \"../../../../types\";\n\ntype Props = {\n analysis: MenuAnalysis\n width: `${number}%`\n height: number\n}\n\nexport default function AromaIntensityChart({ analysis, width, height }: Props) {\n const augmentedData = analysis.aromaIntensitySeries\n\n return (\n \n \n \n \n \n \n \n \n \n )\n} ",[],[187,193,199,255,262,278],{"_103":286,"_95":287,"_157":288,"_159":263,"_160":137,"_161":289,"_163":164,"_105":290,"_100":291,"_166":218,"_168":292,"_169":22,"_170":-5,"_171":293,"_98":294},"bd1fd1aa-5adc-11f0-8134-f69ea79377d9","BalanceChart.tsx","6264455a-56a6-11f0-8ced-f69ea79377d9",509,["D",1751856456014],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { Line, LineChart, ReferenceArea, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\nimport { MenuAnalysis } from '../../../../types';\n\ninterface Props {\n analysis: MenuAnalysis\n width: `${number}%`\n height: number\n}\n\nconst BalanceChart: React.FC = ({ analysis, width, height }) => {\n const augmentedData = analysis.balanceSeries\n\n return (\n \n \n {/* */}\n \n {\n if (v === 0) return ''\n if (v === 1/6) return 'Unbalanced'\n if (v === 0.5) return 'Okay'\n if (v === 5/6) return 'Balanced'\n return ''\n }} \n />\n `${value.toFixed(0)}%`} />\n \n \n \n \n \n \n );\n};\n\nexport default BalanceChart;\n",[],[187,193,199,255,262,287],{"_103":296,"_95":297,"_157":298,"_159":263,"_160":137,"_161":299,"_163":164,"_105":300,"_100":142,"_166":218,"_168":301,"_169":22,"_170":-5,"_171":302,"_98":303},"3b447ae4-5ad4-11f0-8f70-f69ea79377d9","IntensityChart.tsx","9d3a173a-56a7-11f0-ad5c-f69ea79377d9",478,["D",1751852802060],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"react\";\nimport { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from \"recharts\";\nimport { MenuAnalysis } from \"../../../../types\";\n\ntype Props = {\n analysis: MenuAnalysis\n width: `${number}%`\n height: number\n}\n\nexport default function IntensityChart({ analysis, width, height }: Props) {\n const augmentedData = analysis.intensitySeries\n\n return (\n \n \n \n \n \n \n \n \n \n )\n}",[],[187,193,199,255,262,297],{"_103":305,"_95":306,"_157":307,"_159":263,"_160":137,"_161":308,"_163":164,"_105":309,"_100":310,"_166":218,"_168":311,"_169":22,"_170":-5,"_171":312,"_98":313},"c186b708-5ab0-11f0-a36e-f69ea79377d9","MajorTasteChart.tsx","a51e258e-56a4-11f0-bce0-f69ea79377d9",450,["D",1751837565589],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { invert } from 'ramda';\nimport React from 'react';\nimport { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\nimport { MenuAnalysis } from '../../../../types.ts';\n\nconst Tastes = ['sweet', 'sour', 'salty', 'bitter', 'umami'] as const;\ntype Taste = typeof Tastes[number];\nexport type TasteInstance = { [taste in Taste]: number };\n\ninterface Props {\n analysis: MenuAnalysis;\n width: `${number}%`\n height: number\n}\n\nconst indexes = {\n sweet: 1,\n sour: 2,\n salty: 3,\n bitter: 4,\n umami: 5\n}\n\nexport default function MajorTasteChart({ analysis, width, height }: Props) {\n const seriesData = analysis.majorTasteSeries.map(d => ({\n ...d,\n majorTaste: indexes[d.majorTaste],\n minorTaste: indexes[d.minorTaste]\n }))\n\n return (\n <>\n \n \n \n invert(indexes)[v as string]![0]!} />\n invert(indexes)[v as string]} />\n \n \n \n \n \n\n );\n};\n",[],[187,193,199,255,262,306],{"_103":315,"_95":316,"_157":317,"_159":263,"_160":137,"_161":318,"_163":164,"_105":319,"_100":291,"_166":218,"_168":320,"_169":22,"_170":-5,"_171":321,"_98":322},"3b36121a-5ad4-11f0-ba5e-f69ea79377d9","TastesChart.tsx","34ffcf16-56a7-11f0-af0f-f69ea79377d9",477,["D",1751852802056],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\nimport { MenuAnalysis } from '../../../../types.ts';\nimport { colors } from '../../TasteChart.tsx';\n\ninterface Props {\n analysis: MenuAnalysis;\n width: `${number}%`\n height: number\n}\n\nexport default function TastesChart({ analysis, width, height }: Props) {\n const tastes = Object.keys(analysis.flavorSeries[0].taste ?? {})\n return (\n \n ({\n name: f.name,\n ...f.taste\n }))}\n >\n \n \n \n \n {tastes.map((taste) => (\n \n ))}\n \n \n );\n};\n",[],[187,193,199,255,262,316],{"_103":324,"_95":325,"_157":326,"_159":263,"_160":137,"_161":327,"_163":164,"_105":328,"_100":32,"_166":218,"_168":329,"_169":22,"_170":-5,"_171":330,"_98":331},"37be4e38-5b9a-11f0-b465-f69ea79377d9","TextureBalanceChart.tsx","37be4eec-5b9a-11f0-b465-f69ea79377d9",549,["D",1751937836516],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { Line, LineChart, ReferenceArea, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\nimport { MenuAnalysis } from '../../../../types';\n\ninterface Props {\n analysis: MenuAnalysis\n width: `${number}%`\n height: number\n}\n\nexport default function TextureBalanceChart({ analysis, width, height }: Props) {\n const augmentedData = analysis.textureSeries\n\n return (\n \n \n \n {\n if (v === 0) return ''\n if (v === 1/6) return 'Unbalanced'\n if (v === 0.5) return 'Okay'\n if (v === 5/6) return 'Balanced'\n return ''\n }} \n />\n `${value.toFixed(0)}%`} />\n \n \n \n \n \n \n );\n};",[],[187,193,199,255,262,325],[187,193,199,255,262],{"_103":334,"_95":335,"_157":336,"_159":256,"_160":137,"_161":337,"_163":164,"_105":338,"_100":291,"_166":218,"_168":339,"_169":22,"_170":-5,"_171":340,"_98":341},"bd023a58-5ba6-11f0-ae25-f69ea79377d9","MenuAnalysis.tsx","6f6781a6-569f-11f0-a353-f69ea79377d9",555,["D",1751943214048],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { MenuWithResolvedDishes } from '../../../types.ts';\nimport AnalysisEmptyState from '../AnalysisEmptyState.tsx';\nimport { Analysis } from '../AnalysisSelector.tsx';\nimport MenuAromaAnalysis from './MenuAromaAnalysis.tsx';\nimport MenuHeuristicAnalysis from './MenuHeuristicAnalysis.tsx';\nimport MenuTasteAnalysis from './MenuTasteAnalysis.tsx';\nimport MenuTextureAnalysis from './MenuTextureAnalysis.tsx';\n\nexport default function MenuAnalysis({ menu, selectedAnalysis }: { menu: MenuWithResolvedDishes, selectedAnalysis: Analysis }) {\n const analysis = menu.analysis\n\n if (!analysis) {\n return (\n course.dishes).length} dish${menu.courses.flatMap(course => course.dishes).length !== 1 ? 'es' : ''} in menu`}\n />\n );\n }\n\n switch (selectedAnalysis) {\n case 'heuristic':\n return \n case 'taste':\n return \n case 'texture':\n return \n case 'aroma':\n return \n default:\n return \n }\n};",[],[187,193,199,255,335],{"_103":343,"_95":344,"_157":345,"_159":256,"_160":137,"_161":346,"_163":164,"_105":347,"_100":162,"_166":218,"_168":348,"_169":22,"_170":-5,"_171":349,"_98":350},"b1045246-5c63-11f0-906d-0224a6c84d84","MenuAromaAnalysis.tsx","bd0bc71c-5ba6-11f0-b79c-f69ea79377d9",566,["D",1752024368941],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { MenuAnalysis } from '../../../types.ts';\nimport AnalysisView from '../AnalysisView.tsx';\nimport ChartCard from '../ChartCard.tsx';\nimport KPI from '../KPI.tsx';\nimport AromaBalanceChart from './charts/AromaBalanceChart.tsx';\nimport AromaIntensityChart from './charts/AromaIntensityChart.tsx';\n\nexport default function MenuAromaAnalysis({ analysis }: { analysis: MenuAnalysis }) {\n const kpis = [\n ,\n \n ];\n\n const charts = [\n \n \n ,\n \n \n \n ];\n\n return ;\n} ",[],[187,193,199,255,344],{"_103":352,"_95":353,"_157":354,"_159":256,"_160":137,"_161":355,"_163":164,"_105":356,"_100":310,"_166":218,"_168":357,"_169":22,"_170":-5,"_171":358,"_98":359},"359e9348-5aae-11f0-b0cd-f69ea79377d9","MenuHeuristicAnalysis.tsx","1fa4dde6-56e3-11f0-b3e0-f69ea79377d9",438,["D",1751836471837],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Alert, Box, Chip, Typography } from '@mui/material';\nimport React, { useMemo } from 'react';\nimport { MenuHeuristicAnalysis } from '../../../types';\n\ninterface HeuristicError {\n message: string;\n rootCause: any[];\n}\n\ninterface HeuristicResult {\n name: string;\n description: string;\n status: 'passed' | 'failed';\n errors?: HeuristicError[];\n}\n\ninterface HeuristicsAnalysis {\n totalHeuristics: number;\n passedHeuristics: number;\n failedHeuristics: number;\n heuristicResults: HeuristicResult[];\n summary: {\n overallScore: number;\n };\n}\n\nexport default function MenuHeuristicAnalysis({ heuristics }: { heuristics: MenuHeuristicAnalysis }) {\n const analysis = useMemo(() => {\n if (!heuristics || heuristics.length === 0) {\n return null;\n }\n\n const heuristicResults = heuristics.map(({ heuristic, result }) => {\n const isPassed = result === true;\n const errors = isPassed ? undefined : (result as any).errors.map((error: any) => ({\n message: error.message,\n rootCause: error.rootCause\n }));\n\n return {\n name: heuristic.name,\n description: heuristic.description,\n status: isPassed ? 'passed' as const : 'failed' as const,\n errors\n };\n });\n\n const passedHeuristics = heuristicResults.filter(h => h.status === 'passed').length;\n const failedHeuristics = heuristicResults.filter(h => h.status === 'failed').length;\n const totalHeuristics = heuristicResults.length;\n const overallScore = totalHeuristics > 0 ? (passedHeuristics / totalHeuristics) * 100 : 100;\n\n return {\n totalHeuristics,\n passedHeuristics,\n failedHeuristics,\n heuristicResults,\n summary: {\n overallScore: Math.round(overallScore * 100) / 100\n }\n };\n }, [heuristics]);\n\n if (!analysis) {\n return (\n \n No heuristics analysis available for this menu.\n \n );\n }\n\n const scoreColor = analysis.summary.overallScore >= 80 ? 'success' :\n analysis.summary.overallScore >= 60 ? 'warning' : 'error';\n\n return (\n

\n {/* Summary Section */}\n

\n \n Heuristics Analysis Summary\n \n \n \n \n \n \n

\n\n {/* Heuristics Results */}\n

\n \n Detailed Analysis\n \n\n {analysis.heuristicResults.map((heuristic, index) => (\n

\n \n \n {heuristic.status === 'passed' ? '✓' : '✗'}\n \n \n {heuristic.name}\n \n \n \n\n \n {heuristic.description}\n \n\n {heuristic.errors && heuristic.errors.length > 0 && (\n \n \n Issues Found:\n \n

\n {error.message}\n

\n \n )}\n

\n ))}\n

\n );\n} ",[],[187,193,199,255,353],{"_103":361,"_95":362,"_157":363,"_159":256,"_160":137,"_161":364,"_163":164,"_105":365,"_100":366,"_166":218,"_168":367,"_169":22,"_170":-5,"_171":368,"_98":369},"4ea65934-5c66-11f0-9226-0224a6c84d84","MenuTasteAnalysis.tsx","6f5ae824-569f-11f0-8e05-f69ea79377d9",570,["D",1752025492358],15,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { MenuAnalysis } from '../../../types.ts';\nimport AnalysisView from '../AnalysisView.tsx';\nimport ChartCard from '../ChartCard.tsx';\nimport KPI from '../KPI.tsx';\nimport BalanceChart from './charts/BalanceChart.tsx';\nimport IntensityChart from './charts/IntensityChart.tsx';\nimport MajorTasteChart from './charts/MajorTasteChart.tsx';\nimport TastesChart from './charts/TastesChart.tsx';\n\nexport default function MenuTasteAnalysis({ analysis }: { analysis: MenuAnalysis }) {\n const kpis = [\n ,\n \n ];\n\n const charts = [\n \n \n ,\n \n \n ,\n \n \n ,\n \n \n \n ];\n\n return ;\n}",[],[187,193,199,255,362],{"_103":371,"_95":372,"_157":373,"_159":256,"_160":137,"_161":374,"_163":164,"_105":375,"_100":142,"_166":218,"_168":376,"_169":22,"_170":-5,"_171":377,"_98":378},"4e9df212-5c66-11f0-a194-0224a6c84d84","MenuTextureAnalysis.tsx","37a5d128-5b9a-11f0-b03c-f69ea79377d9",569,["D",1752025492379],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { MenuAnalysis } from '../../../types.ts';\nimport AnalysisView from '../AnalysisView.tsx';\nimport ChartCard from '../ChartCard.tsx';\nimport KPI from '../KPI.tsx';\nimport TextureBalanceChart from './charts/TextureBalanceChart.tsx';\n\nexport default function MenuTextureAnalysis({ analysis }: { analysis: MenuAnalysis }) {\n const kpis = [\n \n ];\n\n const charts = [\n \n \n \n ];\n\n return ;\n} ",[],[187,193,199,255,372],[187,193,199,255],{"_103":381,"_95":382,"_157":383,"_159":200,"_160":137,"_161":384,"_163":164,"_105":385,"_100":162,"_166":218,"_168":386,"_169":22,"_170":-5,"_171":387,"_98":388},"1f3a9348-5b8c-11f0-a597-f69ea79377d9","AnalysisEmptyState.tsx","a44c96c2-5aaf-11f0-bef2-f69ea79377d9",528,["D",1751931782583],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// import { Analytics } from '@mui/icons-material';\nimport { Box, Paper, Typography } from \"@mui/material\";\nimport React from \"react\";\n\nexport default function AnalysisEmptyState({ primaryText, secondaryText }: { primaryText: string, secondaryText: string }) {\n return \n \n {/* */}\n \n No analysis available\n \n \n {primaryText}\n \n \n \n {secondaryText}\n \n \n \n\n}",[],[187,193,199,382],{"_103":390,"_95":391,"_157":392,"_159":200,"_160":137,"_161":393,"_163":164,"_105":394,"_100":238,"_166":218,"_168":395,"_169":22,"_170":-5,"_171":396,"_98":397},"fe8c9aaa-6055-11f0-b43b-0224a6c84d84","AnalysisSelector.tsx","4157b690-5691-11f0-86ac-f69ea79377d9",610,["D",1752458290749],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { InputLabel, MenuItem, Select, useMediaQuery, useTheme } from \"@mui/material\";\nimport React from \"react\";\n\nexport type Analysis = 'taste' | 'texture' | 'aroma' | 'heuristic';\n\nexport default function AnalysisSelector({ value, onChange }: { value: Analysis, onChange: (value: Analysis) => Promise | void }) {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n return (\n

\n {!isMobile && Select view:}\n onChange(e.target.value as Analysis)}\n >\n Taste\n Texture\n Aroma\n Heuristic\n \n

\n );\n}\n",[],[187,193,199,391],{"_103":399,"_95":400,"_157":401,"_159":200,"_160":137,"_161":402,"_163":164,"_105":403,"_100":162,"_166":218,"_168":404,"_169":22,"_170":-5,"_171":405,"_98":406},"cdb3202e-5ba6-11f0-aaff-f69ea79377d9","AnalysisView.tsx","bd3e2ee6-5ba6-11f0-a77e-f69ea79377d9",558,["D",1751943242213],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React, { ReactNode } from \"react\";\nimport { KPIs } from \"./KPI.tsx\";\n\ntype Props = {\n kpis: ReactNode[]\n charts: ReactNode[]\n}\n\n export default function AnalysisView({ kpis, charts }: Props) {\n const chartCount = charts.length;\n \n const gridClasses = chartCount > 1 \n ? \"grid grid-cols-1 xl:grid-cols-2 gap-6\"\n : \"grid grid-cols-1 gap-6\";\n\n return

\n \n {kpis}\n \n

\n {charts}\n

\n}",[],[187,193,199,400],{"_103":408,"_95":409,"_157":410,"_159":200,"_160":137,"_161":411,"_163":164,"_105":412,"_100":142,"_166":218,"_168":413,"_169":22,"_170":-5,"_171":414,"_98":415},"1c53a07a-5565-11f0-a03c-f69ea79377d9","AromaTimeSeriesChart.tsx","f25855fe-551e-11f0-b6a0-f69ea79377d9",226,["D",1751255320367],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"react\";\nimport { Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\nimport seedrandom from 'seedrandom';\nimport { Dish } from \"../../types.ts\";\n\n\ninterface Props {\n dish: Dish;\n syncId?: string;\n}\n\nexport default function AromaTimeSeriesChart({ dish, syncId }: Props) {\n if (!dish.analysis) return

No data

\n\n const [hiddenSeries, setHiddenSeries] = useState>(new Set());\n const [hoveredSeries, setHoveredSeries] = useState(null);\n\n function generateHighContrastColors(count: number, minHueDistance = 30): string[] {\n const colors: string[] = [];\n const rng = seedrandom(dish.id);\n\n while (colors.length < count) {\n const h = Math.floor(rng() * 360);\n const s = 70 + Math.random() * 30; // Saturation 70–100%\n const l = 40 + Math.random() * 20; // Lightness 40–60%\n\n // Check against all existing colors\n const isDistinct = colors.every((existing) => {\n const [eh, ,] = parseHSL(existing);\n const hueDiff = Math.abs(h - eh) % 360;\n return hueDiff >= minHueDistance && hueDiff <= (360 - minHueDistance);\n });\n\n if (isDistinct) {\n colors.push(`hsl(${h}, ${s.toFixed(1)}%, ${l.toFixed(1)}%)`);\n }\n }\n\n return colors;\n }\n\n function parseHSL(hsl: string): [number, number, number] {\n const match = hsl.match(/hsl\$(\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\$/);\n if (!match) throw new Error(\"Invalid HSL format\");\n return [parseInt(match[1]!), parseFloat(match[2]!), parseFloat(match[3]!)];\n }\n\n const colors = generateHighContrastColors(dish.components.length);\n\n const handleLegendClick = (entry: any) => {\n const name = entry.value;\n setHiddenSeries(prev => {\n const newSet = new Set(prev);\n if (newSet.has(name)) {\n newSet.delete(name);\n } else {\n newSet.add(name);\n }\n return newSet;\n });\n };\n\n const handleLegendMouseEnter = (entry: any) => {\n setHoveredSeries(entry.value);\n };\n\n const handleLegendMouseLeave = () => {\n setHoveredSeries(null);\n };\n\n // Generate time series data using the extracted utility functions\n const timeSeriesData = dish.analysis?.allComponentsIntensityTimeSeries ?? [];\n const maxTime = Math.max(...timeSeriesData.map(d => d.time));\n\n return (\n \n \n \n \n [`${value.toFixed(2)}`, name]}\n labelFormatter={(time: number) => {\n const relativeTime = time / maxTime;\n if (relativeTime < 0.33) return 'Early';\n if (relativeTime < 0.66) return 'Middle';\n return 'Late';\n }}\n />\n \n {Object.keys(timeSeriesData[0]).filter(k => k !== 'time').map((key, i) => (\n \n ))}\n \n \n );\n} ",[],[187,193,199,409],{"_103":417,"_95":418,"_157":419,"_159":200,"_160":137,"_161":420,"_163":164,"_105":421,"_100":291,"_166":218,"_168":422,"_169":22,"_170":-5,"_171":423,"_98":424},"1f3f5892-5b8c-11f0-a9f6-f69ea79377d9","ChartCard.tsx","f40a26e6-551b-11f0-87e3-f69ea79377d9",529,["D",1751931782604],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// import { Info } from \"@mui/icons-material\";\nimport React, { ReactNode, useState } from \"react\";\n\ninterface ChartCardProps {\n title: string;\n description?: string;\n children: ReactNode;\n}\n\nexport default function ChartCard({ title, description, children }: ChartCardProps) {\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n

\n {/* Chart Title Section */}\n

\n {title}\n

\n {description && (\n setIsExpanded(!isExpanded)}\n className=\"flex-shrink-0 p-1 text-slate-400 hover:text-slate-600 transition-colors duration-200\"\n aria-label=\"Toggle description\"\n >\n {/* */}\n \n )}\n

\n {description && (\n

\n {description}\n

\n )}\n

\n\n {/* Chart Content */}\n {children}\n

\n );\n} ",[],[187,193,199,418],{"_103":426,"_95":427,"_157":428,"_159":200,"_160":137,"_161":429,"_163":164,"_105":430,"_100":162,"_166":218,"_168":431,"_169":22,"_170":-5,"_171":432,"_98":433},"089fb090-5ad4-11f0-98a0-f69ea79377d9","HardnessMoistureScatter.tsx","110e7a32-554c-11f0-a1f8-f69ea79377d9",474,["D",1751852717099],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { Label, ReferenceArea, ReferenceLine, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis } from 'recharts';\n\n// Define the shape of the data points\nexport interface HardnessMoistureDataPoint {\n name: string;\n hardness: number;\n moistureLevel: number;\n}\n\n// Define props for the component\ninterface HardnessMoistureScatterProps {\n data: HardnessMoistureDataPoint[];\n}\n\n\n// Custom tooltip to display only the name\nconst CustomTooltip = ({ active, payload }: any) => {\n if (active && payload && payload.length) {\n const { name } = payload[0].payload;\n return (\n

{name}

\n );\n }\n return null;\n};\n\n\nconst HardnessMoistureScatter: React.FC = ({ data }) => {\n return (\n \n \n \n Moisture Level\n \n \n Hardness\n \n } />\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default HardnessMoistureScatter;\n",[],[187,193,199,427],{"_103":435,"_95":436,"_157":437,"_159":200,"_160":137,"_161":438,"_163":164,"_105":439,"_100":217,"_166":218,"_168":440,"_169":22,"_170":-5,"_171":441,"_98":442},"04f6f6f2-5ad8-11f0-a16c-f69ea79377d9","IntensityRangeChart.tsx","e240b9aa-554a-11f0-a3cd-f69ea79377d9",501,["D",1751854429070],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\nimport { Dish } from '../../types.ts';\n\ninterface Props {\n dish: Dish;\n syncId?: string;\n}\n\nexport default function IntensityRangeChart({ dish, syncId }: Props) {\n // Generate time series data using the extracted utility functions\n const rangeData = dish.analysis?.aromaticIntegrationTimeSeries ?? [];\n\n return (\n \n \n \n \n {\n if (name === 'range') return [`${value.toFixed(1)}%`, 'Balance'];\n if (name === 'maxIntensity') return [`${value.toFixed(2)}`, 'Max Intensity'];\n if (name === 'minIntensity') return [`${value.toFixed(2)}`, 'Min Intensity'];\n return [`${value.toFixed(2)}`, name];\n }}\n labelFormatter={(time: number) => {\n // Get max time from the data to calculate relative position\n const maxTime = Math.max(...rangeData.map(d => d.time));\n const relativeTime = time / maxTime;\n if (relativeTime < 0.33) return 'Early';\n if (relativeTime < 0.66) return 'Middle';\n return 'Late';\n }}\n />\n \n \n \n );\n} ",[],[187,193,199,436],{"_103":444,"_95":445,"_157":446,"_159":200,"_160":137,"_161":447,"_163":164,"_105":448,"_100":449,"_166":218,"_168":450,"_169":22,"_170":-5,"_171":451,"_98":452},"8b58e260-5ff0-11f0-bc3a-0224a6c84d84","KPI.tsx","c5a0c922-5511-11f0-9a0f-f69ea79377d9",589,["D",1752414718301],10,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useTheme } from \"@mui/material\";\nimport React, { PropsWithChildren, useState } from \"react\";\n\nconst cache: Record = {}\nexport const percent = (num: number, precision = 1) => (num * 100).toFixed(precision) + '%'\n\nconst formatters = {\n percent,\n percent0: (v: number) => percent(v, 0),\n number: (v: number) => v,\n float: (v: number) => parseFloat(v.toFixed(2)),\n float1: (v: number) => parseFloat(v.toFixed(1))\n} as const\n\nfunction changeValueColor(changeValue: number, goodDirection?: 'up' | 'down') {\n if (changeValue === 0 || !goodDirection) return undefined\n\n if (goodDirection === 'up') {\n return changeValue > 0 ? 'success' : 'error'\n }\n\n if (goodDirection === 'down') {\n return changeValue > 0 ? 'error' : 'success'\n }\n}\n\ntype Props = {\n goodDirection?: 'up' | 'down'\n value: number\n label: string\n description?: string\n format?: keyof typeof formatters\n}\n\nexport function KPI({ goodDirection, value, label, description, format: inputFormat }: Props) {\n const [isExpanded, setIsExpanded] = useState(false);\n \n const key = JSON.stringify({\n label\n })\n\n const format = inputFormat ?? 'percent'\n\n if (!cache[key]) {\n cache[key] = []\n }\n\n const previousValue = cache[key]![cache[key]!.length - 1]\n if (!previousValue || previousValue !== value) {\n cache[key]?.push(value)\n }\n\n const oldValue = cache[key]![cache[key]!.length - 2]\n const newValue = cache[key]![cache[key]!.length - 1]\n const difference = oldValue && newValue && !isNaN(oldValue) && !isNaN(newValue) ? newValue - oldValue : undefined\n\n const formatter = formatters[format]\n const formattedOldValue = oldValue !== undefined ? formatter(oldValue) : undefined\n const formattedNewValue = newValue !== undefined ? formatter(newValue) : undefined\n const formattedDifference = difference !== undefined ? formatter(difference) : undefined\n\n const theme = useTheme()\n\n const iconColor = difference ? changeValueColor(difference, goodDirection) : undefined\n\n const handleClick = () => {\n if (description) {\n setIsExpanded(!isExpanded);\n }\n };\n\n return (\n

\n {/* Background gradient overlay */}\n

\n\n {/* Content */}\n

\n {/* Label */}\n

\n {label}\n

\n\n {/* Value section */}\n

\n \n {formattedNewValue}\n

\n\n {/* Expandable description */}\n {description && (\n

\n {description}\n

\n )}\n

\n );\n};\n\nexport default KPI;\n\n\nexport function KPIs(props: PropsWithChildren) {\n return

\n {props.children}\n

\n}",[],[187,193,199,445],{"_103":454,"_95":455,"_157":456,"_159":200,"_160":137,"_161":457,"_163":164,"_105":458,"_100":459,"_166":218,"_168":460,"_169":22,"_170":-5,"_171":461,"_98":462},"bc2b0e4e-5ad3-11f0-b434-f69ea79377d9","TasteChart.tsx","f468e988-551b-11f0-b399-f69ea79377d9",470,["D",1751852588991],9,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'react';\nimport { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\nimport { Dish } from '../../types';\n\ninterface Props {\n data: NonNullable['taste'];\n}\n\nexport const colors = {\n sweet: '#FFD700', // Gold\n sour: '#FF6347', // Tomato\n salty: '#1E90FF', // DodgerBlue\n bitter: '#2E8B57', // SeaGreen\n umami: '#A0522D', // Sienna\n} as const;\n\nconst TasteChart: React.FC = ({ data }) => {\n const chartData = Object.keys(data).map((taste) => ({ taste, value: data[taste] }));\n\n return (\n \n \n \n \n \n \n \n {chartData.map(d => )}\n \n \n \n );\n};\n\nexport default TasteChart;\n",[],[187,193,199,455],[187,193,199],{"_103":465,"_95":466,"_157":467,"_159":194,"_160":137,"_161":468,"_163":164,"_105":469,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":470,"_98":480},"b4757a18-5ff1-11f0-bff7-0224a6c84d84","common","b4757acc-5ff1-11f0-bff7-0224a6c84d84",591,["D",1752415216779],[471],{"_103":472,"_95":473,"_157":474,"_159":467,"_160":137,"_161":475,"_163":164,"_105":476,"_100":32,"_166":218,"_168":477,"_169":22,"_170":-5,"_171":478,"_98":479},"b48652de-5ff1-11f0-8400-0224a6c84d84","SavingIndicator.tsx","b48653b0-5ff1-11f0-8400-0224a6c84d84",593,["D",1752415216854],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Box, CircularProgress, Typography } from \"@mui/material\";\nimport React from \"react\";\n\ninterface SavingIndicatorProps {\n isUpdating: boolean;\n}\n\nexport default function SavingIndicator({ isUpdating }: SavingIndicatorProps) {\n return (\n \n {isUpdating ? (\n <>\n \n \n Saving...\n \n \n ) : (\n \n Saved\n \n )}\n \n );\n} ",[],[187,193,466,473],[187,193,466],{"_103":482,"_95":483,"_157":484,"_159":194,"_160":137,"_161":485,"_163":164,"_105":486,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":487,"_98":533},"6747670e-569d-11f0-9054-f69ea79377d9","dialogs","674767cc-569d-11f0-9054-f69ea79377d9",327,["D",1751389449064],[488,497,506,515,524],{"_103":489,"_95":490,"_157":491,"_159":484,"_160":137,"_161":492,"_163":164,"_105":493,"_100":32,"_166":218,"_168":494,"_169":22,"_170":-5,"_171":495,"_98":496},"676a7dca-569d-11f0-a906-f69ea79377d9","AddCourseDialog.tsx","676a7eb0-569d-11f0-a906-f69ea79377d9",332,["D",1751389449249],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from \"@mui/material\";\nimport React, { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { MenuWithResolvedDishes } from \"../../types.ts\";\nimport { apiPost } from \"../../utils/api.ts\";\n\ninterface AddCourseDialogProps {\n open: boolean;\n onClose: () => void;\n menuId: string;\n onMenuUpdated: (menu: MenuWithResolvedDishes) => void;\n}\n\nexport default function AddCourseDialog({\n open,\n onClose,\n menuId,\n onMenuUpdated\n}: AddCourseDialogProps) {\n const [courseName, setCourseName] = useState(\"\");\n const [isAddingCourse, setIsAddingCourse] = useState(false);\n const navigate = useNavigate();\n\n const handleSubmit = async () => {\n try {\n setIsAddingCourse(true);\n const result = await apiPost(`${API_URL}/api/menus/${menuId}/courses`, navigate, {\n name: courseName.trim() || undefined\n });\n\n if (result.error) {\n console.error('Error adding course:', result.error);\n // You might want to show an error message to the user here\n } else if (result.data) {\n onMenuUpdated(result.data);\n handleClose();\n }\n } catch (error) {\n console.error('Error adding course:', error);\n // You might want to show an error message to the user here\n } finally {\n setIsAddingCourse(false);\n }\n };\n\n const handleClose = () => {\n setCourseName(\"\");\n setIsAddingCourse(false);\n onClose();\n };\n\n return (\n \n );\n} ",[],[187,193,483,490],{"_103":498,"_95":499,"_157":500,"_159":484,"_160":137,"_161":501,"_163":164,"_105":502,"_100":217,"_166":218,"_168":503,"_169":22,"_170":-5,"_171":504,"_98":505},"ac06411e-5add-11f0-9bed-f69ea79377d9","AddDishDialog.tsx","675e5568-569d-11f0-b8d4-f69ea79377d9",510,["D",1751856856876],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Box, Button, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Paper, Typography } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { type Dish, MenuWithResolvedDishes } from \"../../types.ts\";\nimport { apiGet, apiPost } from \"../../utils/api.ts\";\n\ninterface AddDishDialogProps {\n open: boolean;\n onClose: () => void;\n menuId: string;\n selectedCourseId: string | null;\n onMenuUpdated: (menu: MenuWithResolvedDishes) => void;\n}\n\nexport default function AddDishDialog({\n open,\n onClose,\n menuId,\n selectedCourseId,\n onMenuUpdated\n}: AddDishDialogProps) {\n const [availableDishes, setAvailableDishes] = useState([]);\n const [isLoadingDishes, setIsLoadingDishes] = useState(false);\n const [isAddingDish, setIsAddingDish] = useState(undefined);\n const navigate = useNavigate();\n\n const fetchAvailableDishes = async () => {\n try {\n setIsLoadingDishes(true);\n const result = await apiGet(`${API_URL}/api/menus/${menuId}/available-dishes`, navigate);\n\n if (result.error) {\n console.error('Error fetching available dishes:', result.error);\n // You might want to show an error message to the user here\n } else if (result.data) {\n setAvailableDishes(result.data);\n }\n } catch (error) {\n console.error('Error fetching available dishes:', error);\n // You might want to show an error message to the user here\n } finally {\n setIsLoadingDishes(false);\n }\n };\n\n const handleAddDishToCourse = async (dishId: string) => {\n if (!selectedCourseId) return;\n\n try {\n setIsAddingDish(dishId);\n const result = await apiPost(`${API_URL}/api/menus/${menuId}/courses/${selectedCourseId}/dishes`, navigate, {\n dishId\n });\n\n if (result.error) {\n console.error('Error adding dish to course:', result.error);\n // You might want to show an error message to the user here\n } else if (result.data) {\n onMenuUpdated(result.data);\n handleClose();\n }\n } catch (error) {\n console.error('Error adding dish to course:', error);\n // You might want to show an error message to the user here\n } finally {\n setIsAddingDish(undefined);\n }\n };\n\n const handleClose = () => {\n setAvailableDishes([]);\n setIsLoadingDishes(false);\n setIsAddingDish(undefined);\n onClose();\n };\n\n // Fetch available dishes when dialog opens\n useEffect(() => {\n if (open && menuId) {\n fetchAvailableDishes();\n }\n }, [open, menuId]);\n\n return (\n \n );\n} ",[],[187,193,483,499],{"_103":507,"_95":508,"_157":509,"_159":484,"_160":137,"_161":510,"_163":164,"_105":511,"_100":32,"_166":218,"_168":512,"_169":22,"_170":-5,"_171":513,"_98":514},"3d8ed39c-569e-11f0-8ca8-f69ea79377d9","AddMenuDialog.tsx","3d8ed46e-569e-11f0-8ca8-f69ea79377d9",340,["D",1751389808591],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from \"@mui/material\";\nimport React, { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { apiPost } from \"../../utils/api.ts\";\n\ninterface Menu {\n id: string;\n name: string;\n courses: {\n id: string;\n name?: string;\n dishes: string[];\n }[];\n}\n\ninterface AddMenuDialogProps {\n open: boolean;\n onClose: () => void;\n onMenuCreated: (menu: Menu) => void;\n}\n\nexport default function AddMenuDialog({ open, onClose, onMenuCreated }: AddMenuDialogProps) {\n const [menuName, setMenuName] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const navigate = useNavigate();\n\n const handleClose = () => {\n setMenuName(\"\");\n onClose();\n };\n\n const handleSubmit = async () => {\n if (!menuName.trim()) return;\n\n try {\n setIsLoading(true);\n const result = await apiPost(`${API_URL}/api/menus`, navigate, { name: menuName });\n\n if (result.error) {\n console.error('Error creating menu:', result.error);\n // You might want to show a toast notification here\n } else if (result.data) {\n onMenuCreated(result.data);\n setMenuName(\"\");\n onClose();\n }\n } catch (error) {\n console.error('Error creating menu:', error);\n // You might want to show a toast notification here\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n \n );\n} ",[],[187,193,483,508],{"_103":516,"_95":517,"_157":518,"_159":484,"_160":137,"_161":519,"_163":164,"_105":520,"_100":32,"_166":218,"_168":521,"_169":22,"_170":-5,"_171":522,"_98":523},"6760f82c-569d-11f0-ab3d-f69ea79377d9","DeleteCourseDialog.tsx","6760f8cc-569d-11f0-ab3d-f69ea79377d9",330,["D",1751389449256],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from \"@mui/material\";\nimport React, { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { MenuWithResolvedDishes } from \"../../types.ts\";\nimport { apiDelete } from \"../../utils/api.ts\";\n\ninterface DeleteCourseDialogProps {\n open: boolean;\n onClose: () => void;\n menuId: string;\n courseToDelete: { id: string; name?: string } | null;\n menu: MenuWithResolvedDishes | null;\n onMenuUpdated: (menu: MenuWithResolvedDishes) => void;\n}\n\nexport default function DeleteCourseDialog({\n open,\n onClose,\n menuId,\n courseToDelete,\n menu,\n onMenuUpdated\n}: DeleteCourseDialogProps) {\n const [isDeletingCourse, setIsDeletingCourse] = useState(false);\n const navigate = useNavigate();\n\n const handleConfirm = async () => {\n if (!courseToDelete) return;\n\n try {\n setIsDeletingCourse(true);\n const result = await apiDelete(`${API_URL}/api/menus/${menuId}/courses/${courseToDelete.id}`, navigate);\n\n if (result.error) {\n console.error('Error deleting course:', result.error);\n // You might want to show an error message to the user here\n } else if (result.data) {\n onMenuUpdated(result.data);\n handleClose();\n }\n } catch (error) {\n console.error('Error deleting course:', error);\n // You might want to show an error message to the user here\n } finally {\n setIsDeletingCourse(false);\n }\n };\n\n const handleClose = () => {\n setIsDeletingCourse(false);\n onClose();\n };\n\n const courseName = courseToDelete?.name || `Course ${menu?.courses.findIndex(c => c.id === courseToDelete?.id) !== -1 ? menu?.courses.findIndex(c => c.id === courseToDelete?.id)! + 1 : ''}`;\n\n return (\n \n );\n} ",[],[187,193,483,517],{"_103":525,"_95":526,"_157":527,"_159":484,"_160":137,"_161":528,"_163":164,"_105":529,"_100":32,"_166":218,"_168":530,"_169":22,"_170":-5,"_171":531,"_98":532},"3efeb05c-5e97-11f0-8c0f-0224a6c84d84","DeleteMenuDialog.tsx","3efeb110-5e97-11f0-8c0f-0224a6c84d84",576,["D",1752266413841],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from \"@mui/material\";\nimport React, { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { apiDelete } from \"../../utils/api.ts\";\n\ninterface DeleteMenuDialogProps {\n open: boolean;\n onClose: () => void;\n menuId: string;\n menuName: string;\n onMenuDeleted: () => void;\n}\n\nexport default function DeleteMenuDialog({\n open,\n onClose,\n menuId,\n menuName,\n onMenuDeleted\n}: DeleteMenuDialogProps) {\n const [isDeletingMenu, setIsDeletingMenu] = useState(false);\n const navigate = useNavigate();\n\n const handleConfirm = async () => {\n try {\n setIsDeletingMenu(true);\n const result = await apiDelete(`${API_URL}/api/menus/${menuId}`, navigate);\n\n if (result.error) {\n console.error('Error deleting menu:', result.error);\n // You might want to show an error message to the user here\n } else {\n onMenuDeleted();\n handleClose();\n }\n } catch (error) {\n console.error('Error deleting menu:', error);\n // You might want to show an error message to the user here\n } finally {\n setIsDeletingMenu(false);\n }\n };\n\n const handleClose = () => {\n setIsDeletingMenu(false);\n onClose();\n };\n\n return (\n \n );\n} ",[],[187,193,483,526],[187,193,483],{"_103":535,"_95":536,"_157":537,"_159":194,"_160":137,"_161":538,"_163":164,"_105":539,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":540,"_98":594},"411a79d8-5691-11f0-a46f-f69ea79377d9","display","411a7aa0-5691-11f0-a46f-f69ea79377d9",300,["D",1751384231089],[541,567],{"_103":542,"_95":206,"_157":543,"_159":537,"_160":137,"_161":544,"_163":164,"_105":545,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":546,"_98":566},"4133a8c2-5691-11f0-8c8e-f69ea79377d9","4133a976-5691-11f0-8c8e-f69ea79377d9",302,["D",1751384231250],[547,557],{"_103":548,"_95":549,"_157":550,"_159":543,"_160":137,"_161":551,"_163":164,"_105":552,"_100":553,"_166":218,"_168":554,"_169":22,"_170":-5,"_171":555,"_98":556},"18055c40-5fef-11f0-ae50-0224a6c84d84","DishDisplay.tsx","4161ea2a-5691-11f0-a4fb-f69ea79377d9",582,["D",1752414095318],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Box, Button, Chip, CircularProgress, Paper, TextField, Typography, useMediaQuery, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { type Dish } from \"../../../types.ts\";\n\ninterface DishDisplayProps {\n dish: Dish | null;\n loading: boolean;\n error: string | null;\n isUpdating: boolean;\n onAddComponent: () => void;\n onDeleteComponent: (componentId: string) => void;\n onComponentNameChange: (componentId: string, newName: string) => void;\n onNameChange: (event: React.ChangeEvent) => void;\n}\n\nexport function DishDisplay({\n dish,\n loading,\n error,\n isUpdating,\n onAddComponent,\n onDeleteComponent,\n onComponentNameChange,\n onNameChange\n}: DishDisplayProps) {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n if (loading) {\n return (\n \n \n \n );\n }\n\n if (error) {\n return (\n \n \n Error\n \n \n {error}\n \n \n );\n }\n\n if (!dish) {\n return (\n \n \n Dish not found\n \n \n );\n }\n\n const content = (\n <>\n {/* Dish Name Section */}\n

\n \n

\n\n {/* Components Section */}\n

\n \n Components\n \n \n

\n \n Add\n \n

\n\n

\n {dish.components.map((component) => (\n \n \n {/* Component Name Row */}\n \n onComponentNameChange(component.id, e.target.value)}\n disabled={isUpdating}\n variant=\"standard\"\n placeholder=\"Enter component name...\"\n sx={{\n '& .MuiInput-root': {\n fontSize: '1rem',\n }\n }}\n />\n {/* */}\n onDeleteComponent(component.id)}\n disabled={isUpdating}\n >\n Delete\n \n \n \n \n ))}\n

\n \n );\n\n if (isMobile) {\n return

{content}

;\n }\n\n return (\n

\n {content}\n

\n );\n}\n",[],[187,193,536,206,549],{"_103":558,"_95":559,"_157":560,"_159":543,"_160":137,"_161":561,"_163":164,"_105":562,"_100":32,"_166":218,"_168":563,"_169":22,"_170":-5,"_171":564,"_98":565},"41548600-5691-11f0-9313-f69ea79377d9","DishName.tsx","415486dc-5691-11f0-9313-f69ea79377d9",307,["D",1751384231472],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Box, CircularProgress, TextField, Typography } from \"@mui/material\";\nimport React from \"react\";\nimport { type Dish } from \"../../../types.ts\";\n\ninterface DishNameEditorProps {\n dish: Dish | null;\n isUpdating: boolean;\n onNameChange: (event: React.ChangeEvent) => void;\n}\n\nexport default function DishName({ dish, isUpdating, onNameChange }: DishNameEditorProps) {\n if (!dish) return null;\n\n return (\n

\n \n {isUpdating && (\n \n \n \n Saving...\n \n \n )}\n

\n );\n}\n",[],[187,193,536,206,559],[187,193,536,206],{"_103":568,"_95":255,"_157":569,"_159":537,"_160":137,"_161":570,"_163":164,"_105":571,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":572,"_98":593},"67531a04-569d-11f0-84b1-f69ea79377d9","67531acc-569d-11f0-84b1-f69ea79377d9",328,["D",1751389449177],[573,583],{"_103":574,"_95":575,"_157":576,"_159":569,"_160":137,"_161":577,"_163":164,"_105":578,"_100":579,"_166":218,"_168":580,"_169":22,"_170":-5,"_171":581,"_98":582},"3dce0762-64d9-11f0-b279-0224a6c84d84","CourseDisplay.tsx","67959cc6-569d-11f0-bc58-f69ea79377d9",624,["D",1752954465597],20,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// import { Add } from \"@mui/icons-material\";\nimport { Box, Button, Chip, CircularProgress, Paper, TextField, Typography, useMediaQuery, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { type Dish } from \"../../../types.ts\";\n\ninterface CourseDisplayProps {\n course: {\n id: string;\n name?: string;\n dishes: Dish[];\n };\n index: number;\n isUpdating: boolean;\n onCourseNameChange: (courseId: string, newName: string) => void;\n onDeleteCourse: (courseId: string) => void;\n onAddDish: (courseId: string) => void;\n onRemoveDish: (courseId: string, dishId: string) => void;\n removingDishId: string | null;\n isDragging?: boolean;\n}\n\nexport default function CourseDisplay({ course, index, isUpdating, onCourseNameChange, onDeleteCourse, onAddDish, onRemoveDish, removingDishId, isDragging }: CourseDisplayProps) {\n const courseDishes = course.dishes || [];\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n const handleDishClick = (dishId: string) => {\n // Use browser's default navigation instead of React Router\n window.location.href = `/dishes/${dishId}`;\n };\n\n const handleRemoveDishClick = (e: React.MouseEvent, courseId: string, dishId: string) => {\n e.stopPropagation(); // Prevent navigation when clicking remove\n onRemoveDish(courseId, dishId);\n };\n\n return (\n \n \n {/* Course Header Row */}\n \n \n \n onCourseNameChange(course.id, e.target.value)}\n disabled={isUpdating}\n variant=\"standard\"\n placeholder={`Course ${index + 1}`}\n sx={{\n '& .MuiInput-root': {\n fontSize: '1rem',\n fontWeight: 600,\n color: 'text.primary'\n }\n }}\n />\n {/* Drag handle - only show on desktop when not updating */}\n {!isMobile && !isUpdating && (\n \n ⋮⋮\n \n )}\n \n \n onAddDish(course.id)}\n disabled={isUpdating}\n // startIcon={}\n sx={{ minWidth: isMobile ? 'auto' : 120, flex: isMobile ? 1 : 'none' }}\n >\n Add Dish\n \n onDeleteCourse(course.id)}\n disabled={isUpdating}\n sx={{ flex: isMobile ? 1 : 'none' }}\n >\n Delete Course\n \n \n \n\n {/* Dishes List */}\n

\n {courseDishes.map((dish) => (\n handleDishClick(dish.id)}\n >\n \n \n {dish.name}\n \n {!isMobile && (\n \n )}\n handleRemoveDishClick(e, course.id, dish.id)}\n disabled={isUpdating || removingDishId === dish.id}\n >\n {removingDishId === dish.id ? : 'Remove'}\n \n \n \n ))}\n\n {courseDishes.length === 0 && (\n \n No dishes in this course\n \n )}\n

\n \n \n );\n}",[],[187,193,536,255,575],{"_103":584,"_95":585,"_157":586,"_159":569,"_160":137,"_161":587,"_163":164,"_105":588,"_100":589,"_166":218,"_168":590,"_169":22,"_170":-5,"_171":591,"_98":592},"d13b316e-64cf-11f0-9fcb-0224a6c84d84","MenuDisplay.tsx","6765b0a6-569d-11f0-9054-f69ea79377d9",615,["D",1752950417970],24,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// import { Add } from \"@mui/icons-material\";\nimport { Box, Button, Chip, CircularProgress, Paper, TextField, Typography, useMediaQuery, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { MenuWithResolvedDishes } from \"../../../types\";\nimport { inflect } from \"../../../utils/string.ts\";\nimport CourseDisplay from \"./CourseDisplay.tsx\";\n\ninterface MenuDisplayProps {\n menu: MenuWithResolvedDishes | null;\n loading: boolean;\n onAddCourse: () => void;\n isUpdating: boolean;\n onMenuNameChange: (event: React.ChangeEvent) => void;\n onCourseNameChange: (courseId: string, newName: string) => void;\n onDeleteCourse: (courseId: string) => void;\n onAddDish: (courseId: string) => void;\n onRemoveDish: (courseId: string, dishId: string) => void;\n removingDishId: string | null;\n onReorderCourses?: (sourceIndex: number, destinationIndex: number) => void;\n}\n\nexport default function MenuDisplay({ menu, loading, onAddCourse, isUpdating, onMenuNameChange, onCourseNameChange, onDeleteCourse, onAddDish, onRemoveDish, removingDishId, onReorderCourses }: MenuDisplayProps) {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n // Drag and drop state\n const [draggedCourseIndex, setDraggedCourseIndex] = React.useState(null);\n const [dragOverIndex, setDragOverIndex] = React.useState(null);\n\n // Add CSS animation for pulse effect\n React.useEffect(() => {\n const style = document.createElement('style');\n style.textContent = `\n @keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.5; }\n 100% { opacity: 1; }\n }\n `;\n document.head.appendChild(style);\n return () => {\n if (document.head.contains(style)) {\n document.head.removeChild(style);\n }\n };\n }, []);\n\n const handleDragStart = (e: React.DragEvent, index: number) => {\n setDraggedCourseIndex(index);\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/html', index.toString());\n // Prevent text selection during drag\n e.dataTransfer.setDragImage(e.currentTarget, 0, 0);\n };\n\n const handleDragOver = (e: React.DragEvent, index: number) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n setDragOverIndex(index);\n };\n\n const handleDragLeave = (e: React.DragEvent) => {\n e.preventDefault();\n setDragOverIndex(null);\n };\n\n const handleDrop = (e: React.DragEvent, index: number) => {\n e.preventDefault();\n setDragOverIndex(null);\n \n if (draggedCourseIndex !== null && draggedCourseIndex !== index && onReorderCourses) {\n onReorderCourses(draggedCourseIndex, index);\n }\n setDraggedCourseIndex(null);\n };\n\n const handleDragEnd = () => {\n setDraggedCourseIndex(null);\n setDragOverIndex(null);\n };\n\n if (loading) {\n return (\n \n \n \n );\n }\n\n if (!menu) {\n return (\n \n \n Menu not found\n \n \n );\n }\n\n const content = (\n <>\n {/* Menu Header Section */}\n

\n \n

\n course.dishes).length} ${inflect(\"dish\", \"dishes\", menu.courses.flatMap(course => course.dishes).length)}`}\n size=\"small\"\n color=\"info\"\n variant={isMobile ? \"outlined\" : \"filled\"}\n />\n \n

\n\n {/* Courses Section */}\n

\n \n Courses\n \n\n }\n >\n Add Course\n \n

\n\n {/* Drag and drop hint */}\n {!isMobile && menu.courses.length > 1 && (\n \n 💡 Drag courses to reorder them\n \n )}\n\n

\n {menu.courses.map((course, index) => (\n handleDragStart(e, index)}\n onDragOver={(e) => handleDragOver(e, index)}\n onDragLeave={handleDragLeave}\n onDrop={(e) => handleDrop(e, index)}\n onDragEnd={handleDragEnd}\n style={{\n cursor: !isMobile && !isUpdating ? 'grab' : 'default',\n opacity: draggedCourseIndex === index ? 0.5 : 1,\n transform: draggedCourseIndex === index ? 'rotate(2deg) scale(0.98)' : 'none',\n transition: 'all 0.2s ease',\n position: 'relative',\n userSelect: 'none',\n WebkitUserSelect: 'none',\n MozUserSelect: 'none',\n msUserSelect: 'none'\n }}\n >\n {/* Drop indicator */}\n {dragOverIndex === index && draggedCourseIndex !== index && (\n \n )}\n \n \n

\n ))}\n\n {menu.courses.length === 0 && (\n \n \n No courses yet\n \n \n This menu doesn't have any courses yet.\n \n \n Add First Course\n \n \n )}\n

\n \n );\n\n if (isMobile) {\n return

{content}

;\n }\n\n return (\n

\n {content}\n

\n );\n}",[],[187,193,536,255,585],[187,193,536,255],[187,193,536],{"_103":596,"_95":597,"_157":598,"_159":194,"_160":137,"_161":599,"_163":164,"_105":600,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":601,"_98":668},"59c88a46-5502-11f0-9e67-f69ea79377d9","pages","59c88afa-5502-11f0-9e67-f69ea79377d9",46,["D",1751212903299],[602,620,630,639,648,658],{"_103":603,"_95":604,"_157":605,"_159":598,"_160":137,"_161":606,"_163":164,"_105":607,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":608,"_98":619},"1527abac-5510-11f0-90c0-f69ea79377d9","layouts","1527ac74-5510-11f0-90c0-f69ea79377d9",80,["D",1751218801116],[609],{"_103":610,"_95":611,"_157":612,"_159":605,"_160":137,"_161":613,"_163":164,"_105":614,"_100":615,"_166":218,"_168":616,"_169":22,"_170":-5,"_171":617,"_98":618},"a11457c4-6054-11f0-bbe9-0224a6c84d84","EntityLayout.tsx","153d4d18-5510-11f0-b368-f69ea79377d9",605,["D",1752457704437],19,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { CircularProgress } from \"@mui/material\"\nimport React, { ReactNode, useState } from \"react\"\n\ntype Props = {\n actions: ReactNode[] | ReactNode\n lhs: ReactNode\n rhs: ReactNode\n lhsTitle?: string\n rhsTitle?: string\n loading?: boolean\n}\n\nexport default function EntityLayout(props: Props) {\n const [activeTab, setActiveTab] = useState<'lhs' | 'rhs'>('lhs')\n\n return

\n {props.actions &&

\n {props.actions}\n

}\n\n {props.loading ? (\n // Loading state - show spinner in center\n

\n \n

\n ) : (\n <>\n {/* Mobile tabs - hidden on desktop */}\n

\n setActiveTab('lhs')}\n className={`flex-1 py-4 px-6 text-base font-medium border-b-2 transition-colors ${activeTab === 'lhs'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n {props.lhsTitle || 'Menu'}\n \n setActiveTab('rhs')}\n className={`flex-1 py-4 px-6 text-base font-medium border-b-2 transition-colors ${activeTab === 'rhs'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n {props.rhsTitle || 'Analysis'}\n \n

\n\n

\n {activeTab === 'lhs' && (\n

\n {props.lhs}\n

\n )}\n {activeTab === 'rhs' && (\n

\n {props.rhs}\n

\n )}\n

\n\n {/* Desktop side-by-side layout - hidden on mobile */}\n

\n {props.lhs}\n

\n {props.rhs}\n

\n \n )}\n

\n}",[],[187,193,597,604,611],[187,193,597,604],{"_103":621,"_95":622,"_157":623,"_159":598,"_160":137,"_161":624,"_163":164,"_105":625,"_100":626,"_166":218,"_168":627,"_169":22,"_170":-5,"_171":628,"_98":629},"8a592288-64d9-11f0-b9a3-0224a6c84d84","Dish.tsx","6422b538-5508-11f0-9f3b-f69ea79377d9",626,["D",1752954594015],51,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// import { ArrowBack } from \"@mui/icons-material\";\nimport { Button, CircularProgress } from \"@mui/material\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useNavigate, useParams, useSearchParams } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { type Dish } from \"../../types.ts\";\nimport { apiGet, apiPut } from \"../../utils/api.ts\";\nimport AnalysisSelector, { type Analysis } from \"../analysis/AnalysisSelector.tsx\";\nimport DishAnalysis from \"../analysis/dish/DishAnalysis.tsx\";\nimport SavingIndicator from \"../common/SavingIndicator.tsx\";\nimport { DishDisplay } from \"../display/dish/DishDisplay.tsx\";\nimport EntityLayout from \"./layouts/EntityLayout.tsx\";\n\nexport default function Dish() {\n const { id } = useParams<{ id: string }>();\n const [searchParams, setSearchParams] = useSearchParams();\n const [dish, setDish] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [isUpdating, setIsUpdating] = useState(false);\n const [selectedAnalysis, setSelectedAnalysis] = useState('texture');\n const navigate = useNavigate();\n\n // Browser navigation function for API calls\n const browserNavigate = (path: string) => {\n window.location.href = path;\n };\n\n // Refs to store timeout IDs for debouncing\n const nameChangeTimeoutRef = useRef(undefined);\n const componentNameChangeTimeoutRef = useRef(undefined);\n\n // Initialize analysis selection from URL or localStorage\n useEffect(() => {\n const urlAnalysis = searchParams.get('analysis') as Analysis | null;\n\n if (urlAnalysis && ['taste', 'texture', 'aroma', 'heuristic'].includes(urlAnalysis)) {\n setSelectedAnalysis(urlAnalysis);\n // Update localStorage\n localStorage.setItem('dish-analysis-view', urlAnalysis);\n } else {\n // No URL param, check localStorage\n const storedAnalysis = localStorage.getItem('dish-analysis-view') as Analysis | null;\n if (storedAnalysis && ['taste', 'texture', 'aroma', 'heuristic'].includes(storedAnalysis)) {\n setSelectedAnalysis(storedAnalysis);\n // Update URL with localStorage value\n const newSearchParams = new URLSearchParams(searchParams);\n newSearchParams.set('analysis', storedAnalysis);\n setSearchParams(newSearchParams);\n } else {\n // Default to texture and update both URL and localStorage\n setSelectedAnalysis('texture');\n const newSearchParams = new URLSearchParams(searchParams);\n newSearchParams.set('analysis', 'texture');\n setSearchParams(newSearchParams);\n localStorage.setItem('dish-analysis-view', 'texture');\n }\n }\n }, [searchParams, setSearchParams]);\n\n // Fetch dish data on component mount\n useEffect(() => {\n if (id) {\n fetchDish();\n }\n }, [id]);\n\n // Cleanup timeouts on unmount\n useEffect(() => {\n return () => {\n if (nameChangeTimeoutRef.current !== undefined) {\n clearTimeout(nameChangeTimeoutRef.current);\n }\n if (componentNameChangeTimeoutRef.current !== undefined) {\n clearTimeout(componentNameChangeTimeoutRef.current);\n }\n };\n }, []);\n\n async function fetchDish() {\n try {\n setLoading(true);\n setError(null);\n\n const result = await apiGet(`${API_URL}/api/dishes/${id}`, navigate);\n\n if (result.error) {\n setError(result.error);\n } else if (result.data) {\n setDish(result.data);\n }\n } catch (error) {\n console.error('Error fetching dish:', error);\n setError(error instanceof Error ? error.message : 'Failed to fetch dish');\n } finally {\n setLoading(false);\n }\n }\n\n async function updateDish(updatedDish: Dish) {\n try {\n setIsUpdating(true);\n setError(null);\n\n const result = await apiPut(`${API_URL}/api/dishes/${id}`, navigate, updatedDish);\n\n if (result.error) {\n setError(result.error);\n throw new Error(result.error);\n } else if (result.data) {\n setDish(result.data);\n return result.data;\n }\n } catch (error) {\n console.error('Error updating dish:', error);\n setError(error instanceof Error ? error.message : 'Failed to update dish');\n throw error;\n } finally {\n setIsUpdating(false);\n }\n }\n\n const onNameChange = async (event: React.ChangeEvent) => {\n if (dish && !isUpdating) {\n const newName = event.target.value;\n setDish({ ...dish, name: newName });\n\n // Debounce the update to avoid too many API calls\n if (nameChangeTimeoutRef.current !== undefined) {\n clearTimeout(nameChangeTimeoutRef.current);\n }\n\n nameChangeTimeoutRef.current = setTimeout(async () => {\n try {\n await updateDish({ ...dish, name: newName });\n } catch (error) {\n // Revert the local change if update failed\n setDish({ ...dish, name: dish.name });\n }\n }, 500);\n }\n };\n\n const onAddComponent = async () => {\n if (!dish || isUpdating) return;\n\n const newComponent = {\n id: Math.random().toString(36).substr(2, 9), // Generate temporary ID\n name: \"\",\n };\n\n const updatedDish = {\n ...dish,\n components: [...dish.components, newComponent]\n };\n\n try {\n setDish(updatedDish); // Optimistically update UI\n // await updateDish(updatedDish);\n } catch (error) {\n // Revert on error\n setDish(dish);\n }\n };\n\n const onDeleteComponent = async (componentId: string) => {\n if (!dish || isUpdating) return;\n\n const updatedDish = {\n ...dish,\n components: dish.components.filter(comp => comp.id !== componentId)\n };\n\n try {\n setDish(updatedDish); // Optimistically update UI\n await updateDish(updatedDish);\n } catch (error) {\n // Revert on error\n setDish(dish);\n }\n };\n\n const onComponentNameChange = async (componentId: string, newName: string) => {\n if (!dish || isUpdating) return;\n\n const updatedDish = {\n ...dish,\n components: dish.components.map(comp =>\n comp.id === componentId ? { ...comp, name: newName } : comp\n )\n };\n\n setDish(updatedDish);\n\n // Debounce the update\n if (componentNameChangeTimeoutRef.current !== undefined) {\n clearTimeout(componentNameChangeTimeoutRef.current);\n }\n\n componentNameChangeTimeoutRef.current = setTimeout(async () => {\n try {\n await updateDish(updatedDish);\n } catch (error) {\n // Revert on error\n setDish(dish);\n }\n }, 1000);\n };\n\n const handleAnalysisChange = (newAnalysis: Analysis) => {\n setSelectedAnalysis(newAnalysis);\n\n // Update URL\n const newSearchParams = new URLSearchParams(searchParams);\n newSearchParams.set('analysis', newAnalysis);\n setSearchParams(newSearchParams);\n\n // Update localStorage\n localStorage.setItem('dish-analysis-view', newAnalysis);\n };\n\n return (\n \n \n ,\n ,\n

\n \n

\n ]}\n lhs={\n \n }\n rhs={\n dish ? (\n

\n {/* Mobile Analysis Selector - shown only on mobile */}\n

\n \n

\n ) : (\n \n )\n }\n />\n );\n}",[],[187,193,597,622],{"_103":631,"_95":632,"_157":633,"_159":598,"_160":137,"_161":634,"_163":164,"_105":635,"_100":179,"_166":218,"_168":636,"_169":22,"_170":-5,"_171":637,"_98":638},"5e6b3180-64d3-11f0-9380-0224a6c84d84","Dishes.tsx","59d3b5ba-5502-11f0-b483-f69ea79377d9",621,["D",1752951943336],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { apiDelete, apiGet, apiPost } from \"../../utils/api.ts\";\nimport { inflect } from \"../../utils/string.ts\";\n\ninterface Dish {\n id: string;\n name: string;\n createdBy: string;\n components: {\n id: string;\n name: string;\n }[];\n}\n\ninterface DishProps {\n dish: Dish;\n}\n\nfunction Dish({ dish, onDelete }: DishProps & { onDelete: (dishId: string) => void }) {\n const navigate = useNavigate();\n\n const handleDishClick = () => {\n navigate(`/dishes/${dish.id}`);\n };\n\n const handleDeleteClick = (e: React.MouseEvent) => {\n e.stopPropagation(); // Prevent navigation when clicking delete\n onDelete(dish.id);\n };\n\n return (\n \n

{dish.name}

{dish.components.length} {inflect('component', 'components', dish.components.length)}

\n \n Delete\n \n \n );\n}\n\ninterface AddDishDialogProps {\n open: boolean;\n onClose: () => void;\n onSubmit: (dishName: string) => void;\n isLoading: boolean;\n}\n\nfunction AddDishDialog({ open, onClose, onSubmit, isLoading }: AddDishDialogProps) {\n const [dishName, setDishName] = useState(\"\");\n\n const handleClose = () => {\n setDishName(\"\");\n onClose();\n };\n\n const handleSubmit = () => {\n onSubmit(dishName);\n setDishName(\"\");\n };\n\n return (\n \n );\n}\n\ninterface DeleteConfirmationDialogProps {\n open: boolean;\n onClose: () => void;\n onConfirm: () => void;\n dishName: string;\n isLoading: boolean;\n}\n\nfunction DeleteConfirmationDialog({ open, onClose, onConfirm, dishName, isLoading }: DeleteConfirmationDialogProps) {\n return (\n \n );\n}\n\n//\n//\n//\n// PUBLIC INTERFACE\n//\n//\n//\n\nexport default function Dishes() {\n const [isDialogOpen, setIsDialogOpen] = useState(false);\n const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);\n const [allDishes, setDishes] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [isLoadingDishes, setIsLoadingDishes] = useState(true);\n const [isDeleting, setIsDeleting] = useState(false);\n const [dishToDelete, setDishToDelete] = useState(null);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const navigate = useNavigate();\n\n const dishes = allDishes.filter(dish => dish.name.toLowerCase().includes(searchQuery.toLowerCase()));\n\n // Fetch dishes on component mount\n useEffect(() => {\n fetchDishes();\n }, []);\n\n async function fetchDishes() {\n try {\n setIsLoadingDishes(true);\n const result = await apiGet(`${API_URL}/api/dishes`, navigate);\n\n if (result.error) {\n console.error('Error fetching dishes:', result.error);\n // You might want to show a toast notification here\n } else if (result.data) {\n setDishes(result.data);\n }\n } catch (error) {\n console.error('Error fetching dishes:', error);\n // You might want to show a toast notification here\n } finally {\n setIsLoadingDishes(false);\n }\n }\n\n function onSearchChanged(event: React.ChangeEvent) {\n setSearchQuery(event.target.value);\n }\n\n function addDish() {\n setIsDialogOpen(true);\n }\n\n function handleCloseDialog() {\n setIsDialogOpen(false);\n }\n\n async function handleSubmitDish(dishName: string) {\n try {\n setIsLoading(true);\n const result = await apiPost(`${API_URL}/api/dishes`, navigate, { name: dishName });\n\n if (result.error) {\n console.error('Error creating dish:', result.error);\n // You might want to show a toast notification here\n } else if (result.data) {\n setDishes(prevDishes => [...prevDishes, result.data!]);\n setIsDialogOpen(false);\n }\n } catch (error) {\n console.error('Error creating dish:', error);\n // You might want to show a toast notification here\n } finally {\n setIsLoading(false);\n }\n }\n\n function onAddProject() {\n console.log(\"onAddProject\");\n }\n\n function handleDeleteDish(dishId: string) {\n const dish = dishes.find(d => d.id === dishId);\n if (dish) {\n setDishToDelete(dish);\n setIsDeleteDialogOpen(true);\n }\n }\n\n function handleCloseDeleteDialog() {\n setIsDeleteDialogOpen(false);\n setDishToDelete(null);\n }\n\n async function handleConfirmDelete() {\n if (!dishToDelete) return;\n\n try {\n setIsDeleting(true);\n const result = await apiDelete(`${API_URL}/api/dishes/${dishToDelete.id}`, navigate);\n\n if (result.error) {\n console.error('Error deleting dish:', result.error);\n // You might want to show a toast notification here\n } else {\n // Remove the dish from the local state\n setDishes(prevDishes => prevDishes.filter(dish => dish.id !== dishToDelete.id));\n setIsDeleteDialogOpen(false);\n setDishToDelete(null);\n }\n } catch (error) {\n console.error('Error deleting dish:', error);\n // You might want to show a toast notification here\n } finally {\n setIsDeleting(false);\n }\n }\n\n return

\n \n \n

\n\n {/* Display dishes */}\n

\n {isLoadingDishes ? (\n \n \n \n ) : dishes.length === 0 ? (\n

No dishes found. Create your first dish!

\n ) : (\n

\n {dishes.map((dish) => (\n \n ))}\n

\n )}\n

\n\n \n\n \n

\n}",[],[187,193,597,632],{"_103":640,"_95":641,"_157":642,"_159":598,"_160":137,"_161":643,"_163":164,"_105":644,"_100":248,"_166":218,"_168":645,"_169":22,"_170":-5,"_171":646,"_98":647},"7eeecf28-5adf-11f0-b04e-f69ea79377d9","Login.tsx","659b87ec-555c-11f0-b1d9-f69ea79377d9",519,["D",1751857640213],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, CircularProgress, Input } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false); \n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n setIsLoading(true);\n try {\n const res = await fetch(`${API_URL}/api/login`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n setIsLoading(false);\n }\n } catch (err) {\n setError(\"Network error\");\n setIsLoading(false);\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",[],[187,193,597,641],{"_103":649,"_95":650,"_157":651,"_159":598,"_160":137,"_161":652,"_163":164,"_105":653,"_100":654,"_166":218,"_168":655,"_169":22,"_170":-5,"_171":656,"_98":657},"c000df38-64d0-11f0-b8c3-0224a6c84d84","Menu.tsx","6ef6f454-562c-11f0-842b-f69ea79377d9",616,["D",1752950818564],42,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// import { ArrowBack, CheckCircle } from \"@mui/icons-material\";\nimport { Button, CircularProgress } from \"@mui/material\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useNavigate, useParams } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { MenuWithResolvedDishes } from \"../../types.ts\";\nimport { apiDelete, apiGet, apiPut } from \"../../utils/api.ts\";\nimport AnalysisSelector, { Analysis } from \"../analysis/AnalysisSelector.tsx\";\nimport MenuAnalysis from \"../analysis/menu/MenuAnalysis.tsx\";\nimport SavingIndicator from \"../common/SavingIndicator.tsx\";\nimport AddCourseDialog from \"../dialogs/AddCourseDialog.tsx\";\nimport AddDishDialog from \"../dialogs/AddDishDialog.tsx\";\nimport DeleteCourseDialog from \"../dialogs/DeleteCourseDialog.tsx\";\nimport MenuDisplay from \"../display/menu/MenuDisplay.tsx\";\nimport { useToast } from \"../ToastProvider.tsx\";\nimport EntityLayout from \"./layouts/EntityLayout.tsx\";\n\nexport default function Menu() {\n const { id } = useParams<{ id: string }>();\n const [menu, setMenu] = useState(null);\n const [loading, setLoading] = useState(true);\n const [isAddCourseDialogOpen, setIsAddCourseDialogOpen] = useState(false);\n const [isUpdating, setIsUpdating] = useState(false);\n const [isDeleteCourseDialogOpen, setIsDeleteCourseDialogOpen] = useState(false);\n const [courseToDelete, setCourseToDelete] = useState<{ id: string; name?: string } | null>(null);\n const [isAddDishDialogOpen, setIsAddDishDialogOpen] = useState(false);\n const [selectedCourseId, setSelectedCourseId] = useState(null);\n const [removingDishId, setRemovingDishId] = useState(null);\n const [selectedAnalysis, setSelectedAnalysis] = useState(\"taste\");\n const navigate = useNavigate();\n const { toast } = useToast();\n\n // Refs to store timeout IDs for debouncing\n const menuNameChangeTimeoutRef = useRef(undefined);\n const courseNameChangeTimeoutRef = useRef(undefined);\n\n // Fetch menu with resolved dishes on component mount\n useEffect(() => {\n if (id) {\n fetchMenu();\n }\n }, [id]);\n\n async function fetchMenu() {\n try {\n setLoading(true);\n const result = await apiGet(`${API_URL}/api/menus/${id}`, navigate);\n\n if (result.error) {\n console.error('Error fetching menu:', result.error);\n toast(result.error, \"error\");\n } else if (result.data) {\n setMenu(result.data);\n }\n } catch (error) {\n console.error('Error fetching menu:', error);\n toast('Failed to load menu', \"error\");\n } finally {\n setLoading(false);\n }\n }\n\n const handleMenuUpdated = (updatedMenu: MenuWithResolvedDishes) => {\n setMenu(updatedMenu);\n };\n\n const handleAddCourse = () => {\n setIsAddCourseDialogOpen(true);\n };\n\n const handleCloseAddCourseDialog = () => {\n setIsAddCourseDialogOpen(false);\n };\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (menuNameChangeTimeoutRef.current !== undefined) {\n clearTimeout(menuNameChangeTimeoutRef.current);\n }\n if (courseNameChangeTimeoutRef.current !== undefined) {\n clearTimeout(courseNameChangeTimeoutRef.current);\n }\n };\n }, []);\n\n const onMenuNameChange = async (event: React.ChangeEvent) => {\n if (!menu || !id || isUpdating) return;\n\n const newName = event.target.value;\n const updatedMenu = { ...menu, name: newName };\n setMenu(updatedMenu);\n\n // Debounce the update\n if (menuNameChangeTimeoutRef.current !== undefined) {\n clearTimeout(menuNameChangeTimeoutRef.current);\n }\n\n menuNameChangeTimeoutRef.current = setTimeout(async () => {\n try {\n setIsUpdating(true);\n const result = await apiPut(`${API_URL}/api/menus/${id}`, navigate, {\n name: newName.trim()\n });\n\n console.log('result', result)\n\n if (result.error) {\n console.error('Error updating menu name:', result.error);\n toast(result.error, \"error\");\n // Revert on error\n setMenu(menu);\n } else if (result.data) {\n setMenu(result.data);\n }\n } catch (error) {\n console.error('Error updating menu name:', error);\n toast('Failed to update menu name', \"error\");\n // Revert on error\n setMenu(menu);\n } finally {\n setIsUpdating(false);\n }\n }, 500);\n };\n\n const onCourseNameChange = async (courseId: string, newName: string) => {\n if (!menu || !id || isUpdating) return;\n\n const updatedMenu = {\n ...menu,\n courses: menu.courses.map(course =>\n course.id === courseId ? { ...course, name: newName } : course\n )\n };\n\n setMenu(updatedMenu);\n\n // Debounce the update\n if (courseNameChangeTimeoutRef.current !== undefined) {\n clearTimeout(courseNameChangeTimeoutRef.current);\n }\n\n courseNameChangeTimeoutRef.current = setTimeout(async () => {\n try {\n setIsUpdating(true);\n const result = await apiPut(`${API_URL}/api/menus/${id}/courses/${courseId}`, navigate, {\n name: newName.trim() || undefined\n });\n\n if (result.error) {\n console.error('Error updating course name:', result.error);\n toast(result.error, \"error\");\n // Revert on error\n setMenu(menu);\n } else if (result.data) {\n setMenu(result.data);\n }\n } catch (error) {\n console.error('Error updating course name:', error);\n toast('Failed to update course name', \"error\");\n // Revert on error\n setMenu(menu);\n } finally {\n setIsUpdating(false);\n }\n }, 500);\n };\n\n const handleDeleteCourse = (courseId: string) => {\n const course = menu?.courses.find(c => c.id === courseId);\n if (course) {\n setCourseToDelete(course);\n setIsDeleteCourseDialogOpen(true);\n }\n };\n\n const handleCloseDeleteCourseDialog = () => {\n setIsDeleteCourseDialogOpen(false);\n setCourseToDelete(null);\n };\n\n const handleAddDish = (courseId: string) => {\n setSelectedCourseId(courseId);\n setIsAddDishDialogOpen(true);\n };\n\n const handleCloseAddDishDialog = () => {\n setIsAddDishDialogOpen(false);\n setSelectedCourseId(null);\n };\n\n const handleRemoveDishFromCourse = async (courseId: string, dishId: string) => {\n if (!id) return;\n setRemovingDishId(dishId);\n setIsUpdating(true);\n try {\n const result = await apiDelete(`${API_URL}/api/menus/${id}/courses/${courseId}/dishes/${dishId}`, navigate);\n if (result.error) {\n toast(result.error, \"error\");\n } else if (result.data) {\n setMenu(result.data);\n }\n } catch (error) {\n toast('Failed to remove dish from course', \"error\");\n } finally {\n setRemovingDishId(null);\n setIsUpdating(false);\n }\n };\n\n const handleReorderCourses = async (sourceIndex: number, destinationIndex: number) => {\n if (!menu || !id || isUpdating) return;\n\n // Create new array with reordered courses\n const reorderedCourses = [...menu.courses];\n const [movedCourse] = reorderedCourses.splice(sourceIndex, 1);\n reorderedCourses.splice(destinationIndex, 0, movedCourse);\n\n // Optimistically update UI\n const updatedMenu = { ...menu, courses: reorderedCourses };\n setMenu(updatedMenu);\n\n try {\n setIsUpdating(true);\n const result = await apiPut(`${API_URL}/api/menus/${id}/courses/reorder`, navigate, {\n courseIds: reorderedCourses.map(course => course.id)\n });\n \n if (result.error) {\n console.error('Error reordering courses:', result.error);\n toast(result.error, \"error\");\n // Revert on error\n setMenu(menu);\n } else if (result.data) {\n setMenu(result.data);\n }\n } catch (error) {\n console.error('Error reordering courses:', error);\n toast('Failed to reorder courses', \"error\");\n // Revert on error\n setMenu(menu);\n } finally {\n setIsUpdating(false);\n }\n };\n\n return (\n <>\n \n \n ,\n ,\n

\n \n

\n ]}\n lhs={\n \n }\n rhs={\n menu ? (\n

\n {/* Mobile Analysis Selector - shown only on mobile */}\n

\n \n

\n ) : (\n \n )\n }\n />\n\n {/* Add Course Dialog */}\n < AddCourseDialog\n open={isAddCourseDialogOpen}\n onClose={handleCloseAddCourseDialog}\n menuId={id || \"\"}\n onMenuUpdated={handleMenuUpdated}\n />\n\n {/* Delete Course Dialog */}\n \n\n {/* Add Dish Dialog */}\n \n \n );\n} ",[],[187,193,597,650],{"_103":659,"_95":660,"_157":661,"_159":598,"_160":137,"_161":662,"_163":164,"_105":663,"_100":664,"_166":218,"_168":665,"_169":22,"_170":-5,"_171":666,"_98":667},"3c6b80d0-64d3-11f0-b6de-0224a6c84d84","Menus.tsx","fe63284e-55f8-11f0-95d5-f69ea79377d9",620,["D",1752951886294],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Box, Button, CircularProgress, TextField } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\nimport { apiGet } from \"../../utils/api.ts\";\nimport { inflect } from \"../../utils/string.ts\";\nimport AddMenuDialog from \"../dialogs/AddMenuDialog.tsx\";\nimport DeleteMenuDialog from \"../dialogs/DeleteMenuDialog.tsx\";\ninterface Menu {\n id: string;\n name: string;\n courses: {\n id: string;\n name?: string;\n dishes: string[];\n }[];\n}\n\ninterface MenuProps {\n menu: Menu;\n}\n\nfunction Menu({ menu, onDelete }: MenuProps & { onDelete: (menu: Menu) => void }) {\n const navigate = useNavigate();\n\n const handleMenuClick = () => {\n navigate(`/menus/${menu.id}`);\n };\n\n const handleDeleteClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n onDelete(menu);\n };\n\n return (\n \n

{menu.name}

\n {menu.courses.length} {inflect(\"course\", \"courses\", menu.courses.length)} | {menu.courses.reduce((total, course) => total + course.dishes.length, 0)} {inflect(\"dish\", \"dishes\", menu.courses.reduce((total, course) => total + course.dishes.length, 0))}\n

\n \n Delete\n \n \n );\n}\n\nexport default function Menus() {\n const [isDialogOpen, setIsDialogOpen] = useState(false);\n const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);\n const [menuToDelete, setMenuToDelete] = useState(null);\n const [allMenus, setMenus] = useState([]);\n const [isLoadingMenus, setIsLoadingMenus] = useState(true);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const navigate = useNavigate();\n\n const menus = allMenus.filter(menu => menu.name.toLowerCase().includes(searchQuery.toLowerCase()));\n\n // Fetch menus on component mount\n useEffect(() => {\n fetchMenus();\n }, []);\n\n async function fetchMenus() {\n try {\n setIsLoadingMenus(true);\n const result = await apiGet(`${API_URL}/api/menus`, navigate);\n\n if (result.error) {\n console.error('Error fetching menus:', result.error);\n // You might want to show a toast notification here\n } else if (result.data) {\n setMenus(result.data);\n }\n } catch (error) {\n console.error('Error fetching menus:', error);\n // You might want to show a toast notification here\n } finally {\n setIsLoadingMenus(false);\n }\n }\n\n function onSearchChanged(event: React.ChangeEvent) {\n setSearchQuery(event.target.value);\n }\n\n function addMenu() {\n setIsDialogOpen(true);\n }\n\n function handleCloseDialog() {\n setIsDialogOpen(false);\n }\n\n function handleMenuCreated(menu: Menu) {\n setMenus(prevMenus => [...prevMenus, menu]);\n }\n\n function handleDeleteMenu(menu: Menu) {\n setMenuToDelete(menu);\n setIsDeleteDialogOpen(true);\n }\n\n function handleCloseDeleteDialog() {\n setIsDeleteDialogOpen(false);\n setMenuToDelete(null);\n }\n\n function handleMenuDeleted() {\n if (menuToDelete) {\n setMenus(prevMenus => prevMenus.filter(menu => menu.id !== menuToDelete.id));\n }\n }\n\n return

\n \n \n

\n\n {/* Display menus */}\n

\n {isLoadingMenus ? (\n \n \n \n ) : menus.length === 0 ? (\n

No menus found. Create your first menu!

\n ) : (\n

\n {menus.map((menu) => (\n \n ))}\n

\n )}\n

\n\n \n\n \n

\n} ",[],[187,193,597,660],[187,193,597],{"_103":670,"_95":671,"_157":672,"_159":194,"_160":137,"_161":673,"_163":164,"_105":674,"_100":32,"_166":218,"_168":675,"_169":22,"_170":-5,"_171":676,"_98":677},"65f28ea6-5689-11f0-9855-f69ea79377d9","App.tsx","65f28f78-5689-11f0-9855-f69ea79377d9",286,["D",1751380856932],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport Other from \"./pages/Dishes.tsx\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n const navigate = useNavigate();\n\n function handleClick() {\n setClicked(clicked + 1);\n\n fetch(\"/api/data\")\n .then((res) => res.json())\n .then((data) => console.log(data));\n\n // Navigate to the /other route\n navigate(\"/other\");\n }\n return (\n

Damon Town React + Hono Starter

\n \n \n

\n );\n}",[],[187,193,671],{"_103":679,"_95":680,"_157":681,"_159":194,"_160":137,"_161":682,"_163":164,"_105":683,"_100":142,"_166":218,"_168":684,"_169":22,"_170":-5,"_171":685,"_98":686},"108f53a8-5e9b-11f0-97de-0224a6c84d84","NavigationBar.tsx","469f3ee2-5697-11f0-8f21-f69ea79377d9",580,["D",1752268053916],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button } from \"@mui/material\";\nimport React from \"react\";\nimport { useLocation, useNavigate } from \"react-router-dom\";\n\nexport default function NavigationBar() {\n const navigate = useNavigate();\n const location = useLocation();\n\n // Don't show navigation bar on login page\n if (location.pathname === \"/\") {\n return null;\n }\n\n return (\n

\n navigate(\"/dishes\")}\n >\n Dishes\n \n navigate(\"/menus\")}\n >\n Tasting Menus\n \n

\n );\n} ",[],[187,193,680],{"_103":688,"_95":689,"_157":690,"_159":194,"_160":137,"_161":691,"_163":164,"_105":692,"_100":238,"_166":218,"_168":693,"_169":22,"_170":-5,"_171":694,"_98":695},"b476b56e-56a9-11f0-b55d-f69ea79377d9","Router.tsx","25750749-8a22-4964-a2cd-6804f0963f51",365,["D",1751394732550],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { PropsWithChildren } from \"react\";\nimport { createBrowserRouter } from \"react-router-dom\";\nimport NavigationBar from \"./NavigationBar.tsx\";\nimport Dish from \"./pages/Dish.tsx\";\nimport Dishes from \"./pages/Dishes.tsx\";\nimport Login from \"./pages/Login.tsx\";\nimport Menu from \"./pages/Menu.tsx\";\nimport Menus from \"./pages/Menus.tsx\";\n\nfunction MainLayout({ children }: PropsWithChildren) {\n return (\n

\n \n {children}\n

\n );\n}\n\n// Then create and export the router\nexport const Router = createBrowserRouter([\n { path: \"/\", element: },\n {\n path: \"/dishes\",\n element: (\n \n \n \n )\n },\n {\n path: \"/dishes/:id\",\n element: (\n \n )\n },\n {\n path: \"/menus\",\n element: (\n \n \n \n )\n },\n {\n path: \"/menus/:id\",\n element: (\n \n )\n },\n]);",[],[187,193,689],{"_103":697,"_95":698,"_157":699,"_159":194,"_160":137,"_161":700,"_163":164,"_105":701,"_100":32,"_166":218,"_168":702,"_169":22,"_170":-5,"_171":703,"_98":704},"96e49298-59f4-11f0-acb0-f69ea79377d9","Toast.tsx","96e49356-59f4-11f0-acb0-f69ea79377d9",427,["D",1751756748621],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"react\";\n\nexport type ToastLevel = \"warning\" | \"info\" | \"error\";\n\nexport interface Toast {\n id: string;\n message: string;\n level: ToastLevel;\n timestamp: number;\n}\n\ninterface ToastProps {\n toast: Toast;\n onRemove: (id: string) => void;\n}\n\nconst ToastItem: React.FC = ({ toast, onRemove }) => {\n const [isVisible, setIsVisible] = useState(false);\n\n useEffect(() => {\n // Animate in\n const timer = setTimeout(() => setIsVisible(true), 10);\n return () => clearTimeout(timer);\n }, []);\n\n useEffect(() => {\n // Auto remove after 5 seconds\n const timer = setTimeout(() => {\n setIsVisible(false);\n setTimeout(() => onRemove(toast.id), 300); // Wait for fade out animation\n }, 5000);\n\n return () => clearTimeout(timer);\n }, [toast.id, onRemove]);\n\n const getLevelStyles = (level: ToastLevel) => {\n switch (level) {\n case \"error\":\n return \"bg-red-500 text-white border-red-600\";\n case \"warning\":\n return \"bg-yellow-500 text-white border-yellow-600\";\n case \"info\":\n return \"bg-blue-500 text-white border-blue-600\";\n default:\n return \"bg-gray-500 text-white border-gray-600\";\n }\n };\n\n const getIcon = (level: ToastLevel) => {\n switch (level) {\n case \"error\":\n return \"❌\";\n case \"warning\":\n return \"⚠️\";\n case \"info\":\n return \"ℹ️\";\n default:\n return \"💬\";\n }\n };\n\n return (\n \n {getIcon(toast.level)}\n

{toast.message}

\n {\n setIsVisible(false);\n setTimeout(() => onRemove(toast.id), 300);\n }}\n className=\"text-white/80 hover:text-white text-lg flex-shrink-0 ml-2\"\n >\n ×\n \n \n );\n};\n\nexport default ToastItem; ",[],[187,193,698],{"_103":706,"_95":707,"_157":708,"_159":194,"_160":137,"_161":709,"_163":164,"_105":710,"_100":32,"_166":218,"_168":711,"_169":22,"_170":-5,"_171":712,"_98":713},"96f34d60-59f4-11f0-a23e-f69ea79377d9","ToastProvider.tsx","96f34e0a-59f4-11f0-a23e-f69ea79377d9",429,["D",1751756748621],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { createContext, ReactNode, useCallback, useContext, useState } from \"react\";\nimport ToastItem, { Toast, ToastLevel } from \"./Toast.tsx\";\n\ninterface ToastContextType {\n toast: (message: string, level: ToastLevel) => void;\n removeToast: (id: string) => void;\n}\n\nconst ToastContext = createContext(undefined);\n\ninterface ToastProviderProps {\n children: ReactNode;\n}\n\nexport const ToastProvider: React.FC = ({ children }) => {\n const [toasts, setToasts] = useState([]);\n\n const addToast = useCallback((message: string, level: ToastLevel) => {\n const newToast: Toast = {\n id: Date.now().toString() + Math.random().toString(36).substr(2, 9),\n message,\n level,\n timestamp: Date.now(),\n };\n\n setToasts(prev => [...prev, newToast]);\n }, []);\n\n const removeToast = useCallback((id: string) => {\n setToasts(prev => prev.filter(toast => toast.id !== id));\n }, []);\n\n const contextValue: ToastContextType = {\n toast: addToast,\n removeToast,\n };\n\n return (\n \n {children}\n {/* Toast Container */}\n

\n {toasts.map((toast) => (\n

\n \n

\n ))}\n

\n \n );\n};\n\nexport const useToast = (): ToastContextType => {\n const context = useContext(ToastContext);\n if (context === undefined) {\n throw new Error(\"useToast must be used within a ToastProvider\");\n }\n return context;\n}; ",[],[187,193,707],[187,193],{"_103":716,"_95":717,"_157":718,"_159":188,"_160":137,"_161":719,"_163":164,"_105":720,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":721,"_98":740},"95573466-555e-11f0-8bc2-f69ea79377d9","utils","9557354c-555e-11f0-8bc2-f69ea79377d9",213,["D",1751252516922],[722,731],{"_103":723,"_95":724,"_157":725,"_159":718,"_160":137,"_161":726,"_163":164,"_105":727,"_100":310,"_166":218,"_168":728,"_169":22,"_170":-5,"_171":729,"_98":730},"f0edfa9c-5aa6-11f0-9f9e-f69ea79377d9","api.ts","957177d6-555e-11f0-85b5-f69ea79377d9",436,["D",1751833350149],"import { NavigateFunction } from \"react-router-dom\";\n\nexport interface ApiResponse {\n data?: T;\n error?: string;\n}\n\nexport interface ApiOptions {\n method?: 'GET' | 'POST' | 'PUT' | 'DELETE';\n body?: any;\n headers?: Record;\n}\n\n/**\n * Get authentication headers with token from localStorage\n * Redirects to login if no token is found\n */\nexport const getAuthHeaders = (navigate: NavigateFunction): Record | null => {\n const token = localStorage.getItem(\"token\");\n if (!token) {\n // Redirect to login if no token\n navigate(\"/\");\n return null;\n }\n return {\n 'Content-Type': 'application/json',\n 'authorization': `Bearer ${token}`\n };\n};\n\n/**\n * Handle common API error responses\n */\nexport const handleApiError = async (response: Response, navigate: NavigateFunction): Promise<{ error: string }> => {\n if (response.status === 401) {\n // Token is invalid, redirect to login\n localStorage.removeItem(\"token\");\n navigate(\"/\");\n } \n\n return await response.json()\n};\n\n/**\n * Generic API call function with authentication and error handling\n */\nexport const apiCall = async (\n url: string,\n navigate: NavigateFunction,\n options: ApiOptions = {}\n): Promise> => {\n try {\n const headers = getAuthHeaders(navigate);\n if (!headers) {\n return { error: 'Authentication required' };\n }\n\n const response = await fetch(url, {\n method: options.method || 'GET',\n headers: {\n ...headers,\n ...options.headers\n },\n body: options.body ? JSON.stringify(options.body) : undefined\n });\n\n if (!response.ok) {\n console.log('response not ok')\n return { error: (await handleApiError(response, navigate)).error };\n }\n\n const data = await response.json();\n return { data };\n } catch (error) {\n console.error('API call error:', error);\n return {\n error: error instanceof Error ? error.message : 'Network error'\n };\n }\n};\n\n/**\n * GET request helper\n */\nexport const apiGet = (url: string, navigate: NavigateFunction): Promise> => {\n return apiCall(url, navigate, { method: 'GET' });\n};\n\n/**\n * POST request helper\n */\nexport const apiPost = (url: string, navigate: NavigateFunction, body: any): Promise> => {\n return apiCall(url, navigate, { method: 'POST', body });\n};\n\n/**\n * PUT request helper\n */\nexport const apiPut = (url: string, navigate: NavigateFunction, body: any): Promise> => {\n return apiCall(url, navigate, { method: 'PUT', body });\n};\n\n/**\n * DELETE request helper\n */\nexport const apiDelete = (url: string, navigate: NavigateFunction): Promise> => {\n return apiCall(url, navigate, { method: 'DELETE' });\n}; ",[],[187,717,724],{"_103":732,"_95":733,"_157":734,"_159":718,"_160":137,"_161":735,"_163":164,"_105":736,"_100":32,"_166":218,"_168":737,"_169":22,"_170":-5,"_171":738,"_98":739},"12577c20-59f4-11f0-a474-f69ea79377d9","string.ts","12577ce8-59f4-11f0-a474-f69ea79377d9",422,["D",1751756526303],"export function inflect(singular: string, plural: string, count: number) {\n return count === 1 ? singular : plural;\n}\n",[],[187,717,733],[187,717],{"_103":742,"_95":743,"_157":744,"_159":188,"_160":137,"_161":745,"_163":164,"_105":746,"_100":32,"_166":218,"_168":747,"_169":22,"_170":-5,"_171":748,"_98":749},"cf91d49e-5688-11f0-93fa-f69ea79377d9","env.ts","cf91d552-5688-11f0-93fa-f69ea79377d9",282,["D",1751380604603],"export const API_URL = \"https://damonb--a4226abe568611f08b8bf69ea79377d9.web.val.run\";",[],[187,743],{"_103":751,"_95":752,"_157":753,"_159":188,"_160":137,"_161":136,"_163":164,"_105":754,"_100":366,"_166":755,"_168":756,"_169":22,"_170":-5,"_171":757,"_98":758},"b759f834-64d9-11f0-afd6-0224a6c84d84","index.html","2265d882-88bd-4461-b7f4-d6284cf2dea8",["D",1752954669513],"file","\n\n\n\n \n \n MenuApp\n \n \n \n \n\n\n\n

\n \n \n\n\n",[],[187,752],{"_103":760,"_95":761,"_157":762,"_159":188,"_160":137,"_161":763,"_163":164,"_105":764,"_100":553,"_166":218,"_168":765,"_169":22,"_170":-5,"_171":766,"_98":767},"88f72f64-5ba8-11f0-8f16-f69ea79377d9","index.tsx","f1b706a6-35a5-4bc2-b849-5fd22bf28c6c",563,["D",1751943985890],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n RouterProvider,\n} from \"https://esm.sh/react-router-dom@6.22.2?deps=react@18.2.0&react-dom@18.2.0\";\nimport React, { StrictMode } from \"react\";\n\nimport { Router } from \"./components/Router.tsx\";\nimport { ToastProvider } from \"./components/ToastProvider.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n \n \n

\n \n

\n \n ,\n);",[],[187,761],{"_103":769,"_95":770,"_157":771,"_159":188,"_160":137,"_161":772,"_163":164,"_105":773,"_100":615,"_166":218,"_168":774,"_169":22,"_170":-5,"_171":775,"_98":776},"b100d12a-5c63-11f0-8be1-0224a6c84d84","types.ts","5f825b50-5512-11f0-af68-f69ea79377d9",565,["D",1752024368939],"export type UUID = string;\n\nexport type User = {\n id: UUID;\n login: string;\n passwordHash: string;\n}\n\nexport type Menu = {\n id: UUID;\n name: string;\n courses: Course[];\n}\n\nexport type Course = {\n id: UUID;\n name?: string;\n dishes: Dish['id'][];\n}\n\nexport type Taste = {\n sweet: number;\n salty: number;\n sour: number;\n bitter: number;\n umami: number;\n}\n\nexport type Flavor = {\n name: string;\n taste: Taste;\n texture: {\n hardness: number;\n moistureLevel: number;\n };\n aroma: {\n volatility: number;\n intensity: number;\n persistence: number;\n };\n}\n\nexport type Component = {\n id: string,\n name: string,\n}\n\nexport type EnrichedComponent = Component & {\n flavor: Flavor\n}\n\nexport interface Dish {\n id: string;\n name: string;\n createdBy: string;\n components: {\n id: string;\n name: string;\n flavor?: {\n name: string;\n taste: Taste;\n texture: {\n hardness: number;\n moistureLevel: number;\n };\n aroma: {\n volatility: number;\n intensity: number;\n persistence: number;\n };\n };\n }[];\n analysis?: {\n tasteBalance: number;\n tasteIntensity: number;\n textureBalance: number;\n combinedTaste: Taste\n averageAromaticIntegration: number;\n medianAromaIntensity: number;\n averageFlavorsActive: number;\n allComponentsIntensityTimeSeries: { time: number, [key: string]: number }[]\n aromaticIntegrationTimeSeries: { time: number, range: number }[]\n }\n}\n\nexport type EnrichedDish = Dish & {\n analysis?: {\n tasteBalance: number;\n tasteIntensity: number;\n textureBalance: number;\n combinedTaste: Taste;\n averageAromaticIntegration: number;\n medianAromaIntensity: number;\n averageFlavorsActive: number;\n allComponentsIntensityTimeSeries: { time: number, [key: string]: number }[]\n aromaticIntegrationTimeSeries: { time: number, range: number }[]\n }\n}\n\nexport interface MenuWithResolvedDishes {\n id: string;\n name: string;\n courses: {\n id: string;\n name?: string;\n dishes: Dish[];\n }[];\n analysis?: {\n averageBalance: number;\n averageIntensity: number;\n majorTasteSeries: {\n majorTaste: string;\n minorTaste: string;\n name: string;\n }[]\n flavorSeries: Flavor[]\n balanceSeries: {\n balance: number;\n name: string;\n }[]\n intensitySeries: {\n intensity: number;\n name: string;\n }[]\n textureSeries: {\n balance: number;\n name: string;\n }[]\n aromaIntensitySeries: {\n intensity: number;\n name: string;\n }[]\n aromaBalanceSeries: {\n balance: number;\n name: string;\n }[]\n }\n heuristics?: {\n heuristic: {\n name: string;\n description: string;\n evaluate: (menu: any) => any;\n };\n result: true | {\n errors: {\n message: string;\n rootCause: any[];\n }[];\n };\n }[];\n}\n\nexport type MenuAnalysis = NonNullable\nexport type MenuHeuristicAnalysis = NonNullable\n",[],[187,770],[187],{"_103":779,"_95":780,"_157":781,"_159":-5,"_160":137,"_161":142,"_163":164,"_105":782,"_100":32,"_166":755,"_168":783,"_169":22,"_170":-5,"_171":784,"_98":785},"4ee1b340-54f9-11f0-90f3-f69ea79377d9",".vtignore","4ee1b3e0-54f9-11f0-90f3-f69ea79377d9",["D",1751209019543],"node_modules\npackage.json\npackage-lock.json\nscripts",[],[780],{"_103":787,"_95":788,"_157":789,"_159":-5,"_160":137,"_161":162,"_163":164,"_105":790,"_100":32,"_166":755,"_168":791,"_169":22,"_170":-5,"_171":792,"_98":793},"1a0cd156-54f7-11f0-9758-f69ea79377d9","README.md","bb55827a-afd6-468c-bfcb-f3ad69dd3b8e",["D",1751208071838],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[],[788],"files",[154,173,185,191,197,204,211,222,232,242,253,260,267,276,285,295,304,314,323,333,342,351,360,370,380,389,398,407,416,425,434,443,453,464,471,481,488,497,506,515,524,534,541,547,557,567,573,583,595,602,609,620,630,639,648,658,669,678,687,696,705,715,722,731,741,750,759,768,778,786],"counts",{"_798":32,"_799":162,"_800":32,"_801":32},"pulls","branches","forks","envVars","contents",[],{"_103":640,"_95":641,"_157":642,"_159":598,"_160":137,"_161":643,"_163":164,"_105":805,"_100":248,"_166":218,"_168":645,"_169":22,"_170":-5,"_98":806},["D",1751857640213],[187,193,597,641],"upstreamProject",{"_103":146,"_95":96,"_111":-5,"_112":-5,"_109":144,"_23":809},{"_93":810,"_129":811},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_103":140,"_105":814,"_815":816,"_95":43,"_138":146,"_100":142,"_139":817,"_141":818,"_819":820,"_107":-5,"_151":22,"_109":144,"_150":810,"_16":148,"_149":96},["D",1743193703232],"updatedAt",["D",1743193771819],"4326d6e8-0be3-11f0-bfc5-569c3dd06744",124,"lockfileKey","1744749836624-esm.town_v_stevekrouse_react-hono-with-react-router@3-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":827,"_755":832,"_835":836,"_880":881,"_892":-7,"_893":32,"_894":22},{"_103":104,"_95":96,"_105":828,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":829,"_131":830,"_134":831,"_151":22},["D",1751208071838],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":144,"_145":146,"_147":148,"_149":96,"_150":94},{"_103":640,"_95":641,"_157":642,"_159":598,"_160":137,"_161":643,"_163":164,"_105":833,"_100":248,"_166":218,"_168":645,"_169":22,"_170":-5,"_98":834},["D",1751857640213],[187,193,597,641],"history",[837,839,844,849,855,860,865,870,875],{"_103":640,"_160":137,"_157":642,"_95":641,"_168":645,"_166":218,"_100":248,"_159":598,"_105":838,"_161":643,"_170":-5},["D",1751857640213],{"_103":840,"_160":137,"_157":642,"_95":641,"_168":841,"_166":218,"_100":291,"_159":598,"_105":842,"_161":843,"_170":-5},"757ced1c-5adf-11f0-b97b-f69ea79377d9","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, Input } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false); \n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n setIsLoading(true);\n try {\n const res = await fetch(`${API_URL}/api/login`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n setIsLoading(false);\n }\n } catch (err) {\n setError(\"Network error\");\n setIsLoading(false);\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",["D",1751857624370],518,{"_103":845,"_160":137,"_157":642,"_95":641,"_168":846,"_166":218,"_100":553,"_159":598,"_105":847,"_161":848,"_170":-5},"52c22fd2-5691-11f0-8c98-f69ea79377d9","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, Input } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env.ts\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n try {\n const res = await fetch(`${API_URL}/api/login`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n }\n } catch (err) {\n setError(\"Network error\");\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",["D",1751384260705],311,{"_103":850,"_160":137,"_157":642,"_95":641,"_168":851,"_166":218,"_100":852,"_159":598,"_105":853,"_161":854,"_170":-5},"9c6d553c-568f-11f0-826d-f69ea79377d9","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, Input } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { API_URL } from \"../../env\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n try {\n const res = await fetch(`${API_URL}/api/login`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n }\n } catch (err) {\n setError(\"Network error\");\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",5,["D",1751383525307],299,{"_103":856,"_160":137,"_157":642,"_95":641,"_168":857,"_166":218,"_100":310,"_159":598,"_105":858,"_161":859,"_170":-5},"05e65650-555d-11f0-a6fb-f69ea79377d9","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Button, Input } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n try {\n const res = await fetch(\"/api/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n }\n } catch (err) {\n setError(\"Network error\");\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",["D",1751251846761],203,{"_103":861,"_160":137,"_157":642,"_95":641,"_168":862,"_166":218,"_100":142,"_159":598,"_105":863,"_161":864,"_170":-5},"fb6ee048-555c-11f0-8dcb-f69ea79377d9","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Input } from \"@mui/material\";\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n try {\n const res = await fetch(\"/api/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n }\n } catch (err) {\n setError(\"Network error\");\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",["D",1751251829206],202,{"_103":866,"_160":137,"_157":642,"_95":641,"_168":867,"_166":218,"_100":217,"_159":598,"_105":868,"_161":869,"_170":-5},"e529807c-555c-11f0-986d-f69ea79377d9","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n try {\n const res = await fetch(\"/api/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n }\n } catch (err) {\n setError(\"Network error\");\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",["D",1751251791841],201,{"_103":871,"_160":137,"_157":642,"_95":641,"_168":872,"_166":218,"_100":162,"_159":598,"_105":873,"_161":874,"_170":-5},"d3300a80-555c-11f0-bc7b-f69ea79377d9","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n try {\n const res = await fetch(\"/api/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n }\n } catch (err) {\n setError(\"Network error\");\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",["D",1751251761684],200,{"_103":876,"_160":137,"_157":642,"_95":641,"_168":877,"_166":218,"_100":32,"_159":598,"_105":878,"_161":879,"_170":-5},"659b872e-555c-11f0-b1d9-f69ea79377d9","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Login: React.FC = () => {\n const [login, setLogin] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem(\"token\");\n if (token) {\n navigate(\"/dishes\");\n }\n }, [navigate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n try {\n const res = await fetch(\"/api/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ login, password }),\n });\n const data = await res.json();\n if (res.ok && data.token) {\n localStorage.setItem(\"token\", data.token);\n navigate(\"/dishes\");\n } else {\n setError(data.error || \"Login failed\");\n }\n } catch (err) {\n setError(\"Network error\");\n }\n };\n\n return (\n

Login

\n \n

\n );\n};\n\nexport default Login; ",["D",1751251577521],196,"versions",[882,884,885,886,887,888,889,890,891],{"_755":837,"_883":839},"previous",{"_755":839,"_883":844},{"_755":844,"_883":849},{"_755":849,"_883":855},{"_755":855,"_883":860},{"_755":860,"_883":865},{"_755":865,"_883":870},{"_755":870,"_883":875},{"_755":875,"_883":-5},"versionNumber","page","hasNext","actionData","errors"]

damonb

react-hono-with-react-router

History for Login.tsx