feat: today and current date in week

Author: nevo-david

apps/frontend/src/components/launches/calendar.tsx

@@ -189,12 +189,16 @@ export const WeekView = () => {
     dayjs.locale(currentLanguage);
 
     const days = [];
-    // Starting from Monday (1) to Sunday (7)
+    const yearWeek = dayjs()
+      .year(currentYear)
+      .week(currentWeek)
+      .startOf('week');
     for (let i = 1; i <= 7; i++) {
-      days.push(dayjs().day(i).format('dddd'));
+      const yearWeekFormat = yearWeek.add(i, 'day').format('L');
+      days.push({ name: dayjs().day(i).format('dddd'), day: yearWeekFormat });
     }
     return days;
-  }, [i18next.resolvedLanguage]);
+  }, [i18next.resolvedLanguage, currentYear, currentWeek]);
 
   return (
     <div className="flex flex-col h-screen overflow-hidden text-textColor flex-1">
@@ -203,10 +207,11 @@ export const WeekView = () => {
           <div className="bg-customColor20 sticky top-0 z-10 bg-gray-900"></div>
           {localizedDays.map((day, index) => (
             <div
-              key={day}
+              key={day.name}
               className="sticky top-0 z-10 bg-customColor20 p-2 text-center"
             >
-              <div>{day}</div>
+              <div>{day.name}</div>
+              <div className="text-xs">{day.day}</div>
             </div>
           ))}
           {hours.map((hour) => (

apps/frontend/src/components/launches/filters.tsx

@@ -166,10 +166,32 @@ export const Filters = () => {
     week.currentYear,
     week.currentDay,
   ]);
+
+  const setCurrent = useCallback(
+    (type: 'day' | 'week' | 'month') => () => {
+      if (type === 'day') {
+        setDay();
+      } else if (type === 'week') {
+        setWeek();
+      } else if (type === 'month') {
+        setMonth();
+      }
+    },
+    [
+      week.display,
+      week.currentMonth,
+      week.currentWeek,
+      week.currentYear,
+      week.currentDay,
+    ]
+  );
   return (
     <div className="text-textColor flex flex-col md:flex-row gap-[8px] items-center select-none">
-      <div className="flex flex-grow flex-row">
-        <div onClick={previous} className="cursor-pointer text-textColor rtl:rotate-180">
+      <div className="flex flex-grow flex-row items-center">
+        <div
+          onClick={previous}
+          className="cursor-pointer text-textColor rtl:rotate-180"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -184,17 +206,17 @@ export const Filters = () => {
           </svg>
         </div>
         <div className="w-[80px] text-center">
-          {week.display === 'day'
-            ? `${dayjs()
-                .month(week.currentMonth)
-                .week(week.currentWeek)
-                .day(week.currentDay)
-                .format('dddd')}`
-            : week.display === 'week'
-            ? t('week_number', 'Week {{number}}', { number: week.currentWeek })
-            : dayjs().month(week.currentMonth).format('MMMM')}
+          <div
+            onClick={setCurrent(week.display as 'day' | 'week' | 'month')}
+            className="bg-secondary py-[3px] rounded-[5px] hover:bg-tableBorder transition-all cursor-pointer"
+          >
+            Today
+          </div>
         </div>
-        <div onClick={next} className="cursor-pointer text-textColor rtl:rotate-180">
+        <div
+          onClick={next}
+          className="cursor-pointer text-textColor rtl:rotate-180"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -208,7 +230,17 @@ export const Filters = () => {
             />
           </svg>
         </div>
-        <div className="flex-1">{betweenDates}</div>
+        <div className="flex-1">
+          {week.display === 'day'
+            ? `${dayjs()
+                .month(week.currentMonth)
+                .week(week.currentWeek)
+                .day(week.currentDay)
+                .format('dddd (L)')}`
+            : week.display === 'week'
+            ? betweenDates
+            : dayjs().month(week.currentMonth).format('MMMM YYYY')}
+        </div>
       </div>
       <SelectCustomer
         customer={week.customer as string}