Untitled
unknown
plain_text
3 months ago
14 kB
9
Indexable
Oh no, sorry about that! 😅 You don't need to paste anything anywhere! That was my mistake — I sent it as raw code instead of a proper interactive card. Let me fix that right now! 👇
(This should just appear and work directly — no coding needed from your side! 🌸)
```jsx
import { useState } from "react";
const sections = [
{
title: "📦 Costing Methods",
color: "bg-purple-50 border-purple-300",
headerColor: "bg-purple-300",
items: [
{ term: "Job Costing", def: "Costs tracked per individual job/order. Each job = its own cost sheet. (e.g. custom furniture)" },
{ term: "Contract Costing", def: "Like job costing but for large, long-term projects spanning multiple periods. (e.g. building a bridge)" },
{ term: "Process Costing", def: "Costs tracked per stage/process. Output of one process = input of next. (e.g. chemicals, oil)" },
{ term: "Batch Costing", def: "A group of identical items = one cost unit. Total batch cost ÷ units = cost per unit. (e.g. printing books)" },
],
},
{
title: "📉 Loss & Gain Terms",
color: "bg-red-50 border-red-300",
headerColor: "bg-red-300",
items: [
{ term: "Normal Loss", def: "Expected, unavoidable loss. Built into the plan. Cost absorbed by good output units. (e.g. evaporation)" },
{ term: "Abnormal Loss", def: "Loss BEYOND normal. Unexpected. Gets its OWN account → hits Profit & Loss. (e.g. machine breakdown)" },
{ term: "Abnormal Gain", def: "Actual output MORE than expected. Lucky bonus! Gets its own account too. Opposite of abnormal loss." },
],
},
{
title: "💰 Budget Basics",
color: "bg-blue-50 border-blue-300",
headerColor: "bg-blue-300",
items: [
{ term: "Traditional/Fixed Budget", def: "A financial plan made for ONE specific output level. Doesn't change if output changes." },
{ term: "Flexible Budget", def: "A budget that ADJUSTS itself to actual output level. Makes comparison fair and meaningful." },
{ term: "Variable Cost", def: "Changes with output. (e.g. raw materials, direct labour). Double output = double cost." },
{ term: "Fixed Cost", def: "Stays the SAME regardless of output. (e.g. rent, manager salary)." },
{ term: "Variance", def: "Flexible Budget Cost − Actual Cost. Favourable (F) = saved money ✅. Adverse (A) = overspent ❌" },
],
},
{
title: "🧮 Key Formulas",
color: "bg-green-50 border-green-300",
headerColor: "bg-green-300",
items: [
{ term: "Variable Cost/unit", def: "Total Variable Cost ÷ Budgeted Units" },
{ term: "Flexible Budget Cost", def: "(Variable Cost/unit × Actual Units) + Fixed Costs" },
{ term: "Expected Output", def: "Input − Normal Loss" },
{ term: "Cost per unit (Process)", def: "(Total Cost − Scrap Value of Normal Loss) ÷ Expected Output" },
{ term: "Abnormal Loss/Gain", def: "Expected Output vs Actual Output → difference is Abnormal Loss or Gain" },
],
},
{
title: "🔁 Process Costing — The Flow",
color: "bg-yellow-50 border-yellow-300",
headerColor: "bg-yellow-300",
items: [
{ term: "Step 1", def: "Expected Output = Input − Normal Loss" },
{ term: "Step 2", def: "Cost/unit = (Total Cost − Normal Loss Scrap Value) ÷ Expected Output" },
{ term: "Step 3", def: "Compare Expected vs Actual → find Abnormal Loss or Gain" },
{ term: "Step 4", def: "Prepare Process Account (T-account). Both sides must balance ✅" },
{ term: "Step 5", def: "Prepare Abnormal Loss/Gain Account. Difference goes to P&L." },
],
},
{
title: "📊 Flexible Budget — The Flow",
color: "bg-orange-50 border-orange-300",
headerColor: "bg-orange-300",
items: [
{ term: "Step 1", def: "Identify Fixed Costs and Variable Costs from the question" },
{ term: "Step 2", def: "Find Variable Cost per unit = Total Variable Cost ÷ Budgeted Units" },
{ term: "Step 3", def: "Build Flexible Budget at ACTUAL output: Variable costs adjust, Fixed costs stay same" },
{ term: "Step 4", def: "Compare Flexible Budget vs Actual Costs" },
{ term: "Step 5", def: "Calculate Variance → label Favourable (F) or Adverse (A)" },
],
},
];
export default function CheatSheet() {
const [openSection, setOpenSection] = useState(null);
return (
<div className="min-h-screen bg-gray-100 p-4">
<div className="max-w-2xl mx-auto">
<div className="text-center mb-6">
<h1 className="text-2xl font-bold text-gray-800">📚 Applied Costing Cheat Sheet</h1>
<p className="text-sm text-gray-500 mt-1">Tap a section to expand • Good luck today! 🍀</p>
</div>
<div className="space-y-3">
{sections.map((section, i) => (
<div key={i} className={`rounded-xl border-2 overflow-hidden ${section.color}`}>
<button
onClick={() => setOpenSection(openSection === i ? null : i)}
className={`w-full text-left px-4 py-3 font-bold text-gray-800 flex justify-between items-center ${section.headerColor}`}
>
<span>{section.title}</span>
<span className="text-lg">{openSection === i ? "▲" : "▼"}</span>
</button>
{openSection === i && (
<div className="p-3 space-y-2">
{section.items.map((item, j) => (
<div key={j} className="bg-white rounded-lg p-3 shadow-sm">
<span className="font-semibold text-gray-800">{item.term}: </span>
<span className="text-gray-600 text-sm">{item.def}</span>
</div>
))}
</div>
)}
</div>
))}
</div>
<div className="mt-6 bg-white rounded-xl border-2 border-gray-200 p-4 text-center">
<p className="text-gray-500 text-sm">💡 <span className="font-semibold text-gray-700">Flexible Budget = fairness in comparison.</span></p>
<p className="text-gray-500 text-sm mt-1">💡 <span className="font-semibold text-gray-700">Abnormal Loss/Gain = isolated separately, goes to P&L.</span></p>
<p className="text-pink-500 font-semibold mt-3">You've got this! 🌟 Now go sleep! 🌙</p>
</div>
</div>
</div>
);
}
```
))}
)}
))}
)
}
]
}
]
}
]
}
]
}
]
}
]
}
]Editor is loading...
Leave a Comment