Skip to content

Commit

Permalink
[Feat]: Add a formatDate function to format dates in the Timesheet (#…
Browse files Browse the repository at this point in the history 
…3227)

* feat: Add a formatDate function to format dates in the Timesheet

* fix: sug coderabbitai
  • Loading branch information
@Innocent-Akim
Innocent-Akim authored Nov 4, 2024
1 parent 448fb96 commit 6b0786d
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 78 deletions.
63 changes: 38 additions & 25 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,46 @@
import { FilterWithStatus } from './FilterWithStatus';
import { FrequencySelect, TimeSheetFilterPopover, TimesheetFilterDate } from '.';
import { Button } from 'lib/components';

export function TimesheetFilter() {
import { AddManualTimeModal } from '@/lib/features/manual-time/add-manual-time-modal';
interface ITimesheetFilter {
isOpen: boolean,
openModal: () => void,
closeModal: () => void
}
export function TimesheetFilter({ closeModal, isOpen, openModal }: ITimesheetFilter) {
return (
<div className="grid grid-cols-3 w-full">
<div className="col-span-1">
<FilterWithStatus
activeStatus="Rejected"
onToggle={(label) => {
console.log(label)
}}
/>
</div>
<div className="col-span-1"></div>
<div className="col-span-1">
<div className='flex gap-2'>
<FrequencySelect />
<TimesheetFilterDate />
<TimeSheetFilterPopover />
<Button
onClick={() => null}
variant='outline'
className='bg-primary/5 dark:bg-primary-light h-10 font-medium'>
Add Time
</Button>
<>
{
isOpen && <AddManualTimeModal
closeModal={closeModal}
isOpen={isOpen}
params="AddManuelTime"
timeSheetStatus="ManagerTimesheet"
/>}
<div className="grid grid-cols-3 w-full">
<div className="col-span-1">
<FilterWithStatus
activeStatus="Rejected"
onToggle={(label) => {
console.log(label)
}}
/>
</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>
</div>
</div>

</>
)
}
14 changes: 11 additions & 3 deletions apps/web/app/[locale]/timesheet/[memberId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
import { withAuthentication } from 'lib/app/authenticator';
import { Breadcrumb, Container, Divider } from 'lib/components';
import { Footer, MainLayout } from 'lib/layout';
import { useAuthenticateUser, useDailyPlan, useLocalStorageState, useOrganizationTeams } from '@app/hooks';
import { useAuthenticateUser, useDailyPlan, useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
import { clsxm } from '@app/utils';
import { fullWidthState } from '@app/stores/fullWidth';
import { useAtomValue } from 'jotai';
Expand Down Expand Up @@ -36,7 +36,11 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
const { user } = useAuthenticateUser();

const { sortedPlans } = useDailyPlan();

const {
isOpen: isManualTimeModalOpen,
openModal: openManualTimeModal,
closeModal: closeManualTimeModal
} = useModal();
const username = user?.name || user?.firstName || user?.lastName || user?.username;

const [timesheetNavigator, setTimesheetNavigator] = useLocalStorageState<TimesheetViewMode>('timesheet-viewMode', 'ListView');
Expand Down Expand Up @@ -132,7 +136,11 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
</div>
{/* <DropdownMenuDemo /> */}
<div className='flex flex-col min-h-screen w-full border-1 rounded-lg bg-[#FFFFFF] p-4 mt-4'>
<TimesheetFilter />
<TimesheetFilter
closeModal={closeManualTimeModal}
openModal={openManualTimeModal}
isOpen={isManualTimeModalOpen}
/>
<div className='pt-4'>
{timesheetNavigator === 'ListView' ?
<TimesheetView data={sortedPlans} />
Expand Down
9 changes: 9 additions & 0 deletions apps/web/app/helpers/date.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,3 +216,12 @@ export const getGreeting = (t: TranslationHooks) => {
return t('pages.timesheet.GREETINGS.GOOD_EVENING');
}
}

export const formatDate = (dateStr: string | Date): string => {
try {
return moment(dateStr).format('ddd DD MMM YYYY');
} catch (error) {
console.error('Invalid date format:', error);
return '';
}
}
110 changes: 60 additions & 50 deletions apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ import { Badge } from '@components/ui/badge'
import { IDailyPlan } from "@/app/interfaces"
import { StatusType, getTimesheetButtons } from "@/app/[locale]/timesheet/[memberId]/components"
import { useTranslations } from "next-intl"
import { formatDate } from "@/app/helpers"



Expand Down Expand Up @@ -223,57 +224,66 @@ export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
))}
</TableHeader> */}
<TableBody className="w-full rounded-md">
<Accordion type="single" collapsible>
{Object.entries(groupedRows).map(([status, rows]) => (
<AccordionItem key={status} value={status} className="p-1 rounded">
<AccordionTrigger
style={{ backgroundColor: statusColor(status).bgOpacity }}
type="button"
className={clsxm(
"flex flex-row-reverse justify-end items-center w-full h-9 rounded-sm gap-x-2 hover:no-underline px-2",
statusColor(status).text,
)}
>
<div className="flex items-center space-x-1 justify-between w-full">
<div className="flex items-center space-x-1">
<div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
<div className="flex items-center gap-x-1">
<span className="text-base font-normal uppercase text-gray-400">
{status}
</span>
<span className="text-gray-400 text-[14px]">({rows.length})</span>
{data?.map((plan, index) => (
<div key={index}>
<div className="h-10 flex justify-between items-center w-full bg-[#eeeef1cc] rounded-md border-1 border-gray-400 px-5 text-[#71717A] font-medium">
<span>{formatDate(plan?.date)}</span>
<span>64:30h</span>
</div>
<Accordion type="single" collapsible>
{Object.entries(groupedRows).map(([status, rows]) => (
<AccordionItem key={status} value={status} className="p-1 rounded">
<AccordionTrigger
style={{ backgroundColor: statusColor(status).bgOpacity }}
type="button"
className={clsxm(
"flex flex-row-reverse justify-end items-center w-full h-9 rounded-sm gap-x-2 hover:no-underline px-2",
statusColor(status).text,
)}
>
<div className="flex items-center space-x-1 justify-between w-full">
<div className="flex items-center space-x-1">
<div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
<div className="flex items-center gap-x-1">
<span className="text-base font-normal uppercase text-gray-400">
{status}
</span>
<span className="text-gray-400 text-[14px]">({rows.length})</span>
</div>
<Badge variant={'outline'} className="flex items-center gap-x-2 rounded-md bg-[#E4E4E7]">
<span className="text-[#71717A]">Total</span>
<span>24:30h</span>
</Badge>
</div>
<div className="flex items-center gap-2 p-x-1">
{getTimesheetButtons(status as StatusType, t)}
</div>
</div>
<Badge variant={'outline'} className="flex items-center gap-x-2 rounded-md bg-[#E4E4E7]">
<span className="text-[#71717A]">Total</span>
<span>24:30h</span>
</Badge>
</div>
<div className="flex items-center gap-2 p-x-1">
{getTimesheetButtons(status as StatusType, t)}
</div>
</div>
</AccordionTrigger>
<AccordionContent className="flex flex-col w-full">
{rows.length ? (
rows.map((row) => (
<TableRow style={{ backgroundColor: statusColor(status).bgOpacity }}
key={row.id} className="min-w-full w-auto">
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id} className="w-full">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="text-center">No results.</TableCell>
</TableRow>
)}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</AccordionTrigger>
<AccordionContent className="flex flex-col w-full">
{rows.length ? (
rows.map((row) => (
<TableRow style={{ backgroundColor: statusColor(status).bgOpacity }}
key={row.id} className="min-w-full w-auto">
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id} className="w-full">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="text-center">No results.</TableCell>
</TableRow>
)}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}

</TableBody>
</Table>
</div>
Expand Down

0 comments on commit 6b0786d

Please sign in to comment.