14/02/2025

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",

src/App.css

@@ -1,40 +1,78 @@
 /* Navbar styling jika diperlukan */
 body {
-  padding-top: 56px; /* Sesuaikan dengan tinggi Navbar */
+  font-family: 'Poppins', sans-serif !important;
-  padding-left: 250px; /* Sesuaikan dengan tinggi Navbar */
+  transition: background-color 0.3s, color 0.3s;
+  padding-top: 70px; /* Sesuaikan dengan tinggi Navbar */
+  padding-left: 250px;
 }
 
-.navbar {
+body.light {
-  background-color: #ffffff !important;
+  background-color: #ffffff;
+  color: #1d1d1d;
+}
+
+body.dark {
+  background-color: #161616;
+  color: #ffffff;
+}
+
+.navbar-app {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding-top: 10px;
   padding-bottom: 10px;
-  font-family: 'Poppins', sans-serif !important;
 }
 
-/* Tambahan untuk Bootstrap override */
+.light.navbar-app {
-.bg-light {
+  background-color: #ffffff;
-  background-color: #f1f1f1 !important;
+  transition: background-color 0.3s, color 0.3s;
 }
 
-.text-dark {
+.light.navbar-brand {
-  color: #fff !important;
+  color: #161616;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.dark.navbar-app {
+  background-color: #161616;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.dark.navbar-brand {
+  transition: background-color 0.3s, color 0.3s;
+  color: #ffffff;
+}
+
+button {
+  padding: 4px 8px;
+  border: none;
+  cursor: pointer;
+  background-color: #474747;
+  color: white;
+  border-radius: 4px;
+}
+
+button:hover {
+  opacity: 0.8;
 }
 
 /* Styling Sidebar */
-.sidebar {
+.sidebar-app {
   width: 250px; 
   height: 100vh; 
   position: fixed; 
   left: 0; 
   top: 0; 
-  padding-top: 75px; 
+  padding-top: 100px; 
   overflow-y: auto;
-  border-right: 1px solid #ddd;/* Warna sidebar */
+  transition: background-color 0.3s, color 0.3s;
+  /* border-right: 1px solid #414141; */
 }
 
 /* Styling Default Link */
-.sidebar .nav-link {
+.sidebar-app .nav-link {
-  margin: 0 15px 0 15px;
+  margin: 5px 15px;
   font-size: 16px;
   padding: 12px 15px;
   border-radius: 5px;
@@ -43,16 +81,13 @@ body {
 }
 
 /* Hover Effect */
-.sidebar .nav-link:hover {
+.sidebar-app .nav-link:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Halaman yang aktif */
-.sidebar .nav-link.active {
+.sidebar-app .nav-link.active {
-  background-color:rgb(65, 157, 255); /* Warna biru saat aktif */
+  background-color:rgb(71, 71, 71); /* Warna biru saat aktif */
   color: white !important;
   font-weight: bold;
 }
-
-
-

src/App.jsx

@@ -6,16 +6,28 @@ import Dashboard from './pages/Dashboard';
 import DevicesPage from './pages/DevicesPage';
 import ReportPage from "./pages/ReportPage";
 import SettingsPage from "./pages/SettingsPage";
+import { useEffect, useState } from "react";
 import './App.css';
 
 function App() {
+
+  const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");
+
+  useEffect(() => {
+    document.body.className = theme;
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => (prevTheme === "light" ? "dark" : "light"));
+  };
+
   return (
     <Router>
-      <div className="flex">
+      <div className={`app-container ${theme}`}>
+      <Navbar toggleTheme={toggleTheme} theme={theme} className={`${theme}`}/>
       <Sidebar />
-        <div className="w-full">
+        <div className={`main-content ${theme}`}>
-          <Navbar />
-          <div className="content p-4">
           <Routes>
             <Route path="/" element={<Navigate to="/dashboard" />}/>
             <Route path="/dashboard" element={<Dashboard />}/>
@@ -25,10 +37,8 @@ function App() {
           </Routes>
         </div>
       </div>  
-      </div>
     </Router>
   );
 }
 
 export default App;
-

src/components/charts/DownloadChart.jsx

@@ -15,37 +15,37 @@ const DownloadChart = ({ data }) => {
       chart: {
         height: 250,
         type: 'area',
-        background: '#ececec',
+        background: '#1e1e1e',
         toolbar: { show: false },
       },
       dataLabels: { enabled: false },
       stroke: {
         curve: 'smooth',
-        colors: ['#28a745'],
+        colors: ['#4CAF50'],
       },
       xaxis: {
         type: 'datetime',
-        labels: { style: { fontFamily: 'Poppins, sans-serif' } },
+        labels: { style: { fontFamily: 'Poppins, sans-serif', colors: '#ffffff' } },
-        axisBorder: { color: '#555555' },
+        axisBorder: { color: '#777777' },
-        axisTicks: { color: '#555555' },
+        axisTicks: { color: '#777777' },
       },
       yaxis: {
-        labels: { style: { fontFamily: 'Poppins, sans-serif' } },
+        labels: { style: { fontFamily: 'Poppins, sans-serif', colors: '#ffffff' } },
       },
       grid: {
-        borderColor: '#555555',
+        borderColor: '#777777',
         strokeDashArray: 4,
       },
       tooltip: {
-        theme: 'light',
+        theme: 'dark',
         x: { format: 'dd/MM/yy HH:mm' },
         y: { formatter: (val) => `${val} Mbps` },
       },
-      colors: ['#28a745'],
+      colors: ['#4CAF50'],
       fill: {
         type: 'gradient',
         gradient: {
-          shade: 'light',
+          shade: 'dark',
           type: 'vertical',
           gradientToColors: ['#28a745'],
           stops: [0, 100],

src/components/charts/PingChart.jsx

@@ -16,7 +16,7 @@ const PingChart = ({ data }) => {
       chart: {
         height: 250,
         type: 'area',
-        background: '#ececec',
+        background: '#1e1e1e',
         toolbar: { show: false },
       },
       dataLabels: { enabled: false },
@@ -26,15 +26,15 @@ const PingChart = ({ data }) => {
       },
       xaxis: {
         type: 'datetime',
-        labels: { style: { fontFamily: 'Poppins, sans-serif' } },
+        labels: { style: { fontFamily: 'Poppins, sans-serif', colors: '#ffffff' } },
-        axisBorder: { color: '#555555' },
+        axisBorder: { color: '#777777' },
-        axisTicks: { color: '#555555' },
+        axisTicks: { color: '#777777' },
       },
       yaxis: {
-        labels: { style: { fontFamily: 'Poppins, sans-serif' } },
+        labels: { style: { fontFamily: 'Poppins, sans-serif', colors: '#ffffff' } },
       },
       grid: {
-        borderColor: '#555555',
+        borderColor: '#777777',
         strokeDashArray: 4,
       },
       tooltip: {

src/components/charts/UploadChart.jsx

@@ -15,7 +15,7 @@ const UploadChart = ({ data }) => {
       chart: {
         height: 250,
         type: 'area',
-        background: '#ececec',
+        background: '#1e1e1e',
         toolbar: { show: false },
       },
       dataLabels: { enabled: false },
@@ -25,15 +25,15 @@ const UploadChart = ({ data }) => {
       },
       xaxis: {
         type: 'datetime',
-        labels: { style: { fontFamily: 'Poppins, sans-serif' } },
+        labels: { style: { fontFamily: 'Poppins, sans-serif', colors: '#ffffff' } },
-        axisBorder: { color: '#555555' },
+        axisBorder: { color: '#777777' },
-        axisTicks: { color: '#555555' },
+        axisTicks: { color: '#777777' },
       },
       yaxis: {
-        labels: { style: { fontFamily: 'Poppins, sans-serif' } },
+        labels: { style: { fontFamily: 'Poppins, sans-serif', colors: '#ffffff' } },
       },
       grid: {
-        borderColor: '#555555',
+        borderColor: '#777777',
         strokeDashArray: 4,
       },
       tooltip: {

src/components/dashboard/AppDevice.jsx

@@ -5,7 +5,7 @@ import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";
 const AppDevice = ({ devices }) => {
   return (
     <>
-      <Table striped bordered hover responsive style={{ fontFamily: 'Poppins, sans-serif' }}>
+      <Table striped bordered hover responsive>
         <thead>
           <tr>
             <th>IP Address</th>

src/components/dashboard/AverageData.jsx

@@ -24,7 +24,7 @@ const AverageData = ({ data }) => {
   return (
     <Row>
       <Col md={4}>
-        <Card className="mb-4 shadow-sm">
+        <Card className="mb-4 shadow-sm bg-dark text-light">
           <Card.Header as="h6">
             <FaDownload style={{ marginRight: '10px', width: '15px', color: '#28a745' }} />
             Average Download
@@ -35,7 +35,7 @@ const AverageData = ({ data }) => {
         </Card>
       </Col>
       <Col md={4}>
-        <Card className="mb-4 shadow-sm">
+        <Card className="mb-4 shadow-sm bg-dark text-light">
           <Card.Header as="h6">
             <FaUpload style={{ marginRight: '10px', width: '15px', color: '#00bcd4' }} />
             Average Upload
@@ -46,7 +46,7 @@ const AverageData = ({ data }) => {
         </Card>
       </Col>
       <Col md={4}>
-        <Card className="mb-4 shadow-sm">
+        <Card className="mb-4 shadow-sm bg-dark text-light">
           <Card.Header as="h6">
             <FaTachometerAlt style={{ marginRight: '10px', width: '15px', color: '#ffc107' }} />
             Average Ping

src/components/dashboard/ChartData.jsx

@@ -5,12 +5,12 @@ import UploadChart from '../charts/UploadChart';
 import PingChart from '../charts/PingChart';
 import { FaDownload, FaUpload, FaTachometerAlt } from 'react-icons/fa';
 
-const Chart = ({ data }) => {
+const Chart = ({ data, theme }) => {
   return (
     <>
       <Row>
         <Col md="4">
-          <Card className="mb-4 shadow-sm">
+          <Card className={`mb-4 shadow-sm ${theme}`}>
             <Card.Body>
               <Card.Title>
                 <FaDownload style={{ marginRight: '10px', color: '#28a745'}} />
@@ -21,7 +21,7 @@ const Chart = ({ data }) => {
           </Card>
         </Col>
         <Col md="4">
-          <Card className="mb-4 shadow-sm">
+          <Card className={`mb-4 shadow-sm ${theme}`}>
             <Card.Body>
               <Card.Title>
                 <FaUpload style={{ marginRight: '10px', width: '15px', color: '#00bcd4' }} />
@@ -32,7 +32,7 @@ const Chart = ({ data }) => {
           </Card>
         </Col>
         <Col md="4">
-          <Card className="mb-4 shadow-sm">
+          <Card className={`mb-4 shadow-sm ${theme}`}>
             <Card.Body>
               <Card.Title>
                 <FaTachometerAlt style={{ marginRight: '10px', width: '15px', color: '#ffc107' }} />

src/components/dashboard/LatestData.jsx

@@ -2,21 +2,21 @@
 import { FaDownload, FaUpload, FaTachometerAlt } from 'react-icons/fa';
 import { Card, Col, Row } from 'react-bootstrap';
 
-const LatestData = ({ data }) => {
+const LatestData = ({ data, theme }) => {
   const latestData = data.length > 0 ? data[data.length - 20] : null;
 
   if (!latestData) return null;
 
   return (
     <Row>
-      <Card className='mb-4 shadow-sm border-light bg-dark text-light'>
+      <Card className='mb-4 shadow-sm border-light'>
         <Card.Header>
           <h3 style={{marginTop: '20px', marginBottom: '20px'}}>Latest Data</h3>
         </Card.Header>
         <Card.Body>
           <Row>
             <Col md={4}>
-              <Card className="mb-4 shadow-sm bg-dark text-light">
+              <Card className={`${theme} mb-4 shadow-sm`}>
                 <Card.Header as="h6">
                   <FaDownload style={{ marginRight: '10px', width: '15px', color: '#28a745' }} />
                   Latest Download
@@ -27,7 +27,7 @@ const LatestData = ({ data }) => {
               </Card>
             </Col>
             <Col md={4}>
-              <Card className="mb-4 shadow-sm bg-dark text-light">
+              <Card className={`${theme} mb-4 shadow-sm`}>
                 <Card.Header as="h6">
                   <FaUpload style={{ marginRight: '10px', width: '15px', color: '#00bcd4' }} />
                   Latest Upload
@@ -38,7 +38,7 @@ const LatestData = ({ data }) => {
               </Card>
             </Col>
             <Col md={4}>
-              <Card className="mb-4 shadow-sm bg-dark text-light">
+              <Card className={`${theme} mb-4 shadow-sm`}>
                 <Card.Header as="h6">
                   <FaTachometerAlt style={{ marginRight: '10px', width: '15px', color: '#ffc107' }} />
                   Latest Ping

src/components/dashboard/MetricsTable.jsx

@@ -2,10 +2,10 @@ import Table from 'react-bootstrap/Table';
 
 const MetricsTable = ({ metrics = [] }) => {
   return (
-    <div  style={{ overflowX: "auto", maxHeight: "400px", overflowY: "auto", position: "relative", borderTop: "1px solid #ddd" }}>
+    <div style={{ overflowX: "auto", maxHeight: "450px", overflowY: "auto", position: "relative", borderTop: "1px solid #444", backgroundColor: "#1e1e1e" }}>
-      <Table striped bordered hover responsive style={{ fontFamily: 'Poppins, sans-serif', minWidth: "900px"}}>
+      <Table striped bordered hover responsive variant='dark' style={{ fontFamily: 'Poppins, sans-serif', minWidth: "900px", backgroundColor: "#1e1e1e", color: "#ffffff" }}>
         <thead>
-          <tr>
+          <tr style={{ backgroundColor: "#333333", color: "#ffffff" }}>
             <th className="py-3 text-center align-middle">Monitor Name</th>
             <th className="py-3 text-center align-middle">URL</th>
             <th className="py-3 text-center align-middle">Response Time (ms)</th>
@@ -16,9 +16,9 @@ const MetricsTable = ({ metrics = [] }) => {
         </thead>
         <tbody>
           {metrics.map((item, index) => (
-            <tr key={index}>
+            <tr key={index} style={{ backgroundColor: "#222222", color: "#ffffff" }}>
               <td>{item.monitor_name}</td>
-              <td><a href={item.monitor_url} target="_blank" rel="noopener noreferrer">{item.monitor_url}</a></td>
+              <td><a href={item.monitor_url} target="_blank" rel="noopener noreferrer" style={{ color: "#4CAF50" }}>{item.monitor_url}</a></td>
               <td>{item.response_time} ms</td>
               <td>
                 {item.status === 1 ? 'UP' :

src/components/dashboard/TableData.jsx

@@ -3,11 +3,11 @@ import { Table } from 'react-bootstrap';
 import { format } from 'date-fns';
 import { FaDownload, FaUpload, FaTachometerAlt } from "react-icons/fa";
 
-const DataTable = ({ data = [] }) => {
+const DataTable = ({ data = [], theme }) => {
   return (
-    <div style={{ overflowX: "auto", maxHeight: "400px", overflowY: "auto", position: "relative", borderTop: "1px solid #ddd", marginBottom: "20px"}}>
+    <div style={{ overflowX: "auto", maxHeight: "400px", overflowY: "auto", position: "relative", marginBottom: "20px"}}>
-    <Table striped bordered hover responsive style={{ fontFamily: 'Poppins, sans-serif', minWidth: "900px"}}>
+    <Table striped bordered hover responsive style={{ fontFamily: 'Poppins, sans-serif', minWidth: "900px"}} className={`${theme}`}>
-      <thead className="bg-secondary text-center" style={{ position: "sticky", top: 0, zIndex: 10, backgroundColor: "#6c757d" }}>
+      <thead className="bg-secondary text-center" style={{ position: "sticky", top: 0, zIndex: 10, backgroundColor: "#343a40" }}>
         <tr>
           <th className="py-3 text-center align-middle">No</th>
           <th className="py-3 text-center align-middle" style={{ color: '#28a745' }}>

src/components/layout/Navbar.jsx

@@ -1,30 +1,20 @@
 import { Navbar, Nav } from 'react-bootstrap';
-import { FaChartLine } from 'react-icons/fa';
+import { FaChartLine, FaSun, FaMoon } from 'react-icons/fa';
 
-const AppNavbar = () => {
+const AppNavbar = ({ toggleTheme, theme }) => {
   return (
     <Navbar 
-      className="fixed-top w-100 shadow-sm d-flex justify-content-between"
+      className={`${theme} navbar-app fixed-top w-100 shadow-sm d-flex justify-content-between`}
       style={{ zIndex: 1030, padding: '15px 20px' }}
     >
-      <Navbar.Brand href="#home" style={{ marginLeft: '20px', fontWeight: 'bold'}}>
+      <Navbar.Brand className={`${theme}`} href="#home" style={{ marginLeft: '20px'}}>
         <FaChartLine style={{ marginRight: '10px', color: '#b31e1e' }} />
           Speedtest Tracker
       </Navbar.Brand>
-      <Nav>
+      <Nav className="ml-auto" style={{ marginRight: '20px' }}>
-        <Nav.Item className="d-flex align-items-center" style={{ fontWeight: 'bold' }}>
+        <button onClick={toggleTheme} className="theme-toggle-btn">
-          Damar
+          {theme === 'light' ? <FaMoon size={20} /> : <FaSun size={20} />}
-        <img 
+        </button>
-            src="/src/assets/react.svg" 
-            alt="Profile" 
-            style={{ 
-              width: '30px', 
-              height: '30px', 
-              borderRadius: '50%', 
-              marginLeft: '10px' 
-            }}
-          />
-        </Nav.Item>
       </Nav>
     </Navbar>
   );

src/components/layout/Sidebar.jsx

@@ -2,13 +2,12 @@ import { Navbar, Nav } from 'react-bootstrap';
 import { Link, useLocation } from 'react-router-dom';
 import { FaTachometerAlt, FaDesktop, FaChartBar, FaCog } from "react-icons/fa";
 
-const Sidebar = () => {
+const Sidebar = ({theme}) => {
 
   const location = useLocation();
   
   return (
-    <div className='sidebar'>
+      <Navbar expand="lg" className={`sidebar-app flex-column ${theme}`}>
-      <Navbar expand="lg" className="flex-column">
         <Nav className="flex-column w-100">
           <Nav.Link 
             as={Link} 
@@ -43,7 +42,6 @@ const Sidebar = () => {
           </Nav.Link>
         </Nav>
       </Navbar>
-    </div>
   );
 }
 

src/pages/Dashboard.jsx

@@ -28,7 +28,7 @@ const Dashboard = () => {
   if (loading) {
     return (
       <Container fluid className="text-center mt-5">
-        <Spinner animation="border" variant="danger" />
+        <Spinner animation="border" variant="info" />
       </Container>
     );
   }
@@ -42,7 +42,7 @@ const Dashboard = () => {
   }
 
   return (
-    <Container fluid className='d-flex' style={{ fontFamily: 'Poppins, sans-serif'}}>
+    <Container fluid className='flex'>
         <Col className="p-3 ms-auto">
           <h4 className='my-3'>Dashboard</h4>
           <Row>

src/pages/DevicesPage.jsx

@@ -35,9 +35,8 @@ function DevicesPage() {
 
   if (loading) {
     return (
-      <Container fluid className="text-center mt-5 text-light">
+      <Container fluid className="text-center mt-5">
-        <Spinner animation="border" variant="light" />
+        <Spinner animation="border" variant="info"/>
-        <p>Loading...</p>
       </Container>
     );
   }

src/services/api.jsx

@@ -1,14 +1,14 @@
 import axios from 'axios';
 
-const API_URL = import.meta.env.VITE_API_URL;
+const API_SPEED_URL = import.meta.env.VITE_API_SPEED_URL;
-const API_JSON_URL = import.meta.env.VITE_API_JSON_URL;
+const API_PING_URL = import.meta.env.VITE_API_PING_URL;
 const API_METRICS_URL = import.meta.env.VITE_API_METRICS_URL;
 
 // console.log(import.meta.env.VITE_API_URL)
 
 export const fetchSpeedTestData = async () => {
   try {
-    const response = await axios.get(API_URL, {
+    const response = await axios.get(API_SPEED_URL, {
       headers: {
         'Author': 'vedeom',
       },
@@ -26,7 +26,7 @@ export const fetchSpeedTestData = async () => {
 
 export const fetchActiveDevices = async () => {
   try {
-    const response = await axios.get(API_JSON_URL);
+    const response = await axios.get(API_PING_URL);
 
     // console.log('Devices API Response:', response.data);
 

vite.config.js

@@ -2,5 +2,9 @@ import { defineConfig  } from 'vite'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
+  server: {
+   host: '0.0.0.0',
+   port: 5173, 
+  }
 });