Skip to content

Commit

Permalink
Merge pull request #3231 from ever-co/develop
Browse files Browse the repository at this point in the history 
Stage
  • Loading branch information
@evereq
evereq authored Nov 5, 2024
2 parents d4758da + a48a46a commit 0b7e860
Show file tree
Hide file tree
Showing 18 changed files with 253 additions and 136 deletions.
3 changes: 1 addition & 2 deletions apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react'

export function CalendarView() {
return (
<div className='grow h-full w-full bg-[#FFFFFF]'>
<div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>

</div>
)
Expand Down
13 changes: 8 additions & 5 deletions apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,21 @@ export function FilterWithStatus({
];

return (
<div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] rounded-xl w-[520px]', className)}>
<div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] dark:bg-gray-800 rounded-xl ', className)}>
{buttonData.map(({ label, count, icon }, index) => (
<Button
key={index}
className={clsxm(
'group flex items-center justify-start h-[2.2rem] rounded-xl w-full',
'dark:bg-dark--theme-light dark:border-gray-700 bg-transparent text-[#71717A] w-[80px]',
activeStatus === label && 'text-primary bg-white shadow-lg font-bold border'
'dark:bg-gray-800 dark:border-primary-light bg-transparent text-[#71717A] w-[80px]',
activeStatus === label && 'text-primary bg-white shadow-2xl dark:text-primary-light font-bold border'
)}
onClick={() => onToggle(label)}>
<span className={clsxm('font-medium ml-1 text-[#7E7991]', `${activeStatus === label ? "text-primary" : ""}`)}>{label}</span>
<span className='font-medium ml-1 text-[#71717A]'>{count}</span>
<span className={clsxm(
'font-medium ml-1 text-gray-500 dark:text-gray-200',
activeStatus === label && 'text-primary font-bold dark:text-primary-light'
)}>{label}</span>
<span className='font-medium ml-1 text-gray-500 dark:text-gray-400'>{count}</span>
</Button>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function FrequencySelect() {
<Select
value={selectedValue}
onValueChange={handleSelectChange}>
<SelectTrigger className="w-auto overflow-hidden text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
<SelectTrigger className="w-36 overflow-hidden h-[2.2rem] text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
<SelectValue placeholder="Select a daily" />
</SelectTrigger>
<SelectContent>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function TimeSheetFilterPopover() {
<Popover>
<PopoverTrigger asChild>
<Button variant="outline"
className='flex items-center justify-center h-10 rounded-lg bg-white dark:bg-dark--theme-light border dark:border-gray-700 hover:bg-white p-3 gap-2'>
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>
</Button>
Expand Down
14 changes: 7 additions & 7 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,17 @@ export const getTimesheetButtons = (status: StatusType, t: TranslationHooks) =>

const buttonsConfig: Record<StatusType, { icon: JSX.Element; title: string }[]> = {
Pending: [
{ icon: <FaClipboardCheck className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
{ icon: <IoClose className="!bg-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
{ icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
{ icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
{ icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
{ icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
],
Approved: [
{ icon: <IoClose className="!bg-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
{ icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
{ icon: <IoClose className="!bg-[#2932417c] rounded dark:!bg-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
{ icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
],
Rejected: [
{ icon: <FaClipboardCheck className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
{ icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
{ icon: <FaClipboardCheck className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
{ icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
]
};

Expand Down
12 changes: 6 additions & 6 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,21 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
<Card
aria-label={`Timesheet card for ${title}`}
shadow='custom'
className='w-full h-[175px] rounded-md border border-gray-200 flex gap-8 shadow shadow-gray-100 p-3'>
className='w-full h-[175px] rounded-md border border-gray-200 dark:border-gray-600 flex gap-8 shadow shadow-gray-100 dark:shadow-transparent p-3'>
<div className='!gap-8 w-full space-y-4 '>
<div className='flex flex-col gap-1 justify-start items-start'>
<h1 className='text-2xl md:text-[25px] font-bold truncate w-full'>{hours ?? count}</h1>
<h2 className='text-base md:text-[16px] font-medium text-[#282048] truncate w-full'>{title}</h2>
<span className='text-sm md:text-[14px] text-[#3D5A80] truncate w-full'>{date ?? description}</span>
<h2 className='text-base md:text-[16px] font-medium text-[#282048] dark:text-gray-400 truncate w-full'>{title}</h2>
<span className='text-sm md:text-[14px] text-[#3D5A80] dark:text-gray-400 truncate w-full'>{date ?? description}</span>
</div>
<Button
variant='outline'
className={clsxm(
'h-9 px-3 py-2',
'border border-gray-200',
'border border-gray-200 ',
'text-[#282048] text-sm',
'flex items-center',
'hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200'
'hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:border-gray-600'
)}
aria-label="View timesheet details"
onClick={onClick}>
Expand All @@ -55,7 +55,7 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
'h-16 w-16 rounded-lg p-5',
'flex items-center justify-center',
'text-white font-bold text-sm',
'shadow-lg',
'shadow-lg dark:shadow-gray-800',
classNameIcon
)}
aria-hidden="true">
Expand Down
31 changes: 15 additions & 16 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,30 +17,29 @@ export function TimesheetFilter({ closeModal, isOpen, openModal }: ITimesheetFil
params="AddManuelTime"
timeSheetStatus="ManagerTimesheet"
/>}
<div className="grid grid-cols-3 w-full">
<div className="col-span-1">
<div className="flex w-full justify-between items-center">
<div>
<FilterWithStatus
activeStatus="Rejected"
onToggle={(label) => {
console.log(label)
// If logging is needed, use proper logging service
}}
/>
</div>
<div className="col-span-1"></div>
<div className="col-span-1">
<div className='flex gap-2'>
<FrequencySelect />
<TimesheetFilterDate />
<TimeSheetFilterPopover />
<Button
onClick={openModal}
variant='outline'
className='bg-primary/5 dark:bg-primary-light h-10 font-medium'>
Add Time
</Button>
</div>

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

</>
)
}
17 changes: 9 additions & 8 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export function TimesheetFilterDate({
}
};

const actionButtonClass = "h-4 border-none dark:bg-dark-theme-light text-primary hover:bg-transparent hover:underline"

return (<>
<Popover>
Expand All @@ -92,7 +93,7 @@ export function TimesheetFilterDate({
aria-label="Select date range"
aria-expanded="false"
className={cn(
"w-[240px] justify-start text-left font-normal overflow-hidden text-clip",
"w-44 justify-start dark:bg-dark-theme h-[2.2rem] items-center gap-x-2 text-left font-normal overflow-hidden text-clip dark:bg-dark-theme-light",
!dateRange.from && "text-muted-foreground"
)}>
<CalendarIcon />
Expand All @@ -109,7 +110,7 @@ export function TimesheetFilterDate({
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 flex">
<PopoverContent className="w-auto p-0 flex dark:bg-dark-theme-light">
{isVisible && (
<div className="flex flex-col p-2 gap-2 translate-x-0 justify-between">
<div className="flex flex-col gap-2">
Expand All @@ -126,19 +127,19 @@ export function TimesheetFilterDate({
/>
</div>
<div className="flex w-full justify-end items-end">
<Button variant={'outline'} className="h-4 border-none text-primary hover:bg-transparent hover:text-primary hover:underline">Cancel</Button>
<Button variant={'outline'} className="h-4 border-none text-primary hover:bg-transparent hover:text-primary hover:underline">Apply</Button>
<Button variant={'outline'} className={`${actionButtonClass} hover:text-gray-500`}>Cancel</Button>
<Button variant={'outline'} className={`${actionButtonClass} hover:text-primary-dark`}>Apply</Button>
</div>
</div>
)
}
<div className="border border-slate-100 my-1"></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) => (
<Button
key={index}
variant="outline"
className="h-7 flex items-center justify-between border-none text-[12px] text-gray-700"
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)
handlePresetClick(label)
Expand Down Expand Up @@ -194,8 +195,8 @@ export function DatePickerFilter({
<div>
<DatePicker
buttonVariant={'link'}
className="dark:bg-dark--theme-light rounded-lg bg-white"
buttonClassName={'decoration-transparent flex items-center w-full bg-white dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-10 border dark:border-slate-600 rounded-md'}
className="dark:bg-dark--theme-light rounded-lg bg-white dark:text-gray-200"
buttonClassName={'decoration-transparent flex items-center w-full h-[2.2em] bg-white dark:text-gray-200 dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-[2.2rem] border dark:border-slate-600 rounded-md'}
customInput={<DatePickerInput date={date} label={label} />}
mode="single"
numberOfMonths={1}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
export function TimesheetView({ data }: { data?: IDailyPlan[] }) {
const t = useTranslations();
return (
<div className='grow h-full w-full bg-[#FFFFFF]'>
<div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
{data ? (
data.length > 0 ? (
<DataTableTimeSheet data={data} />
Expand Down
Loading

0 comments on commit 0b7e860

Please sign in to comment.