Day page improvements: Labor section, Net Outflow, Today nav rename, parseDate helper

Author: hiteshkrmsft

www/css/day.css

@@ -12,18 +12,17 @@
 }
 
 .stats-grid-2 {
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .stats-grid-3 {
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .stats-grid-3 .stat-value-sm {
   font-size: 15px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .stats-grid-3 .stat-card-purple .stat-value-sm {
@@ -36,6 +35,8 @@
   border-radius: var(--radius-md);
   text-align: center;
   transition: all var(--transition);
+  min-width: 0;
+  overflow: hidden;
 }
 
 .stat-card:hover {
@@ -47,21 +48,27 @@
   font-size: 13px;
   margin-bottom: 4px;
   font-weight: 500;
+  word-wrap: break-word;
 }
 
 .stat-value {
   font-size: 22px;
   font-weight: 700;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .stat-value-sm {
   font-size: 18px;
   font-weight: 700;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .stat-subtitle {
   font-size: 12px;
   margin-top: 4px;
+  word-wrap: break-word;
 }
 
 /* Stat Card Variants */
@@ -147,26 +154,29 @@
 /* Summary Grid */
 .summary-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   font-size: 14px;
 }
 
 .summary-item {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   padding: 10px 12px;
   border-radius: var(--radius);
-  align-items: center;
+  min-width: 0;
 }
 
 .summary-item span {
   color: var(--text-secondary);
   font-weight: 500;
+  font-size: 13px;
 }
 
 .summary-item strong {
   font-weight: 700;
+  font-size: 16px;
+  margin-top: 4px;
 }
 
 .summary-item-success {

www/js/auth/authentication.js

@@ -365,7 +365,6 @@ const AuthManager = {
         const restrictedTabs = {
             'financeTab': isOwnerOrManager,
             'analyticsTab': isOwnerOrManager,
-            'stockTab': !isStaff,
             'salesTab': !isStaff
         };
 
@@ -406,15 +405,21 @@ const AuthManager = {
                     item.style.display = 'block';
                 }
 
-                if (tabId === 'stock' && isStaff) {
+                if (tabId === 'sales' && isStaff) {
                     item.style.display = 'none';
-                } else if (tabId === 'stock' && !isStaff) {
+                } else if (tabId === 'sales' && !isStaff) {
                     item.style.display = 'block';
                 }
 
-                if (tabId === 'sales' && isStaff) {
+                if (tabId === 'wholesale-sales' && isStaff) {
                     item.style.display = 'none';
-                } else if (tabId === 'sales' && !isStaff) {
+                } else if (tabId === 'wholesale-sales' && !isStaff) {
+                    item.style.display = 'block';
+                }
+                
+                if (tabId === 'reports' && isStaff) {
+                    item.style.display = 'none';
+                } else if (tabId === 'reports' && !isStaff) {
                     item.style.display = 'block';
                 }
             }

www/js/modules/day.js

@@ -76,26 +76,26 @@ export const DayManager = {
 
         // Filter today's purchases
         const todayPurchases = (AppState.purchaseHistory || []).filter(p => {
-            const date = p.date?.toDate ? p.date.toDate() : new Date(p.date);
-            return date >= today && date < tomorrow;
+            const date = Helpers.parseDate(p.date);
+            return date && date >= today && date < tomorrow;
         });
 
         // Filter today's wholesale sales
         const todayWholesaleSales = (AppState.salesHistory || []).filter(s => {
-            const date = s.date?.toDate ? s.date.toDate() : new Date(s.date);
-            return date >= today && date < tomorrow;
+            const date = Helpers.parseDate(s.date);
+            return date && date >= today && date < tomorrow;
         });
 
         // Filter today's retail sales
         const todayRetailSales = (AppState.retailSalesHistory || []).filter(s => {
-            const date = s.date?.toDate ? s.date.toDate() : new Date(s.date);
-            return date >= today && date < tomorrow;
+            const date = Helpers.parseDate(s.date);
+            return date && date >= today && date < tomorrow;
         });
 
         // Filter today's expenses
         const todayExpenses = (AppState.expensesHistory || []).filter(e => {
-            const date = e.date?.toDate ? e.date.toDate() : new Date(e.date);
-            return date >= today && date < tomorrow;
+            const date = Helpers.parseDate(e.date);
+            return date && date >= today && date < tomorrow;
         });
 
         // Calculate totals
@@ -113,11 +113,18 @@ export const DayManager = {
             return sum + amount;
         }, 0);
         const totalSales = totalWholesaleSales + totalRetailSales;
-        // Expenses use 'amount' property
-        const totalExpenses = todayExpenses.reduce((sum, e) => {
-            const amount = Number(e.amount) || Number(e.total) || 0;
-            return sum + amount;
+        
+        // Expenses split by category
+        const businessExpenses = todayExpenses.filter(e => e.category === 'business');
+        const personalExpenses = todayExpenses.filter(e => e.category === 'personal');
+        
+        const totalBusinessExpenses = businessExpenses.reduce((sum, e) => {
+            return sum + (Number(e.amount) || Number(e.total) || 0);
         }, 0);
+        const totalPersonalExpenses = personalExpenses.reduce((sum, e) => {
+            return sum + (Number(e.amount) || Number(e.total) || 0);
+        }, 0);
+        const totalExpenses = totalBusinessExpenses + totalPersonalExpenses;
 
         // Calculate labor cost from purchases
         const totalLaborCost = todayPurchases.reduce((sum, p) => sum + (p.laborCharges || p.labour || 0), 0);
@@ -158,8 +165,8 @@ export const DayManager = {
         // Calculate due paid and due received from cash management transactions
         let duePaid = 0, dueReceived = 0;
         const todayCashTransactions = (AppState.cashManagement || []).filter(t => {
-            const date = t.date?.toDate ? t.date.toDate() : new Date(t.date);
-            return date >= today && date < tomorrow;
+            const date = Helpers.parseDate(t.date);
+            return date && date >= today && date < tomorrow;
         });
 
         todayCashTransactions.forEach(t => {
@@ -175,32 +182,40 @@ export const DayManager = {
         const totalCashOut = cashPaid + onlinePaid + totalExpenses + duePaid;
         const totalCashFlow = totalCashIn - totalCashOut;
 
-        // Net cash flow (simpler view)
-        const netCashFlow = (cashReceived + onlineReceived) - (cashPaid + onlinePaid + totalExpenses);
+        // Net outflow (Out - In): positive means money went out, negative means money came in
+        const netOutflow = (cashPaid + onlinePaid + totalExpenses) - (cashReceived + onlineReceived);
 
         // Update UI - Main Stats
         this.updateElement('todayTotalPurchases', formatCurrency(totalPurchases));
         this.updateElement('todayPurchaseCount', `${todayPurchases.length} bills`);
         this.updateElement('todayTotalSales', formatCurrency(totalSales));
         this.updateElement('todaySaleCount', `${todayWholesaleSales.length + todayRetailSales.length} bills`);
-        this.updateElement('todayTotalExpenses', formatCurrency(totalExpenses));
-        this.updateElement('todayExpenseCount', `${todayExpenses.length} entries`);
         this.updateElement('todayLaborCost', formatCurrency(totalLaborCost));
 
+        // Expenses breakdown
+        this.updateElement('todayBusinessExpenses', formatCurrency(totalBusinessExpenses));
+        this.updateElement('todayBusinessExpenseCount', `${businessExpenses.length} entries`);
+        this.updateElement('todayPersonalExpenses', formatCurrency(totalPersonalExpenses));
+        this.updateElement('todayPersonalExpenseCount', `${personalExpenses.length} entries`);
+        
         // Quantity metrics
         this.updateElement('todayQtyPurchased', `${qtyPurchased.toFixed(1)} kg`);
         this.updateElement('todayQtySold', `${qtySold.toFixed(1)} kg`);
 
-        // Net cash flow with color coding
+        // Total In and Total Out for hero card
+        this.updateElement('todayTotalIn', formatCurrency(cashReceived + onlineReceived));
+        this.updateElement('todayTotalOut', formatCurrency(cashPaid + onlinePaid + totalExpenses));
+        
+        // Net outflow with color coding
         const cashFlowLabel = document.getElementById('todayCashFlowLabel');
         if (cashFlowLabel) {
-            cashFlowLabel.textContent = netCashFlow >= 0 ? 'Net Inflow' : 'Net Outflow';
+            cashFlowLabel.textContent = netOutflow >= 0 ? 'Net Outflow:' : 'Net Inflow:';
         }
 
         const netCashFlowEl = document.getElementById('todayNetCashFlow');
         if (netCashFlowEl) {
-            netCashFlowEl.style.color = netCashFlow >= 0 ? '#16a34a' : '#dc2626';
-            netCashFlowEl.textContent = (netCashFlow >= 0 ? '+' : '-') + formatCurrency(Math.abs(netCashFlow));
+            netCashFlowEl.style.color = netOutflow >= 0 ? 'white' : '#a5f3fc';
+            netCashFlowEl.textContent = formatCurrency(Math.abs(netOutflow));
         }
 
         // Payment summary

www/js/modules/items.js

@@ -551,6 +551,16 @@ const ItemsManager = {
                 ? item.saleRates.map(r => `${r}`).join(', ') 
                 : '-';
 
+            // Calculate average rate from stock for staff view
+            let avgRate = '-';
+            if (isStaff && AppState.stock) {
+                // Try to find stock by item id or name
+                const stockEntry = AppState.stock[item.id] || AppState.stock[item.name];
+                if (stockEntry && stockEntry.rate) {
+                    avgRate = `₹${stockEntry.rate.toFixed(2)}`;
+                }
+            }
+            
             const itemFrequency = frequency[item.name] || 0;
 
             const itemIndex = AppState.items.findIndex(i => i.id === item.id);
@@ -573,15 +583,29 @@ const ItemsManager = {
                 };
                 row.onclick = () => this.openEditModal(itemIndex);
             }
-            row.innerHTML = `
-                <td style="padding: 16px; font-weight: 600; color: #1f2937; font-size: 15px; border-right: 1px solid #f3f4f6;">
-                    ${displayName || item.name || '-'}
-                    ${itemFrequency > 0 ? `<span style="margin-left: 8px; padding: 3px 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; font-size: 11px; font-weight: 600; box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);">${itemFrequency}</span>` : ''}
-                </td>
-                <td style="padding: 16px; color: #007bff; font-size: 14px; font-weight: 600; border-right: 1px solid #f3f4f6;">${purchaseRates}</td>
-                <td style="padding: 16px; color: #28a745; font-size: 14px; font-weight: 600; border-right: 1px solid #f3f4f6;">${saleRates}</td>
-                <td class="wholesale-column" style="padding: 16px; color: #9333ea; font-size: 14px; font-weight: 600; display: ${isStaff ? 'none' : 'table-cell'};">${wholesaleRates}</td>
-            `;
+            
+            // Staff view: show item name, sale rates, and avg rate
+            // Non-staff view: show item name, purchase rates, sale rates, wholesale rates
+            if (isStaff) {
+                row.innerHTML = `
+                    <td style="padding: 16px; font-weight: 600; color: #1f2937; font-size: 15px; border-right: 1px solid #f3f4f6;">
+                        ${displayName || item.name || '-'}
+                        ${itemFrequency > 0 ? `<span style="margin-left: 8px; padding: 3px 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; font-size: 11px; font-weight: 600; box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);">${itemFrequency}</span>` : ''}
+                    </td>
+                    <td style="padding: 16px; color: #28a745; font-size: 14px; font-weight: 600; border-right: 1px solid #f3f4f6;">${saleRates}</td>
+                    <td style="padding: 16px; color: #6366f1; font-size: 14px; font-weight: 600;">${avgRate}</td>
+                `;
+            } else {
+                row.innerHTML = `
+                    <td style="padding: 16px; font-weight: 600; color: #1f2937; font-size: 15px; border-right: 1px solid #f3f4f6;">
+                        ${displayName || item.name || '-'}
+                        ${itemFrequency > 0 ? `<span style="margin-left: 8px; padding: 3px 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; font-size: 11px; font-weight: 600; box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);">${itemFrequency}</span>` : ''}
+                    </td>
+                    <td style="padding: 16px; color: #007bff; font-size: 14px; font-weight: 600; border-right: 1px solid #f3f4f6;">${purchaseRates}</td>
+                    <td style="padding: 16px; color: #28a745; font-size: 14px; font-weight: 600; border-right: 1px solid #f3f4f6;">${saleRates}</td>
+                    <td class="wholesale-column" style="padding: 16px; color: #9333ea; font-size: 14px; font-weight: 600;">${wholesaleRates}</td>
+                `;
+            }
             tbody.appendChild(row);
         });
 

www/js/modules/miscellaneous.js

@@ -195,7 +195,9 @@ export class ExpensesManager {
      */
     static renderBusinessExpenseHistory() {
         const container = document.getElementById('businessExpenseHistoryList');
-        const businessExpenses = AppState.expensesHistory.filter(p => p.category === 'business' && p.id);
+        const businessExpenses = AppState.expensesHistory
+            .filter(p => p.category === 'business' && p.id)
+            .sort((a, b) => new Date(b.date) - new Date(a.date));
 
         if (businessExpenses.length === 0) {
             container.innerHTML = '<p style="text-align: center; color: #888; margin-top: 40px;">No business expenses recorded yet</p>';
@@ -224,7 +226,9 @@ export class ExpensesManager {
 
     static renderPersonalExpenseHistory() {
         const container = document.getElementById('personalExpenseHistoryList');
-        const personalExpenses = AppState.expensesHistory.filter(p => p.category === 'personal' && p.id);
+        const personalExpenses = AppState.expensesHistory
+            .filter(p => p.category === 'personal' && p.id)
+            .sort((a, b) => new Date(b.date) - new Date(a.date));
 
         if (personalExpenses.length === 0) {
             container.innerHTML = '<p style="text-align: center; color: #888; margin-top: 40px;">No personal expenses recorded yet</p>';

www/js/modules/stock.js

@@ -97,11 +97,20 @@ export class StockManager {
             return;
         }
 
+        // Check if user is staff (show limited quantity info for items > 100kg)
+        const isStaff = AppState.userRole === 'staff';
+        
         stockWithDetails.forEach(item => {
             const displayName = (AppState.settings.showHindi && item.hindiName) ? item.hindiName : item.name;
             const div = document.createElement("div");
             div.className = "stock-item";
 
+            // For staff: show "Available" if quantity > 100, otherwise show actual quantity
+            // Rate is always shown, value is hidden when showing "Available"
+            const showLimitedQty = isStaff && item.quantity > 100;
+            const quantityDisplay = showLimitedQty ? 'Available' : `${item.quantity.toFixed(1)} kg`;
+            const valueDisplay = showLimitedQty ? '' : `<div style="color: #666; font-size: 12px; margin-top: 4px;">≈ ₹${Math.round(item.quantity * (item.rate || 0))}</div>`;
+            
             div.innerHTML = `
                 <div style="display: flex; justify-content: space-between; align-items: center;">
                     <div>
@@ -112,11 +121,9 @@ export class StockManager {
                     </div>
                     <div style="text-align: right;">
                         <div style="font-size: 18px; font-weight: 700; color: #28a745;">
-                            ${item.quantity.toFixed(1)} kg
-                        </div>
-                        <div style="color: #666; font-size: 12px; margin-top: 4px;">
-                            ≈ ₹${Math.round(item.quantity * (item.rate || 0))}
+                            ${quantityDisplay}
                         </div>
+                        ${valueDisplay}
                     </div>
                 </div>
             `;