feat: enhance weekdays management with tabbed interface and improved layout

- Refactored `DetailWeekdays` and `FormWeekdays` components to utilize a tabbed interface for better organization of weekday-related information.
- Introduced `FieldValue` components for displaying start and end branches, and customer details within each tab.
- Added a new CSS file for managing z-index stacking context to ensure Leaflet maps render correctly beneath modals.
- Updated `LocationMap` and `RouteMap` components to include the new CSS for proper layering.
- Enhanced unit tests for `LocationMap` to verify the correct stacking context.

These changes improve the user experience by providing a more structured and visually appealing way to manage weekdays and their associated data.

packages/ui/src/components/map/leaflet-stacking.css

@@ -0,0 +1,12 @@
+/* Leaflet panes/controls use z-index 400–1000 and would cover Mantine modals (200) unless contained. */
+.tg-map-viewport {
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.leaflet-container {
+  isolation: isolate;
+  z-index: 0;
+}

packages/ui/src/components/map/location-map.test.tsx

@@ -112,4 +112,9 @@ describe('LocationMap', () => {
     expect(setView).not.toHaveBeenCalled();
     expect(panTo).not.toHaveBeenCalled();
   });
+
+  it('keeps the map in a local stacking context so Leaflet panes stay below modals', () => {
+    renderMap(<LocationMap latitude={-6.2} longitude={106.8} />);
+    expect(screen.getByTestId('osm-map').closest('.tg-map-viewport')).not.toBeNull();
+  });
 });

packages/ui/src/components/map/location-map.tsx

@@ -10,6 +10,7 @@ import {
   toLocationLatLng,
 } from './location-point';
 import 'leaflet/dist/leaflet.css';
+import './leaflet-stacking.css';
 
 export interface LocationMapProps {
   latitude?: unknown;
@@ -119,7 +120,8 @@ export function LocationMap({
         h={height}
         bdrs="md"
         bd="1px solid var(--mantine-color-default-border)"
-        style={{ overflow: 'hidden', cursor: interactive ? 'crosshair' : undefined }}
+        className="tg-map-viewport"
+        style={{ cursor: interactive ? 'crosshair' : undefined }}
       >
         <MapContainer center={center} zoom={zoom} style={{ height: '100%', width: '100%' }} scrollWheelZoom={interactive}>
           <TileLayer attribution={attribution} url={tileUrl} />

packages/ui/src/components/map/route-map.tsx

@@ -5,6 +5,7 @@ import type { RouteGeometry } from './route-geometry';
 import { toLeafletLatLngs } from './route-geometry';
 import { OSM_ATTRIBUTION, OSM_TILE_URL } from './osm';
 import 'leaflet/dist/leaflet.css';
+import './leaflet-stacking.css';
 
 function FitRouteBounds({ positions }: { positions: Array<[number, number]> }) {
   const map = useMap();
@@ -38,7 +39,7 @@ export function RouteMap({ geometry, height = 280 }: RouteMapProps) {
   }
 
   return (
-    <Box h={height} bdrs="md" style={{ overflow: 'hidden' }}>
+    <Box h={height} bdrs="md" className="tg-map-viewport">
       <MapContainer center={positions[0]} zoom={12} style={{ height: '100%', width: '100%' }} scrollWheelZoom>
         <TileLayer attribution={OSM_ATTRIBUTION} url={OSM_TILE_URL} />
         <Polyline positions={positions} pathOptions={{ color: 'var(--mantine-color-blue-6)', weight: 4 }} />

packages/ui/src/provider/theme-provider.tsx

@@ -52,6 +52,9 @@ export function ThemeProvider({ children, colorScheme = 'light', density = 'comp
     fontFamilyMonospace: typography.fontFamilyMonospace,
     headings: typography.headings,
     radius: radius,
+    components: {
+      Drawer: { defaultProps: { zIndex: 1100 } },
+    },
   });
 
   const selectedDensity = densityMap[density];
@@ -59,7 +62,7 @@ export function ThemeProvider({ children, colorScheme = 'light', density = 'comp
 
   return (
     <MantineProvider theme={mergedTheme} forceColorScheme={colorScheme} defaultColorScheme={colorScheme}>
-      <ModalsProvider>
+      <ModalsProvider modalProps={{ zIndex: 1100 }}>
         {children}
         <Notifications position="top-right" autoClose={4000} zIndex={1000} />
       </ModalsProvider>

packages/ui/src/theme/tokens/density.ts

@@ -36,7 +36,7 @@ export const standardDensity: MantineThemeOverride = {
     Pagination: { defaultProps: { size: 'md' } },
     Table: { defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'md' } },
     Card: { defaultProps: { padding: 'md' } },
-    Modal: { defaultProps: { padding: 'md' } },
+    Modal: { defaultProps: { padding: 'md', zIndex: 1100 } },
   },
 };
 
@@ -99,7 +99,7 @@ export const compactDensity: MantineThemeOverride = {
       },
     },
     Card: { defaultProps: { padding: 'sm' } }, // Card padding shrinks
-    Modal: { defaultProps: { padding: 'sm' } }, // Modal padding shrinks
+    Modal: { defaultProps: { padding: 'sm', zIndex: 1100 } }, // Modal padding shrinks; above Leaflet panes (1000)
 
     // 5. Force 13px ('sm') text inside 'sm' physical inputs
     Input: {