Skip to content

Commit

Permalink
[Feat]: Added Translations For The UI In Multiple Languages (#3265)
Browse files Browse the repository at this point in the history 
* feat: Added translations for the UI

* fix: coderabbitai

---------

Co-authored-by: Ruslan Konviser <[email protected]>
  • Loading branch information
@Innocent-Akim @evereq
Innocent-Akim and evereq authored Nov 8, 2024
1 parent 0b5b01d commit d5a4eeb
Show file tree
Hide file tree
Showing 22 changed files with 246 additions and 97 deletions.
15 changes: 8 additions & 7 deletions apps/web/app/[locale]/permissions/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,10 @@ const Permissions = () => {
<div className="flex flex-col w-[35%] overflow-auto gap-2 mt-5">
{roles.map((role) => (
<div
className={`flex items-center justify-between w-full py-2 px-5 rounded-xl cursor-pointer ${
selectedRole && selectedRole.id === role.id
? 'bg-primary dark:bg-primary-light text-white'
: ''
}`}
className={`flex items-center justify-between w-full py-2 px-5 rounded-xl cursor-pointer ${selectedRole && selectedRole.id === role.id
? 'bg-primary dark:bg-primary-light text-white'
: ''
}`}
key={role?.id}
onClick={() => {
setSelectedRole(role);
Expand Down Expand Up @@ -103,7 +102,7 @@ const Permissions = () => {
</div>
<div className="flex w-full items-center justify-between gap-[2rem]">
<Text className="flex-none flex-grow-0 w-1/2 text-base font-normal text-gray-400 md-2">
Estimate issue
{t('pages.settingsTeam.ESTIMATE_ISSUE')}
</Text>
<div className="flex flex-row items-center justify-between flex-grow-0 w-full">
<CommonToggle
Expand Down Expand Up @@ -275,14 +274,16 @@ const Permissions = () => {
};

function SelectRole() {
const t = useTranslations();

return (
<div className="mt-28">
<div className="m-auto w-[218px] h-[218px] rounded-full relative flex justify-center items-center text-center p-5 bg-[#6755c933] dark:bg-light--theme-light">
<Text className="text-6xl font-semibold text-primary">!</Text>
</div>

<Text className="text-2xl font-normal text-center mt-10 text-[#282048] dark:text-light--theme">
Please Select any Role
{t("common.SELECT_ROLE")}
</Text>
</div>
);
Expand Down
12 changes: 6 additions & 6 deletions apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {

</div>
<div>
<span className="block text-gray-500 mr-2">Date</span>
<span className="block text-gray-500 mr-2">{t("manualTime.DATE")}</span>
<DatePickerFilter
date={dateRange.from}
setDate={handleFromChange}
Expand All @@ -133,7 +133,7 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
/>
</div>
<div className=" flex flex-col items-center">
<label className="text-gray-500 mr-6 ">Billable</label>
<label className="text-gray-500 mr-6 capitalize">{t('pages.timesheet.BILLABLE.BILLABLE')}</label>
<div className="flex items-center gap-3">
<ToggleButton
isActive={isBillable}
Expand Down Expand Up @@ -186,7 +186,7 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
variant="outline"
type="button"
className={clsxm("dark:text-primary h-[2.3rem] border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
Cancel
{t('common.CANCEL')}
</Button>

<Button
Expand All @@ -195,7 +195,7 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
'bg-[#3826A6] h-[2.3rem] font-normal flex items-center text-white',
)}
>
Save
{t('common.SAVE')}
</Button>
</div>

Expand All @@ -221,10 +221,10 @@ const ToggleButton = ({ isActive, onClick, label }: ToggleButtonProps) => (
style={{
background: isActive
? 'linear-gradient(to right, #9d91efb7, #8a7bedb7)'
: '#6c57f4b7'
: '#1f2937'
}}
>
<div className="bg-[#3826A6] w-4 h-4 rounded-full shadow-md transform transition-transform translate-x-0" />
<div className={clsxm("bg-[#3826A6] w-4 h-4 rounded-full shadow-md transform transition-transform translate-x-0", isActive && "bg-white")} />
</div>
<span>{label}</span>
</div>
Expand Down
10 changes: 5 additions & 5 deletions apps/web/app/[locale]/timesheet/[memberId]/components/RejectSelectedModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { clsxm } from "@/app/utils";
import { Modal } from "@/lib/components";
import { useTranslations } from "next-intl";
import { useState } from "react";
export interface IRejectSelectedModalProps {
isOpen: boolean;
Expand All @@ -11,7 +12,7 @@ export interface IRejectSelectedModalProps {
export function RejectSelectedModal({ isOpen, closeModal, maxReasonLength, onReject, minReasonLength }: IRejectSelectedModalProps) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [reason, setReason] = useState('');

const t = useTranslations();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
Expand All @@ -33,7 +34,7 @@ export function RejectSelectedModal({ isOpen, closeModal, maxReasonLength, onRej
<form onSubmit={handleSubmit}>
<div className="flex flex-col gap-4">
<span className="text-[#71717A] text-center">
You are about to reject the selected entry, would you like to proceed?
{t('pages.timesheet.YOU_ARE_ABOUT_TO_REJECT_ENTRY')}
</span>
<textarea
value={reason}
Expand All @@ -59,9 +60,8 @@ export function RejectSelectedModal({ isOpen, closeModal, maxReasonLength, onRej
type="button"
disabled={isSubmitting}
aria-label="Cancel rejection"
className="dark:text-primary border-[#E2E8F0] dark:border-slate-600 font-normal dark:bg-dark--theme-light h-[2.2rem] text-gray-700 border px-2 rounded-lg"
>
Cancel
className="dark:text-primary border-[#E2E8F0] dark:border-slate-600 font-normal dark:bg-dark--theme-light h-[2.2rem] text-gray-700 border px-2 rounded-lg">
{t('common.CANCEL')}
</button>
<button
type="submit"
Expand Down
14 changes: 8 additions & 6 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,34 @@ import {
PopoverTrigger,
} from "@components/ui/popover";
import { SettingFilterIcon } from "@/assets/svg";
import { useTranslations } from "next-intl";



export function TimeSheetFilterPopover() {
const { activeTeam } = useOrganizationTeams();
const { tasks } = useTeamTasks();
const t = useTranslations();
return (
<>
<Popover>
<PopoverTrigger asChild>
<Button variant="outline"
className='flex items-center justify-center h-[2.2rem] rounded-lg bg-white dark:bg-dark--theme-light border dark:border-gray-700 hover:bg-white p-3 gap-2'>
<SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
<span className="text-gray-700 dark:text-white">Filter</span>
<span className="text-gray-700 dark:text-white">{t('common.FILTER')}</span>
</Button>
</PopoverTrigger>
<PopoverContent className="w-96">
<div className="w-full flex flex-col">
<div className="flex mb-3 text-xl font-bold gap-2">
<SettingFilterIcon className="text-gray-700 dark:text-white w-4" strokeWidth="1.8" />
<span className="text-gray-700 dark:text-white">Filters</span>
<span className="text-gray-700 dark:text-white">{t('common.FILTER')}</span>
</div>
<div className="grid gap-5">
<div className="">
<label className="flex justify-between text-gray-600 mb-1 text-sm">
<span className="text-[12px]">Employee</span>
<span className="text-[12px]">{t('manualTime.EMPLOYEE')}</span>
<span className="text-primary/10">Clear</span>
</label>
<MultiSelect
Expand All @@ -47,7 +49,7 @@ export function TimeSheetFilterPopover() {
</div>
<div className="">
<label className="flex justify-between text-gray-600 mb-1 text-sm">
<span className="text-[12px]">Project</span>
<span className="text-[12px]">{t('sidebar.PROJECTS')}</span>
<span className="text-primary/10">Clear</span>
</label>
<MultiSelect
Expand All @@ -61,7 +63,7 @@ export function TimeSheetFilterPopover() {
</div>
<div className="">
<label className="flex justify-between text-gray-600 mb-1 text-sm">
<span className="text-[12px]">Task</span>
<span className="text-[12px]">{t('hotkeys.TASK')}</span>
<span className="text-primary/10">Clear</span>
</label>
<MultiSelect
Expand All @@ -75,7 +77,7 @@ export function TimeSheetFilterPopover() {
</div>
<div className="">
<label className="flex justify-between text-gray-600 mb-1 text-sm">
<span className="text-[12px]">Status</span>
<span className="text-[12px]">{t('common.STATUS')}</span>
<span className="text-primary/10">Clear</span>
</label>
<MultiSelect
Expand Down
13 changes: 8 additions & 5 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,17 @@ import { FilterWithStatus } from './FilterWithStatus';
import { FrequencySelect, TimeSheetFilterPopover, TimesheetFilterDate, TimesheetFilterDateProps } from '.';
import { Button } from 'lib/components';
import { AddManualTimeModal } from '@/lib/features/manual-time/add-manual-time-modal';
import { TranslationHooks } from 'next-intl';

interface ITimesheetFilter {
isOpen: boolean,
openModal: () => void,
closeModal: () => void
closeModal: () => void,
t: TranslationHooks,
initDate?: TimesheetFilterDateProps
}
export function TimesheetFilter({ closeModal, isOpen, openModal, initDate }: ITimesheetFilter,) {

export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate }: ITimesheetFilter,) {
return (
<>
{
Expand All @@ -30,17 +34,16 @@ export function TimesheetFilter({ closeModal, isOpen, openModal, initDate }: ITi

<div className="flex gap-2">
<FrequencySelect />
<TimesheetFilterDate {...initDate} />
<TimesheetFilterDate t={t} {...initDate} />
<TimeSheetFilterPopover />
<Button
onClick={openModal}
variant="outline"
className="bg-primary/5 dark:bg-primary-light dark:border-transparent !h-[2.2rem] font-medium">
Add Time
{t('common.ADD_TIME')}
</Button>
</div>
</div>

</>
)
}
40 changes: 26 additions & 14 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from "@components/ui/popover"
import { CalendarIcon } from "@radix-ui/react-icons"
import { format } from "date-fns"
import { TranslationHooks } from "next-intl"
import React, { useEffect, useState } from "react"
import { MdKeyboardArrowRight } from "react-icons/md"
import { PiCalendarDotsThin } from "react-icons/pi"
Expand All @@ -16,25 +17,29 @@ interface DatePickerInputProps {
date: Date | null;
label: string;
}

export interface TimesheetFilterDateProps {
onChange?: (range: { from: Date | null; to: Date | null }) => void;
initialRange?: { from: Date | null; to: Date | null };
minDate?: Date;
maxDate?: Date;
t: TranslationHooks
}

export function TimesheetFilterDate({
onChange,
initialRange,
minDate,
maxDate
maxDate,
t
}: TimesheetFilterDateProps) {

const [dateRange, setDateRange] = React.useState<{ from: Date | null; to: Date | null }>({
from: initialRange?.from ?? new Date(),
to: initialRange?.to ?? new Date(),
});
const [isVisible, setIsVisible] = useState(false)

const [isVisible, setIsVisible] = useState(false);

const handleFromChange = (fromDate: Date | null) => {
if (maxDate && fromDate && fromDate > maxDate) {
return;
Expand All @@ -53,34 +58,35 @@ export function TimesheetFilterDate({
const handlePresetClick = (preset: string) => {
const today = new Date();
switch (preset) {
case 'Today':
case t('common.FILTER_TODAY'):
setDateRange({ from: today, to: today });
break;
case 'Last 7 days':
case t('common.FILTER_LAST_7_DAYS'):
setDateRange({
from: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7),
to: today
});
break;
case 'Last 30 days':
case t('common.FILTER_LAST_30_DAYS'):
setDateRange({
from: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 30),
to: today
});
break;
case `This year (${today.getFullYear()})`:
case t('common.FILTER_THIS_YEAR', { year: new Date().getFullYear() }):
setDateRange({
from: new Date(today.getFullYear(), 0, 1),
to: today
});
break;
case 'Custom Date Range':
case t('common.FILTER_CUSTOM_RANGE'):
setDateRange({ from: null, to: null });
break;
default:
break;
}
};

useEffect(() => {
if (dateRange.from && dateRange.to) {
onChange?.(dateRange);
Expand Down Expand Up @@ -111,7 +117,7 @@ export function TimesheetFilterDate({
format(dateRange.from, "LLL d, yyyy")
)
) : (
<span>Pick a date</span>
<span>{t('manualTime.PICK_A_DATE')}</span>
)}
</Button>
</PopoverTrigger>
Expand Down Expand Up @@ -139,7 +145,7 @@ export function TimesheetFilterDate({
setDateRange(initialRange ?? { from: new Date(), to: new Date() });
setIsVisible(false);
}}>
Cancel
{t('common.CANCEL')}
</Button>
<Button
variant={'outline'}
Expand All @@ -148,25 +154,31 @@ export function TimesheetFilterDate({
onChange?.(dateRange);
setIsVisible(false);
}} >
Apply
{t('common.APPLY')}
</Button>
</div>
</div>
)
}
<div className="border border-slate-100 dark:border-gray-800 my-1"></div>
<div className="flex flex-col p-2">
{["Today", "Last 7 days", "Last 30 days", `This year (${new Date().getFullYear()})`, "Custom Date Range"].map((label, index) => (
{[
t('common.FILTER_TODAY'),
t('common.FILTER_LAST_7_DAYS'),
t('common.FILTER_LAST_30_DAYS'),
t('common.FILTER_THIS_YEAR', ({ year: new Date().getFullYear() })),
t('common.FILTER_CUSTOM_RANGE')
].map((label, index) => (
<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"
onClick={() => {
label === 'Custom Date Range' && setIsVisible((prev) => !prev)
label === t('common.FILTER_CUSTOM_RANGE') && setIsVisible((prev) => !prev)
handlePresetClick(label)
}}>
<span> {label}</span>
{label === 'Custom Date Range' && <MdKeyboardArrowRight />}
{label === t('common.FILTER_CUSTOM_RANGE') && <MdKeyboardArrowRight />}
</Button>
))}
</div>
Expand Down
1 change: 1 addition & 0 deletions apps/web/app/[locale]/timesheet/[memberId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
closeModal={closeManualTimeModal}
openModal={openManualTimeModal}
isOpen={isManualTimeModalOpen}
t={t}
/>
<div className='h-[calc(100vh-_291px)] mt-3 overflow-y-auto border border-gray-200 rounded-lg dark:border-gray-800'>
{timesheetNavigator === 'ListView' ?
Expand Down
Loading

0 comments on commit d5a4eeb

Please sign in to comment.