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.
2026-08-26 12:09:12 +07:00
parent 27dfc167d2
commit ee6c3273d9
8 changed files with 133 additions and 83 deletions
@@ -1,4 +1,4 @@
-import { Box, Paper, Stack, Text } from '@repo/ui/components';
+import { Box, FieldValue, Paper, SimpleGrid, Tabs, Text } from '@repo/ui/components';
 import { RouteMap } from '@repo/ui/map';
 import { useDetailPageContext, useEnterpriseModuleTranslationContext } from '@repo/ui/foundations';
 import type { CycleEntity } from '../../../domain/entities';
@@ -7,6 +7,7 @@ export function DetailWeekdays() {
  const { detailData } = useDetailPageContext<CycleEntity>();
  const { t } = useEnterpriseModuleTranslationContext();
  const weekdays = detailData?.weekdays ?? [];
+  const activeWeekday = weekdays[0]?.weekday;

  if (weekdays.length === 0) {
    return (
@@ -20,20 +21,38 @@ export function DetailWeekdays() {
  }

  return (
-    <Stack gap="md">
-      {weekdays.map((row) => (
-        <Paper key={row.id ?? row.weekday} withBorder shadow="sm" radius="md" p="xl">
-          <Text fw={600} mb="md">
-            {t(`weekday_${row.weekday}`)}
-          </Text>
-          <Text size="sm" mb="md">
-            {(row.destinations ?? []).map((destination, index) => `${index + 1}. ${destination.customerId}`).join('  |  ') || t('empty_route')}
-          </Text>
-          <Box>
-            <RouteMap geometry={row.routeGeometry} />
-          </Box>
-        </Paper>
-      ))}
-    </Stack>
+    <Paper withBorder shadow="sm" radius="md" p="xl">
+      <Text fw={600} mb="md">
+        {t('section_weekdays')}
+      </Text>
+      <Tabs key={String(detailData?.id ?? activeWeekday)} defaultValue={activeWeekday} variant="outline" radius="md">
+        <Tabs.List mb="md">
+          {weekdays.map((row) => (
+            <Tabs.Tab key={row.id ?? row.weekday} value={row.weekday}>
+              {t(`weekday_${row.weekday}`)}
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+        {weekdays.map((row) => (
+          <Tabs.Panel key={row.id ?? row.weekday} value={row.weekday} pt="md">
+            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md" verticalSpacing="xl" mb="md">
+              <FieldValue label={t('common:fields.startBranch')} value={row.startBranchId} />
+              <FieldValue label={t('common:fields.endBranch')} value={row.endBranchId} />
+            </SimpleGrid>
+            <FieldValue
+              label={t('common:fields.customers')}
+              value={
+                (row.destinations ?? [])
+                  .map((destination, index) => `${index + 1}. ${destination.customerId}`)
+                  .join('  |  ') || t('empty_route')
+              }
+            />
+            <Box mt="md">
+              <RouteMap geometry={row.routeGeometry} />
+            </Box>
+          </Tabs.Panel>
+        ))}
+      </Tabs>
+    </Paper>
  );
 }
@@ -1,4 +1,4 @@
-import { Box, FieldAsyncSelect, FieldSwitch, Paper, SimpleGrid, Stack, Text } from '@repo/ui/components';
+import { Box, FieldAsyncSelect, FieldSwitch, Paper, SimpleGrid, Tabs, Text } from '@repo/ui/components';
 import { useEnterpriseModuleTranslationContext, useFormPageContext } from '@repo/ui/foundations';
 import { loadBranchOptions } from '../../../../shared/load-branch-options';
 import { loadCustomerOptions } from '../../../../shared/load-customer-options';
@@ -14,69 +14,77 @@ export function FormWeekdays() {
  const weekdayRows = (formControl.watch('weekdayRows') as CycleWeekdayRow[] | undefined) ?? [];

  return (
-    <Stack gap="md">
-      <Text fw={600}>{t('section_weekdays')}</Text>
-      {WEEKDAYS.map((weekday, index) => {
-        const row = weekdayRows[index];
-        const enabled = Boolean(row?.enabled);
-        return (
-          <Paper key={weekday} withBorder shadow="sm" radius="md" p="xl">
-            <Text fw={600} mb="md">
+    <Paper withBorder shadow="sm" radius="md" p="xl">
+      <Text fw={600} mb="md">
+        {t('section_weekdays')}
+      </Text>
+      <Tabs defaultValue={WEEKDAYS[0]} variant="outline" radius="md">
+        <Tabs.List mb="md">
+          {WEEKDAYS.map((weekday) => (
+            <Tabs.Tab key={weekday} value={weekday}>
              {t(`weekday_${weekday}`)}
-            </Text>
-            <FieldSwitch
-              control={formControl.control}
-              name={`weekdayRows.${index}.enabled`}
-              label={t('weekday_enabled')}
-            />
-            {enabled ? (
-              <Box mt="md">
-                <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-                  <FieldAsyncSelect<BranchEntity>
-                    control={formControl.control}
-                    name={`weekdayRows.${index}.startBranch`}
-                    label={t('common:fields.startBranch')}
-                    valueKey="id"
-                    labelKey="name"
-                    required
-                    searchable
-                    loadOptions={loadBranchOptions}
-                    defaultOptions={(row?.startBranch ? [row.startBranch] : []) as any}
-                    renderLabel={relationLabel}
-                  />
-                  <FieldAsyncSelect<BranchEntity>
-                    control={formControl.control}
-                    name={`weekdayRows.${index}.endBranch`}
-                    label={t('common:fields.endBranch')}
-                    valueKey="id"
-                    labelKey="name"
-                    required
-                    searchable
-                    loadOptions={loadBranchOptions}
-                    defaultOptions={(row?.endBranch ? [row.endBranch] : []) as any}
-                    renderLabel={relationLabel}
-                  />
-                </SimpleGrid>
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+        {WEEKDAYS.map((weekday, index) => {
+          const row = weekdayRows[index];
+          const enabled = Boolean(row?.enabled);
+          return (
+            <Tabs.Panel key={weekday} value={weekday} pt="md">
+              <FieldSwitch
+                control={formControl.control}
+                name={`weekdayRows.${index}.enabled`}
+                label={t('weekday_enabled')}
+              />
+              {enabled ? (
                <Box mt="md">
-                  <FieldAsyncSelect<CustomerEntity>
-                    control={formControl.control}
-                    name={`weekdayRows.${index}.customers`}
-                    label={t('common:fields.customers')}
-                    valueKey="id"
-                    labelKey="name"
-                    required
-                    searchable
-                    multiple
-                    loadOptions={loadCustomerOptions}
-                    defaultOptions={(row?.customers ?? []) as any}
-                    renderLabel={relationLabel}
-                  />
+                  <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+                    <FieldAsyncSelect<BranchEntity>
+                      control={formControl.control}
+                      name={`weekdayRows.${index}.startBranch`}
+                      label={t('common:fields.startBranch')}
+                      valueKey="id"
+                      labelKey="name"
+                      required
+                      searchable
+                      loadOptions={loadBranchOptions}
+                      defaultOptions={(row?.startBranch ? [row.startBranch] : []) as any}
+                      renderLabel={relationLabel}
+                    />
+                    <FieldAsyncSelect<BranchEntity>
+                      control={formControl.control}
+                      name={`weekdayRows.${index}.endBranch`}
+                      label={t('common:fields.endBranch')}
+                      valueKey="id"
+                      labelKey="name"
+                      required
+                      searchable
+                      loadOptions={loadBranchOptions}
+                      defaultOptions={(row?.endBranch ? [row.endBranch] : []) as any}
+                      renderLabel={relationLabel}
+                    />
+                  </SimpleGrid>
+                  <Box mt="md">
+                    <FieldAsyncSelect<CustomerEntity>
+                      control={formControl.control}
+                      name={`weekdayRows.${index}.customers`}
+                      label={t('common:fields.customers')}
+                      valueKey="id"
+                      labelKey="name"
+                      required
+                      searchable
+                      multiple
+                      loadOptions={loadCustomerOptions}
+                      defaultOptions={(row?.customers ?? []) as any}
+                      renderLabel={relationLabel}
+                    />
+                  </Box>
                </Box>
-              </Box>
-            ) : null}
-          </Paper>
-        );
-      })}
-    </Stack>
+              ) : null}
+            </Tabs.Panel>
+          );
+        })}
+      </Tabs>
+    </Paper>
  );
 }