Calendar: Integrate real logs and tasks to render ACTIVE/OOO days

src/app/services/logsApi.ts

@@ -0,0 +1,50 @@
+import { api } from './api';
+
+export type LogEntry = any;
+
+export type LogsResponse = {
+    data: LogEntry[];
+    next?: string | null;
+    prev?: string | null;
+};
+
+export type GetLogsQuery = {
+    username?: string;
+    startDate?: number; // seconds since epoch
+    endDate?: number; // seconds since epoch
+    type?: string; // comma-separated list of types
+    format?: 'feed';
+    dev?: boolean;
+    nextLink?: string;
+};
+
+export const logsApi = api.injectEndpoints({
+    endpoints: (build) => ({
+        getLogs: build.query<LogsResponse, GetLogsQuery>({
+            query: ({
+                username,
+                startDate,
+                endDate,
+                type,
+                format = 'feed',
+                dev = true,
+                nextLink,
+            }) => {
+                if (nextLink) {
+                    return nextLink;
+                }
+                const queryParams = new URLSearchParams();
+                if (dev) queryParams.set('dev', 'true');
+                if (format) queryParams.set('format', format);
+                if (type) queryParams.set('type', type);
+                if (username) queryParams.set('username', username);
+                if (startDate) queryParams.set('startDate', String(startDate));
+                if (endDate) queryParams.set('endDate', String(endDate));
+                return `/logs?${queryParams.toString()}`;
+            },
+            providesTags: ['Status'],
+        }),
+    }),
+});
+
+export const { useLazyGetLogsQuery } = logsApi;

src/app/services/tasksApi.ts

@@ -60,7 +60,7 @@ export const tasksApi = api.injectEndpoints({
                     ),
                     next: response.next,
                     prev: response.prev,
-                };
+                } as TasksResponseType;
             },
         }),
 
@@ -138,6 +138,7 @@ export const tasksApi = api.injectEndpoints({
 
 export const {
     useGetAllTasksQuery,
+    useLazyGetAllTasksQuery,
     useGetMineTasksQuery,
     useAddTaskMutation,
     useUpdateTaskMutation,

src/components/Calendar/UserSearchField.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect, ChangeEvent, useRef } from 'react';
 import classNames from './UserSearchField.module.scss';
 import { useGetAllUsersQuery } from '@/app/services/usersApi';
-import { logs } from '@/constants/calendar';
 import { userDataType } from '@/interfaces/user.type';
 import { useOutsideAlerter } from '@/hooks/useOutsideAlerter';
+import { useLazyGetLogsQuery } from '@/app/services/logsApi';
+import { useLazyGetAllTasksQuery } from '@/app/services/tasksApi';
 
 type SearchFieldProps = {
     onSearchTextSubmitted: (user: userDataType | undefined, data: any) => void;
@@ -22,37 +23,122 @@ const SearchField = ({ onSearchTextSubmitted, loading }: SearchFieldProps) => {
         filterUser(e.target.value);
     };
 
-    const handleOnSubmit = (e: React.FormEvent) => {
+    const { data: userData, isLoading: isUsersLoading } = useGetAllUsersQuery();
+    const [usersList, setUsersList] = useState<userDataType[]>([]);
+    const [displayList, setDisplayList] = useState<userDataType[]>([]);
+
+    const [triggerGetLogs, { isFetching: isLogsFetching }] =
+        useLazyGetLogsQuery();
+    const [triggerGetTasks, { isFetching: isTasksFetching }] =
+        useLazyGetAllTasksQuery();
+
+    const toMs = (value?: number | string) => {
+        if (typeof value === 'string') {
+            const parsed = Date.parse(value);
+            return isNaN(parsed) ? undefined : parsed;
+        }
+        if (typeof value !== 'number') return undefined as unknown as number;
+        return value >= 1e12 ? value : value * 1000;
+    };
+
+    const handleOnSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
         setDisplayList([]);
         const user = usersList.find(
             (user: userDataType) => user.username === searchText
         );
-        onSearchTextSubmitted(user, data);
-    };
 
-    const { data: userData, isError, isLoading } = useGetAllUsersQuery();
-    const [usersList, setUsersList] = useState<userDataType[]>([]);
-    const [displayList, setDisplayList] = useState<userDataType[]>([]);
-    const [data, setData] = useState([]);
+        if (!user) {
+            onSearchTextSubmitted(undefined, []);
+            return;
+        }
+
+        // Fetch logs (events) and tasks (continuous ranges). Try tasks by both userId and username.
+        const [logsResult, tasksByIdResult, tasksByUsernameResult] =
+            await Promise.all([
+                triggerGetLogs({
+                    username: user.username || undefined,
+                    type: ['task', 'REQUEST_CREATED'].join(','),
+                    format: 'feed',
+                    dev: true,
+                }),
+                triggerGetTasks({ assignee: user.id }),
+                triggerGetTasks({ assignee: user.username || '' }),
+            ]);
+
+        const logsResponse = logsResult.data;
+        const tasksById = tasksByIdResult.data?.tasks || [];
+        const tasksByUsername = tasksByUsernameResult.data?.tasks || [];
+
+        // Merge and de-duplicate tasks by id
+        const taskMap: Record<string, any> = {};
+        [...tasksById, ...tasksByUsername].forEach((t: any) => {
+            if (t?.id) taskMap[t.id] = t;
+        });
+        const mergedTasks = Object.values(taskMap);
+
+        const eventEntries = (logsResponse?.data || [])
+            .filter((log: any) => !!log)
+            .map((log: any) => {
+                // OOO ranges
+                if (log.type === 'REQUEST_CREATED' && log.from && log.until) {
+                    return {
+                        startTime: toMs(log.from),
+                        endTime: toMs(log.until),
+                        status: 'OOO',
+                    };
+                }
+                // Task events => single-day ACTIVE
+                if (log.type === 'task') {
+                    const ts = toMs(log.timestamp);
+                    return {
+                        startTime: ts,
+                        endTime: ts,
+                        status: 'ACTIVE',
+                        taskTitle: log.taskTitle,
+                    };
+                }
+                return null;
+            })
+            .filter(Boolean);
+
+        const taskRangeEntries = mergedTasks
+            .filter((t: any) => t)
+            .map((t: any) => {
+                const start = toMs(t.startedOn);
+                const end = toMs(t.endsOn);
+                const taskUrl = t.github?.issue?.html_url || undefined;
+                return {
+                    startTime: start,
+                    endTime: end ?? start,
+                    status: 'ACTIVE',
+                    taskTitle: t.title,
+                    taskUrl,
+                };
+            })
+            .filter((e: any) => e.startTime);
+
+        const calendarDataForUser = [...eventEntries, ...taskRangeEntries];
+
+        const mapped = [
+            {
+                userId: user.id,
+                data: calendarDataForUser,
+            },
+        ];
+
+        onSearchTextSubmitted(user, mapped);
+    };
 
     useEffect(() => {
         if (userData?.users) {
             const users: userDataType[] = userData.users;
             const filteredUsers: userDataType[] = users.filter(
                 (user: userDataType) => !user.incompleteUserDetails
             );
-            const logData: any = filteredUsers.map((user: userDataType) => {
-                const log = logs[Math.floor(Math.random() * 4)];
-                return {
-                    data: log,
-                    userId: user.id,
-                };
-            });
-            setData(logData);
             setUsersList(filteredUsers);
         }
-    }, [isLoading, userData]);
+    }, [isUsersLoading, userData]);
 
     const isValidUsername = () => {
         const usernames = usersList.map((user: userDataType) => user.username);
@@ -112,7 +198,11 @@ const SearchField = ({ onSearchTextSubmitted, loading }: SearchFieldProps) => {
             <button
                 className={classNames.userSearchSubmitButton}
                 disabled={
-                    loading || !(searchText ?? '').trim() || !isValidUsername()
+                    loading ||
+                    isLogsFetching ||
+                    isTasksFetching ||
+                    !(searchText ?? '').trim() ||
+                    !isValidUsername()
                 }
             >
                 Submit

src/pages/calendar/index.tsx

@@ -19,7 +19,11 @@ const UserStatusCalendar: FC = () => {
 
     const setTileClassName = ({ activeStartDate, date, view }: any) => {
         if (date.getDay() === 0) return 'sunday';
-        return processedData[0] ? processedData[0][date.getTime()] : null;
+        const time = date.getTime();
+        // If there is a task on this date, mark as ACTIVE (green)
+        if (processedData[1] && processedData[1][time]) return 'ACTIVE';
+        // Otherwise fall back to status classes like OOO/IDLE
+        return processedData[0] ? processedData[0][time] : null;
     };
 
     const handleDayClick = (value: Date, event: any) => {
@@ -48,12 +52,15 @@ const UserStatusCalendar: FC = () => {
             return;
         }
         if (processedData[1] && processedData[1][value.getTime()]) {
+            const title = processedData[1][value.getTime()];
+            const url = processedData[2]
+                ? processedData[2][value.getTime()]
+                : undefined;
+            const linkText = url ? ` (Link: ${url})` : '';
             setMessage(
                 `${selectedUser.username} is ACTIVE on ${value.getDate()}-${
                     MONTHS[value.getMonth()]
-                }-${value.getFullYear()} having task with title - ${
-                    processedData[1][value.getTime()]
-                }`
+                }-${value.getFullYear()} having task with title - ${title}${linkText}`
             );
             return;
         }

src/styles/calendar.scss

@@ -13,6 +13,11 @@
     color: #000000;
 }
 
+.react-calendar .ACTIVE {
+    background: #22c55e; /* green-500 */
+    color: #ffffff;
+}
+
 .calendar-container {
     padding: 20px;
     max-width: 750px;

src/utils/userStatusCalendar.ts

@@ -7,7 +7,8 @@ interface LOG_DATA {
     status: string;
     startTime: number;
     endTime: number;
-    taskTitle: string;
+    taskTitle?: string;
+    taskUrl?: string;
 }
 
 export const getStartOfDay = (date: Date): Date => {
@@ -22,13 +23,13 @@ export const getStartOfDay = (date: Date): Date => {
 
 export const getDatesInRange = (startDate: Date, endDate: Date) => {
     const date = getStartOfDay(startDate);
-    const dates = [];
+    const dates: number[] = [];
 
     if (
         !(startDate instanceof Date && !isNaN(startDate.getTime())) ||
         !(endDate instanceof Date && !isNaN(endDate.getTime()))
     )
-        return [];
+        return [] as number[];
 
     while (date <= getStartOfDay(endDate)) {
         dates.push(getStartOfDay(date).getTime());
@@ -41,31 +42,37 @@ export const getDatesInRange = (startDate: Date, endDate: Date) => {
 export const processData = (
     itemId: string | null,
     data: []
-): [object, object] => {
+): [object, object, object] => {
     if (!itemId) {
-        return [{}, {}];
+        return [{}, {}, {}];
     } else {
         const log: any = data.find((log: LOG_TYPE) => {
             return log.userId === itemId;
         });
-        if (!log || log.data?.length == 0) return [{}, {}];
+        if (!log || log.data?.length == 0) return [{}, {}, {}];
         const dictWithStatus: Record<number, string> = {};
         const dictWithTask: Record<number, string> = {};
+        const dictWithTaskUrl: Record<number, string> = {};
         log.data.forEach((logData: LOG_DATA) => {
             const dates = getDatesInRange(
                 new Date(logData.startTime),
                 new Date(logData.endTime)
             );
             if (logData.status === 'ACTIVE') {
                 dates.forEach((dateTimestamp) => {
-                    dictWithTask[dateTimestamp] = logData.taskTitle;
+                    if (logData.taskTitle) {
+                        dictWithTask[dateTimestamp] = logData.taskTitle;
+                    }
+                    if (logData.taskUrl) {
+                        dictWithTaskUrl[dateTimestamp] = logData.taskUrl;
+                    }
                 });
             } else {
                 dates.forEach((dateTimestamp) => {
                     dictWithStatus[dateTimestamp] = logData.status;
                 });
             }
         });
-        return [dictWithStatus, dictWithTask];
+        return [dictWithStatus, dictWithTask, dictWithTaskUrl];
     }
 };