ok

package-lock.json

@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-router-dom": "^7.6.2",
         "react-scripts": "5.0.1",
         "tesseract.js": "^6.0.1",
         "web-vitals": "^2.1.4"
@@ -12944,6 +12945,50 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
+      "integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
+      "integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
+      "dependencies": {
+        "react-router": "7.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -13781,6 +13826,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.2",
     "react-scripts": "5.0.1",
     "tesseract.js": "^6.0.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,11 +1,14 @@
-import logo from "./logo.svg";
-import "./App.css";
+import { Routes, Route } from "react-router-dom";
 import CameraKtp from "./KTPScanner";
+import Dashboard from "./Dashboard";
 
 function App() {
   return (
     <div className="App">
-      <CameraKtp />
+      <Routes>
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/scan" element={<CameraKtp />} />
+      </Routes>
     </div>
   );
 }

src/Dashboard.js

@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "./Dashboard.module.css";
+import Header from "./components/Header";
+import Sidebar from "./components/Sidebar";
+import RoleCard from "./components/RoleCard";
+import Chart from "./components/Chart";
+
+const Dashboard = () => {
+  return (
+    <div className={styles.dashboard}>
+      <Sidebar />
+      <div className={styles.mainContent}>
+        <Header />
+        <div className={styles.cards}>
+          <RoleCard title="Officer" value="$4644" code="#df3422f" />
+          <RoleCard title="Medtion" value="$8421" />
+        </div>
+        <Chart />
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

src/Dashboard.module.css

@@ -0,0 +1,26 @@
+.dashboard {
+  display: flex;
+  width: 100%;
+  max-width: 1200px;
+  background: white;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.mainContent {
+  flex: 1;
+  padding: 1rem;
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .dashboard {
+    flex-direction: column;
+  }
+}

src/KTPScanner.js

@@ -1,17 +1,26 @@
 import React, { useEffect, useRef, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
 
 const STORAGE_KEY = "camera_canvas_gallery";
 
 const CameraCanvas = () => {
   const videoRef = useRef(null);
-  const canvasRef = useRef(null); // visible canvas
-  const hiddenCanvasRef = useRef(null); // hidden canvas for capture
+  const canvasRef = useRef(null);
+  const hiddenCanvasRef = useRef(null);
   const [capturedImage, setCapturedImage] = useState(null);
   const [galleryImages, setGalleryImages] = useState([]);
+  const [fileTemp, setFileTemp] = useState(null);
   const [isFreeze, setIsFreeze] = useState(false);
-  const freezeFrameRef = useRef(null); // menyimpan freeze frame imageData
+  const freezeFrameRef = useRef(null);
+
+  const rectRef = useRef({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    radius: 20,
+  });
 
-  // Fungsi untuk gambar rounded rectangle
   const drawRoundedRect = (ctx, x, y, width, height, radius) => {
     ctx.beginPath();
     ctx.moveTo(x + radius, y);
@@ -29,13 +38,9 @@ const CameraCanvas = () => {
     ctx.stroke();
   };
 
-  // Fungsi untuk mewarnai area luar rectangle dengan hitam semi transparan
   const fillOutsideRect = (ctx, rect, canvasWidth, canvasHeight) => {
     ctx.save();
-
     const { x, y, width, height, radius } = rect;
-
-    // Buat path rounded rectangle
     ctx.beginPath();
     ctx.moveTo(x + radius, y);
     ctx.lineTo(x + width - radius, y);
@@ -47,39 +52,20 @@ const CameraCanvas = () => {
     ctx.lineTo(x, y + radius);
     ctx.quadraticCurveTo(x, y, x + radius, y);
     ctx.closePath();
-
-    // Buat clipping inverse area (area luar rectangle)
     ctx.rect(0, 0, canvasWidth, canvasHeight);
-
-    // Fill dengan mode 'evenodd' supaya area di luar path rectangle terisi
-    ctx.fillStyle = "rgba(173, 173, 173, 1)"; // hitam semi transparan
+    ctx.fillStyle = "rgba(173, 173, 173, 1)";
     ctx.fill("evenodd");
-
     ctx.restore();
   };
 
-  // Variabel global untuk posisi rectangle dan ukurannya supaya bisa dipakai di shootImage
-  const rectRef = useRef({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    radius: 20,
-  });
-
   useEffect(() => {
-    // Load gallery dari localStorage saat pertama kali mount
     const savedGallery = localStorage.getItem(STORAGE_KEY);
-    if (savedGallery) {
-      setGalleryImages(JSON.parse(savedGallery));
-    }
+    if (savedGallery) setGalleryImages(JSON.parse(savedGallery));
 
     const getCameraStream = async () => {
       try {
         const stream = await navigator.mediaDevices.getUserMedia({
-          video: {
-            facingMode: { ideal: "environment" },
-          },
+          video: { facingMode: { ideal: "environment" } },
           audio: false,
         });
 
@@ -88,26 +74,21 @@ const CameraCanvas = () => {
 
           videoRef.current.onloadedmetadata = () => {
             videoRef.current.play();
-
             const video = videoRef.current;
-            const canvas = canvasRef.current; // visible canvas
-            const hiddenCanvas = hiddenCanvasRef.current; // hidden canvas
+            const canvas = canvasRef.current;
+            const hiddenCanvas = hiddenCanvasRef.current;
             const ctx = canvas.getContext("2d");
 
-            // Set ukuran canvas sesuai video asli
             canvas.width = video.videoWidth;
             canvas.height = video.videoHeight;
-
-            // Style visible canvas supaya scaled sesuai container dan tidak overflow
             canvas.style.maxWidth = "100%";
             canvas.style.height = "auto";
 
             hiddenCanvas.width = video.videoWidth;
             hiddenCanvas.height = video.videoHeight;
 
-            // Hitung ukuran rectangle KTP
             const rectWidth = canvas.width * 0.9;
-            const rectHeight = (53.98 / 85.6) * rectWidth; // aspek rasio KTP
+            const rectHeight = (53.98 / 85.6) * rectWidth;
             const rectX = (canvas.width - rectWidth) / 2;
             const rectY = (canvas.height - rectHeight) / 2;
 
@@ -122,11 +103,11 @@ const CameraCanvas = () => {
             const drawToCanvas = () => {
               if (video.readyState === 4) {
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
-
                 if (isFreeze && freezeFrameRef.current) {
-                  // Tampilkan freeze frame yang sudah disimpan
                   ctx.putImageData(freezeFrameRef.current, 0, 0);
-
+                } else {
+                  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                }
                 drawRoundedRect(
                   ctx,
                   rectRef.current.x,
@@ -135,25 +116,13 @@ const CameraCanvas = () => {
                   rectRef.current.height,
                   rectRef.current.radius
                 );
-
-                  // Overlay area luar rectangle dengan hitam
+                if (isFreeze) {
                   fillOutsideRect(
                     ctx,
                     rectRef.current,
                     canvas.width,
                     canvas.height
                   );
-                } else {
-                  // Render video live + rectangle
-                  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                  drawRoundedRect(
-                    ctx,
-                    rectRef.current.x,
-                    rectRef.current.y,
-                    rectRef.current.width,
-                    rectRef.current.height,
-                    rectRef.current.radius
-                  );
                 }
               }
               requestAnimationFrame(drawToCanvas);
@@ -170,65 +139,6 @@ const CameraCanvas = () => {
     getCameraStream();
   }, [isFreeze]);
 
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext("2d");
-    const video = videoRef.current;
-
-    // Hitung posisi rectangle sekali
-    const rectWidth = canvas.width * 0.9;
-    const rectHeight = (53.98 / 85.6) * rectWidth;
-    const rectX = (canvas.width - rectWidth) / 2;
-    const rectY = (canvas.height - rectHeight) / 2;
-
-    rectRef.current = {
-      x: rectX,
-      y: rectY,
-      width: rectWidth,
-      height: rectHeight,
-      radius: 20,
-    };
-
-    let animationFrameId;
-
-    const drawToCanvas = () => {
-      if (video.readyState === 4) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        if (isFreeze && freezeFrameRef.current) {
-          ctx.putImageData(freezeFrameRef.current, 0, 0);
-
-          drawRoundedRect(
-            ctx,
-            rectRef.current.x,
-            rectRef.current.y,
-            rectRef.current.width,
-            rectRef.current.height,
-            rectRef.current.radius
-          );
-
-          // Overlay area luar rectangle dengan hitam
-          fillOutsideRect(ctx, rectRef.current, canvas.width, canvas.height);
-        } else {
-          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-          drawRoundedRect(
-            ctx,
-            rectRef.current.x,
-            rectRef.current.y,
-            rectRef.current.width,
-            rectRef.current.height,
-            rectRef.current.radius
-          );
-        }
-      }
-      animationFrameId = requestAnimationFrame(drawToCanvas);
-    };
-
-    drawToCanvas();
-
-    return () => cancelAnimationFrame(animationFrameId);
-  }, [isFreeze]);
-
-  // Fungsi untuk capture gambar area rectangle dan simpan ke localStorage + freeze effect
   const shootImage = () => {
     const video = videoRef.current;
     const { x, y, width, height } = rectRef.current;
@@ -236,27 +146,21 @@ const CameraCanvas = () => {
     const hiddenCtx = hiddenCanvas.getContext("2d");
     const visibleCtx = canvasRef.current.getContext("2d");
 
-    // Ambil image data canvas visible untuk freeze frame
     freezeFrameRef.current = visibleCtx.getImageData(
       0,
       0,
       canvasRef.current.width,
       canvasRef.current.height
     );
-
-    // Aktifkan freeze frame
     setIsFreeze(true);
 
-    // Tangkap gambar video ke hidden canvas
     hiddenCtx.drawImage(video, 0, 0, hiddenCanvas.width, hiddenCanvas.height);
 
-    // Buat canvas crop
     const cropCanvas = document.createElement("canvas");
     cropCanvas.width = Math.floor(width);
     cropCanvas.height = Math.floor(height);
     const cropCtx = cropCanvas.getContext("2d");
 
-    // Crop area rectangle dari hidden canvas
     cropCtx.drawImage(
       hiddenCanvas,
       Math.floor(x),
@@ -273,7 +177,88 @@ const CameraCanvas = () => {
     setCapturedImage(imageDataUrl);
   };
 
-  // Fungsi hapus gambar dari gallery
+  const ReadImage = async (capturedImage) => {
+    const imageId = uuidv4();
+
+    try {
+      let res = await fetch(
+        "https://bot.kediritechnopark.com/webhook/mastersnapper/read",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ imageId, image: capturedImage }),
+        }
+      );
+
+      const { output } = await res.json();
+
+      // Bersihkan dan parsing JSON dari output
+      const jsonString = output
+        .replace(/^```json/, "")
+        .replace(/```$/, "")
+        .trim();
+
+      const data = JSON.parse(jsonString);
+
+      const newImage = {
+        imageId,
+        NIK: data.NIK || "",
+        Nama: data.Nama || "",
+        TTL: data.TTL || "",
+        Kelamin: data.Kelamin || "",
+        Alamat: data.Alamat || "",
+        RtRw: data["RT/RW"] || "",
+        KelDesa: data["Kel/Desa"] || "",
+        Kec: data.Kec || "",
+        Agama: data.Agama || "",
+        Hingga: data.Hingga || "",
+        Pembuatan: data.Pembuatan || "",
+        Kota: data["Kota Pembuatan"] || "",
+      };
+
+      setFileTemp(newImage);
+    } catch (error) {
+      console.error("Failed to read image:", error);
+    }
+  };
+
+  const handleSaveTemp = async () => {
+    try {
+      await fetch(
+        "https://bot.kediritechnopark.com/webhook/mastersnapper/save",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ fileTemp }),
+        }
+      );
+
+      const updatedGallery = [fileTemp, ...galleryImages];
+      setGalleryImages(updatedGallery);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedGallery));
+      setFileTemp(null);
+    } catch (err) {
+      console.error("Gagal menyimpan ke server:", err);
+    }
+  };
+
+  const handleDeleteTemp = async () => {
+    try {
+      await fetch(
+        "https://bot.kediritechnopark.com/webhook/mastersnapper/delete",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ fileTemp }),
+        }
+      );
+
+      setFileTemp(null);
+    } catch (err) {
+      console.error("Gagal menghapus dari server:", err);
+    }
+  };
+
   const removeImage = (index) => {
     const newGallery = [...galleryImages];
     newGallery.splice(index, 1);
@@ -281,9 +266,128 @@ const CameraCanvas = () => {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(newGallery));
   };
 
-  // Rasio KTP
   const aspectRatio = 53.98 / 85.6;
 
+  const handleManualUpload = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const imageDataUrl = reader.result;
+      setCapturedImage(imageDataUrl);
+      setIsFreeze(true);
+
+      // Create an image object from the uploaded file
+      const image = new Image();
+      image.onload = () => {
+        // Get the width of the rounded rectangle from rectRef
+        const rectWidth = rectRef.current.width;
+        const rectHeight = rectRef.current.height;
+
+        // Create a canvas to draw the uploaded image
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+
+        // Set the scale factor based on the rectangle width
+        const scaleFactor = rectWidth / image.width;
+
+        // Calculate the new height based on the aspect ratio
+        const newHeight = image.height * scaleFactor;
+
+        // Clear the canvas and draw the video or freeze frame
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        if (isFreeze && freezeFrameRef.current) {
+          ctx.putImageData(freezeFrameRef.current, 0, 0);
+        } else {
+          const video = videoRef.current;
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        }
+
+        // Draw the rounded rectangle
+        drawRoundedRect(
+          ctx,
+          rectRef.current.x,
+          rectRef.current.y,
+          rectRef.current.width,
+          rectRef.current.height,
+          rectRef.current.radius
+        );
+
+        // Draw the image inside the rounded rectangle
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(
+          rectRef.current.x + rectRef.current.radius,
+          rectRef.current.y
+        );
+        ctx.lineTo(
+          rectRef.current.x + rectRef.current.width - rectRef.current.radius,
+          rectRef.current.y
+        );
+        ctx.quadraticCurveTo(
+          rectRef.current.x + rectRef.current.width,
+          rectRef.current.y,
+          rectRef.current.x + rectRef.current.width,
+          rectRef.current.y + rectRef.current.radius
+        );
+        ctx.lineTo(
+          rectRef.current.x + rectRef.current.width,
+          rectRef.current.y + rectRef.current.height - rectRef.current.radius
+        );
+        ctx.quadraticCurveTo(
+          rectRef.current.x + rectRef.current.width,
+          rectRef.current.y + rectRef.current.height,
+          rectRef.current.x + rectRef.current.width - rectRef.current.radius,
+          rectRef.current.y + rectRef.current.height
+        );
+        ctx.lineTo(
+          rectRef.current.x + rectRef.current.radius,
+          rectRef.current.y + rectRef.current.height
+        );
+        ctx.quadraticCurveTo(
+          rectRef.current.x,
+          rectRef.current.y + rectRef.current.height,
+          rectRef.current.x,
+          rectRef.current.y + rectRef.current.height - rectRef.current.radius
+        );
+        ctx.lineTo(
+          rectRef.current.x,
+          rectRef.current.y + rectRef.current.radius
+        );
+        ctx.quadraticCurveTo(
+          rectRef.current.x,
+          rectRef.current.y,
+          rectRef.current.x + rectRef.current.radius,
+          rectRef.current.y
+        );
+        ctx.closePath();
+        ctx.clip(); // Clip the image within the rounded rectangle
+
+        // Draw the uploaded image inside the clipped region
+        ctx.drawImage(
+          image,
+          rectRef.current.x,
+          rectRef.current.y,
+          rectWidth,
+          newHeight // Height is scaled based on the image's aspect ratio
+        );
+
+        ctx.restore();
+
+        // Save the image data into the freeze frame reference
+        freezeFrameRef.current = ctx.getImageData(
+          0,
+          0,
+          canvas.width,
+          canvas.height
+        );
+      };
+      image.src = imageDataUrl;
+    };
+    reader.readAsDataURL(file);
+  };
+
   return (
     <div>
       <video
@@ -293,57 +397,87 @@ const CameraCanvas = () => {
         muted
         style={{ display: "none" }}
       />
-      {/* Canvas visible untuk tampilan */}
       <canvas
         ref={canvasRef}
         style={{ border: "1px solid black", maxWidth: "100%", height: "auto" }}
       />
-      {/* Canvas hidden untuk capture full res */}
       <canvas ref={hiddenCanvasRef} style={{ display: "none" }} />
+
       {!isFreeze ? (
         <div style={{ marginTop: 10 }}>
           <button onClick={shootImage}>Shoot</button>
+          <div style={{ marginBottom: 10 }}>
+            <input
+              type="file"
+              accept="image/*"
+              onChange={(e) => handleManualUpload(e)}
+              style={{ marginRight: 10 }}
+            />
+          </div>
         </div>
       ) : (
         <div style={{ marginTop: 10 }}>
           <button onClick={() => setIsFreeze(false)}>Hapus</button>
           <button
             onClick={() => {
-              setIsFreeze(false);
-
-              const newImage = {
-                image: capturedImage, // ini base64
-                data: {
-                  createdAt: new Date().toISOString(), // atau data lain yang kamu butuh
-                  // kamu bisa tambahkan info lain di sini, misalnya lokasi, metadata, dll.
-                },
-              };
-
-              const newGallery = [newImage, ...galleryImages];
-              setGalleryImages(newGallery);
-              localStorage.setItem(STORAGE_KEY, JSON.stringify(newGallery));
+              ReadImage(capturedImage);
             }}
           >
             Simpan
           </button>
         </div>
       )}
-      {/* Gallery */}
-      <div style={{ marginTop: 20 }}>
-        <h3>Gallery</h3>
 
+      {fileTemp && (
         <div
           style={{
-            display: "flex",
-            width: "100%",
-            gap: 10,
+            marginTop: 20,
+            padding: 10,
+            border: "1px solid #ccc",
+            borderRadius: 8,
           }}
         >
-          {/* Galeri: 2 kolom tetap */}
+          <h4>Verifikasi Data</h4>
+          <table>
+            <tbody>
+              {Object.entries(fileTemp).map(([key, value]) => (
+                <tr key={key}>
+                  <td style={{ paddingRight: 10, fontWeight: "bold" }}>
+                    {key}
+                  </td>
+                  <td>{value}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <div style={{ marginTop: 10 }}>
+            <button
+              onClick={handleSaveTemp}
+              style={{
+                marginRight: 10,
+                backgroundColor: "green",
+                color: "white",
+              }}
+            >
+              Simpan ke Galeri
+            </button>
+            <button
+              onClick={handleDeleteTemp}
+              style={{ backgroundColor: "red", color: "white" }}
+            >
+              Hapus
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div style={{ marginTop: 20 }}>
+        <h3>Gallery</h3>
+        <div style={{ display: "flex", width: "100%", gap: 10 }}>
           <div
             style={{
               display: "grid",
-              gridTemplateColumns: "repeat(2, 120px)", // 2 kolom tetap
+              gridTemplateColumns: "repeat(2, 120px)",
               gap: 10,
             }}
           >
@@ -400,26 +534,6 @@ const CameraCanvas = () => {
               </div>
             ))}
           </div>
-
-          {/* Tombol Next responsif mengisi kekosongan width */}
-          {galleryImages.length > 0 && (
-            <button
-              style={{
-                flexGrow: 1,
-                background: "#007bff",
-                color: "white",
-                border: "none",
-                borderRadius: 8,
-                fontSize: 24,
-                cursor: "pointer",
-              }}
-              onClick={() => {
-                // Aksi tombol >
-              }}
-            >
-              &gt;
-            </button>
-          )}
         </div>
       </div>
     </div>

src/components/Chart.js

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./Chart.module.css";
+
+const Chart = () => {
+  return <div className={styles.chart}>[Chart Here]</div>;
+};
+
+export default Chart;

src/components/Chart.module.css

@@ -0,0 +1,11 @@
+.chart {
+  margin-top: 2rem;
+  height: 200px;
+  background: linear-gradient(to top, #fdd, #fff);
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #df3422;
+  font-weight: 600;
+}

src/components/Header.js

@@ -0,0 +1,13 @@
+// Header.js
+import React from "react";
+import styles from "./Header.module.css";
+
+const Header = () => {
+  return (
+    <div className={styles.header}>
+      <div className={styles.title}>Officers & Roles</div>
+    </div>
+  );
+};
+
+export default Header;

src/components/Header.module.css

@@ -0,0 +1,5 @@
+.header {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}

src/components/RoleCard.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./RoleCard.module.css";
+
+const RoleCard = ({ title, value, code }) => {
+  return (
+    <div className={styles.card}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.value}>{value}</div>
+      {code && <div className={styles.code}>{code}</div>}
+    </div>
+  );
+};
+
+export default RoleCard;

src/components/RoleCard.module.css

@@ -0,0 +1,25 @@
+.card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 1rem;
+  flex: 1;
+  min-width: 160px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.title {
+  font-weight: 600;
+  color: #555;
+}
+
+.value {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #000;
+}
+
+.code {
+  font-size: 0.9rem;
+  color: #df3422;
+  margin-top: 0.5rem;
+}

src/components/Sidebar.js

@@ -0,0 +1,18 @@
+// Sidebar.js
+import React from "react";
+import styles from "./Sidebar.module.css";
+
+const Sidebar = () => {
+  return (
+    <div className={styles.sidebar}>
+      <div className={styles.logo}>Dashboard</div>
+      <div className={styles.menu}>
+        <div className={styles.menuItem}>Officers</div>
+        <div className={styles.menuItem}>Roles</div>
+        <div className={styles.menuItem}>Key Performances</div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/Sidebar.module.css

@@ -0,0 +1,17 @@
+.sidebar {
+  width: 200px;
+  background-color: #df3422;
+  color: white;
+  padding: 1rem;
+}
+
+.logo {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+
+.menuItem {
+  margin: 1rem 0;
+  cursor: pointer;
+}

src/index.js

@@ -1,17 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+// index.js
+import React from "react";
+import ReactDOM from "react-dom/client"; // ✅ use 'react-dom/client' in React 18+
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+// ✅ createRoot instead of render
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
+    <BrowserRouter>
       <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();