Add icon support on group titles

- Add clock on daily standup
- Use human friendly date format on monthly calendar
- Better UX for the availability dialog
    - Show disabled options instead of no option

src/components/MonthlyCalendar/index.tsx

@@ -19,6 +19,14 @@ import DateContext from '#contexts/date';
 
 import styles from './styles.module.css';
 
+const dateFormatter = new Intl.DateTimeFormat(
+    [],
+    {
+        year: 'numeric',
+        month: 'short',
+    },
+);
+
 const weekDaysName = [
     'Su',
     'Mo',
@@ -129,6 +137,8 @@ function MonthlyCalendar(props: Props) {
         return days;
     }, [year, month]);
 
+    const formattedDate = dateFormatter.format(new Date(year, month, 1));
+
     return (
         <div className={_cs(styles.calendarContainer, className)}>
             <div className={styles.header}>
@@ -150,10 +160,9 @@ function MonthlyCalendar(props: Props) {
                 >
                     <RiArrowRightSLine />
                 </Button>
+                <div className={styles.spacer} />
                 <div>
-                    {year}
-                    /
-                    {String(month + 1).padStart(2, '0')}
+                    {formattedDate}
                 </div>
             </div>
             <div className={styles.monthlyCalendar}>

src/components/MonthlyCalendar/styles.module.css

@@ -8,6 +8,10 @@
         gap: var(--spacing-sm);
         align-items: baseline;
         font-size: var(--font-size-sm);
+
+        .spacer {
+            flex-grow: 1;
+        }
     }
 
     .monthly-calendar {

src/views/DailyJournal/AvailabilityDialog/index.tsx

@@ -188,7 +188,8 @@ function AvailabilityDialog(props: Props) {
                 return key === 'FIRST_HALF';
             }
             if (dialogState.wfhType === 'FULL') {
-                return false;
+                // NOTE: So that we can see all options
+                return true;
             }
             return true;
         },
@@ -204,7 +205,8 @@ function AvailabilityDialog(props: Props) {
                 return key === 'FIRST_HALF';
             }
             if (dialogState.leaveType === 'FULL') {
-                return false;
+                // NOTE: So that we can see all options
+                return true;
             }
             return true;
         },
@@ -221,32 +223,28 @@ function AvailabilityDialog(props: Props) {
             contentClassName={styles.modalContent}
             className={styles.availabilityDialog}
         >
-            {dialogState.wfhType !== 'FULL' && (
-                <RadioInput
-                    name="leaveType"
-                    label="Leave"
-                    options={availableLeaveTypeOptions}
-                    keySelector={leaveTypeKeySelector}
-                    labelSelector={leaveTypeLabelSelector}
-                    onChange={setFieldValue}
-                    value={dialogState.leaveType}
-                    disabled={disabled}
-                    clearable
-                />
-            )}
-            {dialogState.leaveType !== 'FULL' && (
-                <RadioInput
-                    name="wfhType"
-                    label="Work from home"
-                    options={availableWfhTypeOptions}
-                    keySelector={wfhTypeKeySelector}
-                    labelSelector={wfhTypeLabelSelector}
-                    onChange={setFieldValue}
-                    value={dialogState.wfhType}
-                    disabled={disabled}
-                    clearable
-                />
-            )}
+            <RadioInput
+                name="leaveType"
+                label="Leave"
+                options={availableLeaveTypeOptions}
+                keySelector={leaveTypeKeySelector}
+                labelSelector={leaveTypeLabelSelector}
+                onChange={setFieldValue}
+                value={dialogState.leaveType}
+                disabled={disabled || dialogState.wfhType === 'FULL'}
+                clearable
+            />
+            <RadioInput
+                name="wfhType"
+                label="Work from home"
+                options={availableWfhTypeOptions}
+                keySelector={wfhTypeKeySelector}
+                labelSelector={wfhTypeLabelSelector}
+                onChange={setFieldValue}
+                value={dialogState.wfhType}
+                disabled={disabled || dialogState.leaveType === 'FULL'}
+                clearable
+            />
             <div className={styles.actions}>
                 <Button
                     title="Cancel update availability"

src/views/DailyJournal/DayView/index.tsx

@@ -100,6 +100,23 @@ function DayView(props: Props) {
         return undefined;
     }, [taskById]);
 
+    const getWorkItemIconFromAttr = useCallback((
+        item: WorkItem,
+        attr: DailyJournalAttribute,
+    ) => {
+        if (isNotDefined(taskById)) {
+            return undefined;
+        }
+
+        const taskDetails = taskById[item.task];
+
+        if (attr.key === 'project') {
+            return taskDetails.contract.project.logo;
+        }
+
+        return undefined;
+    }, [taskById]);
+
     const formattedDate = dateFormatter.format(new Date(selectedDate));
     const formattedRelativeDate = useFormattedRelativeDate(selectedDate);
 
@@ -199,6 +216,10 @@ function DayView(props: Props) {
                                     groupedItem.value,
                                     groupedItem.attribute,
                                 );
+                                const currentIcon = getWorkItemIconFromAttr(
+                                    groupedItem.value,
+                                    groupedItem.attribute,
+                                );
 
                                 const Heading = `h${bound(groupedItem.level + 2, 2, 4)}` as unknown as ElementType;
 
@@ -208,6 +229,13 @@ function DayView(props: Props) {
                                         className={styles.nestedHeading}
                                     >
                                         {indent && <Indent level={groupedItem.level} />}
+                                        {currentIcon && (
+                                            <img
+                                                className={styles.icon}
+                                                src={currentIcon.url}
+                                                alt={headingText}
+                                            />
+                                        )}
                                         {headingText}
                                     </Heading>
                                 );
@@ -236,6 +264,10 @@ function DayView(props: Props) {
                                                 groupedItem.value,
                                                 attribute,
                                             );
+                                            const currentIcon = getWorkItemIconFromAttr(
+                                                groupedItem.value,
+                                                attribute,
+                                            );
 
                                             if (i < (groupLevel - joinLevel)) {
                                                 return null;
@@ -246,6 +278,13 @@ function DayView(props: Props) {
                                                     {i > (groupLevel - joinLevel) && (
                                                         <div className={styles.separator} />
                                                     )}
+                                                    {currentIcon && (
+                                                        <img
+                                                            className={styles.icon}
+                                                            src={currentIcon.url}
+                                                            alt={currentLabel}
+                                                        />
+                                                    )}
                                                     <div>{currentLabel}</div>
                                                 </Fragment>
                                             );

src/views/DailyJournal/DayView/styles.module.css

@@ -60,6 +60,10 @@
 
             &h2 {
                 margin-top: var(--spacing-md);
+
+                .icon {
+                    height: 1em;
+                }
             }
         }
 
@@ -76,6 +80,10 @@
                 width: 0.5rem;
                 height: 0.5rem;
             }
+
+            .icon {
+                height: 1em;
+            }
         }
 
         .work-item-container {

src/views/DailyJournal/index.tsx

@@ -751,7 +751,7 @@ export function Component() {
                 >
                     Add entry
                 </Button>
-                {!isTruthyString(dateFromParams) && (
+                {selectedDate !== fullDate && (
                     <Link
                         to="dailyJournal"
                         variant="quaternary"

src/views/DailyStandup/StartSection/index.tsx

@@ -1,3 +1,7 @@
+import {
+    useEffect,
+    useState,
+} from 'react';
 import {
     compareNumber,
     compareString,
@@ -64,6 +68,52 @@ const USERS_AVAILABILITY = gql`
     }
 `;
 
+const dateTimeFormatter = new Intl.DateTimeFormat(
+    [],
+    {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        weekday: 'short',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+    },
+);
+
+function formatTime(date: Date) {
+    return dateTimeFormatter.format(date);
+}
+
+function Clock() {
+    const [dateStr, setDateStr] = useState(() => {
+        const date = new Date();
+        return formatTime(date);
+    });
+    useEffect(
+        () => {
+            const timeout = window.setInterval(
+                () => {
+                    const date = new Date();
+                    const dateAsString = formatTime(date);
+                    setDateStr(dateAsString);
+                },
+                500,
+            );
+            return () => {
+                window.clearInterval(timeout);
+            };
+        },
+        [],
+    );
+    return (
+        <div>
+            {dateStr}
+        </div>
+    );
+}
+
 interface Props {
     date: string;
 }