diff --git a/frontend/src/components/admin/servers/ServerPage.tsx b/frontend/src/components/admin/servers/ServerPage.tsx index 81132e7..e478669 100644 --- a/frontend/src/components/admin/servers/ServerPage.tsx +++ b/frontend/src/components/admin/servers/ServerPage.tsx @@ -23,6 +23,7 @@ import { Button } from "@/components/ui/button"; import { getSettings } from "@/utils/querys/settings"; import { toast } from "sonner"; import axios from "axios"; +import { useEffect } from "react"; //import { useState } from "react"; export type Servers = { @@ -46,14 +47,35 @@ export default function ServerPage() { getServers(token ?? "") ); - const adminModule = modules.filter((n) => n.name === "admin"); - const userLevel = - user?.roles?.filter((r) => r.module_id === adminModule[0].module_id) || - []; + // const adminModule = modules.filter((n) => n.name === "admin"); + // const userLevel = + // user?.roles?.filter((r) => r.module_id === adminModule[0].module_id) || + // []; - if (!adminModule[0]?.roles?.includes(userLevel[0]?.role)) { - router.navigate({ to: "/" }); - } + // if (!adminModule[0]?.roles?.includes(userLevel[0]?.role)) { + // console.log("Something failed"); + // //router.navigate({ to: "/" }); + // } + + useEffect(() => { + if (!user || modules.length === 0) return; + + const adminModule = modules.find((n) => n.name === "admin"); + if (!adminModule) { + console.log("no module loaded"); + //router.navigate({ to: "/" }); + return; + } + + const userLevel = + user?.roles?.filter((r) => r.module_id === adminModule.module_id) || + []; + + if (!adminModule.roles?.includes(userLevel[0]?.role)) { + console.log("Something failed"); + //router.navigate({ to: "/" }); + } + }, [modules, user, router]); if (isError) { return
{JSON.stringify(error)}
; diff --git a/frontend/src/components/admin/settings/SettingsPage.tsx b/frontend/src/components/admin/settings/SettingsPage.tsx index f635c5d..35e4ee5 100644 --- a/frontend/src/components/admin/settings/SettingsPage.tsx +++ b/frontend/src/components/admin/settings/SettingsPage.tsx @@ -1,12 +1,19 @@ -import {LstCard} from "@/components/extendedUI/LstCard"; -import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"; -import {useSessionStore} from "@/lib/store/sessionStore"; -import {useModuleStore} from "@/lib/store/useModuleStore"; -import {useQuery} from "@tanstack/react-query"; -import {useRouter} from "@tanstack/react-router"; -import {ChangeSetting} from "./SettingForm"; -import {getSettings} from "@/utils/querys/settings"; -import {Skeleton} from "@/components/ui/skeleton"; +import { LstCard } from "@/components/extendedUI/LstCard"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { useSessionStore } from "@/lib/store/sessionStore"; +import { useModuleStore } from "@/lib/store/useModuleStore"; +import { useQuery } from "@tanstack/react-query"; +import { useRouter } from "@tanstack/react-router"; +import { ChangeSetting } from "./SettingForm"; +import { getSettings } from "@/utils/querys/settings"; +import { Skeleton } from "@/components/ui/skeleton"; export type Settings = { settings_id?: string; @@ -16,18 +23,22 @@ export type Settings = { }; export default function SettingsPage() { - const {user, token} = useSessionStore(); - const {modules} = useModuleStore(); + const { user, token } = useSessionStore(); + const { modules } = useModuleStore(); const router = useRouter(); const adminModule = modules.filter((n) => n.name === "admin"); - const userLevel = user?.roles.filter((r) => r.module_id === adminModule[0].module_id) || []; + const userLevel = + user?.roles.filter((r) => r.module_id === adminModule[0].module_id) || + []; if (!adminModule[0].roles.includes(userLevel[0]?.role)) { - router.navigate({to: "/"}); + router.navigate({ to: "/" }); } - const {data, isError, error, isLoading} = useQuery(getSettings(token ?? "")); + const { data, isError, error, isLoading } = useQuery( + getSettings(token ?? "") + ); // if (isLoading) { // return
Loading.....
; @@ -51,32 +62,38 @@ export default function SettingsPage() { <> {Array(10) - .fill(0) - .map((_, i) => ( - - - - - - - - - - - - - - - ))} + .fill(0) + .map((_, i) => ( + + + + + + + + + + + + + + + ))} ) : ( {data?.map((setting: Settings) => ( - {setting.name} - {setting.value} - {setting.description} + + {setting.name} + + + {setting.value} + + + {setting.description} + diff --git a/frontend/src/components/production/ocp/OcpPage.tsx b/frontend/src/components/production/ocp/OcpPage.tsx index cdd4a45..b2d0e73 100644 --- a/frontend/src/components/production/ocp/OcpPage.tsx +++ b/frontend/src/components/production/ocp/OcpPage.tsx @@ -15,6 +15,7 @@ import { export default function OCPPage() { const { settings } = useSettingStore(); + if (settings.length === 0) return; let server = settings.filter((n) => n.name === "server"); return ( @@ -68,7 +69,7 @@ export default function OCPPage() { direction="vertical" autoSaveId="ocpPage" > - {server[0]?.value === "usday1vms006" && ( + {server[0].value === "usday1vms006" && ( diff --git a/frontend/src/components/providers/Providers.tsx b/frontend/src/components/providers/Providers.tsx index 1bfac65..3edc7fd 100644 --- a/frontend/src/components/providers/Providers.tsx +++ b/frontend/src/components/providers/Providers.tsx @@ -20,6 +20,7 @@ export const SessionProvider = ({ useEffect(() => { fetchModules(); fetchSettings(); + console.log("settings grab ran"); fetchUserRoles(); fetchSubModules(); }, []); diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx index 3976ece..a0a553d 100644 --- a/frontend/src/components/ui/calendar.tsx +++ b/frontend/src/components/ui/calendar.tsx @@ -1,73 +1,208 @@ import * as React from "react" -import { ChevronLeft, ChevronRight } from "lucide-react" -import { DayPicker } from "react-day-picker" +import { + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, +} from "lucide-react" +import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker" import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" +import { Button, buttonVariants } from "@/components/ui/button" function Calendar({ className, classNames, showOutsideDays = true, + captionLayout = "label", + buttonVariant = "ghost", + formatters, + components, ...props -}: React.ComponentProps) { +}: React.ComponentProps & { + buttonVariant?: React.ComponentProps["variant"] +}) { + const defaultClassNames = getDefaultClassNames() + return ( svg]:rotate-180`, + String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, + className + )} + captionLayout={captionLayout} + formatters={{ + formatMonthDropdown: (date) => + date.toLocaleString("default", { month: "short" }), + ...formatters, + }} classNames={{ - months: "flex flex-col sm:flex-row gap-2", - month: "flex flex-col gap-4", - caption: "flex justify-center pt-1 relative items-center w-full", - caption_label: "text-sm font-medium", - nav: "flex items-center gap-1", - nav_button: cn( - buttonVariants({ variant: "outline" }), - "size-7 bg-transparent p-0 opacity-50 hover:opacity-100" + root: cn("w-fit", defaultClassNames.root), + months: cn( + "flex gap-4 flex-col md:flex-row relative", + defaultClassNames.months ), - nav_button_previous: "absolute left-1", - nav_button_next: "absolute right-1", - table: "w-full border-collapse space-x-1", - head_row: "flex", - head_cell: - "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", - row: "flex w-full mt-2", - cell: cn( - "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md", - props.mode === "range" - ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" - : "[&:has([aria-selected])]:rounded-md" + month: cn("flex flex-col w-full gap-4", defaultClassNames.month), + nav: cn( + "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", + defaultClassNames.nav + ), + button_previous: cn( + buttonVariants({ variant: buttonVariant }), + "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", + defaultClassNames.button_previous + ), + button_next: cn( + buttonVariants({ variant: buttonVariant }), + "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", + defaultClassNames.button_next + ), + month_caption: cn( + "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", + defaultClassNames.month_caption + ), + dropdowns: cn( + "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", + defaultClassNames.dropdowns + ), + dropdown_root: cn( + "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md", + defaultClassNames.dropdown_root + ), + dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown), + caption_label: cn( + "select-none font-medium", + captionLayout === "label" + ? "text-sm" + : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", + defaultClassNames.caption_label + ), + table: "w-full border-collapse", + weekdays: cn("flex", defaultClassNames.weekdays), + weekday: cn( + "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", + defaultClassNames.weekday + ), + week: cn("flex w-full mt-2", defaultClassNames.week), + week_number_header: cn( + "select-none w-(--cell-size)", + defaultClassNames.week_number_header + ), + week_number: cn( + "text-[0.8rem] select-none text-muted-foreground", + defaultClassNames.week_number ), day: cn( - buttonVariants({ variant: "ghost" }), - "size-8 p-0 font-normal aria-selected:opacity-100" + "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", + defaultClassNames.day ), - day_range_start: - "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground", - day_range_end: - "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground", - day_selected: - "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", - day_today: "bg-accent text-accent-foreground", - day_outside: - "day-outside text-muted-foreground aria-selected:text-muted-foreground", - day_disabled: "text-muted-foreground opacity-50", - day_range_middle: - "aria-selected:bg-accent aria-selected:text-accent-foreground", - day_hidden: "invisible", + range_start: cn( + "rounded-l-md bg-accent", + defaultClassNames.range_start + ), + range_middle: cn("rounded-none", defaultClassNames.range_middle), + range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end), + today: cn( + "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", + defaultClassNames.today + ), + outside: cn( + "text-muted-foreground aria-selected:text-muted-foreground", + defaultClassNames.outside + ), + disabled: cn( + "text-muted-foreground opacity-50", + defaultClassNames.disabled + ), + hidden: cn("invisible", defaultClassNames.hidden), ...classNames, }} components={{ - IconLeft: ({ className, ...props }) => ( - - ), - IconRight: ({ className, ...props }) => ( - - ), + Root: ({ className, rootRef, ...props }) => { + return ( +
+ ) + }, + Chevron: ({ className, orientation, ...props }) => { + if (orientation === "left") { + return ( + + ) + } + + if (orientation === "right") { + return ( + + ) + } + + return ( + + ) + }, + DayButton: CalendarDayButton, + WeekNumber: ({ children, ...props }) => { + return ( + +
+ {children} +
+ + ) + }, + ...components, }} {...props} /> ) } -export { Calendar } +function CalendarDayButton({ + className, + day, + modifiers, + ...props +}: React.ComponentProps) { + const defaultClassNames = getDefaultClassNames() + + const ref = React.useRef(null) + React.useEffect(() => { + if (modifiers.focused) ref.current?.focus() + }, [modifiers.focused]) + + return ( +