Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: refact timesheet #2940

Merged
merged 4 commits into from
Aug 22, 2024
Merged

Feat: refact timesheet #2940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
16b3e4b
feat: refact timesheet
Innocent-Akim Aug 20, 2024
b7460e9
fix: cspell
Innocent-Akim Aug 20, 2024
2bd282f
fix: setCalendarTimeSheet is defined but never used.
Innocent-Akim Aug 20, 2024
7b77402
improv: timesheet
Innocent-Akim Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .cspell.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading