Skip to content

Commit ea8e2ec

Browse files
Skywalker690Skywalker690
committed
refactor: update ConfirmationModal and RefillerDashboard for clarity on cost calculations
1 parent 2746889 commit ea8e2ec

2 files changed

Lines changed: 28 additions & 17 deletions

File tree

‎client/components/ConfirmationModal.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
3636
if (!isOpen) return null;
3737

3838
const totalQuantity = items.reduce((sum, item) => sum + item.quantity, 0);
39-
const totalAmount = items.reduce((sum, item) => sum + item.amount, 0);
39+
const totalCost = items.reduce((sum, item) => sum + item.amount, 0);
40+
const totalMrpValue = items.reduce((sum, item) => sum + (item.mrp * item.quantity), 0);
4041

4142
// Group items by brand
4243
const itemsByBrand = items.reduce((acc, item) => {
@@ -91,7 +92,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
9192

9293
{/* Summary Stats */}
9394
<div className="p-6 bg-gradient-to-r from-slate-50/50 to-slate-100/30 border-b border-slate-100 shrink-0">
94-
<div className="grid grid-cols-3 gap-4">
95+
<div className="grid grid-cols-4 gap-4">
9596
<div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
9697
<div className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Total Items</div>
9798
<div className="text-2xl font-black text-slate-800">{items.length}</div>
@@ -101,36 +102,43 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
101102
<div className="text-2xl font-black text-slate-800">{totalQuantity}</div>
102103
</div>
103104
<div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
104-
<div className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Total Amount</div>
105-
<div className="text-2xl font-black text-slate-800">₹{totalAmount.toFixed(2)}</div>
105+
<div className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Total MRP Value</div>
106+
<div className="text-2xl font-black text-slate-800">₹{totalMrpValue.toFixed(2)}</div>
107+
</div>
108+
<div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
109+
<div className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Total Cost</div>
110+
<div className="text-2xl font-black text-slate-800">₹{totalCost.toFixed(2)}</div>
106111
</div>
107112
</div>
108113
</div>
109114

110115
{/* Items List - Scrollable */}
111116
<div className="flex-1 overflow-y-auto p-6 space-y-6">
112117
{(Object.entries(itemsByBrand) as [string, ConfirmationItem[]][]).map(([brand, brandItems]) => {
113-
const brandTotal = brandItems.reduce((sum, item) => sum + item.amount, 0);
118+
const brandTotalCost = brandItems.reduce((sum, item) => sum + item.amount, 0);
119+
const brandTotalMrp = brandItems.reduce((sum, item) => sum + (item.mrp * item.quantity), 0);
114120
return (
115121
<div key={brand} className="glass-panel rounded-[20px] overflow-hidden">
116122
<div className="bg-slate-900/5 px-6 py-4 flex items-center justify-between border-b border-white/10">
117123
<div className="flex items-center gap-3">
118124
<Package size={16} className="text-slate-500" />
119125
<span className="text-slate-800 font-bold tracking-wide">{brand}</span>
120126
</div>
121-
<div className="text-sm font-bold text-slate-600">
122-
₹{brandTotal.toFixed(2)}
127+
<div className="flex items-center gap-6 text-sm font-bold text-slate-600">
128+
<span className="text-xs text-slate-500">Total MRP: <span className="text-slate-700">₹{brandTotalMrp.toFixed(2)}</span></span>
129+
<span className="text-xs text-slate-500">Total Cost: <span className="text-slate-700">₹{brandTotalCost.toFixed(2)}</span></span>
123130
</div>
124131
</div>
125132
<div className="overflow-x-auto">
126133
<table className="w-full text-left border-collapse">
127134
<thead>
128135
<tr className="border-b border-slate-100 text-[10px] uppercase font-bold text-slate-400 tracking-wider">
129136
<th className="px-6 py-3 w-12">#</th>
130-
<th className="px-6 py-3 min-w-[200px]">Item Name</th>
131-
<th className="px-6 py-3 w-32 text-center">MRP (₹)</th>
132-
<th className="px-6 py-3 w-32 text-center">Quantity</th>
133-
<th className="px-6 py-3 w-40 text-right">Amount (₹)</th>
137+
<th className="px-6 py-3 min-w-[180px]">Item Name</th>
138+
<th className="px-6 py-3 w-28 text-center">MRP (₹)</th>
139+
<th className="px-6 py-3 w-28 text-center">Quantity</th>
140+
<th className="px-6 py-3 w-32 text-right">Total MRP (₹)</th>
141+
<th className="px-6 py-3 w-32 text-right">Total Cost (₹)</th>
134142
</tr>
135143
</thead>
136144
<tbody className="divide-y divide-slate-50/50">
@@ -146,6 +154,9 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
146154
{item.quantity} units
147155
</span>
148156
</td>
157+
<td className="px-6 py-3 text-sm text-right font-mono text-emerald-700">
158+
₹{(item.mrp * item.quantity).toFixed(2)}
159+
</td>
149160
<td className="px-6 py-3 text-sm text-right font-bold text-slate-800">
150161
₹{item.amount.toFixed(2)}
151162
</td>
@@ -191,4 +202,4 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
191202
);
192203
};
193204

194-
export default ConfirmationModal;
205+
export default ConfirmationModal;

‎client/views/RefillerDashboard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -502,7 +502,7 @@ const RefillerDashboard: React.FC<RefillerDashboardProps> = ({ user, products, o
502502
<div className="p-2 bg-indigo-100 rounded-full shrink-0">
503503
<Info size={18} />
504504
</div>
505-
<p className="mt-1 leading-relaxed">Enter quantity and cost amount for daily stock. You can also add new items directly to existing categories.</p>
505+
<p className="mt-1 leading-relaxed">Enter quantity and <strong>total cost</strong> for the entire stock quantity. Total cost should be less than (Quantity × MRP) to ensure profit.</p>
506506
</div>
507507

508508
{/* Standard Product Tables */}
@@ -521,7 +521,7 @@ const RefillerDashboard: React.FC<RefillerDashboardProps> = ({ user, products, o
521521
<th className="px-8 py-5 min-w-[200px]">Item Name</th>
522522
<th className="px-8 py-5 w-40 text-center">MRP (₹)</th>
523523
<th className="px-8 py-5 w-40 text-center">Stock</th>
524-
<th className="px-8 py-5 w-48 text-center">Cost (₹)</th>
524+
<th className="px-8 py-5 w-48 text-center">Total Cost (₹)</th>
525525
<th className="px-8 py-5 w-24 text-center">Actions</th>
526526
</tr>
527527
</thead>
@@ -606,7 +606,7 @@ const RefillerDashboard: React.FC<RefillerDashboardProps> = ({ user, products, o
606606
<td className="px-8 py-4">
607607
<input
608608
type="number"
609-
placeholder="Cost"
609+
placeholder="Total Cost"
610610
value={row.amt}
611611
onChange={(e) => handleUpdateNewItem(brand, row.id, 'amt', e.target.value)}
612612
className="w-full text-center py-2.5 bg-white border border-indigo-200 rounded-xl focus:ring-4 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none text-sm font-bold text-indigo-600 transition-all"
@@ -695,7 +695,7 @@ const RefillerDashboard: React.FC<RefillerDashboardProps> = ({ user, products, o
695695
<th className="px-8 py-5 min-w-[200px]">Item Name</th>
696696
<th className="px-8 py-5 w-40 text-center">MRP (₹)</th>
697697
<th className="px-8 py-5 w-40 text-center">Stock</th>
698-
<th className="px-8 py-5 w-48 text-center">Cost (₹)</th>
698+
<th className="px-8 py-5 w-48 text-center">Total Cost (₹)</th>
699699
<th className="px-8 py-5 w-12"></th>
700700
</tr>
701701
</thead>
@@ -733,7 +733,7 @@ const RefillerDashboard: React.FC<RefillerDashboardProps> = ({ user, products, o
733733
<td className="px-8 py-3">
734734
<input
735735
type="number"
736-
placeholder="0.00"
736+
placeholder="Total Cost"
737737
value={row.amt}
738738
onChange={(e) => updateRowData(table.id, row.id, 'amt', e.target.value)}
739739
className="w-full text-center py-2 bg-white border border-slate-200 rounded-xl outline-none text-sm font-bold text-indigo-600 focus:border-indigo-500 transition-all"

0 commit comments

Comments
 (0)