+
+ );
+ }
+
+ return
+ {/* Sidebar component, swap this element with another sidebar if you like */}
+
+
+ );
+}
diff --git a/frontend/src/components/DashboardTopBar.tsx b/frontend/src/components/DashboardTopBar.tsx
new file mode 100644
index 0000000..3803639
--- /dev/null
+++ b/frontend/src/components/DashboardTopBar.tsx
@@ -0,0 +1,129 @@
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import { Link, useForm, usePage } from '@inertiajs/react';
+import classNames from 'classnames';
+import { Fragment, useCallback } from 'react';
+import { apiGetUrls, apiPostUrls } from '@/constants/apiUrls';
+import { CommonProps } from '@/types/CommonProps';
+import { Avatar } from './Avatar';
+import { PaulLogoSvg } from './PaulLogoSvg';
+
+type DashboardTopBarProps = {
+ handleOpenSidebar: () => void;
+};
+
+export function DashboardTopBar({ handleOpenSidebar }: DashboardTopBarProps) {
+ const {
+ props: { is_authenticated, user },
+ } = usePage
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/Dialog.tsx b/frontend/src/components/Dialog.tsx
new file mode 100644
index 0000000..1d1349a
--- /dev/null
+++ b/frontend/src/components/Dialog.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+
+type DialogProps = {
+ children: ReactNode;
+ open: boolean;
+};
+
+export function Dialog({ children, open }: DialogProps) {
+ if (!open) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+ {is_authenticated && (
+
+ )}
+
+
+
+
+ {is_authenticated && user && (
+
+
+ )}
+
+ {/* Profile dropdown */}
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/DialogContent.tsx b/frontend/src/components/DialogContent.tsx
new file mode 100644
index 0000000..92f919d
--- /dev/null
+++ b/frontend/src/components/DialogContent.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+type DialogContentProps = {
+ children: ReactNode;
+};
+
+export function DialogContent({ children }: DialogContentProps) {
+ return
+
+
+ {children}
+
+ {children}
;
+}
diff --git a/frontend/src/components/DialogFooter.tsx b/frontend/src/components/DialogFooter.tsx
new file mode 100644
index 0000000..589ecb3
--- /dev/null
+++ b/frontend/src/components/DialogFooter.tsx
@@ -0,0 +1,43 @@
+import { MouseEventHandler } from 'react';
+import { Button } from './Button';
+
+type DialogFooterProps = {
+ disabled?: boolean;
+ mainButton: {
+ disabled?: boolean;
+ label: string;
+ onClick: MouseEventHandler;
+ };
+ secondaryButton?: {
+ disabled?: boolean;
+ label: string;
+ onClick: MouseEventHandler;
+ };
+};
+
+export function DialogFooter({
+ disabled,
+ mainButton,
+ secondaryButton,
+}: DialogFooterProps) {
+ return (
+
+ {secondaryButton && (
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/components/DialogTitle.tsx b/frontend/src/components/DialogTitle.tsx
new file mode 100644
index 0000000..78148ff
--- /dev/null
+++ b/frontend/src/components/DialogTitle.tsx
@@ -0,0 +1,20 @@
+import { XMarkIcon } from '@heroicons/react/20/solid';
+
+type DialogTitleProps = {
+ onClose: () => void;
+ title: string;
+};
+
+export function DialogTitle({ onClose, title }: DialogTitleProps) {
+ return (
+
+
+ );
+}
diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
new file mode 100644
index 0000000..add48e3
--- /dev/null
+++ b/frontend/src/components/ExternalLink.tsx
@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+
+type ExternalLinkProps = {
+ color?: string;
+ fontSize?: string;
+ name: ReactNode;
+ to: string;
+};
+
+export function ExternalLink({
+ color = 'text-inherit',
+ fontSize,
+ name,
+ to,
+}: ExternalLinkProps) {
+ return (
+
+ {name}
+
+ );
+}
diff --git a/frontend/src/components/Fallback.tsx b/frontend/src/components/Fallback.tsx
new file mode 100644
index 0000000..35b675b
--- /dev/null
+++ b/frontend/src/components/Fallback.tsx
@@ -0,0 +1,70 @@
+import { StructError } from 'superstruct';
+import { Dialog } from './Dialog';
+import { DialogContent } from './DialogContent';
+import { DialogTitle } from './DialogTitle';
+import { useState } from 'react';
+import { useErrorBoundary } from 'react-error-boundary';
+import { DialogFooter } from './DialogFooter';
+
+export function Fallback({ error }: { error: Error }) {
+ const [open, setOpen] = useState(true);
+ const { resetBoundary } = useErrorBoundary();
+
+ return (
+ {title}
+ +
+
+
+ );
+}
diff --git a/frontend/src/components/InternalLink.tsx b/frontend/src/components/InternalLink.tsx
new file mode 100644
index 0000000..4ae811a
--- /dev/null
+++ b/frontend/src/components/InternalLink.tsx
@@ -0,0 +1,24 @@
+import { Link } from '@inertiajs/react';
+import classNames from 'classnames';
+
+type ExternalLinkProps = {
+ color?: string;
+ fontSize?: string;
+ name: string;
+ to: string;
+ underline?: boolean;
+};
+
+export function InternalLink({
+ color = 'text-inherit',
+ fontSize,
+ name,
+ to,
+ underline = true,
+}: ExternalLinkProps) {
+ return (
+
+ {name}
+
+ );
+}
diff --git a/frontend/src/components/LinkButton.tsx b/frontend/src/components/LinkButton.tsx
new file mode 100644
index 0000000..240e078
--- /dev/null
+++ b/frontend/src/components/LinkButton.tsx
@@ -0,0 +1,56 @@
+import { Link } from '@inertiajs/react';
+import classnames from 'classnames';
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { SvgIcon } from '@/types/SvgIcon';
+
+export const contained = 'bg-primary-main';
+export const containedError = 'bg-red-100 text-error hover:bg-rose-200';
+export const outlined = 'border border-gray-300 text-gray-700 bg-white';
+const white = 'bg-white text-black';
+
+export const coreClasses =
+ 'flex items-center font-amalia-medium px-4 py-2.5 rounded-md text-black justify-center gap-x-2 text-sm whitespace-nowrap shadow hover:shadow-md';
+
+type PrimaryButtonProps = {
+ children: ReactNode;
+ endIcon?: SvgIcon;
+ fullWidth?: boolean;
+ iconSize?: 'h-4' | 'h-6';
+ onClick?: (
+ event: MouseEvent
+ {alert === 'success' && (
+
+ {flashMessage.message}
+ ))}
+
+
+
+ {page as unknown as ReactNode}
+
+
+ );
+}
diff --git a/frontend/src/layouts/LayoutDefault.tsx b/frontend/src/layouts/LayoutDefault.tsx
new file mode 100644
index 0000000..401d203
--- /dev/null
+++ b/frontend/src/layouts/LayoutDefault.tsx
@@ -0,0 +1,17 @@
+import { Page } from '@inertiajs/core';
+import { ReactNode, useState } from 'react';
+import { Button } from '@/components/Button';
+import { Notification } from '@/components/Notification';
+import { CommonProps } from '@/types/CommonProps';
+
+
+export default function LayoutDefault(page: Page
+
+ {page as unknown as ReactNode}
+
+
+ );
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
new file mode 100644
index 0000000..054b4b4
--- /dev/null
+++ b/frontend/src/main.jsx
@@ -0,0 +1,27 @@
+import { createInertiaApp } from '@inertiajs/react';
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { createRoot } from 'react-dom/client';
+import { Fallback } from './components/Fallback';
+import LayoutBackOffice from './layouts/LayoutBackOffice';
+import './index.css';
+
+const pages = import.meta.glob('./pages/**/*.tsx');
+
+document.addEventListener('DOMContentLoaded', () => {
+ createInertiaApp({
+ resolve: async (name) => {
+ const page = (await pages[`./pages/${name}.tsx`]()).default;
+ page.layout = page.layout || LayoutBackOffice;
+
+ return page;
+ },
+ setup({ el, App, props }) {
+ createRoot(el).render(
+
+
+
+ );
+}
+
+Index.layout = LayoutDefault;
diff --git a/frontend/src/pages/Public/Home/TestMenu.tsx b/frontend/src/pages/Public/Home/TestMenu.tsx
new file mode 100644
index 0000000..b2b61eb
--- /dev/null
+++ b/frontend/src/pages/Public/Home/TestMenu.tsx
@@ -0,0 +1,15 @@
+import LayoutDefault from '@/layouts/LayoutDefault';
+
+export default function Index() {
+ return (
+ <>
+ + PAUL +
+
+
+
+ );
+}
+
+Index.layout = LayoutDefault;
diff --git a/frontend/src/pages/temp.txt b/frontend/src/pages/temp.txt
new file mode 100644
index 0000000..1333ed7
--- /dev/null
+++ b/frontend/src/pages/temp.txt
@@ -0,0 +1 @@
+TODO
diff --git a/frontend/src/public/temp.txt b/frontend/src/public/temp.txt
new file mode 100644
index 0000000..1333ed7
--- /dev/null
+++ b/frontend/src/public/temp.txt
@@ -0,0 +1 @@
+TODO
diff --git a/frontend/src/stores/useNotifyStore.ts b/frontend/src/stores/useNotifyStore.ts
new file mode 100644
index 0000000..5366c05
--- /dev/null
+++ b/frontend/src/stores/useNotifyStore.ts
@@ -0,0 +1,42 @@
+import { FlashMessage } from '@/types/FlashMessage';
+import { omit } from 'lodash';
+import { create } from 'zustand';
+
+type Alert = 'success' | 'error';
+
+type NotifyState = {
+ alert?: Alert;
+ message?: string | FlashMessage[];
+ show: boolean;
+
+ actions: {
+ clearNotification: () => void;
+ hideNotification: () => void;
+ notifyError: (message: string | FlashMessage[]) => void;
+ notifySuccess: (message: string | FlashMessage[]) => void;
+ notify: (message: string | FlashMessage[], alert?: Alert) => void;
+ };
+};
+
+const useNotifyStore = create