Feat/responsive work table details

README.md

@@ -442,19 +442,19 @@ End time is next day; system asks to confirm crossing day.
 
 ### Breakdown Summaries
 
-#### Daily Breakdown - Expanded View
+#### Daily Breakdown - Desktop View
 
 Detailed breakdown showing all calculation components for a single day.
 
-|                     Breakdown Summary 1                      |                     Breakdown Summary 2                      |
-| :----------------------------------------------------------: | :----------------------------------------------------------: |
-| ![Breakdown Day 1](./.github/assets/breakdown-summary-1.png) | ![Breakdown Day 2](./.github/assets/breakdown-summary-2.png) |
+|                              Collapsed Details                              |                              Expanded Details                              |
+| :-------------------------------------------------------------------------: | :------------------------------------------------------------------------: |
+| ![Desktop breakdown with collapsed details](./.github/assets/breakdown-summary-1.png) | ![Desktop breakdown with expanded details](./.github/assets/breakdown-summary-2.png) |
 
-#### Daily Breakdown - Compact View
+#### Daily Breakdown - Mobile View
 
-Condensed view for quick daily salary overview.
-
-![Breakdown Compact Summary](./.github/assets/breakdown-compact-summary.png)
+|                             Collapsed Details                             |                             Expanded Details                             |
+| :-----------------------------------------------------------------------: | :----------------------------------------------------------------------: |
+| ![Mobile breakdown with collapsed details](./.github/assets/breakdown-mobile-1.png) | ![Mobile breakdown with expanded details](./.github/assets/breakdown-mobile-2.png) |
 
 #### Monthly Summary
 

README_HE.md

@@ -360,12 +360,17 @@ Shiftly כוללת שתי תצוגות חישוב עיקריות:
   ![Cross Day Warning](./.github/assets/cross-day-warning.png)
   ![Cross Day](./.github/assets/shift-save.png)
 
-**סיכום פירוק יומי - מורחב**
-![Breakdown Day 1](./.github/assets/breakdown-summary-1.png)
-![Breakdown Day 2](./.github/assets/breakdown-summary-2.png)
+**סיכום פירוט יומי - תצוגת מחשב**
 
-**סיכום פירוק יומי - קומפקטי**
-![Breakdown Compact](./.github/assets/breakdown-compact-summary.png)
+|                                 פרטים סגורים                                  |                                 פרטים מורחבים                                  |
+| :----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: |
+| ![פירוט יומי במחשב עם פרטים סגורים](./.github/assets/breakdown-summary-1.png) | ![פירוט יומי במחשב עם פרטים מורחבים](./.github/assets/breakdown-summary-2.png) |
+
+**סיכום פירוט יומי - תצוגת מובייל**
+
+|                                פרטים סגורים                                 |                                פרטים מורחבים                                 |
+| :---------------------------------------------------------------------------: | :----------------------------------------------------------------------------: |
+| ![פירוט יומי במובייל עם פרטים סגורים](./.github/assets/breakdown-mobile-1.png) | ![פירוט יומי במובייל עם פרטים מורחבים](./.github/assets/breakdown-mobile-2.png) |
 
 **סיכום חודשי**
 ![Monthly Summary](./.github/assets/monthly-summary.png)

src/constants/fields.constant.ts

@@ -50,41 +50,6 @@ export const headersTable: TableHeader[] = [
   { label: "סך שעות", rowSpan: 2, viewMode: "both" },
   { label: "רגילות", rowSpan: 2, viewMode: "compact" },
   { label: "תוספות", rowSpan: 2, viewMode: "compact" },
-  {
-    label: "ש״נ",
-    children: ["100%", "125%", "150%"],
-    widths: [64, 64, 64],
-    viewMode: "expanded",
-  },
-  {
-    label: "שבת",
-    children: ["150%", "200%"],
-    widths: [64, 64],
-    viewMode: "expanded",
-  },
-  {
-    label: "תוספות",
-    children: ["זכות שבת", "20%", "50%"],
-    widths: [96, 64, 64],
-    viewMode: "expanded",
-  },
-  {
-    label: "היעדרות",
-    children: ["מחלה", "חופש"],
-    widths: [64, 64],
-    viewMode: "expanded",
-  },
-  {
-    label: "אש״ל",
-    rowSpan: 2,
-    viewMode: "expanded",
-  },
-  {
-    label: "כלכלה",
-    children: ["גדולה", "קטנה"],
-    widths: [64, 64],
-    viewMode: "expanded",
-  },
 ];
 
 export type HolidayKey =

src/domain/composition.ts

@@ -11,7 +11,7 @@ import { DomainConfig, PayMapPipeline } from "./types/domain.types";
 export const buildPayMapPipeline = (config: DomainConfig): PayMapPipeline => {
   const services = buildCoreServices(config);
 
-  const resolvers = buildResolvers();
+  const resolvers = buildResolvers(services.dateService);
 
   const calculators = buildCalculators();
 

src/domain/pipelines/buildResolvers.pipeline.ts

@@ -5,11 +5,12 @@ import {
   TimelinePerDiemRateResolver,
   WorkDayInfoResolver,
 } from "../resolve";
+import { DateService } from "../services/date.service";
 import { Resolvers } from "../types/domain.types";
 
-export const buildResolvers = (): Resolvers => {
+export const buildResolvers = (dateService: DateService): Resolvers => {
   const holidayResolver = new HolidayResolverService();
-  const workDayInfoResolver = new WorkDayInfoResolver();
+  const workDayInfoResolver = new WorkDayInfoResolver(dateService);
   const monthResolver = new DefaultMonthResolver();
   const perDiemRateResolver = new TimelinePerDiemRateResolver();
   const mealAllowanceRateResolver = new TimelineMealAllowanceRateResolver();

src/domain/resolve/workdayinfo.resolver.ts

@@ -1,7 +1,10 @@
 import { WorkDayType } from "@/constants";
 import { DayInfoResolver, WorkDayInfo } from "@/domain";
+import { DateService } from "@/domain/services/date.service";
 
 export class WorkDayInfoResolver implements DayInfoResolver {
+  constructor(private readonly dateService: DateService) {}
+
   isSpecialFullDay(day: WorkDayInfo): boolean {
     return day.meta.typeDay === WorkDayType.SpecialFull;
   }
@@ -14,10 +17,8 @@ export class WorkDayInfoResolver implements DayInfoResolver {
     return day.meta.crossDayContinuation === true;
   }
 
-  formatHebrewWorkDay(day: WorkDayInfo): string {
-    const dayNumber = new Date(day.meta.date).toLocaleDateString("he-IL", {
-      day: "2-digit",
-    });
-    return `${day.hebrewDay}-${dayNumber}`;
+  formatHebrewWorkDay(day: WorkDayInfo, weekdayLabel: string): string {
+    const dayNumber = this.dateService.getDayOfMonth(day.meta.date);
+    return `${weekdayLabel}-${dayNumber}`;
   }
 }

src/domain/services/date.service.ts

@@ -43,6 +43,14 @@ export class DateService {
     return format(date, "yyyy-MM-dd");
   }
 
+  getWeekday(date: string): number {
+    return this.createDateWithTime(date).getDay();
+  }
+
+  getDayOfMonth(date: string): string {
+    return format(this.createDateWithTime(date), "dd");
+  }
+
   createDateWithTime(
     day: string,
     hours: number = 0,

src/domain/types/types.ts

@@ -1,6 +1,6 @@
 import { WorkDayType, HolidayKey } from "@/constants";
 
-export type TableViewMode = "compact" | "expanded" | "both";
+export type TableViewMode = "compact" | "both";
 
 import {
   DailyPerDiemInfo,
@@ -79,7 +79,7 @@ export interface DayInfoResolver {
   isSpecialFullDay(day: WorkDayInfo): boolean;
   isPartialHolidayStart(day: WorkDayInfo): boolean;
   hasCrossDayContinuation(day: WorkDayInfo): boolean;
-  formatHebrewWorkDay(day: WorkDayInfo): string;
+  formatHebrewWorkDay(day: WorkDayInfo, weekdayLabel: string): string;
 }
 
 export enum Mode {

src/features/work-table/components/DayDetails.tsx

@@ -11,28 +11,15 @@ import { useTranslation } from "react-i18next";
 
 import { PayBreakdownViewModel } from "@/domain";
 import { formatValue } from "@/utils";
+import { breakdownToDetailGroups, DetailGroupData } from "../mappers";
 
 type DayDetailsProps = {
   breakdown: PayBreakdownViewModel;
   id: string;
   showAbsence?: boolean;
 };
 
-type DetailItem = {
-  label: string;
-  value: number;
-};
-
-type DetailSection = {
-  items: DetailItem[];
-  label: string;
-};
-
-type DetailGroupProps = {
-  items?: DetailItem[];
-  sections?: DetailSection[];
-  title?: string;
-};
+type DetailGroupProps = Omit<DetailGroupData, "key">;
 
 const DetailGroup = ({ items = [], sections, title }: DetailGroupProps) => {
   const columns = sections
@@ -122,71 +109,7 @@ export const DayDetails = ({
 }: DayDetailsProps) => {
   const { t } = useTranslation("work-table");
 
-  const groups: DetailGroupProps[] = [
-    {
-      title: t("headers.overtime"),
-      items: [
-        { label: "100%", value: breakdown.regular.hours100.hours },
-        { label: "125%", value: breakdown.regular.hours125.hours },
-        { label: "150%", value: breakdown.regular.hours150.hours },
-      ],
-    },
-    {
-      title: t("headers.shabbat"),
-      items: [
-        { label: "150%", value: breakdown.special.shabbat150.hours },
-        { label: "200%", value: breakdown.special.shabbat200.hours },
-        {
-          label: t("headers.shabbat_credit"),
-          value: breakdown.appliedShabbatCredit.hours,
-        },
-      ],
-    },
-    {
-      title: t("headers.extras"),
-      items: [
-        { label: "20%", value: breakdown.extra.hours20.hours },
-        { label: "50%", value: breakdown.extra.hours50.hours },
-      ],
-    },
-    ...(showAbsence
-      ? [
-          {
-            title: t("headers.absence"),
-            items: [
-              {
-                label: t("headers.sick"),
-                value: breakdown.hours100Sick.hours,
-              },
-              {
-                label: t("headers.vacation"),
-                value: breakdown.hours100Vacation.hours,
-              },
-            ],
-          },
-        ]
-      : []),
-    {
-      sections: [
-        {
-          label: t("headers.meal_allowance"),
-          items: [
-            {
-              label: t("day_details.points"),
-              value: breakdown.perDiemPoints,
-            },
-          ],
-        },
-        {
-          label: t("headers.meal_per_diem"),
-          items: [
-            { label: t("headers.large"), value: breakdown.largePoints },
-            { label: t("headers.small"), value: breakdown.smallPoints },
-          ],
-        },
-      ],
-    },
-  ];
+  const groups = breakdownToDetailGroups(breakdown, t, showAbsence);
   const primaryGroups = groups.slice(0, 2);
   const secondaryGroups = groups.slice(2);
 
@@ -216,13 +139,8 @@ export const DayDetails = ({
           },
         }}
       >
-        {primaryGroups.map((group) => (
-          <DetailGroup
-            key={
-              group.title ?? group.sections?.map((section) => section.label).join("-")
-            }
-            {...group}
-          />
+        {primaryGroups.map(({ key, ...group }) => (
+          <DetailGroup key={key} {...group} />
         ))}
       </Box>
       <Box
@@ -235,13 +153,8 @@ export const DayDetails = ({
           },
         }}
       >
-        {secondaryGroups.map((group) => (
-          <DetailGroup
-            key={
-              group.title ?? group.sections?.map((section) => section.label).join("-")
-            }
-            {...group}
-          />
+        {secondaryGroups.map(({ key, ...group }) => (
+          <DetailGroup key={key} {...group} />
         ))}
       </Box>
     </Box>