finis

server.js

@@ -7,9 +7,8 @@ import cors from "cors";
 import setupAuthRoutes from "./src/routes/authGoogle.js";
 import manualAuthRoutes from "./src/routes/authManual.js";
 import userRoutes from "./src/routes/userRoutes.js";
-import imageRoutes from './src/routes/imageRoutes.js';
-import upload from './src/uploads/image.js';
-// import updateProfile from './src/uploads/updateProfile.js';
+import imageRoutes from "./src/routes/imageRoutes.js";
+import upload from "./src/uploads/image.js";
 
 dotenv.config();
 
@@ -36,7 +35,7 @@ app.use(
 );
 
 // Middleware untuk parsing JSON
-app.use(express.json({ limit: '1gb' }));
+app.use(express.json({ limit: "1gb" }));
 
 // Setup session
 app.use(

src/components/PlayBack/ImageDisplay.jsx

@@ -4,11 +4,11 @@ import ImageUploadStats from "./ImageUploadStats";
 
 const ImageDisplay = ({ images, error, viewMode, onImageClick }) => {
   return (
-    <div className="w-full max-w-7xl xl:max-w-[1800px] bg-[#f0faff] rounded-lg shadow-md mb-8">
-      {viewMode === "list" && <ImageUploadStats images={images} />}
+    <div className="w-full max-w-5xl lg:max-w-7xl bg-[#f0faff] rounded-lg shadow-md mb-8">
+      {viewMode === "event" && <ImageUploadStats images={images} />}
 
       {viewMode === "grid" && (
-        <div className="p-4 bg-purple-30 h-[610px] overflow-y-auto ">
+        <div className="p-4 border rounded-md h-[610px] overflow-y-auto ">
           {error && (
             <div className="text-center text-red-500 p-4 bg-red-50 rounded-lg mb-4">
               Error: {error}

src/components/PlayBack/ImageUploadStats.jsx

@@ -20,10 +20,8 @@ const ImageUploadStats = ({ images }) => {
 
   // Process images and apply filters
   const processImageData = (images) => {
-    // Create base 24-hour data
     const hourlyData = generate24HourData();
 
-    // Filter and count uploads
     images.forEach((image) => {
       if (image.time) {
         const hour = image.time.split(":")[0].padStart(2, "0");
@@ -64,74 +62,96 @@ const ImageUploadStats = ({ images }) => {
   const mostActiveDay = findMostActiveDay(images);
 
   // Calculate total uploads and max uploads
-  const totalUploads = hourlyData.reduce(
-    (sum, entry) => sum + entry.uploads,
-    0
-  );
+
   const maxUploads = Math.max(...hourlyData.map((entry) => entry.uploads));
 
   return (
-    <div className="w-full py-8 px-2 sm:px-4 md:px-6 lg:px-8">
-      <div className="w-full p-2">
-        <h2 className="text-lg md:text-xl font-semibold mb-2 md:mb-4 text-center">
-          Hourly Uploads {mostActiveDay ? `on ${mostActiveDay}` : ""}
+    <div className="w-full pt-8">
+      <div className="w-full mb-6">
+        <h2 className="text-base sm:text-lg md:text-xl lg:text-2xl font-bold text-center text-[#365486] mb-4">
+          Hourly Upload Distribution <br />
+          {mostActiveDay ? `${mostActiveDay}` : ""}
         </h2>
-        <ResponsiveContainer width="100%" height={300} className="max-w-full ">
+
+        <ResponsiveContainer width="100%" height={350} className="max-w-full">
           {images.length > 0 ? (
             <LineChart data={hourlyData}>
-              <CartesianGrid strokeDasharray="3 3" />
+              <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
               <XAxis
                 dataKey="hour"
                 tick={{ fontSize: 10 }}
-                interval="preserveStartEnd"
+                axisLine={{ stroke: "#365486" }}
+                tickLine={{ stroke: "#365486" }}
               />
               <YAxis
                 allowDecimals={false}
                 tick={{ fontSize: 10 }}
+                axisLine={{ stroke: "#365486" }}
+                tickLine={{ stroke: "#365486" }}
                 label={{
                   value: "Uploads",
                   angle: -90,
                   position: "outsideLeft",
+                  fill: "#365486",
                 }}
               />
               <Tooltip
-                contentStyle={{ fontSize: "12px" }}
-                labelStyle={{ fontSize: "10px" }}
+                contentStyle={{
+                  fontSize: "12px",
+                  backgroundColor: "#f0faff",
+                  border: "1px solid #365486",
+                  borderRadius: "8px",
+                }}
+                labelStyle={{
+                  fontSize: "10px",
+                  fontWeight: "bold",
+                }}
               />
               <Line
                 type="monotone"
                 dataKey="uploads"
                 stroke="#365486"
-                strokeWidth={2}
-                activeDot={{ r: 6 }}
+                strokeWidth={3}
+                activeDot={{
+                  r: 6,
+                  fill: "#365486",
+                  stroke: "white",
+                  strokeWidth: 2,
+                }}
               />
             </LineChart>
           ) : (
-            <div className="text-center text-gray-500">
+            <div className="text-center text-gray-500 py-8">
               No upload data available
             </div>
           )}
         </ResponsiveContainer>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4 text-center mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4 text-center mb-6 py-8 px-2 sm:px-4 md:px-6 lg:px-8">
         <div className="bg-[#e0f5ff] p-2 sm:p-4 rounded-lg">
-          <h3 className="font-semibold text-base sm:text-lg">Total Images</h3>
-          <p className="text-xl sm:text-2xl text-[#365486]">{images.length}</p>
+          <h3 className="font-semibold text-sm sm:text-base md:text-lg">
+            Total Images
+          </h3>
+          <p className="text-lg sm:text-lg md:text-xl lg:text-2xl text-[#365486]">
+            {images.length}
+          </p>
         </div>
         <div className="bg-[#e0f5ff] p-2 sm:p-4 rounded-lg">
-          <h3 className="font-semibold text-base sm:text-lg">
+          <h3 className="font-semibold text-sm sm:text-base md:text-lg">
             Most Active Day
           </h3>
-          <p className="text-xl sm:text-2xl text-[#365486]">
+          <p className="text-lg sm:text-lg md:text-xl lg:text-2xl text-[#365486]">
             {mostActiveDay || "N/A"}
           </p>
         </div>
         <div className="bg-[#e0f5ff] p-2 sm:p-4 rounded-lg">
-          <h3 className="font-semibold text-base sm:text-lg">
+          <h3 className="font-semibold text-sm sm:text-base md:text-lg">
             Peak Hour Uploads
           </h3>
-          <p className="text-xl sm:text-2xl text-[#365486]">{maxUploads}</p>
+          <p className="text-lg sm:text-lg md:text-xl lg:text-2xl text-[#365486]">
+            {maxUploads}
+          </p>
         </div>
       </div>
     </div>

src/components/PlayBack/ImageViewModeToggle.jsx

@@ -1,26 +1,59 @@
 import React from "react";
-import list from "../../assets/list.png";
-import grid from "../../assets/grid.png";
+import EventLight from "../../assets/graph-light.png";
+import EventDark from "../../assets/graph-dark.png";
+import GridLight from "../../assets/grid-light.png";
+import GridDark from "../../assets/grid-dark.png";
 
 const ImageViewModeToggle = ({ viewMode, onViewModeChange }) => {
   return (
-    <div className="items-start w-full max-w-7xl mb-8 overflow-y-auto mx-auto pl-2">
-      <button
-        onClick={() => onViewModeChange("list")}
-        className={`p-2 rounded-md ${
-          viewMode === "list" ? "bg-[#2a4675]" : "bg-[#e0e0e0]"
-        }`}
-      >
-        <img src={list} alt="List View" width="30" />
-      </button>
-      <button
-        onClick={() => onViewModeChange("grid")}
-        className={`p-2 rounded-md ${
-          viewMode === "grid" ? "bg-[#2a4675]" : "bg-[#e0e0e0]"
-        }`}
-      >
-        <img src={grid} alt="Grid View" width="30" />
-      </button>
+    <div className="w-full max-w-4xl mx-auto mb-6 sm:mb-8">
+      <div className="flex justify-center space-x-4">
+        <button
+          onClick={() => onViewModeChange("event")}
+          className={`
+            flex items-center justify-center 
+            p-2 rounded-md 
+            ${
+              viewMode === "event"
+                ? "bg-[#365486] text-white"
+                : "bg-[#e0e0e0] text-black"
+            }
+            hover:opacity-80 
+            transition duration-300 
+            w-full sm:w-auto
+          `}
+        >
+          <img
+            src={viewMode === "event" ? EventLight : EventDark}
+            alt="Event View"
+            className="w-6 h-6 sm:w-7 sm:h-7"
+          />
+          <span className="ml-2 hidden sm:inline">Event View</span>
+        </button>
+
+        <button
+          onClick={() => onViewModeChange("grid")}
+          className={`
+            flex items-center justify-center 
+            p-2 rounded-md 
+            ${
+              viewMode === "grid"
+                ? "bg-[#365486] text-white"
+                : "bg-[#e0e0e0] text-black"
+            }
+            hover:opacity-80 
+            transition duration-300 
+            w-full sm:w-auto
+          `}
+        >
+          <img
+            src={viewMode === "grid" ? GridLight : GridDark}
+            alt="Grid View"
+            className="w-6 h-6 sm:w-7 sm:h-7"
+          />
+          <span className="ml-2 hidden sm:inline">Grid View</span>
+        </button>
+      </div>
     </div>
   );
 };

src/pages/PlaybacksPage.jsx

@@ -33,7 +33,7 @@ const PlaybacksPage = () => {
   return (
     <div className="font-poppins">
       <Header />
-      <main className="bg-[#f8fbff] font-poppins min-h-screen flex flex-col items-center py-4 sm:py-8 px-4 sm:px-6">
+      <main className="font-poppins min-h-screen flex flex-col items-center py-4 sm:py-8 px-4 sm:px-6">
         <div className="mt-[50px] md:mt-[100px]">
           <ImageFilterForm onSubmit={handleFilterSubmit} />
         </div>