Skip to content

Commit

Permalink
Feat: refact timesheet (#2940)
Browse files Browse the repository at this point in the history 
* feat: refact timesheet

* fix: cspell

* fix: setCalendarTimeSheet is defined but never used.

* improv: timesheet
  • Loading branch information
@Innocent-Akim
Innocent-Akim authored Aug 22, 2024
1 parent 85619f1 commit b3c0138
Show file tree
Hide file tree
Showing 11 changed files with 365 additions and 187 deletions.
1 change: 1 addition & 0 deletions .cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"Bowser",
"Btns",
"Konviser",
"Ruslan",
"Bugsnag",
"buildjet",
"cacheable",
Expand Down
103 changes: 57 additions & 46 deletions apps/web/app/[locale]/calendar/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { CalendarDays } from "lucide-react";
import React from "react";
import { DateRange } from "react-day-picker";
import { LuCalendarDays } from "react-icons/lu";
import { Input } from "@components/ui/input";

export function HeadCalendar({
openModal,
Expand Down Expand Up @@ -65,54 +66,65 @@ export function HeadTimeSheet({ timesheet }: { timesheet?: timesheetCalendar })
from: new Date(2022, 0, 20),
to: addDays(new Date(2022, 0, 20), 20)
});
console.log(timesheet);
return (
<div>
<div className='flex items-center justify-between w-full dark:!bg-dark--theme h-28'>
{timesheet === 'TimeSheet' && (
<div className='flex items-center space-x-5 dark:!bg-dark--theme '>
<div>
<CustomSelect />
</div>
<DatePicker
buttonVariant={'link'}
className="dark:bg-dark--theme-light rounded-lg"
buttonClassName={'decoration-transparent flex items-center w-full border-gray-300 justify-start text-left font-normal text-black h-10 border dark:border-slate-600 rounded-md"'}
customInput={
<>
<CalendarDays className="h-5 w-5 dark:text-gray-500" />
<Button
variant={"outline"}
className={cn(
"w-[230px] justify-start text-left font-normal text-black h-10 border border-transparent dark:border-transparent",
!date && "text-muted-foreground"
)}>
{date?.from ? (
date.to ? (
<>
{format(date.from, "LLL dd, y")} -{" "}
{format(date.to, "LLL dd, y")}
</>
) : (
format(date.from, "LLL dd, y")
)
) : (
<span>Pick a date</span>
)}
</Button>
</>
}
mode={'range'}
numberOfMonths={2}
initialFocus
defaultMonth={date?.from}
selected={date}
onSelect={(value) => {
value && setDate(value);
}}
<div className="flex justify-between items-center w-full p-2 gap-x-3">
<Input
className="border w-1/4 dark:border-gray-700"
placeholder="Filter time logs"
required
value=""
name="filter"
/>
<div>
<TimeSheetFilter />

<div className='flex items-center justify-end space-x-5 dark:!bg-dark--theme w-full p-2 '>
<div>
<CustomSelect />
</div>
<div className="">
<DatePicker
buttonVariant={'link'}
className="dark:bg-dark--theme-light rounded-lg"
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"'}
customInput={
<>
<CalendarDays className="h-5 w-5 dark:text-gray-500" />
<Button
variant={"outline"}
className={cn(
"w-[260px] justify-start text-left font-normal text-black h-10 border border-transparent dark:border-transparent ",
!date && "text-muted-foreground"
)}>
{date?.from ? (
date.to ? (
<>
{format(date.from, "LLL dd, y")} -{" "}
{format(date.to, "LLL dd, y")}
</>
) : (
format(date.from, "LLL dd, y")
)
) : (
<span>Pick a date</span>
)}
</Button>
</>
}
mode={'range'}
numberOfMonths={2}
initialFocus
defaultMonth={date?.from}
selected={date}
onSelect={(value) => {
value && setDate(value);
}}
/>
</div>
<div>
<TimeSheetFilter />
</div>
</div>
</div>
)}
Expand All @@ -133,9 +145,8 @@ export function CustomSelect() {
return (
<Select
value={selectedValue}
onValueChange={handleSelectChange}
>
<SelectTrigger className="w-[180px] border border-gray-200 dark:border-gray-700 bg-transparent">
onValueChange={handleSelectChange}>
<SelectTrigger className="w-[180px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light">
<SelectValue placeholder="Select a daily" />
</SelectTrigger>
<SelectContent>
Expand Down
17 changes: 7 additions & 10 deletions apps/web/app/[locale]/calendar/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';
import React, { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { HeadCalendar, HeadTimeSheet } from './component';
import { HeadCalendar } from './component';
import { AddManualTimeModal } from 'lib/features/manual-time/add-manual-time-modal';
import { SetupTimeSheet, timesheetCalendar } from 'lib/features/integrations/calendar';

Expand Down Expand Up @@ -44,7 +44,7 @@ const CalendarPage = () => {
case 'Calendar':
return <SetupFullCalendar />;
case 'TimeSheet':
return <SetupTimeSheet />;
return <SetupTimeSheet timesheet={calendarTimeSheet} />
default:
return null;
}
Expand All @@ -55,15 +55,13 @@ const CalendarPage = () => {
<MainLayout
showTimer={isTrackingEnabled}
footerClassName="hidden"
className="h-[calc(100vh-22px)] shadow-xl"
className="h-full shadow-xl"
>
<AddManualTimeModal
closeModal={closeManualTimeModal}
isOpen={isManualTimeModalOpen}
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 '
>
Expand All @@ -81,15 +79,14 @@ const CalendarPage = () => {
<HeadCalendar
openModal={openManualTimeModal}
timesheet={calendarTimeSheet}
setCalendarTimeSheet={setCalendarTimeSheet} />
<div className='border border-gray-100 dark:border-gray-700 w-full'></div>
<HeadTimeSheet timesheet={calendarTimeSheet} />
setCalendarTimeSheet={setCalendarTimeSheet}

/>
<div className='border border-gray-100 dark:border-gray-700 w-full'></div>
</div>
</Container>
</div>

<div className='mt-[325px] mb-40'>
<div className='mt-[15vh] mb-32'>
<Container fullWidth={fullWidth}>
{renderComponent()}
</Container>
Expand Down
36 changes: 36 additions & 0 deletions apps/web/components/ui/badge.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "lib/utils"

const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)

export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}

export { Badge, badgeVariants }
17 changes: 16 additions & 1 deletion apps/web/lib/features/integrations/calendar/calendar-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,22 @@ const CalendarComponent: React.FC<CalendarComponentProps> = ({
dateClick={handleDateClick}
eventDrop={handleEventDrop}
eventContent={renderEventContent}
editable
editable={true}
dragScroll={true}
locale={"pt-br"}
timeZone={"UTF"}
allDaySlot={false}
nowIndicator={true}
themeSystem='bootstrap'
contentHeight='auto'
select={(selected) => {
console.log(selected.start)
}}
eventResize={(resize) => {
console.log(resize.el.COMMENT_NODE)
}}

// dayPopoverFormat={}
/>
<style jsx global>{`
.fc .fc-daygrid-day.fc-day-today {
Expand Down
91 changes: 91 additions & 0 deletions apps/web/lib/features/integrations/calendar/helper-calendar.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,92 @@
export type timesheetCalendar = 'TimeSheet' | 'Calendar';

export const statusOptions = [
{ value: "Approved", label: "Approved" },
{ value: "Pending", label: "Pending" },
{ value: "Rejected", label: "Rejected" },
];

export type TimeSheet = {
id: number,
task: string,
name: string,
description: string,
employee: string,
status: "Approved" | "Pending" | "Rejected",
time: string
}

export const dataSourceTimeSheet: TimeSheet[] = [
{
id: 1,
task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
name: "Gauzy Platform SaaS",
description: "Members count 11",
employee: "Ruslan Konviser",
status: "Approved",
time: '08:00h'
},
{
id: 2,
task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
name: "Gauzy Platform SaaS",
description: "Members count 11",
employee: "Ruslan Konviser",
status: "Pending",
time: '08:00h'
},
{
id: 3,
task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
name: "Gauzy Platform SaaS",
description: "Members count 11",
employee: "Ruslan Konviser",
status: "Approved",
time: '08:00h'
},
{
id: 4,
task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
name: "Gauzy Platform SaaS",
description: "Members count 11",
employee: "Ruslan Konviser",
status: "Pending",
time: '08:00h'
},
{
id: 5,
task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
name: "Gauzy Platform SaaS",
description: "Members count 11",
employee: "Ruslan Konviser",
status: "Rejected",
time: '06:00h'
},
{
id: 6,
task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
name: "Gauzy Platform SaaS",
description: "Members count 11",
employee: "Ruslan Konviser",
status: "Pending",
time: '06:00h'
},
{
id: 7,
task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
name: "Gauzy Platform SaaS",
description: "Members count 11",
employee: "Ruslan Konviser",
status: "Approved",
time: '06:00h'
},
{
id: 8,
task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
name: "Gauzy Platform SaaS",
description: "Members count 11",
employee: "Ruslan Konviser",
status: "Approved",
time: '06:00h'
},
]
Loading

0 comments on commit b3c0138

Please sign in to comment.