From 678899f210bc4a1050ab8fd3f26c4d51f19803c8 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Thu, 14 Nov 2024 23:44:03 +0200
Subject: [PATCH] [Feat]: Update DynamicSelect component and localization Files
 (#3334)

* feat: Update DynamicSelect component and localization files

* fix: coderabbitai

* fix: coderabbitai

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
---
 .../components/TimeSheetFilterPopover.tsx     | 12 ++--
 .../components/TimesheetFilterDate.tsx        |  2 +-
 .../components/custom-select/select-items.tsx | 69 +++++++++++++++++++
 .../manual-time/add-manual-time-modal.tsx     | 20 ------
 apps/web/locales/ar.json                      |  5 +-
 apps/web/locales/bg.json                      |  5 +-
 apps/web/locales/de.json                      |  5 +-
 apps/web/locales/en.json                      |  5 +-
 apps/web/locales/es.json                      |  5 +-
 apps/web/locales/fr.json                      |  5 +-
 apps/web/locales/he.json                      |  5 +-
 apps/web/locales/it.json                      |  5 +-
 apps/web/locales/nl.json                      |  5 +-
 apps/web/locales/pl.json                      |  5 +-
 apps/web/locales/pt.json                      |  5 +-
 apps/web/locales/ru.json                      |  5 +-
 apps/web/locales/zh.json                      |  5 +-
 17 files changed, 128 insertions(+), 40 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index d241c7650..48d04748d 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
@@ -47,7 +47,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('manualTime.EMPLOYEE')}</span>
-                                    <span className={clsxm("text-primary/10", employee?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", employee?.length > 0 && "text-primary dark:text-primary-light")}>{t('common.CLEAR')}</span>
                                 </label>
                                 <MultiSelect
                                     localStorageKey="timesheet-select-filter-employee"
@@ -63,7 +63,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('sidebar.PROJECTS')}</span>
-                                    <span className={clsxm("text-primary/10", project?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", project?.length > 0 && "text-primary dark:text-primary-light")}>{t('common.CLEAR')}</span>
                                 </label>
                                 <MultiSelect
                                     localStorageKey="timesheet-select-filter-projects"
@@ -79,7 +79,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('hotkeys.TASK')}</span>
-                                    <span className={clsxm("text-primary/10", task?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", task?.length > 0 && "text-primary dark:text-primary-light")}>{t('common.CLEAR')}</span>
                                 </label>
                                 <MultiSelect
                                     localStorageKey="timesheet-select-filter-task"
@@ -95,7 +95,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('common.STATUS')}</span>
-                                    <span className={clsxm("text-primary/10", statusState && "text-primary dark:text-primary-light")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", statusState && "text-primary dark:text-primary-light")}>{t('common.CLEAR')}</span>
                                 </label>
                                 <MultiSelect
                                     localStorageKey="timesheet-select-filter-status"
@@ -113,11 +113,11 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                                     onClick={() => setShouldRemoveItems(true)}
                                     variant={'outline'}
                                     className='flex items-center text-sm justify-center h-10   rounded-lg  dark:text-gray-300' >
-                                    <span className="text-sm">Clear Filter</span>
+                                    <span className="text-sm">{t('common.CLEAR_FILTER')}</span>
                                 </Button>
                                 <Button
                                     className='flex items-center text-sm justify-center h-10  rounded-lg bg-primary dark:bg-primary-light dark:text-gray-300' >
-                                    <span className="text-sm">Apply Filter</span>
+                                    <span className="text-sm">{t('common.APPLY_FILTER')}</span>
                                 </Button>
                             </div>
                         </div>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index db5d266a8..9d5888f63 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -175,7 +175,7 @@ export function TimesheetFilterDate({
                         <Button
                             key={index}
                             variant="outline"
-                            className="h-7 flex items-center justify-between border-none text-[12px] text-gray-700 dark:dark:bg-dark--theme-light"
+                            className={clsxm("h-6 flex items-center justify-between border-none text-[12px] text-gray-700 dark:bg-dark--theme-light hover:bg-primary  hover:text-white hover:dark:bg-primary-light")}
                             onClick={() => {
                                 label === t('common.FILTER_CUSTOM_RANGE') && setIsVisible((prev) => !prev)
                                 handlePresetClick(label)
diff --git a/apps/web/lib/components/custom-select/select-items.tsx b/apps/web/lib/components/custom-select/select-items.tsx
index 0e56528b7..78f523191 100644
--- a/apps/web/lib/components/custom-select/select-items.tsx
+++ b/apps/web/lib/components/custom-select/select-items.tsx
@@ -3,6 +3,16 @@ import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover'
 import { cn } from 'lib/utils';
 import { useEffect, useState } from 'react';
 import { MdOutlineKeyboardArrowDown } from 'react-icons/md';
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select"
+import React from 'react';
 
 interface SelectItemsProps<T> {
 	items: T[];
@@ -94,3 +104,62 @@ export function SelectItems<T>({
 		</Popover>
 	);
 }
+
+
+type DynamicSelectProps<T> = {
+	items: T[]
+	label: string
+	placeholder: string
+	getItemLabel: (item: T) => string
+	getItemValue: (item: T) => string
+	onChange?: (value: string) => void
+	disabled?: boolean
+	error?: string
+	defaultValue?: string
+}
+
+export const DynamicSelect = React.memo(function DynamicSelect<T>({
+	items,
+	label,
+	placeholder,
+	getItemLabel,
+	getItemValue,
+	onChange,
+	disabled,
+	error,
+	defaultValue
+}: DynamicSelectProps<T>) {
+	return (
+		<Select
+			onValueChange={onChange}
+			disabled={disabled}
+			defaultValue={defaultValue}>
+			<SelectTrigger
+				className={cn(
+					"w-full",
+					error && "border-red-500 focus:ring-red-500"
+				)}
+			>
+				<SelectValue placeholder={placeholder} />
+			</SelectTrigger>
+			<SelectContent className='z-[10000]'>
+				<SelectGroup>
+					<SelectLabel>{label}</SelectLabel>
+					{items.map((item, index) => (
+						<SelectItem key={getItemValue(item)} value={getItemValue(item)}>
+							{getItemLabel(item)}
+						</SelectItem>
+					))}
+				</SelectGroup>
+			</SelectContent>
+			{error && (
+				<p
+					className="mt-1 text-sm text-red-500"
+					role="alert"
+					aria-live="polite">
+					{error}
+				</p>
+			)}
+		</Select>
+	)
+})
diff --git a/apps/web/lib/features/manual-time/add-manual-time-modal.tsx b/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
index 97151553c..e67af3598 100644
--- a/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
+++ b/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
@@ -296,26 +296,6 @@ export function AddManualTimeModal(props: Readonly<IAddManualTimeModalProps>) {
 						{timeDifference}
 					</div>
 				</div>
-
-				{/* <div className="">
-					<label className="block text-gray-500 mb-1">
-						{t('manualTime.TEAM')}<span className="text-[#de5505e1] ml-1">*</span>
-					</label>
-					{
-						activeTeam ?
-							<SelectItems
-								defaultValue={activeTeam}
-								items={teams}
-								onValueChange={(team) => setTeam(team)}
-								itemId={(team) => (team ? team.id : '')}
-								itemToString={(team) => (team ? team.name : '')}
-								triggerClassName="border-gray-300 dark:border-slate-600"
-							/>
-							:
-							<></>
-					}
-				</div> */}
-
 				{params === 'AddManuelTime' ? (
 					<>
 						<ManageOrMemberComponent
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index e05bce974..77d575a46 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -244,7 +244,10 @@
 		"FILTER_LAST_7_DAYS": "آخر 7 أيام",
 		"FILTER_LAST_30_DAYS": "آخر 30 يومًا",
 		"FILTER_THIS_YEAR": "هذا العام {year}",
-		"FILTER_CUSTOM_RANGE": "نطاق مخصص"
+		"FILTER_CUSTOM_RANGE": "نطاق مخصص",
+		"CLEAR_FILTER": "مسح الفلتر",
+		"CLEAR": "مسح",
+		"APPLY_FILTER": "تطبيق الفلتر"
 	},
 	"sidebar": {
 		"DASHBOARD": "لوحة التحكم",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index 70bebf88c..146962a2e 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Последните 7 дни",
 		"FILTER_LAST_30_DAYS": "Последните 30 дни",
 		"FILTER_THIS_YEAR": "Тази година {year}",
-		"FILTER_CUSTOM_RANGE": "Потребителски диапазон"
+		"FILTER_CUSTOM_RANGE": "Потребителски диапазон",
+		"CLEAR_FILTER": "Изчисти филтъра",
+		"CLEAR": "Изчисти",
+		"APPLY_FILTER": "Приложи филтър"
 	},
 	"hotkeys": {
 		"HELP": "Помощ",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index e4938bb7b..c42de6e56 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Letzte 7 Tage",
 		"FILTER_LAST_30_DAYS": "Letzte 30 Tage",
 		"FILTER_THIS_YEAR": "Dieses Jahr {year}",
-		"FILTER_CUSTOM_RANGE": "Benutzerdefinierter Bereich"
+		"FILTER_CUSTOM_RANGE": "Benutzerdefinierter Bereich",
+		"CLEAR_FILTER": "Filter löschen",
+		"CLEAR": "Löschen",
+		"APPLY_FILTER": "Filter anwenden"
 	},
 	"hotkeys": {
 		"HELP": "Hilfe",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 03961d2a3..a35d7ec92 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Last 7 Days",
 		"FILTER_LAST_30_DAYS": "Last 30 Days",
 		"FILTER_THIS_YEAR": "This year {year}",
-		"FILTER_CUSTOM_RANGE": "Custom Range"
+		"FILTER_CUSTOM_RANGE": "Custom Range",
+		"CLEAR_FILTER": "Clear Filter",
+		"CLEAR": "Clear",
+		"APPLY_FILTER": "Apply Filter"
 	},
 	"hotkeys": {
 		"HELP": "Help",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index ed2e54490..8a30a3032 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Últimos 7 días",
 		"FILTER_LAST_30_DAYS": "Últimos 30 días",
 		"FILTER_THIS_YEAR": "Este año {year}",
-		"FILTER_CUSTOM_RANGE": "Rango personalizado"
+		"FILTER_CUSTOM_RANGE": "Rango personalizado",
+		"CLEAR_FILTER": "Borrar filtro",
+		"CLEAR": "Borrar",
+		"APPLY_FILTER": "Aplicar filtro"
 	},
 	"hotkeys": {
 		"HELP": "Ayuda",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 69179edce..bbd5f0430 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Derniers 7 jours",
 		"FILTER_LAST_30_DAYS": "Derniers 30 jours",
 		"FILTER_THIS_YEAR": "Cette année {year}",
-		"FILTER_CUSTOM_RANGE": "Plage personnalisée"
+		"FILTER_CUSTOM_RANGE": "Plage personnalisée",
+		"CLEAR_FILTER": "Effacer le filtre",
+		"CLEAR": "Effacer",
+		"APPLY_FILTER": "Appliquer le filtre"
 	},
 	"hotkeys": {
 		"HELP": "Aide",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 83c9b1312..0cf6d5c9e 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "ה-7 ימים האחרונים",
 		"FILTER_LAST_30_DAYS": "ה-30 ימים האחרונים",
 		"FILTER_THIS_YEAR": "שנה זו {year}",
-		"FILTER_CUSTOM_RANGE": "טווח מותאם אישית"
+		"FILTER_CUSTOM_RANGE": "טווח מותאם אישית",
+		"CLEAR_FILTER": "נקה סינון",
+		"CLEAR": "נקה",
+		"APPLY_FILTER": "החל סינון"
 	},
 	"hotkeys": {
 		"HELP": "עזרה",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 90b440c68..576c9af34 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Ultimi 7 giorni",
 		"FILTER_LAST_30_DAYS": "Ultimi 30 giorni",
 		"FILTER_THIS_YEAR": "Quest'anno {year}",
-		"FILTER_CUSTOM_RANGE": "Intervallo personalizzato"
+		"FILTER_CUSTOM_RANGE": "Intervallo personalizzato",
+		"CLEAR_FILTER": "Cancella filtro",
+		"CLEAR": "Cancella",
+		"APPLY_FILTER": "Applica filtro"
 	},
 	"hotkeys": {
 		"HELP": "Aiuto",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 90b22103b..1c7612d5c 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Laatste 7 dagen",
 		"FILTER_LAST_30_DAYS": "Laatste 30 dagen",
 		"FILTER_THIS_YEAR": "Dit jaar {year}",
-		"FILTER_CUSTOM_RANGE": "Aangepast bereik"
+		"FILTER_CUSTOM_RANGE": "Aangepast bereik",
+		"CLEAR_FILTER": "Filter wissen",
+		"CLEAR": "Wissen",
+		"APPLY_FILTER": "Filter toepassen"
 	},
 	"hotkeys": {
 		"HELP": "Help",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index afabe281f..7e45f58ba 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Ostatnie 7 dni",
 		"FILTER_LAST_30_DAYS": "Ostatnie 30 dni",
 		"FILTER_THIS_YEAR": "Ten rok {year}",
-		"FILTER_CUSTOM_RANGE": "Zakres niestandardowy"
+		"FILTER_CUSTOM_RANGE": "Zakres niestandardowy",
+		"CLEAR_FILTER": "Wyczyść filtr",
+		"CLEAR": "Wyczyść",
+		"APPLY_FILTER": "Zastosuj filtr"
 	},
 	"hotkeys": {
 		"HELP": "Pomoc",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index 63c3f6cf7..4a832f9ab 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Últimos 7 dias",
 		"FILTER_LAST_30_DAYS": "Últimos 30 dias",
 		"FILTER_THIS_YEAR": "Este ano {year}",
-		"FILTER_CUSTOM_RANGE": "Faixa personalizada"
+		"FILTER_CUSTOM_RANGE": "Faixa personalizada",
+		"CLEAR_FILTER": "Limpar filtro",
+		"CLEAR": "Limpar",
+		"APPLY_FILTER": "Aplicar filtro"
 	},
 	"hotkeys": {
 		"HELP": "Ajuda",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index 8f2e0f7e5..20c2605ab 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Последние 7 дней",
 		"FILTER_LAST_30_DAYS": "Последние 30 дней",
 		"FILTER_THIS_YEAR": "Этот год {year}",
-		"FILTER_CUSTOM_RANGE": "Пользовательский диапазон"
+		"FILTER_CUSTOM_RANGE": "Пользовательский диапазон",
+		"CLEAR_FILTER": "Очистить фильтр",
+		"CLEAR": "Очистить",
+		"APPLY_FILTER": "Применить фильтр"
 	},
 	"hotkeys": {
 		"HELP": "Помощь",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 4484dfded..3735c7f97 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "过去7天",
 		"FILTER_LAST_30_DAYS": "过去30天",
 		"FILTER_THIS_YEAR": "今年 {year}",
-		"FILTER_CUSTOM_RANGE": "自定义范围"
+		"FILTER_CUSTOM_RANGE": "自定义范围",
+		"CLEAR_FILTER": "清除筛选",
+		"CLEAR": "清除",
+		"APPLY_FILTER": "应用筛选"
 	},
 	"hotkeys": {
 		"HELP": "帮助",