-
-
- 
-
-
-
-
- 
-
-
-
+
+
+
+
+
-
+ navigate(item.route)}
+ >
+ {item.key}
+
+
+ )
+}
diff --git a/src/components/app/side-menu.tsx b/src/components/app/side-menu.tsx
new file mode 100644
index 0000000..86c70df
--- /dev/null
+++ b/src/components/app/side-menu.tsx
@@ -0,0 +1,56 @@
+import { MenuItem } from '@/components/app/menu-item'
+import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription, SheetClose } from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Menu } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router'
+
+function SideMenuItem({ item }: { item: MenuItem }) {
+ const navigate = useNavigate()
+ const location = useLocation()
+ return (
+
+
+
+ )
+}
+
+export interface SideMenuItemProps {
+ items: MenuItem[]
+ authenticated: boolean
+}
+
+export function SideMenu({ items, authenticated }: SideMenuItemProps) {
+ return (
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/app/user-dropdown-menu.tsx b/src/components/app/user-dropdown-menu.tsx
new file mode 100644
index 0000000..9b772c9
--- /dev/null
+++ b/src/components/app/user-dropdown-menu.tsx
@@ -0,0 +1,112 @@
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuPortal,
+ DropdownMenuSeparator,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
+import { Languages, LogOut, Settings, User, UserCircle, UserPlus } from 'lucide-react'
+import { useKeycloak } from '@react-keycloak/web'
+import { useTranslation } from 'react-i18next'
+
+export interface UserDropdownMenuProps {
+ handleDropdownSelectFn: (action: string) => void
+}
+
+export function UserDropdownMenu({ handleDropdownSelectFn }: UserDropdownMenuProps) {
+ const { keycloak } = useKeycloak()
+ const { t } = useTranslation(['main'])
+
+ return (
+
+
+
+
+ {keycloak.authenticated ? (
+ <>
+
+ {t('user_dropdown.my_account', { ns: ['main'] })}
+ handleDropdownSelectFn('profile')}>
+
+ handleDropdownSelectFn('settings')}>
+
+
+
+
+
+
+ handleDropdownSelectFn('lang/english')}>
+ {t('user_dropdown.en', { ns: ['main'] })}
+
+ handleDropdownSelectFn('lang/polish')}>
+ {t('user_dropdown.pl', { ns: ['main'] })}
+
+
+
+
+ {
+ keycloak.logout()
+ }}
+ >
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+ handleDropdownSelectFn('lang/english')}>
+ {t('user_dropdown.en', { ns: ['main'] })}
+
+ handleDropdownSelectFn('lang/polish')}>
+ {t('user_dropdown.pl', { ns: ['main'] })}
+
+
+
+
+ {
+ keycloak.login()
+ }}
+ >
+
+ keycloak.register()}>
+
+
+
+ )}
+
+ )
+}
diff --git a/src/components/custom/coockie-consent.tsx b/src/components/custom/coockie-consent.tsx
new file mode 100644
index 0000000..9c06cf3
--- /dev/null
+++ b/src/components/custom/coockie-consent.tsx
@@ -0,0 +1,99 @@
+import { CookieIcon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface CookieConsentProps {
+ demo?: boolean
+ onAcceptCallback?: () => void
+ onDeclineCallback?: () => void
+}
+
+export default function CookieConsent({ demo, onAcceptCallback, onDeclineCallback }: CookieConsentProps) {
+ const [isOpen, setIsOpen] = useState(false)
+ const [hide, setHide] = useState(false)
+ const { t } = useTranslation(['main'])
+
+ const accept = () => {
+ setIsOpen(false)
+ document.cookie = 'cookieConsent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT'
+ setTimeout(() => {
+ setHide(true)
+ }, 700)
+ if (onAcceptCallback) {
+ onAcceptCallback()
+ }
+ }
+
+ const decline = () => {
+ setIsOpen(false)
+ setTimeout(() => {
+ setHide(true)
+ }, 700)
+ if (onDeclineCallback) {
+ onDeclineCallback()
+ }
+ }
+
+ useEffect(() => {
+ try {
+ setIsOpen(true)
+ if (document.cookie.includes('cookieConsent=true')) {
+ if (!demo) {
+ setIsOpen(false)
+ setTimeout(() => {
+ setHide(true)
+ }, 700)
+ }
+ }
+ } catch (e) {
+ // console.log("Error: ", e);
+ }
+ }, [])
+
+ return (
+ {
+ table: TTable
+ withSelected?: boolean
+}
+
+export function DataTablePagination({ table, withSelected }: DataTablePaginationProps) {
+ return (
+ {
+ columns: ColumnDef[]
+ data: TData[]
+ total: number
+ pagination: PaginationState
+ paginationChangeFn: OnChangeFn
+ sorting?: SortingState
+ sortingChangeFn?: OnChangeFn
+}
+
+export function DataTable({
+ columns,
+ data,
+ total,
+ pagination,
+ paginationChangeFn,
+ sorting,
+ sortingChangeFn,
+}: DataTableProps) {
+ const table = useReactTable({
+ data: data,
+ columns: columns,
+ getCoreRowModel: getCoreRowModel(),
+ onPaginationChange: paginationChangeFn,
+ rowCount: total,
+ state: {
+ pagination,
+ sorting,
+ },
+ manualPagination: true,
+ debugTable: false,
+ onSortingChange: sortingChangeFn,
+ manualSorting: true,
+ })
+
+ return (
+
+ onChange?: (options: Option[]) => void
+ /** Limit the maximum number of selected options. */
+ maxSelected?: number
+ /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+ onMaxSelected?: (maxLimit: number) => void
+ /** Hide the placeholder when there are options selected. */
+ hidePlaceholderWhenSelected?: boolean
+ disabled?: boolean
+ /** Group the options base on provided key. */
+ groupBy?: string
+ className?: string
+ badgeClassName?: string
+ /**
+ * First item selected is a default behavior by cmdk. That is why the default is true.
+ * This is a workaround solution by add a dummy item.
+ *
+ * @reference: https://github.com/pacocoursey/cmdk/issues/171
+ */
+ selectFirstItem?: boolean
+ /** Allow user to create option when there is no option matched. */
+ creatable?: boolean
+ /** Props of `Command` */
+ commandProps?: React.ComponentPropsWithoutRef
+ /** Props of `CommandInput` */
+ inputProps?: Omit, 'value' | 'placeholder' | 'disabled'>
+ /** hide the clear all button. */
+ hideClearAllButton?: boolean
+}
+
+export interface MultipleSelectorRef {
+ selectedValue: Option[]
+ input: HTMLInputElement
+}
+
+export function useDebounce(value: T, delay?: number): T {
+ const [debouncedValue, setDebouncedValue] = React.useState(value)
+
+ useEffect(() => {
+ const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
+
+ return () => {
+ clearTimeout(timer)
+ }
+ }, [value, delay])
+
+ return debouncedValue
+}
+
+function transToGroupOption(options: Option[], groupBy?: string) {
+ if (options.length === 0) {
+ return {}
+ }
+ if (!groupBy) {
+ return {
+ '': options,
+ }
+ }
+
+ const groupOption: GroupOption = {}
+ options.forEach((option) => {
+ const key = (option[groupBy] as string) || ''
+ if (!groupOption[key]) {
+ groupOption[key] = []
+ }
+ groupOption[key].push(option)
+ })
+ return groupOption
+}
+
+function removePickedOption(groupOption: GroupOption, picked: Option[]) {
+ const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption
+
+ for (const [key, value] of Object.entries(cloneOption)) {
+ cloneOption[key] = value.filter((val) => !picked.find((p) => p.value === val.value))
+ }
+ return cloneOption
+}
+
+function isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {
+ for (const [, value] of Object.entries(groupOption)) {
+ if (value.some((option) => targetOption.find((p) => p.value === option.value))) {
+ return true
+ }
+ }
+ return false
+}
+
+/**
+ * The `CommandEmpty` of shadcn/ui will cause the cmdk empty not rendering correctly.
+ * So we create one and copy the `Empty` implementation from `cmdk`.
+ *
+ * @reference: https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607
+ **/
+const CommandEmpty = forwardRef>(
+ ({ className, ...props }, forwardedRef) => {
+ const render = useCommandState((state) => state.filtered.count === 0)
+
+ if (!render) return null
+
+ return (
+
+ )
+ }
+)
+
+CommandEmpty.displayName = 'CommandEmpty'
+
+const MultipleSelector = React.forwardRef(
+ (
+ {
+ value,
+ onChange,
+ placeholder,
+ defaultOptions: arrayDefaultOptions = [],
+ options: arrayOptions,
+ delay,
+ onSearch,
+ loadingIndicator,
+ emptyIndicator,
+ maxSelected = Number.MAX_SAFE_INTEGER,
+ onMaxSelected,
+ hidePlaceholderWhenSelected,
+ disabled,
+ groupBy,
+ className,
+ badgeClassName,
+ selectFirstItem = true,
+ creatable = false,
+ triggerSearchOnFocus = false,
+ commandProps,
+ inputProps,
+ hideClearAllButton = false,
+ }: MultipleSelectorProps,
+ ref: React.Ref
+ ) => {
+ const inputRef = React.useRef(null)
+ const [open, setOpen] = React.useState(false)
+ const [isLoading, setIsLoading] = React.useState(false)
+
+ const [selected, setSelected] = React.useState(value || [])
+ const [options, setOptions] = React.useState(transToGroupOption(arrayDefaultOptions, groupBy))
+ const [inputValue, setInputValue] = React.useState('')
+ const debouncedSearchTerm = useDebounce(inputValue, delay || 500)
+
+ React.useImperativeHandle(
+ ref,
+ () => ({
+ selectedValue: [...selected],
+ input: inputRef.current as HTMLInputElement,
+ focus: () => inputRef.current?.focus(),
+ }),
+ [selected]
+ )
+
+ const handleUnselect = React.useCallback(
+ (option: Option) => {
+ const newOptions = selected.filter((s) => s.value !== option.value)
+ setSelected(newOptions)
+ onChange?.(newOptions)
+ },
+ [onChange, selected]
+ )
+
+ const handleKeyDown = React.useCallback(
+ (e: React.KeyboardEvent) => {
+ const input = inputRef.current
+ if (input) {
+ if (e.key === 'Delete' || e.key === 'Backspace') {
+ if (input.value === '' && selected.length > 0) {
+ const lastSelectOption = selected[selected.length - 1]
+ // If last item is fixed, we should not remove it.
+ if (!lastSelectOption.fixed) {
+ handleUnselect(selected[selected.length - 1])
+ }
+ }
+ }
+ // This is not a default behavior of the field
+ if (e.key === 'Escape') {
+ input.blur()
+ }
+ }
+ },
+ [handleUnselect, selected]
+ )
+
+ useEffect(() => {
+ if (value) {
+ setSelected(value)
+ }
+ }, [value])
+
+ useEffect(() => {
+ /** If `onSearch` is provided, do not trigger options updated. */
+ if (!arrayOptions || onSearch) {
+ return
+ }
+ const newOption = transToGroupOption(arrayOptions || [], groupBy)
+ if (JSON.stringify(newOption) !== JSON.stringify(options)) {
+ setOptions(newOption)
+ }
+ }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options])
+
+ useEffect(() => {
+ const doSearch = async () => {
+ setIsLoading(true)
+ const res = await onSearch?.(debouncedSearchTerm)
+ setOptions(transToGroupOption(res || [], groupBy))
+ setIsLoading(false)
+ }
+
+ const exec = async () => {
+ if (!onSearch || !open) return
+
+ if (triggerSearchOnFocus) {
+ await doSearch()
+ }
+
+ if (debouncedSearchTerm) {
+ await doSearch()
+ }
+ }
+
+ void exec()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus])
+
+ const CreatableItem = () => {
+ if (!creatable) return undefined
+ if (
+ isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
+ selected.find((s) => s.value === inputValue)
+ ) {
+ return undefined
+ }
+
+ const Item = (
+ {
+ e.preventDefault()
+ e.stopPropagation()
+ }}
+ onSelect={(value: string) => {
+ if (selected.length >= maxSelected) {
+ onMaxSelected?.(selected.length)
+ return
+ }
+ setInputValue('')
+ const newOptions = [...selected, { value, label: value }]
+ setSelected(newOptions)
+ onChange?.(newOptions)
+ }}
+ >
+ {`Create "${inputValue}"`}
+
+ )
+
+ // For normal creatable
+ if (!onSearch && inputValue.length > 0) {
+ return Item
+ }
+
+ // For async search creatable. avoid showing creatable item before loading at first.
+ if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {
+ return Item
+ }
+
+ return undefined
+ }
+
+ const EmptyItem = React.useCallback(() => {
+ if (!emptyIndicator) return undefined
+
+ // For async search that showing emptyIndicator
+ if (onSearch && !creatable && Object.keys(options).length === 0) {
+ return (
+
+ {emptyIndicator}
+
+ )
+ }
+
+ return {emptyIndicator}
+ }, [creatable, emptyIndicator, onSearch, options])
+
+ const selectables = React.useMemo(() => removePickedOption(options, selected), [options, selected])
+
+ /** Avoid Creatable Selector freezing or lagging when paste a long string. */
+ const commandFilter = React.useCallback(() => {
+ if (commandProps?.filter) {
+ return commandProps.filter
+ }
+
+ if (creatable) {
+ return (value: string, search: string) => {
+ return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1
+ }
+ }
+ // Using default filter in `cmdk`. We don't have to provide it.
+ return undefined
+ }, [creatable, commandProps?.filter])
+
+ return (
+ {
+ handleKeyDown(e)
+ commandProps?.onKeyDown?.(e)
+ }}
+ className={cn('h-auto overflow-visible bg-transparent', commandProps?.className)}
+ shouldFilter={commandProps?.shouldFilter !== undefined ? commandProps.shouldFilter : !onSearch} // When onSearch is provided, we don't want to filter the options. You can still override it.
+ filter={commandFilter()}
+ >
+
+ )
+ }
+)
+
+MultipleSelector.displayName = 'MultipleSelector'
+export default MultipleSelector
diff --git a/src/components/custom/spinner.tsx b/src/components/custom/spinner.tsx
new file mode 100644
index 0000000..1c3f0f2
--- /dev/null
+++ b/src/components/custom/spinner.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { VariantProps, cva } from 'class-variance-authority'
+import { Loader2 } from 'lucide-react'
+
+const spinnerVariants = cva('flex-col items-center justify-center', {
+ variants: {
+ show: {
+ true: 'flex',
+ false: 'hidden',
+ },
+ },
+ defaultVariants: {
+ show: true,
+ },
+})
+
+const loaderVariants = cva('animate-spin text-primary', {
+ variants: {
+ size: {
+ small: 'size-6',
+ medium: 'size-8',
+ large: 'size-12',
+ },
+ },
+ defaultVariants: {
+ size: 'medium',
+ },
+})
+
+interface SpinnerContentProps extends VariantProps, VariantProps {
+ className?: string
+ children?: React.ReactNode
+}
+
+export function Spinner({ size, show, children, className }: SpinnerContentProps) {
+ return (
+
+ ,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..d34152d
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,153 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..c23630e
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ = FieldPath,
+> = {
+ name: TName
+}
+
+const FormFieldContext = React.createContext({} as FormFieldContextValue)
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+>({
+ ...props
+}: ControllerProps) => {
+ return (
+
+
+ )
+}
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext)
+ const itemContext = React.useContext(FormItemContext)
+ const { getFieldState, formState } = useFormContext()
+
+ const fieldState = getFieldState(fieldContext.name, formState)
+
+ if (!fieldContext) {
+ throw new Error('useFormField should be used within ')
+ }
+
+ const { id } = itemContext
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ }
+}
+
+type FormItemContextValue = {
+ id: string
+}
+
+const FormItemContext = React.createContext({} as FormItemContextValue)
+
+const FormItem = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ const id = React.useId()
+
+ return (
+
+
+
+ )
+ }
+)
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ const { error, formItemId } = useFormField()
+
+ return
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef, React.ComponentPropsWithoutRef>(
+ ({ ...props }, ref) => {
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+ return (
+ >(
+ ({ className, ...props }, ref) => {
+ const { formDescriptionId } = useFormField()
+
+ return
+ }
+)
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef>(
+ ({ className, children, ...props }, ref) => {
+ const { error, formMessageId } = useFormField()
+ const body = error ? String(error?.message) : children
+
+ if (!body) {
+ return null
+ }
+
+ return (
+ {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..683faa7
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}{" "}
+
+
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+NavigationMenuIndicator.displayName =
+ NavigationMenuPrimitive.Indicator.displayName
+
+export {
+ navigationMenuTriggerStyle,
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuIndicator,
+ NavigationMenuViewport,
+}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..fe56d4d
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
-
-
-
+import { Provider } from 'react-redux'
+import { persistor, store } from './store/store'
+import { PersistGate } from 'redux-persist/integration/react'
+import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client'
+import { setContext } from '@apollo/client/link/context'
+import { ReactKeycloakProvider } from '@react-keycloak/web'
+import { AuthClientError, AuthClientEvent } from '@react-keycloak/core/lib/types'
+import { AuthClientTokens } from '@react-keycloak/core'
+import { BrowserRouter } from 'react-router-dom'
+import keycloak from '@/lib/keycloak'
+import App from './App'
+import '@/locales/i18n'
+import './App.css'
+
+import { ThemeProvider } from '@/components/theme-provider'
+
+const onKeycloakEvent = (_event: AuthClientEvent, error?: AuthClientError): void => {
+ if (error) {
+ console.error('Keycloak error: ' + JSON.stringify(error))
+ }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
+// @ts-expect-error
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const onKeycloakTokens = (tokens: AuthClientTokens): void => {
+ // handle keycloak token
+ // console.info("Keycloak token: " + JSON.stringify(tokens))
+}
+
+const httpLink = createHttpLink({
+ uri: import.meta.env.VITE_APP_BACKEND_URL + '/graphql',
+})
+
+const authLink = setContext((_, { headers }) => {
+ const token = keycloak.token
+ return {
+ headers: {
+ ...headers,
+ authorization: token ? `Bearer ${token}` : '',
+ },
+ }
+})
+
+const client = new ApolloClient({
+ link: authLink.concat(httpLink),
+ cache: new InMemoryCache(),
+})
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+root.render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
diff --git a/src/pages/counter/Counter.module.css b/src/pages/counter/Counter.module.css
new file mode 100644
index 0000000..521dc65
--- /dev/null
+++ b/src/pages/counter/Counter.module.css
@@ -0,0 +1,81 @@
+.row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.row > button {
+ margin-left: 4px;
+ margin-right: 8px;
+}
+
+.row:not(:last-child) {
+ margin-bottom: 16px;
+}
+
+.value {
+ font-size: 78px;
+ padding-left: 16px;
+ padding-right: 16px;
+ margin-top: 2px;
+ font-family: 'Courier New', Courier, monospace;
+}
+
+.button {
+ appearance: none;
+ background: none;
+ font-size: 32px;
+ padding-left: 12px;
+ padding-right: 12px;
+ outline: none;
+ border: 2px solid transparent;
+ color: rgb(112, 76, 182);
+ padding-bottom: 4px;
+ cursor: pointer;
+ background-color: rgba(112, 76, 182, 0.1);
+ border-radius: 2px;
+ transition: all 0.15s;
+}
+
+.textbox {
+ font-size: 32px;
+ padding: 2px;
+ width: 64px;
+ text-align: center;
+ margin-right: 4px;
+}
+
+.button:hover,
+.button:focus {
+ border: 2px solid rgba(112, 76, 182, 0.4);
+}
+
+.button:active {
+ background-color: rgba(112, 76, 182, 0.2);
+}
+
+.asyncButton {
+ composes: button;
+ position: relative;
+}
+
+.asyncButton:after {
+ content: '';
+ background-color: rgba(112, 76, 182, 0.15);
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ opacity: 0;
+ transition:
+ width 1s linear,
+ opacity 0.5s ease 1s;
+}
+
+.asyncButton:active:after {
+ width: 0%;
+ opacity: 1;
+ transition: 0s;
+}
diff --git a/src/pages/counter/Counter.tsx b/src/pages/counter/Counter.tsx
new file mode 100644
index 0000000..82a22ea
--- /dev/null
+++ b/src/pages/counter/Counter.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { useAppDispatch, useAppSelector } from '@/store/hooks'
+import { decrement, increment, incrementAsync, incrementByAmount, incrementIfOdd, selectCount } from './counterSlice'
+import styles from './Counter.module.css'
+import { CardDescription, CardHeader, CardTitle, CardContent, Card } from '@/components/ui/card'
+import { useTranslation } from 'react-i18next'
+
+export const Counter: React.FC = () => {
+ const count = useAppSelector(selectCount)
+ const dispatch = useAppDispatch()
+ const [incrementAmount, setIncrementAmount] = useState('2')
+ const incrementValue = Number(incrementAmount) || 0
+ const { t } = useTranslation(['main'])
+
+ return (
+ ) => {
+ state.value += action.payload
+ },
+ },
+ // The `extraReducers` field lets the slice handle actions defined elsewhere,
+ // including actions generated by createAsyncThunk or in other slices.
+ extraReducers: (builder) => {
+ builder
+ .addCase(incrementAsync.pending, (state) => {
+ state.status = 'loading'
+ })
+ .addCase(incrementAsync.fulfilled, (state, action) => {
+ state.status = 'idle'
+ state.value += action.payload
+ })
+ .addCase(incrementAsync.rejected, (state) => {
+ state.status = 'failed'
+ })
+ },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+// The function below is called a selector and allows us to select a value from
+// the state. Selectors can also be defined inline where they're used instead of
+// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
+export const selectCount = (state: RootState) => state.counter.value
+
+// We can also write thunks by hand, which may contain both sync and async logic.
+// Here's an example of conditionally dispatching actions based on current state.
+export const incrementIfOdd =
+ (amount: number): AppThunk =>
+ (dispatch, getState) => {
+ const currentValue = selectCount(getState())
+ if (currentValue % 2 === 1) {
+ dispatch(incrementByAmount(amount))
+ }
+ }
+
+export default counterSlice.reducer
diff --git a/src/pages/error/errors.tsx b/src/pages/error/errors.tsx
new file mode 100644
index 0000000..e5be338
--- /dev/null
+++ b/src/pages/error/errors.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export const Errors: React.FC = () => {
+ const { t } = useTranslation(['main'])
+
+ return (
+
+
+ {t(`home.title`, { ns: ['main'] })}
+ {t(`home.subtitle`, { ns: ['main'] })}
+
+ {t(`home.details`, { ns: ['main'] })}
+ {t(`home.contact`, { ns: ['main'] })}
+
+
+ )
+}
diff --git a/src/pages/users/Users.test.tsx b/src/pages/users/Users.test.tsx
new file mode 100644
index 0000000..197f222
--- /dev/null
+++ b/src/pages/users/Users.test.tsx
@@ -0,0 +1,99 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { expect } from 'vitest'
+import React, { act } from 'react'
+import { BrowserRouter } from 'react-router-dom'
+import { Users } from './Users'
+import { MockedProvider } from '@apollo/client/testing'
+import { GetAllPermissionsDocument } from '@/graphql/generated'
+import { store } from '@/store/store'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { usersApi } from './api/usersApi'
+import { Provider } from 'react-redux'
+import '@/locales/i18n'
+import { ThemeProvider } from '@/components/theme-provider'
+
+const mockedRolesGql = {
+ request: {
+ query: GetAllPermissionsDocument,
+ variables: {
+ page: 0,
+ size: 10,
+ sort: 'id',
+ direction: 'ASC',
+ },
+ },
+
+ result: {
+ data: { getAllPermissions: [{ id: '63c16ce71ba30e5f08b4d66e', name: 'GUEST' }] },
+ },
+}
+
+const mockedUsers = [
+ {
+ _id: '63c16cfe1ba30e5f08b4d66f',
+ name: 'John Snow',
+ email: 'john.snow@email.com',
+ role: [
+ {
+ description: 'Anonymous user who can only read info',
+ _id: '63c16ce71ba30e5f08b4d66e',
+ name: 'GUEST',
+ },
+ ],
+ },
+]
+export const handlers = [
+ http.get(import.meta.env.VITE_APP_BACKEND_URL + '/coroutine/users', () => {
+ return HttpResponse.json(mockedUsers)
+ }),
+ http.get(import.meta.env.VITE_APP_BACKEND_URL + '/coroutine/usersCount', () => {
+ return HttpResponse.json(1)
+ }),
+]
+
+export const server = setupServer(...handlers)
+
+server.events.on('request:start', ({ request }) => {
+ console.debug('MSW Outgoing:', request.method, request.url)
+})
+
+describe('user component tests', () => {
+ beforeAll(() => {
+ server.listen()
+ act(() => store.dispatch(usersApi.util.resetApiState()))
+ })
+
+ afterEach(() => {
+ server.resetHandlers()
+ act(() => store.dispatch(usersApi.util.resetApiState()))
+ })
+
+ afterAll(() => {
+ server.close()
+ })
+
+ test('renders users component', async () => {
+ await act(async () =>
+ render(
+
+
+
+
+
+
+
+
+
+
+ )
+ )
+
+ await waitFor(() => {
+ expect(screen.getByText(/John Snow/i)).toBeInTheDocument()
+ expect(screen.getByText(/john.snow@email.com/i)).toBeInTheDocument()
+ expect(screen.getByText(/GUEST/i)).toBeInTheDocument()
+ })
+ })
+})
diff --git a/src/pages/users/Users.tsx b/src/pages/users/Users.tsx
new file mode 100644
index 0000000..0876c7b
--- /dev/null
+++ b/src/pages/users/Users.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Page } from './api/usersApi.types'
+import { useTranslation } from 'react-i18next'
+import { useRolesGraphql } from './hooks/useRolesGraphql'
+import { PayloadAction } from '@reduxjs/toolkit'
+import { PaginationState, SortingState } from '@tanstack/react-table'
+import { DataTable } from '@/components/custom/data-table'
+import { UserDialog } from './components/user-dialog'
+import { useUserColumns } from '@/pages/users/hooks/useColumns'
+import { LoadingScreenMemo } from '@/components/app/loading-screen'
+import { usersApi } from '@/pages/users/api/usersApi.ts'
+
+const buildPage = (pagination: PaginationState, sorting: SortingState): Page => {
+ return new Page(pagination.pageIndex, pagination.pageSize, sorting[0].id, sorting[0].desc ? 'DESC' : 'ASC')
+}
+
+const toPayload = (data: Page): PayloadAction<{ page: number; pageSize: number; sort: string; direction: string }> => {
+ return { payload: { page: data.page, pageSize: data.pageSize, sort: data.sort, direction: data.direction }, type: '' }
+}
+
+export const Users: React.FC = () => {
+ const [pagination, setPagination] = useState({
+ pageIndex: 0,
+ pageSize: 5,
+ })
+ const [sorting, setSorting] = React.useState([{ id: '_id', desc: false }])
+
+ const { roles } = useRolesGraphql()
+ const users = usersApi.useGetAllUsersQuery(toPayload(buildPage(pagination, sorting)))
+ const size = usersApi.useGetUsersSizeQuery()
+ const [createUser] = usersApi.useCreateUserMutation()
+ const { t } = useTranslation(['main'])
+ const columns = useUserColumns()
+
+ if (users.isLoading) {
+ return
+
+ {t(`users.t1`, { ns: ['main'] })}
+ {t(`users.t2`, { ns: ['main'] })}
+
+
+
+
+
+ )
+}
diff --git a/src/pages/users/api/usersApi.ts b/src/pages/users/api/usersApi.ts
new file mode 100644
index 0000000..983dbdc
--- /dev/null
+++ b/src/pages/users/api/usersApi.ts
@@ -0,0 +1,118 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import type { User, UserInput, UserInputDto } from './usersApi.types'
+import keycloak from '@/lib/keycloak'
+import { PayloadAction } from '@reduxjs/toolkit'
+
+const toDto = (data: UserInput): UserInputDto => {
+ return [data].map((e): UserInputDto => {
+ return {
+ _id: e._id,
+ name: e.name,
+ email: e.email,
+ role: e.role.map((r) => r._id!),
+ version: e.version,
+ }
+ })[0]
+}
+
+export const usersApi = createApi({
+ tagTypes: ['users', 'usersCount'],
+ reducerPath: 'usersApi',
+ baseQuery: fetchBaseQuery({
+ baseUrl: import.meta.env.VITE_APP_BACKEND_URL + '/coroutine',
+ prepareHeaders: (headers) => {
+ const token = keycloak.token
+ if (token) {
+ headers.set('authorization', `Bearer ${token}`)
+ }
+ return headers
+ },
+ }),
+ endpoints: (builder) => ({
+ getAllUsers: builder.query<
+ User[],
+ PayloadAction<{
+ page: number
+ pageSize: number
+ sort: string
+ direction: string
+ }>
+ >({
+ query: (arg) =>
+ `/users?page=${arg.payload.page}&size=${arg.payload.pageSize}&sort=${arg.payload.sort}&direction=${arg.payload.direction}`,
+ providesTags: ['users'],
+ }),
+ getUsersSize: builder.query({
+ query: () => `/usersCount`,
+ providesTags: ['usersCount'],
+ }),
+ getUser: builder.query({
+ query: (id: string) => ({
+ url: `/users/${id}`,
+ method: 'GET',
+ }),
+ }),
+ // note: no optimistic locking here, because we don't know the ID for the new user, so we don't know where to put it
+ createUser: builder.mutation({
+ query: (data: UserInput) => ({
+ url: '/users',
+ method: 'POST',
+ body: toDto(data),
+ }),
+ invalidatesTags: ['users', 'usersCount'],
+ }),
+ updateUser: builder.mutation({
+ query: (data: UserInput) => ({
+ url: `/users/${data._id}`,
+ method: 'PUT',
+ body: toDto(data),
+ }),
+ async onQueryStarted({ _id, name, email, role }, { dispatch, queryFulfilled, getState }) {
+ for (const { endpointName, originalArgs } of usersApi.util.selectInvalidatedBy(getState(), [
+ { type: 'users' },
+ ])) {
+ if (endpointName !== 'getAllUsers') continue
+ const patchResult = dispatch(
+ usersApi.util.updateQueryData(endpointName, originalArgs, (draft) => {
+ return draft.map((e): User => {
+ if (e._id === _id) {
+ return { ...e, name: '' + name, email: email, role: role }
+ } else {
+ return e
+ }
+ })
+ })
+ )
+ try {
+ await queryFulfilled
+ } catch {
+ patchResult.undo()
+ }
+ }
+ },
+ invalidatesTags: ['users', 'usersCount'],
+ }),
+ deleteUser: builder.mutation({
+ query: (data: string) => ({
+ url: `/users/${data}`,
+ method: 'DELETE',
+ }),
+ async onQueryStarted(data, { dispatch, queryFulfilled, getState }) {
+ for (const { endpointName, originalArgs } of usersApi.util.selectInvalidatedBy(getState(), [
+ { type: 'users' },
+ ])) {
+ if (endpointName !== 'getAllUsers') continue
+ const patchResult = dispatch(
+ usersApi.util.updateQueryData(endpointName, originalArgs, (draft) => draft.filter((e) => e._id !== data))
+ )
+ try {
+ await queryFulfilled
+ } catch {
+ patchResult.undo()
+ }
+ }
+ },
+ invalidatesTags: ['users', 'usersCount'],
+ }),
+ }),
+})
diff --git a/src/pages/users/api/usersApi.types.ts b/src/pages/users/api/usersApi.types.ts
new file mode 100644
index 0000000..f0971c5
--- /dev/null
+++ b/src/pages/users/api/usersApi.types.ts
@@ -0,0 +1,48 @@
+export interface Role {
+ readonly _id: string | undefined
+ name: string
+ description: string
+
+ version: number | undefined
+ createdBy: string | undefined
+ createdDate: string | undefined
+ modifiedBy: string | undefined
+ modifiedDate: string | undefined
+}
+
+export interface User {
+ readonly _id: string | undefined
+ name: string
+ email: string
+ role: Role[]
+
+ version: number | undefined
+ createdBy: string | undefined
+ createdDate: string | undefined
+ modifiedBy: string | undefined
+ modifiedDate: string | undefined
+}
+
+export interface UserInput {
+ _id: string | undefined
+ name: string
+ email: string
+ role: T
+ version: number | undefined
+}
+
+export type UserInputDto = UserInput
+
+export class Page {
+ page: number
+ pageSize: number
+ sort: string
+ direction: string
+
+ constructor(page: number = 0, pageSize: number = 10, sort: string = 'id', direction: string = 'ASC') {
+ this.page = page
+ this.pageSize = pageSize
+ this.sort = sort
+ this.direction = direction
+ }
+}
diff --git a/src/pages/users/components/user-dialog.tsx b/src/pages/users/components/user-dialog.tsx
new file mode 100644
index 0000000..3585445
--- /dev/null
+++ b/src/pages/users/components/user-dialog.tsx
@@ -0,0 +1,187 @@
+import React, { useState } from 'react'
+import { Role, UserInput } from '@/pages/users/api/usersApi.types'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '@/components/ui/dialog'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import MultipleSelector, { Option } from '@/components/custom/multiple-selector'
+import { Button } from '@/components/ui/button'
+import { useTranslation } from 'react-i18next'
+
+export interface UserDialogProps {
+ children?: React.ReactNode
+ data?: UserInput
+ roles: Role[]
+ submit?: (data: UserInput) => void
+}
+
+export const UserDialog = ({ children, data, roles, submit }: UserDialogProps) => {
+ const [isOpen, setIsOpen] = useState(false)
+ const { t } = useTranslation(['main'])
+
+ const formSchema = z.object({
+ _id: z.string().optional(),
+ name: z.string().min(2, {
+ message: t('users.name_validation', { ns: ['main'] }),
+ }),
+ email: z.string().min(2, {
+ message: t('users.email_validation', { ns: ['main'] }),
+ }),
+ role: z.array(z.string()).min(1, {
+ message: t('users.role_validation', { ns: ['main'] }),
+ }),
+ version: z.number().optional(),
+ })
+
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ _id: undefined,
+ name: '',
+ email: '',
+ role: [],
+ version: undefined,
+ },
+ })
+
+ const onSubmit = (values: z.infer) => {
+ if (submit) {
+ submit({
+ _id: values._id,
+ name: values.name,
+ email: values.email,
+ role: [...values.role.map((e) => roles.find((role) => role._id === e)!)],
+ version: values.version,
+ })
+ }
+ form.reset()
+ setIsOpen(false)
+ }
+
+ return (
+ <>
+
+
+ )
+}
diff --git a/src/pages/users/graphql/permissions.graphql b/src/pages/users/graphql/permissions.graphql
new file mode 100644
index 0000000..b868230
--- /dev/null
+++ b/src/pages/users/graphql/permissions.graphql
@@ -0,0 +1,6 @@
+query getAllPermissions($page: Int, $size: Int, $sort: String, $direction: String) {
+ getAllPermissions(page: $page, size: $size, sort: $sort, direction: $direction) {
+ id
+ name
+ }
+}
diff --git a/src/pages/users/hooks/useColumns.tsx b/src/pages/users/hooks/useColumns.tsx
new file mode 100644
index 0000000..550865e
--- /dev/null
+++ b/src/pages/users/hooks/useColumns.tsx
@@ -0,0 +1,107 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { User, UserInput } from '@/pages/users/api/usersApi.types'
+import { Button } from '@/components/ui/button'
+import { ArrowUpDown, MoreHorizontal } from 'lucide-react'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { UserDialog } from '@/pages/users/components/user-dialog'
+import { Label } from '@/components/ui/label'
+import { useTranslation } from 'react-i18next'
+import { useRolesGraphql } from '@/pages/users/hooks/useRolesGraphql'
+import { usersApi } from '@/pages/users/api/usersApi.ts'
+
+const parse = (data: User): UserInput => {
+ return {
+ _id: data._id,
+ name: data.name,
+ email: data.email,
+ role: data.role,
+ version: data.version,
+ }
+}
+
+export const useUserColumns = () => {
+ const { roles } = useRolesGraphql()
+ const [updateUser] = usersApi.useUpdateUserMutation()
+ const [deleteUser] = usersApi.useDeleteUserMutation()
+ const { t } = useTranslation(['main'])
+
+ const columns: ColumnDef[] = [
+ {
+ accessorKey: '_id',
+ header: ({ column }) => {
+ return (
+
+ )
+ },
+ },
+ {
+ accessorKey: 'name',
+ header: `${t(`users.name`, { ns: ['main'] })}`,
+ },
+ {
+ accessorKey: 'email',
+ header: `${t(`users.email`, { ns: ['main'] })}`,
+ },
+ {
+ accessorKey: 'role',
+ header: () => ()
+ const { loading, error, data } = useGetAllPermissionsQuery({
+ variables: {
+ page: 0,
+ size: 10,
+ sort: 'id',
+ direction: 'ASC',
+ },
+ })
+
+ useEffect(() => {
+ if (!roles) {
+ getRoles()
+ }
+ }, [data, loading, error])
+
+ const getRoles = () => {
+ if (error) {
+ console.error(`apollo error: ` + error.message)
+ }
+
+ if (loading) {
+ // ...
+ }
+
+ if (data) {
+ const permissions: Role[] | undefined = data.getAllPermissions?.map((e) => {
+ return {
+ _id: e?.id,
+ name: e?.name,
+ } as Role
+ })
+ setRoles([...permissions!])
+ }
+ }
+
+ return {
+ roles,
+ }
+}
diff --git a/src/setupTests.ts b/src/setupTests.ts
new file mode 100644
index 0000000..1c12fe7
--- /dev/null
+++ b/src/setupTests.ts
@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: vi.fn().mockImplementation((query) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: vi.fn(), // deprecated
+ removeListener: vi.fn(), // deprecated
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ dispatchEvent: vi.fn(),
+ })),
+})
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
new file mode 100644
index 0000000..ccd1a7f
--- /dev/null
+++ b/src/store/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { AppDispatch, RootState } from './store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch()
+export const useAppSelector: TypedUseSelectorHook = useSelector
diff --git a/src/store/store.ts b/src/store/store.ts
new file mode 100644
index 0000000..930ba7a
--- /dev/null
+++ b/src/store/store.ts
@@ -0,0 +1,47 @@
+import { Action, combineReducers, configureStore, ThunkAction } from '@reduxjs/toolkit'
+import counterReducer from '@/pages/counter/counterSlice'
+import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
+import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist'
+import { usersApi } from '@/pages/users/api/usersApi'
+import { setupListeners } from '@reduxjs/toolkit/query'
+
+const persistConfig = {
+ key: 'counter',
+ storage,
+}
+
+const persistedReducer = persistReducer(persistConfig, counterReducer)
+
+const rootReducer = combineReducers({
+ counter: persistedReducer,
+ // Add the generated reducer as a specific top-level slice
+ [usersApi.reducerPath]: usersApi.reducer,
+})
+
+export const setupStore = (preloadedState?: Partial) => {
+ return configureStore({
+ reducer: rootReducer,
+ middleware: (getDefaultMiddleware) =>
+ getDefaultMiddleware({
+ serializableCheck: {
+ ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+ },
+ // Adding the api middleware enables caching, invalidation, polling,
+ // and other useful features of `rtk-query`.
+ }).concat(usersApi.middleware),
+ preloadedState,
+ })
+}
+
+export const store = setupStore()
+export const persistor = persistStore(store)
+
+export type AppStore = ReturnType
+export type AppDispatch = AppStore['dispatch']
+export type RootState = ReturnType
+
+export type AppThunk = ThunkAction>
+
+// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
+// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
+setupListeners(store.dispatch)
diff --git a/vite.config.ts b/vite.config.ts
index 6db7dcd..9e48bc3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
globals: true,
environment: 'jsdom',
css: true,
+ setupFiles: [path.resolve(__dirname, './src/setupTests.ts')],
},
server: {
host: '0.0.0.0',
+
+
-
+
)
}
diff --git a/src/components/app/loading-screen.tsx b/src/components/app/loading-screen.tsx
new file mode 100644
index 0000000..2d28a28
--- /dev/null
+++ b/src/components/app/loading-screen.tsx
@@ -0,0 +1,14 @@
+import { Spinner } from '@/components/custom/spinner'
+import React from 'react'
+
+export function LoadingScreen() {
+ return (
+
-
- Vite + React
-
-
-
- This is a template application for React and Vite.
-- There are some test components on the site. Please clear the content and put down your code. -
-
-
+
+
-
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {t(`home.section1`, { ns: ['main'] })}
+ {t(`home.section2`, { ns: ['main'] })}
+
+ )
+}
+
+export const LoadingScreenMemo = React.memo(LoadingScreen)
diff --git a/src/components/app/menu-item.ts b/src/components/app/menu-item.ts
new file mode 100644
index 0000000..351b281
--- /dev/null
+++ b/src/components/app/menu-item.ts
@@ -0,0 +1,5 @@
+export type MenuItem = {
+ readonly key: string
+ readonly route: string
+ readonly restricted: boolean
+}
diff --git a/src/components/app/nav-item.tsx b/src/components/app/nav-item.tsx
new file mode 100644
index 0000000..5c61992
--- /dev/null
+++ b/src/components/app/nav-item.tsx
@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router'
+import { NavigationMenuItem, NavigationMenuLink, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
+import { MenuItem } from '@/components/app/menu-item'
+
+export function NavMenuItem({ item }: { item: MenuItem }) {
+ const navigate = useNavigate()
+ const location = useLocation()
+
+ return (
+
+
+
+
+ )
+}
diff --git a/src/components/custom/data-table.tsx b/src/components/custom/data-table.tsx
new file mode 100644
index 0000000..de19ff5
--- /dev/null
+++ b/src/components/custom/data-table.tsx
@@ -0,0 +1,183 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from '@radix-ui/react-icons'
+import {
+ ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ PaginationState,
+ SortingState,
+ useReactTable,
+} from '@tanstack/react-table'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import { OnChangeFn } from '@tanstack/table-core/src/types'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import { Table as TTable } from '@tanstack/table-core/build/lib/types'
+
+export interface DataTablePaginationProps
+
+
+
+
+
+ {t('cookie_consent.title', { ns: ['main'] })}
+
+
+
+ {t('cookie_consent.content', { ns: ['main'] })}
+
+
+
+ {t('cookie_consent.accept_pt1', { ns: ['main'] }) + ' '} "
+ {t('cookie_consent.accept', { ns: ['main'] })}"{' '}
+ {', ' + t('cookie_consent.accept_pt2', { ns: ['main'] })}
+
+
+
+ {t('cookie_consent.learn_more', { ns: ['main'] })}
+
+
+
+
+
+
+
+ )
+}
+
+export interface DataTableProps
+ {withSelected ? (
+ <>
+ {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s)
+ selected.
+
+ ) : (
+ <>
+ )}
+
+
+
+
+
+ Rows per page
+ +
+ Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/custom/multiple-selector.tsx b/src/components/custom/multiple-selector.tsx
new file mode 100644
index 0000000..3703354
--- /dev/null
+++ b/src/components/custom/multiple-selector.tsx
@@ -0,0 +1,509 @@
+import { Command as CommandPrimitive, useCommandState } from 'cmdk'
+import { X } from 'lucide-react'
+import * as React from 'react'
+import { forwardRef, useEffect } from 'react'
+
+import { Badge } from '@/components/ui/badge'
+import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
+import { cn } from '@/lib/utils'
+
+export interface Option {
+ value: string
+ label: string
+ disable?: boolean
+ /** fixed option that can't be removed. */
+ fixed?: boolean
+ /** Group the options by providing key. */
+ [key: string]: string | boolean | undefined
+}
+interface GroupOption {
+ [key: string]: Option[]
+}
+
+interface MultipleSelectorProps {
+ value?: Option[]
+ defaultOptions?: Option[]
+ /** manually controlled options */
+ options?: Option[]
+ placeholder?: string
+ /** Loading component. */
+ loadingIndicator?: React.ReactNode
+ /** Empty component. */
+ emptyIndicator?: React.ReactNode
+ /** Debounce time for async search. Only work with `onSearch`. */
+ delay?: number
+ /**
+ * Only work with `onSearch` prop. Trigger search when `onFocus`.
+ * For example, when user click on the input, it will trigger the search to get initial options.
+ **/
+ triggerSearchOnFocus?: boolean
+ /** async search */
+ onSearch?: (value: string) => Promise
+
+
+
+
+
+
+
+ {
+ if (disabled) return
+ inputRef.current?.focus()
+ }}
+ >
+
+
+ {selected.map((option) => {
+ return (
+
+ {option.label}
+
+
+ )
+ })}
+ {/* Avoid having the "Search" Icon */}
+ {
+ setInputValue(value)
+ inputProps?.onValueChange?.(value)
+ }}
+ onBlur={(event) => {
+ setOpen(false)
+ inputProps?.onBlur?.(event)
+ }}
+ onFocus={(event) => {
+ setOpen(true)
+ triggerSearchOnFocus && onSearch?.(debouncedSearchTerm)
+ inputProps?.onFocus?.(event)
+ }}
+ placeholder={hidePlaceholderWhenSelected && selected.length !== 0 ? '' : placeholder}
+ className={cn(
+ 'flex-1 bg-transparent outline-none placeholder:text-muted-foreground',
+ {
+ 'w-full': hidePlaceholderWhenSelected,
+ 'px-3 py-2': selected.length === 0,
+ 'ml-1': selected.length !== 0,
+ },
+ inputProps?.className
+ )}
+ />
+
+
+
+ {open && (
+
+ {isLoading ? (
+ <>{loadingIndicator}
+ ) : (
+ <>
+ {EmptyItem()}
+ {CreatableItem()}
+ {!selectFirstItem &&
+ <>
+ {dropdowns.map((option) => {
+ return (
+ {
+ e.preventDefault()
+ e.stopPropagation()
+ }}
+ onSelect={() => {
+ if (selected.length >= maxSelected) {
+ onMaxSelected?.(selected.length)
+ return
+ }
+ setInputValue('')
+ const newOptions = [...selected, option]
+ setSelected(newOptions)
+ onChange?.(newOptions)
+ }}
+ className={cn('cursor-pointer', option.disable && 'cursor-default text-muted-foreground')}
+ >
+ {option.label}
+
+ )
+ })}
+
+
+ ))}
+
+ )}
+
+ )}
+
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef+ {body} +
+ ) + } +) +FormMessage.displayName = 'FormMessage' + +export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..677d05f --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface InputProps + extends React.InputHTMLAttributes
+
+))
+NavigationMenuViewport.displayName =
+ NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+
+
+ {t(`counter.title`, { ns: ['main'] })}
+ {t(`counter.subtitle`, { ns: ['main'] })}
+
+
+
+
+
+ )
+}
diff --git a/src/pages/counter/api/counterAPI.ts b/src/pages/counter/api/counterAPI.ts
new file mode 100644
index 0000000..4e43a36
--- /dev/null
+++ b/src/pages/counter/api/counterAPI.ts
@@ -0,0 +1,4 @@
+// A mock function to mimic making an async request for data
+export function fetchCount(amount = 1) {
+ return new Promise<{ data: number }>((resolve) => setTimeout(() => resolve({ data: amount }), 500))
+}
diff --git a/src/pages/counter/counterSlice.spec.ts b/src/pages/counter/counterSlice.spec.ts
new file mode 100644
index 0000000..d24a22f
--- /dev/null
+++ b/src/pages/counter/counterSlice.spec.ts
@@ -0,0 +1,29 @@
+import counterReducer, { CounterState, decrement, increment, incrementByAmount } from './counterSlice'
+
+describe('counter reducer', () => {
+ const initialState: CounterState = {
+ value: 3,
+ status: 'idle',
+ }
+ it('should handle initial state', () => {
+ expect(counterReducer(undefined, { type: 'unknown' })).toEqual({
+ value: 0,
+ status: 'idle',
+ })
+ })
+
+ it('should handle increment', () => {
+ const actual = counterReducer(initialState, increment())
+ expect(actual.value).toEqual(4)
+ })
+
+ it('should handle decrement', () => {
+ const actual = counterReducer(initialState, decrement())
+ expect(actual.value).toEqual(2)
+ })
+
+ it('should handle incrementByAmount', () => {
+ const actual = counterReducer(initialState, incrementByAmount(2))
+ expect(actual.value).toEqual(5)
+ })
+})
diff --git a/src/pages/counter/counterSlice.ts b/src/pages/counter/counterSlice.ts
new file mode 100644
index 0000000..970aaf7
--- /dev/null
+++ b/src/pages/counter/counterSlice.ts
@@ -0,0 +1,81 @@
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { AppThunk, RootState } from '@/store/store'
+import { fetchCount } from './api/counterAPI'
+
+export interface CounterState {
+ value: number
+ status: 'idle' | 'loading' | 'failed'
+}
+
+const initialState: CounterState = {
+ value: 0,
+ status: 'idle',
+}
+
+// The function below is called a thunk and allows us to perform async logic. It
+// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
+// will call the thunk with the `dispatch` function as the first argument. Async
+// code can then be executed and other actions can be dispatched. Thunks are
+// typically used to make async requests.
+export const incrementAsync = createAsyncThunk('counter/fetchCount', async (amount: number) => {
+ const response = await fetchCount(amount)
+ // The value we return becomes the `fulfilled` action payload
+ return response.data
+})
+
+export const counterSlice = createSlice({
+ name: 'counter',
+ initialState,
+ // The `reducers` field lets us define reducers and generate associated actions
+ reducers: {
+ increment: (state) => {
+ // Redux Toolkit allows us to write "mutating" logic in reducers. It
+ // doesn't actually mutate the state because it uses the Immer library,
+ // which detects changes to a "draft state" and produces a brand new
+ // immutable state based off those changes
+ state.value += 1
+ },
+ decrement: (state) => {
+ state.value -= 1
+ },
+ // Use the PayloadAction type to declare the contents of `action.payload`
+ incrementByAmount: (state, action: PayloadAction
+
+ {count}
+
+
+
+ setIncrementAmount(e.target.value)}
+ />
+
+
+
+
+
+
+ )
+}
+
+export const Unauthorized: React.FC = () => {
+ const { t } = useTranslation(['main'])
+
+ return (
+ {t(`error.not_found`)}
+
+
+ )
+}
diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
new file mode 100644
index 0000000..d8af86b
--- /dev/null
+++ b/src/pages/home/home.tsx
@@ -0,0 +1,19 @@
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { useTranslation } from 'react-i18next'
+
+export const Home = () => {
+ const { t } = useTranslation(['main'])
+
+ return (
+ <>
+ {t(`error.unauthorized`)}
+
+ <>
+ {
+ createUser(data).then(() => {})
+ }}
+ >
+
+
+
+ <>
+ {
+ return { ...e, key: e._id }
+ })
+ : []
+ }
+ total={size.data ? size.data : 0}
+ pagination={pagination}
+ paginationChangeFn={setPagination}
+ sorting={sorting}
+ sortingChangeFn={setSorting}
+ />
+
+
+ {`${t(`users.role`, { ns: ['main'] })}`}
,
+ cell: ({ row }) => {
+ const formatted = row.original.role.map((role) => role.name).join(', ')
+ return {formatted}
+ },
+ },
+ {
+ id: 'actions',
+ header: '',
+ cell: ({ row }) => {
+ const user = row.original
+ return (
+
+
+ )
+ },
+ },
+ ]
+
+ return columns
+}
diff --git a/src/pages/users/hooks/useRolesGraphql.tsx b/src/pages/users/hooks/useRolesGraphql.tsx
new file mode 100644
index 0000000..6e98100
--- /dev/null
+++ b/src/pages/users/hooks/useRolesGraphql.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react'
+import { Role } from '../api/usersApi.types'
+import { useGetAllPermissionsQuery } from '@/graphql/generated'
+
+export const useRolesGraphql = () => {
+ const [roles, setRoles] = useState
+
+
+
+
+
+ Actions
+ {
+ updateUser(data).then(() => {})
+ }}
+ >
+
+
+
+
+
+
+