ngerapiin playback

src/components/PlayBack/ImageDisplay.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import ImageThumbnail from "./ImageThumbnail";
+import ImageList from "./imageList";
+
+const ImageDisplay = ({ images, error, viewMode, onImageClick }) => {
+  return (
+    <div className="w-full max-w-7xl bg-[#f0faff] rounded-lg shadow-md mb-8">
+      {/* List View */}
+      {viewMode === "list" && (
+        <div className="w-full overflow-x-auto">
+          <table className="w-full min-w-[600px] border-collapse">
+            <thead className="bg-[#365486] text-white sticky top-0 z-10">
+              <tr>
+                <th className="p-3 text-center border border-gray-300 w-1/3">
+                  Image
+                </th>
+                <th className="p-3 text-center border border-gray-300 w-1/3">
+                  Date
+                </th>
+                <th className="p-3 text-center border border-gray-300 w-1/3">
+                  Time
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {images.map((image, index) => (
+                <tr
+                  key={index}
+                  className="hover:bg-gray-50 transition-colors duration-200"
+                >
+                  <td className="p-3 border border-gray-300">
+                    <ImageList
+                      image={image}
+                      onClick={() => onImageClick(image)}
+                      className="cursor-pointer"
+                    />
+                  </td>
+                  <td className="p-3 text-center border border-gray-300">
+                    {image.date || "N/A"}
+                  </td>
+                  <td className="p-3 text-center border border-gray-300">
+                    {image.time || "N/A"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Grid View */}
+      {viewMode === "grid" && (
+        <div className="p-4">
+          {/* Error and Empty State Handling */}
+          {error && (
+            <div className="text-center text-red-500 p-4 bg-red-50 rounded-lg">
+              Error: {error}
+            </div>
+          )}
+
+          {images.length === 0 && !error && (
+            <div className="text-center text-gray-500 p-4 bg-gray-50 rounded-lg">
+              No images found
+            </div>
+          )}
+
+          {/* Grid Layout */}
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            {images.map((image, index) => (
+              <div
+                key={index}
+                className="flex justify-center hover:scale-105 transition-transform duration-300"
+              >
+                <ImageThumbnail
+                  image={image}
+                  onClick={() => onImageClick(image)}
+                  className="cursor-pointer"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageDisplay;

src/components/PlayBack/ImageFilterForm.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+
+const ImageFilterForm = ({ onSubmit }) => {
+  const [date, setDate] = useState("");
+  const [timeStart, setTimeStart] = useState("");
+  const [timeEnd, setTimeEnd] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit({
+      date,
+      starttime: timeStart,
+      endtime: timeEnd,
+    });
+    console.log("Filters applied:", { date, timeStart, timeEnd });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="w-full max-w-4xl flex flex-col space-y-4 sm:space-y-0 sm:flex-row justify-center sm:space-x-4 mb-6 sm:mb-8"
+    >
+      <div className="flex items-center space-x-2 pr-1">
+        <label
+          htmlFor="date"
+          className="text-black whitespace-nowrap sm:mr-0 mr-14"
+        >
+          Date
+        </label>
+        <input
+          type="date"
+          id="date"
+          name="date"
+          value={date}
+          onChange={(e) => setDate(e.target.value)}
+          className="rounded-md px-1 py-2 border border-black shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow"
+        />
+      </div>
+
+      <div className="flex items-center space-x-2 pr-1">
+        <label
+          htmlFor="timeStart"
+          className="mr-3 sm:mr-0 text-black whitespace-nowrap"
+        >
+          Time Start
+        </label>
+        <input
+          type="time"
+          id="timeStart"
+          name="timeStart"
+          value={timeStart}
+          onChange={(e) => setTimeStart(e.target.value)}
+          className="rounded-md px-2 py-2 border border-black shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow"
+        />
+      </div>
+
+      <div className="flex items-center space-x-2 pr-1">
+        <label
+          htmlFor="timeEnd"
+          className="text-black whitespace-nowrap mr-5 sm:mr-0"
+        >
+          Time End
+        </label>
+        <input
+          type="time"
+          id="timeEnd"
+          name="timeEnd"
+          value={timeEnd}
+          onChange={(e) => setTimeEnd(e.target.value)}
+          className="rounded-md px-2 py-2 border border-black shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow"
+        />
+      </div>
+
+      <button
+        type="submit"
+        className="bg-[#365486] text-white font-bold rounded-md px-4 py-2 hover:bg-[#2a4675] transition duration-300"
+      >
+        Submit
+      </button>
+    </form>
+  );
+};
+
+export default ImageFilterForm;

src/components/PlayBack/ImageViewModeToggle.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+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="./src/assets/list.svg" alt="List View" width="30" />
+      </button>
+      <button
+        onClick={() => onViewModeChange("grid")}
+        className={`p-2 rounded-md ${
+          viewMode === "grid" ? "bg-[#2a4675]" : "bg-[#e0e0e0]"
+        }`}
+      >
+        <img src="./src/assets/grid.svg" alt="Grid View" width="30" />
+      </button>
+    </div>
+  );
+};
+
+export default ImageViewModeToggle;