49 | {imageSrc ? (
50 | 
53 | ) : (
54 |
57 | );
58 | };
59 |
60 | export default ScreenshotComponent;
--------------------------------------------------------------------------------
/client/src/components/ChartPages/Charts/StackedBarGraph-clicks.tsx:
--------------------------------------------------------------------------------
1 | import { Bar } from "react-chartjs-2";
2 | import { useAtom } from "jotai";
3 | import { timeFrameAtom } from '../../../state/Atoms';
4 | import {
5 | Chart as ChartJS,
6 | BarElement,
7 | CategoryScale,
8 | LinearScale,
9 | Tooltip,
10 | Legend,
11 | } from "chart.js";
12 | import styles from '../Charts.module.css';
13 | import { filterDataByTimeFrame } from "../../../services/filterDataByTimeFrame ";
14 | import { PieChartsProps } from "../../../../types";
15 | import ChartDownload from "../ChartDownload";
16 | import { useRef } from "react";
17 | ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
18 |
19 | const StackedBarChart = ({ data, keyword, keywordTwo }: PieChartsProps) => {
20 | const [timeFrame] = useAtom(timeFrameAtom);
21 | const chartRef = useRef(null);
22 | const filteredData = filterDataByTimeFrame(data, timeFrame);
23 |
24 | const osBrowserCounts: { [os: string]: { [browser: string]: number } } = {};
25 |
26 | filteredData.forEach(item => {
27 | const os = item[keywordTwo];
28 | const browser = item[keyword];
29 |
30 | if (!osBrowserCounts[os]) {
31 | osBrowserCounts[os] = {};
32 | }
33 |
34 | osBrowserCounts[os][browser] = (osBrowserCounts[os][browser] || 0) + 1;
35 | });
36 |
37 | const osLabels = Object.keys(osBrowserCounts);
38 | const browserLabels = Array.from(new Set(filteredData.map(item => item[keyword])));
39 |
40 | const browserColors: { [key: string]: string } = {
41 | Chrome: 'rgba(251, 188, 5, 0.5)',
42 | Firefox: 'rgba(255, 69, 0, 0.5)',
43 | Safari: 'rgba(0, 122, 255, 0.5)',
44 | Edge: 'rgba(0, 82, 204, 0.5)',
45 | };
46 |
47 |
48 |
49 | const browserDatasets = browserLabels.map(browser => ({
50 | label: browser,
51 | data: osLabels.map(os => osBrowserCounts[os][browser] || 0),
52 | backgroundColor: browserColors[browser],
53 | borderColor: 'rgba(0, 0, 0, 0.1)',
54 | borderWidth: 1,
55 | }));
56 |
57 | const stackedBarChartData = {
58 | labels: osLabels,
59 | datasets: browserDatasets,
60 | };
61 |
62 | const options = {
63 | responsive: true,
64 | scales: {
65 | x: {
66 | stacked: true,
67 | },
68 | y: {
69 | stacked: true,
70 | },
71 | },
72 | };
73 |
74 | return (
75 | Loading image...
55 | )} 56 |
76 |
77 |
84 | );
85 | };
86 |
87 | export default StackedBarChart;
88 |
--------------------------------------------------------------------------------
/client/src/components/ChartPages/SelectWebsiteDropdown.tsx:
--------------------------------------------------------------------------------
1 | import { useAtom } from 'jotai';
2 | import { Box, FormControl, Select, MenuItem } from "@mui/material";
3 | import styles from '../User/UserView.module.css';
4 | import { websitesAtom, activeWebsiteAtom } from '../../state/Atoms';
5 | import { useNavigate } from 'react-router-dom';
6 | import { useState } from 'react';
7 |
8 | const TimeFrameDropdown = () => {
9 | const navigate = useNavigate();
10 | const [websites] = useAtom(websitesAtom);
11 | const [, setSelectedWebsite] = useAtom(activeWebsiteAtom);
12 | const [displayedData, setDisplayedData] = useState('Overview')
13 |
14 | return (
15 | Browser Usage by Operating System
78 |
80 |
83 |
8 |
70 | );
71 |
72 | };
73 |
74 | export default Footer;
75 |
76 | {/* Dashboard icons icons created by Kharisma - Flaticon */}
77 |
78 | {/*
9 | {/* 
*/}
10 |
35 |
36 | {/* */}
37 |
38 |
63 |
64 |
65 |
39 |
62 | -
40 |
-
41 |
42 | OSLabs43 | 44 |
45 |
-
46 |
47 | Readme48 | 49 |
50 |
-
51 |
52 | Demo53 | 54 |
55 |
-
56 |
57 | Patreon58 | 59 |
60 |
66 |
67 |
69 | 67 |
@OSAnalytics.io
68 | Icons made by Prosymbols from www.flaticon.com'
*/}
--------------------------------------------------------------------------------
/client/src/components/Landing/DashboardGif.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useRef } from "react";
2 | import {
3 | Box,
4 | Container,
5 | Grid,
6 | Typography,
7 | ThemeProvider,
8 | createTheme,
9 | } from "@mui/material";
10 | import { motion } from "framer-motion";
11 |
12 | const theme = createTheme({
13 | palette: {
14 | primary: {
15 | main: "#424242",
16 | },
17 | secondary: {
18 | main: "#757575",
19 | },
20 | background: {
21 | default: "#f5f5f5",
22 | },
23 | },
24 | });
25 |
26 | export default function DashboardPreview() {
27 | const [isVisible, setIsVisible] = useState(false);
28 | const sectionRef = useRef(null);
29 |
30 | useEffect(() => {
31 | const observer = new IntersectionObserver(
32 | (entries) => {
33 | const entry = entries[0];
34 | if (entry.isIntersecting) {
35 | setIsVisible(true);
36 | observer.disconnect();
37 | }
38 | },
39 | { threshold: 0.1 }
40 | );
41 |
42 | if (sectionRef.current) {
43 | observer.observe(sectionRef.current);
44 | }
45 |
46 | return () => {
47 | if (sectionRef.current) {
48 | observer.unobserve(sectionRef.current);
49 | }
50 | };
51 | }, []);
52 |
53 | return (
54 | 64 | Simple and powerful 65 |
34 |
35 |
41 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 |
64 |
65 |
66 |
72 | 
73 |
74 |
75 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/client/src/components/Landing/LandingView.tsx:
--------------------------------------------------------------------------------
1 | import Navbar from "../Navbar/Navbar";
2 | import Hero from "./Hero";
3 | import NavMobile from "../Navbar/NavMobile";
4 | import WhyOSA from "./WhyOSA";
5 | import TeamSection from "./githubProfiles";
6 | import FAQSection from "./FAQSection";
7 | import DashboardPreview from "./DashboardGif";
8 | import GettingStarted from "./GettingStarted";
9 | import Footer from "./Footer";
10 |
11 | export default function Landing() {
12 | return (
13 | Open Source Website Analytic Toolkit For Developers
42 |43 | OS Analytics is an open source, developer friendly tool for tracking 44 | the traffic and user interactions of any deployed application. Our goal is to give developers the tools they need to monitor user interactions without relying on third party products. 45 |
46 |
14 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/client/src/components/Landing/WhyOSA.module.css:
--------------------------------------------------------------------------------
1 | .whyOSA {
2 | width: 100%;
3 | background: #f4f4f4;
4 | display: flex;
5 | justify-content: center;
6 | flex-direction: column;
7 | align-items: center;
8 | padding: 2rem 3rem;
9 | gap: 1rem;
10 | }
11 | /* .whyOSA h1, h2, h3, h4, p {
12 | color: var(--black);
13 | } */
14 |
15 | .whyGrid {
16 | width: 100%;
17 | max-width: 1400px;
18 | display: grid;
19 | grid-template-rows: 1fr 1fr;
20 | grid-template-columns: 1fr 1fr;
21 | gap: 1rem;
22 |
23 | @media only screen and (max-width: 850px) {
24 | grid-template-rows: 1fr;
25 | grid-template-columns: 1fr;
26 | }
27 | }
28 |
29 | .whyItem {
30 | display: flex;
31 | gap: 1rem;
32 | justify-content: space-between;
33 | align-items: center;
34 | }
35 |
36 | .iconBox {
37 | padding: 2rem;
38 | }
39 | /* .whyContentBox {
40 | flex-grow: true;
41 | } */
42 |
43 | .whyIcon {
44 | height: 4rem;
45 |
46 | @media only screen and (max-width: 850px) {
47 | height: 2.4rem;
48 | }
49 | }
--------------------------------------------------------------------------------
/client/src/components/Landing/WhyOSA.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 | import styles from './WhyOSA.module.css';
3 | import icon from '../../assets/icons/graphs.png';
4 | import globe from '../../assets/icons/blackGlobe.png';
5 | import aiImage from '../../assets/icons/aiImage.png';
6 | import clickImage from '../../assets/icons/clickImage.png';
7 | import { motion } from 'framer-motion';
8 |
9 | export default function WhyOSA() {
10 | const [isVisible, setIsVisible] = useState(false);
11 | const sectionRef = useRef(null);
12 |
13 |
14 | useEffect(() => {
15 | const observer = new IntersectionObserver(
16 | (entries) => {
17 | const entry = entries[0];
18 | if (entry.isIntersecting) {
19 | setIsVisible(true);
20 | observer.disconnect();
21 | }
22 | },
23 | { threshold: 0.2 }
24 | );
25 |
26 | if (sectionRef.current) {
27 | observer.observe(sectionRef.current);
28 | }
29 |
30 | return () => {
31 | if (sectionRef.current) {
32 | observer.unobserve(sectionRef.current);
33 | }
34 | };
35 | }, []);
36 |
37 | return (
38 |
48 | {[{
49 | img: clickImage,
50 | title: 'Custom Click Tracking',
51 | description: 'Easily integrate our clickTracker to monitor user clicks and interactions.'
52 | }, {
53 | img: icon,
54 | title: 'Real-Time Analytics',
55 | description: 'Capture and visualize user activity data in real-time using our robust dashboard.'
56 | }, {
57 | img: globe,
58 | title: 'Multiple Website Support',
59 | description: 'Track and manage multiple websites effortlessly through the dashboard.'
60 | }, {
61 | img: aiImage,
62 | title: 'AI-Powered Reports',
63 | description: 'Leverage AWS Bedrock for generating insightful and comprehensive activity reports.'
64 | }].map((item, index) => (
65 |
72 |
84 | ))}
85 |
86 |
73 | 
74 |
75 |
76 |
83 | 77 | {item.title} 78 |
79 |80 | {item.description} 81 |
82 |
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/client/src/components/Login/Login.module.css:
--------------------------------------------------------------------------------
1 | .loginPage {
2 | display: flex;
3 | height: calc(100vh - 4rem);
4 | overflow: hidden;
5 | }
6 |
7 | .login {
8 |
9 | display: flex;
10 | flex-direction: column;
11 | max-width: 100vw;
12 | width: 60rem;
13 | justify-content: center;
14 | align-items: center;
15 | padding: 4.8rem;
16 | gap: 1.2rem;
17 | background: #ffffff;
18 | }
19 |
20 | .loginBackground {
21 | height: calc(100vw-4rem);
22 | width: 100%;
23 | display: flex;
24 | flex-direction: column;
25 | align-items: center;
26 | place-content: center;
27 |
28 | }
29 | .typewriter h1 {
30 | overflow: hidden;
31 | border-right: .15em solid rgb(243, 243, 242);
32 | color: #fff;
33 | white-space: nowrap;
34 | margin: 0 auto;
35 | letter-spacing: .10em;
36 | animation:
37 | typing 3.5s steps(40, end),
38 | blink-caret .75s step-end infinite;
39 | }
40 |
41 | @keyframes typing {
42 | from { width: 0 }
43 | to { width: 100% }
44 | }
45 |
46 | @keyframes blink-caret {
47 | from, to { border-color: transparent }
48 | 50% { border-color: rgb(245, 244, 242); }
49 | }
50 |
51 | .imageWrapper {
52 | margin-top: 20px;
53 | display: flex;
54 | justify-content: center;
55 | }
56 |
57 | .demoImg {
58 | max-width: 90%;
59 | border-radius: 10px;
60 | }
61 | .login h2 {
62 | font-weight: 300;
63 | }
64 | .oathButtons {
65 | display: flex;
66 | flex-direction: column;
67 | width: 100%;
68 | gap: 1.6rem;
69 | }
70 |
71 | .loginBtn {
72 | width: 100%;
73 | }
74 |
75 | .google {
76 | background: rgb(243, 243, 243);
77 | color: var(--black);
78 | }
79 | .google:hover,.github:hover {
80 | border: 2px solid var(--blue-primary);
81 | }
82 | .github {
83 | background: rgb(194, 194, 194);
84 | color: var(--black);
85 | }
86 |
87 | .loginCredentials {
88 | display: flex;
89 | flex-direction: column;
90 | gap: 1.6rem;
91 | width: 100%;
92 | }
93 |
94 | .createAccountQuery {
95 | display: flex;
96 | flex-direction: column;
97 | gap:0;
98 | }
99 | .createAccountQuery p {
100 | line-height: .6rem;
101 | text-align: center;
102 | font-weight: 300;
103 | color: var(—black);
104 | }
105 |
106 | .createAccountQuery a {
107 | font-weight: 300;
108 | }
109 |
110 | .createAccountQuery a:hover {
111 | color: var(—black);
112 | }
113 |
114 |
115 | @media only screen and (max-width: 800px) {
116 | .login {
117 | width: 100vw;
118 | }
119 | .loginBackground {
120 | display: none;
121 | }
122 | }
123 |
124 |
--------------------------------------------------------------------------------
/client/src/components/Login/Signup.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import styles from "./Login.module.css";
3 | import axios from "axios";
4 | import { useAtom } from "jotai";
5 | import { activeUserAtom, backendUrl } from "../../state/Atoms";
6 | import Navbar from "../Navbar/Navbar";
7 | import NavMobile from "../Navbar/NavMobile";
8 | import BarAnimation from "../Animations/BarAnimation";
9 | import * as THREE from 'three';
10 | import GLOBE from 'vanta/dist/vanta.globe.min';
11 | import { Link, useNavigate } from "react-router-dom";
12 | import Alert from '@mui/material/Alert';
13 | import { Button } from "@mui/material";
14 | import GoogleIcon from "@mui/icons-material/Google";
15 | import { motion } from "framer-motion";
16 |
17 | export default function Signup() {
18 | const [, setActiveUser] = useAtom(activeUserAtom);
19 | const [errorMessage, setErrorMessage] = useState('')
20 | const [formData, setFormData] = useState({
21 | email: "",
22 | password: "",
23 | confirmPassword: "",
24 | });
25 | const navigate = useNavigate();
26 | const vantaRef = useRef(null);
27 |
28 | useEffect(() => {
29 | const vantaEffect = GLOBE({
30 | el: vantaRef.current,
31 | mouseControls: false,
32 | touchControls: false,
33 | gyroControls: false,
34 | minHeight: 100.00,
35 | minWidth: 100.00,
36 | scale: 1.00,
37 | scaleMobile: 1.00,
38 | color: 0x3fafff,
39 | backgroundColor: 0x1c1a4a,
40 | THREE: THREE,
41 | });
42 |
43 | return () => {
44 | if (vantaEffect) vantaEffect.destroy();
45 | };
46 | }, []);
47 |
48 | function handleChange(e: React.ChangeEvent
74 |
82 |
88 |
91 | {errorMessage}
92 |
93 | )}
94 |
151 |
160 |
161 |
162 |
163 |
170 |
171 |
172 |
173 |
174 | );
175 | }
176 |
--------------------------------------------------------------------------------
/client/src/components/Navbar/NavMobile.module.css:
--------------------------------------------------------------------------------
1 | .navMobile {
2 | display: none;
3 | height: calc(100vh - 4rem);
4 | width: 100vw;
5 | z-index: 1300;
6 | background: var(--black);
7 | background: linear-gradient(
8 | to left, var(--blue-primary),
9 | var(--blue-secondary)
10 | );
11 | position: absolute;
12 | /* padding-top: 3.2rem; */
13 | position: fixed;
14 | left: 0;
15 | top: 4rem;
16 | transition: all 0.25s ease;
17 | color: white;
18 | }
19 |
20 | .mobileLinks a:hover {
21 | color: var(--primary-blue);
22 | }
23 |
24 | .offScreenLeft {
25 | transform: translateX(-100%);
26 | }
27 |
28 | .mobileLinks {
29 | width: 100%;
30 | list-style: none;
31 | height: 100%;
32 | }
33 |
34 | .mobileLink {
35 | border-bottom: 1px inset var(--gray-border);
36 | padding-left: 3.2rem;
37 | display: flex;
38 | align-items: center;
39 | height: 4.8rem;
40 | cursor: pointer;
41 | }
42 | .mobileLink:hover {
43 | background: var(--gray-border);
44 | color: var(--primary-blue);
45 | }
46 |
47 | .dashboardLink {
48 | }
49 |
50 | @media only screen and (max-width: 850px) {
51 | .navMobile {
52 | display: block;
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/client/src/components/Navbar/NavMobile.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import styles from './NavMobile.module.css';
3 | import { useAtom } from 'jotai';
4 | import { activeNavAtom, activeUserAtom } from '../../state/Atoms';
5 | import { handleLogout } from '../../services/authConfig';
6 |
7 | export default function NavMobile() {
8 | const [activeNav, setActiveNav] = useAtom(activeNavAtom);
9 | const [activeUser, setActiveUser] = useAtom(activeUserAtom);
10 |
11 | const onLogoutClick = async () => {
12 | const success = await handleLogout();
13 | if (success!) {
14 | setActiveUser('');
15 | }
16 | };
17 |
18 | return (
19 | Create Account
89 | {errorMessage && ( 90 |
164 |
169 | Already have an account?
165 |166 | Sign in here 167 |
168 |
26 |
151 | );
152 | }
153 |
--------------------------------------------------------------------------------
/client/src/components/Navbar/Navbar.module.css:
--------------------------------------------------------------------------------
1 | .navbar {
2 | border-bottom: 1px solid var(--gray-border);
3 | position: fixed;
4 | width: 100vw;
5 | height: 4rem;
6 | background: var(--blue-secondary);
7 | top: 0;
8 | left: 0;
9 | display: grid;
10 | place-content: center;
11 | box-shadow: 0 1px 4px 3px rgb(30, 29, 37);
12 | z-index: 10;
13 | }
14 | .navbar h3{
15 | color: var(--white);
16 | }
17 |
18 | .navContainer {
19 | display: flex;
20 | justify-content: space-between;
21 | width: 100vw;
22 | max-width: 1400px;
23 | padding-right: 1.2rem;
24 | }
25 |
26 | .navLeft {
27 | display: flex;
28 | align-items: center;
29 | gap: 2rem;
30 | }
31 |
32 | .navLeftDash {
33 | display: flex;
34 | align-items: center;
35 | gap: 2rem;
36 | margin-left: 5rem;
37 | }
38 |
39 | .navLogo {
40 | height: 2.4rem;
41 | }
42 | .logoBox {
43 | display: flex;
44 | align-items: center;
45 | gap: 0.5rem;
46 |
47 | }
48 |
49 | .navLinks {
50 | display: flex;
51 | gap: 1rem;
52 | }
53 | .navRight {
54 | display: flex;
55 | align-items: center;
56 | gap: 0.8rem;
57 | }
58 | .navButton {
59 | height: 2.4rem;
60 | text-wrap: nowrap;
61 | font-size: 1rem;
62 | }
63 | .gitBox {
64 | display: flex;
65 | align-items: center;
66 | gap: .4rem;
67 | height: 100%;
68 | }
69 |
70 | .logOutIcon {
71 | height: 1.6rem;
72 | padding-top: 3px;
73 | }
74 |
75 | .hamburgerBox {
76 | display: none;
77 | height: 100%;
78 | display: none;
79 | cursor: pointer;
80 | }
81 |
82 | .hamburger {
83 | width: 40px;
84 | height: 4px;
85 | background: var(--blue-primary);
86 | border-radius: 100px;
87 | position: relative;
88 | }
89 |
90 | .hamburger::after,
91 | .hamburger::before {
92 | width: 100%;
93 | height: 100%;
94 | border-radius: 100px;
95 | background: var(--blue-primary);
96 | content: '';
97 | position: absolute;
98 | top: 0;
99 | left: 0;
100 | transition: all 0.25s ease;
101 | }
102 |
103 | .hamburger::before {
104 | transform: translateY(-0.55rem);
105 | }
106 |
107 | .hamburger::after {
108 | transform: translateY(0.55rem);
109 | }
110 |
111 | .activeNav .hamburger::after {
112 | transform: translateY(.7rem);
113 | /* background: red; */
114 | }
115 |
116 | .activeNav .hamburger::before {
117 | transform: translateY(-.7rem);
118 | /* background: red; */
119 | }
120 |
121 | .timeframe {
122 |
123 | width: 10.5rem;
124 | text-align: left;
125 | /* border: 1px solid var(--blue-secondary); */
126 | }
127 |
128 |
129 | @media only screen and (max-width: 850px) {
130 |
131 | .navLeftDash {
132 | margin-left: 1rem;
133 | }
134 | .navLinks {
135 | display: none;
136 | }
137 | .navRight {
138 | display: none;
139 | }
140 | .hamburgerBox {
141 | display: grid;
142 | place-content: center;
143 | }
144 | }
145 |
--------------------------------------------------------------------------------
/client/src/components/Navbar/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import styles from './Navbar.module.css';
2 | import logo from '../../assets/icons/pie-chart.png';
3 | import { Link, NavLink } from 'react-router-dom';
4 | import { useAtom } from 'jotai';
5 | import { activeUserAtom, activeNavAtom } from '../../state/Atoms';
6 | import { handleLogout } from '../../services/authConfig';
7 | export default function Navbar() {
8 | const [activeUser, setActiveUser] = useAtom(activeUserAtom);
9 | const [activeNav, setActiveNav] = useAtom(activeNavAtom);
10 |
11 | const onLogoutClick = async () => {
12 | const success = await handleLogout();
13 | if (success!) {
14 | setActiveUser('');
15 | }
16 | };
17 | return (
18 | -
27 | {activeUser ? (
28 | <>
29 | {
32 | setActiveNav(false);
33 | }}
34 | >
35 | {' '}
36 |
-
37 |
Home
38 |
39 |
40 | {
43 | setActiveNav(false);
44 | }}
45 | >
46 | -
47 |
Dashboard
48 |
49 |
50 |
51 | {
54 | setActiveNav(false);
55 | }}
56 | >
57 | {' '}
58 | -
59 |
Documentation
60 |
61 |
62 | {
65 | setActiveNav(false);
66 | }}
67 | >
68 | -
69 |
Settings
70 |
71 |
72 |
73 | {
76 | setActiveNav(false);
77 | }}
78 | >
79 | -
80 |
Playground
81 |
82 |
83 |
84 | {
87 | setActiveNav(false);
88 | onLogoutClick();
89 | }}
90 | >
91 | {' '}
92 | -
93 |
Sign out
94 |
95 |
96 |
97 | ) : (
98 | <>
99 | {
102 | setActiveNav(false);
103 | }}
104 | >
105 | {' '}
106 | -
107 |
Home
108 |
109 |
110 |
111 | {
114 | setActiveNav(false);
115 | }}
116 | >
117 | {' '}
118 | -
119 |
Documentation
120 |
121 |
122 |
123 |
124 |
125 | {
128 | setActiveNav(false);
129 | }}
130 | >
131 | {' '}
132 | -
133 |
Login
134 |
135 |
136 | {
139 | setActiveNav(false);
140 | }}
141 | >
142 | {' '}
143 | -
144 |
Create account
145 |
146 |
147 |
148 | )}
149 |
19 |
115 | );
116 | }
117 |
--------------------------------------------------------------------------------
/client/src/components/Navbar/NavbarDashboard.tsx:
--------------------------------------------------------------------------------
1 | import styles from './Navbar.module.css';
2 | import { Link } from 'react-router-dom';
3 | import { useAtom } from 'jotai';
4 | import { activeUserAtom, activeNavAtom } from '../../state/Atoms';
5 | import { handleLogout } from '../../services/authConfig';
6 | import TimeFrameDropdown from '../ChartPages/TimeFrameDropdown';
7 | import SelectWebsiteDropdown from '../ChartPages/SelectWebsiteDropdown';
8 | export default function NavbarDashboard() {
9 | const [activeUser, setActiveUser] = useAtom(activeUserAtom);
10 | const [activeNav, setActiveNav] = useAtom(activeNavAtom);
11 |
12 | const onLogoutClick = async () => {
13 | const success = await handleLogout();
14 | if (success!) {
15 | setActiveUser('');
16 | }
17 | };
18 | return (
19 |
20 |
114 |
21 | {
24 | setActiveNav(false);
25 | }}
26 | >
27 |
55 |
28 | 
29 |
31 |
32 | {activeUser ? (
33 | OS Analytics
30 |
34 |
35 | Documentation
36 |
37 |
38 | Settings
39 |
40 |
41 | Playground
42 |
43 |
44 | ) : (
45 |
46 |
47 | Documentation
48 |
49 |
50 | Getting Started
51 |
52 |
53 | )}
54 |
56 | {activeUser ? (
57 | <>
58 |
59 |
62 | GitHub
63 |
64 |
65 |
68 |
69 | {
72 | onLogoutClick();
73 | }}
74 | >
75 |
78 |
79 |
80 | ) : (
81 | <>
82 |
83 |
86 | GitHub
87 |
88 |
91 |
92 |
93 |
96 |
97 |
98 |
99 | )}
100 |
101 | {
108 | setActiveNav(activeNav === false ? true : false);
109 | }}
110 | >
111 |
112 |
113 |
20 |
106 | );
107 | }
108 |
--------------------------------------------------------------------------------
/client/src/components/PageNotFound/PageNotFound.module.css:
--------------------------------------------------------------------------------
1 | .container{
2 | background-color:#8b949e;
3 | position: fixed;
4 | display: flex;
5 | justify-content: center;
6 | align-items:center;
7 | height:100vh;
8 | text-align : center;
9 | }
10 | .heading{
11 | color : rgba(255, 255, 255, 0.87)
12 | }
13 | p{
14 | font-size : 1.5em;
15 | margin : 0 ;
16 | margin-top: 20px;
17 | }
18 | .link{
19 | display: inline-block;
20 | padding: 10px 20px;
21 | background-color: #aff5b4;
22 | color: rgba(255, 255, 255, 0.87);
23 | text-decoration: none;
24 | margin-top: 20px;
25 | font-size: 1.2em;
26 | border-radius: 50px;
27 | animation: bounce 1s ease-in-out infinite;
28 | }
29 | @keyframes bounce{
30 | 0%, 20%, 50%, 80%, 100% {
31 | transform: translateY(0);
32 | }
33 | 40%{
34 | transform: translateY*(-10px);
35 | }
36 | 60%{
37 | transform: translateY*(-5px);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/client/src/components/PageNotFound/PageNotFound.tsx:
--------------------------------------------------------------------------------
1 | import styles from './PageNotFound.module.css';
2 | import { Link } from 'react-router-dom';
3 |
4 | export default function PageNotFound() {
5 | return (
6 |
21 |
22 |
105 |
23 |
51 |
27 |
28 | Dashboard
29 |
30 |
31 | Documentation
32 |
33 |
34 | Settings
35 |
36 |
37 | Playground
38 |
39 |
40 | ) : (
41 |
42 |
43 | Documentation
44 |
45 |
46 | Getting Started
47 |
48 |
49 | )}
50 |
52 | {activeUser ? (
53 | <>
54 |
55 |
58 | GitHub
59 | {activeUser.split('@')[0].toUpperCase()}
60 | {
63 | onLogoutClick();
64 | }}
65 | >
66 |
71 |
72 |
73 | ) : (
74 | <>
75 |
76 |
81 |
82 |
83 |
88 |
89 |
90 | )}
91 |
92 | {
99 | setActiveNav(activeNav === false ? true : false);
100 | }}
101 | >
102 |
103 |
104 |
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/client/src/components/Playground/FrequencyReactFlow/FlowPlayground.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import {
3 | ReactFlow,
4 | useNodesState,
5 | useEdgesState,
6 | Background,
7 | Node,
8 | Edge,
9 | } from "@xyflow/react";
10 | import "@xyflow/react/dist/style.css";
11 | import { useAtom } from "jotai";
12 | import { userDataAtom } from "../../../state/Atoms";
13 | import { FrequencyProps, AggregatedData, QueryData } from "../../../../types";
14 |
15 | const FlowDiagram = ({ selectedWebsite, selectedPage }: FrequencyProps) => {
16 | const [userData] = useAtom(userDataAtom);
17 |
18 | const [nodes, setNodes, onNodesChange] = useNodesState404 - Page not found
8 |Would you like to go back to the home page?
9 |
117 |
125 |
127 |
128 | );
129 | };
130 |
131 | export default FlowDiagram;
132 |
--------------------------------------------------------------------------------
/client/src/components/Playground/OverallReactFlow/Layout.tsx:
--------------------------------------------------------------------------------
1 | import dagre from 'dagre';
2 | import { Node, Edge } from "@xyflow/react";
3 |
4 | const nodeWidth = 150;
5 | const nodeHeight = 50;
6 |
7 | const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'TB') => {
8 | const dagreGraph = new dagre.graphlib.Graph();
9 | dagreGraph.setDefaultEdgeLabel(() => ({}));
10 | dagreGraph.setGraph({ rankdir: direction });
11 |
12 | nodes.forEach((node) => {
13 | dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
14 | });
15 |
16 | edges.forEach((edge) => {
17 | dagreGraph.setEdge(edge.source, edge.target);
18 | });
19 |
20 | dagre.layout(dagreGraph);
21 |
22 | nodes.forEach((node) => {
23 | const nodeWithPosition = dagreGraph.node(node.id);
24 | node.position = {
25 | x: nodeWithPosition.x - nodeWidth / 2,
26 | y: nodeWithPosition.y - nodeHeight / 2,
27 | };
28 | });
29 |
30 | return { nodes, edges };
31 | };
32 |
33 | export default getLayoutedElements
--------------------------------------------------------------------------------
/client/src/components/Playground/ViewDrawer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import {
3 | Box,
4 | Drawer,
5 | Toolbar,
6 | List,
7 | Divider,
8 | ListItemButton,
9 | ListItemIcon,
10 | ListItemText,
11 | Collapse,
12 | } from "@mui/material";
13 | import {
14 | Inbox as InboxIcon,
15 | ExpandLess,
16 | ExpandMore,
17 | AccountTree as TreeIcon,
18 | DeviceHub as DiagramIcon,
19 | } from "@mui/icons-material";
20 | import { useAtom } from "jotai";
21 | import { userDataAtom, websitesAtom } from "../../state/Atoms";
22 | import { DrawerFrequencyProps } from "../../../types";
23 |
24 | const drawerWidth = 240;
25 |
26 | export default function PermanentDrawerLeft({
27 | onSelectView,
28 | onSelectWebsite,
29 | onSelectPage,
30 | }: DrawerFrequencyProps) {
31 | const [userData] = useAtom(userDataAtom);
32 | const [openMainItem, setOpenMainItem] = useState-
80 |
-
93 | {websitesList.map((website) => (
94 |
-
111 | {pagesByWebsite[website].map((page_url) => (
112 |
-
135 |
17 |
34 | );
35 | };
36 |
37 | export default PlaygroundDisplay;
38 |
--------------------------------------------------------------------------------
/client/src/components/Settings/ApiKeyDisplay.tsx:
--------------------------------------------------------------------------------
1 | import { Box, IconButton, Typography } from "@mui/material";
2 | import DeleteIcon from "@mui/icons-material/Delete";
3 | import RefreshIcon from "@mui/icons-material/Refresh";
4 | import ApiKeyDisplay from "./ApiKeyFormat";
5 |
6 | export const ApiKeySection = ({
7 | apiKey,
8 | onDelete,
9 | onRegenerate,
10 | }: {
11 | apiKey: string;
12 | onDelete: () => void;
13 | onRegenerate: () => void;
14 | }) => (
15 |
25 | {selectedView === "frequency" && (
26 |
33 |
29 |
34 |
35 |
49 |
50 | );
51 | }
52 |
53 | export default ClickLog;
54 |
--------------------------------------------------------------------------------
/client/src/components/User/ClickLogItem.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import styles from './ClickLog.module.css';
3 | import { ClickLogProps } from '../../../types';
4 |
5 | function ClickLogItem({item}:ClickLogProps) {
6 | const [date, setDate] = useState
30 |
32 |
33 | Recent User Interacitons
31 || Date | 37 |Time | 38 |Interaction | 39 |Element | 40 |Browser | 41 |OS | 42 |Website | 43 |
|---|
21 | {activeWebsite === "overview"? (
22 |
27 |
13 | {data.length === 0 ? (
14 |
22 |
23 | );
24 | }
25 |
26 | export default Final;
27 |
--------------------------------------------------------------------------------
/client/src/components/User/ForgotPassword.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import axios from 'axios';
3 | import { backendUrl } from '../../state/Atoms';
4 | import Navbar from '../Navbar/Navbar';
5 | import {
6 | Button,
7 | TextField,
8 | Card,
9 | CardContent,
10 | Typography,
11 | Box,
12 | } from '@mui/material';
13 |
14 | import {useNavigate } from 'react-router-dom';
15 |
16 | export default function ForgotPassword() {
17 | const [email, setEmail] = useState('');
18 | const [code, setCode] = useState('');
19 | const [newPassword, setNewPassword] = useState('');
20 | const [isCodeSent, setIsCodeSent] = useState(false);
21 | const navigate = useNavigate();
22 | const handleEmailSubmit = async (e: React.FormEvent) => {
23 | e.preventDefault();
24 | try {
25 | await axios.post(`${backendUrl}/api/auth/forgot-password`, { email });
26 | alert('Password reset code sent to your email.');
27 | setIsCodeSent(true);
28 | } catch (err: unknown) {
29 | const error = err as Error;
30 | console.error(error.message);
31 | alert('Error in sending password reset code.');
32 | }
33 | };
34 |
35 | const handleResetSubmit = async (e: React.FormEvent) => {
36 | e.preventDefault();
37 | try {
38 | await axios.post(`${backendUrl}/api/auth/confirm-password`, {
39 | email,
40 | code,
41 | newPassword,
42 | });
43 | alert('Password reset successful. You can now log in with your new password.');
44 | setIsCodeSent(false);
45 | setEmail('');
46 | setCode('');
47 | setNewPassword('');
48 | navigate('/login')
49 |
50 | } catch (err: unknown) {
51 | const error = err as Error;
52 | console.error(error.message);
53 | alert('Error in resetting password.');
54 | }
55 | };
56 |
57 | return (
58 |
15 |
16 |
48 | );
49 | }
50 |
51 | export default Sidebar;
52 |
--------------------------------------------------------------------------------
/client/src/components/User/UserView.module.css:
--------------------------------------------------------------------------------
1 | .dashboard {
2 | padding-top: 5rem;
3 | width: 100%;
4 | display: flex;
5 | flex-direction: column;
6 | flex-wrap: wrap;
7 | align-items: center;
8 | background: linear-gradient(135deg, #f7f7f7, #e0e0e0);
9 | }
10 |
11 | .sidebar {
12 | position: fixed;
13 | top: 0;
14 | left: 0;
15 | height: 100vh;
16 | background: transparent;
17 | width: 4rem;
18 | background: var(--blue-secondary);
19 | border-right: 1px solid var(--gray-border);
20 | z-index: 15;
21 | display: flex;
22 | flex-direction: column;
23 | justify-content: flex-start;
24 | align-items: start;
25 | transition: width 0.25s ease;
26 | overflow: hidden;
27 | }
28 |
29 | .sideLogo {
30 | width: 3rem;
31 | }
32 |
33 | .sideIcon {
34 | width: 2rem;
35 | }
36 | .logoBox {
37 | height: 4rem;
38 | display: flex;
39 | align-items: center;
40 | justify-content: start;
41 | gap: 1rem;
42 | margin-left: 0.5rem;
43 | overflow: hidden;
44 | transition: width 0.25s ease;
45 | text-wrap: nowrap;
46 | }
47 |
48 | .sidebarLinks {
49 | display: flex;
50 | flex-direction: column;
51 | justify-content: flex-start;
52 | align-items: start;
53 | margin: 1.5rem 0.5rem;
54 | }
55 |
56 | .sidebarLink {
57 | height: 3rem;
58 | display: flex;
59 | align-items: center;
60 | justify-content: start;
61 | gap: 1rem;
62 | border-radius: 6px;
63 | padding: 0 1rem;
64 | width: 3rem;
65 | overflow: hidden;
66 | transition: width 0.25s ease;
67 | }
68 |
69 | .sidebarSpan {
70 | padding-right: 2rem;
71 | }
72 |
73 | .sidebar:hover {
74 | width: 14.5rem;
75 | }
76 |
77 | .sidebar:hover .sidebarLink {
78 | width: 13.5rem;
79 | }
80 |
81 | a.active {
82 | background: rgba(255, 255, 255, 0.1);
83 | }
84 |
85 | .timeframe {
86 | width: 10.5rem;
87 | text-align: left;
88 | /* border: 1px solid var(--blue-secondary); */
89 | }
90 |
91 | .websiteDropdown {
92 | width: 10.5rem;
93 | text-align: left;
94 | display: none;
95 | }
96 |
97 | @media only screen and (max-width: 850px) {
98 | .sidebar {
99 | display: none;
100 | }
101 | .websiteDropdown {
102 | display: flex;
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/client/src/components/User/UserView.tsx:
--------------------------------------------------------------------------------
1 | import NavbarDashboard from "../Navbar/NavbarDashboard"
2 | import NavMobile from "../Navbar/NavMobile"
3 | import Sidebar from "./Sidebar"
4 | import DashBoardDisplay from "./DashboardDisplay"
5 | function UserView(){
6 | return (
7 |
17 |
18 |
20 |
21 | OS Analytics
19 |
22 |
47 | -
23 |
-
24 |
setSelectedWebsite('overview')} 28 | > 29 | 32 |30 | {"Overview"} 31 |
33 | {websites.map((website, index) => (
34 | -
35 |
setSelectedWebsite(website)} 39 | > 40 | 43 |41 | {website} 42 |
44 | ))}
45 |
8 |
13 | )
14 | }
15 |
16 | export default UserView
17 |
--------------------------------------------------------------------------------
/client/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react'
2 | import { createRoot } from 'react-dom/client'
3 |
4 | import App from './App.tsx'
5 | import './main.css'
6 |
7 | createRoot(document.getElementById('root')!).render(
8 |
9 |