{"id":2624,"date":"2026-01-24T20:11:26","date_gmt":"2026-01-24T20:11:26","guid":{"rendered":"https:\/\/malikskitchen.in\/?page_id=2624"},"modified":"2026-02-24T12:19:49","modified_gmt":"2026-02-24T12:19:49","slug":"foodcostcalculater","status":"publish","type":"page","link":"https:\/\/malikskitchen.in\/index.php\/foodcostcalculater\/","title":{"rendered":"Food cost Calculater"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Food Costing Calculator<\/title>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800;900&family=Playfair+Display:wght@700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { font-family: 'Nunito', sans-serif; background: #FFF8F0; }\r\n .sop-card { break-inside: avoid; page-break-inside: avoid; }\r\n @media print {\r\n .no-print { display: none !important; }\r\n body { background: white; }\r\n }\r\n .img-upload-zone { border: 2px dashed #FB923C; background: #FFF7ED; transition: all 0.2s; }\r\n .img-upload-zone:hover { background: #FFEDD5; border-color: #EA580C; }\r\n .ingredient-img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid #FED7AA; }\r\n .tab-active { background: linear-gradient(135deg, #EA580C, #DC2626); color: white; }\r\n .sop-print-btn { background: linear-gradient(135deg, #059669, #0D9488); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n \r\n <script type=\"text\/babel\">\r\n const { useState, useEffect, useRef } = React;\r\n \r\n \/\/ Icons\r\n const ChefHat = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 13.87A4 4 0 0 1 7.41 6a5.11 5.11 0 0 1 1.05-1.54 5 5 0 0 1 7.08 0A5.11 5.11 0 0 1 16.59 6 4 4 0 0 1 18 13.87V21H6Z\"\/><line x1=\"6\" x2=\"18\" y1=\"17\" y2=\"17\"\/><\/svg>;\r\n const Package = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m7.5 4.27 9 5.15\"\/><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg>;\r\n const Calculator = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"\/><line x1=\"8\" x2=\"16\" y1=\"6\" y2=\"6\"\/><line x1=\"16\" x2=\"16\" y1=\"14\" y2=\"18\"\/><path d=\"M16 10h.01\"\/><path d=\"M12 10h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M8 14h.01\"\/><path d=\"M12 18h.01\"\/><path d=\"M8 18h.01\"\/><\/svg>;\r\n const Layers = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\"\/><path d=\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\"\/><path d=\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\"\/><\/svg>;\r\n const Plus = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"M12 5v14\"\/><\/svg>;\r\n const Save = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z\"\/><path d=\"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7\"\/><path d=\"M7 3v4a1 1 0 0 0 1 1h7\"\/><\/svg>;\r\n const Edit2 = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"\/><path d=\"m15 5 4 4\"\/><\/svg>;\r\n const Trash2 = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M3 6h18\"\/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"\/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"\/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"\/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"\/><\/svg>;\r\n const ChevronDown = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>;\r\n const ChevronUp = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m18 15-6-6-6 6\"\/><\/svg>;\r\n const Download = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"\/><\/svg>;\r\n const Upload = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"17 8 12 3 7 8\"\/><line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\"\/><\/svg>;\r\n const Search = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg>;\r\n const ImageIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"\/><\/svg>;\r\n const PrinterIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><path d=\"M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6\"\/><rect width=\"12\" height=\"8\" x=\"6\" y=\"14\" rx=\"1\"\/><\/svg>;\r\n const ClipboardList = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/><path d=\"M12 11h4\"\/><path d=\"M12 16h4\"\/><path d=\"M8 11h.01\"\/><path d=\"M8 16h.01\"\/><\/svg>;\r\n\r\n function App() {\r\n const [activeTab, setActiveTab] = useState('dashboard');\r\n const [rawItems, setRawItems] = useState([]);\r\n const [recipes, setRecipes] = useState([]);\r\n const [combos, setCombos] = useState([]);\r\n\r\n useEffect(() => {\r\n const saved = localStorage.getItem('foodCostData_v2');\r\n if (saved) {\r\n const data = JSON.parse(saved);\r\n setRawItems(data.rawItems || []);\r\n setRecipes(data.recipes || []);\r\n setCombos(data.combos || []);\r\n } else {\r\n \/\/ Try old data\r\n const old = localStorage.getItem('foodCostData');\r\n if (old) {\r\n const data = JSON.parse(old);\r\n setRawItems(data.rawItems || []);\r\n setRecipes(data.recipes || []);\r\n setCombos(data.combos || []);\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n localStorage.setItem('foodCostData_v2', JSON.stringify({ rawItems, recipes, combos }));\r\n }, [rawItems, recipes, combos]);\r\n\r\n const addRawItem = (item) => setRawItems([...rawItems, { ...item, id: Date.now() }]);\r\n const updateRawItem = (id, updatedItem) => setRawItems(rawItems.map(item => item.id === id ? { ...item, ...updatedItem } : item));\r\n const deleteRawItem = (id) => {\r\n setRawItems(rawItems.filter(item => item.id !== id));\r\n setRecipes(recipes.map(recipe => ({ ...recipe, ingredients: recipe.ingredients.filter(ing => ing.rawItemId !== id) })));\r\n };\r\n\r\n const addRecipe = (recipe) => setRecipes([...recipes, { ...recipe, id: Date.now() }]);\r\n const updateRecipe = (id, updatedRecipe) => setRecipes(recipes.map(recipe => recipe.id === id ? { ...recipe, ...updatedRecipe } : recipe));\r\n const deleteRecipe = (id) => setRecipes(recipes.filter(recipe => recipe.id !== id));\r\n\r\n const addCombo = (combo) => setCombos([...combos, { ...combo, id: Date.now() }]);\r\n const updateCombo = (id, updatedCombo) => setCombos(combos.map(combo => combo.id === id ? { ...combo, ...updatedCombo } : combo));\r\n const deleteCombo = (id) => setCombos(combos.filter(combo => combo.id !== id));\r\n\r\n const calculateIngredientCost = (rawItemId, quantity) => {\r\n const rawItem = rawItems.find(item => item.id === rawItemId);\r\n if (!rawItem) return 0;\r\n return (rawItem.price \/ rawItem.baseQuantity) * quantity;\r\n };\r\n\r\n const calculateRecipeCost = (recipe) => {\r\n return recipe.ingredients.reduce((total, ing) => total + calculateIngredientCost(ing.rawItemId, ing.quantity), 0);\r\n };\r\n\r\n const calculateComboCost = (combo) => {\r\n return combo.items.reduce((total, item) => {\r\n const recipe = recipes.find(r => r.id === item.recipeId);\r\n if (!recipe) return total;\r\n return total + (calculateRecipeCost(recipe) * item.quantity);\r\n }, 0);\r\n };\r\n\r\n const exportData = () => {\r\n const data = { rawItems, recipes, combos };\r\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application\/json' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `food-costing-data-${new Date().toISOString().split('T')[0]}.json`;\r\n a.click();\r\n URL.revokeObjectURL(url);\r\n };\r\n\r\n const importData = (event) => {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n const data = JSON.parse(e.target.result);\r\n if (data.rawItems) setRawItems(data.rawItems);\r\n if (data.recipes) setRecipes(data.recipes);\r\n if (data.combos) setCombos(data.combos);\r\n alert('Data successfully imported!');\r\n } catch (error) {\r\n alert('Error importing data. Please check file format.');\r\n }\r\n };\r\n reader.readAsText(file);\r\n event.target.value = '';\r\n };\r\n\r\n const tabs = [\r\n { id: 'dashboard', label: 'Dashboard', icon: '\ud83c\udfe0' },\r\n { id: 'rawItems', label: 'Raw Items', icon: '\ud83d\udce6' },\r\n { id: 'calculator', label: 'Recipe Calculator', icon: '\ud83c\udf73' },\r\n { id: 'combo', label: 'Combo Calculator', icon: '\ud83e\udde9' },\r\n { id: 'sop', label: 'SOP Creation', icon: '\ud83d\udccb' },\r\n ];\r\n\r\n return (\r\n <div className=\"min-h-screen\" style={{background: '#FFF8F0'}}>\r\n {\/* Header *\/}\r\n <header className=\"bg-white shadow-md sticky top-0 z-50\">\r\n <div className=\"max-w-7xl mx-auto px-4 py-3 flex justify-between items-center\">\r\n <h1 className=\"text-2xl font-black text-orange-600 flex items-center gap-2\" style={{fontFamily: 'Playfair Display, serif'}}>\r\n \ud83c\udf7d\ufe0f Food Costing Calculator\r\n <\/h1>\r\n <div className=\"flex gap-2 no-print\">\r\n <button onClick={exportData} className=\"bg-green-500 text-white px-3 py-2 rounded-lg hover:bg-green-600 flex items-center gap-1 text-sm font-bold\">\r\n <Download \/> Export\r\n <\/button>\r\n <label className=\"bg-blue-500 text-white px-3 py-2 rounded-lg hover:bg-blue-600 flex items-center gap-1 cursor-pointer text-sm font-bold\">\r\n <Upload \/> Import\r\n <input type=\"file\" accept=\".json\" onChange={importData} className=\"hidden\" \/>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* Nav *\/}\r\n <nav className=\"bg-white border-b shadow-sm no-print\">\r\n <div className=\"max-w-7xl mx-auto px-4\">\r\n <div className=\"flex gap-1 overflow-x-auto py-2\">\r\n {tabs.map(tab => (\r\n <button\r\n key={tab.id}\r\n onClick={() => setActiveTab(tab.id)}\r\n className={`py-2 px-4 rounded-lg font-bold whitespace-nowrap text-sm transition-all ${\r\n activeTab === tab.id \r\n ? 'tab-active shadow-md' \r\n : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600'\r\n }`}\r\n >\r\n {tab.icon} {tab.label}\r\n <\/button>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <main className=\"max-w-7xl mx-auto px-4 py-6\">\r\n {activeTab === 'dashboard' && <Dashboard recipes={recipes} rawItems={rawItems} combos={combos} calculateRecipeCost={calculateRecipeCost} setActiveTab={setActiveTab} \/>}\r\n {activeTab === 'rawItems' && <RawItemsManager rawItems={rawItems} addRawItem={addRawItem} updateRawItem={updateRawItem} deleteRawItem={deleteRawItem} \/>}\r\n {activeTab === 'calculator' && <RecipeCalculator rawItems={rawItems} recipes={recipes} addRecipe={addRecipe} updateRecipe={updateRecipe} deleteRecipe={deleteRecipe} calculateIngredientCost={calculateIngredientCost} calculateRecipeCost={calculateRecipeCost} \/>}\r\n {activeTab === 'combo' && <ComboCalculator recipes={recipes} combos={combos} addCombo={addCombo} updateCombo={updateCombo} deleteCombo={deleteCombo} calculateRecipeCost={calculateRecipeCost} calculateComboCost={calculateComboCost} \/>}\r\n {activeTab === 'sop' && <SOPCreation recipes={recipes} rawItems={rawItems} \/>}\r\n <\/main>\r\n <\/div>\r\n );\r\n }\r\n\r\n function Dashboard({ recipes, rawItems, combos, calculateRecipeCost, setActiveTab }) {\r\n return (\r\n <div className=\"space-y-6\">\r\n <div className=\"rounded-2xl p-6 text-white shadow-xl\" style={{background: 'linear-gradient(135deg, #EA580C, #DC2626)'}}>\r\n <h2 className=\"text-2xl font-black mb-1\">\ud83d\udc68\u200d\ud83c\udf73 Food Costing Calculator<\/h2>\r\n <p className=\"text-orange-100 font-medium\">Aapka data browser mein auto-save ho raha hai! \u2705<\/p>\r\n <div className=\"mt-4 flex flex-wrap gap-3\">\r\n <button onClick={() => setActiveTab('rawItems')} className=\"bg-white text-orange-600 px-4 py-2 rounded-lg font-bold hover:bg-orange-50 text-sm\">\ud83d\udce6 Raw Items Add Karo<\/button>\r\n <button onClick={() => setActiveTab('calculator')} className=\"bg-white text-orange-600 px-4 py-2 rounded-lg font-bold hover:bg-orange-50 text-sm\">\ud83c\udf73 Recipe Banao<\/button>\r\n <button onClick={() => setActiveTab('sop')} className=\"bg-white text-orange-600 px-4 py-2 rounded-lg font-bold hover:bg-orange-50 text-sm\">\ud83d\udccb SOP Dekho<\/button>\r\n <\/div>\r\n <\/div>\r\n <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\r\n {[\r\n { label: 'Raw Items', value: rawItems.length, emoji: '\ud83d\udce6', color: 'text-blue-600', bg: 'bg-blue-50' },\r\n { label: 'Recipes', value: recipes.length, emoji: '\ud83c\udf73', color: 'text-orange-600', bg: 'bg-orange-50' },\r\n { label: 'Combos', value: combos.length, emoji: '\ud83e\udde9', color: 'text-purple-600', bg: 'bg-purple-50' },\r\n { label: 'Avg Cost', value: `\u20b9${recipes.length > 0 ? (recipes.reduce((sum, r) => sum + calculateRecipeCost(r), 0) \/ recipes.length).toFixed(2) : '0.00'}`, emoji: '\ud83d\udcb0', color: 'text-green-600', bg: 'bg-green-50' },\r\n ].map((stat, i) => (\r\n <div key={i} className={`${stat.bg} p-5 rounded-2xl shadow-sm`}>\r\n <div className=\"text-3xl mb-1\">{stat.emoji}<\/div>\r\n <p className=\"text-gray-500 text-sm font-semibold\">{stat.label}<\/p>\r\n <p className={`text-2xl font-black ${stat.color}`}>{stat.value}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n {recipes.length > 0 && (\r\n <div className=\"bg-white rounded-2xl shadow-sm p-6\">\r\n <h3 className=\"font-black text-lg mb-4 text-gray-700\">\ud83c\udf7d\ufe0f Latest Recipes<\/h3>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3\">\r\n {recipes.slice(-6).map(r => (\r\n <div key={r.id} className=\"border border-orange-100 rounded-xl p-3 flex justify-between items-center\">\r\n <span className=\"font-bold text-gray-700\">{r.name}<\/span>\r\n <span className=\"text-orange-600 font-black\">\u20b9{calculateRecipeCost(r).toFixed(2)}<\/span>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Image Compress Helper\r\n function compressImage(file, maxWidth = 300, quality = 0.7) {\r\n return new Promise((resolve) => {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n const img = new Image();\r\n img.onload = () => {\r\n const canvas = document.createElement('canvas');\r\n const scale = Math.min(1, maxWidth \/ img.width);\r\n canvas.width = img.width * scale;\r\n canvas.height = img.height * scale;\r\n const ctx = canvas.getContext('2d');\r\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\r\n resolve(canvas.toDataURL('image\/jpeg', quality));\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n function RawItemsManager({ rawItems, addRawItem, updateRawItem, deleteRawItem }) {\r\n const [formData, setFormData] = useState({ name: '', unit: 'kg', baseQuantity: 1, price: 0, image: null });\r\n const [editingId, setEditingId] = useState(null);\r\n const [searchTerm, setSearchTerm] = useState('');\r\n const fileRef = useRef();\r\n\r\n const handleImageUpload = async (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n const compressed = await compressImage(file);\r\n setFormData({...formData, image: compressed});\r\n };\r\n\r\n const handleSubmit = () => {\r\n if (!formData.name || formData.price <= 0) return;\r\n if (editingId) {\r\n updateRawItem(editingId, formData);\r\n setEditingId(null);\r\n } else {\r\n addRawItem(formData);\r\n }\r\n setFormData({ name: '', unit: 'kg', baseQuantity: 1, price: 0, image: null });\r\n if (fileRef.current) fileRef.current.value = '';\r\n };\r\n\r\n const handleEdit = (item) => {\r\n setFormData({ name: item.name, unit: item.unit, baseQuantity: item.baseQuantity, price: item.price, image: item.image || null });\r\n setEditingId(item.id);\r\n };\r\n\r\n const handleCancel = () => {\r\n setFormData({ name: '', unit: 'kg', baseQuantity: 1, price: 0, image: null });\r\n setEditingId(null);\r\n };\r\n\r\n const filtered = rawItems.filter(i => i.name.toLowerCase().includes(searchTerm.toLowerCase()));\r\n\r\n return (\r\n <div className=\"space-y-6\">\r\n <h2 className=\"text-2xl font-black text-gray-800\">\ud83d\udce6 Raw Items<\/h2>\r\n \r\n {\/* Form *\/}\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-orange-100\">\r\n <h3 className=\"font-black text-orange-600 mb-4\">{editingId ? '\u270f\ufe0f Item Edit Karo' : '\u2795 Naya Item Add Karo'}<\/h3>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4\">\r\n <div>\r\n <label className=\"block text-sm font-bold mb-1 text-gray-600\">Item Name *<\/label>\r\n <input type=\"text\" placeholder=\"e.g. Chicken\" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} className=\"w-full border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-semibold\" \/>\r\n <\/div>\r\n <div>\r\n <label className=\"block text-sm font-bold mb-1 text-gray-600\">Unit<\/label>\r\n <select value={formData.unit} onChange={(e) => setFormData({...formData, unit: e.target.value})} className=\"w-full border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-semibold\">\r\n <option value=\"kg\">kg<\/option>\r\n <option value=\"g\">g<\/option>\r\n <option value=\"l\">l<\/option>\r\n <option value=\"ml\">ml<\/option>\r\n <option value=\"pc\">pc<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label className=\"block text-sm font-bold mb-1 text-gray-600\">Quantity<\/label>\r\n <input type=\"number\" step=\"0.01\" value={formData.baseQuantity} onChange={(e) => setFormData({...formData, baseQuantity: parseFloat(e.target.value) || 1})} className=\"w-full border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-semibold\" \/>\r\n <\/div>\r\n <div>\r\n <label className=\"block text-sm font-bold mb-1 text-gray-600\">Price (\u20b9) *<\/label>\r\n <input type=\"number\" step=\"0.01\" value={formData.price} onChange={(e) => setFormData({...formData, price: parseFloat(e.target.value) || 0})} className=\"w-full border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-semibold\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Image Upload *\/}\r\n <div className=\"mb-4\">\r\n <label className=\"block text-sm font-bold mb-2 text-gray-600\">\ud83d\udcf8 Item Image (Optional)<\/label>\r\n <div className=\"flex items-center gap-4\">\r\n <label className=\"img-upload-zone rounded-xl px-4 py-3 cursor-pointer flex items-center gap-2 font-bold text-orange-600 text-sm\">\r\n <ImageIcon \/> Image Upload Karo\r\n <input ref={fileRef} type=\"file\" accept=\"image\/*\" onChange={handleImageUpload} className=\"hidden\" \/>\r\n <\/label>\r\n {formData.image && (\r\n <div className=\"flex items-center gap-2\">\r\n <img src={formData.image} alt=\"preview\" className=\"w-16 h-16 rounded-xl object-cover border-2 border-orange-200\" \/>\r\n <button onClick={() => setFormData({...formData, image: null})} className=\"text-red-500 text-xs font-bold\">\u274c Remove<\/button>\r\n <\/div>\r\n )}\r\n {!formData.image && <span className=\"text-gray-400 text-sm\">Koi image nahi select ki<\/span>}\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"flex gap-2\">\r\n <button onClick={handleSubmit} className=\"bg-orange-500 text-white px-6 py-2 rounded-xl hover:bg-orange-600 flex items-center gap-2 font-bold shadow-md\">\r\n <Save \/> {editingId ? 'Update Item' : 'Add Item'}\r\n <\/button>\r\n {editingId && <button onClick={handleCancel} className=\"bg-gray-400 text-white px-6 py-2 rounded-xl hover:bg-gray-500 font-bold\">Cancel<\/button>}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Search + Table *\/}\r\n <div className=\"bg-white rounded-2xl shadow-sm border border-orange-100 overflow-hidden\">\r\n <div className=\"p-4 border-b flex justify-between items-center\">\r\n <h3 className=\"font-black text-gray-700\">Saved Items ({rawItems.length})<\/h3>\r\n <div className=\"relative w-64\">\r\n <input type=\"text\" placeholder=\"Search items...\" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className=\"w-full border-2 border-gray-200 rounded-xl px-4 py-2 pl-9 text-sm focus:border-orange-400 outline-none\" \/>\r\n <div className=\"absolute left-3 top-2.5 text-gray-400\"><Search \/><\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full\">\r\n <thead>\r\n <tr style={{background: 'linear-gradient(135deg, #EA580C, #DC2626)'}} className=\"text-white\">\r\n <th className=\"px-4 py-3 text-left text-sm font-black\">Image<\/th>\r\n <th className=\"px-4 py-3 text-left text-sm font-black\">Name<\/th>\r\n <th className=\"px-4 py-3 text-left text-sm font-black\">Qty & Unit<\/th>\r\n <th className=\"px-4 py-3 text-left text-sm font-black\">Price<\/th>\r\n <th className=\"px-4 py-3 text-left text-sm font-black\">Per Unit<\/th>\r\n <th className=\"px-4 py-3 text-center text-sm font-black\">Actions<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n {filtered.map((item, i) => (\r\n <tr key={item.id} className={`${i % 2 === 0 ? 'bg-orange-50\/30' : 'bg-white'} hover:bg-orange-50 transition-colors`}>\r\n <td className=\"px-4 py-3\">\r\n {item.image \r\n ? <img src={item.image} alt={item.name} className=\"ingredient-img\" \/>\r\n : <div className=\"w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 text-xs font-bold\">No Img<\/div>\r\n }\r\n <\/td>\r\n <td className=\"px-4 py-3 font-bold text-gray-700\">{item.name}<\/td>\r\n <td className=\"px-4 py-3 text-gray-600\">{item.baseQuantity} {item.unit}<\/td>\r\n <td className=\"px-4 py-3 font-bold text-gray-700\">\u20b9{item.price.toFixed(2)}<\/td>\r\n <td className=\"px-4 py-3 font-black text-orange-600\">\u20b9{(item.price \/ item.baseQuantity).toFixed(2)}\/{item.unit}<\/td>\r\n <td className=\"px-4 py-3 text-center\">\r\n <button onClick={() => handleEdit(item)} className=\"text-blue-600 hover:text-blue-800 mr-2 p-1 rounded hover:bg-blue-50\"><Edit2 \/><\/button>\r\n <button onClick={() => deleteRawItem(item.id)} className=\"text-red-600 hover:text-red-800 p-1 rounded hover:bg-red-50\"><Trash2 \/><\/button>\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n {filtered.length === 0 && (\r\n <tr><td colSpan=\"6\" className=\"text-center py-8 text-gray-400 font-semibold\">Koi item nahi mila<\/td><\/tr>\r\n )}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n function RecipeCalculator({ rawItems, recipes, addRecipe, updateRecipe, deleteRecipe, calculateIngredientCost, calculateRecipeCost }) {\r\n const [recipeName, setRecipeName] = useState('');\r\n const [ingredients, setIngredients] = useState([]);\r\n const [selectedRawItem, setSelectedRawItem] = useState('');\r\n const [quantity, setQuantity] = useState(0);\r\n const [sellingPrice, setSellingPrice] = useState(0);\r\n const [editingId, setEditingId] = useState(null);\r\n const [searchTerm, setSearchTerm] = useState('');\r\n const [expanded, setExpanded] = useState(null);\r\n const [recipeImage, setRecipeImage] = useState(null);\r\n const imgRef = useRef();\r\n\r\n const addIngredient = () => {\r\n if (selectedRawItem && quantity > 0) {\r\n const rawItem = rawItems.find(item => item.id === parseInt(selectedRawItem));\r\n setIngredients([...ingredients, { rawItemId: rawItem.id, rawItemName: rawItem.name, quantity, unit: rawItem.unit }]);\r\n setSelectedRawItem(''); setQuantity(0);\r\n }\r\n };\r\n const removeIngredient = (index) => setIngredients(ingredients.filter((_, i) => i !== index));\r\n\r\n const handleImageUpload = async (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n const compressed = await compressImage(file, 400, 0.8);\r\n setRecipeImage(compressed);\r\n };\r\n\r\n const handleSave = () => {\r\n if (recipeName && ingredients.length > 0) {\r\n if (editingId) {\r\n updateRecipe(editingId, { name: recipeName, ingredients, sellingPrice, image: recipeImage });\r\n setEditingId(null);\r\n } else {\r\n addRecipe({ name: recipeName, ingredients, sellingPrice, image: recipeImage });\r\n }\r\n setRecipeName(''); setIngredients([]); setSellingPrice(0); setRecipeImage(null);\r\n if (imgRef.current) imgRef.current.value = '';\r\n }\r\n };\r\n\r\n const handleEdit = (recipe) => {\r\n setRecipeName(recipe.name);\r\n setIngredients(recipe.ingredients);\r\n setSellingPrice(recipe.sellingPrice || 0);\r\n setRecipeImage(recipe.image || null);\r\n setEditingId(recipe.id);\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n };\r\n\r\n const handleCancel = () => {\r\n setRecipeName(''); setIngredients([]); setSellingPrice(0); setRecipeImage(null); setEditingId(null);\r\n };\r\n\r\n const totalCost = ingredients.reduce((t, ing) => t + calculateIngredientCost(ing.rawItemId, ing.quantity), 0);\r\n const profit = sellingPrice - totalCost;\r\n const margin = sellingPrice > 0 ? (profit \/ sellingPrice) * 100 : 0;\r\n const filteredRecipes = recipes.filter(r => r.name.toLowerCase().includes(searchTerm.toLowerCase()));\r\n\r\n return (\r\n <div className=\"space-y-6\">\r\n <h2 className=\"text-2xl font-black text-gray-800\">\ud83c\udf73 Recipe Calculator<\/h2>\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-orange-100\">\r\n <div className=\"flex gap-4 mb-4 flex-wrap\">\r\n <div className=\"flex-1 min-w-48\">\r\n <label className=\"block text-sm font-bold mb-1 text-gray-600\">Recipe Name *<\/label>\r\n <input type=\"text\" placeholder=\"e.g. Butter Chicken\" value={recipeName} onChange={(e) => setRecipeName(e.target.value)} className=\"w-full border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-bold text-lg\" \/>\r\n <\/div>\r\n <div>\r\n <label className=\"block text-sm font-bold mb-1 text-gray-600\">\ud83d\udcf8 Recipe Image<\/label>\r\n <label className=\"img-upload-zone rounded-xl px-4 py-2 cursor-pointer flex items-center gap-2 font-bold text-orange-600 text-sm h-11\">\r\n <ImageIcon \/> Image Upload\r\n <input ref={imgRef} type=\"file\" accept=\"image\/*\" onChange={handleImageUpload} className=\"hidden\" \/>\r\n <\/label>\r\n <\/div>\r\n {recipeImage && (\r\n <div className=\"flex items-end gap-2\">\r\n <img src={recipeImage} alt=\"recipe\" className=\"w-12 h-12 rounded-xl object-cover border-2 border-orange-200\" \/>\r\n <button onClick={() => setRecipeImage(null)} className=\"text-red-500 text-xs font-bold mb-2\">\u274c<\/button>\r\n <\/div>\r\n )}\r\n <\/div>\r\n \r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\r\n <select value={selectedRawItem} onChange={(e) => setSelectedRawItem(e.target.value)} className=\"border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-semibold\">\r\n <option value=\"\">\ud83e\udd6c Ingredient Select Karo<\/option>\r\n {rawItems.map(item => <option key={item.id} value={item.id}>{item.name} ({item.unit})<\/option>)}\r\n <\/select>\r\n <input type=\"number\" step=\"0.01\" placeholder=\"Quantity\" value={quantity || ''} onChange={(e) => setQuantity(parseFloat(e.target.value))} className=\"border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-semibold\" \/>\r\n <button onClick={addIngredient} className=\"bg-orange-500 text-white px-6 py-2 rounded-xl hover:bg-orange-600 flex items-center justify-center gap-2 font-bold shadow-md\">\r\n <Plus \/> Add Ingredient\r\n <\/button>\r\n <\/div>\r\n\r\n {ingredients.length > 0 && (\r\n <>\r\n <div className=\"mb-4 border-2 border-orange-100 rounded-xl overflow-hidden\">\r\n {ingredients.map((ing, i) => {\r\n const rawItem = rawItems.find(r => r.id === ing.rawItemId);\r\n return (\r\n <div key={i} className=\"flex justify-between items-center p-3 border-b last:border-b-0 bg-white hover:bg-orange-50\">\r\n <div className=\"flex items-center gap-3\">\r\n {rawItem && rawItem.image && <img src={rawItem.image} alt={ing.rawItemName} className=\"w-10 h-10 rounded-lg object-cover border border-orange-200\" \/>}\r\n <span className=\"font-bold text-gray-700\">{ing.rawItemName} <span className=\"text-gray-400 font-normal\">({ing.quantity} {ing.unit})<\/span><\/span>\r\n <\/div>\r\n <div className=\"flex items-center gap-3\">\r\n <span className=\"font-black text-orange-600\">\u20b9{calculateIngredientCost(ing.rawItemId, ing.quantity).toFixed(2)}<\/span>\r\n <button onClick={() => removeIngredient(i)} className=\"text-red-600 hover:text-red-800 p-1 rounded hover:bg-red-50\"><Trash2 \/><\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n })}\r\n <div className=\"flex justify-between p-3 bg-orange-500 text-white font-black text-lg\">\r\n <span>\ud83e\uddfe Total Food Cost<\/span>\r\n <span>\u20b9{totalCost.toFixed(2)}<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"bg-blue-50 p-4 rounded-xl mb-4 border-2 border-blue-100\">\r\n <label className=\"block text-sm font-bold mb-2 text-blue-700\">\ud83d\udcb0 Selling Price (\u20b9)<\/label>\r\n <input type=\"number\" step=\"0.01\" value={sellingPrice || ''} onChange={(e) => setSellingPrice(parseFloat(e.target.value) || 0)} className=\"w-full border-2 border-blue-200 rounded-xl px-3 py-2 text-lg font-bold focus:border-blue-400 outline-none\" placeholder=\"Selling price enter karo\" \/>\r\n {sellingPrice > 0 && (\r\n <div className=\"mt-3 grid grid-cols-3 gap-3\">\r\n {[\r\n { label: 'Food Cost', val: `\u20b9${totalCost.toFixed(2)}`, color: 'text-orange-600', bg: 'bg-orange-50' },\r\n { label: 'Profit', val: `\u20b9${profit.toFixed(2)}`, color: profit >= 0 ? 'text-green-600' : 'text-red-600', bg: 'bg-green-50' },\r\n { label: 'Margin', val: `${margin.toFixed(1)}%`, color: 'text-blue-600', bg: 'bg-blue-100' },\r\n ].map((s, i) => (\r\n <div key={i} className={`${s.bg} p-3 rounded-xl text-center`}>\r\n <p className=\"text-xs text-gray-500 font-semibold\">{s.label}<\/p>\r\n <p className={`font-black text-lg ${s.color}`}>{s.val}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/>\r\n )}\r\n\r\n <div className=\"flex gap-2\">\r\n <button onClick={handleSave} disabled={!recipeName || ingredients.length === 0} className=\"bg-green-500 text-white px-6 py-2 rounded-xl hover:bg-green-600 flex items-center gap-2 disabled:bg-gray-300 font-bold shadow-md\">\r\n <Save \/> {editingId ? 'Update Recipe' : 'Save Recipe'}\r\n <\/button>\r\n {editingId && <button onClick={handleCancel} className=\"bg-gray-400 text-white px-6 py-2 rounded-xl font-bold\">Cancel<\/button>}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Saved Recipes *\/}\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\">\r\n <h3 className=\"text-xl font-black text-gray-700\">Saved Recipes ({recipes.length})<\/h3>\r\n <div className=\"relative w-64\">\r\n <input type=\"text\" placeholder=\"Search recipes...\" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className=\"w-full border-2 border-gray-200 rounded-xl px-4 py-2 pl-10 text-sm focus:border-orange-400 outline-none\" \/>\r\n <div className=\"absolute left-3 top-2.5 text-gray-400\"><Search \/><\/div>\r\n <\/div>\r\n <\/div>\r\n {filteredRecipes.map(recipe => {\r\n const cost = calculateRecipeCost(recipe);\r\n const p = (recipe.sellingPrice || 0) - cost;\r\n const m = recipe.sellingPrice > 0 ? (p \/ recipe.sellingPrice) * 100 : 0;\r\n return (\r\n <div key={recipe.id} className=\"bg-white rounded-2xl shadow-sm border border-orange-100 overflow-hidden\">\r\n <div className=\"p-4 flex justify-between items-center cursor-pointer hover:bg-orange-50\" onClick={() => setExpanded(expanded === recipe.id ? null : recipe.id)}>\r\n <div className=\"flex items-center gap-3 flex-wrap\">\r\n {recipe.image && <img src={recipe.image} alt={recipe.name} className=\"w-12 h-12 rounded-xl object-cover border-2 border-orange-200\" \/>}\r\n <div>\r\n <h4 className=\"font-black text-gray-800\">{recipe.name}<\/h4>\r\n <div className=\"flex gap-3 text-sm mt-1 flex-wrap\">\r\n <span className=\"text-orange-600 font-bold\">Cost: \u20b9{cost.toFixed(2)}<\/span>\r\n {recipe.sellingPrice > 0 && <span className=\"text-blue-600 font-bold\">Sell: \u20b9{recipe.sellingPrice.toFixed(2)}<\/span>}\r\n {recipe.sellingPrice > 0 && <span className=\"text-green-600 font-bold\">Margin: {m.toFixed(1)}%<\/span>}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"flex gap-1 items-center\">\r\n <button onClick={(e) => { e.stopPropagation(); handleEdit(recipe); }} className=\"text-blue-600 p-2 hover:bg-blue-50 rounded-lg\"><Edit2 \/><\/button>\r\n <button onClick={(e) => { e.stopPropagation(); deleteRecipe(recipe.id); }} className=\"text-red-600 p-2 hover:bg-red-50 rounded-lg\"><Trash2 \/><\/button>\r\n {expanded === recipe.id ? <ChevronUp \/> : <ChevronDown \/>}\r\n <\/div>\r\n <\/div>\r\n {expanded === recipe.id && (\r\n <div className=\"border-t bg-gray-50 p-4\">\r\n <h5 className=\"font-black mb-3 text-gray-600\">Ingredients:<\/h5>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\r\n {recipe.ingredients.map((ing, i) => {\r\n const rawItem = rawItems.find(item => item.id === ing.rawItemId);\r\n const ingCost = rawItem ? (rawItem.price \/ rawItem.baseQuantity) * ing.quantity : 0;\r\n return (\r\n <div key={i} className=\"flex items-center justify-between p-2 bg-white rounded-xl border border-orange-100\">\r\n <div className=\"flex items-center gap-2\">\r\n {rawItem && rawItem.image && <img src={rawItem.image} alt={ing.rawItemName} className=\"w-8 h-8 rounded-lg object-cover\" \/>}\r\n <span className=\"font-semibold text-sm text-gray-700\">{ing.rawItemName} ({ing.quantity} {ing.unit})<\/span>\r\n <\/div>\r\n <span className=\"font-black text-orange-600 text-sm\">\u20b9{ingCost.toFixed(2)}<\/span>\r\n <\/div>\r\n );\r\n })}\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n })}\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n function ComboCalculator({ recipes, combos, addCombo, updateCombo, deleteCombo, calculateRecipeCost, calculateComboCost }) {\r\n const [comboName, setComboName] = useState('');\r\n const [items, setItems] = useState([]);\r\n const [selectedRecipe, setSelectedRecipe] = useState('');\r\n const [quantity, setQuantity] = useState(1);\r\n const [sellingPrice, setSellingPrice] = useState(0);\r\n const [editingId, setEditingId] = useState(null);\r\n const [searchTerm, setSearchTerm] = useState('');\r\n const [expanded, setExpanded] = useState(null);\r\n\r\n const addItem = () => {\r\n if (selectedRecipe && quantity > 0) {\r\n const recipe = recipes.find(r => r.id === parseInt(selectedRecipe));\r\n setItems([...items, { recipeId: recipe.id, recipeName: recipe.name, quantity }]);\r\n setSelectedRecipe(''); setQuantity(1);\r\n }\r\n };\r\n const removeItem = (index) => setItems(items.filter((_, i) => i !== index));\r\n const totalCost = items.reduce((t, item) => {\r\n const recipe = recipes.find(r => r.id === item.recipeId);\r\n return t + (recipe ? calculateRecipeCost(recipe) * item.quantity : 0);\r\n }, 0);\r\n const profit = sellingPrice - totalCost;\r\n const margin = sellingPrice > 0 ? (profit \/ sellingPrice) * 100 : 0;\r\n\r\n const handleSave = () => {\r\n if (comboName && items.length > 0) {\r\n if (editingId) { updateCombo(editingId, { name: comboName, items, sellingPrice }); setEditingId(null); }\r\n else { addCombo({ name: comboName, items, sellingPrice }); }\r\n setComboName(''); setItems([]); setSellingPrice(0);\r\n }\r\n };\r\n\r\n const handleEdit = (combo) => {\r\n setComboName(combo.name); setItems(combo.items); setSellingPrice(combo.sellingPrice || 0); setEditingId(combo.id);\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n };\r\n\r\n const filteredCombos = combos.filter(c => c.name.toLowerCase().includes(searchTerm.toLowerCase()));\r\n\r\n return (\r\n <div className=\"space-y-6\">\r\n <h2 className=\"text-2xl font-black text-gray-800\">\ud83e\udde9 Combo Calculator<\/h2>\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-orange-100\">\r\n <input type=\"text\" placeholder=\"Combo Name (e.g. Family Meal Deal)\" value={comboName} onChange={(e) => setComboName(e.target.value)} className=\"w-full border-2 border-gray-200 rounded-xl px-3 py-2 mb-4 text-lg font-bold focus:border-orange-400 outline-none\" \/>\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\r\n <select value={selectedRecipe} onChange={(e) => setSelectedRecipe(e.target.value)} className=\"border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-semibold\">\r\n <option value=\"\">\ud83c\udf7d\ufe0f Recipe Select Karo<\/option>\r\n {recipes.map(r => <option key={r.id} value={r.id}>{r.name}<\/option>)}\r\n <\/select>\r\n <input type=\"number\" min=\"1\" value={quantity} onChange={(e) => setQuantity(parseInt(e.target.value) || 1)} className=\"border-2 border-gray-200 rounded-xl px-3 py-2 focus:border-orange-400 outline-none font-semibold\" placeholder=\"Qty\" \/>\r\n <button onClick={addItem} className=\"bg-orange-500 text-white px-6 py-2 rounded-xl hover:bg-orange-600 flex items-center justify-center gap-2 font-bold shadow-md\">\r\n <Plus \/> Add Item\r\n <\/button>\r\n <\/div>\r\n {items.length > 0 && (\r\n <>\r\n <div className=\"mb-4 border-2 border-orange-100 rounded-xl overflow-hidden\">\r\n {items.map((item, i) => {\r\n const recipe = recipes.find(r => r.id === item.recipeId);\r\n const cost = recipe ? calculateRecipeCost(recipe) * item.quantity : 0;\r\n return (\r\n <div key={i} className=\"flex justify-between items-center p-3 border-b last:border-b-0 bg-white\">\r\n <div className=\"flex items-center gap-2\">\r\n {recipe && recipe.image && <img src={recipe.image} alt={item.recipeName} className=\"w-10 h-10 rounded-lg object-cover border border-orange-200\" \/>}\r\n <span className=\"font-bold text-gray-700\">{item.recipeName} <span className=\"text-orange-500\">\u00d7{item.quantity}<\/span><\/span>\r\n <\/div>\r\n <div className=\"flex items-center gap-3\">\r\n <span className=\"font-black text-orange-600\">\u20b9{cost.toFixed(2)}<\/span>\r\n <button onClick={() => removeItem(i)} className=\"text-red-600 hover:text-red-800 p-1 rounded hover:bg-red-50\"><Trash2 \/><\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n })}\r\n <div className=\"flex justify-between p-3 bg-orange-500 text-white font-black text-lg\">\r\n <span>\ud83e\uddfe Total Food Cost<\/span><span>\u20b9{totalCost.toFixed(2)}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-blue-50 p-4 rounded-xl mb-4 border-2 border-blue-100\">\r\n <label className=\"block text-sm font-bold mb-2 text-blue-700\">\ud83d\udcb0 Selling Price (\u20b9)<\/label>\r\n <input type=\"number\" step=\"0.01\" value={sellingPrice || ''} onChange={(e) => setSellingPrice(parseFloat(e.target.value) || 0)} className=\"w-full border-2 border-blue-200 rounded-xl px-3 py-2 text-lg font-bold focus:border-blue-400 outline-none\" \/>\r\n {sellingPrice > 0 && (\r\n <div className=\"mt-3 grid grid-cols-3 gap-3\">\r\n {[\r\n { label: 'Cost', val: `\u20b9${totalCost.toFixed(2)}`, color: 'text-orange-600' },\r\n { label: 'Profit', val: `\u20b9${profit.toFixed(2)}`, color: profit >= 0 ? 'text-green-600' : 'text-red-600' },\r\n { label: 'Margin', val: `${margin.toFixed(1)}%`, color: 'text-blue-600' },\r\n ].map((s, i) => (\r\n <div key={i} className=\"bg-white p-3 rounded-xl text-center\">\r\n <p className=\"text-xs text-gray-500 font-semibold\">{s.label}<\/p>\r\n <p className={`font-black text-lg ${s.color}`}>{s.val}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/>\r\n )}\r\n <div className=\"flex gap-2\">\r\n <button onClick={handleSave} disabled={!comboName || items.length === 0} className=\"bg-green-500 text-white px-6 py-2 rounded-xl hover:bg-green-600 flex items-center gap-2 disabled:bg-gray-300 font-bold shadow-md\">\r\n <Save \/> {editingId ? 'Update Combo' : 'Save Combo'}\r\n <\/button>\r\n {editingId && <button onClick={() => { setComboName(''); setItems([]); setSellingPrice(0); setEditingId(null); }} className=\"bg-gray-400 text-white px-6 py-2 rounded-xl font-bold\">Cancel<\/button>}\r\n <\/div>\r\n <\/div>\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\">\r\n <h3 className=\"text-xl font-black text-gray-700\">Saved Combos ({combos.length})<\/h3>\r\n <div className=\"relative w-64\">\r\n <input type=\"text\" placeholder=\"Search combos...\" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className=\"w-full border-2 border-gray-200 rounded-xl px-4 py-2 pl-10 text-sm focus:border-orange-400 outline-none\" \/>\r\n <div className=\"absolute left-3 top-2.5 text-gray-400\"><Search \/><\/div>\r\n <\/div>\r\n <\/div>\r\n {filteredCombos.map(combo => {\r\n const tc = calculateComboCost(combo);\r\n const p = combo.sellingPrice - tc;\r\n const m = combo.sellingPrice > 0 ? (p \/ combo.sellingPrice) * 100 : 0;\r\n return (\r\n <div key={combo.id} className=\"bg-white rounded-2xl shadow-sm border border-orange-100 overflow-hidden\">\r\n <div className=\"p-4 flex justify-between items-center cursor-pointer hover:bg-orange-50\" onClick={() => setExpanded(expanded === combo.id ? null : combo.id)}>\r\n <div>\r\n <h4 className=\"font-black text-gray-800\">{combo.name}<\/h4>\r\n <div className=\"flex gap-3 text-sm mt-1\">\r\n <span className=\"text-orange-600 font-bold\">Cost: \u20b9{tc.toFixed(2)}<\/span>\r\n {combo.sellingPrice > 0 && <span className=\"text-blue-600 font-bold\">Sell: \u20b9{combo.sellingPrice.toFixed(2)}<\/span>}\r\n {combo.sellingPrice > 0 && <span className=\"text-green-600 font-bold\">Margin: {m.toFixed(1)}%<\/span>}\r\n <\/div>\r\n <\/div>\r\n <div className=\"flex gap-1 items-center\">\r\n <button onClick={(e) => { e.stopPropagation(); handleEdit(combo); }} className=\"text-blue-600 p-2 hover:bg-blue-50 rounded-lg\"><Edit2 \/><\/button>\r\n <button onClick={(e) => { e.stopPropagation(); deleteCombo(combo.id); }} className=\"text-red-600 p-2 hover:bg-red-50 rounded-lg\"><Trash2 \/><\/button>\r\n {expanded === combo.id ? <ChevronUp \/> : <ChevronDown \/>}\r\n <\/div>\r\n <\/div>\r\n {expanded === combo.id && (\r\n <div className=\"border-t bg-gray-50 p-4\">\r\n {combo.items.map((item, i) => {\r\n const recipe = recipes.find(r => r.id === item.recipeId);\r\n const cost = recipe ? calculateRecipeCost(recipe) * item.quantity : 0;\r\n return (\r\n <div key={i} className=\"flex items-center justify-between p-2 bg-white rounded-xl border border-orange-100 mb-2\">\r\n <div className=\"flex items-center gap-2\">\r\n {recipe && recipe.image && <img src={recipe.image} alt={item.recipeName} className=\"w-8 h-8 rounded-lg object-cover\" \/>}\r\n <span className=\"font-semibold text-sm\">{item.recipeName} \u00d7{item.quantity}<\/span>\r\n <\/div>\r\n <span className=\"font-black text-orange-600 text-sm\">\u20b9{cost.toFixed(2)}<\/span>\r\n <\/div>\r\n );\r\n })}\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n })}\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ ==================== SOP CREATION TAB ====================\r\n \/\/ sopSteps = { recipeId: [ { type: 'ingredient'|'process', index (for ing), text (for process) } ] }\r\n \/\/ We store sop steps per recipe in state\r\n\r\n function SOPCreation({ recipes, rawItems }) {\r\n const [searchTerm, setSearchTerm] = useState('');\r\n const [selectedRecipes, setSelectedRecipes] = useState([]);\r\n \/\/ sopData: { [recipeId]: [ {type:'ingredient', ingIndex:N} | {type:'process', text:'...'} ] }\r\n const [sopData, setSopData] = useState({});\r\n const [editingSop, setEditingSop] = useState(null); \/\/ recipeId currently editing steps\r\n\r\n \/\/ Load sopData from localStorage\r\n useEffect(() => {\r\n const saved = localStorage.getItem('sopData_v2');\r\n if (saved) setSopData(JSON.parse(saved));\r\n }, []);\r\n useEffect(() => {\r\n localStorage.setItem('sopData_v2', JSON.stringify(sopData));\r\n }, [sopData]);\r\n\r\n const filtered = recipes.filter(r => r.name.toLowerCase().includes(searchTerm.toLowerCase()));\r\n const toggleRecipe = (id) => setSelectedRecipes(prev => prev.includes(id) ? prev.filter(r => r !== id) : [...prev, id]);\r\n const selectAll = () => setSelectedRecipes(filtered.map(r => r.id));\r\n const clearAll = () => setSelectedRecipes([]);\r\n const sopRecipes = selectedRecipes.length > 0 ? recipes.filter(r => selectedRecipes.includes(r.id)) : recipes;\r\n\r\n \/\/ Init sop steps for a recipe = all ingredients in order, no process steps\r\n const initSteps = (recipe) => {\r\n return recipe.ingredients.map((_, i) => ({ type: 'ingredient', ingIndex: i }));\r\n };\r\n\r\n const getSteps = (recipe) => {\r\n if (sopData[recipe.id]) return sopData[recipe.id];\r\n return initSteps(recipe);\r\n };\r\n\r\n const saveSteps = (recipeId, steps) => {\r\n setSopData(prev => ({ ...prev, [recipeId]: steps }));\r\n };\r\n\r\n return (\r\n <div className=\"space-y-6\">\r\n <div className=\"flex justify-between items-start flex-wrap gap-4\">\r\n <div>\r\n <h2 className=\"text-2xl font-black text-gray-800\">\ud83d\udccb SOP Creation<\/h2>\r\n <p className=\"text-gray-500 text-sm mt-1\">Recipe name \u00b7 Item image + quantity \u00b7 Selling price \u00b7 Process steps<\/p>\r\n <\/div>\r\n <div className=\"flex gap-2 no-print flex-wrap\">\r\n <button onClick={() => window.print()} className=\"sop-print-btn text-white px-4 py-2 rounded-xl flex items-center gap-2 font-bold shadow-md text-sm hover:opacity-90\">\r\n <PrinterIcon \/> Print \/ Save PDF\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Filter Panel *\/}\r\n <div className=\"bg-white p-4 rounded-2xl shadow-sm border border-orange-100 no-print\">\r\n <div className=\"flex gap-3 flex-wrap items-center\">\r\n <div className=\"relative flex-1 min-w-48\">\r\n <input type=\"text\" placeholder=\"Recipe search karo...\" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className=\"w-full border-2 border-gray-200 rounded-xl px-4 py-2 pl-10 text-sm focus:border-orange-400 outline-none\" \/>\r\n <div className=\"absolute left-3 top-2.5 text-gray-400\"><Search \/><\/div>\r\n <\/div>\r\n <div className=\"flex gap-2\">\r\n <button onClick={selectAll} className=\"bg-orange-100 text-orange-700 px-3 py-2 rounded-xl text-sm font-bold hover:bg-orange-200\">\u2705 Sab Select<\/button>\r\n <button onClick={clearAll} className=\"bg-gray-100 text-gray-700 px-3 py-2 rounded-xl text-sm font-bold hover:bg-gray-200\">\u274c Clear<\/button>\r\n <\/div>\r\n <\/div>\r\n {filtered.length > 0 && (\r\n <div className=\"mt-3 flex flex-wrap gap-2\">\r\n {filtered.map(r => (\r\n <button key={r.id} onClick={() => toggleRecipe(r.id)}\r\n className={`px-3 py-1 rounded-lg text-sm font-bold border-2 transition-all ${selectedRecipes.includes(r.id) ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-200 hover:border-orange-300'}`}>\r\n {r.image && <img src={r.image} alt=\"\" className=\"inline-block w-5 h-5 rounded mr-1 object-cover\" \/>}\r\n {r.name}\r\n <\/button>\r\n ))}\r\n <\/div>\r\n )}\r\n <\/div>\r\n\r\n {\/* SOP Cards *\/}\r\n <div id=\"sop-print-area\">\r\n {sopRecipes.length === 0 ? (\r\n <div className=\"text-center py-16 text-gray-400\">\r\n <div className=\"text-5xl mb-4\">\ud83d\udccb<\/div>\r\n <p className=\"font-bold text-lg\">Koi recipe nahi mili<\/p>\r\n <p className=\"text-sm mt-1\">Pehle Recipe Calculator mein recipes add karo<\/p>\r\n <\/div>\r\n ) : (\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n {sopRecipes.map(recipe => (\r\n <SOPCard\r\n key={recipe.id}\r\n recipe={recipe}\r\n rawItems={rawItems}\r\n steps={getSteps(recipe)}\r\n onEditSteps={() => setEditingSop(recipe.id)}\r\n \/>\r\n ))}\r\n <\/div>\r\n )}\r\n <\/div>\r\n\r\n {\/* Step Editor Modal *\/}\r\n {editingSop && (() => {\r\n const recipe = recipes.find(r => r.id === editingSop);\r\n if (!recipe) return null;\r\n return (\r\n <SOPStepEditor\r\n recipe={recipe}\r\n rawItems={rawItems}\r\n steps={getSteps(recipe)}\r\n onSave={(steps) => { saveSteps(recipe.id, steps); setEditingSop(null); }}\r\n onClose={() => setEditingSop(null)}\r\n \/>\r\n );\r\n })()}\r\n\r\n <style>{`\r\n @media print {\r\n .no-print { display: none !important; }\r\n nav, header { display: none !important; }\r\n body { background: white !important; }\r\n #sop-print-area { margin: 0; }\r\n .sop-card { page-break-inside: avoid; break-inside: avoid; }\r\n .sop-edit-btn { display: none !important; }\r\n }\r\n `}<\/style>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Modal to edit SOP steps \u2014 drag ingredients, insert process notes between them\r\n function SOPStepEditor({ recipe, rawItems, steps, onSave, onClose }) {\r\n const [localSteps, setLocalSteps] = useState(steps);\r\n const [processText, setProcessText] = useState('');\r\n const [insertAt, setInsertAt] = useState(0);\r\n\r\n const addProcess = () => {\r\n if (!processText.trim()) return;\r\n const newSteps = [...localSteps];\r\n newSteps.splice(insertAt, 0, { type: 'process', text: processText.trim(), id: Date.now() });\r\n setLocalSteps(newSteps);\r\n setProcessText('');\r\n setInsertAt(0);\r\n };\r\n\r\n const removeStep = (i) => setLocalSteps(localSteps.filter((_, idx) => idx !== i));\r\n\r\n const moveUp = (i) => {\r\n if (i === 0) return;\r\n const s = [...localSteps];\r\n [s[i-1], s[i]] = [s[i], s[i-1]];\r\n setLocalSteps(s);\r\n };\r\n const moveDown = (i) => {\r\n if (i === localSteps.length - 1) return;\r\n const s = [...localSteps];\r\n [s[i], s[i+1]] = [s[i+1], s[i]];\r\n setLocalSteps(s);\r\n };\r\n\r\n return (\r\n <div className=\"fixed inset-0 bg-black\/60 z-50 flex items-center justify-center p-4 no-print\" onClick={onClose}>\r\n <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto\" onClick={e => e.stopPropagation()}>\r\n <div style={{background:'linear-gradient(135deg,#EA580C,#DC2626)'}} className=\"p-4 rounded-t-2xl text-white flex justify-between items-center\">\r\n <div>\r\n <h3 className=\"font-black text-lg\">\u270f\ufe0f SOP Steps Edit Karo<\/h3>\r\n <p className=\"text-orange-100 text-sm\">{recipe.name}<\/p>\r\n <\/div>\r\n <button onClick={onClose} className=\"bg-white\/20 hover:bg-white\/30 rounded-xl px-3 py-1 font-bold text-sm\">\u2715 Close<\/button>\r\n <\/div>\r\n\r\n <div className=\"p-4\">\r\n {\/* Add process step *\/}\r\n <div className=\"bg-amber-50 border-2 border-amber-200 rounded-xl p-3 mb-4\">\r\n <p className=\"font-black text-amber-700 text-sm mb-2\">\u2795 Process Step Add Karo (ingredients ke beech)<\/p>\r\n <div className=\"flex gap-2 mb-2\">\r\n <select value={insertAt} onChange={e => setInsertAt(parseInt(e.target.value))} className=\"border-2 border-amber-300 rounded-lg px-2 py-1 text-sm font-bold bg-white flex-shrink-0\">\r\n {Array.from({length: localSteps.length + 1}, (_, i) => (\r\n <option key={i} value={i}>Position {i + 1}<\/option>\r\n ))}\r\n <\/select>\r\n <input\r\n type=\"text\"\r\n placeholder=\"e.g. Burger butter mein fry karo\"\r\n value={processText}\r\n onChange={e => setProcessText(e.target.value)}\r\n onKeyDown={e => e.key === 'Enter' && addProcess()}\r\n className=\"flex-1 border-2 border-amber-300 rounded-lg px-3 py-1 text-sm focus:border-amber-500 outline-none\"\r\n \/>\r\n <button onClick={addProcess} className=\"bg-amber-500 text-white px-3 py-1 rounded-lg font-bold text-sm hover:bg-amber-600 flex-shrink-0\">Add<\/button>\r\n <\/div>\r\n <p className=\"text-xs text-amber-600\">Position 1 = sabse pehle, {localSteps.length + 1} = sabse baad<\/p>\r\n <\/div>\r\n\r\n {\/* Steps list *\/}\r\n <div className=\"space-y-2\">\r\n {localSteps.map((step, i) => {\r\n if (step.type === 'ingredient') {\r\n const ing = recipe.ingredients[step.ingIndex];\r\n if (!ing) return null;\r\n const rawItem = rawItems.find(r => r.id === ing.rawItemId);\r\n return (\r\n <div key={i} className=\"flex items-center gap-2 p-2 bg-orange-50 border border-orange-200 rounded-xl\">\r\n <span className=\"bg-orange-500 text-white w-6 h-6 rounded-full text-xs font-black flex items-center justify-center flex-shrink-0\">{i+1}<\/span>\r\n {rawItem && rawItem.image && <img src={rawItem.image} alt=\"\" className=\"w-8 h-8 rounded-lg object-cover flex-shrink-0\" \/>}\r\n <div className=\"flex-1\">\r\n <span className=\"font-bold text-sm text-gray-700\">{ing.rawItemName}<\/span>\r\n <span className=\"text-orange-600 font-black ml-2\">{ing.quantity} {ing.unit}<\/span>\r\n <\/div>\r\n <div className=\"flex gap-1 flex-shrink-0\">\r\n <button onClick={() => moveUp(i)} className=\"text-gray-400 hover:text-gray-700 text-lg leading-none px-1\">\u2191<\/button>\r\n <button onClick={() => moveDown(i)} className=\"text-gray-400 hover:text-gray-700 text-lg leading-none px-1\">\u2193<\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n } else {\r\n return (\r\n <div key={i} className=\"flex items-center gap-2 p-2 bg-amber-50 border-2 border-amber-300 border-dashed rounded-xl\">\r\n <span className=\"bg-amber-400 text-white w-6 h-6 rounded-full text-xs font-black flex items-center justify-center flex-shrink-0\">\u2699<\/span>\r\n <span className=\"flex-1 font-bold text-amber-800 text-sm italic\">\"{step.text}\"<\/span>\r\n <div className=\"flex gap-1 flex-shrink-0\">\r\n <button onClick={() => moveUp(i)} className=\"text-gray-400 hover:text-gray-700 text-lg leading-none px-1\">\u2191<\/button>\r\n <button onClick={() => moveDown(i)} className=\"text-gray-400 hover:text-gray-700 text-lg leading-none px-1\">\u2193<\/button>\r\n <button onClick={() => removeStep(i)} className=\"text-red-500 hover:text-red-700 font-bold px-1\">\u2715<\/button>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n })}\r\n <\/div>\r\n\r\n <button onClick={() => onSave(localSteps)} className=\"mt-4 w-full bg-green-500 text-white py-3 rounded-xl font-black hover:bg-green-600 shadow-md\">\r\n \ud83d\udcbe Save SOP Steps\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n function SOPCard({ recipe, rawItems, steps, onEditSteps }) {\r\n return (\r\n <div className=\"sop-card bg-white rounded-2xl shadow-md border border-gray-200 overflow-hidden\">\r\n {\/* Header \u2014 Recipe name + image + selling price *\/}\r\n <div style={{background: 'linear-gradient(135deg, #1e293b, #334155)'}} className=\"p-4 flex items-center gap-4\">\r\n {recipe.image ? (\r\n <img src={recipe.image} alt={recipe.name} className=\"w-20 h-20 rounded-xl object-cover border-4 border-white\/20 shadow-lg flex-shrink-0\" \/>\r\n ) : (\r\n <div className=\"w-20 h-20 rounded-xl bg-white\/10 flex items-center justify-center text-4xl flex-shrink-0 border-4 border-white\/20\">\ud83c\udf7d\ufe0f<\/div>\r\n )}\r\n <div className=\"text-white flex-1\">\r\n <p className=\"text-white\/60 text-xs font-bold uppercase tracking-widest mb-1\">Standard Operating Procedure<\/p>\r\n <h3 className=\"text-2xl font-black leading-tight\">{recipe.name}<\/h3>\r\n {recipe.sellingPrice > 0 && (\r\n <div className=\"mt-2 inline-flex items-center gap-1 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-black shadow\">\r\n \ud83c\udff7\ufe0f Selling Price: \u20b9{recipe.sellingPrice.toFixed(2)}\r\n <\/div>\r\n )}\r\n <\/div>\r\n <button onClick={onEditSteps} className=\"sop-edit-btn bg-white\/20 hover:bg-white\/30 text-white px-3 py-2 rounded-xl text-xs font-bold flex-shrink-0 transition-all\">\r\n \u270f\ufe0f Edit Steps\r\n <\/button>\r\n <\/div>\r\n\r\n {\/* Steps *\/}\r\n <div className=\"p-4 space-y-2\">\r\n {steps.map((step, i) => {\r\n if (step.type === 'ingredient') {\r\n const ing = recipe.ingredients[step.ingIndex];\r\n if (!ing) return null;\r\n const rawItem = rawItems.find(r => r.id === ing.rawItemId);\r\n return (\r\n <div key={i} className=\"flex items-center gap-3 p-3 rounded-xl bg-orange-50 border border-orange-100\">\r\n {\/* Step number *\/}\r\n <span className=\"bg-orange-500 text-white w-7 h-7 rounded-full text-xs font-black flex items-center justify-center flex-shrink-0 shadow\">{i+1}<\/span>\r\n {\/* Image *\/}\r\n {rawItem && rawItem.image\r\n ? <img src={rawItem.image} alt={ing.rawItemName} className=\"w-14 h-14 rounded-xl object-cover border-2 border-orange-200 flex-shrink-0 shadow\" \/>\r\n : <div className=\"w-14 h-14 rounded-xl bg-orange-200 flex items-center justify-center text-2xl flex-shrink-0\">\ud83e\udd6c<\/div>\r\n }\r\n {\/* Name + Qty *\/}\r\n <div className=\"flex-1 min-w-0\">\r\n <p className=\"font-black text-gray-800\">{ing.rawItemName}<\/p>\r\n <p className=\"text-orange-600 font-black text-2xl leading-tight\">{ing.quantity} <span className=\"text-base font-bold text-gray-500\">{ing.unit}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n );\r\n } else {\r\n \/\/ Process step\r\n return (\r\n <div key={i} className=\"flex items-center gap-3 py-2 px-3\">\r\n {\/* Arrow indicator *\/}\r\n <div className=\"flex flex-col items-center flex-shrink-0\">\r\n <div className=\"w-0.5 h-3 bg-amber-400\"><\/div>\r\n <span className=\"bg-amber-400 text-white w-7 h-7 rounded-full text-sm font-black flex items-center justify-center shadow\">\u2699<\/span>\r\n <div className=\"w-0.5 h-3 bg-amber-400\"><\/div>\r\n <\/div>\r\n <div className=\"flex-1 bg-amber-50 border-2 border-amber-300 border-dashed rounded-xl px-4 py-2\">\r\n <p className=\"font-black text-amber-800 text-sm\">\ud83d\udc68\u200d\ud83c\udf73 {step.text}<\/p>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n })}\r\n {steps.length === 0 && (\r\n <div className=\"text-center py-6 text-gray-400\">\r\n <p className=\"text-sm\">Koi steps nahi. \"Edit Steps\" karke add karo.<\/p>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n ReactDOM.render(<App \/>, document.getElementById('root'));\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Food Costing Calculator<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2624","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=2624"}],"version-history":[{"count":38,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2624\/revisions"}],"predecessor-version":[{"id":3192,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2624\/revisions\/3192"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}