Bổ sung tooltip ngày nghỉ , tổng ngày nghỉ, custom màu cho cột total, off, remaining

BACKEND/Modules/Admin/app/Http/Controllers/LeaveManagementController.php

@@ -31,25 +31,41 @@ class LeaveManagementController extends Controller
             $join->on('notes.n_time_type', '=', 'categories.c_code')
                 ->where('categories.c_type', 'TIME_TYPE');
         })
+            ->leftJoin("categories as reason", function ($join) {
+                $join->on('n_reason', '=', 'reason.c_code');
+                $join->on('reason.c_type', DB::raw("CONCAT('REASON')"));
+            })
             ->select(
                 DB::raw('notes.n_user_id as n_user_id'),
+                DB::raw('notes.n_time_type as time_type'),
                 DB::raw('notes.n_year as year'),
                 DB::raw('notes.n_month as month'),
-                DB::raw('SUM(categories.c_value) as leave_days')
+                DB::raw('categories.c_value as leave_days'),
+                DB::raw('notes.n_day as day'),
+                'reason.c_name as reason_name',
+                'categories.c_name as time_type_name',
+                // DB::raw('SUM(categories.c_value) as leave_days')
             )
+            // ->where('notes.n_user_id', "1")
             ->where('notes.n_year', $year)
             ->where('notes.n_reason', 'ONLEAVE')
-            ->groupBy("notes.n_user_id", DB::raw('notes.n_month'), DB::raw('notes.n_year'))
+            // ->groupBy("notes.n_user_id")
+            ->orderBy('notes.n_month')
+            ->orderBy('notes.n_day')
             ->get()
             ->map(function ($item) {
                 return [
+                    "day" => $item->day,
                     "n_user_id" => $item->n_user_id,
+                    // "time_type" => $item->time_type,
+                    "reason_name" => $item->reason_name,
+                    "time_type_name" => $item->time_type_name,
                     "month" => $item->month,
                     "leave_days" => $item->leave_days
                 ];
             })
             ->toArray();
-
+        // dd($totalLeaveDaysByMonth);
         $leaveDays = LeaveDays::join('users', 'leave_days.ld_user_id', '=', 'users.id')
             ->select(
                 'leave_days.*',
@@ -65,7 +81,6 @@ class LeaveManagementController extends Controller
             ->where('leave_days.ld_year', $year)
             ->get()
             ->map(function ($item) use ($totalLeaveDaysByMonth) {
-
                 $monthlyLeaveDays = [];
                 foreach ($totalLeaveDaysByMonth as $key => $totalDays) {
                     if ($item->ld_user_id == $totalDays["n_user_id"]) {

FRONTEND/src/pages/LeaveManagement/LeaveManagement.tsx

@@ -46,8 +46,12 @@ interface LeaveDay {
 }
 
 interface MonthlyLeaveDays {
-  month: number
+  day: number
   leave_days: number
+  month: number
+  n_user_id: number
+  reason_name: string
+  time_type_name: string
 }
 
 interface UserData {
@@ -198,6 +202,28 @@ const LeaveManagement = () => {
 
   // console.log(customAddNotes, 'customAddNotes')
 
+  const getDetailLeaveDay = (monthlyLeaveDays: MonthlyLeaveDays[]) => {
+    type MonthlyLeaveDaysAcc = {
+      [key: string]: { n_user_id: number; month: number; leave_days: number }
+    }
+    const summedLeaveDaysByUserAndMonth = monthlyLeaveDays.reduce(
+      (acc: MonthlyLeaveDaysAcc, record) => {
+        const { n_user_id, month, leave_days } = record
+        const key = `${month}`
+
+        if (!acc[key]) {
+          acc[key] = { n_user_id, month, leave_days: 0 }
+        }
+
+        acc[key].leave_days += Number(leave_days)
+
+        return acc
+      },
+      {},
+    )
+    return summedLeaveDaysByUserAndMonth
+  }
+
   return (
     <div>
       <div className={classes.title}>
@@ -279,7 +305,7 @@ const LeaveManagement = () => {
           onClick={() => {
             setDisableBtn(true)
             if (
-              customAddNotes.id === 0 
+              customAddNotes.id === 0
               // ||
               // customAddNotes.totalLeave === '' ||
               // customAddNotes.totalLeave === '0'
@@ -409,28 +435,95 @@ const LeaveManagement = () => {
                   </Table.Td>
 
                   {monthInYear.map((d, i) => {
-                    let total =
+                    let leaveDataByMonth = getDetailLeaveDay(
-                      user.monthlyLeaveDays.find((item) => {
+                      user.monthlyLeaveDays,
-                        return item.month == d.value
+                    )
-                      })?.leave_days ?? 0
+
+                    const monthData = leaveDataByMonth[d.value]
+                    let total = monthData ? monthData.leave_days : 0
                     totalDayOff = totalDayOff + total
                     return (
-                      <Table.Td bg={total > 0 ? '#ffb5b5' : ''} key={i} ta={'center'}>
+                      <Table.Td
-                        {total === 0 ? '' : total}
+                        bg={total > 0 ? '#ffb5b5' : ''}
+                        key={i}
+                        ta={'center'}
+                      >
+                        <Tooltip
+                          multiline
+                          label={user.monthlyLeaveDays
+                            .filter((item) => item.month === d.value)
+                            .map((itemDay, indexDay) => {
+                              return (
+                                <p key={indexDay}>
+                                  - Xin {itemDay.reason_name} (
+                                  {itemDay.time_type_name}) {itemDay.day}/
+                                  {itemDay.month}
+                                </p>
+                              )
+                            })}
+                        >
+                          <p>{total === 0 ? '' : total}</p>
+                        </Tooltip>
                       </Table.Td>
                     )
                   })}
 
-                  <Table.Td ta={'center'}>{totalDayLeave}</Table.Td>
+                  <Table.Td
-                  <Table.Td ta={'center'} bg={'#ffb5b5'}>{totalDayOff}</Table.Td>
+                    ta={'center'}
-                  <Table.Td ta={'center'} bg={'#c3ffc3'}>
+                    bg={totalDayLeave > 0 ? '#92e6f2' : ''}
+                  >
+                    {totalDayLeave}
+                  </Table.Td>
+                  <Table.Td ta={'center'} bg={totalDayOff > 0 ? '#ffb5b5' : ''}>
+                    {totalDayOff > 0 ? (
+                      <Tooltip
+                        multiline
+                        label={user.monthlyLeaveDays.map(
+                          (itemDay, indexDay) => {
+                            return (
+                              <p key={indexDay}>
+                                - Xin {itemDay.reason_name} (
+                                {itemDay.time_type_name}) {itemDay.day}/
+                                {itemDay.month}
+                              </p>
+                            )
+                          },
+                        )}
+                      >
+                        <p> {totalDayOff}</p>
+                      </Tooltip>
+                    ) : (
+                      <></>
+                    )}
+                  </Table.Td>
+                  <Table.Td
+                    ta={'center'}
+                    bg={
+                      totalDayLeave - totalDayOff == 0
+                        ? ''
+                        : totalDayLeave - totalDayOff > 0
+                        ? '#c3ffc3'
+                        : '#ffb5b5'
+                    }
+                  >
                     {totalDayLeave - totalDayOff}
                   </Table.Td>
                   <Table.Td>
-                    <Box style={{display: ld_note === "" || ld_note === null? 'none' : 'block'}}>
+                    <Box
-                      <HoverCard width={280} shadow="md" >
+                      style={{
+                        display:
+                          ld_note === '' || ld_note === null ? 'none' : 'block',
+                      }}
+                    >
+                      <HoverCard width={280} shadow="md">
                         <HoverCard.Target>
-                          <Text fz={'sm'}>{ld_note !== null && ld_note !== "" &&  ld_note.length > 25 ?ld_note.slice(0,25)+"..." : ld_note}</Text>
+                          <Text fz={'sm'}>
+                            {ld_note !== null &&
+                            ld_note !== '' &&
+                            ld_note.length > 25
+                              ? ld_note.slice(0, 25) + '...'
+                              : ld_note}
+                          </Text>
                         </HoverCard.Target>
                         <HoverCard.Dropdown>
                           <Textarea size="sm" autosize>
@@ -444,7 +537,7 @@ const LeaveManagement = () => {
                     <IconEdit
                       color="green"
                       width={20}
-                      style={{cursor:'pointer'}}
+                      style={{ cursor: 'pointer' }}
                       onClick={() => {
                         let totalLeave =
                           user.leaveDay.ld_day == 0