HRIS-336 [FE] Integrate Filed Schedules tab in My schedule page

api/Services/EmployeeScheduleService.cs

@@ -49,7 +49,7 @@ public async Task<List<EmployeeScheduleDTO>> GetEmployeeScheduleDetails(int empl
         public async Task<List<ChangeScheduleRequest>?> GetEmployeeChangeScheduleRequest(int userId)
         {
             using HrisContext context = _contextFactory.CreateDbContext();
-            return await context.ChangeScheduleRequests.Where(x => x.UserId == userId).ToListAsync();
+            return await context.ChangeScheduleRequests.Where(x => x.UserId == userId).OrderByDescending(x => x.CreatedAt).ToListAsync();
         }
 
         public async Task<string> Create(CreateEmployeeScheduleRequest request, HrisContext context)

client/src/components/molecules/MyFiledScheduleTable/columns.tsx

@@ -15,7 +15,8 @@ const columnHelper = createColumnHelper<IMyFiledScheduleData>()
 export const columns = [
   columnHelper.accessor('id', {
     header: () => <CellHeader label="No." />,
-    footer: (info) => info.column.id
+    footer: (info) => info.column.id,
+    cell: (props) => Number(props.row.id) + 1
   }),
   columnHelper.accessor('dateFiled', {
     header: () => <CellHeader label="Date Filed" />,

client/src/graphql/queries/employeeSchedule.ts

@@ -62,3 +62,15 @@ export const SEARCH_EMPLOYEES_BY_SCHEDULE = gql`
     }
   }
 `
+
+export const GET_ALL_EMPLOYEE_SCHEDULE_REQUESTS = gql`
+  query ($userId: Int!) {
+    employeeChangeScheduleRequest(userId: $userId) {
+      id
+      data
+      isManagerApproved
+      isLeaderApproved
+      createdAt
+    }
+  }
+`

client/src/hooks/useEmployeeSchedule.ts

@@ -4,6 +4,7 @@ import { useMutation, useQuery, UseQueryResult, UseMutationResult } from '@tanst
 import { client } from '~/utils/shared/client'
 import {
   GET_ALL_EMPLOYEE_SCHEDULE,
+  GET_ALL_EMPLOYEE_SCHEDULE_REQUESTS,
   GET_EMPLOYEE_SCHEDULE,
   GET_EMPLOYEES_BY_SCHEDULE,
   SEARCH_EMPLOYEES_BY_SCHEDULE
@@ -25,7 +26,8 @@ import {
   IDeleteEmployeeScheduleRequestInput,
   IAddMemberToScheduleInput,
   ISearchEmployeesByScheduleRequestInput,
-  IReassignEmployeesScheduleRequestInput
+  IReassignEmployeesScheduleRequestInput,
+  IAllFiledScheduleRequest
 } from '~/utils/types/employeeScheduleTypes'
 import { IScheduleMember } from '~/utils/interfaces/scheduleMemberInterface'
 
@@ -72,6 +74,11 @@ type GetEmployeesByScheduleFuncReturnType = UseQueryResult<
   unknown
 >
 
+type GetAllEmployeeScheduleRequestsReturnType = UseQueryResult<
+  { employeeChangeScheduleRequest: IAllFiledScheduleRequest[] },
+  unknown
+>
+
 type AddMemberToScheduleReturnType = UseMutationResult<
   any,
   unknown,
@@ -86,6 +93,7 @@ type GetSearchEmployeesByScheduleFuncReturnType = UseQueryResult<
 
 type HookReturnType = {
   getAllEmployeeScheduleQuery: () => GetAllEmployeeScheduleFuncReturnType
+  getAllScheduleRequestsQuery: (userId: number) => GetAllEmployeeScheduleRequestsReturnType
   handleCreateEmployeeScheduleMutation: () => CreateEmployeeScheduleMutationType
   handleEditEmployeeScheduleMutation: () => EditEmployeeScheduleMutationType
   handleDeleteEmployeeScheduleMutation: () => DeleteEmployeeScheduleMutationType
@@ -196,6 +204,14 @@ const useEmployeeSchedule = (): HookReturnType => {
       enabled: !isNaN(employeeScheduleId) && isOpen
     })
 
+  const getAllScheduleRequestsQuery = (userId: number): GetAllEmployeeScheduleRequestsReturnType =>
+    useQuery({
+      queryKey: ['GET_ALL_EMPLOYEE_SCHEDULE_REQUESTS', userId],
+      queryFn: async () => await client.request(GET_ALL_EMPLOYEE_SCHEDULE_REQUESTS, { userId }),
+      select: (data: { employeeChangeScheduleRequest: IAllFiledScheduleRequest[] }) => data,
+      enabled: !isNaN(userId)
+    })
+
   const getSearchEmployeesByScheduleQuery = (
     request: ISearchEmployeesByScheduleRequestInput,
     isOpen: boolean
@@ -210,6 +226,7 @@ const useEmployeeSchedule = (): HookReturnType => {
   return {
     getEmployeeScheduleQuery,
     getAllEmployeeScheduleQuery,
+    getAllScheduleRequestsQuery,
     handleEditEmployeeScheduleMutation,
     handleCreateEmployeeScheduleMutation,
     handleDeleteEmployeeScheduleMutation,

client/src/pages/my-schedule/filed-schedules.tsx

@@ -1,18 +1,86 @@
 import { NextPage } from 'next'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import Card from '~/components/atoms/Card'
+import useUserQuery from '~/hooks/useUserQuery'
 import FadeInOut from '~/components/templates/FadeInOut'
+import { IMyFiledScheduleData } from '~/utils/interfaces'
+import useEmployeeSchedule from '~/hooks/useEmployeeSchedule'
+import { getApprovalStatus } from '~/utils/myDailyTimeHelpers'
 import MaxWidthContainer from '~/components/atoms/MaxWidthContainer'
 import MyScheduleLayout from '~/components/templates/MySchedulelayout'
 import GlobalSearchFilter from '~/components/molecules/GlobalSearchFilter'
 import UnderConstructionPage from '~/components/pages/UnderContructionPage'
 import { columns } from '~/components/molecules/MyFiledScheduleTable/columns'
 import MyFiledScheduleTable from '~/components/molecules/MyFiledScheduleTable'
-import { dummyMyFiledScheduleData } from '~/utils/constants/dummyMyFiledScheduleData'
 
 const FiledSchedules: NextPage = (): JSX.Element => {
+  const { handleUserQuery } = useUserQuery()
   const [globalFilter, setGlobalFilter] = useState<string>('')
+  const { getAllScheduleRequestsQuery } = useEmployeeSchedule()
+
+  const { data: user } = handleUserQuery()
+  const { data: MyFiledScheduleData } = getAllScheduleRequestsQuery(Number(user?.userById.id))
+  const FiledSchedule = MyFiledScheduleData?.employeeChangeScheduleRequest
+  const [filedRequestDataTable, setFiledRequestDataTable] = useState<IMyFiledScheduleData[]>()
+
+  const getFiledScheduleRequestMappedData = (): IMyFiledScheduleData[] | undefined => {
+    return FiledSchedule?.map((item) => {
+      const parsedData = JSON.parse(item.data)
+      const status =
+        item.isLeaderApproved === null || item.isManagerApproved === null
+          ? null
+          : item.isLeaderApproved && item.isManagerApproved
+
+      const schedule = {
+        monday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' },
+        tuesday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' },
+        wednesday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' },
+        thursday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' },
+        friday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' },
+        saturday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' },
+        sunday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' }
+      }
+
+      const scheduleList = parsedData.reduce(
+        (
+          acc: Record<
+            string,
+            {
+              breakFrom: string
+              timeOut: string
+              timeIn: string
+              breakTo: string
+            }
+          >,
+          data: { Day: string; From: string; To: string; BreakFrom: string; BreakTo: string }
+        ) => {
+          const day = data.Day.toLowerCase()
+          acc[day].timeIn = data.From
+          acc[day].timeOut = data.To
+          acc[day].breakFrom = data.BreakFrom
+          acc[day].breakTo = data.BreakTo
+
+          return acc
+        },
+        schedule
+      )
+
+      return {
+        id: item.id,
+        dateFiled: item.createdAt,
+        status: getApprovalStatus(status),
+        schedule: scheduleList
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (FiledSchedule !== null || FiledSchedule !== undefined) {
+      const mappedOffsets = getFiledScheduleRequestMappedData()
+      setFiledRequestDataTable(mappedOffsets)
+    }
+  }, [FiledSchedule])
 
   if (process.env.NEXT_PUBLIC_DISPLAY_MY_SCHEDULE_PAGE === 'false') {
     return <UnderConstructionPage />
@@ -25,17 +93,15 @@ const FiledSchedules: NextPage = (): JSX.Element => {
           <Card className="overflow-hidden">
             <header className="py-2 px-4">
               <GlobalSearchFilter
-                {...{
-                  value: globalFilter ?? '',
-                  onChange: (value) => setGlobalFilter(String(value)),
-                  placeholder: 'Search'
-                }}
+                value={globalFilter ?? ''}
+                onChange={(value) => setGlobalFilter(String(value))}
+                placeholder="Search"
               />
             </header>
             <MyFiledScheduleTable
               {...{
                 query: {
-                  data: dummyMyFiledScheduleData,
+                  data: filedRequestDataTable ?? [],
                   error: null
                 },
                 table: {