From 5ebd5816f709e8a5949ed4c01310c703f0bdea90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tommy=20Barv=C3=A5g?= Date: Fri, 17 Mar 2023 14:08:51 +0100 Subject: [PATCH] Feature/app router (#85) * Migrate to next app router * Run next/font codemod * Add month navigation with own pages to persist route * Added user avatar handling, update user salary with dialog and many other UI changes * Add work day detail editing * Add yearly economic overview --- .eslintrc | 7 - .eslintrc.json | 22 + .prettierignore | 9 +- .prettierrc | 3 +- .vscode/settings.json | 22 +- app/(auth)/layout.tsx | 8 + app/(auth)/login/page.tsx | 26 + .../dashboard/_components/avatar.tsx | 22 + .../calendar-month-with-salary.tsx | 99 + .../dashboard/_components/calendar-month.tsx | 84 + .../dashboard/_components/calendar-year.tsx | 72 + .../_components/company-benefits.tsx | 43 + .../dashboard/_components/footer.tsx | 72 + .../dashboard/_components/next-paycheck.tsx | 22 + .../dashboard/_components/salary-form.tsx | 22 + .../_components/yearly-economic-overview.tsx | 52 + app/(dashboard)/dashboard/layout.tsx | 38 + app/(dashboard)/dashboard/page.tsx | 38 + app/(dashboard)/dashboard/profile/page.tsx | 21 + .../year/[year]/month/[month]/page.tsx | 38 + .../dashboard/year/[year]/month/page.tsx | 21 + .../dashboard/year/[year]/page.tsx | 19 + app/(dashboard)/dashboard/year/layout.tsx | 20 + app/(dashboard)/dashboard/year/page.tsx | 11 + app/layout.tsx | 36 + app/route.ts | 5 + components/auth/LoginButtons.tsx | 32 - components/auth/hooks/index.tsx | 3 - components/auth/hooks/useAuthProviders.tsx | 8 - components/auth/index.tsx | 4 - components/auth/login-button.tsx | 24 + components/calendar/calendar-day.tsx | 92 + components/calendar/components/calendar.tsx | 220 -- .../calendar/components/calendarDay.tsx | 264 --- components/calendar/components/index.ts | 4 - components/calendar/index.ts | 4 - components/calendar/month-select.tsx | 77 + .../calendar/providers/calendarProvider.tsx | 198 -- components/calendar/providers/index.ts | 3 - components/companyBenefits.tsx | 129 -- components/container.tsx | 14 - .../feedback/components/feedbackDialog.tsx | 21 - .../components/feedbackEmojiSelector.tsx | 94 - .../feedback/components/feedbackForm.tsx | 85 - .../feedback/components/feedbackPopover.tsx | 26 - components/feedback/components/index.ts | 6 - components/feedback/index.ts | 3 - components/form/controlledCheckbox.tsx | 49 - components/form/index.ts | 3 - components/header.tsx | 56 - components/{icons/svgs/logo.tsx => icons.tsx} | 95 +- components/icons/index.tsx | 1 - components/layouts/authenticatedLayout.tsx | 169 -- components/salary/components/index.ts | 5 - .../salary/components/salaryStatistics.tsx | 68 - .../salary/components/yearStatistic.tsx | 49 - .../salary/components/yearlyEarnings.tsx | 47 - components/salary/index.ts | 4 - components/salary/providers/index.ts | 3 - .../salary/providers/salaryProvider.tsx | 72 - components/salary/salary-details-card.tsx | 19 + components/statistic.tsx | 51 - components/statisticGroup.tsx | 24 - components/theme-provider.tsx | 8 + components/theme-select.tsx | 60 + components/theme/index.ts | 9 - components/theme/themeSelector.tsx | 116 - components/ui/alert.tsx | 114 - components/ui/appearInBox.tsx | 43 - components/ui/box.tsx | 27 +- components/ui/button.tsx | 412 +--- components/ui/card.tsx | 126 +- components/ui/checkbox.tsx | 43 +- components/ui/container.tsx | 61 - components/ui/dialog.tsx | 248 +- components/ui/expandingHelperText.tsx | 42 - components/ui/fieldContainer.tsx | 33 - components/ui/fieldset.tsx | 10 - components/ui/flex-item.tsx | 22 + components/ui/flex.tsx | 236 +- components/ui/flexItem.tsx | 111 - components/ui/footer.tsx | 19 - components/ui/form.tsx | 7 - components/ui/grid.tsx | 184 -- components/ui/heading.tsx | 57 - components/ui/hover-card.tsx | 32 + components/ui/iconButton.tsx | 290 --- components/ui/image.tsx | 6 - components/ui/index.ts | 130 -- components/ui/info-button.tsx | 55 + components/ui/infoButton.tsx | 49 - components/ui/input.tsx | 21 + components/ui/keyframes.tsx | 40 - components/ui/label.tsx | 63 +- components/ui/li.tsx | 10 - components/ui/link.tsx | 140 +- components/ui/linkButton.tsx | 21 - components/ui/main.tsx | 10 - components/ui/nav.tsx | 17 - components/ui/overlay.tsx | 9 - components/ui/panel.tsx | 12 - components/ui/paragraph.tsx | 55 - components/ui/popover.tsx | 133 +- components/ui/radioGroup.tsx | 51 - components/ui/select.tsx | 239 +- components/ui/separator.tsx | 57 +- components/ui/show.tsx | 7 + components/ui/skeleton.tsx | 96 +- components/ui/svg.tsx | 95 - components/ui/text.tsx | 209 -- components/ui/textArea.tsx | 62 - components/ui/textField.tsx | 120 - components/ui/toast.tsx | 127 ++ components/ui/toaster.tsx | 34 + components/ui/ul.tsx | 10 - components/user/hooks/index.tsx | 4 - components/user/hooks/useUser.ts | 3 - components/user/hooks/useUserAvatar.ts | 20 - components/user/index.tsx | 7 - components/user/providers/userProvider.tsx | 73 - components/user/user-avatar.tsx | 59 + .../user/user-edit-salary-details-dialog.tsx | 44 + .../user/user-edit-work-day-detail-dialog.tsx | 38 + components/user/user-salary-details-form.tsx | 168 ++ components/user/user-work-day-detail-form.tsx | 209 ++ components/user/userAvatar.tsx | 66 - components/user/userAvatarPopover.tsx | 81 - components/user/userNavDetails.tsx | 63 - components/user/userProfile.tsx | 98 - components/user/userWorkDayDetails.tsx | 223 -- constants/date-constants.ts | 116 + constants/dateConstants.ts | 29 - ...ltUserSalary.ts => default-user-salary.ts} | 0 ...rningConstants.ts => earning-constants.ts} | 0 constants/theme-constants.ts | 40 + environment.d.ts | 26 + hooks/use-toast.ts | 186 ++ lib/auth.ts | 232 ++ lib/date.ts | 5 + lib/index.ts | 3 - lib/prismaUser.ts | 134 -- lib/session.ts | 12 + lib/user.ts | 130 ++ lib/utils.ts | 19 + lib/validations/user.ts | 16 + logic/{calendarLogic.ts => calendar-logic.ts} | 4 +- logic/{earningsLogic.ts => earnings-logic.ts} | 8 +- logic/{objectLogic.ts => object-logic.ts} | 0 logic/{userLogic.ts => user-logic.ts} | 0 ...validationLogic.ts => validation-logic.ts} | 0 middleware.ts | 44 + next-env.d.ts | 1 + next.config.js | 66 +- package.json | 63 +- pages/_app.tsx | 66 - pages/_document.tsx | 24 - pages/access-denied.tsx | 83 - pages/api/auth/[...nextauth].tsx | 274 +-- pages/api/health-check/index.ts | 17 +- pages/api/user/[id]/index.ts | 32 +- pages/api/user/avatar.ts | 14 +- pages/api/user/feedback.ts | 24 +- pages/api/user/index.ts | 7 +- pages/api/user/work-day-detail/index.ts | 59 + pages/feedback.tsx | 47 - pages/index.tsx | 49 - pages/login.tsx | 189 -- pages/profile.tsx | 31 - pages/salary-calculator.tsx | 133 -- pnpm-lock.yaml | 2000 +++++++++++------ postcss.config.js | 6 + prettier.config.js | 33 + stitches.config.ts | 300 --- styles/globals.css | 3 + tailwind.config.js | 36 + tsconfig.json | 37 +- types/index.d.ts | 51 +- types/next-auth.d.ts | 50 +- utils/calendar-utils.ts | 425 ++++ utils/calendar/calendarUtils.ts | 217 -- utils/common-utils.ts | 31 + utils/commonUtils.ts | 20 - .../{currencyFormat.ts => currency-format.ts} | 0 utils/{dateUtils.ts => date-utils.ts} | 68 +- utils/{emailUtils.ts => email-utils.ts} | 0 utils/pageUtils.ts | 50 - utils/sessionUtils.ts | 9 - utils/{userUtils.ts => user-utils.ts} | 4 +- 188 files changed, 5605 insertions(+), 8120 deletions(-) delete mode 100644 .eslintrc create mode 100644 .eslintrc.json create mode 100644 app/(auth)/layout.tsx create mode 100644 app/(auth)/login/page.tsx create mode 100644 app/(dashboard)/dashboard/_components/avatar.tsx create mode 100644 app/(dashboard)/dashboard/_components/calendar-month-with-salary.tsx create mode 100644 app/(dashboard)/dashboard/_components/calendar-month.tsx create mode 100644 app/(dashboard)/dashboard/_components/calendar-year.tsx create mode 100644 app/(dashboard)/dashboard/_components/company-benefits.tsx create mode 100644 app/(dashboard)/dashboard/_components/footer.tsx create mode 100644 app/(dashboard)/dashboard/_components/next-paycheck.tsx create mode 100644 app/(dashboard)/dashboard/_components/salary-form.tsx create mode 100644 app/(dashboard)/dashboard/_components/yearly-economic-overview.tsx create mode 100644 app/(dashboard)/dashboard/layout.tsx create mode 100644 app/(dashboard)/dashboard/page.tsx create mode 100644 app/(dashboard)/dashboard/profile/page.tsx create mode 100644 app/(dashboard)/dashboard/year/[year]/month/[month]/page.tsx create mode 100644 app/(dashboard)/dashboard/year/[year]/month/page.tsx create mode 100644 app/(dashboard)/dashboard/year/[year]/page.tsx create mode 100644 app/(dashboard)/dashboard/year/layout.tsx create mode 100644 app/(dashboard)/dashboard/year/page.tsx create mode 100644 app/layout.tsx create mode 100644 app/route.ts delete mode 100644 components/auth/LoginButtons.tsx delete mode 100644 components/auth/hooks/index.tsx delete mode 100644 components/auth/hooks/useAuthProviders.tsx delete mode 100644 components/auth/index.tsx create mode 100644 components/auth/login-button.tsx create mode 100644 components/calendar/calendar-day.tsx delete mode 100644 components/calendar/components/calendar.tsx delete mode 100644 components/calendar/components/calendarDay.tsx delete mode 100644 components/calendar/components/index.ts delete mode 100644 components/calendar/index.ts create mode 100644 components/calendar/month-select.tsx delete mode 100644 components/calendar/providers/calendarProvider.tsx delete mode 100644 components/calendar/providers/index.ts delete mode 100644 components/companyBenefits.tsx delete mode 100644 components/container.tsx delete mode 100644 components/feedback/components/feedbackDialog.tsx delete mode 100644 components/feedback/components/feedbackEmojiSelector.tsx delete mode 100644 components/feedback/components/feedbackForm.tsx delete mode 100644 components/feedback/components/feedbackPopover.tsx delete mode 100644 components/feedback/components/index.ts delete mode 100644 components/feedback/index.ts delete mode 100644 components/form/controlledCheckbox.tsx delete mode 100644 components/form/index.ts delete mode 100644 components/header.tsx rename components/{icons/svgs/logo.tsx => icons.tsx} (67%) delete mode 100644 components/icons/index.tsx delete mode 100644 components/layouts/authenticatedLayout.tsx delete mode 100644 components/salary/components/index.ts delete mode 100644 components/salary/components/salaryStatistics.tsx delete mode 100644 components/salary/components/yearStatistic.tsx delete mode 100644 components/salary/components/yearlyEarnings.tsx delete mode 100644 components/salary/index.ts delete mode 100644 components/salary/providers/index.ts delete mode 100644 components/salary/providers/salaryProvider.tsx create mode 100644 components/salary/salary-details-card.tsx delete mode 100644 components/statistic.tsx delete mode 100644 components/statisticGroup.tsx create mode 100644 components/theme-provider.tsx create mode 100644 components/theme-select.tsx delete mode 100644 components/theme/index.ts delete mode 100644 components/theme/themeSelector.tsx delete mode 100644 components/ui/alert.tsx delete mode 100644 components/ui/appearInBox.tsx delete mode 100644 components/ui/container.tsx delete mode 100644 components/ui/expandingHelperText.tsx delete mode 100644 components/ui/fieldContainer.tsx delete mode 100644 components/ui/fieldset.tsx create mode 100644 components/ui/flex-item.tsx delete mode 100644 components/ui/flexItem.tsx delete mode 100644 components/ui/footer.tsx delete mode 100644 components/ui/form.tsx delete mode 100644 components/ui/grid.tsx delete mode 100644 components/ui/heading.tsx create mode 100644 components/ui/hover-card.tsx delete mode 100644 components/ui/iconButton.tsx delete mode 100644 components/ui/image.tsx delete mode 100644 components/ui/index.ts create mode 100644 components/ui/info-button.tsx delete mode 100644 components/ui/infoButton.tsx create mode 100644 components/ui/input.tsx delete mode 100644 components/ui/keyframes.tsx delete mode 100644 components/ui/li.tsx delete mode 100644 components/ui/linkButton.tsx delete mode 100644 components/ui/main.tsx delete mode 100644 components/ui/nav.tsx delete mode 100644 components/ui/overlay.tsx delete mode 100644 components/ui/panel.tsx delete mode 100644 components/ui/paragraph.tsx delete mode 100644 components/ui/radioGroup.tsx create mode 100644 components/ui/show.tsx delete mode 100644 components/ui/svg.tsx delete mode 100644 components/ui/text.tsx delete mode 100644 components/ui/textArea.tsx delete mode 100644 components/ui/textField.tsx create mode 100644 components/ui/toast.tsx create mode 100644 components/ui/toaster.tsx delete mode 100644 components/ui/ul.tsx delete mode 100644 components/user/hooks/index.tsx delete mode 100644 components/user/hooks/useUser.ts delete mode 100644 components/user/hooks/useUserAvatar.ts delete mode 100644 components/user/index.tsx delete mode 100644 components/user/providers/userProvider.tsx create mode 100644 components/user/user-avatar.tsx create mode 100644 components/user/user-edit-salary-details-dialog.tsx create mode 100644 components/user/user-edit-work-day-detail-dialog.tsx create mode 100644 components/user/user-salary-details-form.tsx create mode 100644 components/user/user-work-day-detail-form.tsx delete mode 100644 components/user/userAvatar.tsx delete mode 100644 components/user/userAvatarPopover.tsx delete mode 100644 components/user/userNavDetails.tsx delete mode 100644 components/user/userProfile.tsx delete mode 100644 components/user/userWorkDayDetails.tsx create mode 100644 constants/date-constants.ts delete mode 100644 constants/dateConstants.ts rename constants/{defaultUserSalary.ts => default-user-salary.ts} (100%) rename constants/{earningConstants.ts => earning-constants.ts} (100%) create mode 100644 constants/theme-constants.ts create mode 100644 environment.d.ts create mode 100644 hooks/use-toast.ts create mode 100644 lib/auth.ts create mode 100644 lib/date.ts delete mode 100644 lib/index.ts delete mode 100644 lib/prismaUser.ts create mode 100644 lib/session.ts create mode 100644 lib/user.ts create mode 100644 lib/utils.ts create mode 100644 lib/validations/user.ts rename logic/{calendarLogic.ts => calendar-logic.ts} (90%) rename logic/{earningsLogic.ts => earnings-logic.ts} (96%) rename logic/{objectLogic.ts => object-logic.ts} (100%) rename logic/{userLogic.ts => user-logic.ts} (100%) rename logic/{validationLogic.ts => validation-logic.ts} (100%) create mode 100644 middleware.ts delete mode 100644 pages/_app.tsx delete mode 100644 pages/_document.tsx delete mode 100644 pages/access-denied.tsx create mode 100644 pages/api/user/work-day-detail/index.ts delete mode 100644 pages/feedback.tsx delete mode 100644 pages/index.tsx delete mode 100644 pages/login.tsx delete mode 100644 pages/profile.tsx delete mode 100644 pages/salary-calculator.tsx create mode 100644 postcss.config.js create mode 100644 prettier.config.js delete mode 100644 stitches.config.ts create mode 100644 styles/globals.css create mode 100644 tailwind.config.js create mode 100644 utils/calendar-utils.ts delete mode 100644 utils/calendar/calendarUtils.ts create mode 100644 utils/common-utils.ts delete mode 100644 utils/commonUtils.ts rename utils/{currencyFormat.ts => currency-format.ts} (100%) rename utils/{dateUtils.ts => date-utils.ts} (55%) rename utils/{emailUtils.ts => email-utils.ts} (100%) delete mode 100644 utils/pageUtils.ts delete mode 100644 utils/sessionUtils.ts rename utils/{userUtils.ts => user-utils.ts} (96%) diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 3a3a598..0000000 --- a/.eslintrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": ["next", "next/core-web-vitals"], - "rules": { - "react/prop-types": 0, - "react/no-unescaped-entities": 0 - } -} diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..0a3aeb1 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,22 @@ +{ + "$schema": "https://json.schemastore.org/eslintrc", + "root": true, + "extends": [ + "next/core-web-vitals", + "prettier", + "plugin:tailwindcss/recommended" + ], + "plugins": ["tailwindcss"], + "rules": { + "tailwindcss/no-custom-classname": "off", + "tailwindcss/classnames-order": "error" + }, + "settings": { + "tailwindcss": { + "callees": ["cn"] + }, + "next": { + "rootDir": ["apps/*/"] + } + } +} \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index b9dc034..ff32919 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,9 @@ .next -.vercel \ No newline at end of file +.vercel +cache +.cache +package.json +package-lock.json +public +CHANGELOG.md +.yarn \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 9c62621..d1de84c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,6 @@ "semi": true, "singleQuote": false, "arrowParens": "avoid", - "trailingComma": "none" + "trailingComma": "none", + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/.vscode/settings.json b/.vscode/settings.json index f6598f8..4d598ad 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,26 +1,14 @@ { - "files.exclude": { - "**/.git": true, - "**/.svn": true, - "**/.hg": true, - "**/CVS": true, - "**/.DS_Store": true, - "**/*.bk": true, - "**/node_modules": true, - "**/target": true - }, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports": true }, - "editor.wordWrapColumn": 100, - "javascript.updateImportsOnFileMove.enabled": "always", - "typescript.updateImportsOnFileMove.enabled": "always", - "javascript.preferences.importModuleSpecifier": "non-relative", + "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true, + "typescript.suggest.autoImports": true, "typescript.format.enable": true, "[typescriptreact]": { - "editor.formatOnSave": true, - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.formatOnSave": true }, - "typescript.tsdk": "node_modules/typescript/lib" + "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]] } diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx new file mode 100644 index 0000000..1b93301 --- /dev/null +++ b/app/(auth)/layout.tsx @@ -0,0 +1,8 @@ +interface AuthLayoutProps { + children: React.ReactNode + } + + export default function AuthLayout({ children }: AuthLayoutProps) { + return
{children}
+ } + \ No newline at end of file diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx new file mode 100644 index 0000000..521d52f --- /dev/null +++ b/app/(auth)/login/page.tsx @@ -0,0 +1,26 @@ +import { LoginButton } from "@/components/auth/login-button"; +import { Icons } from "@/components/icons"; +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Login", + description: "Login to your account" +}; + +export default function LoginPage() { + return ( +
+
+
+ +

Welcome back

+

+ Click to login with your Knowit AD account. +

+
+
+ +
+
+ ); +} diff --git a/app/(dashboard)/dashboard/_components/avatar.tsx b/app/(dashboard)/dashboard/_components/avatar.tsx new file mode 100644 index 0000000..d105f50 --- /dev/null +++ b/app/(dashboard)/dashboard/_components/avatar.tsx @@ -0,0 +1,22 @@ +import { Skeleton } from "@/components/ui/skeleton"; +import { UserAvatar } from "@/components/user/user-avatar"; +import { getCurrentUser } from "@/lib/session"; +import { getUserAvatar } from "@/lib/user"; + +export default async function Avatar() { + const user = await getCurrentUser(); + + if (!user) { + return
Not logged in
; + } + + const userAvatar = await getUserAvatar(user?.activeDirectoryId); + + return ; +} + +function AvatarSkeleton() { + return ; +} + +export { AvatarSkeleton }; diff --git a/app/(dashboard)/dashboard/_components/calendar-month-with-salary.tsx b/app/(dashboard)/dashboard/_components/calendar-month-with-salary.tsx new file mode 100644 index 0000000..a74d87b --- /dev/null +++ b/app/(dashboard)/dashboard/_components/calendar-month-with-salary.tsx @@ -0,0 +1,99 @@ +import { MonthSelect } from "@/components/calendar/month-select"; +import { Icons } from "@/components/icons"; +import { SalaryDetailsCard } from "@/components/salary/salary-details-card"; +import { buttonVariants } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Show } from "@/components/ui/show"; +import { UserEditSalaryDetailsDialog } from "@/components/user/user-edit-salary-details-dialog"; +import { UserEarningsDetails, type CalendarMonth as CalendarMonthType } from "@/types"; +import { Session } from "next-auth"; +import Link from "next/link"; +import { CalendarMonth } from "./calendar-month"; + +export default function CalendarMonthWithSalary({ + user, + calendarMonth, + userEarnings +}: { + user: Session["user"]; + calendarMonth: CalendarMonthType; + userEarnings?: UserEarningsDetails; +}) { + return ( +
+
+

+ Salary details for {calendarMonth.month} {calendarMonth.year} +

+
+ + {userEarnings?.activeCalendarMonthStatistics.workDays.length.toString()} + + + {userEarnings?.activeCalendarMonthStatistics.workHours.toString()} + + + {userEarnings?.activeCalendarMonthStatistics.grossFormatted} + + + {userEarnings?.activeCalendarMonthStatistics.netFormatted} + +
+ + + +
+ +
+ + Salary for {calendarMonth.month} paid with{" "} + half tax at{" "} + {userEarnings?.nextMonthStatistics?.payDay} + + + + + +
+
+
+
+

{calendarMonth.year}

+ +
+
+ {/* Go to previous month if month.MonthNumber is 0, go to previous year and month 11 */} + + Forrige måned + + + {/* Go to current month */} + + I dag + + {/* Go to next month if month.MonthNumber is 11, go to next year and month 0 */} + + Neste måned + + +
+
+ +
+
+ ); +} diff --git a/app/(dashboard)/dashboard/_components/calendar-month.tsx b/app/(dashboard)/dashboard/_components/calendar-month.tsx new file mode 100644 index 0000000..09c8d44 --- /dev/null +++ b/app/(dashboard)/dashboard/_components/calendar-month.tsx @@ -0,0 +1,84 @@ +import { CalendarDay } from "@/components/calendar/calendar-day"; +import { Show } from "@/components/ui/show"; +import { UserEditWorkDayDetailDialog } from "@/components/user/user-edit-work-day-detail-dialog"; +import { getRequestDateNow } from "@/lib/date"; +import { cn } from "@/lib/utils"; +import { CalendarMonth, UserWorkDayDetail } from "@/types"; +import { getCalendarMonthEntries } from "@/utils/calendar-utils"; +import * as React from "react"; + +const CalendarMonth: React.FC<{ + month: CalendarMonth; + big?: boolean; + workDayDetails?: UserWorkDayDetail[]; +}> = ({ month, big = false, workDayDetails = [], ...other }) => { + const currentDate = getRequestDateNow(); + const showWeeks = true && !big; + const holidayInfos = month.days.filter(day => day.holidayInformation); + + const calendarEntries = getCalendarMonthEntries(month, currentDate, showWeeks, workDayDetails); + + return ( +
+
+
+
+ Off work +
+
+
+ Work +
+
+
+ Non commissioned +
+
+
+ {calendarEntries.map((calendarDay, index) => { + switch (calendarDay.type) { + case "day": + return ( + + ); + default: + return ( + + ); + } + })} +
+ 0}> +
+ {holidayInfos.map((day, index) => ( +
+ {`${day.date.getDate()}.${day.date.getMonth() + 1}: ${day.holidayInformation?.name}${ + holidayInfos.length === index + 1 ? "" : "," + }`} +
+ ))} +
+ +
+ ); +}; + +export { CalendarMonth }; diff --git a/app/(dashboard)/dashboard/_components/calendar-year.tsx b/app/(dashboard)/dashboard/_components/calendar-year.tsx new file mode 100644 index 0000000..5f052e9 --- /dev/null +++ b/app/(dashboard)/dashboard/_components/calendar-year.tsx @@ -0,0 +1,72 @@ +import { getCalendarYear } from "@/utils/calendar-utils"; +import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"; +import { getYear } from "date-fns"; +import Link from "next/link"; +import * as React from "react"; + +import { getRequestDateNow } from "@/lib/date"; +import { cn } from "@/lib/utils"; +import { CalendarMonth } from "./calendar-month"; + +const CalendarYear: React.FC<{ date: Date }> = ({ date }) => { + const currentDate = getRequestDateNow(); + const year = date.getFullYear(); + const calendarYear = getCalendarYear(year); + + return ( +
+

+ Norsk kalender med helligdager + - Kalender {getYear(date)} +

+
+

Kalender {getYear(date)}

+
+ {/* Go to previous year */} + + Forrige år + + + {/* Go to current year */} + + I dag + + {/* Go to next year */} + + Neste år + + +
+
+
+ {calendarYear.months.map((month, index) => ( +
+ +

+ {month.month} +

+ + +
+ ))} +
+
+ ); +}; + +export { CalendarYear }; diff --git a/app/(dashboard)/dashboard/_components/company-benefits.tsx b/app/(dashboard)/dashboard/_components/company-benefits.tsx new file mode 100644 index 0000000..24c4cec --- /dev/null +++ b/app/(dashboard)/dashboard/_components/company-benefits.tsx @@ -0,0 +1,43 @@ +import { Icons } from "@/components/icons"; +import { Card } from "@/components/ui/card"; + +const CompanyBenefit = ({ text }: { text: string }) => ( + + +
+ +
+ {text} + + +); + +export default function CompanyBenefits() { + return ( +
+
+

Knowit Experience Bergen

+

Company Benefits

+

+ You get paid by commission or guaranteed salary. Knowit covers both employer's + national insurance contributions (14.10%) and holyday payment (12%). This means you can + calculate your next payment by the following formulae{" "} + + work hours in month x hourly rate x commission = your salary. + +

+
+
+ {/* transform all to CompanyBenefit component */} + + + + + + + + +
+
+ ); +} diff --git a/app/(dashboard)/dashboard/_components/footer.tsx b/app/(dashboard)/dashboard/_components/footer.tsx new file mode 100644 index 0000000..0d71838 --- /dev/null +++ b/app/(dashboard)/dashboard/_components/footer.tsx @@ -0,0 +1,72 @@ +import { Icons } from "@/components/icons"; +import { ThemeSelect } from "@/components/theme-select"; +import { Box } from "@/components/ui/box"; +import { Flex } from "@/components/ui/flex"; +import Link from "@/components/ui/link"; + +export default function Footer() { + return ( +
+
+ + +

Resources

+
    +
  • + + Personal handbook + +
    • +
  • + CV Partner +
    • +
  • + Helpit +
    • +
  • + Timekeeping +
    • +
  • + Slack +
    • +
  • + + Shareit + +
    • +
  • + Brand book +
    • +
  • + + Office templates + +
    • +
+ + +

Site

+
    +
  • + Home +
    • +
  • + Profile +
    • +
  • + Feedback +
    • +
+ + +

Feedback

+ + + + + + +
+
+ ); +} diff --git a/app/(dashboard)/dashboard/_components/next-paycheck.tsx b/app/(dashboard)/dashboard/_components/next-paycheck.tsx new file mode 100644 index 0000000..cea4647 --- /dev/null +++ b/app/(dashboard)/dashboard/_components/next-paycheck.tsx @@ -0,0 +1,22 @@ +import { getCurrentUser } from "@/lib/session"; +import { getUserEarnings } from "@/lib/user"; + +export default async function NextPaycheck() { + const user = await getCurrentUser(); + + if (!user) { + return
Not logged in
; + } + + const userEarnings = await getUserEarnings(user?.activeDirectoryId); + + return ( +
+
Next paycheck
+
{userEarnings?.nextPayDayStatistics.payDay}
+
+ {userEarnings?.nextPayDayStatistics.netFormatted} +
+
+ ); +} diff --git a/app/(dashboard)/dashboard/_components/salary-form.tsx b/app/(dashboard)/dashboard/_components/salary-form.tsx new file mode 100644 index 0000000..f40ab88 --- /dev/null +++ b/app/(dashboard)/dashboard/_components/salary-form.tsx @@ -0,0 +1,22 @@ +import { UserSalaryDetailsForm } from "@/components/user/user-salary-details-form"; +import { getCurrentUser } from "@/lib/session"; + +export default async function SalaryForm() { + const user = await getCurrentUser(); + + if (!user) { + return
Not logged in
; + } + + return ( + + ); +} diff --git a/app/(dashboard)/dashboard/_components/yearly-economic-overview.tsx b/app/(dashboard)/dashboard/_components/yearly-economic-overview.tsx new file mode 100644 index 0000000..1e607a1 --- /dev/null +++ b/app/(dashboard)/dashboard/_components/yearly-economic-overview.tsx @@ -0,0 +1,52 @@ +import { SalaryDetailsCard } from "@/components/salary/salary-details-card"; +import { getCurrentUser } from "@/lib/session"; +import { getUserEarnings } from "@/lib/user"; + +export default async function YearlyEconomicOverview() { + const user = await getCurrentUser(); + + if (!user) { + return
Not logged in
; + } + + const userEarnings = await getUserEarnings(user?.activeDirectoryId); + + return ( +
+
+

{userEarnings?.yearSalaryStatistics.year} overview

+
+ + {userEarnings?.yearSalaryStatistics.workDays} + + + {userEarnings?.yearSalaryStatistics.workHours} + + + {userEarnings?.yearSalaryStatistics.grossFormatted} + + + {userEarnings?.yearSalaryStatistics.netFormatted} + +
+
+
+

{userEarnings?.nextYearSalaryStatistics.year} overview

+
+ + {userEarnings?.nextYearSalaryStatistics.workDays} + + + {userEarnings?.nextYearSalaryStatistics.workHours} + + + {userEarnings?.nextYearSalaryStatistics.grossFormatted} + + + {userEarnings?.nextYearSalaryStatistics.netFormatted} + +
+
+
+ ); +} diff --git a/app/(dashboard)/dashboard/layout.tsx b/app/(dashboard)/dashboard/layout.tsx new file mode 100644 index 0000000..442a37b --- /dev/null +++ b/app/(dashboard)/dashboard/layout.tsx @@ -0,0 +1,38 @@ +import { Icons } from "@/components/icons"; +import { getCurrentUser } from "@/lib/session"; +import Link from "next/link"; +import { redirect } from "next/navigation"; +import { Suspense } from "react"; +import Avatar, { AvatarSkeleton } from "./_components/avatar"; +import Footer from "./_components/footer"; +import NextPaycheck from "./_components/next-paycheck"; + +export default async function DashboardLayout({ children }) { + const user = await getCurrentUser(); + + if (!user) { + redirect("/login"); + } + + return ( + <> +
+ +
{children}
+
+ + ); +} diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx new file mode 100644 index 0000000..7880b6e --- /dev/null +++ b/app/(dashboard)/dashboard/page.tsx @@ -0,0 +1,38 @@ +import { getRequestDateNow } from "@/lib/date"; +import { getCurrentUser } from "@/lib/session"; +import { getUserEarnings } from "@/lib/user"; +import { getCalendarMonth } from "@/utils/calendar-utils"; +import { redirect } from "next/navigation"; +import { Suspense } from "react"; +import CalendarMonthWithSalary from "./_components/calendar-month-with-salary"; +import CompanyBenefits from "./_components/company-benefits"; +import YearlyEconomicOverview from "./_components/yearly-economic-overview"; + +export default async function DashboardPage() { + const user = await getCurrentUser(); + + if (!user) { + return redirect("/login"); + } + + const currentDate = getRequestDateNow(); + + const calendarMonth = getCalendarMonth(currentDate); + + const userEarnings = await getUserEarnings(user.activeDirectoryId); + + return ( + <> + + + }> + {/* @ts-expect-error Async Server Component */} + + + + ); +} diff --git a/app/(dashboard)/dashboard/profile/page.tsx b/app/(dashboard)/dashboard/profile/page.tsx new file mode 100644 index 0000000..96d61e2 --- /dev/null +++ b/app/(dashboard)/dashboard/profile/page.tsx @@ -0,0 +1,21 @@ +import { getCurrentUser } from "@/lib/session"; +import { redirect } from "next/navigation"; +import { Suspense } from "react"; +import SalaryForm from "../_components/salary-form"; + +export default async function ProfilePage() { + const user = await getCurrentUser(); + + if (!user) { + return redirect("/login"); + } + + return ( +
+ loading...
}> + {/* @ts-expect-error Async Server Component */} + + +
+ ); +} diff --git a/app/(dashboard)/dashboard/year/[year]/month/[month]/page.tsx b/app/(dashboard)/dashboard/year/[year]/month/[month]/page.tsx new file mode 100644 index 0000000..df3a230 --- /dev/null +++ b/app/(dashboard)/dashboard/year/[year]/month/[month]/page.tsx @@ -0,0 +1,38 @@ +import CalendarMonthWithSalary from "@/app/(dashboard)/dashboard/_components/calendar-month-with-salary"; +import { getRequestDateNow } from "@/lib/date"; +import { getCurrentUser } from "@/lib/session"; +import { getUserEarnings } from "@/lib/user"; +import { getCalendarMonth } from "@/utils/calendar-utils"; +import { redirect } from "next/navigation"; + +interface SelectedYearMonthPageProps { + params: { year: string; month: string }; +} + +export const dynamic = "force-dynamic"; +export const dynamicParams = true; + +export default async function SelectedYearMonthPage({ params }: SelectedYearMonthPageProps) { + const user = await getCurrentUser(); + + if (!user) { + return redirect("/login"); + } + + const currentDate = getRequestDateNow(); + + const date = new Date(+(params.year ?? currentDate.getFullYear()), +params.month); + const calendarMonth = getCalendarMonth(date); + + const userEarnings = await getUserEarnings(user.activeDirectoryId, date); + + return ( + <> + + + ); +} diff --git a/app/(dashboard)/dashboard/year/[year]/month/page.tsx b/app/(dashboard)/dashboard/year/[year]/month/page.tsx new file mode 100644 index 0000000..99d7bba --- /dev/null +++ b/app/(dashboard)/dashboard/year/[year]/month/page.tsx @@ -0,0 +1,21 @@ +import { getRequestDateNow } from "@/lib/date"; +import { redirect } from "next/navigation"; + +interface SelectedYearPageProps { + params: { year: string }; +} + +export const dynamic = "force-dynamic"; +export const dynamicParams = true; + +export default async function SelectedYearMonthPageRoot({ params }: SelectedYearPageProps) { + const dateNow = getRequestDateNow(); + + if (params.year === dateNow.getFullYear().toString()) { + redirect(`/dashboard/year/${params.year}/month/${dateNow.getMonth()}`); + } + + redirect(`/dashboard/year/${params.year}/month/0`); + + return
...
; +} diff --git a/app/(dashboard)/dashboard/year/[year]/page.tsx b/app/(dashboard)/dashboard/year/[year]/page.tsx new file mode 100644 index 0000000..1fd8690 --- /dev/null +++ b/app/(dashboard)/dashboard/year/[year]/page.tsx @@ -0,0 +1,19 @@ +import { getRequestDateNow } from "@/lib/date"; +import { CalendarYear } from "../../_components/calendar-year"; + +interface SelectedYearPageProps { + params: { year: string }; +} + +export const dynamic = "force-dynamic"; +export const dynamicParams = true; + +export default async function SelectedYearPage({ params }: SelectedYearPageProps) { + const date = new Date(params.year ?? getRequestDateNow().getFullYear()); + + return ( + <> + + + ); +} diff --git a/app/(dashboard)/dashboard/year/layout.tsx b/app/(dashboard)/dashboard/year/layout.tsx new file mode 100644 index 0000000..521f531 --- /dev/null +++ b/app/(dashboard)/dashboard/year/layout.tsx @@ -0,0 +1,20 @@ +import { Suspense } from "react"; +import CompanyBenefits from "../_components/company-benefits"; +import YearlyEconomicOverview from "../_components/yearly-economic-overview"; + +interface YearLayoutProps { + children: React.ReactNode; +} + +export default async function YearLayout({ children }: YearLayoutProps) { + return ( + <> + {children} + + }> + {/* @ts-expect-error Async Server Component */} + + + + ); +} diff --git a/app/(dashboard)/dashboard/year/page.tsx b/app/(dashboard)/dashboard/year/page.tsx new file mode 100644 index 0000000..0f1304b --- /dev/null +++ b/app/(dashboard)/dashboard/year/page.tsx @@ -0,0 +1,11 @@ +import { getRequestDateNow } from "@/lib/date"; +import { redirect } from "next/navigation"; + +export const dynamic = "force-dynamic"; +export const dynamicParams = true; + +export default async function RootYearPage() { + redirect("/dashboard/year/" + getRequestDateNow().getFullYear()); + + return
...
; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..e710cb9 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,36 @@ +import { ThemeProvider } from "@/components/theme-provider"; +import { Toaster } from "@/components/ui/toaster"; +import { cn } from "@/lib/utils"; +import "@/styles/globals.css"; +import { Inter as FontSans } from "next/font/google"; + +const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", + display: "swap" +}); + +interface RootLayoutProps { + children: React.ReactNode; +} + +export default function RootLayout({ children }: RootLayoutProps) { + return ( + <> + + + + + {children} + + + + + + ); +} diff --git a/app/route.ts b/app/route.ts new file mode 100644 index 0000000..0a12c7a --- /dev/null +++ b/app/route.ts @@ -0,0 +1,5 @@ +import { redirect } from "next/navigation"; + +export async function GET(request: Request) { + redirect("/login"); +} diff --git a/components/auth/LoginButtons.tsx b/components/auth/LoginButtons.tsx deleted file mode 100644 index c8d81ca..0000000 --- a/components/auth/LoginButtons.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { useAuthProviders } from "@/components/auth"; -import { Button } from "@/components/ui"; -import { signIn } from "next-auth/react"; -import * as React from "react"; - -type LoginButtonsProps = {} & React.HTMLAttributes; - -const LoginButtons = ({ onClick, ...other }: LoginButtonsProps) => { - const authProviders = useAuthProviders(); - const providers = React.useMemo(() => Object.keys(authProviders ?? {}), [authProviders]); - - return ( - - ); -}; - -export default LoginButtons; diff --git a/components/auth/hooks/index.tsx b/components/auth/hooks/index.tsx deleted file mode 100644 index 26f6ede..0000000 --- a/components/auth/hooks/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import useAuthProviders from "@/components/auth/hooks/useAuthProviders"; - -export { useAuthProviders }; diff --git a/components/auth/hooks/useAuthProviders.tsx b/components/auth/hooks/useAuthProviders.tsx deleted file mode 100644 index c656c32..0000000 --- a/components/auth/hooks/useAuthProviders.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { getProviders } from "next-auth/react"; -import useSWR from "swr"; - -export default function useAuthProviders() { - const { data } = useSWR("/auth/providers", () => getProviders()); - - return data; -} diff --git a/components/auth/index.tsx b/components/auth/index.tsx deleted file mode 100644 index 89323a8..0000000 --- a/components/auth/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { useAuthProviders } from "@/components/auth/hooks"; -import LoginButtons from "@/components/auth/LoginButtons"; - -export { LoginButtons, useAuthProviders }; diff --git a/components/auth/login-button.tsx b/components/auth/login-button.tsx new file mode 100644 index 0000000..82b728e --- /dev/null +++ b/components/auth/login-button.tsx @@ -0,0 +1,24 @@ +"use client"; + +import { signIn } from "next-auth/react"; +import { useSearchParams } from "next/navigation"; +import { Button } from "../ui/button"; + +function LoginButton() { + const searchParams = useSearchParams(); + + return ( + + ); +} + +export { LoginButton }; diff --git a/components/calendar/calendar-day.tsx b/components/calendar/calendar-day.tsx new file mode 100644 index 0000000..a22b730 --- /dev/null +++ b/components/calendar/calendar-day.tsx @@ -0,0 +1,92 @@ +import { cn } from "@/lib/utils"; +import { CalendarDay, CalendarEntries } from "@/types"; +import { ComponentPropsWithoutRef, forwardRef } from "react"; +import { Icons } from "../icons"; +import { HoverCard, HoverCardContent, HoverCardTrigger } from "../ui/hover-card"; +import { Show } from "../ui/show"; + +type CalendarDayProps = ComponentPropsWithoutRef<"div"> & { + calendarDay: CalendarEntries; + big?: boolean; + holidayInfos?: CalendarDay[]; +}; + +const CalendarDay = forwardRef, CalendarDayProps>( + ({ className, calendarDay, big = false, holidayInfos = [], ...other }, ref) => { + return ( +
+
+ {big && calendarDay.isStartOfWeek ? ( +
{calendarDay.week}
+ ) : null} +
+ + + {calendarDay.value} + + Edit work day details + + + + {calendarDay.value} + 0}> + + + + + +
+
+ {big && + (calendarDay.type === "day" || calendarDay.type === "spacing") && + holidayInfos + .filter( + x => + x.day === calendarDay.value && + x.weekNumber === calendarDay.week && + !!x?.holidayInformation?.name + ) + .map((x, index) => ( +
+
+ {x.holidayInformation?.name} +
+
+
+ ))} +
+ ); + } +); + +CalendarDay.displayName = "CalendarDay"; + +export { CalendarDay }; diff --git a/components/calendar/components/calendar.tsx b/components/calendar/components/calendar.tsx deleted file mode 100644 index c981ee9..0000000 --- a/components/calendar/components/calendar.tsx +++ /dev/null @@ -1,220 +0,0 @@ -import { CalendarDay } from "@/components/calendar"; -import { useCalendar } from "@/components/calendar/providers/calendarProvider"; -import { Box, Button, Card, Flex, Grid, IconButton, Svg, Text } from "@/components/ui"; -import { CalendarDay as CalendarDayType, WithChildren } from "@/types"; -import { motion } from "framer-motion"; -import * as React from "react"; -import { HiChevronLeft, HiChevronRight } from "react-icons/hi"; -import { useToggle } from "react-use"; - -type CalendarDayColorDescriptionProps = WithChildren<{ - color: string; -}>; - -const CalendarDayColorDescription = ({ children, color }: CalendarDayColorDescriptionProps) => { - return ( - - - - {children} - - - ); -}; - -const CalendarDayHeading = ({ children }: WithChildren<{}>) => { - return ( - - - {children} - - - ); -}; - -const Calendar = ({ ...other }) => { - const { yearName, activeCalendarMonthDetail, years, setYear, incrementMonth, decrementMonth } = - useCalendar(); - - const [showYearPicker, toggleYearPicker] = useToggle(false); - - const renderSpacingDays = (days: CalendarDayType[]): JSX.Element[] | null => { - if (days === null || days === undefined || days?.length <= 0) { - return null; - } - - const spacingDaysToRender: Record = { - MONDAY: 0, - TUESDAY: 1, - WEDNESDAY: 2, - THURSDAY: 3, - FRIDAY: 4, - SATURDAY: 5, - SUNDAY: 6 - }; - - return [...Array(spacingDaysToRender[days[0].name?.toUpperCase()] ?? 0)].map((key, index) => ( -
- )); - }; - - return ( - - - { - toggleYearPicker(false); - decrementMonth(); - }} - > - - - - { - toggleYearPicker(false); - incrementMonth(); - }} - > - - - - - Off work - Work - Non commissioned - - - mon. - tue. - wed. - thu. - fri. - sat. - sun. - {renderSpacingDays(activeCalendarMonthDetail?.days)} - {activeCalendarMonthDetail?.days?.map((day, i) => ( - - ))} - - - {showYearPicker && - years.map(year => ( - { - setYear(year); - toggleYearPicker(); - }} - exit={{ opacity: 0 }} - css={{ - cursor: "pointer", - padding: "$1", - fontSize: "$4", - textAlign: "center" - }} - > - {year} - - ))} - - - - - ); -}; - -export default Calendar; diff --git a/components/calendar/components/calendarDay.tsx b/components/calendar/components/calendarDay.tsx deleted file mode 100644 index 8e69dd3..0000000 --- a/components/calendar/components/calendarDay.tsx +++ /dev/null @@ -1,264 +0,0 @@ -import { - Box, - Dialog, - DialogContent, - DialogNonRemoveScrollOverlay, - DialogTrigger, - Svg -} from "@/components/ui"; -import { UserWorkDayDetails, useUser } from "@/components/user"; -import { getUserWorkDayDetails } from "@/logic/userLogic"; -import { CalendarDay as CalendarDayType, UserWorkDayDetail, WithChildren } from "@/types"; -import { Presence } from "@radix-ui/react-presence"; -import * as React from "react"; -import { HiChevronDoubleUp } from "react-icons/hi"; -import { IoBugOutline } from "react-icons/io5"; -import { CSS, styled } from "stitches.config"; - -type BaseDay = { - isWorkDay?: boolean; - isNonCommissionedToggled?: boolean; - isExtraHoursToggled?: boolean; - isSickDayToggled?: boolean; -}; - -type CalendarDayDateProps = WithChildren<{ - as?: React.ElementType; - className?: string; - isExpanded?: boolean; - onClick?: React.MouseEventHandler; - css?: CSS; -}> & - BaseDay; - -type RegularCalendarDayProps = { - day: CalendarDayType; - onExpand: () => void; -} & BaseDay; - -type ExpandedCalendarDayProps = { - day: CalendarDayType; - workDayDetails: UserWorkDayDetail; - onCollapse: () => void; -} & BaseDay; - -type CalendarDayProps = { - day: CalendarDayType; - isWorkDay?: boolean; -}; - -const DayText = styled("div", { - display: "flex", - - fontWeight: "bold", - borderWidth: "2px", - borderStyle: "solid", - borderColor: "transparent", - borderRadius: "$round", - transition: "border-color 0.2s ease-in-out", - variants: { - expanded: { - true: { - height: "auto", - width: "auto", - mb: "$2", - border: "none", - fontSize: "$4" - }, - false: { - height: "$6", - width: "$6", - justifyContent: "center", - alignItems: "center" - } - }, - workDay: { - true: { - color: "$green" - } - }, - nonCommissioned: { - true: { - color: "$red" - } - } - }, - compoundVariants: [ - { - expanded: false, - workDay: true, - css: { - "&:hover": { - borderColor: "$green" - } - } - }, - { - expanded: false, - nonCommissioned: true, - css: { - "&:hover": { - borderColor: "$red" - } - } - } - ] -}); - -const CalendarDayDate = React.forwardRef, CalendarDayDateProps>( - function CalendarDayDate( - { - children, - className, - isWorkDay, - isNonCommissionedToggled, - isExtraHoursToggled, - isSickDayToggled, - isExpanded = false, - ...other - }, - ref - ) { - const boxCss: CSS = isExpanded - ? { - display: "block" - } - : { - display: "flex", - justifyContent: "center", - alignItems: "center", - cursor: "pointer" - }; - - return ( - - - {children} - {isExtraHoursToggled ? : null} - {isSickDayToggled ? : null} - - - ); - } -); - -const RegularCalendarDay = React.forwardRef< - React.ElementRef, - RegularCalendarDayProps ->(function RegularCalendarDay( - { day, isWorkDay = false, isNonCommissionedToggled = false, onExpand = () => {}, ...other }, - ref -) { - return ( - onExpand()} - ref={ref} - {...other} - > - {day?.day} - - ); -}); - -const ExpandedCalendarDay = ({ - day, - isWorkDay = false, - isNonCommissionedToggled = false, - isExtraHoursToggled = false, - workDayDetails, - onCollapse = () => {}, - ...other -}: ExpandedCalendarDayProps) => { - return ( - - - {day?.formattedShortDate} - - - - ); -}; - -const CalendarDay = ({ day, isWorkDay = false, ...other }: CalendarDayProps) => { - const { user } = useUser(); - - const [isExpanded, setIsExpanded] = React.useState(false); - - const workDayDetails = React.useMemo( - () => getUserWorkDayDetails(user, day?.formattedDate), - [user, day?.formattedDate] - ); - - const isNonCommissionedToggled = React.useMemo( - () => workDayDetails?.nonCommissionedHours > 0, - [workDayDetails.nonCommissionedHours] - ); - - const isExtraHoursToggled = React.useMemo( - () => workDayDetails?.extraHours > 0, - [workDayDetails.extraHours] - ); - - const isSickDayToggled = React.useMemo( - () => (workDayDetails?.sickDay ?? false) && isNonCommissionedToggled, - [workDayDetails?.sickDay, isNonCommissionedToggled] - ); - - return ( - setIsExpanded(open)} - overlayProps={{ - enabled: false - }} - > - - setIsExpanded(true)} - {...other} - /> - - - - - - setIsExpanded(false)} - {...other} - /> - - - ); -}; - -export default CalendarDay; diff --git a/components/calendar/components/index.ts b/components/calendar/components/index.ts deleted file mode 100644 index 97c3615..0000000 --- a/components/calendar/components/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Calendar from "./calendar"; -import CalendarDay from "./calendarDay"; - -export { Calendar, CalendarDay }; diff --git a/components/calendar/index.ts b/components/calendar/index.ts deleted file mode 100644 index ea9da9e..0000000 --- a/components/calendar/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Calendar, CalendarDay } from "./components"; -import { CalendarProvider, useCalendar } from "./providers"; - -export { Calendar, CalendarDay, CalendarProvider, useCalendar }; diff --git a/components/calendar/month-select.tsx b/components/calendar/month-select.tsx new file mode 100644 index 0000000..cc0c41f --- /dev/null +++ b/components/calendar/month-select.tsx @@ -0,0 +1,77 @@ +"use client"; + +import { MONTH } from "@/constants/date-constants"; +import { useRouter } from "next/navigation"; +import { forwardRef, useTransition, type ComponentPropsWithoutRef, type ElementRef } from "react"; + +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from "@/components/ui/select"; +import { cn } from "@/lib/utils"; + +const MonthSelect = forwardRef< + ElementRef, + ComponentPropsWithoutRef & { + year: number; + month: number; + isSelected?: boolean; + } +>(({ className, year, month, isSelected = false, ...other }, forwardedRef) => { + const router = useRouter(); + const [isPending, startTransition] = useTransition(); + + return ( + + ); +}); + +MonthSelect.displayName = "MonthSelect"; + +export { MonthSelect }; diff --git a/components/calendar/providers/calendarProvider.tsx b/components/calendar/providers/calendarProvider.tsx deleted file mode 100644 index 26efcab..0000000 --- a/components/calendar/providers/calendarProvider.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import { getPayDay } from "@/logic/calendarLogic"; -import { CalendarMonth, CalendarYear } from "@/types"; -import { getCalendarYear } from "@/utils/calendar/calendarUtils"; -import { getThisYearAndTwoYearsIntoTheFuture } from "@/utils/dateUtils"; -import * as React from "react"; - -type CalendarContextProps = { - isLoadingCalendar: boolean; - year: CalendarYear; - lastYear: CalendarYear; - nextYear: CalendarYear; - calendarYear: CalendarYear; - yearName: string; - years: number[]; - month: number; - activeCalendarMonthDetail: CalendarMonth; - currentMonthDetail: CalendarMonth; - lastMonthDetail: CalendarMonth; - nextMonthDetail: CalendarMonth; - setYear: (year: number) => void; - incrementYear: () => void; - decrementYear: () => void; - incrementMonth: () => void; - decrementMonth: () => void; - date: Date; -}; - -const CalendarContext = React.createContext(null); -CalendarContext.displayName = "CalendarContext"; - -const now = new Date(); - -const initialState = { - year: now.getFullYear(), - month: now.getMonth() -}; - -const getLastMonth = (month, year, lastYear) => - month === 0 ? lastYear?.months?.[11] : year?.months?.[month - 1]; -const getNextMonth = (month, year, nextYear) => - month === 11 ? nextYear?.months?.[0] : year?.months?.[month + 1]; - -const getDateFromYearDataAndMonth = (year, month) => { - const now = new Date(); - return new Date(year?.year ?? now.getFullYear(), month ?? now.getMonth(), 1); -}; - -function calendarReducer(state = initialState, action) { - switch (action.type) { - case "SET_YEAR": { - return { ...state, year: action.year }; - } - case "SET_MONTH": { - return { ...state, month: action.month }; - } - default: { - throw new Error(`Unhandled action type: ${action.type}`); - } - } -} - -function CalendarProvider({ children, year = initialState.year, month = initialState.month }) { - const [state, dispatch] = React.useReducer(calendarReducer, { year, month }); - - const calendarYear = React.useMemo(() => getCalendarYear(state.year), [state.year]); - - const currentYear = new Date().getFullYear(); - const data = React.useMemo(() => getCalendarYear(currentYear), [currentYear]); - const lastYear = React.useMemo(() => getCalendarYear(currentYear - 1), [currentYear]); - const nextYear = React.useMemo(() => getCalendarYear(currentYear + 1), [currentYear]); - const setYear = (year: number) => dispatch({ type: "SET_YEAR", year: year }); - - const incrementYear = React.useCallback( - () => dispatch({ type: "SET_YEAR", year: state.year + 1 }), - [state.year] - ); - const decrementYear = React.useCallback( - () => dispatch({ type: "SET_YEAR", year: state.year - 1 }), - [state.year] - ); - - const setMonth = month => dispatch({ type: "SET_MONTH", month: month }); - - const incrementMonth = React.useCallback(() => { - const newMonth = state.month + 1; - const shouldIncrementYear = newMonth > 11; - - if (shouldIncrementYear) { - incrementYear(); - } - - dispatch({ type: "SET_MONTH", month: shouldIncrementYear ? 0 : newMonth }); - }, [incrementYear, state.month]); - - const decrementMonth = React.useCallback(() => { - const newMonth = state.month - 1; - const shouldDecrementYear = newMonth < 0; - - if (shouldDecrementYear) { - decrementYear(); - } - - dispatch({ type: "SET_MONTH", month: shouldDecrementYear ? 11 : newMonth }); - }, [decrementYear, state.month]); - - React.useEffect(() => { - setYear(year); - setMonth(month); - }, [year, month]); - - const calendarValue = React.useMemo<{ - date: Date; - yearName: string; - years: number[]; - month: number; - activeCalendarMonthDetail: CalendarMonth; - calendarYear: CalendarYear; - }>(() => { - const date = getDateFromYearDataAndMonth(state.year, state.month); - - const activeCalendarMonthDetail = { - ...calendarYear?.months?.[date.getMonth()], - payDay: getPayDay( - getNextMonth(date.getMonth(), calendarYear, getCalendarYear(+calendarYear.year + 1)) - ) - }; - - return { - date, - calendarYear, - yearName: state.year, - month: state.month, - years: getThisYearAndTwoYearsIntoTheFuture(), - activeCalendarMonthDetail - }; - }, [calendarYear, state.month, state.year]); - - const value = React.useMemo(() => { - const currentMonth = new Date().getMonth(); - - const nextMonthDetail = { - ...getNextMonth(currentMonth, data, nextYear), - payDay: getPayDay( - currentMonth === 11 - ? nextYear?.months?.[1] - : currentMonth === 10 - ? nextYear?.months?.[0] - : data?.months?.[currentMonth + 2] - ) - }; - - const currentMonthDetail = { - ...data?.months?.[currentMonth], - payDay: getPayDay(nextMonthDetail) - }; - - const lastMonthDetail = { - ...getLastMonth(currentMonth, data, lastYear), - payDay: getPayDay(currentMonthDetail) - }; - - return { - year: data, - lastYear, - nextYear, - currentMonthDetail, - lastMonthDetail, - nextMonthDetail, - isLoadingCalendar: !data - }; - }, [data, lastYear, nextYear]); - - return ( - - {children} - - ); -} -function useCalendar() { - const context = React.useContext(CalendarContext); - - if (context === undefined) { - throw new Error("useCalendar must be used within a CalendarProvider"); - } - - return context; -} -export { CalendarProvider, useCalendar }; diff --git a/components/calendar/providers/index.ts b/components/calendar/providers/index.ts deleted file mode 100644 index 6bc61a8..0000000 --- a/components/calendar/providers/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { CalendarProvider, useCalendar } from "./calendarProvider"; - -export { CalendarProvider, useCalendar }; diff --git a/components/companyBenefits.tsx b/components/companyBenefits.tsx deleted file mode 100644 index f41fb9d..0000000 --- a/components/companyBenefits.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import { Box, Card, Flex, FlexItem, Grid, Heading, Paragraph, Svg } from "@/components/ui"; -import { WithChildren } from "@/types"; -import * as React from "react"; -import { HiOutlineCheckCircle } from "react-icons/hi"; -import { VariantProps } from "stitches.config"; - -type BenefitProps = WithChildren<{ - icon?: React.ElementType; - iconProps?: VariantProps; -}>; - -const Benefit = ({ - children, - icon = HiOutlineCheckCircle, - iconProps = { - variant: "green" - } -}: BenefitProps) => { - const Icon = icon; - return ( - - - - - - {children} - - - ); -}; - -const CompanyBenefits = () => { - return ( - - - - Knowit Experience Bergen - - - Company Benefits - - - You get paid by commission or guaranteed salary. Knowit covers both employer's - national insurance contributions (14.10%) and holyday payment (12%). This means you can - calculate your next payment by the following formulae{" "} - - Work hours in month x hourly rate x commission = your salary. - - - - - Full pay on paternity leave - Pension 5,5% of salary from 1G to 12G - Health insurance for all employees - New training facilities + scheduled training programmes - Free phone with free calls, free SMS and 15 GB data every month - Your choice of computer equipment, PC or Mac, mouse and keyboard - Subsidized good canteen - Generous social budget that guarantees lots of fun - - - ); -}; - -export default CompanyBenefits; diff --git a/components/container.tsx b/components/container.tsx deleted file mode 100644 index 4588aa2..0000000 --- a/components/container.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { WithChildren } from "@/types"; -import * as React from "react"; - -type ContainerProps = WithChildren<{ - as?: React.ElementType; - className?: string; -}>; - -const Container = ({ children, as = "div", ...other }: ContainerProps) => { - const Component = as; - return {children}; -}; - -export default Container; diff --git a/components/feedback/components/feedbackDialog.tsx b/components/feedback/components/feedbackDialog.tsx deleted file mode 100644 index 9be1f0a..0000000 --- a/components/feedback/components/feedbackDialog.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Button, Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui"; -import * as React from "react"; -import FeedbackForm from "./feedbackForm"; - -const FeedbackDialog = () => { - const [open, setOpen] = React.useState(false); - - return ( - setOpen(open)}> - - - - - Feedback - - - - ); -}; - -export default FeedbackDialog; diff --git a/components/feedback/components/feedbackEmojiSelector.tsx b/components/feedback/components/feedbackEmojiSelector.tsx deleted file mode 100644 index 051d2a1..0000000 --- a/components/feedback/components/feedbackEmojiSelector.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { Flex } from "@/components/ui"; -import Image from "next/image"; -import * as React from "react"; -import { styled } from "stitches.config"; - -const EmojiButton = styled("button", { - all: "unset", - outline: "none", - margin: 0, - padding: 0, - display: "inline-flex", - justifyContent: "center", - alignItems: "center", - width: "34px", - height: "34px", - backgroundColor: "$grayDark", - border: "1px solid $gray", - borderRadius: "$round", - cursor: "pointer", - transition: "all .2s cubic-bezier(.5,-1,.5,2)", - "&:hover": { - transform: "scale(1.12)" - }, - "&:focus": { - transform: "scale(1.12)" - }, - variants: { - selected: { - true: { - transform: "scale(1.12)", - border: "1px solid $green" - } - } - } -}); - -type FeedbackEmojiSelectorProps = { - onSelected: (emojiValue: number) => void; -}; - -const twemojis = { - "1f60d": { - src: "/twemoji/1f60d.svg", - alt: "Emoji with heart eyes", - value: 1 - }, - "1f600": { - src: "/twemoji/1f600.svg", - alt: "Emoji with happy expression", - value: 2 - }, - "1f615": { - src: "/twemoji/1f615.svg", - alt: "Emoji with indifferent expression", - value: 3 - }, - "1f662d": { - src: "/twemoji/1f62d.svg", - alt: "Emoji with sad expression", - value: 4 - } -}; - -const FeedbackEmojiSelector = ({ onSelected = () => {} }: FeedbackEmojiSelectorProps) => { - const [selectedEmoji, setSelectedEmoji] = React.useState(0); - - const handleEmojiSelect = (emojiValue: number) => { - setSelectedEmoji(emojiValue); - onSelected(emojiValue); - }; - - return ( - - {Object.entries(twemojis).map(([emoji, { src, alt, value }]) => ( - handleEmojiSelect(value)} - > - {alt} - - ))} - - ); -}; - -export default FeedbackEmojiSelector; diff --git a/components/feedback/components/feedbackForm.tsx b/components/feedback/components/feedbackForm.tsx deleted file mode 100644 index 28154b6..0000000 --- a/components/feedback/components/feedbackForm.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Button, Fieldset, Flex, Form, Svg, Text, TextArea, TextField } from "@/components/ui"; -import * as React from "react"; -import { useForm } from "react-hook-form"; -import { IoCheckmark, IoChevronForward, IoSyncOutline } from "react-icons/io5"; -import FeedbackEmojiSelector from "./feedbackEmojiSelector"; - -type FeedbackFormProps = { - compact?: boolean; -}; - -const FeedbackForm = ({ compact = false }: FeedbackFormProps) => { - const [isSubmitting, setIsSubmitting] = React.useState(false); - const [isCompleted, setIsCompleted] = React.useState(false); - const { - register, - handleSubmit, - formState: { errors }, - setValue - } = useForm({ - defaultValues: { - message: "", - reaction: 0 - } - }); - - const onSubmit = async (data: any) => { - setIsSubmitting(true); - - await fetch("/api/user/feedback", { - method: "POST", - headers: { - "Content-Type": "application/json", - Accept: "application/json" - }, - body: JSON.stringify(data) - }); - - setIsSubmitting(false); - setIsCompleted(true); - }; - - return ( -
-
-