chore: update comments

client/src/components/Card.tsx

@@ -1,6 +1,16 @@
 import React from 'react';
 import { CardProps } from '../types';
 
+/**
+ * Card component that displays a card with a title and recharts chart content as children.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.title - The title of the card.
+ * @param {React.ReactNode} props.children - The chart content to be displayed inside the card.
+ * @param {boolean} props.isDarkMode - Flag to determine if dark mode should be applied.
+ *
+ * @returns {JSX.Element} The rendered Card component.
+ */
 const Card: React.FC<CardProps> = ({ title, children, isDarkMode }) => {
   return (
     <div className={`card ${isDarkMode ? 'dark-mode' : ''}`}>

client/src/components/EventCard.tsx

@@ -1,5 +1,19 @@
 import React from 'react';
-import { EventCardProps } from '../types'; // Ensure this matches the updated structure
+import { EventCardProps } from '../types'; 
+/**
+ * EventCard component displays information about an event and provides a button to view more details.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {Object} props.event - The event object containing details about the event.
+ * @param {string} props.event.name - The name of the event.
+ * @param {string} props.event.time - The timestamp of the event.
+ * @param {string} props.event.username - The username of the person associated with the event.
+ * @param {Function} props.onViewDetails - Callback function to handle viewing event details.
+ *
+ * @returns {JSX.Element} The rendered EventCard component.
+ */
+
 
 const EventCard: React.FC<EventCardProps> = ({ event, onViewDetails }) => {
   // Ensure event.time is a valid Date object

client/src/components/IpAccessCombined.tsx

@@ -1,16 +1,45 @@
 import { useState, useEffect } from 'react';
 import AccessPerIpChart from './charts/AccessPerIp';
 import IpAccessOverTimeChart from './charts/IpAccessOverTime';
-import { CountedEvent, IPLocation, IpAccessCombinedProps } from '../types'; // Import the interface from types.ts
+import { CountedEvent, IPLocation, IpAccessCombinedProps } from '../types'; 
 
+/**
+ * IpAccessCombined component fetches and displays IP location counts and details for a selected IP.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} props.currentIp - The currently selected IP address.
+ * @param {Function} props.setCurrentIp - Function to update the currently selected IP address.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @typedef {Object} IPLocation
+ * @property {string} city - The city of the IP location.
+ * @property {string} region - The region of the IP location.
+ * @property {string} country - The country of the IP location.
+ * @property {string} source_ip - The source IP address.
+ *
+ * @typedef {Object} CountedEvent
+ * @property {number} count - The count of events for the IP.
+ *
+ * @typedef {Object} IpAccessCombinedProps
+ * @property {string} currentIp - The currently selected IP address.
+ * @property {Function} setCurrentIp - Function to update the currently selected IP address.
+ *
+ * @typedef {IPLocation & CountedEvent} IPLocationCountedEvent
+ *
+ * @example
+ * <IpAccessCombined currentIp="192.168.1.1" setCurrentIp={setIp} />
+ */
 export default function IpAccessCombined({
   currentIp,
   setCurrentIp,
 }: IpAccessCombinedProps): JSX.Element {
+  // State to hold the IP location counts
   const [ipLocCounts, setIpLocCounts] = useState<(IPLocation & CountedEvent)[]>(
     []
   );
 
+  // Fetch IP location counts when the component mounts
   useEffect(() => {
     fetch('/events?countOn=source_ip&includeLocation=true')
       .then((response) => {
@@ -25,26 +54,29 @@ export default function IpAccessCombined({
       );
   }, []);
 
+  // Find the location details of the current IP
   const currentIpLoc = ipLocCounts.find(
     ({ source_ip }) => source_ip === currentIp
   );
 
   return (
     <>
       <div>
+        {/* Render the AccessPerIpChart component */}
         <AccessPerIpChart
           currentIp={currentIp}
           setCurrentIp={setCurrentIp}
           ipLocCounts={ipLocCounts}
         />
         {currentIp && (
           <>
+            {/* Display the location details of the current IP */}
             <p>
               <strong>Location: </strong>
               {currentIpLoc?.city}, {currentIpLoc?.region},{' '}
               {currentIpLoc?.country}
             </p>
-            {/* Make sure the chart renders only when IP is selected */}
+            {/* TODO: Render the IpAccessOverTimeChart component only when an IP is selected//possible display styling issue */}
             <IpAccessOverTimeChart currentIp={currentIp} />
           </>
         )}

client/src/components/Modal.tsx

@@ -1,23 +1,39 @@
 import React from 'react';
 import { ModalProps } from '../types';
 
+// Modal component definition
+/**
+ * Modal component to display event details in a modal dialog.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.isOpen - Indicates if the modal is open.
+ * @param {function} props.onClose - Function to call when the modal is closed.
+ * @param {Object} props.event - The event object containing event details.
+ * @param {boolean} props.isDarkMode - Indicates if dark mode is enabled.
+ *
+ * @returns {JSX.Element | null} The Modal component or null if not open or no event.
+ */
 const Modal: React.FC<ModalProps> = ({
   isOpen,
   onClose,
   event,
   isDarkMode,
 }) => {
+  // If the modal is not open or there is no event, return null
   if (!isOpen || !event) return null;
 
   return (
+    // Modal overlay that closes the modal when clicked
     <div
       className={`modal-overlay ${isDarkMode ? 'dark-mode' : ''}`}
       onClick={onClose}
     >
+      {/* Modal content container */}
       <div
         className={`modal ${isDarkMode ? 'dark-mode' : ''}`}
         onClick={(e) => e.stopPropagation()}
       >
+        {/* Modal header with title and close button */}
         <div className={`modal-header ${isDarkMode ? 'dark-mode' : ''}`}>
           <h2>Event Details</h2>
           <button
@@ -27,6 +43,7 @@ const Modal: React.FC<ModalProps> = ({
             X
           </button>
         </div>
+        {/* Modal content displaying event details */}
         <div className={`modal-content ${isDarkMode ? 'dark-mode' : ''}`}>
           <p>
             <strong>Event Type:</strong> {event.type ?? 'N/A'}
@@ -47,12 +64,14 @@ const Modal: React.FC<ModalProps> = ({
           <p>
             <strong>Raw JSON Data:</strong>
           </p>
+          {/* Container for displaying raw JSON data of specified event log*/}
           <div
             className={`raw-json-container ${isDarkMode ? 'dark-mode' : ''}`}
           >
             <pre>{JSON.stringify(event, null, 2)}</pre>
           </div>
         </div>
+        {/* Modal footer with close button */}
         <div className={`modal-footer ${isDarkMode ? 'dark-mode' : ''}`}>
           <button
             onClick={onClose}

client/src/components/Navbar.tsx

@@ -4,6 +4,26 @@ import { NavbarProps } from '../types';
 import LOGO from '../assets/RAILGUIDE.png';
 //import '../index.scss';
 
+/**
+ * Navbar component that provides navigation links and user interaction options.
+ *
+ * @component
+ * @param {Object} props - The properties object.
+ * @param {Function} props.toggleDarkMode - Function to toggle dark mode.
+ * @param {boolean} props.isDarkMode - Boolean indicating if dark mode is enabled.
+ * @param {string} props.username - The username of the logged-in user.
+ * @param {Function} props.setUser - Function to set the user state.
+ *
+ * @returns {JSX.Element} The rendered Navbar component.
+ *
+ * @example
+ * <Navbar
+ *   toggleDarkMode={toggleDarkMode}
+ *   isDarkMode={isDarkMode}
+ *   username={username}
+ *   setUser={setUser}
+ * />
+ */
 const Navbar: React.FC<NavbarProps> = ({
   toggleDarkMode,
   isDarkMode,
@@ -14,16 +34,19 @@ const Navbar: React.FC<NavbarProps> = ({
   const dropdownRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
 
+  // Function to toggle the dropdown menu
   const toggleDropdown = () => {
     setDropdownOpen((prev) => !prev);
   };
 
+  // Function to handle user logout
   const handleLogout = () => {
     setUser(null);
     window.localStorage.removeItem('user');
     navigate('/login');
   };
 
+  // Effect to close the dropdown if clicking outside of it
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -42,17 +65,21 @@ const Navbar: React.FC<NavbarProps> = ({
 
   return (
     <nav className={isDarkMode ? 'dark-mode' : ''}>
+      {/* Logo linking to home */}
       <Link to="/home" className="logo" title="Home">
         <img src={LOGO} alt="Wood Plank T" className="logo-image" />
       </Link>
       <div className="nav-buttons">
+        {/* Link to events dashboard */}
         <Link to="/events-dashboard" className="nav-button">
           RECENT EVENTS
         </Link>
+        {/* Button to toggle dark mode */}
         <button onClick={toggleDarkMode} className="nav-button">
           {isDarkMode ? 'LIGHT MODE' : 'DARK MODE'}
         </button>
 
+        {/* Dropdown toggle button */}
         <div
           className="nav-button"
           onClick={toggleDropdown}
@@ -64,6 +91,7 @@ const Navbar: React.FC<NavbarProps> = ({
             : 'USER'}
         </div>
       </div>
+      {/* Dropdown menu */}
       {dropdownOpen && (
         <div className="dropdown" ref={dropdownRef}>
           <Link to="/profile" className="dropdown-link">

client/src/components/charts/AccessPerIp.tsx

@@ -2,8 +2,34 @@ import { useState, useEffect } from 'react';
 import { Cell, Legend, Pie, PieChart } from 'recharts';
 import { CountedEvent, IPLocation } from '../../types';
 
+// Define colors for the pie chart slices
 const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
 
+/**
+ * Component to render a pie chart displaying access counts per IP location.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} [props.currentIp] - The currently selected IP address.
+ * @param {React.Dispatch<React.SetStateAction<string | undefined>>} props.setCurrentIp - Function to set the currently selected IP address.
+ * @param {Array<IPLocation & CountedEvent>} props.ipLocCounts - Array of IP location counts.
+ * @returns {JSX.Element} The rendered pie chart component.
+ *
+ * @component
+ * @example
+ * const currentIp = "192.168.1.1";
+ * const setCurrentIp = (ip) => console.log(ip);
+ * const ipLocCounts = [
+ *   { source_ip: "192.168.1.1", count: 10, location: "Location A" },
+ *   { source_ip: "192.168.1.2", count: 5, location: "Location B" }
+ * ];
+ * return (
+ *   <AccessPerIpChart
+ *     currentIp={currentIp}
+ *     setCurrentIp={setCurrentIp}
+ *     ipLocCounts={ipLocCounts}
+ *   />
+ * );
+ */
 export default function AccessPerIpChart({
   currentIp,
   setCurrentIp,
@@ -13,7 +39,7 @@ export default function AccessPerIpChart({
   setCurrentIp: React.Dispatch<React.SetStateAction<string | undefined>>;
   ipLocCounts: (IPLocation & CountedEvent)[];
 }): JSX.Element {
-  const [loading, setLoading] = useState(true); // Add loading state
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     // Simulate loading delay for data
@@ -24,6 +50,8 @@ export default function AccessPerIpChart({
   }, [ipLocCounts]);
 
   const RADIAN = Math.PI / 180;
+
+  // Function to render custom labels inside the pie chart slices
   const renderCustomizedLabel = ({
     cx,
     cy,

client/src/components/charts/EventSource.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Bar, BarChart, LabelList, XAxis, Cell } from 'recharts';
 import { CountedEvent } from '../../types';
 
+// Array of colors for the chart
 const COLORS = [
   '#0088FE',
   '#00C49F',
@@ -12,13 +13,46 @@ const COLORS = [
   '#FFCC99',
 ];
 
+/**
+ * EventSourceChart component renders a bar chart of event sources.
+ * 
+ * @component
+ * @example
+ * return (
+ *   <EventSourceChart />
+ * )
+ * 
+ * @returns {JSX.Element} The rendered bar chart component.
+ * 
+ * @remarks
+ * This component fetches event data from the server and displays it in a bar chart.
+ * It also allows users to click on a bar to select an event source, which is displayed below the chart.
+ * 
+ * @typedef {Object} CountedEvent
+ * @property {string} source - The source of the event.
+ * @property {number} count - The count of events from this source.
+ * 
+ * @state {CountedEvent[]} events - The fetched events data.
+ * @state {boolean} loading - The loading status of the data fetch.
+ * @state {string | null} selectedEventSource - The selected event source when a bar is clicked.
+ * 
+ * @hook {useEffect} Fetches events data on component mount.
+ * 
+ * @function handleClick
+ * @description Handles click event on a bar to toggle the selected event source.
+ * @param {string} source - The source of the event that was clicked.
+ */
 export default function EventSourceChart() {
+  // State to store the fetched events data
   const [events, setEvents] = useState<CountedEvent[]>([]);
+  // State to manage loading status
   const [loading, setLoading] = useState(true);
+  // State to manage the selected event source when a bar is clicked
   const [selectedEventSource, setSelectedEventSource] = useState<string | null>(
     null
-  ); // State for clicked event source
+  );
 
+  // Fetch events data on component mount
   useEffect(() => {
     setLoading(true);
     fetch('/events?countOn=source')
@@ -35,8 +69,10 @@ export default function EventSourceChart() {
       );
   }, []);
 
+  // Display loading message while data is being fetched
   if (loading) return <p>Loading chart...</p>;
 
+  // Handle click event on a bar to toggle the selected event source
   const handleClick = (source: string) => {
     setSelectedEventSource((prevSelected) =>
       prevSelected === source ? null : source
@@ -46,7 +82,7 @@ export default function EventSourceChart() {
   return (
     <div style={{ width: '100%', overflowX: 'auto' }}>
       <BarChart
-        width={events.length * 120}
+        width={events.length * 120} // Dynamic width based on the number of events
         height={300}
         data={events}
         layout="horizontal"
@@ -64,7 +100,7 @@ export default function EventSourceChart() {
           {events.map((entry, index) => (
             <Cell
               key={`cell-${index}`}
-              fill={COLORS[index % COLORS.length]}
+              fill={COLORS[index % COLORS.length]} // Assign color from the COLORS array
               onClick={() => handleClick(entry.source)} // Attach the click handler to each Cell
               style={{ cursor: 'pointer' }} // Add a pointer cursor to indicate clickability
             />