<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Incentive Master Prototype</title>
<script src="[Link]
</head>
<body class="p-6 space-y-6 max-w-4xl mx-auto bg-gray-100">
<h1 class="text-2xl font-bold mb-4">Incentive Master – Prototype</h1>
<!-- BASIC SETUP -->
<div class="p-4 space-y-4 bg-white rounded-lg shadow">
<h2 class="text-xl font-semibold mb-2">Basic Setup</h2>
<div class="grid grid-cols-2 gap-4">
<input id="incName" type="text" placeholder="Incentive Name" class="border p-
2 rounded w-full" />
<select id="incType" class="border p-2 rounded w-full">
<option disabled selected>Incentive Type</option>
<option value="weight">Weight-wise</option>
<option value="amount">Amount-wise</option>
<option value="margin">Margin-wise</option>
<option value="aged">Aged-wise</option>
<option value="target">Target-wise</option>
</select>
<select id="calcMethod" class="border p-2 rounded w-full">
<option disabled selected>Calculation Method</option>
<option value="percent">Percentage (%)</option>
<option value="pergram">Per Gram</option>
<option value="flat">Flat Amount</option>
</select>
<select id="isAddon" class="border p-2 rounded w-full">
<option disabled selected>Is Add-On Incentive?</option>
<option value="yes">YES</option>
<option value="no">NO</option>
</select>
<select id="isTargetReq" class="border p-2 rounded w-full">
<option disabled selected>Is Target Required?</option>
<option value="yes">YES</option>
<option value="no">NO</option>
</select>
<input id="targetPercent" type="text" placeholder="Target Required %"
class="border p-2 rounded w-full" />
</div>
</div>
<!-- CONDITIONS -->
<div class="p-4 space-y-4 bg-white rounded-lg shadow">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Conditions (IF)</h2>
<button id="addConditionBtn" class="px-4 py-2 bg-blue-600 text-white
rounded">+ Add Condition</button>
</div>
<div id="conditionsContainer"></div>
</div>
<!-- INCENTIVE RULES -->
<div class="p-4 space-y-4 bg-white rounded-lg shadow">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Incentive Rules (THEN)</h2>
<button id="addRuleBtn" class="px-4 py-2 bg-blue-600 text-white rounded">+
Add Rule</button>
</div>
<div id="rulesContainer"></div>
</div>
<button id="saveBtn" class="w-full mt-4 px-4 py-3 bg-green-600 text-white rounded
text-lg">
SAVE INCENTIVE
</button>
<script>
// ------------ ADD CONDITION -------------
const conditionsContainer = [Link]("conditionsContainer");
[Link]("addConditionBtn").addEventListener("click", () => {
const row = [Link]("div");
[Link] = "grid grid-cols-4 gap-4 p-3 bg-gray-50 rounded-xl";
[Link] = `
<select class="border p-2 rounded w-full condition-field">
<option disabled selected>Field</option>
<option value="Category">Category</option>
<option value="Weight">Weight</option>
<option value="BillAmount">Bill Amount</option>
<option value="Margin">Margin %</option>
<option value="StockAgeDays">Stock Age Days</option>
<option value="TargetAchieved">Target Achieved %</option>
</select>
<select class="border p-2 rounded w-full condition-op">
<option disabled selected>Operator</option>
<option value=">">></option>
<option value="<"><</option>
<option value=">=">>=</option>
<option value="<="><=</option>
<option value="=">=</option>
<option value="between">Between</option>
</select>
<input type="text" placeholder="Value" class="border p-2 rounded w-full
condition-value" />
<button class="delete-condition bg-red-500 text-white px-3 py-2
rounded">Delete</button>
`;
// Delete button functionality
[Link](".delete-condition").addEventListener("click", () => {
[Link]();
});
[Link](row);
});
// ------------ ADD RULE -------------
const rulesContainer = [Link]("rulesContainer");
[Link]("addRuleBtn").addEventListener("click", () => {
const row = [Link]("div");
[Link] = "grid grid-cols-4 gap-4 p-3 bg-gray-50 rounded-xl";
[Link] = `
<select class="border p-2 rounded w-full rule-mode">
<option disabled selected>Mode</option>
<option value="base">Base</option>
<option value="addon">Add-On</option>
</select>
<select class="border p-2 rounded w-full rule-calc">
<option disabled selected>Calculation</option>
<option value="percent">Percentage</option>
<option value="pergram">Per Gram</option>
<option value="flat">Flat</option>
</select>
<input type="text" placeholder="Value" class="border p-2 rounded w-full
rule-value" />
<button class="delete-rule bg-red-500 text-white px-3 py-2
rounded">Delete</button>
`;
[Link](".delete-rule").addEventListener("click", () => {
[Link]();
});
[Link](row);
});
// ------------ EXPORT JSON -------------
[Link]("saveBtn").addEventListener("click", () => {
const data = {
basic: {
name: [Link]("incName").value,
type: [Link]("incType").value,
calcMethod: [Link]("calcMethod").value,
isAddon: [Link]("isAddon").value,
isTargetRequired: [Link]("isTargetReq").value,
targetPercent: [Link]("targetPercent").value
},
conditions: [],
rules: []
};
// Gather conditions
[Link]("#conditionsContainer > div").forEach(row => {
[Link]({
field: [Link](".condition-field").value,
operator: [Link](".condition-op").value,
value: [Link](".condition-value").value
});
});
// Gather rules
[Link]("#rulesContainer > div").forEach(row => {
[Link]({
mode: [Link](".rule-mode").value,
calc: [Link](".rule-calc").value,
value: [Link](".rule-value").value
});
});
// Download JSON file
const blob = new Blob([[Link](data, null, 2)], { type:
"application/json" });
const url = [Link](blob);
const a = [Link]("a");
[Link] = url;
[Link] = "[Link]";
[Link]();
[Link](url);
});
</script>
</body>
</html>