From e40a1a828ddfb5569c964daecfe7002885b3e549 Mon Sep 17 00:00:00 2001
From: Mayur Shinde <mayurshinde6776@gmail.com>
Date: Fri, 5 Jun 2026 16:15:36 +0530
Subject: [PATCH] Project details: cost & breakdown section display cost type
 for each team cost entry

---
 src/pages/owner/OwnerProjectDetail.jsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/pages/owner/OwnerProjectDetail.jsx b/src/pages/owner/OwnerProjectDetail.jsx
index fe165bc..b82ffa9 100644
--- a/src/pages/owner/OwnerProjectDetail.jsx
+++ b/src/pages/owner/OwnerProjectDetail.jsx
@@ -141,6 +141,17 @@ const EXPENSE_TYPE_CONFIG = {
 
 const SUBCONTRACTOR_WORK_TYPES = ['Plumbing', 'Electrical', 'Painting', 'Roofing', 'Civil work', 'HVAC', 'Carpentry', 'Other'];
 
+// Short labels for team cost types — shown inline in the Type badge (e.g. "Team Cost · Comm")
+const COST_TYPE_ABBR = {
+    'Commission':   'Comm',
+    'Salary':       'Salary',
+    'Bonus':        'Bonus',
+    'Hourly Wage':  'Hourly',
+    'Per Diem':     'Per Diem',
+    'Referral Fee': 'Referral',
+    'Overtime':     'OT',
+};
+
 const inferExpenseType = (category = '') => {
     const c = (category || '').toLowerCase();
     if (c.includes('material')) return 'material';
@@ -166,9 +177,9 @@ function seedExpenseRowsMock(project) {
     });
     const seed = (project?.id || '').charCodeAt((project?.id || 'x').length - 1) % 3;
     const teamRows = [
-        { id: 'exp_team_1', type: 'team', name: 'Jesus Gonzales', category: 'Sales Rep',  allocated: 4200, actual: 4200, paid: true },
-        { id: 'exp_team_2', type: 'team', name: 'Cody Tatum',    category: 'Canvasser',  allocated: 1500, actual: 1500, paid: false },
-        { id: 'exp_team_3', type: 'team', name: 'Sarah Calloway',    category: 'Estimator',  allocated: 1200, actual: 0,    paid: false },
+        { id: 'exp_team_1', type: 'team', name: 'Jesus Gonzales', category: 'Sales Rep',  costType: 'Commission',  allocated: 4200, actual: 4200, paid: true },
+        { id: 'exp_team_2', type: 'team', name: 'Cody Tatum',    category: 'Canvasser',  costType: 'Hourly Wage', allocated: 1500, actual: 1500, paid: false },
+        { id: 'exp_team_3', type: 'team', name: 'Sarah Calloway',    category: 'Estimator',  costType: 'Salary',      allocated: 1200, actual: 0,    paid: false },
     ].slice(0, 2 + seed).map(row => ({
         ...row,
         paymentRequests: generateMockPaymentRequests(row.id, row.actual, row.paid, row.allocated)
@@ -420,6 +431,7 @@ const OwnerProjectDetail = () => {
             type: type || data.type || 'other',
             name: data.name || '',
             category: data.category || '',
+            costType: data.costType || '',
             allocated: amt,
             actual: amt,
             paid: false,
@@ -1171,7 +1183,7 @@ const OwnerProjectDetail = () => {
                                                                     <td className="px-5 py-4">
                                                                         <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border ${cfg.color} ${cfg.bg} ${cfg.border}`}>
                                                                             <TypeIcon size={11} />
-                                                                            {cfg.label}
+                                                                            {cfg.label}{row.type === 'team' && row.costType ? ` · ${COST_TYPE_ABBR[row.costType] || row.costType}` : ''}
                                                                         </span>
                                                                     </td>
                                                                     <td className="px-5 py-4 font-bold text-sm text-zinc-900 dark:text-white">{row.name || '—'}</td>
@@ -2711,10 +2723,9 @@ const OwnerProjectDetail = () => {
                 onClose={() => setAddTeamCostOpen(false)}
                 onSubmit={(data) => {
                     handleAddExpense(
-                        { name: data.name, category: data.category, amount: data.amount },
+                        { name: data.name, category: data.category, costType: data.costType, amount: data.amount },
                         'team'
                     );
-                    setAddTeamCostOpen(false);
                 }}
             />