{"app":{"id":25,"summary":"Production Planning","versions":[8856,8857,8858,8861,8862],"created_by":"tristan795","created_at":"2026-02-17T10:40:43.532Z","votes":0,"approved":true,"apps":[],"app_type":"raw","external_embed_url":"https://app.windmill.dev/public/windmill-labs/f58e92fcd1b760f5ff379156f2cd0d41","value":{"runnables":{"get_steps":{"type":"inline","inlineScript":{"lock":"{\n \"dependencies\": {\n \"windmill-client\": \"latest\"\n }\n}\n//bun.lock\n{\n \"lockfileVersion\": 1,\n \"workspaces\": {\n \"\": {\n \"dependencies\": {\n \"windmill-client\": \"latest\",\n },\n },\n },\n \"packages\": {\n \"windmill-client\": [\"windmill-client@1.624.0\", \"\", {}, \"sha512-Y/Y3/7wIe7gyiwtvbme/+wO5fdEqXaskTxHum+Iz8A6qwU66KFohfx/WBpuyXThC6StwFIq1xEX0wOqTqM42AA==\"],\n }\n}\n","content":"import * as wmill from 'windmill-client';\n\nexport async function main() {\n try {\n console.log('get_steps: Starting...');\n const sql = wmill.datatable();\n console.log('get_steps: Got datatable connection');\n const steps = await sql`\n SELECT step_number, name, theoretical_duration_min\n FROM assemblyline.steps\n ORDER BY step_number\n `.fetch();\n console.log('get_steps: Query complete, rows:', steps?.length);\n return steps;\n } catch (error: any) {\n console.error('get_steps ERROR:', error?.message || error);\n throw error;\n }\n}\n","language":"bun"}},"get_orders":{"type":"inline","inlineScript":{"lock":"{\n \"dependencies\": {\n \"windmill-client\": \"latest\"\n }\n}\n//bun.lock\n{\n \"lockfileVersion\": 1,\n \"workspaces\": {\n \"\": {\n \"dependencies\": {\n \"windmill-client\": \"latest\",\n },\n },\n },\n \"packages\": {\n \"windmill-client\": [\"windmill-client@1.624.0\", \"\", {}, \"sha512-Y/Y3/7wIe7gyiwtvbme/+wO5fdEqXaskTxHum+Iz8A6qwU66KFohfx/WBpuyXThC6StwFIq1xEX0wOqTqM42AA==\"],\n }\n}\n","content":"import * as wmill from 'windmill-client';\n\nexport async function main(status?: string) {\n try {\n console.log('get_orders: Starting with status:', status);\n const sql = wmill.datatable();\n console.log('get_orders: Got datatable connection');\n\n let result;\n if (status && status !== 'all') {\n result = await sql`\n SELECT f.*,\n COALESCE(s.name, 'Non démarré') as current_step_name\n FROM assemblyline.orders f\n LEFT JOIN assemblyline.steps s ON s.step_number = f.current_step\n WHERE f.status = ${status}\n ORDER BY\n CASE f.priority\n WHEN 'urgent' THEN 1\n WHEN 'high' THEN 2\n WHEN 'normal' THEN 3\n ELSE 4\n END,\n f.due_date ASC NULLS LAST\n `.fetch();\n } else {\n result = await sql`\n SELECT f.*,\n COALESCE(s.name, 'Non démarré') as current_step_name\n FROM assemblyline.orders f\n LEFT JOIN assemblyline.steps s ON s.step_number = f.current_step\n ORDER BY\n CASE f.priority\n WHEN 'urgent' THEN 1\n WHEN 'high' THEN 2\n WHEN 'normal' THEN 3\n ELSE 4\n END,\n f.due_date ASC NULLS LAST\n `.fetch();\n }\n console.log('get_orders: Query complete, rows:', result?.length);\n return result;\n } catch (error: any) {\n console.error('get_orders ERROR:', error?.message || error);\n throw error;\n }\n}\n","language":"bun"}},"init_steps":{"type":"inline","inlineScript":{"lock":"{\n \"dependencies\": {\n \"windmill-client\": \"latest\"\n }\n}\n//bun.lock\n{\n \"lockfileVersion\": 1,\n \"workspaces\": {\n \"\": {\n \"dependencies\": {\n \"windmill-client\": \"latest\",\n },\n },\n },\n \"packages\": {\n \"windmill-client\": [\"windmill-client@1.624.0\", \"\", {}, \"sha512-Y/Y3/7wIe7gyiwtvbme/+wO5fdEqXaskTxHum+Iz8A6qwU66KFohfx/WBpuyXThC6StwFIq1xEX0wOqTqM42AA==\"],\n }\n}\n","content":"import * as wmill from 'windmill-client';\n\nexport async function main() {\n const sql = wmill.datatable();\n\n // Define the 7 manufacturing steps\n const steps = [\n { step_number: 1, name: 'Order Received', theoretical_duration_min: 30 },\n { step_number: 2, name: 'Materials Ready', theoretical_duration_min: 45 },\n { step_number: 3, name: 'Production', theoretical_duration_min: 60 },\n { step_number: 4, name: 'Assembly', theoretical_duration_min: 90 },\n { step_number: 5, name: 'Quality Check', theoretical_duration_min: 30 },\n { step_number: 6, name: 'Packaging', theoretical_duration_min: 45 },\n { step_number: 7, name: 'Ready to Ship', theoretical_duration_min: 20 }\n ];\n\n // Clear existing steps and insert new ones\n await sql`DELETE FROM assemblyline.steps`;\n\n for (const step of steps) {\n await sql`\n INSERT INTO assemblyline.steps (step_number, name, theoretical_duration_min)\n VALUES (${step.step_number}, ${step.name}, ${step.theoretical_duration_min})\n `;\n }\n\n return { success: true, message: 'Steps initialized', steps_count: steps.length };\n}\n","language":"bun"}},"start_step":{"type":"inline","inlineScript":{"lock":"{\n \"dependencies\": {\n \"windmill-client\": \"latest\"\n }\n}\n//bun.lock\n{\n \"lockfileVersion\": 1,\n \"workspaces\": {\n \"\": {\n \"dependencies\": {\n \"windmill-client\": \"latest\",\n },\n },\n },\n \"packages\": {\n \"windmill-client\": [\"windmill-client@1.624.0\", \"\", {}, \"sha512-Y/Y3/7wIe7gyiwtvbme/+wO5fdEqXaskTxHum+Iz8A6qwU66KFohfx/WBpuyXThC6StwFIq1xEX0wOqTqM42AA==\"],\n }\n}\n","content":"import * as wmill from 'windmill-client';\n\nexport async function main(\n order_id: string,\n step_number: number,\n operator_id: string\n) {\n const sql = wmill.datatable();\n\n // Validate step number\n if (step_number < 1 || step_number > 7) {\n throw new Error('Step number must be between 1 and 7');\n }\n\n // Check if previous step is completed (except for step 1)\n if (step_number > 1) {\n const prevStep = await sql`\n SELECT status FROM assemblyline.step_logs\n WHERE order_id = ${order_id} AND step_number = ${step_number - 1}\n `.fetchOne();\n\n if (prevStep?.status !== 'completed') {\n throw new Error(`Step ${step_number - 1} must be completed first`);\n }\n }\n\n // Start the step\n await sql`\n UPDATE assemblyline.step_logs\n SET status = 'in_progress',\n operator_id = ${operator_id},\n started_at = NOW()\n WHERE order_id = ${order_id} AND step_number = ${step_number}\n `.execute();\n\n // Update order status and current step\n await sql`\n UPDATE assemblyline.orders\n SET status = 'in_progress', current_step = ${step_number}\n WHERE id = ${order_id}\n `.execute();\n\n return { success: true, message: `Step ${step_number} started` };\n}\n","language":"bun"}},"create_order":{"type":"inline","inlineScript":{"lock":"{\n \"dependencies\": {\n \"windmill-client\": \"latest\"\n }\n}\n//bun.lock\n{\n \"lockfileVersion\": 1,\n \"workspaces\": {\n \"\": {\n \"dependencies\": {\n \"windmill-client\": \"latest\",\n },\n },\n },\n \"packages\": {\n \"windmill-client\": [\"windmill-client@1.624.0\", \"\", {}, \"sha512-Y/Y3/7wIe7gyiwtvbme/+wO5fdEqXaskTxHum+Iz8A6qwU66KFohfx/WBpuyXThC6StwFIq1xEX0wOqTqM42AA==\"],\n }\n}\n","content":"import * as wmill from 'windmill-client';\n\nexport async function main(\n id: string,\n client_name: string,\n product_description?: string,\n quantity?: number,\n priority?: string,\n due_date?: string\n) {\n const sql = wmill.datatable();\n\n // Create order\n const dueDateValue = due_date ? new Date(due_date) : null;\n await sql`\n INSERT INTO assemblyline.orders (id, client_name, product_description, quantity, priority, due_date)\n VALUES (${id}, ${client_name}, ${product_description || null}, ${quantity || 1}, ${priority || 'normal'}, ${dueDateValue}::date)\n `.execute();\n\n // Initialize all 7 step logs for this order\n for (let step = 1; step <= 7; step++) {\n await sql`\n INSERT INTO assemblyline.step_logs (order_id, step_number, status)\n VALUES (${id}, ${step}, 'pending')\n `.execute();\n }\n\n return { success: true, order_id: id };\n}\n","language":"bun"}},"complete_step":{"type":"inline","inlineScript":{"lock":"{\n \"dependencies\": {\n \"windmill-client\": \"latest\"\n }\n}\n//bun.lock\n{\n \"lockfileVersion\": 1,\n \"workspaces\": {\n \"\": {\n \"dependencies\": {\n \"windmill-client\": \"latest\",\n },\n },\n },\n \"packages\": {\n \"windmill-client\": [\"windmill-client@1.624.0\", \"\", {}, \"sha512-Y/Y3/7wIe7gyiwtvbme/+wO5fdEqXaskTxHum+Iz8A6qwU66KFohfx/WBpuyXThC6StwFIq1xEX0wOqTqM42AA==\"],\n }\n}\n","content":"import * as wmill from 'windmill-client';\n\nexport async function main(\n order_id: string,\n step_number: number,\n notes?: string\n) {\n const sql = wmill.datatable();\n\n // Get current step info\n const stepLog = await sql`\n SELECT * FROM assemblyline.step_logs\n WHERE order_id = ${order_id} AND step_number = ${step_number}\n `.fetchOne();\n\n if (!stepLog) {\n throw new Error('Step not found');\n }\n\n if (stepLog.status !== 'in_progress') {\n throw new Error('Step must be in progress to complete');\n }\n\n // Calculate actual duration\n const startTime = new Date(stepLog.started_at).getTime();\n const endTime = Date.now();\n const durationMin = Math.round((endTime - startTime) / 60000);\n\n // Complete the step\n await sql`\n UPDATE assemblyline.step_logs\n SET status = 'completed',\n completed_at = NOW(),\n actual_duration_min = ${durationMin},\n notes = ${notes || null}\n WHERE order_id = ${order_id} AND step_number = ${step_number}\n `.execute();\n\n // Check if this was the last step\n if (step_number === 7) {\n await sql`\n UPDATE assemblyline.orders\n SET status = 'completed', completed_at = NOW()\n WHERE id = ${order_id}\n `.execute();\n }\n\n // Get theoretical duration for comparison\n const stepRef = await sql`\n SELECT theoretical_duration_min FROM assemblyline.steps\n WHERE step_number = ${step_number}\n `.fetchOne();\n\n const theoreticalMin = stepRef?.theoretical_duration_min || 15;\n const isDelayed = durationMin > theoreticalMin;\n\n return {\n success: true,\n actual_duration_min: durationMin,\n theoretical_duration_min: theoreticalMin,\n is_delayed: isDelayed,\n delay_min: isDelayed ? durationMin - theoreticalMin : 0\n };\n}\n","language":"bun"}},"get_order_progress":{"type":"inline","inlineScript":{"lock":"{\n \"dependencies\": {\n \"windmill-client\": \"latest\"\n }\n}\n//bun.lock\n{\n \"lockfileVersion\": 1,\n \"workspaces\": {\n \"\": {\n \"dependencies\": {\n \"windmill-client\": \"latest\",\n },\n },\n },\n \"packages\": {\n \"windmill-client\": [\"windmill-client@1.624.0\", \"\", {}, \"sha512-Y/Y3/7wIe7gyiwtvbme/+wO5fdEqXaskTxHum+Iz8A6qwU66KFohfx/WBpuyXThC6StwFIq1xEX0wOqTqM42AA==\"],\n }\n}\n","content":"import * as wmill from 'windmill-client';\n\nexport async function main(order_id: string) {\n const sql = wmill.datatable();\n\n // Get order info\n const order = await sql`\n SELECT * FROM assemblyline.orders WHERE id = ${order_id}\n `.fetchOne();\n\n if (!order) {\n throw new Error('Order not found');\n }\n\n // Get all steps with their logs (if any)\n const steps = await sql`\n SELECT\n s.step_number,\n s.name as step_name,\n s.theoretical_duration_min,\n COALESCE(sl.status, 'pending') as status,\n sl.operator_id,\n sl.started_at,\n sl.completed_at,\n sl.actual_duration_min,\n sl.notes\n FROM assemblyline.steps s\n LEFT JOIN assemblyline.step_logs sl ON sl.step_number = s.step_number AND sl.order_id = ${order_id}\n ORDER BY s.step_number\n `.fetch();\n\n // Calculate progress\n const completedSteps = steps.filter((s: any) => s.status === 'completed').length;\n const progressPercent = Math.round((completedSteps / 7) * 100);\n\n // Calculate total time\n const totalActual = steps.reduce((sum: number, s: any) => sum + (s.actual_duration_min || 0), 0);\n const totalTheoretical = steps.reduce((sum: number, s: any) => sum + s.theoretical_duration_min, 0);\n\n return {\n order,\n steps,\n progress: {\n completed_steps: completedSteps,\n total_steps: 7,\n percent: progressPercent,\n total_actual_min: totalActual,\n total_theoretical_min: totalTheoretical,\n efficiency: totalActual > 0 ? Math.round((totalTheoretical / totalActual) * 100) : null\n }\n };\n}\n","language":"bun"}},"get_dashboard_stats":{"type":"inline","inlineScript":{"lock":"{\n \"dependencies\": {\n \"windmill-client\": \"latest\"\n }\n}\n//bun.lock\n{\n \"lockfileVersion\": 1,\n \"workspaces\": {\n \"\": {\n \"dependencies\": {\n \"windmill-client\": \"latest\",\n },\n },\n },\n \"packages\": {\n \"windmill-client\": [\"windmill-client@1.624.0\", \"\", {}, \"sha512-Y/Y3/7wIe7gyiwtvbme/+wO5fdEqXaskTxHum+Iz8A6qwU66KFohfx/WBpuyXThC6StwFIq1xEX0wOqTqM42AA==\"],\n }\n}\n","content":"import * as wmill from 'windmill-client';\n\nexport async function main() {\n const sql = wmill.datatable();\n\n // Get order counts by status\n const statusCounts = await sql`\n SELECT status, COUNT(*) as count\n FROM assemblyline.orders\n GROUP BY status\n `.fetch();\n\n // Get urgent/high priority orders in progress\n const priorityFolders = await sql`\n SELECT f.id, f.client_name, f.priority, f.due_date,\n s.name as current_step_name, f.current_step\n FROM assemblyline.orders f\n LEFT JOIN assemblyline.steps s ON s.step_number = f.current_step\n WHERE f.status = 'in_progress'\n AND f.priority IN ('urgent', 'high')\n ORDER BY\n CASE f.priority WHEN 'urgent' THEN 1 ELSE 2 END,\n f.due_date ASC\n LIMIT 5\n `.fetch();\n\n // Get step performance (avg actual vs theoretical)\n const stepPerformance = await sql`\n SELECT s.step_number, s.name, s.theoretical_duration_min,\n ROUND(AVG(sl.actual_duration_min)) as avg_actual_min,\n COUNT(sl.id) FILTER (WHERE sl.status = 'completed') as completed_count\n FROM assemblyline.steps s\n LEFT JOIN assemblyline.step_logs sl ON sl.step_number = s.step_number\n AND sl.status = 'completed'\n GROUP BY s.step_number, s.name, s.theoretical_duration_min\n ORDER BY s.step_number\n `.fetch();\n\n // Get orders due today or overdue\n const dueSoon = await sql`\n SELECT COUNT(*) as count\n FROM assemblyline.orders\n WHERE status NOT IN ('completed', 'cancelled')\n AND due_date <= CURRENT_DATE\n `.fetchOne();\n\n return {\n status_counts: statusCounts,\n priority_orders: priorityFolders,\n step_performance: stepPerformance,\n overdue_count: dueSoon?.count || 0\n };\n}\n","language":"bun"}}},"files":{"/App.tsx":"import React, { useState, useEffect, useMemo } from 'react'\nimport { backend } from './wmill'\nimport './index.css'\n\ntype Order = {\n id: string;\n client_name: string;\n product_description: string;\n quantity: number;\n priority: string;\n due_date: string;\n status: string;\n current_step: number;\n current_step_name: string;\n created_at: string;\n};\n\ntype Step = {\n step_number: number;\n name: string;\n theoretical_duration_min: number;\n};\n\nconst PRIORITY_CONFIG: Record = {\n urgent: { color: '#dc2626', bg: '#fef2f2', label: 'Urgent' },\n high: { color: '#ea580c', bg: '#fff7ed', label: 'High' },\n normal: { color: '#2563eb', bg: '#eff6ff', label: 'Normal' },\n low: { color: '#6b7280', bg: '#f9fafb', label: 'Low' }\n};\n\nconst STATUS_CONFIG: Record = {\n pending: { color: '#6b7280', bg: '#f3f4f6', label: 'Pending' },\n in_progress: { color: '#d97706', bg: '#fef3c7', label: 'In Progress' },\n completed: { color: '#059669', bg: '#d1fae5', label: 'Completed' },\n cancelled: { color: '#dc2626', bg: '#fef2f2', label: 'Cancelled' }\n};\n\nconst App = () => {\n const [allOrders, setAllOrders] = useState([]);\n const [steps, setSteps] = useState([]);\n const [loading, setLoading] = useState(false);\n const [selectedOrder, setSelectedOrder] = useState(null);\n const [allProgress, setAllProgress] = useState>({});\n const [showNewForm, setShowNewForm] = useState(false);\n const [filterStatus, setFilterStatus] = useState('all');\n\n // Modal states\n const [showStartModal, setShowStartModal] = useState(false);\n const [showCompleteModal, setShowCompleteModal] = useState(false);\n const [modalStepNumber, setModalStepNumber] = useState(null);\n const [operatorId, setOperatorId] = useState('');\n const [completionNotes, setCompletionNotes] = useState('');\n\n const [newOrder, setNewOrder] = useState({\n id: '',\n client_name: '',\n product_description: '',\n quantity: 1,\n priority: 'normal',\n due_date: ''\n });\n\n // Filter orders client-side based on selected status\n const filteredOrders = useMemo(() => {\n if (filterStatus === 'all') {\n return allOrders;\n }\n return allOrders.filter(order => order.status === filterStatus);\n }, [allOrders, filterStatus]);\n\n const orderProgress = selectedOrder ? allProgress[selectedOrder] ?? null : null;\n\n async function loadData() {\n setLoading(true);\n try {\n const [ordersData, stepsData] = await Promise.all([\n backend.get_orders({ status: 'all' }),\n backend.get_steps({})\n ]);\n const ordersArray = Array.isArray(ordersData) ? ordersData : [];\n const stepsArray = Array.isArray(stepsData) ? stepsData : [];\n setAllOrders(ordersArray as Order[]);\n setSteps(stepsArray as Step[]);\n\n // Load progress for all orders in parallel\n const orders = ordersArray as Order[];\n const progressResults = await Promise.all(\n orders.map(o => backend.get_order_progress({ order_id: o.id }).catch(() => null))\n );\n const progressMap: Record = {};\n orders.forEach((o, i) => {\n if (progressResults[i]) progressMap[o.id] = progressResults[i];\n });\n setAllProgress(progressMap);\n } catch (e) {\n console.error('Error loading data:', e);\n }\n setLoading(false);\n }\n\n // Load data on mount\n useEffect(() => {\n loadData();\n }, []);\n\n async function handleCreateOrder(e: React.FormEvent) {\n e.preventDefault();\n try {\n const result = await backend.create_order({\n id: newOrder.id,\n client_name: newOrder.client_name,\n product_description: newOrder.product_description || undefined,\n quantity: newOrder.quantity,\n priority: newOrder.priority,\n due_date: newOrder.due_date || undefined\n });\n if (result && typeof result === 'object' && 'error' in result) {\n alert('Error: ' + JSON.stringify(result));\n return;\n }\n setShowNewForm(false);\n setNewOrder({ id: '', client_name: '', product_description: '', quantity: 1, priority: 'normal', due_date: '' });\n loadData();\n } catch (e: any) {\n alert('Error creating order: ' + (e?.message || JSON.stringify(e)));\n }\n }\n\n function openStartModal(stepNumber: number) {\n setModalStepNumber(stepNumber);\n setOperatorId('');\n setShowStartModal(true);\n }\n\n function openCompleteModal(stepNumber: number) {\n setModalStepNumber(stepNumber);\n setCompletionNotes('');\n setShowCompleteModal(true);\n }\n\n async function handleStartStep() {\n if (!selectedOrder || !modalStepNumber || !operatorId.trim()) return;\n\n try {\n await backend.start_step({ order_id: selectedOrder, step_number: modalStepNumber, operator_id: operatorId.trim() });\n setShowStartModal(false);\n setOperatorId('');\n loadData();\n loadOrderProgress(selectedOrder);\n } catch (e: any) {\n alert('Error: ' + e.message);\n }\n }\n\n async function handleCompleteStep() {\n if (!selectedOrder || !modalStepNumber) return;\n\n try {\n await backend.complete_step({\n order_id: selectedOrder,\n step_number: modalStepNumber,\n notes: completionNotes.trim() || undefined\n });\n setShowCompleteModal(false);\n setCompletionNotes('');\n loadData();\n loadOrderProgress(selectedOrder);\n } catch (e: any) {\n alert('Error: ' + e.message);\n }\n }\n\n function loadOrderProgress(orderId: string) {\n setSelectedOrder(orderId);\n }\n\n return (\n
\n
\n {/* Header */}\n
\n
\n

\n Production Planning\n

\n

\n Order and manufacturing tracking\n

\n
\n
\n
\n Demo App\n
\n
\n\n {/* Controls Bar */}\n
\n setShowNewForm(!showNewForm)}\n style={{\n padding: '12px 24px',\n background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',\n color: 'white',\n border: 'none',\n borderRadius: '12px',\n cursor: 'pointer',\n fontWeight: '600',\n fontSize: '14px',\n boxShadow: '0 4px 12px rgba(59, 130, 246, 0.35)',\n transition: 'all 0.2s ease',\n display: 'flex',\n alignItems: 'center',\n gap: '8px'\n }}\n >\n \n \n \n New Order\n \n\n
\n {[\n { value: 'all', label: 'All' },\n { value: 'pending', label: 'Pending' },\n { value: 'in_progress', label: 'In Progress' },\n { value: 'completed', label: 'Completed' }\n ].map(opt => (\n setFilterStatus(opt.value)}\n style={{\n padding: '8px 16px',\n background: filterStatus === opt.value ? '#f1f5f9' : 'transparent',\n border: 'none',\n borderRadius: '8px',\n cursor: 'pointer',\n fontWeight: filterStatus === opt.value ? '600' : '500',\n fontSize: '13px',\n color: filterStatus === opt.value ? '#0f172a' : '#64748b',\n transition: 'all 0.15s ease'\n }}\n >\n {opt.label}\n \n ))}\n
\n\n
\n {filteredOrders.length} order{filteredOrders.length !== 1 ? 's' : ''}\n
\n
\n\n {/* New Order Form */}\n {showNewForm && (\n
\n
\n

\n Create New Order\n

\n setShowNewForm(false)}\n style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '4px' }}\n >\n \n \n \n \n
\n
\n
\n
\n \n setNewOrder({ ...newOrder, id: e.target.value })}\n required\n style={{\n width: '100%',\n padding: '12px 14px',\n borderRadius: '10px',\n border: '1px solid #e2e8f0',\n fontSize: '14px',\n transition: 'all 0.15s ease',\n outline: 'none',\n boxSizing: 'border-box'\n }}\n />\n
\n
\n \n setNewOrder({ ...newOrder, client_name: e.target.value })}\n required\n style={{\n width: '100%',\n padding: '12px 14px',\n borderRadius: '10px',\n border: '1px solid #e2e8f0',\n fontSize: '14px',\n outline: 'none',\n boxSizing: 'border-box'\n }}\n />\n
\n
\n \n setNewOrder({ ...newOrder, product_description: e.target.value })}\n style={{\n width: '100%',\n padding: '12px 14px',\n borderRadius: '10px',\n border: '1px solid #e2e8f0',\n fontSize: '14px',\n outline: 'none',\n boxSizing: 'border-box'\n }}\n />\n
\n
\n \n setNewOrder({ ...newOrder, quantity: parseInt(e.target.value) || 1 })}\n min={1}\n style={{\n width: '100%',\n padding: '12px 14px',\n borderRadius: '10px',\n border: '1px solid #e2e8f0',\n fontSize: '14px',\n outline: 'none',\n boxSizing: 'border-box'\n }}\n />\n
\n
\n \n setNewOrder({ ...newOrder, priority: e.target.value })}\n style={{\n width: '100%',\n padding: '12px 14px',\n borderRadius: '10px',\n border: '1px solid #e2e8f0',\n fontSize: '14px',\n outline: 'none',\n boxSizing: 'border-box',\n background: 'white',\n cursor: 'pointer'\n }}\n >\n \n \n \n \n \n
\n
\n \n setNewOrder({ ...newOrder, due_date: e.target.value })}\n style={{\n width: '100%',\n padding: '12px 14px',\n borderRadius: '10px',\n border: '1px solid #e2e8f0',\n fontSize: '14px',\n outline: 'none',\n boxSizing: 'border-box'\n }}\n />\n
\n
\n
\n \n Create Order\n \n setShowNewForm(false)}\n style={{\n padding: '12px 28px',\n background: '#f1f5f9',\n color: '#475569',\n border: 'none',\n borderRadius: '10px',\n cursor: 'pointer',\n fontWeight: '600',\n fontSize: '14px'\n }}\n >\n Cancel\n \n
\n
\n
\n )}\n\n {/* Main Content Grid */}\n
\n {/* Orders List */}\n
\n {loading ? (\n
\n
\n

Loading...

\n
\n ) : filteredOrders.length === 0 ? (\n
\n
\n \n \n \n
\n

No orders found

\n

\n {filterStatus !== 'all' ? 'Try selecting a different status filter or ' : ''}Create your first order\n

\n
\n ) : (\n
\n {filteredOrders.map((order) => {\n const priorityConf = PRIORITY_CONFIG[order.priority] || PRIORITY_CONFIG.normal;\n const statusConf = STATUS_CONFIG[order.status] || STATUS_CONFIG.pending;\n const isSelected = selectedOrder === order.id;\n\n return (\n loadOrderProgress(order.id)}\n style={{\n padding: '20px',\n background: isSelected ? '#f8fafc' : 'white',\n border: isSelected ? '2px solid #3b82f6' : '1px solid #e2e8f0',\n borderRadius: '14px',\n cursor: 'pointer',\n transition: 'all 0.2s ease',\n boxShadow: isSelected ? '0 4px 20px rgba(59, 130, 246, 0.15)' : '0 1px 3px rgba(0,0,0,0.05)'\n }}\n >\n
\n
\n
\n \n {order.id}\n \n \n {priorityConf.label}\n \n
\n
\n {order.client_name}\n
\n
\n \n {statusConf.label}\n \n
\n\n {/* Mini Progress */}\n
\n
\n {[1, 2, 3, 4, 5, 6, 7].map(step => (\n \n ))}\n
\n
\n\n
\n \n {order.current_step === 0 ? 'Not started' : `Step ${order.current_step}/7 - ${order.current_step_name}`}\n \n {order.due_date && (\n \n \n \n \n \n \n {new Date(order.due_date).toLocaleDateString('en-US')}\n \n )}\n
\n
\n );\n })}\n
\n )}\n
\n\n {/* Order Detail Panel */}\n {selectedOrder && orderProgress && (\n
\n {/* Header */}\n
\n
\n

\n {orderProgress.order.id}\n

\n

\n {orderProgress.order.client_name}\n

\n
\n setSelectedOrder(null)}\n style={{\n background: 'white',\n border: '1px solid #e2e8f0',\n borderRadius: '8px',\n padding: '8px',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n }}\n >\n \n \n \n \n
\n\n {/* Progress Circle */}\n
\n
\n \n \n \n \n
\n
\n {orderProgress.progress.percent}%\n
\n
\n {orderProgress.progress.completed_steps}/7 steps\n
\n
\n
\n
\n\n {/* Steps List */}\n
\n

\n Steps\n

\n
\n {orderProgress.steps.map((step: any, index: number) => {\n const isCompleted = step.status === 'completed';\n const isInProgress = step.status === 'in_progress';\n const isPending = step.status === 'pending';\n const canStart = isPending && (index === 0 || orderProgress.steps[index - 1]?.status === 'completed');\n\n return (\n \n
\n {/* Step Number */}\n
\n {isCompleted ? (\n \n \n \n ) : (\n \n {step.step_number}\n \n )}\n
\n\n {/* Step Content */}\n
\n
\n \n {step.step_name}\n \n\n {/* Action Button */}\n {canStart && (\n { e.stopPropagation(); openStartModal(step.step_number); }}\n style={{\n padding: '6px 12px',\n background: '#0f172a',\n color: 'white',\n border: 'none',\n borderRadius: '6px',\n cursor: 'pointer',\n fontWeight: '500',\n fontSize: '12px'\n }}\n >\n Start\n \n )}\n {isInProgress && (\n { e.stopPropagation(); openCompleteModal(step.step_number); }}\n style={{\n padding: '6px 12px',\n background: '#0f172a',\n color: 'white',\n border: 'none',\n borderRadius: '6px',\n cursor: 'pointer',\n fontWeight: '500',\n fontSize: '12px'\n }}\n >\n Done\n \n )}\n
\n\n {/* Meta info */}\n {(isCompleted || isInProgress) && (step.operator_id || step.actual_duration_min != null) && (\n
\n {step.operator_id && (\n {step.operator_id}\n )}\n {isCompleted && step.actual_duration_min != null && (\n \n {step.actual_duration_min} min\n {step.actual_duration_min > step.theoretical_duration_min && (\n (+{step.actual_duration_min - step.theoretical_duration_min})\n )}\n \n )}\n
\n )}\n\n {/* Notes */}\n {isCompleted && step.notes && (\n
\n {step.notes}\n
\n )}\n
\n
\n
\n );\n })}\n
\n
\n\n {/* Stats */}\n {orderProgress.progress.total_actual_min > 0 && (\n
\n
\n
\n
\n Actual Time\n
\n
\n {orderProgress.progress.total_actual_min}min\n
\n
\n
\n
\n Expected\n
\n
\n {orderProgress.progress.total_theoretical_min}min\n
\n
\n
\n
\n Efficiency\n
\n
= 100 ? '#22c55e' : orderProgress.progress.efficiency >= 80 ? '#f59e0b' : '#ef4444'\n }}>\n {orderProgress.progress.efficiency || '—'}%\n
\n
\n
\n
\n )}\n
\n )}\n
\n
\n\n {/* Start Step Modal */}\n {showStartModal && (\n
\n
\n
\n
\n \n \n \n \n
\n

\n Start Step {modalStepNumber}\n

\n

\n Enter operator ID to begin this step\n

\n
\n\n
\n \n setOperatorId(e.target.value)}\n placeholder=\"Enter your ID\"\n autoFocus\n style={{\n width: '100%',\n padding: '14px 16px',\n borderRadius: '12px',\n border: '2px solid #e2e8f0',\n fontSize: '16px',\n outline: 'none',\n boxSizing: 'border-box',\n transition: 'border-color 0.15s ease'\n }}\n onKeyDown={(e) => e.key === 'Enter' && operatorId.trim() && handleStartStep()}\n />\n
\n\n
\n setShowStartModal(false)}\n style={{\n flex: 1,\n padding: '14px 24px',\n background: '#f1f5f9',\n color: '#475569',\n border: 'none',\n borderRadius: '12px',\n cursor: 'pointer',\n fontWeight: '600',\n fontSize: '14px'\n }}\n >\n Cancel\n \n \n Start Step\n \n
\n
\n
\n )}\n\n {/* Complete Step Modal */}\n {showCompleteModal && (\n
\n
\n
\n
\n \n \n \n
\n

\n Complete Step {modalStepNumber}\n

\n

\n Add any notes before completing\n

\n
\n\n
\n \n setCompletionNotes(e.target.value)}\n placeholder=\"Any issues, delays, or comments...\"\n rows={3}\n autoFocus\n style={{\n width: '100%',\n padding: '14px 16px',\n borderRadius: '12px',\n border: '2px solid #e2e8f0',\n fontSize: '14px',\n outline: 'none',\n boxSizing: 'border-box',\n resize: 'none',\n fontFamily: 'inherit',\n transition: 'border-color 0.15s ease'\n }}\n />\n
\n\n
\n setShowCompleteModal(false)}\n style={{\n flex: 1,\n padding: '14px 24px',\n background: '#f1f5f9',\n color: '#475569',\n border: 'none',\n borderRadius: '12px',\n cursor: 'pointer',\n fontWeight: '600',\n fontSize: '14px'\n }}\n >\n Cancel\n \n \n Complete Step\n \n
\n
\n
\n )}\n\n {/* CSS Animations */}\n \n
\n );\n};\n\nexport default App;\n","/index.css":".myclass {\n border: 1px solid gray;\n padding: 2px;\n}\n","/index.tsx":"import React from 'react'\n\nimport { createRoot } from 'react-dom/client'\nimport App from './App'\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n","/package.json":"{\n \"dependencies\": {\n \"react\": \"19.0.0\",\n \"react-dom\": \"19.0.0\",\n \"windmill-client\": \"^1\"\n },\n \"devDependencies\": {\n \"@types/react-dom\": \"^19.0.0\",\n \"@types/react\": \"^19.0.0\"\n }\n}\n"},"data":{"schema":"assemblyline","tables":["main/assemblyline:steps","main/assemblyline:orders","main/assemblyline:step_logs"],"datatable":"main"}},"description":"A production planner app for managing assembly line operations. Track each step of item production, assign operators to tasks, and monitor progress in real-time. Built with Windmill scripts for database operations.","vcreated_at":"2026-02-25T09:19:39.298Z","vcreated_by":"hugo989","comments":[]}}