Merge pull request #16 from flojud/Hotfix-Release-branch

Hotfix release branch

public/manifest.json

@@ -8,23 +8,23 @@
   "background_color": "#ffffff",
   "icons": [
     {
-      "src": "/icon-192x192.png",
+      "src": "/images/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
     },
     {
-      "src": "/icon-256x256.png",
+      "src": "/images/icon-256x256.png",
       "sizes": "256x256",
       "type": "image/png"
     },
     {
-      "src": "/icon-384x384.png",
+      "src": "/images/icon-384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     },
     {
-      "src": "/icon-512x512.png",
+      "src": "/images/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

src/components/UserHomePage.tsx

@@ -26,18 +26,31 @@ const UserHomePage = () => {
   const [balanceWorkMinutes, setBalanceWorkMinutes] = useState<number>(0);
   const [balanceAvailableMinutes, setBalanceAvailableMinutes] = useState<number>(0);
 
-  const from = firstTimeDay;
+  const [myStartfrom, setMyStartfrom] = useState<Dayjs | null>(null);
   const to = DayjsUtils.endOfCurrentYear();
-  const today = DayjsUtils.today();
+  const today = DayjsUtils.todayStart();
   const firstDayOfMonth = DayjsUtils.firstDayOfCurrentMonth();
+  const startOfCurrentYear = DayjsUtils.startOfCurrentYear();
 
+  /*
+    Set the first day of the year as the start date
+  */
+  useEffect(() => {
+    if(firstTimeDay){
+      if(firstTimeDay.isAfter(startOfCurrentYear)){
+        setMyStartfrom(firstTimeDay);
+      }else{
+        setMyStartfrom(startOfCurrentYear);
+      }
+    }
+  }, [firstTimeDay]);
   /*
     Calculate all the data for the user's dashboard.
   */
   useEffect(() => {
-    if (profile) {
+    if (profile && myStartfrom) {
       // calculate left Holidays for this year
-      const resHolidays = AbsenceUtils.getHolidaysByTimestampRange(absences, from.unix(), to.unix());
+      const resHolidays = AbsenceUtils.getHolidaysByTimestampRange(absences, myStartfrom.unix(), to.unix());
 
       if (resHolidays) {
         setNoHolidays(profile.holidays - resHolidays.length);
@@ -46,29 +59,29 @@ const UserHomePage = () => {
       }
 
       // get all absences
-      const resAbsences = AbsenceUtils.getAbsencesByTimestampRange(absences, from.unix(), to.unix());
+      const resAbsences = AbsenceUtils.getAbsencesByTimestampRange(absences, myStartfrom.unix(), to.unix());
       if (resAbsences) setNoAbsences(resAbsences.length);
 
       // absences in this month
       const resAbsencesThisMonth = AbsenceUtils.getAbsencesByTimestampRange(absences, firstDayOfMonth.unix(), today.unix());
       if (resAbsencesThisMonth) setNoAbsencesInMonth(resAbsencesThisMonth.length);
 
       // calculate sickness Days for this year
-      const resSickDays = AbsenceUtils.getSickDaysByTimestampRange(sickDays, from.unix(), to.unix());
+      const resSickDays = AbsenceUtils.getSickDaysByTimestampRange(sickDays, myStartfrom.unix(), to.unix());
       setNoSickDays(resSickDays.length);
     }
-  }, [profile]);
+  }, [profile, myStartfrom]);
 
   /*
     Calculate Saldo Work Time
   */
   useEffect(() => {
     // calculate Saldo Work Time
-    if (sumMonth.workingTime && profile && from) {
+    if (sumMonth.workingTime && profile) {
       const days: Dayjs[] = [];
-      const d = Math.ceil(today.diff(from, 'day', true));
+      const d = Math.ceil(today.diff(firstDayOfMonth, 'day', true));
       for (let i = 0; i < d; i++) {
-        const nextDay = from.add(i, 'day').locale({ ...locale });
+        const nextDay = firstDayOfMonth.add(i, 'day').locale({ ...locale });
         if (HolidayUtils.checkIsWorkday(profile.workingdays, nextDay, profile.state)) {
           days.push(nextDay);
         }
@@ -77,7 +90,7 @@ const UserHomePage = () => {
       const targetWorkingMinutes = targetWorkingDays * profile.workingtime;
       setBalanceWorkMinutes(sumMonth.workingTime - targetWorkingMinutes);
     }
-  }, [sumMonth.workingTime]);
+  }, [sumMonth.workingTime, myStartfrom]);
 
   /*
     Calculate Available Time
@@ -97,7 +110,7 @@ const UserHomePage = () => {
       const targetAvailableMinutes = targetAvailableDays * profile.availabletime;
       setBalanceAvailableMinutes(sumMonth.availableTime - targetAvailableMinutes);
     }
-  }, [sumMonth.availableTime]);
+  }, [sumMonth.availableTime, myStartfrom]);
 
   return (
     <Stack direction="column" alignItems="center" spacing={0}>
@@ -120,7 +133,7 @@ const UserHomePage = () => {
         <UserHomePageInfoCard
           title="Arbeitszeit am Kind Saldo"
           value={`${TimeUtils.negativeMinutesToTime(balanceWorkMinutes)} h`}
-          subtitle="Seit Start der Erfassung"
+          subtitle="Im aktuellen Monat"
           SvgIcon={AccessTimeOutlinedIcon}
         />
         <UserHomePageInfoCard
@@ -131,6 +144,10 @@ const UserHomePage = () => {
         />
         <UserHomePageInfoCard title="Krankheitstage" value={`${noSickDays} Tg.`} subtitle="In diesem Jahr" SvgIcon={SickOutlinedIcon} />
       </Grid>
+      <Typography variant="body2" align="center" gutterBottom>
+          Deine ersten Daten sind vom: {firstTimeDay ? firstTimeDay.toISOString() : 'Loading...'}
+
+      </Typography>
     </Stack>
   );
 };

src/components/common/DateRangePicker.tsx

@@ -12,7 +12,7 @@ interface DateRangePickerProps {
 }
 const DateRangePicker: FC<DateRangePickerProps> = ({ onChange }: DateRangePickerProps) => {
   const [from, setFrom] = React.useState<Dayjs | null>(DayjsUtils.firstDayOfWeek());
-  const [to, setTo] = React.useState<Dayjs | null>(DayjsUtils.today());
+  const [to, setTo] = React.useState<Dayjs | null>(DayjsUtils.todayEnd());
   const [days, setDays] = React.useState<Dayjs[]>([]);
 
   /*

src/components/common/MonthPicker.tsx

@@ -1,19 +1,20 @@
 import { Box } from '@mui/material';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import * as dayjs from 'dayjs';
 import { Dayjs } from 'dayjs';
 import 'dayjs/locale/de';
 import locale from 'dayjs/locale/de';
 import React, { useEffect } from 'react';
 import { useAppSelector } from '../../store/hooks';
+import DayjsUtils from '../../utils/DayjsUtils';
 
 interface MonthPickerProps {
   onChange: (dates: Dayjs[]) => void;
 }
 const MonthPicker = ({ onChange }: MonthPickerProps) => {
-  const startOfMonth = dayjs.default().startOf('month');
-  const endOfMonth = dayjs.default().endOf('month');
+  const startOfYear = DayjsUtils.startOfCurrentYear();
+  const startOfMonth = DayjsUtils.firstDayOfCurrentMonth();
+  const endOfMonth = DayjsUtils.endOfCurrentMonth();
   const firstTimeDay = useAppSelector((state) => state.times.firstTimeDay);
   const [pickedMonth, setPickedMonth] = React.useState<Dayjs | null>();
   const [days, setDays] = React.useState<Dayjs[]>([]);
@@ -65,7 +66,7 @@ const MonthPicker = ({ onChange }: MonthPickerProps) => {
             sx={{ width: '100%' }}
             views={['year', 'month']}
             label="Monat"
-            minDate={firstTimeDay}
+            minDate={firstTimeDay ? firstTimeDay : startOfYear}
             maxDate={endOfMonth}
             value={pickedMonth}
             onChange={(value) => {

src/components/time/TimeHistoryCard.tsx

@@ -59,7 +59,7 @@ const TimeHistoryCard = ({ day }: TimeHistoryCardProps) => {
   const [absenteeism, setAbsenteeism] = useState<boolean>(false);
   const [cardBgColor, setCardBgColor] = useState<string>('');
   useEffect(() => {
-    if (workday == true && day.isBefore(DayjsUtils.today(), 'day') && workingTime == null && absence == null) {
+    if (workday == true && day.isBefore(DayjsUtils.todayEnd(), 'day') && workingTime == null && absence == null) {
       setAbsenteeism(true);
       setCardBgColor('primary.main');
     }

src/interfaces/StoreTypes.ts

@@ -8,7 +8,7 @@ export interface ITimesContext {
   sumYear: ITimeDistribution;
   sumMonth: ITimeDistribution;
   sumLastMonth: ITimeDistribution;
-  firstTimeDay: Dayjs;
+  firstTimeDay: Dayjs | null;
 }
 
 export interface ITimeDistribution {

src/store/slices/timesSlice.ts

@@ -1,6 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { ITimesContext } from '../../interfaces/StoreTypes';
-import DayjsUtils from '../../utils/DayjsUtils';
 import { getTimes } from '../thunks/timesThunks';
 
 const initialState: ITimesContext = {
@@ -9,7 +8,7 @@ const initialState: ITimesContext = {
   sumYear: { workingTime: 0, availableTime: 0 },
   sumMonth: { workingTime: 0, availableTime: 0 },
   sumLastMonth: { workingTime: 0, availableTime: 0 },
-  firstTimeDay: DayjsUtils.today(),
+  firstTimeDay: null,
 };
 
 export const timesSlice = createSlice({

src/store/thunks/timesThunks.ts

@@ -30,7 +30,7 @@ export const getTimes = createAsyncThunk('times/all', async (action: any, thunkA
 
   // Find first day of time entries
   thunkAPI.dispatch(setFirstTimeDay(TimeUtils.findfirstDay(result)));
-
+  
   // Set times and loading state
   thunkAPI.dispatch(setTimes(result));
   thunkAPI.dispatch(setTimesLoading(false));

src/utils/DayjsUtils.ts

@@ -1,18 +1,34 @@
 import dayjs from 'dayjs';
 import locale from 'dayjs/locale/de';
 
-const endOfCurrentYear = () => {
+const today = () => {
   return dayjs()
     .locale({ ...locale })
-    .endOf('year');
+}
+
+const endOfCurrentYear = () => {
+  return today().endOf('year');
 };
 
-const today = () => {
-  return dayjs()
-    .locale({ ...locale })
-    .endOf('day');
+const startOfCurrentYear = () => {
+  return today().startOf('year');
+};
+
+const todayStart = () => {
+  return today().startOf('day');
 };
 
+const todayEnd = () => {
+  return today().endOf('day');
+};
+
+const startOfLastMonth = ()=> {
+  return today().subtract(1, 'month').startOf('month');
+}
+const endOfLastMonth = () => {
+  return today().subtract(1, 'month').endOf('month');
+}
+
 const firstDayOfCurrentMonth = (date?: dayjs.Dayjs | undefined | null) => {
   const targetDate = date ? date : dayjs();
   return targetDate.locale({ ...locale }).startOf('month');
@@ -86,7 +102,8 @@ const firstDayOfWeek = (date?: dayjs.Dayjs | string | undefined | null) => {
 };
 
 export default {
-  today,
+  todayStart,
+  todayEnd,
   endOfCurrentYear,
   firstDayOfCurrentMonth,
   endOfCurrentMonth,
@@ -96,4 +113,7 @@ export default {
   anyToDayjs,
   calculateFromAndTo,
   firstDayOfWeek,
+  startOfCurrentYear,
+  startOfLastMonth,
+  endOfLastMonth
 };

src/utils/TimeUtils.ts

@@ -3,6 +3,7 @@ import locale from 'dayjs/locale/de';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import { ITimeDistribution } from '../interfaces/StoreTypes';
 import { IProfile, ITime, IWorkingdays } from '../interfaces/Types';
+import DayjsUtils from './DayjsUtils';
 import HolidayUtils from './HolidayUtils';
 
 export const numWorkdays = (workingdays: IWorkingdays): number => {
@@ -103,27 +104,24 @@ export const filterByTimestampRange = (from: number, to: number, timeArray: ITim
 };
 
 export const sumOfThisYear = (result: ITime[]): ITimeDistribution => {
-  const currentDate = dayjs().locale({ ...locale });
-  const today = currentDate.endOf('day').unix();
-  const startYear = currentDate.startOf('year').unix();
+  const startYear = DayjsUtils.startOfCurrentYear().unix();
+  const endToday = DayjsUtils.todayEnd().unix();
 
-  const dataOfThisYear = filterByTimestampRange(startYear, today, result);
+  const dataOfThisYear = filterByTimestampRange(startYear, endToday, result);
   return calculateSums(dataOfThisYear);
 };
 
 export const sumOfCurrentMonth = (result: ITime[]): ITimeDistribution => {
-  const currentDate = dayjs().locale({ ...locale });
-  const today = currentDate.endOf('day').unix();
-  const startCurrentMonth = currentDate.startOf('month').unix();
+  const startMonth = DayjsUtils.firstDayOfCurrentMonth().unix();
+  const endToday = DayjsUtils.todayEnd().unix();
 
-  const dataOfCurrentMonth = filterByTimestampRange(startCurrentMonth, today, result);
+  const dataOfCurrentMonth = filterByTimestampRange(startMonth, endToday, result);
   return calculateSums(dataOfCurrentMonth);
 };
 
 export const sumOfLastMonth = (result: ITime[]): ITimeDistribution => {
-  const currentDate = dayjs().locale({ ...locale });
-  const startOfLastMonath = currentDate.subtract(1, 'month').startOf('month').unix();
-  const endOfLastMonth = currentDate.subtract(1, 'month').endOf('month').unix();
+  const startOfLastMonath = DayjsUtils.startOfLastMonth().unix();
+  const endOfLastMonth = DayjsUtils.endOfLastMonth().unix();
 
   const dataOfCurrentMonth = filterByTimestampRange(startOfLastMonath, endOfLastMonth, result);
   return calculateSums(dataOfCurrentMonth);
@@ -135,7 +133,7 @@ export const findfirstDay = (result: ITime[]): dayjs.Dayjs => {
   }
 
   const smallestTimestamp = Math.min(...result.map((time) => time.timestamp));
-  return dayjs(smallestTimestamp);
+  return dayjs.unix(smallestTimestamp);
 };
 
 export const findTimeByTimestamp = (result: ITime[], timestamp: number): ITime | undefined => {