Merge branch 'dev'

KyleKlus · Dec 27, 2023 · 4b2fc47 · 4b2fc47
2 parents ec99a80 + aaa3c5c
commit 4b2fc47
Show file tree

Hide file tree

Showing 93 changed files with 27,143 additions and 1,634 deletions.
diff --git a/doc/App_structure.excalidraw b/doc/App_structure.excalidraw
diff --git a/doc/Database_structure.excalidraw b/doc/Database_structure.excalidraw
diff --git a/next.config.js b/next.config.js
@@ -7,15 +7,16 @@ const nextConfig = {
   reactStrictMode: true,
   basePath: '/receipt-manager',
   output: 'export',
+  images: { unoptimized: true },
   env: {
     basePath: '/receipt-manager',
-    // NEXT_PUBLIC_FIREBASE_API_KEY: 'AIzaSyAYytnWLc4vB2glt1X8tWz27gpgclDvrls',
-    // NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: 'protected-page-login.firebaseapp.com',
-    // NEXT_PUBLIC_FIREBASE_PROJECT_ID: 'protected-page-login',
-    // NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: 'protected-page-login.appspot.com',
-    // NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: '1006126548565',
-    // NEXT_PUBLIC_FIREBASE_APP_ID: '1:1006126548565:web:3968fb892dec003f15b6dc',
-    // NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: 'G-G3GNEWJKK7',
+    NEXT_PUBLIC_FIREBASE_API_KEY: 'AIzaSyChYZbQkmc4s9csPwyeeadexqhbJeXJKN4',
+    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: 'receipt-manager-25bc4.firebaseapp.com',
+    NEXT_PUBLIC_FIREBASE_PROJECT_ID: 'receipt-manager-25bc4',
+    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: 'receipt-manager-25bc4.appspot.com',
+    NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: '531877776041',
+    NEXT_PUBLIC_FIREBASE_APP_ID: '1:531877776041:web:5229281461b26e7cfef7b8',
+    NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: 'G-M4R39LKG7B',
   },
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "next": "^14.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-select": "^5.8.0",
     "sass": "^1.69.5",
     "typescript": "^5.3.2",
     "xlsx": "^0.18.5"

diff --git a/public/close.png b/public/close.png
diff --git a/public/plus.png b/public/plus.png
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -0,0 +1,142 @@
+/** @format */
+import styles from '@/styles/components/Layout.module.css';
+
+import Head from 'next/head';
+import Footer from '@/components/footer/Footer';
+import dynamic from 'next/dynamic';
+import Main from '@/components/Main';
+import { RedirectPathOptions, redirectPaths, useAuth } from '@/context/AuthContext';
+import Content from './Content';
+import { useRouter } from 'next/router';
+import { useUserDB } from '@/context/UserDatabaseContext';
+import { IYearDataBaseContext, useYearDB } from '@/context/YearDatabaseContext';
+import { IMonthDataBaseContext, useMonthDB } from '@/context/MonthDatabaseContext';
+
+const ThemeButton = dynamic(() => import('@/components/buttons/ThemeButton'), {
+    ssr: false,
+});
+
+interface ILayoutProps {
+    className?: string
+}
+
+export default function Layout(props: React.PropsWithChildren<ILayoutProps>) {
+    const authContext = useAuth();
+    const userDB = useUserDB();
+    const yearDBContext: IYearDataBaseContext = useYearDB();
+    const monthDBContext: IMonthDataBaseContext = useMonthDB();
+    const router = useRouter();
+
+    const handleLogout = () => {
+        authContext.logOut();
+    }
+
+    return (
+        <>
+            <Head>
+                <title>Kyle Klus | Receipt Manager 🧾 - Dashboard</title>
+                <meta
+                    name="description"
+                    content="Receipt Manager web app"
+                />
+                <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1"
+                />
+                <link rel="manifest" href={process.env.basePath + "/manifest.webmanifest"}></link>
+                <link rel="manifest" href={process.env.basePath + "/manifest.json"}></link>
+                <link
+                    rel="shortcut icon"
+                    href={process.env.basePath + "/favicon.ico"}
+                />
+                <link
+                    rel="apple-touch-icon"
+                    sizes="180x180"
+                    href={process.env.basePath + "/apple-touch-icon.png"}
+                />
+                <link
+                    rel="icon"
+                    type="image/png"
+                    sizes="32x32"
+                    href={process.env.basePath + "/favicon-32x32.png"}
+                />
+                <link
+                    rel="icon"
+                    type="image/png"
+                    sizes="16x16"
+                    href={process.env.basePath + "/favicon-16x16.png"}
+                />
+            </Head>
+            <Main>
+                <Content className={[styles.layoutWrapper].join(' ')}>
+                    <div className={[styles.sideBar].join(' ')}>
+                        <div className={[styles.sideBarTop].join(' ')}>
+                            <button
+                                className={[
+                                    styles.functionButton,
+                                    applyCurrentWindowStyle(router.pathname, '/dashboard')
+                                ].join(' ')}
+                                onClick={() => {
+                                    !isCurrentWindow(router.pathname, '/dashboard')
+                                        && router.push('/dashboard')
+                                }}
+                            >📖</button>
+                            <button
+                                disabled={userDB.activeConnections.length === 0 && isCurrentWindow(router.pathname, redirectPaths[RedirectPathOptions.DashBoardPage]) || true}// TODO: remove after implementation
+                                className={[
+                                    styles.functionButton,
+                                    applyCurrentWindowStyle(router.pathname, '/items')
+                                ].join(' ')}
+                                onClick={() => {
+                                    !isCurrentWindow(router.pathname, '/items') && yearDBContext.currentYear !== undefined && monthDBContext.currentMonth !== undefined
+                                        && router.push({ pathname: '/items', query: { token: userDB.selectedConnection, year: yearDBContext.currentYear.name, month: monthDBContext.currentMonth.name } })
+                                }}
+                            >📜</button>
+                            <button
+                                disabled={userDB.activeConnections.length === 0 && isCurrentWindow(router.pathname, redirectPaths[RedirectPathOptions.DashBoardPage]) || true}// TODO: remove after implementation
+                                className={[
+                                    styles.functionButton,
+                                    applyCurrentWindowStyle(router.pathname, '/statistics')
+                                ].join(' ')}
+                                onClick={() => {
+                                    !isCurrentWindow(router.pathname, '/statistics') && yearDBContext.currentYear !== undefined && monthDBContext.currentMonth !== undefined
+                                        && router.push({ pathname: '/statistics', query: { token: userDB.selectedConnection, year: yearDBContext.currentYear.name, month: monthDBContext.currentMonth.name } })
+                                }}
+                            >📈</button>
+                        </div>
+                        <div className={[styles.sideBarBottom].join(' ')}>
+                            <hr />
+                            <ThemeButton />
+                            <button className={[styles.sideBarUserButton].join(' ')} onClick={handleLogout}>
+                                {authContext.user && authContext.user.displayName
+                                    ? authContext.user.displayName[0]
+                                    : 'U'
+                                }
+                            </button>
+                        </div>
+
+                    </div>
+                    <div className={[styles.layoutContent].join(' ')}>
+                        <div id={'top'}></div>
+                        {props.children}
+                        <Footer />
+                    </div>
+                </Content>
+            </Main>
+        </>
+    );
+}
+
+function isCurrentWindow(currentPath: string, buttonPath: string): boolean {
+    const currentPathName: string = currentPath.split('/').reverse()[0].replace('#', '');
+    const buttonPathName: string = buttonPath.split('/').reverse()[0].replace('#', '');
+
+    return (buttonPathName.length === 0 && currentPathName.length === 0) ||
+        (buttonPathName.length !== 0 && currentPathName.length !== 0 && buttonPathName.indexOf(currentPathName) !== -1);
+}
+
+function applyCurrentWindowStyle(currentPath: string, buttonPath: string): string {
+    return isCurrentWindow(currentPath, buttonPath)
+        ? styles.isCurrentWindow
+        : '';
+}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -0,0 +1,32 @@
+/** @format */
+import styles from '@/styles/components/Modal.module.css';
+import closeIcon from '../../public/close.png';
+import Image from 'next/image';
+
+interface IModalProps {
+  modalClassName?: string;
+  contentClassName?: string;
+  backDropClassName?: string;
+  isModalOpen: boolean;
+  closeModal: () => void;
+}
+
+export default function Modal(props: React.PropsWithChildren<IModalProps>) {
+
+  return (
+    <div className={[
+      styles.modalRoot,
+      !props.isModalOpen && styles.closed,
+      props.backDropClassName
+    ].join(' ')}>
+      <div className={[styles.modal, props.modalClassName].join(' ')}>
+        <button className={[styles.closeButton].join(' ')} type="button" onClick={props.closeModal}>
+          <Image src={closeIcon} alt='close' width={12} height={12} />
+        </button>
+        <div className={[styles.modalContent, props.contentClassName].join(' ')}>
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+}