{["Today", "Last 7 days", "Last 30 days", `This year (${new Date().getFullYear()})`, "Custom Date Range"].map((label, index) => (
@@ -185,7 +208,9 @@ export function DatePickerFilter({
}
}}
modifiersClassNames={{
- disabled: 'text-gray-300 cursor-not-allowed',
+ disabled: 'text-[#6989AA] cursor-not-allowed',
+ selected: '!rounded-full bg-primary text-white',
+ today: '!rounded-full bg-[#BCCAD9] text-white'
}}
disabled={[
...(minDate ? [{ before: minDate }] : []),
diff --git a/apps/web/app/[locale]/timesheet/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
similarity index 51%
rename from apps/web/app/[locale]/timesheet/components/TimesheetView.tsx
rename to apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
index 3d29bb856..d46a877b1 100644
--- a/apps/web/app/[locale]/timesheet/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -1,9 +1,10 @@
+import { IDailyPlan } from '@/app/interfaces'
import { DataTableTimeSheet } from 'lib/features/integrations/calendar'
-export function TimesheetView() {
+export function TimesheetView({ data }: { data?: IDailyPlan[] }) {
return (
-
+
)
}
diff --git a/apps/web/app/[locale]/timesheet/components/index.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
similarity index 76%
rename from apps/web/app/[locale]/timesheet/components/index.tsx
rename to apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
index ed9e14172..a5c0da311 100644
--- a/apps/web/app/[locale]/timesheet/components/index.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
@@ -5,3 +5,5 @@ export * from './TimesheetFilter';
export * from './FrequencySelect';
export * from './FilterWithStatus';
export * from './TimesheetFilterDate';
+export * from './TimeSheetFilterPopover'
+export * from './TimesheetAction'
diff --git a/apps/web/app/[locale]/timesheet/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
similarity index 89%
rename from apps/web/app/[locale]/timesheet/page.tsx
rename to apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index 985677e29..3e57d8e00 100644
--- a/apps/web/app/[locale]/timesheet/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -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 { useLocalStorageState, useOrganizationTeams } from '@app/hooks';
+import { useAuthenticateUser, useDailyPlan, useLocalStorageState, useOrganizationTeams } from '@app/hooks';
import { clsxm } from '@app/utils';
import { fullWidthState } from '@app/stores/fullWidth';
import { useAtomValue } from 'jotai';
@@ -14,6 +14,7 @@ import { CalendarView, TimesheetCard, TimesheetFilter, TimesheetView } from './c
import { CalendarDaysIcon, Clock, User2 } from 'lucide-react';
import { GrTask } from "react-icons/gr";
import { GoSearch } from "react-icons/go";
+import { getGreeting } from '@/app/helpers';
type TimesheetViewMode = "ListView" | "CalendarView";
@@ -28,21 +29,26 @@ interface FooterTimeSheetProps {
fullWidth: boolean;
}
-function TimeSheetPage() {
+const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memberId: string } }) {
const t = useTranslations();
+ const { user } = useAuthenticateUser();
+
+ const { sortedPlans } = useDailyPlan();
+
+ const username = user?.name || user?.firstName || user?.lastName || user?.username;
const [timesheetNavigator, setTimesheetNavigator] = useLocalStorageState
('timesheet-viewMode', 'ListView');
const fullWidth = useAtomValue(fullWidthState);
const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
- const params = useParams<{ locale: string }>();
- const currentLocale = params ? params.locale : null;
+ const paramsUrl = useParams<{ locale: string }>();
+ const currentLocale = paramsUrl ? paramsUrl.locale : null;
const breadcrumbPath = useMemo(
() => [
{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
{ title: activeTeam?.name || '', href: '/' },
- { title: 'Timesheet', href: `/${currentLocale}/timesheet` }
+ { title: 'Timesheet', href: `/${currentLocale}/timesheet/${params.memberId}` }
],
[activeTeam?.name, currentLocale, t]
);
@@ -66,7 +72,7 @@ function TimeSheetPage() {
-
Good morning, Ruslan !
+ {getGreeting()}, {username} !
This is your personal timesheet dashboard, showing you what needs your attention now.
@@ -113,6 +119,9 @@ function TimeSheetPage() {
@@ -122,7 +131,7 @@ function TimeSheetPage() {
{timesheetNavigator === 'ListView' ?
-
+
:
}
@@ -133,9 +142,9 @@ function TimeSheetPage() {
)
-}
+})
-export default withAuthentication(TimeSheetPage, { displayName: 'TimeSheet' });
+export default withAuthentication(TimeSheet, { displayName: 'TimeSheet' });
const FooterTimeSheet: React.FC
= ({ fullWidth }) => {
return (
diff --git a/apps/web/app/helpers/date.ts b/apps/web/app/helpers/date.ts
index 5bc4349fa..c038dceeb 100644
--- a/apps/web/app/helpers/date.ts
+++ b/apps/web/app/helpers/date.ts
@@ -198,3 +198,20 @@ export function formatTimeString(timeString: string): string {
return result.length ? result : '0h 00m';
}
+
+export const getGreeting = () => {
+ const GREETING_TIMES = {
+ MORNING_START: 5,
+ AFTERNOON_START: 12,
+ EVENING_START: 18
+ } as const
+ const currentHour = new Date().getHours();
+
+ if (currentHour >= GREETING_TIMES.MORNING_START && currentHour < GREETING_TIMES.AFTERNOON_START) {
+ return "Good morning";
+ } else if (currentHour >= GREETING_TIMES.AFTERNOON_START && currentHour < GREETING_TIMES.EVENING_START) {
+ return "Good afternoon";
+ } else {
+ return "Good evening";
+ }
+}
diff --git a/apps/web/components/app-sidebar.tsx b/apps/web/components/app-sidebar.tsx
index 8465d56c1..44536f9a5 100644
--- a/apps/web/components/app-sidebar.tsx
+++ b/apps/web/components/app-sidebar.tsx
@@ -69,60 +69,60 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
items:
favoriteTasks && favoriteTasks.length > 0
? favoriteTasks
- .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
- .map((task, index) => ({
- title: task?.title,
- url: '#',
- component: (
-
-
-
- {task && (
- // Show task issue and task number
-
- )}
-
-
- #{task?.taskNumber}
-
-
- {task?.title}
-
+ .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
+ .map((task, index) => ({
+ title: task?.title,
+ url: '#',
+ component: (
+
+
+
+ {task && (
+ // Show task issue and task number
+
+ )}
+
+
+ #{task?.taskNumber}
+
+
+ {task?.title}
-
- toggleFavorite(task)}
- />
-
-
- )
- }))
+
+
+ toggleFavorite(task)}
+ />
+
+
+ )
+ }))
: [
- {
- title: t('common.NO_FAVORITE_TASK'),
- url: '#',
- label: 'no-task'
- }
- ]
+ {
+ title: t('common.NO_FAVORITE_TASK'),
+ url: '#',
+ label: 'no-task'
+ }
+ ]
},
{
title: t('sidebar.TASKS'),
@@ -142,73 +142,73 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
},
...(userManagedTeams && userManagedTeams.length > 0
? [
- {
- title: t('sidebar.PROJECTS'),
- label: 'projects',
- url: '#',
- icon: FolderKanban,
- items: [
- ...userManagedTeams
- .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
- .map((team, index) => ({
- title: team.name,
- url: '#',
- component: (
-
-
-
- )
- })),
- {
- title: t('common.NO_PROJECT'),
+ {
+ title: t('sidebar.PROJECTS'),
+ label: 'projects',
+ url: '#',
+ icon: FolderKanban,
+ items: [
+ ...userManagedTeams
+ .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+ .map((team, index) => ({
+ title: team.name,
url: '#',
component: (
-
-
)
- }
- ]
- }
- ]
+ })),
+ {
+ title: t('common.NO_PROJECT'),
+ url: '#',
+ component: (
+
+
+
+ )
+ }
+ ]
+ }
+ ]
: []),
{
title: t('sidebar.MY_WORKS'),
@@ -227,42 +227,42 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
},
...(isTeamManager
? [
- {
- title: t('sidebar.REPORTS'),
- url: '#',
- icon: SquareActivity,
- items: [
- {
- title: t('sidebar.TIMESHEETS'),
- url: '#'
- },
- {
- title: t('sidebar.MANUAL_TIME_EDIT'),
- url: '#'
- },
- {
- title: t('sidebar.WEEKLY_LIMIT'),
- url: '#'
- },
- {
- title: t('sidebar.ACTUAL_AND_EXPECTED_HOURS'),
- url: '#'
- },
- {
- title: t('sidebar.PAYMENTS_DUE'),
- url: '#'
- },
- {
- title: t('sidebar.PROJECT_BUDGET'),
- url: '#'
- },
- {
- title: t('sidebar.TIME_AND_ACTIVITY'),
- url: '#'
- }
- ]
- }
- ]
+ {
+ title: t('sidebar.REPORTS'),
+ url: '#',
+ icon: SquareActivity,
+ items: [
+ {
+ title: t('sidebar.TIMESHEETS'),
+ url: `/timesheet/${user?.id}?name=${username || ''}`
+ },
+ {
+ title: t('sidebar.MANUAL_TIME_EDIT'),
+ url: '#'
+ },
+ {
+ title: t('sidebar.WEEKLY_LIMIT'),
+ url: '#'
+ },
+ {
+ title: t('sidebar.ACTUAL_AND_EXPECTED_HOURS'),
+ url: '#'
+ },
+ {
+ title: t('sidebar.PAYMENTS_DUE'),
+ url: '#'
+ },
+ {
+ title: t('sidebar.PROJECT_BUDGET'),
+ url: '#'
+ },
+ {
+ title: t('sidebar.TIME_AND_ACTIVITY'),
+ url: '#'
+ }
+ ]
+ }
+ ]
: [])
]
};
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
index 8a9ceaf8e..09c74e340 100644
--- a/apps/web/components/ui/data-table.tsx
+++ b/apps/web/components/ui/data-table.tsx
@@ -86,9 +86,9 @@ function DataTable({ columns, data, footerRows, isHeader }: DataT
{header.isPlaceholder
? null
: flexRender(
- header.column.columnDef.header,
- header.getContext()
- )}
+ header.column.columnDef.header,
+ header.getContext()
+ )}
diff --git a/apps/web/lib/components/custom-select/multi-select.tsx b/apps/web/lib/components/custom-select/multi-select.tsx
index a88cb2e65..3b8a298b4 100644
--- a/apps/web/lib/components/custom-select/multi-select.tsx
+++ b/apps/web/lib/components/custom-select/multi-select.tsx
@@ -1,8 +1,10 @@
+import { clsxm } from '@/app/utils';
import { Button } from '@components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
import { cn } from 'lib/utils';
import { useEffect, useState, useRef } from 'react';
import { MdOutlineKeyboardArrowDown, MdClose } from 'react-icons/md';
+import { statusColor } from '..';
interface MultiSelectProps {
items: T[];
@@ -134,7 +136,11 @@ export function MultiSelect({
{selectedItems.map((item) => (
{itemToString(item)}