Merge branch 'main' into create-endpoints-8

client/package.json

@@ -11,19 +11,18 @@
     "build": "tsc -b && vite build",
     "lint": "eslint",
     "format": "npx prettier --write .",
-    "preview": "vite preview",
-    "postinstall": "patch-package"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
+    "@react-pdf/renderer": "^4.1.6",
     "axios": "^1.7.4",
     "firebase": "10.12.5",
     "framer-motion": "^11.3.27",
     "patch-package": "^8.0.0",
-    "postinstall-postinstall": "^2.1.0",
     "react": "^18.3.1",
     "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",

client/src/App.jsx

@@ -17,6 +17,8 @@ import { AuthProvider } from "./contexts/AuthContext";
 import { BackendProvider } from "./contexts/BackendContext";
 import { RoleProvider } from "./contexts/RoleContext";
 import { ForgotPassword } from "./components/login/ForgotPassword";
+import { PDFViewer } from "@react-pdf/renderer";
+import PDFButton from "./components/PDFButton";
 
 const App = () => {
   return (
@@ -51,7 +53,6 @@ const App = () => {
                     />
                   }
                 />
-
                 <Route
                   path="/"
                   element={

client/src/assets/logo/Logo.jsx

@@ -0,0 +1,9 @@
+import LogoImg from "./logo.png";
+
+// NOTE: Do not import logo.png, use Logo component instead
+
+export const Logo = () => {
+  return (
+    <img src={LogoImg}></img>
+  );
+};

client/src/components/Navbar.jsx

@@ -0,0 +1,72 @@
+import { Box, Flex, Link, Text, VStack } from "@chakra-ui/react";
+
+export const Navbar = () => {
+  const menuItems = [
+    { name: "Home", path: "/home" },
+    { name: "Events", path: "/events" },
+    { name: "Invoices", path: "/invoices" },
+    { name: "Settings", path: "/settings" },
+    {
+      name: "Google Calendar",
+      path: "/calendar",
+      external: true,
+    },
+  ];
+
+  return (
+    <Box
+      w="64"
+      bg="white"
+      boxShadow="lg"
+      h="100vh"
+    >
+      {/* Logo Section */}
+      <Flex
+        justify="center"
+        p={6}
+      >
+        <Flex
+          w="16"
+          h="16"
+          rounded="full"
+          border="2px"
+          borderColor="gray.300"
+          align="center"
+          justify="center"
+        >
+          <Text
+            fontSize="xl"
+            fontWeight="semibold"
+          >
+            LPA
+          </Text>
+        </Flex>
+      </Flex>
+
+      {/* Navigation Links */}
+      <VStack
+        spacing={2}
+        align="stretch"
+        px={4}
+      >
+        {menuItems.map((item) => (
+          <Link
+            key={item.name}
+            href={item.path}
+            display="flex"
+            alignItems="center"
+            px={4}
+            py={3}
+            color="gray.700"
+            _hover={{ bg: "gray.100" }}
+            rounded="lg"
+          >
+            <Text>{item.name}</Text>
+          </Link>
+        ))}
+      </VStack>
+    </Box>
+  );
+};
+
+export default Navbar;

client/src/components/PDFButton.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
+import { PDFDownloadLink } from '@react-pdf/renderer';
+import { useBackendContext } from '../contexts/hooks/useBackendContext';
+
+
+const styles = StyleSheet.create({
+  page: {
+    padding: 30,
+    backgroundColor: '#ffffff'
+  },
+  section: {
+    margin: 10,
+    padding: 20,
+    borderRadius: 5,
+    backgroundColor: '#f8f9fa',
+    borderBottom: '1px solid #eee'
+  },
+  header: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 10,
+    color: '#2c3e50'
+  },
+  row: {
+    flexDirection: 'row',
+    marginBottom: 8,
+    alignItems: 'center'
+  },
+  label: {
+    width: 100,
+    fontSize: 12,
+    color: '#666',
+    marginRight: 10
+  },
+  value: {
+    flex: 1,
+    fontSize: 12,
+    color: '#333'
+  },
+  dateTime: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10
+  },
+  timeBlock: {
+    flex: 1
+  }
+});
+
+const MyDocument = ({ bookingData }) => { 
+  return ( 
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {bookingData && bookingData.map((element) => (
+          <View style={styles.section} key={element.id}>
+            <Text>Archived: {element.archived}</Text>
+            <Text>Date: {element.date}</Text>
+            <Text>Event ID: {element.eventId}</Text>
+            <Text>DB ID: {element.id}</Text>
+            <Text>Room ID: {element.roomId}</Text>
+            <Text>Start Time: {element.startTime}</Text>
+            <Text>End Time: {element.endTime}</Text>
+          </View>
+        ))}
+      </Page>
+    </Document>
+  );
+};
+
+const PDFButton = () => {
+  const { backend } = useBackendContext();
+  const [bookingData, setBookingData] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await backend.get("/bookings");
+        setBookingData(Array.isArray(response.data) ? response.data : []);
+      } catch (err) {
+        console.error("Error fetching bookings:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchData();
+  }, [backend]);
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <PDFDownloadLink
+        document={<MyDocument bookingData={bookingData} />}
+        fileName="bookingdata.pdf"
+      >
+      <button>Download PDF</button>
+      </PDFDownloadLink>
+    </div>
+  );
+};
+
+export default PDFButton;

client/src/components/playground/Playground.jsx

@@ -1,7 +1,9 @@
 import {
-    Heading,
-    VStack,
-  } from "@chakra-ui/react";
+  Heading,
+  VStack,
+} from "@chakra-ui/react";
+import React from 'react';
+import PDFButton from "../PDFButton";
 
 export const Playground = () => {
   return (
@@ -10,6 +12,7 @@ export const Playground = () => {
       sx={{ width: 300, marginX: "auto" }}
     >
       <Heading>Playground</Heading>
+      <PDFButton/>
     </VStack>
   );
 };

package.json

@@ -12,7 +12,7 @@
     "prepare": "husky install",
     "lint": "eslint",
     "format": "npx prettier --write .",
-    "postinstall": "cd client && npx patch-package"
+    "postinstall": "cd client && patch-package"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": "yarn run eslint"

server/routes/assignments.js

@@ -0,0 +1,70 @@
+import express from "express";
+import {db} from "../db/db-pgp";
+import { keysToCamel } from "../common/utils";
+
+const assignmentsRouter = express.Router();
+assignmentsRouter.use(express.json());
+
+assignmentsRouter.post("/", async (req, res) => {
+    try {
+      const { eventId, clientId, role } = req.body;
+
+      console.log('Values:', { eventId, clientId, role }); // Add this line
+      const query = {
+        text: 'INSERT INTO assignments (event_id, client_id, role) VALUES ($1, $2, $3) RETURNING *',
+        values: [eventId, clientId, role],
+      };
+
+      const result = await db.query(query);
+      console.log('Query result:', result);  // Add this line
+      res.status(201).json({id: result[0].id });
+    } catch (err) {
+      res.status(500).send(err.message);
+    }
+  });
+
+assignmentsRouter.get("/client/:client_id", async (req, res) => {
+    try {
+        const { client_id } = req.params;
+        const data = await db.query(`SELECT * FROM assignments WHERE client_id = $1`, [client_id]);
+        res.status(200).json(keysToCamel(data));
+    } catch (err) {
+        res.status(500).send(err.message);
+    }
+})
+
+assignmentsRouter.get("/search", async (req, res) => {
+    const {event, client} = req.query;
+    try {
+        const data = await db.query(`SELECT * FROM assignments WHERE event_id = $1 AND client_id = $2`, [event, client]);
+        res.status(200).json(keysToCamel(data));
+    } catch (err) {
+        res.status(500).send(err.message);
+    }
+})
+
+assignmentsRouter.put("/:id", async (req, res) => {
+    try {
+        const { id } = req.params;
+        const { eventId, clientId, role } = req.body;
+        const data = await db.query(`UPDATE assignments SET event_id = $1, client_id = $2, role = $3 WHERE id = $4 RETURNING *`, [eventId, clientId, role, id]);
+        res.status(200).json(keysToCamel(data));
+    } catch (err) {
+        res.status(500).send(err.message);
+    }
+})
+
+assignmentsRouter.delete("/:id", async (req, res) => {
+    try {
+        const {id} = req.params;
+        const data = await db.query("DELETE FROM assignments WHERE id = $1", [id]);
+        res.status(200).json({result: "success"});
+    } catch (err) {
+        res.status(500).json({result: "error"});
+    }
+});
+
+
+
+
+export { assignmentsRouter };