User Stats Page done

bluewave-labs · Feb 23, 2025 · afa0f2e · afa0f2e
1 parent 4b2dd50
commit afa0f2e
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 3 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -17,6 +17,7 @@ import HintDefaultPage from "./scenes/hints/HintDefaultPage";
 import { Error404 } from "./scenes/errors/404";
 import { Error403 } from "./scenes/errors/403";
 import HomePageTemplate from "./templates/HomePageTemplate/HomePageTemplate";
+import UserStatisticsPage from "./scenes/statistics/UserStatisticsPage";
 
 import { useEffect, useState } from "react";
 import { getHasUsers } from "./services/#Services";
@@ -41,10 +42,11 @@ const App = () => {
           <Route index element={<Home />} />
           <Route path="/link" element={<LinksDefaultPage />} />
           <Route path="/tour" element={<ToursDefaultPage />} />
-          <Route path="/banner" element={<Private Component={BannerDefaultPage} />} />
-          <Route path="/popup" element={<Private Component={PopupDefaultPage} />} />
+          <Route path="/banner" element={<BannerDefaultPage /> }/>
+          <Route path="/popup" element={<PopupDefaultPage /> }/>
           <Route path="/hint" element={<HintDefaultPage />} />
           <Route path="/settings" element={<Settings />} />
+          <Route path="/statistics" element={<UserStatisticsPage />} />
         </Route>
 
         <Route path="/#" element={<LoginPage isAdmin={isAdminLogin}/>} />

diff --git a/frontend/src/components/LeftMenu/LeftMenu.jsx b/frontend/src/components/LeftMenu/LeftMenu.jsx
@@ -12,6 +12,7 @@ import {
   MarkChatUnreadOutlined as ChatIcon,
 } from '@mui/icons-material';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import QueryStatsIcon from '@mui/icons-material/QueryStats';
 import './LeftMenu.css';
 import Logo from '../Logo/Logo';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -32,7 +33,8 @@ const menuItems = [
   // { text: 'Feedback', icon: <ChatIcon /> },
   // { text: 'Surveys', icon: <ListIcon /> },
   { text: 'Support', icon: <SportsIcon style={{ color: 'var(--menu-icon-color)'}}/>, route: 'https://github.com/bluewave-labs/bluewave-onboarding' },
-  { text: 'Settings', icon: <SettingsOutlinedIcon style={{ color: 'var(--menu-icon-color)'}}/>, route: '/settings' }
+  { text: 'Settings', icon: <SettingsOutlinedIcon style={{ color: 'var(--menu-icon-color)'}}/>, route: '/settings' },
+  { text: 'User Statistics', icon: <QueryStatsIcon style={{ color: 'var(--menu-icon-color)'}}/>, route: '/statistics' }
 ];
 
 function LeftMenu() {

diff --git a/frontend/src/components/Table/Table.jsx b/frontend/src/components/Table/Table.jsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import DoneIcon from '@mui/icons-material/Done';
+import CloseIcon from '@mui/icons-material/Close';
+import styles from './Table.module.css';
+
+export default function CustomTable({ fullData = [], headers = [], data = [] }) {
+    const tableHeaders = fullData.length > 0
+        ? Object.keys(fullData[0])
+        : headers;
+
+    const tableData = fullData.length > 0
+        ? fullData.map(item => Object.values(item))
+        : data;
+
+    return (
+        <TableContainer component={Paper}>
+            <Table sx={{ minWidth: 650 }}>
+                <TableHead>
+                    <TableRow className={styles.tableHeader}>
+                        {tableHeaders.map((header, index) => (
+                            <TableCell key={index} className={styles.heading}>{header}</TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {tableData.map((row, rowIndex) => (
+                        <TableRow key={rowIndex}>
+                            {row.map((cell, cellIndex) => (
+                                <TableCell key={cellIndex} className={styles.data}>
+                                    {typeof cell === 'boolean' ? (
+                                        cell ? <DoneIcon style={{ color: 'var(--checkIcon-green)' }} /> : <CloseIcon style={{ color: 'var(--red-500)' }} />
+                                    ) : (
+                                        cell
+                                    )}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+}
diff --git a/frontend/src/components/Table/Table.module.css b/frontend/src/components/Table/Table.module.css
@@ -0,0 +1,13 @@
+.tableHeader {
+    background-color: rgba(250, 250, 250, 1);
+}
+
+.heading {
+    color: var(--second-text-color) !important ;
+    font-size: 12px ;
+}
+
+.data {
+    font-size: var(--font-regular) ;
+    color: var(--second-text-color) !important;
+}
diff --git a/frontend/src/scenes/statistics/UserStatisticsPage.jsx b/frontend/src/scenes/statistics/UserStatisticsPage.jsx
@@ -0,0 +1,28 @@
+import CustomTable from "../../components/Table/Table";
+import { getAllGuideLogs } from "../../services/guidelogService";
+import { useEffect, useState, React } from "react";
+import styles from './UserStatisticsPage.module.css';
+
+const UserStatisticsPage = () => {
+    const [guideLogs, setGuideLogs] = useState([]);
+
+    useEffect(() => {
+        const fetchGuideLogs = async () => {
+            try {
+                const guideLogsData = await getAllGuideLogs();
+                setGuideLogs(guideLogsData);
+            } catch (err) {
+                console.error("Error fetching guide logs:", err);
+            }
+        };
+        fetchGuideLogs();
+    }, []);
+
+    return (
+        <div className={styles.container}>
+            <CustomTable fullData={guideLogs} />
+        </div>
+    );
+};
+
+export default UserStatisticsPage;
diff --git a/frontend/src/scenes/statistics/UserStatisticsPage.module.css b/frontend/src/scenes/statistics/UserStatisticsPage.module.css
@@ -0,0 +1,4 @@
+.container{
+    padding: 3rem 3.5rem;
+    width: 100%;
+}
diff --git a/frontend/src/services/guidelogService.js b/frontend/src/services/guidelogService.js
@@ -0,0 +1,22 @@
+import { apiClient } from './apiClient';
+
+export const getAllGuideLogs = async () => {
+    try {
+        const response = await apiClient.get('/guide_log/all_guide_logs');
+        return response.data;
+    } catch (error) {
+        console.error('Get Guide Logs error:', error.response.data.errors);
+        throw error;
+    }
+};
+
+export const addGuideLog = async (logData) => {
+    try {
+        const response = await apiClient.post('/guide_log/add_guide_log', logData);
+        return response.data;
+    } catch (error) {
+        console.error('Add Guide Logs error:', error.response.data.errors);
+        throw error;
+    }
+};
+