From dd32864f90ff46dc1f6afedf8352d87954dc7beb Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Tue, 27 Aug 2024 08:51:23 +0200
Subject: [PATCH] [Feat]: Add Badget Status, Select Filter status, Button
 delete (#2954)

* feat: add badget status, select filter, button delete

* fix: cspell
---
 apps/web/app/[locale]/calendar/page.tsx       |  4 +-
 .../calendar/confirm-change-status.tsx        | 25 ++++++++++++-
 .../calendar/setup-time-sheet.tsx             | 26 +++++++++++--
 .../calendar/table-time-sheet.tsx             | 37 +++----------------
 4 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/apps/web/app/[locale]/calendar/page.tsx b/apps/web/app/[locale]/calendar/page.tsx
index 4b44f4b62..dadeaf474 100644
--- a/apps/web/app/[locale]/calendar/page.tsx
+++ b/apps/web/app/[locale]/calendar/page.tsx
@@ -63,7 +63,7 @@ const CalendarPage = () => {
                     params='AddManuelTime'
                 />
                 <div
-                    className='fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C] z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-lg shadow-gray-100 dark:shadow-gray-700 '
+                    className='fixed top-20 flex flex-col border-b-[1px] dark:border-gray-800 z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-lg shadow-gray-100 dark:shadow-gray-700 '
                 >
                     <Container fullWidth={fullWidth}>
                         <div className="flex bg-white dark:bg-dark-high flex-row items-start justify-between mt-12">
@@ -82,7 +82,7 @@ const CalendarPage = () => {
                                 setCalendarTimeSheet={setCalendarTimeSheet}
 
                             />
-                            <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
+                            <div className='border border-gray-100 dark:border-gray-800 w-full'></div>
                         </div>
                     </Container>
                 </div>
diff --git a/apps/web/lib/features/integrations/calendar/confirm-change-status.tsx b/apps/web/lib/features/integrations/calendar/confirm-change-status.tsx
index a9b7c914f..4f7b6bbc1 100644
--- a/apps/web/lib/features/integrations/calendar/confirm-change-status.tsx
+++ b/apps/web/lib/features/integrations/calendar/confirm-change-status.tsx
@@ -1,4 +1,5 @@
 import { clsxm } from '@app/utils';
+import { Badge } from '@components/ui/badge';
 import { Button } from '@components/ui/button';
 import { Modal } from 'lib/components'
 import React from 'react'
@@ -49,7 +50,7 @@ export function ConfirmStatusChange({ closeModal, isOpen, newStatus, oldStatus }
 
 const StatusTransition = ({ previousStatus, currentStatus, currentStatusClass, previousStatusClass }: { previousStatus: string; currentStatus: string; currentStatusClass: string; previousStatusClass: string }) => (
     <div className="flex items-center gap-x-2 font-medium">
-        <span className={clsxm(previousStatusClass)}>{previousStatus}</span>
+        <span className={clsxm(previousStatusClass, 'line-through font-normal')}>{previousStatus}</span>
         <span>to</span>
         <span className={clsxm(currentStatusClass)}>{currentStatus}</span>
     </div>
@@ -78,3 +79,25 @@ const CommentInputArea = () => (
         </div>
     </>
 );
+
+
+export function StatusBadge({ selectedStatus, filterNumber }: { selectedStatus?: string, filterNumber?: string }) {
+    const [selected] = React.useState(selectedStatus);
+    const getColorClass = () => {
+        switch (selected) {
+            case "Rejected":
+                return `text-red-500 ${filterNumber ? "border-gray-200 dark:border-gray-700" : " border-red-500"} `;
+            case "Approved":
+                return `text-green-500 ${filterNumber ? "border-gray-200 dark:border-gray-700" : "border-green-500"}`;
+            case "Pending":
+                return `text-orange-500 ${filterNumber ? "border-gray-200 dark:border-gray-700" : "border-orange-500"} `;
+            default:
+                return `text-gray-500 dark:text-gray-200 border-gray-200 dark:border-gray-700 !py-0 font-normal`;
+        }
+    };
+
+    return (
+        <Badge className={`${getColorClass()} bg-transparent rounded-md ${filterNumber ? "font-normal" : 'py-1'}   px-2 text-center hover:bg-transparent`}
+        >{filterNumber}{" "}{selected}</Badge>
+    );
+}
diff --git a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
index c2143d44a..0d31fde8a 100644
--- a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
@@ -1,9 +1,12 @@
 "use client"
 
 import React from 'react'
-import { DataTableTimeSheet } from './table-time-sheet'
+import { DataTableTimeSheet, SelectFilter } from './table-time-sheet'
 import { HeadTimeSheet } from '@app/[locale]/calendar/component'
-import { timesheetCalendar } from './helper-calendar'
+import { statusOptions, timesheetCalendar } from './helper-calendar'
+import { StatusBadge } from './confirm-change-status'
+import { RiDeleteBinLine } from "react-icons/ri";
+
 
 interface ISetupTimeSheetProps {
     timesheet?: timesheetCalendar
@@ -17,7 +20,24 @@ export function SetupTimeSheet({ timesheet }: ISetupTimeSheetProps) {
                 <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
                 <HeadTimeSheet timesheet={timesheet} />
             </div>
-            <div className='flex h-[780px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark--theme-light p-4 shadow-lg shadow-gray-100  dark:shadow-gray-700'>
+            <div className='flex flex-col h-[780px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark--theme-light p-4 shadow-lg shadow-gray-100  dark:shadow-gray-700'>
+                <div className='w-full pb-3 flex items-center gap-x-4 justify-between'>
+                    <div className='flex gap-x-4'>
+                        <span className='font-medium'>123 Logs Selected</span>
+                        <SelectFilter selectedStatus='Rejected' />
+                        <button className='border flex items-center gap-2 border-gray-200 dark:border-gray-700 text-red-500 h-8 px-2 rounded-md' >
+                            <RiDeleteBinLine />
+                            <span className='!font-normal text-sm'>Delete</span>
+                        </button>
+                    </div>
+                    <div className='flex gap-x-2 h-6'>
+                        <StatusBadge selectedStatus='77:00h' />
+                        {statusOptions.map((items, index) => (
+                            <StatusBadge key={index} selectedStatus={items.value} filterNumber={`${index + 2}`} />
+
+                        ))}
+                    </div>
+                </div>
                 <DataTableTimeSheet />
             </div>
         </div>
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index 0a38b4f55..e6c533f9d 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -49,10 +49,9 @@ import {
     MdKeyboardArrowLeft,
     MdKeyboardArrowRight
 } from "react-icons/md";
-import { ConfirmStatusChange, TimeSheet, dataSourceTimeSheet, statusOptions } from "."
+import { ConfirmStatusChange, StatusBadge, TimeSheet, dataSourceTimeSheet, statusOptions } from "."
 import { useModal } from "@app/hooks"
 import { Checkbox } from "@components/ui/checkbox";
-import { Badge } from "@components/ui/badge"
 
 
 
@@ -318,32 +317,6 @@ export function DataTableTimeSheet() {
 
 
 
-function StatusBadge({ selectedStatus }: { selectedStatus?: string }) {
-
-    const [selected] = React.useState(selectedStatus);
-
-    const getColorClass = () => {
-        switch (selected) {
-            case "Rejected":
-                return "text-red-500 border-red-500 ";
-            case "Approved":
-                return "text-green-500 border-green-500";
-            case "Pending":
-                return "text-orange-500 border-orange-500";
-            default:
-                return "text-gray-500 border-gray-200";
-        }
-
-
-    };
-
-
-    return (
-        <Badge className={`${getColorClass()} bg-transparent rounded-md py-1 px-2 text-center hover:bg-transparent`}
-        >{selected}</Badge>
-    );
-}
-
 
 export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 
@@ -354,11 +327,11 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
     const getColorClass = () => {
         switch (selected) {
             case "Rejected":
-                return "text-red-500 border-red-500 rou";
+                return "text-red-500 border-gray-200";
             case "Approved":
-                return "text-green-500 border-green-500";
+                return "text-green-500 border-gray-200";
             case "Pending":
-                return "text-orange-500 border-orange-500";
+                return "text-orange-500 border-gray-200";
             default:
                 return "text-gray-500 border-gray-200";
         }
@@ -387,7 +360,7 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
                 onValueChange={(value) => onValueChanges(value)}
             >
                 <SelectTrigger
-                    className={`min-w-[120px] w-fit border border-gray-200 dark:border-gray-700 bg-transparent font-medium rounded-xl ${getColorClass()}`}
+                    className={`min-w-[120px] w-fit border border-gray-200 h-8 dark:border-gray-700 bg-transparent font-normal rounded-md ${getColorClass()}`}
                 >
                     <SelectValue
                         placeholder="Select a daily"