Release

.cspell.json

@@ -32,6 +32,7 @@
 		"borde",
 		"Bowser",
 		"Btns",
+		"Konviser",
 		"Bugsnag",
 		"buildjet",
 		"cacheable",

apps/web/app/[locale]/all-teams/component.tsx

@@ -15,12 +15,14 @@ import { HeaderTabs } from '@components/pages/all-teams/header-tabs';
 import { allTeamsHeaderTabs } from '@app/stores/header-tabs';
 import AllTeamsMembers from 'lib/features/all-teams-members';
 import { MemberFilter } from 'lib/features/all-teams/all-team-members-filter';
+import { useOrganizationTeams } from '@app/hooks';
 
 function AllTeamsPage() {
 	const t = useTranslations();
 	const fullWidth = useRecoilValue(fullWidthState);
 	const view = useRecoilValue(allTeamsHeaderTabs);
 	const { filteredTeams, userManagedTeams } = useOrganizationAndTeamManagers();
+	const { isTrackingEnabled } = useOrganizationTeams();
 
 	const breadcrumb = [
 		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
@@ -33,7 +35,7 @@ function AllTeamsPage() {
 	if (userManagedTeams.length < 2) return <RedirectUser />;
 
 	return (
-		<MainLayout className="items-start">
+		<MainLayout showTimer={isTrackingEnabled} className="items-start">
 			<MainHeader fullWidth={fullWidth} className={'pb-2 pt-10 sticky top-20 z-50'}>
 				{/* Breadcrumb */}
 				<div className="flex flex-row items-start justify-between mb-5">

apps/web/app/[locale]/auth/passcode/component.tsx

@@ -27,6 +27,8 @@ import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';
 import SocialLogins from '../social-logins-buttons';
 import { useSession } from 'next-auth/react';
 import { LAST_WORSPACE_AND_TEAM, USER_SAW_OUTSTANDING_NOTIFICATION } from '@app/constants';
+import { MdOutlineKeyboardArrowDown } from 'react-icons/md';
+import { cn } from 'lib/utils';
 
 function AuthPasscode() {
 	const form = useAuthenticationPasscode();
@@ -78,7 +80,8 @@ function AuthPasscode() {
 					{form.authScreen.screen === 'workspace' && (
 						<WorkSpaceScreen form={form} className={clsxm('w-full')} />
 					)}
-				</div>				
+				</div>
+				{/* Social logins */}
 				<SocialLogins />
 			</div>
 		</AuthLayout>
@@ -412,6 +415,12 @@ type IWorkSpace = {
 export function WorkSpaceComponent(props: IWorkSpace) {
 	const t = useTranslations();
 
+	const [expandedWorkspace, setExpandedWorkspace] = useState(props.selectedWorkspace);
+
+	useEffect(() => {
+		setExpandedWorkspace(props.selectedWorkspace);
+	}, [props.selectedWorkspace]);
+
 	return (
 		<form
 			className={clsxm(props.className, 'flex justify-center w-full')}
@@ -428,13 +437,28 @@ export function WorkSpaceComponent(props: IWorkSpace) {
 							{props.workspaces?.map((worksace, index) => (
 								<div
 									key={index}
-									className={`w-full flex flex-col border border-[#0000001A] dark:border-[#34353D] ${
-										props.selectedWorkspace === index ? 'bg-[#FCFCFC] dark:bg-[#1F2024]' : ''
-									} hover:bg-[#FCFCFC] dark:hover:bg-[#1F2024] rounded-xl`}
+									className={`w-full overflow-hidden h-16 ${expandedWorkspace === index && 'h-auto'}   flex flex-col border border-[#0000001A] dark:border-[#34353D] ${
+										props.selectedWorkspace === index
+											? 'bg-[#FCFCFC] -order-1 dark:bg-[#1F2024]'
+											: ''
+									} hover:bg-[#FCFCFC]  dark:hover:bg-[#1F2024] rounded-xl`}
 								>
 									<div className="text-base font-medium py-[1.25rem] px-4 flex flex-col gap-[1.0625rem]">
 										<div className="flex justify-between">
-											<span>{worksace.user.tenant.name}</span>
+											<div
+												onClick={() => setExpandedWorkspace(index)}
+												className="flex cursor-pointer items-center justify-center gap-1"
+											>
+												<span>{worksace.user.tenant.name}</span>
+												<span
+													className={cn(
+														'h-6 w-6 flex items-center justify-center transition-transform',
+														expandedWorkspace === index && 'rotate-180'
+													)}
+												>
+													<MdOutlineKeyboardArrowDown />
+												</span>
+											</div>
 											<span
 												className="hover:cursor-pointer"
 												onClick={() => {
@@ -456,7 +480,9 @@ export function WorkSpaceComponent(props: IWorkSpace) {
 												)}
 											</span>
 										</div>
-										<span className="bg-[#E5E5E5] w-full h-[1px]"></span>
+										<span
+											className={`bg-[#E5E5E5] w-full h-[1px] hidden ${expandedWorkspace === index && 'block'}`}
+										></span>
 										{/* <div className="w-full h-[1px] bg-[#E5E5E5] dark:bg-[#34353D]"></div> */}
 										<div className="flex flex-col gap-4 px-5 py-1.5">
 											{worksace.current_teams?.map((team) => (

apps/web/app/[locale]/calendar/component.tsx

@@ -1,31 +1,150 @@
 import { clsxm } from "@app/utils";
+import { DatePicker } from "@components/ui/DatePicker";
 import { QueueListIcon } from "@heroicons/react/20/solid";
+import { addDays, format } from "date-fns";
 import { Button } from "lib/components";
+import { TimeSheetFilter, timesheetCalendar } from "lib/features/integrations/calendar";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@components/ui/select"
+import { cn } from "lib/utils";
+import { CalendarDays } from "lucide-react";
+import React from "react";
+import { DateRange } from "react-day-picker";
 import { LuCalendarDays } from "react-icons/lu";
 
-export function HeadCalendar({ openModal }: { openModal?: () => void }) {
+export function HeadCalendar({
+    openModal,
+    timesheet,
+    setCalendarTimeSheet
+}: {
+    openModal?: () => void,
+    timesheet: timesheetCalendar,
+    setCalendarTimeSheet: React.Dispatch<React.SetStateAction<timesheetCalendar>>
+}) {
+
     return (
         <div className="flex justify-between items-center mt-10 bg-white dark:bg-dark-high py-2">
-            <h1 className="text-4xl font-semibold">CALENDAR</h1>
+            <h1 className="text-4xl font-semibold">{timesheet === 'Calendar' ? "Calendar" : "Timesheet"}</h1>
             <div className='flex items-center space-x-3'>
                 <button
-                    className='hover:bg-gray-100 text-xl h-10 w-10 rounded-lg flex items-center justify-center'
+                    onClick={() => setCalendarTimeSheet('TimeSheet')}
+                    className={clsxm('hover:bg-gray-200 dark:hover:bg-gray-700 text-xl h-10 w-10 rounded-lg flex items-center justify-center',
+                        `${timesheet === 'TimeSheet' ? 'bg-gray-200 dark:bg-gray-700' : ''}`
+                    )}
                 >
                     <QueueListIcon className={clsxm('w-5 h-5')} />
                 </button>
                 <button
-                    className='bg-gray-100 text-xl h-10 w-10 rounded-lg flex items-center justify-center'
-                >
+                    onClick={() => setCalendarTimeSheet('Calendar')}
+                    className={clsxm('hover:bg-gray-200 dark:hover:bg-gray-700 text-xl h-10 w-10 rounded-lg flex items-center justify-center',
+                        `${timesheet === 'Calendar' ? 'bg-gray-200 dark:bg-gray-700' : ''}`
+                    )} >
                     <LuCalendarDays />
                 </button>
                 <Button
                     onClick={openModal}
                     variant='primary'
-                    className='bg-primary dark:bg-primary-light'
-                >
+                    className='bg-primary dark:bg-primary-light'>
                     Add Time
                 </Button>
             </div>
         </div>
     );
 }
+
+
+export function HeadTimeSheet({ timesheet }: { timesheet?: timesheetCalendar }) {
+
+    const [date, setDate] = React.useState<DateRange | undefined>({
+        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>
+                            <TimeSheetFilter />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+
+
+export function CustomSelect() {
+    const [selectedValue, setSelectedValue] = React.useState<string | undefined>(undefined);
+
+    const handleSelectChange = (value: string) => {
+        setSelectedValue(value);
+    };
+
+    return (
+        <Select
+            value={selectedValue}
+            onValueChange={handleSelectChange}
+        >
+            <SelectTrigger className="w-[180px] border border-gray-200 dark:border-gray-700  bg-transparent">
+                <SelectValue placeholder="Select a daily" />
+            </SelectTrigger>
+            <SelectContent>
+                <SelectGroup>
+                    <SelectItem value="daily">Daily</SelectItem>
+                    <SelectItem value="weekly">Weekly</SelectItem>
+                    <SelectItem value="monthly">Monthly</SelectItem>
+                </SelectGroup>
+            </SelectContent>
+        </Select>
+    );
+}

apps/web/app/[locale]/calendar/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useModal, useOrganizationTeams } from '@app/hooks';
+import { useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { clsxm } from '@app/utils';
 import HeaderTabs from '@components/pages/main/header-tabs';
@@ -13,13 +13,15 @@ import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import React, { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
-import { HeadCalendar } from './component';
+import { HeadCalendar, HeadTimeSheet } from './component';
 import { AddManualTimeModal } from 'lib/features/manual-time/add-manual-time-modal';
+import { SetupTimeSheet, timesheetCalendar } from 'lib/features/integrations/calendar';
 
 const CalendarPage = () => {
     const t = useTranslations();
     const fullWidth = useRecoilValue(fullWidthState);
     const { activeTeam, isTrackingEnabled } = useOrganizationTeams();
+    const [calendarTimeSheet, setCalendarTimeSheet] = useLocalStorageState<timesheetCalendar>('calendar-timesheet', 'Calendar')
     const {
         isOpen: isManualTimeModalOpen,
         openModal: openManualTimeModal,
@@ -37,23 +39,33 @@ const CalendarPage = () => {
         [activeTeam?.name, currentLocale, t]
     );
 
+    const renderComponent = () => {
+        switch (calendarTimeSheet) {
+            case 'Calendar':
+                return <SetupFullCalendar />;
+            case 'TimeSheet':
+                return <SetupTimeSheet />;
+            default:
+                return null;
+        }
+    };
     return (
         <>
 
             <MainLayout
                 showTimer={isTrackingEnabled}
                 footerClassName="hidden"
-                className="h-[calc(100vh-22px)]"
+                className="h-[calc(100vh-22px)] shadow-xl"
             >
                 <AddManualTimeModal
                     closeModal={closeManualTimeModal}
                     isOpen={isManualTimeModalOpen}
                     params='AddManuelTime'
                 />
 
-                <div className="h-[263.4px] z-10 bg-white dark:bg-dark-high fixed w-full"></div>
+
                 <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'
+                    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 '
                 >
                     <Container fullWidth={fullWidth}>
                         <div className="flex bg-white dark:bg-dark-high flex-row items-start justify-between mt-12">
@@ -65,11 +77,22 @@ const CalendarPage = () => {
                                 <HeaderTabs kanban={true} linkAll={true} />
                             </div>
                         </div>
-                        <HeadCalendar openModal={openManualTimeModal} />
+                        <div className='flex flex-col w-full'>
+                            <HeadCalendar
+                                openModal={openManualTimeModal}
+                                timesheet={calendarTimeSheet}
+                                setCalendarTimeSheet={setCalendarTimeSheet} />
+                            <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
+                            <HeadTimeSheet timesheet={calendarTimeSheet} />
+
+                        </div>
                     </Container>
                 </div>
-                <div className='mt-[256px] mb-24'>
-                    <SetupFullCalendar />
+
+                <div className='mt-[325px] mb-40'>
+                    <Container fullWidth={fullWidth}>
+                        {renderComponent()}
+                    </Container>
                 </div>
             </MainLayout>
             <div className="bg-white dark:bg-[#1e2025] w-screen z-[5000] fixed bottom-0">

apps/web/app/[locale]/kanban/page.tsx

@@ -167,8 +167,8 @@ const Kanban = () => {
 										key={tab.name}
 										onClick={() => setActiveTab(tab.value)}
 										className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${activeTab === tab.value
-												? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
-												: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
+											? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
+											: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
 											}`}
 										style={{
 											borderBottomWidth: '3px',

apps/web/app/[locale]/page-component.tsx

@@ -64,7 +64,11 @@ function MainPage() {
 		<>
 			<div className="flex flex-col h-screen justify-between">
 				{/* <div className="flex-grow "> */}
-				<MainLayout className="h-full" footerClassName={clsxm('')}>
+				<MainLayout
+					showTimer={headerSize <= 11.8 && isTrackingEnabled}
+					className="h-full"
+					footerClassName={clsxm('')}
+				>
 					<ChatwootWidget />
 					<div className=" h-full">
 						<ResizablePanelGroup direction="vertical">