Updated design of filters on Leave management page (#1794)

* Updated timeoff entries index service with labels

* Updated timeoff entries index spec

* Updated leavel managment cards with labels

* Added leave management filters to view selected leaves

* If filter is applied for a type of leave, added shadow to the card to highlighted

* added box shadow, border and opacity on selection and hover on card

* added box shadow, border and opacity on selection and hover on card

app/javascript/src/components/LeaveManagement/Container/LeaveBlock.tsx

@@ -10,9 +10,8 @@ import {
   generateHolidayColor,
 } from "components/Profile/Organization/Leaves/utils";
 
-const LeaveBlock = ({ leaveType, setSelectedLeaveType }) => {
-  const { icon, color, name, netDuration, netDays, type, category, label } =
-    leaveType;
+const LeaveBlock = ({ leaveType, selectedLeaveType, setSelectedLeaveType }) => {
+  const { icon, color, name, netDuration, type, category, label } = leaveType;
 
   const leaveIcon =
     type == "leave" ? generateLeaveIcon(icon) : generateHolidayIcon(icon);
@@ -21,13 +20,20 @@ const LeaveBlock = ({ leaveType, setSelectedLeaveType }) => {
     type == "leave" ? generateLeaveColor(color) : generateHolidayColor(color);
 
   const formattedDuration =
-    netDuration < 0
-      ? `-${minToHHMM(-netDuration)} h (${netDays} days)`
-      : `${minToHHMM(netDuration)} h (${netDays} days)`;
+    category == "national" || category == "optional"
+      ? label
+      : netDuration < 0
+      ? `-${minToHHMM(-netDuration)} h (${label})`
+      : `${minToHHMM(netDuration)} h (${label})`;
+
+  const selectedDiv =
+    selectedLeaveType?.name == name
+      ? "flex w-full cursor-pointer justify-start rounded-lg p-2 text-white lg:flex-col lg:p-6 shadow-2xl border-2 border-miru-dark-purple-1000 border-opacity-20"
+      : "flex w-full cursor-pointer justify-start rounded-lg p-2 text-white lg:flex-col lg:p-6 hover:opacity-80";
 
   return (
     <div
-      className="flex w-full cursor-pointer justify-start rounded-lg p-2 text-white lg:flex-col lg:p-6"
+      className={selectedDiv}
       style={{ background: leaveColor.value }}
       onClick={() => setSelectedLeaveType(leaveType)}
     >
@@ -40,10 +46,7 @@ const LeaveBlock = ({ leaveType, setSelectedLeaveType }) => {
       <div className="mt-4 flex flex-col">
         <span className="text-xs font-semibold lg:text-sm">{name}</span>
         <span className="mt-2 text-base font-semibold lg:text-2xl">
-          {category !== "national" &&
-            category != "optional" &&
-            formattedDuration}
-          {label}
+          {formattedDuration}
         </span>
       </div>
     </div>

app/javascript/src/components/LeaveManagement/Container/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { minToHHMM } from "helpers";
-import { Button } from "StyledComponents";
+import { XIcon } from "miruIcons";
 
 import { Divider } from "common/Divider";
 
@@ -17,36 +17,44 @@ const Container = ({
   setSelectedLeaveType,
 }) => (
   <div className="mx-4 my-6 h-full lg:mx-0">
-    <div className="flex justify-between">
-      <span className="text-base font-normal text-miru-dark-purple-1000 lg:text-2xl">
-        {getLeaveBalanaceDateText()}
-      </span>
-      <Button style="ternary" onClick={() => setSelectedLeaveType(null)}>
-        {selectedLeaveType && "View all leaves"}
-      </Button>
-    </div>
+    <p className="text-base font-normal text-miru-dark-purple-1000 lg:text-2xl">
+      {getLeaveBalanaceDateText()}
+    </p>
     <div className="mt-6 grid w-full gap-4 lg:grid-cols-3">
       {leaveBalance.map((leaveType, index) => (
         <LeaveBlock
           key={index}
           leaveType={leaveType}
+          selectedLeaveType={selectedLeaveType}
           setSelectedLeaveType={setSelectedLeaveType}
         />
       ))}
     </div>
     <div className="mt-10">
       <div className="flex items-center justify-between py-3 lg:py-5">
-        <span className="text-lg font-bold text-miru-dark-purple-1000 lg:text-xl">
-          {`Leave Details ${
-            selectedLeaveType ? `(${selectedLeaveType.name})` : ""
-          }`}
-        </span>
-        <span className="text-sm font-medium text-miru-dark-purple-1000 lg:text-base">
+        <div className="flex items-center">
+          <span className="mr-4 text-lg font-bold text-miru-dark-purple-1000 lg:text-xl">
+            Leave Details
+          </span>
+          {selectedLeaveType && (
+            <div className="flex items-center justify-center rounded-xl bg-miru-gray-400 px-3 py-1 lg:mx-2 lg:my-0">
+              <span className="tracking-wide text-base font-normal capitalize text-miru-dark-purple-1000">
+                {selectedLeaveType.name}
+              </span>
+              <XIcon
+                className="ml-2 cursor-pointer"
+                size={14}
+                onClick={() => setSelectedLeaveType(null)}
+              />
+            </div>
+          )}
+        </div>
+        <p className="text-sm font-medium text-miru-dark-purple-1000 lg:text-base">
           Total :{" "}
           <span className="font-bold">
             {minToHHMM(totalTimeoffEntriesDuration)}
           </span>
-        </span>
+        </p>
       </div>
       <Divider />
       <Table timeoffEntries={timeoffEntries} />

app/services/timeoff_entries/index_service.rb

@@ -72,6 +72,9 @@ def calculate_leave_balance
           previous_year_carryforward = calculate_previous_year_carryforward(previous_year_leave_type)
 
           net_duration = (total_leave_type_days * 8 * 60) + previous_year_carryforward - timeoff_entries_duration
+          net_hours = net_duration / 60
+          net_days = net_hours / 8
+          extra_hours = net_hours % 8
 
           summary_object = {
             id: leave_type.id,
@@ -81,8 +84,9 @@ def calculate_leave_balance
             total_leave_type_days:,
             timeoff_entries_duration:,
             net_duration:,
-            net_days: net_duration / 60 / 8,
-            type: "leave"
+            net_days:,
+            type: "leave",
+            label: "#{net_days} days #{extra_hours} hours"
           }
 
           leave_balance << summary_object
@@ -144,7 +148,7 @@ def calculate_optional_holiday_balance(holiday)
           timeoff_entries_duration: optional_timeoff_entries.sum(:duration),
           type: "holiday",
           category: "optional",
-          label: "#{total_optional_entries} out of #{no_of_allowed_optional_holidays}"
+          label: "#{total_optional_entries} out of #{no_of_allowed_optional_holidays} (this #{time_period_optional_holidays.to_s.gsub("per_", "")})"
         }
 
         leave_balance << optional_holidays

spec/services/timeoff_entries/index_service_spec.rb

@@ -77,11 +77,14 @@
       expect(@data[:total_timeoff_entries_duration]).to eq(timeoff_entries_duration)
     end
 
-    it "returns leave balance for days per month when joining date is previous year" do
+    it "returns leave balance for days per month when joining date is previous year" do # rubocop:disable RSpec/ExampleLength
       leave_type = leave_types[0]
       total_days = calculate_leave_type_days(@joined_at, leave_type, @year)
       timeoff_entries_duration = leave_type.timeoff_entries.sum(:duration)
       net_duration = (total_days * 8 * 60) - timeoff_entries_duration
+      net_hours = net_duration / 60
+      net_days = net_hours / 8
+      extra_hours = net_hours % 8
 
       summary_object = {
         id: leave_type.id,
@@ -91,18 +94,22 @@
         total_leave_type_days: total_days,
         timeoff_entries_duration:,
         net_duration:,
-        net_days: net_duration / 60 / 8,
+        net_days:,
+        label: "#{net_days} days #{extra_hours} hours",
         type: "leave"
       }
 
       expect(@data[:leave_balance][0]).to eq(summary_object)
     end
 
-    it "returns leave balance for days per week when joining date is previous year" do
+    it "returns leave balance for days per week when joining date is previous year" do # rubocop:disable RSpec/ExampleLength
       leave_type = leave_types[1]
       total_days = calculate_leave_type_days(@joined_at, leave_type, @year)
       timeoff_entries_duration = leave_type.timeoff_entries.sum(:duration)
       net_duration = (total_days * 8 * 60) - timeoff_entries_duration
+      net_hours = net_duration / 60
+      net_days = net_hours / 8
+      extra_hours = net_hours % 8
 
       summary_object = {
         id: leave_type.id,
@@ -112,18 +119,22 @@
         total_leave_type_days: total_days,
         timeoff_entries_duration:,
         net_duration:,
-        net_days: net_duration / 60 / 8,
+        net_days:,
+        label: "#{net_days} days #{extra_hours} hours",
         type: "leave"
       }
 
       expect(@data[:leave_balance][1]).to eq(summary_object)
     end
 
-    it "returns leave balance for days per quarter when joining date is previous year" do
+    it "returns leave balance for days per quarter when joining date is previous year" do # rubocop:disable RSpec/ExampleLength
       leave_type = leave_types[2]
       total_days = calculate_leave_type_days(@joined_at, leave_type, @year)
       timeoff_entries_duration = leave_type.timeoff_entries.sum(:duration)
       net_duration = (total_days * 8 * 60) - timeoff_entries_duration
+      net_hours = net_duration / 60
+      net_days = net_hours / 8
+      extra_hours = net_hours % 8
 
       summary_object = {
         id: leave_type.id,
@@ -133,18 +144,22 @@
         total_leave_type_days: total_days,
         timeoff_entries_duration:,
         net_duration:,
-        net_days: net_duration / 60 / 8,
+        net_days:,
+        label: "#{net_days} days #{extra_hours} hours",
         type: "leave"
       }
 
       expect(@data[:leave_balance][2]).to eq(summary_object)
     end
 
-    it "returns leave balance for days per year when joining date is previous year" do
+    it "returns leave balance for days per year when joining date is previous year" do # rubocop:disable RSpec/ExampleLength
       leave_type = leave_types[3]
       total_days = calculate_leave_type_days(@joined_at, leave_type, @year)
       timeoff_entries_duration = leave_type.timeoff_entries.sum(:duration)
       net_duration = (total_days * 8 * 60) - timeoff_entries_duration
+      net_hours = net_duration / 60
+      net_days = net_hours / 8
+      extra_hours = net_hours % 8
 
       summary_object = {
         id: leave_type.id,
@@ -154,7 +169,8 @@
         total_leave_type_days: total_days,
         timeoff_entries_duration:,
         net_duration:,
-        net_days: net_duration / 60 / 8,
+        net_days:,
+        label: "#{net_days} days #{extra_hours} hours",
         type: "leave"
       }
 
@@ -180,11 +196,14 @@
       @data = service.process
     end
 
-    it "returns leave balance for days per month when joining date is current year" do
+    it "returns leave balance for days per month when joining date is current year" do # rubocop:disable RSpec/ExampleLength
       leave_type = leave_types[0]
       total_days = calculate_leave_type_days(@joined_at, leave_type, @year)
       timeoff_entries_duration = leave_type.timeoff_entries.sum(:duration)
       net_duration = (total_days * 8 * 60) - timeoff_entries_duration
+      net_hours = net_duration / 60
+      net_days = net_hours / 8
+      extra_hours = net_hours % 8
 
       summary_object = {
         id: leave_type.id,
@@ -194,18 +213,22 @@
         total_leave_type_days: total_days,
         timeoff_entries_duration:,
         net_duration:,
-        net_days: net_duration / 60 / 8,
+        net_days:,
+        label: "#{net_days} days #{extra_hours} hours",
         type: "leave"
       }
 
       expect(@data[:leave_balance][0]).to eq(summary_object)
     end
 
-    it "returns leave balance for days per week when joining date is current year" do
+    it "returns leave balance for days per week when joining date is current year" do # rubocop:disable RSpec/ExampleLength
       leave_type = leave_types[1]
       total_days = calculate_leave_type_days(@joined_at, leave_type, @year)
       timeoff_entries_duration = leave_type.timeoff_entries.sum(:duration)
       net_duration = (total_days * 8 * 60) - timeoff_entries_duration
+      net_hours = net_duration / 60
+      net_days = net_hours / 8
+      extra_hours = net_hours % 8
 
       summary_object = {
         id: leave_type.id,
@@ -215,18 +238,22 @@
         total_leave_type_days: total_days,
         timeoff_entries_duration:,
         net_duration:,
-        net_days: net_duration / 60 / 8,
+        net_days:,
+        label: "#{net_days} days #{extra_hours} hours",
         type: "leave"
       }
 
       expect(@data[:leave_balance][1]).to eq(summary_object)
     end
 
-    it "returns leave balance for days per quarter when joining date is current year" do
+    it "returns leave balance for days per quarter when joining date is current year" do # rubocop:disable RSpec/ExampleLength
       leave_type = leave_types[2]
       total_days = calculate_leave_type_days(@joined_at, leave_type, @year)
       timeoff_entries_duration = leave_type.timeoff_entries.sum(:duration)
       net_duration = (total_days * 8 * 60) - timeoff_entries_duration
+      net_hours = net_duration / 60
+      net_days = net_hours / 8
+      extra_hours = net_hours % 8
 
       summary_object = {
         id: leave_type.id,
@@ -236,18 +263,22 @@
         total_leave_type_days: total_days,
         timeoff_entries_duration:,
         net_duration:,
-        net_days: net_duration / 60 / 8,
+        net_days:,
+        label: "#{net_days} days #{extra_hours} hours",
         type: "leave"
       }
 
       expect(@data[:leave_balance][2]).to eq(summary_object)
     end
 
-    it "returns leave balance for days per year when joining date is current year" do
+    it "returns leave balance for days per year when joining date is current year" do # rubocop:disable RSpec/ExampleLength
       leave_type = leave_types[3]
       total_days = calculate_leave_type_days(@joined_at, leave_type, @year)
       timeoff_entries_duration = leave_type.timeoff_entries.sum(:duration)
       net_duration = (total_days * 8 * 60) - timeoff_entries_duration
+      net_hours = net_duration / 60
+      net_days = net_hours / 8
+      extra_hours = net_hours % 8
 
       summary_object = {
         id: leave_type.id,
@@ -257,7 +288,8 @@
         total_leave_type_days: total_days,
         timeoff_entries_duration:,
         net_duration:,
-        net_days: net_duration / 60 / 8,
+        net_days:,
+        label: "#{net_days} days #{extra_hours} hours",
         type: "leave"
       }