feat(events): add support for events in journal view

Author: frozenhelium

backend

@@ -37,5 +37,6 @@ export default defineConfig({
         APP_UMAMI_SRC: Schema.string.optional(),
         APP_UMAMI_ID: Schema.string.optional(),
         APP_SENTRY_DSN: Schema.string.optional(),
+        APP_GOOGLE_OAUTH_CLIENT_ID: Schema.string.optional(),
     },
 });

env.ts

@@ -23,6 +23,7 @@
         "@codemirror/lang-markdown": "^6.2.5",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
+        "@react-oauth/google": "^0.13.4",
         "@replit/codemirror-vim": "^6.2.1",
         "@sentry/react": "^8.26.0",
         "@togglecorp/fujs": "^2.2.0",
@@ -50,7 +51,6 @@
         "@typescript-eslint/eslint-plugin": "^5.59.5",
         "@typescript-eslint/parser": "^5.59.5",
         "@vite-pwa/assets-generator": "^1.0.0",
-        "sharp": "^0.33.5",
         "@vitejs/plugin-react-swc": "^3.5.0",
         "@vitest/coverage-v8": "^1.2.2",
         "autoprefixer": "^10.4.14",
@@ -74,6 +74,7 @@
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^8.3.2",
         "rollup-plugin-visualizer": "^5.9.0",
+        "sharp": "^0.33.5",
         "stylelint": "^16.7.0",
         "stylelint-config-concentric": "^2.0.2",
         "stylelint-config-recommended": "^14.0.1",

package.json

@@ -33,6 +33,7 @@ const gqlClient = new UrqlClient({
             PublicQuery: () => null,
             AppEnumCollection: () => null,
             DailyStandUpType: () => null,
+            DailyHoursType: () => null,
             AppEnumCollectionTimeEntryType: (item) => String(item.key),
             AppEnumCollectionTimeEntryStatus: (item) => String(item.key),
             AppEnumCollectionJournalLeaveType: (item) => String(item.key),

pnpm-lock.yaml

@@ -14,11 +14,25 @@ import {
     encodeDate,
 } from '@togglecorp/fujs';
 
+import AvailabilityIndicator from '#components/AvailabilityIndicator';
 import Button from '#components/Button';
 import DateContext from '#contexts/date';
+import {
+    type JournalLeaveTypeEnum,
+    type JournalWorkFromHomeTypeEnum,
+} from '#generated/types/graphql';
 
 import styles from './styles.module.css';
 
+export interface DateInfo {
+    totalMinutes?: number;
+    targetMinutes?: number;
+    isHoliday?: boolean;
+    leaveType?: JournalLeaveTypeEnum | null;
+    wfhType?: JournalWorkFromHomeTypeEnum | null;
+    hasEvent?: boolean;
+}
+
 const dateFormatter = new Intl.DateTimeFormat(
     [],
     {
@@ -51,19 +65,22 @@ interface Props {
     initialYear: number;
     initialMonth: number;
     onDateClick?: (date: string) => void;
+    onMonthChange?: (year: number, month: number) => void;
+    dateInfoMap?: Map<string, DateInfo>;
     componentRef?: React.MutableRefObject<{
         resetView: (year: number, month: number) => void;
     } | null>;
 }
 
-// TODO: Show holidays, leaves on calendar
 function MonthlyCalendar(props: Props) {
     const {
         initialYear,
         initialMonth,
         componentRef,
         className,
         onDateClick,
+        onMonthChange,
+        dateInfoMap,
         weekDayNameClassName,
         dateClassName,
         selectedDate,
@@ -90,6 +107,10 @@ function MonthlyCalendar(props: Props) {
         }
     }, [componentRef, resetView]);
 
+    useEffect(() => {
+        onMonthChange?.(year, month);
+    }, [onMonthChange, year, month]);
+
     const handlePrevMonth = useCallback(
         () => {
             const newMonth = month - 1;
@@ -181,18 +202,35 @@ function MonthlyCalendar(props: Props) {
                 ))}
                 {daysInMonth.map((day) => {
                     const date = encodeDate(new Date(year, month, day.date));
-                    let variant;
-                    if (fullDate === date) {
-                        variant = 'secondary' as const;
-                    } else if (selectedDate === date) {
-                        variant = 'quaternary' as const;
-                    } else {
-                        variant = 'transparent' as const;
-                    }
+
+                    const info = dateInfoMap?.get(date);
+                    const isPast = date <= fullDate;
+                    const targetMinutes = info?.targetMinutes ?? 0;
+                    const totalMinutes = info?.totalMinutes ?? 0;
+                    const fillPct = isPast && targetMinutes > 0
+                        ? Math.min(1, totalMinutes / targetMinutes)
+                        : 0;
+                    const hue = Math.round(fillPct * 120);
+                    const hoursBg = isPast && targetMinutes > 0
+                        ? `hsla(${hue}, 55%, 50%, 0.18)`
+                        : undefined;
+
+                    // Treat holidays as full leave for AvailabilityIndicator
+                    const effectiveLeaveType: JournalLeaveTypeEnum | null = info?.isHoliday
+                        ? 'FULL'
+                        : (info?.leaveType ?? null);
+                    const effectiveWfhType = info?.wfhType ?? null;
+                    const hasAvailability = effectiveLeaveType != null || effectiveWfhType != null;
+
                     return (
                         <Button
                             onClick={onDateClick}
-                            className={_cs(styles.date, dateClassName)}
+                            className={_cs(
+                                styles.date,
+                                fullDate === date && styles.today,
+                                selectedDate === date && styles.selected,
+                                dateClassName,
+                            )}
                             name={date}
                             title="Set date from calendar"
                             key={day.date}
@@ -201,10 +239,23 @@ function MonthlyCalendar(props: Props) {
                                 // Note +2 is due to the week day name row
                                 gridRowStart: day.week + 2,
                                 opacity: day.dayOfWeek === 6 || day.dayOfWeek === 0 ? 0.5 : 1,
+                                backgroundColor: hoursBg,
                             }}
-                            variant={variant}
+                            variant="transparent"
                         >
-                            {day.date}
+                            <span className={styles.dateContent}>
+                                {day.date}
+                                {info?.hasEvent && (
+                                    <span className={styles.eventDot} />
+                                )}
+                                {hasAvailability && (
+                                    <AvailabilityIndicator
+                                        className={styles.availabilityIndicator}
+                                        leaveType={effectiveLeaveType}
+                                        wfhType={effectiveWfhType}
+                                    />
+                                )}
+                            </span>
                         </Button>
                     );
                 })}

src/App/index.tsx

@@ -17,18 +17,50 @@
     .monthly-calendar {
         display: grid;
         grid-template-columns: repeat(7, 1fr);
-        gap: var(--spacing-xs);
+        gap: 1px;
+        align-items: stretch;
 
         .day-name {
             padding: var(--spacing-xs);
+            text-align: center;
             color: var(--color-text-light);
             font-size: var(--font-size-md);
         }
 
         .date {
-            padding: var(--spacing-xs) var(--spacing-xs);
+            transition: background-color 0.3s ease;
+            padding: var(--spacing-2xs);
+            width: 100%;
+            height: 100%;
+            min-height: 2.5rem;
             font-size: var(--font-size-sm);
             font-weight: unset;
+
+            .date-content {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                line-height: 1;
+                gap: 1px;
+            }
+
+            .event-dot {
+                border-radius: 50%;
+                background-color: var(--color-primary);
+                width: 0.3em;
+                height: 0.3em;
+            }
+
+            .availability-indicator {
+                position: absolute;
+                top: var(--spacing-3xs);
+                right: var(--spacing-3xs);
+                font-size: 0.5em;
+                gap: var(--spacing-4xs);
+            }
         }
     }
 }