implement the user feedback UI and functionality

Author: AnkitTukatek

web/src/app/admin/feedback-from-user/FeedbackList.tsx

@@ -4,10 +4,72 @@ import { useEffect, useState } from "react";
 import DataTable from "react-data-table-component";
 import { Eye, Trash2 } from "lucide-react";
 
+interface ModalProps {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void;
+  onConfirm?: () => void;
+  confirmText?: string;
+  confirmVariant?: "danger" | "primary";
+}
+
+function Modal({
+  isOpen,
+  title,
+  children,
+  onClose,
+  onConfirm,
+  confirmText = "OK",
+  confirmVariant = "primary",
+}: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 animate-fadeIn"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 className="text-lg font-semibold mb-4">{title}</h2>
+        <div className="mb-6 text-gray-700">{children}</div>
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100"
+          >
+            Cancel
+          </button>
+          {onConfirm && (
+            <button
+              onClick={() => {
+                onConfirm();
+                onClose();
+              }}
+              className={`px-4 py-2 rounded-lg text-white ${
+                confirmVariant === "danger"
+                  ? "bg-red-600 hover:bg-red-700"
+                  : "bg-blue-600 hover:bg-blue-700"
+              }`}
+            >
+              {confirmText}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function FeedbackList() {
   const [feedbacks, setFeedbacks]: any = useState([]);
   const [loading, setLoading] = useState(false);
+
   const [selectedComment, setSelectedComment] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<any | null>(null);
 
   const truncate = (text: string, length: number = 50) =>
     text.length > length ? `${text.slice(0, length)}...` : text;
@@ -43,6 +105,10 @@ export default function FeedbackList() {
     fetchFeedback();
   }, []);
 
+  const handleDelete = (id: string) => {
+    setFeedbacks((prev: any) => prev.filter((f: any) => f.id !== id));
+  };
+
   const columns: any = [
     {
       name: "ID",
@@ -73,7 +139,7 @@ export default function FeedbackList() {
     },
     {
       name: "Date",
-      selector: (row: any) => row.date,
+      selector: (row: any) => new Date(row.date).toUTCString(),
       sortable: true,
     },
     {
@@ -89,9 +155,7 @@ export default function FeedbackList() {
             </button>
           )}
           <button
-            onClick={() =>
-              setFeedbacks((prev: any) => prev.filter((f: any) => f.id !== row.id))
-            }
+            onClick={() => setDeleteTarget(row)}
             className="flex items-center gap-1 px-2 py-1 text-sm border border-red-600 text-red-600 rounded hover:bg-red-50"
           >
             <Trash2 size={14} /> Delete
@@ -102,7 +166,7 @@ export default function FeedbackList() {
   ];
 
   return (
-    <div className="p-6 w-[160vh] bg-white rounded shadow">
+    <div className="p-6 w-[90rem] bg-white rounded shadow">
       <h2 className="text-xl font-semibold mb-6">User Feedback</h2>
 
       <DataTable
@@ -120,33 +184,34 @@ export default function FeedbackList() {
         }}
       />
 
-      {selectedComment && (
-        <div
-          className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center"
-          onClick={() => setSelectedComment(null)}
-        >
-          <div
-            className="bg-white p-4 rounded shadow max-w-md w-full"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <h3 className="font-semibold mb-2">Full Comment</h3>
-            <p>{selectedComment}</p>
-            <button
-              onClick={() => setSelectedComment(null)}
-              className="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      )}
+      {/* View Modal */}
+      <Modal
+        isOpen={!!selectedComment}
+        title="Full Comment"
+        onClose={() => setSelectedComment(null)}
+      >
+        <p>{selectedComment}</p>
+      </Modal>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        isOpen={!!deleteTarget}
+        title="Delete Feedback"
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={() => handleDelete(deleteTarget?.id)}
+        confirmText="Delete"
+        confirmVariant="danger"
+      >
+        <p>
+          Are you sure you want to delete this feedback? This action cannot be
+          undone.
+        </p>
+      </Modal>
     </div>
   );
-
 }
 
 
-
 // "use client";
 
 // import { useState } from "react";

web/src/components/admin/ClientLayout.tsx

@@ -176,10 +176,10 @@ const collections = (
     name: "Document Management",
     items: document_management_items(),
   },
-  // {
-  //   name: "Feedback From User",
-  //   items: chat_feedback_from_users(),
-  // },
+  {
+    name: "Feedback From User",
+    items: chat_feedback_from_users(),
+  },
   {
     name: "Custom Assistants",
     items: custom_assistants_items(isCurator, enableEnterprise),