Complete CA and CB column styling with borders and backgrounds

- Add left borders to CB column (CB2-CB22 and CB24-CB27, excluding CB23)
- Apply matching background colors to CA column (#FCD5B4 for rows 7-9, #D9D9D9 alternating)
- Add dotted top borders to CA column for employee rows (CA8-CA27 excluding CA23/24)
- Ensure solid top borders on CA23 and CA24 for section separators
- Add top borders to CA28 for complete section structure
- Maintain visual consistency between main table and additional columns

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/timeshift-spreadsheet.tsx

@@ -109,13 +109,13 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
       "Robert Štefan"
     ]
     
-    // Add one more column to the right
+    // Add two more columns to the right (CA is formatted, CB will be unformatted)
-    titleRow.push("")
+    titleRow.push("", "")
-    dayNameRow.push("")
+    dayNameRow.push("", "")
-    yearRow.push("")
+    yearRow.push("", "")
-    monthRow.push("")
+    monthRow.push("", "")
-    dateRow.push("")
+    dateRow.push("", "")
-    shiftRow.push("")
+    shiftRow.push("", "")
     
     const employeeRows = employees.map(name => {
       const row = [name]
@@ -304,28 +304,53 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
             styles[`${colLetter}1`] = "height: 97px;"
           }
           
-          // Make day names row (row 2) taller and add top and left borders from column B onwards (except last two columns)
+          // Make day names row (row 2) taller and add top and left borders from column B onwards (except last three columns)
           for (let col = 0; col < (data[0]?.length || 0); col++) {
             const colLetter = getExcelColumnName(col)
             if (col === 0) {
               // First column (A) - just height
               styles[`${colLetter}2`] = "height: 50px;"
-            } else if (colLetter === 'BZ' || colLetter === 'CA') {
+            } else if (colLetter === 'BZ' || colLetter === 'CA' || colLetter === 'CB') {
-              // Last two columns (BZ, CA) - height only, no borders
+              // Last three columns (BZ, CA, CB) - height only, no borders
               styles[`${colLetter}2`] = "height: 50px;"
             } else {
-              // All other columns (B onwards except BZ, CA) - height + top and left borders
+              // All other columns (B onwards except BZ, CA, CB) - height + top and left borders
               styles[`${colLetter}2`] = "height: 50px; border-top: 1px solid #000000; border-left: 1px solid #000000;"
             }
           }
           
+          // Add top border to year row (row 3) from B3 to end of table (excluding A3 and last columns)
+          for (let col = 1; col < (data[0]?.length || 0) - 2; col++) { // Start from column B (index 1), exclude CA and CB
+            const colLetter = getExcelColumnName(col)
+            const existingStyle = styles[`${colLetter}3`] || ""
+            styles[`${colLetter}3`] = existingStyle + " border-top: 1px solid #000000;"
+          }
+          
+          // Add top border to shift row (row 6) from A6 to end of table (excluding last columns)
+          for (let col = 0; col < (data[0]?.length || 0) - 2; col++) { // Exclude CA and CB
+            const colLetter = getExcelColumnName(col)
+            const existingStyle = styles[`${colLetter}6`] || ""
+            styles[`${colLetter}6`] = existingStyle + " border-top: 1px solid #000000;"
+          }
+          
+          // Add left borders to columns B onwards for rows 3, 4, 5 (year, month, day)
+          for (let row = 3; row <= 5; row++) {
+            for (let col = 1; col < (data[0]?.length || 0) - 2; col++) { // Start from column B (index 1), exclude CA and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " border-left: 1px solid #000000;"
+            }
+          }
+          
           // Style header rows
           for (let col = 1; col < (data[0]?.length || 0); col++) {
             const colLetter = getExcelColumnName(col)
+            // Preserve existing styles (including top border) and add background colors
+            const existingStyle = styles[`${colLetter}6`] || ""
             if (col % 2 === 1) { // Day shifts (odd columns after first)
-              styles[`${colLetter}6`] = "background-color: #ffff00; font-weight: normal;" // Yellow for day, not bold
+              styles[`${colLetter}6`] = existingStyle + " background-color: #ffff00; font-weight: normal;" // Yellow for day, not bold
             } else { // Night shifts (even columns after first)
-              styles[`${colLetter}6`] = "background-color: #00b0f0; font-weight: normal;" // Blue for night, not bold
+              styles[`${colLetter}6`] = existingStyle + " background-color: #00b0f0; font-weight: normal;" // Blue for night, not bold
             }
           }
           
@@ -336,23 +361,30 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
               const colLetter = getExcelColumnName(col)
               const nextColLetter = getExcelColumnName(col + 1)
               
-              // Weekend day name row (row 2) - merged cells with conditional top border
+              // Weekend day name row (row 2) - merged cells with conditional borders
-              const hasBorder1 = colLetter !== 'BZ' && colLetter !== 'CA' ? " border-top: 1px solid #000000;" : ""
+              const hasBorders1 = colLetter !== 'BZ' && colLetter !== 'CA' && colLetter !== 'CB' ? " border-top: 1px solid #000000; border-left: 1px solid #000000;" : ""
-              const hasBorder2 = nextColLetter !== 'BZ' && nextColLetter !== 'CA' ? " border-top: 1px solid #000000;" : ""
+              const hasBorders2 = nextColLetter !== 'BZ' && nextColLetter !== 'CA' && nextColLetter !== 'CB' ? " border-top: 1px solid #000000; border-left: 1px solid #000000;" : ""
-              styles[`${colLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorder1}` // Weekend day name with conditional border
+              styles[`${colLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorders1}` // Weekend day name with conditional borders
-              styles[`${nextColLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorder2}`
+              styles[`${nextColLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorders2}`
               
               // Weekend date columns (rows 3, 4, 5 - year, month, day)
               for (let row = 3; row <= 5; row++) {
-                styles[`${colLetter}${row}`] = "background-color: #ffd966;" // Weekend date values
+                // Preserve existing styles (like borders) and add weekend background
-                styles[`${nextColLetter}${row}`] = "background-color: #ffd966;" // Weekend date values
+                const existingStyle1 = styles[`${colLetter}${row}`] || ""
+                const existingStyle2 = styles[`${nextColLetter}${row}`] || ""
+                styles[`${colLetter}${row}`] = existingStyle1 + " background-color: #ffd966;" // Weekend date values
+                styles[`${nextColLetter}${row}`] = existingStyle2 + " background-color: #ffd966;" // Weekend date values
               }
             }
           }
           
-          // Remove formatting specifically from BZ6 and CA6 cells
+          // Remove formatting specifically from BZ6, CA6, and CB6 cells
           styles["BZ6"] = ""  // Override any formatting for BZ6
           styles["CA6"] = ""  // Override any formatting for CA6
+          styles["CB6"] = ""  // Override any formatting for CB6
+          
+          // Remove top border from BZ3 cell
+          styles["BZ3"] = (styles["BZ3"] || "").replace(" border-top: 1px solid #000000;", "").replace("border-top: 1px solid #000000;", "")
           
           // Add left border to BZ column from row 2 to the last employee row
           const totalRows = data.length
@@ -361,8 +393,136 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
             styles[`BZ${row}`] = (styles[`BZ${row}`] || "") + " border-left: 1px solid #000000;"
           }
           
+          // Add dotted top borders to employee rows (starting from row 8) up to BY column
+          for (let row = 8; row <= totalRows; row++) {
+            for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " border-top: 1px dotted #000000;"
+            }
+          }
+          
           // Make "Pohotovost IT" header bold (employee index 16, so row 23)
           styles["A23"] = "font-weight: bold;"  // "Pohotovost IT"
+          
+          // Set background color for rows 7, 8, and 9 (excluding BZ, CA, and CB columns)
+          for (let row = 7; row <= 9; row++) {
+            for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " background-color: #FCD5B4;"
+            }
+          }
+          
+          // Add left borders to first column of each day (B, D, F, H, etc.) from row 6 to end of table
+          for (let row = 6; row <= totalRows; row++) {
+            for (let col = 1; col < (data[0]?.length || 0) - 3; col += 2) { // Start from B (index 1), step by 2, exclude BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " border-left: 1px solid #000000;"
+            }
+          }
+          
+          // Add top border to row 28 from A to BY
+          for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+            const colLetter = getExcelColumnName(col)
+            const existingStyle = styles[`${colLetter}28`] || ""
+            styles[`${colLetter}28`] = existingStyle + " border-top: 1px solid #000000;"
+          }
+          
+          // Add alternating row background colors starting from row 10 (every odd row: 10,12,14,16,18,20,22,24,26)
+          for (let row = 10; row <= totalRows; row += 2) { // Start from 10, increment by 2
+            for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " background-color: #D9D9D9;"
+            }
+          }
+          
+          // Add top borders to rows 23 and 24 from A to BY
+          for (let row of [23, 24]) {
+            for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
+              const colLetter = getExcelColumnName(col)
+              const existingStyle = styles[`${colLetter}${row}`] || ""
+              styles[`${colLetter}${row}`] = existingStyle + " border-top: 1px solid #000000;"
+            }
+          }
+          
+          // Remove left borders from row 23 (day column borders)
+          for (let col = 1; col < (data[0]?.length || 0) - 3; col += 2) { // Day columns: B, D, F, H, etc., exclude BZ, CA, CB
+            const colLetter = getExcelColumnName(col)
+            const existingStyle = styles[`${colLetter}23`] || ""
+            // Remove left border by replacing it with empty string
+            styles[`${colLetter}23`] = existingStyle.replace(" border-left: 1px solid #000000;", "").replace("border-left: 1px solid #000000;", "")
+          }
+          
+          // Remove left border from BZ23
+          const existingBZ23Style = styles["BZ23"] || ""
+          styles["BZ23"] = existingBZ23Style.replace(" border-left: 1px solid #000000;", "").replace("border-left: 1px solid #000000;", "")
+          
+          // Add top and left borders to merged cell CA2 (CA2:CA6)
+          const existingCA2Style = styles["CA2"] || ""
+          styles["CA2"] = existingCA2Style + " border-top: 1px solid #000000; border-left: 1px solid #000000;"
+          
+          // Add left border to CA column from row 7 to 27 (excluding row 23)
+          for (let row = 7; row <= 27; row++) {
+            if (row !== 23) { // Skip row 23 where "Pohotovost IT" is located
+              const existingCAStyle = styles[`CA${row}`] || ""
+              styles[`CA${row}`] = existingCAStyle + " border-left: 1px solid #000000;"
+            }
+          }
+          
+          // Add top border to CA23
+          const existingCA23Style = styles["CA23"] || ""
+          styles["CA23"] = existingCA23Style + " border-top: 1px solid #000000;"
+          
+          // Add top border to CA24
+          const existingCA24Style = styles["CA24"] || ""
+          styles["CA24"] = existingCA24Style + " border-top: 1px solid #000000;"
+          
+          // Add top border to CA28
+          const existingCA28Style = styles["CA28"] || ""
+          styles["CA28"] = existingCA28Style + " border-top: 1px solid #000000;"
+          
+          // Add left border to CB column (CB2-CB22 and CB24-CB27, excluding CB23)
+          for (let row = 2; row <= 27; row++) {
+            if (row !== 23) { // Skip row 23 where "Pohotovost IT" is located
+              const existingCBStyle = styles[`CB${row}`] || ""
+              styles[`CB${row}`] = existingCBStyle + " border-left: 1px solid #000000;"
+            }
+          }
+          
+          // Apply same background colors to CA column as applied to main table rows
+          // Background color for rows 7, 8, and 9 (same as main table)
+          for (let row = 7; row <= 9; row++) {
+            const existingCAStyle = styles[`CA${row}`] || ""
+            styles[`CA${row}`] = existingCAStyle + " background-color: #FCD5B4;"
+          }
+          
+          // Alternating row background colors for CA column starting from row 10 (same as main table)
+          for (let row = 10; row <= totalRows; row += 2) { // Start from 10, increment by 2
+            if (row <= 27) { // Only apply to rows up to 27
+              const existingCAStyle = styles[`CA${row}`] || ""
+              styles[`CA${row}`] = existingCAStyle + " background-color: #D9D9D9;"
+            }
+          }
+          
+          // Add dotted top borders to CA column for employee rows (starting from row 8, same as main table)
+          for (let row = 8; row <= 27; row++) {
+            // Skip rows 23 and 24 as they will get solid borders instead
+            if (row !== 23 && row !== 24) {
+              const existingCAStyle = styles[`CA${row}`] || ""
+              styles[`CA${row}`] = existingCAStyle + " border-top: 1px dotted #000000;"
+            }
+          }
+          
+          // Ensure solid top borders on CA23 and CA24 (override any previous styling)
+          const existingCA23Style2 = styles["CA23"] || ""
+          styles["CA23"] = existingCA23Style2.replace(" border-top: 1px dotted #000000;", "") + " border-top: 1px solid #000000;"
+          
+          const existingCA24Style2 = styles["CA24"] || ""
+          styles["CA24"] = existingCA24Style2.replace(" border-top: 1px dotted #000000;", "") + " border-top: 1px solid #000000;"
+          
         }
 
         // Validate configuration before initializing
@@ -393,9 +553,7 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
           allowInsertColumn: false,
           allowDeleteRow: true,
           allowDeleteColumn: false,
-          contextMenu: function(obj: any, x: number, y: number) {
+          contextMenu: false,
-            return [] // Empty context menu to avoid issues
-          },
           tableOverflow: true,
           tableWidth: "100%",
           tableHeight: "500px",
@@ -684,6 +842,15 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
             
             console.log(`Successfully applied ${mergeCount} cell merges`)
             
+            // Merge CA2 to CA6 (5 rows, 1 column)
+            try {
+              console.log("Attempting to merge CA2:CA6")
+              instance.setMerge("CA2", 1, 5) // 1 column, 5 rows (CA2, CA3, CA4, CA5, CA6)
+              console.log("Successfully merged CA2:CA6")
+            } catch (error) {
+              console.warn("Failed to merge CA2:CA6:", error.message)
+            }
+            
             // Clear merging flag after completion
             isMergingRef.current = false
             

logs/auto-commit.log

@@ -256,3 +256,49 @@
 2025-07-31 04:24:51 +02:00: ✅ Restore point created
 2025-07-31 04:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
 2025-07-31 04:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 04:56:08 +02:00: ✅ Restore point created
+2025-07-31 05:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 05:26:11 +02:00: ✅ Restore point created
+2025-07-31 05:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 05:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 05:56:09 +02:00: ✅ Restore point created
+2025-07-31 06:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 06:26:08 +02:00: ✅ Restore point created
+2025-07-31 06:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 06:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 06:56:11 +02:00: ✅ Restore point created
+2025-07-31 07:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 07:26:12 +02:00: ✅ Restore point created
+2025-07-31 07:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 07:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 07:56:09 +02:00: ✅ Restore point created
+2025-07-31 08:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 08:26:09 +02:00: ✅ Restore point created
+2025-07-31 08:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 08:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 08:55:17 +02:00: ✅ Restore point created
+2025-07-31 09:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 09:26:08 +02:00: ✅ Restore point created
+2025-07-31 09:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 09:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 09:56:11 +02:00: ✅ Restore point created
+2025-07-31 10:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 10:26:13 +02:00: ✅ Restore point created
+2025-07-31 10:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 10:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 10:56:08 +02:00: ✅ Restore point created
+2025-07-31 11:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 11:26:08 +02:00: ✅ Restore point created
+2025-07-31 11:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 11:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 11:56:08 +02:00: ✅ Restore point created
+2025-07-31 12:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 12:26:08 +02:00: ✅ Restore point created
+2025-07-31 12:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 12:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 12:56:13 +02:00: ✅ Restore point created
+2025-07-31 13:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 13:24:40 +02:00: ✅ Restore point created
+2025-07-31 13:42:49 +02:00: 
+2025-07-31 13:42:49 +02:00: 🛑 Stopping auto-commit watcher...
+2025-07-31 13:42:49 +02:00: 💾 Saving final changes...

logs/auto-commit.out.log

@@ -252,3 +252,49 @@
 2025-07-31 04:24:51 +02:00: ✅ Restore point created
 2025-07-31 04:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
 2025-07-31 04:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 04:56:08 +02:00: ✅ Restore point created
+2025-07-31 05:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 05:26:11 +02:00: ✅ Restore point created
+2025-07-31 05:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 05:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 05:56:09 +02:00: ✅ Restore point created
+2025-07-31 06:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 06:26:08 +02:00: ✅ Restore point created
+2025-07-31 06:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 06:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 06:56:11 +02:00: ✅ Restore point created
+2025-07-31 07:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 07:26:12 +02:00: ✅ Restore point created
+2025-07-31 07:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 07:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 07:56:09 +02:00: ✅ Restore point created
+2025-07-31 08:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 08:26:09 +02:00: ✅ Restore point created
+2025-07-31 08:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 08:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 08:55:17 +02:00: ✅ Restore point created
+2025-07-31 09:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 09:26:08 +02:00: ✅ Restore point created
+2025-07-31 09:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 09:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 09:56:11 +02:00: ✅ Restore point created
+2025-07-31 10:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 10:26:13 +02:00: ✅ Restore point created
+2025-07-31 10:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 10:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 10:56:08 +02:00: ✅ Restore point created
+2025-07-31 11:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 11:26:08 +02:00: ✅ Restore point created
+2025-07-31 11:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 11:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 11:56:08 +02:00: ✅ Restore point created
+2025-07-31 12:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 12:26:08 +02:00: ✅ Restore point created
+2025-07-31 12:54:37 +02:00: 🔄 Hourly reset: Commit counter reset to 0
+2025-07-31 12:54:37 +02:00: 🔖 Creating restore point...
+2025-07-31 12:56:13 +02:00: ✅ Restore point created
+2025-07-31 13:24:37 +02:00: 🔖 Creating restore point...
+2025-07-31 13:24:40 +02:00: ✅ Restore point created
+2025-07-31 13:42:49 +02:00: 
+2025-07-31 13:42:49 +02:00: 🛑 Stopping auto-commit watcher...
+2025-07-31 13:42:49 +02:00: 💾 Saving final changes...