Add admin dashboard panel to view and manage user feedback

client/src/Style/UserDashboard.css

@@ -1114,4 +1114,89 @@ input:checked + .slider:before {
     flex-direction: column;
     gap: 10px;
   }
-}
+}
+/* ===============================
+   ADMIN FEEDBACK TABLE FIX
+   =============================== */
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  margin-top: 20px;
+}
+
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #0f0f14;
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  table-layout: fixed;
+}
+
+/* Table Head */
+.admin-table thead th {
+  background: #161622;
+  color: #ffffff;
+  font-weight: 600;
+  padding: 14px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  text-align: left;
+  white-space: nowrap;
+}
+
+/* Table Body */
+.admin-table tbody td {
+  padding: 14px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  vertical-align: top;
+  word-wrap: break-word;
+  font-size: 14px;
+}
+
+/* Row hover */
+.admin-table tbody tr:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Column width control */
+.admin-table th:nth-child(1),
+.admin-table td:nth-child(1) {
+  width: 15%;
+}
+
+.admin-table th:nth-child(2),
+.admin-table td:nth-child(2) {
+  width: 22%;
+}
+
+.admin-table th:nth-child(3),
+.admin-table td:nth-child(3) {
+  width: 33%;
+}
+
+.admin-table th:nth-child(4),
+.admin-table td:nth-child(4) {
+  width: 18%;
+}
+
+.admin-table th:nth-child(5),
+.admin-table td:nth-child(5) {
+  width: 12%;
+  text-align: center;
+}
+
+/* Delete button */
+.btn-danger {
+  background: #e63946;
+  color: #fff;
+  border: none;
+  padding: 6px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-danger:hover {
+  background: #d62828;
+}

client/src/components/Dashboard/DashboardSidebar.jsx

@@ -86,6 +86,14 @@ const DashboardSidebar = ({
           <span className="nav-item-icon"><FaCog /></span>
           {!sidebarCollapsed && <span>Settings</span>}
         </button>
+        <button
+          className={`nav-item ${activeTab === 'feedback' ? 'active' : ''}`}
+          onClick={() => setActiveTab('feedback')}
+          data-tooltip="Feedback"
+        >
+          <span className="nav-item-icon"><FaQuestionCircle /></span>
+          {!sidebarCollapsed && <span>Feedback</span>}
+        </button>
       </nav>
 
       {/* Quick Links Section */}

client/src/components/Dashboard/FeedbackTab.jsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { collection, getDocs, deleteDoc, doc } from 'firebase/firestore';
+import { db } from '../../firebase';
+import '../../Style/UserDashboard.css';
+
+const FeedbackTab = () => {
+  const [feedbackList, setFeedbackList] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchFeedback = async () => {
+    try {
+      const querySnapshot = await getDocs(collection(db, 'feedback'));
+      const feedbackData = querySnapshot.docs.map((docSnap) => ({
+        id: docSnap.id,
+        ...docSnap.data(),
+      }));
+      setFeedbackList(feedbackData);
+    } catch (error) {
+      console.error('Error fetching feedback:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchFeedback();
+  }, []);
+
+  const handleDelete = async (id) => {
+    const confirmDelete = window.confirm('Are you sure you want to delete this feedback?');
+    if (!confirmDelete) return;
+
+    try {
+      await deleteDoc(doc(db, 'feedback', id));
+      setFeedbackList((prev) => prev.filter((item) => item.id !== id));
+    } catch (error) {
+      console.error('Error deleting feedback:', error);
+      alert('Failed to delete feedback. Please try again.');
+    }
+  };
+
+  return (
+    <div className="dashboard-section">
+      <h2>User Feedback</h2>
+
+      {loading ? (
+        <p>Loading feedback...</p>
+      ) : feedbackList.length === 0 ? (
+        <p>No feedback submitted yet.</p>
+      ) : (
+        <div className="table-wrapper">
+          <table className="admin-table">
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Email</th>
+                <th>Message</th>
+                <th>Date</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {feedbackList.map((feedback) => (
+                <tr key={feedback.id}>
+                  <td>{feedback.name || 'Anonymous'}</td>
+                  <td>{feedback.email || '-'}</td>
+                  <td>{feedback.message}</td>
+                  <td>
+                    {feedback.createdAt?.seconds
+                      ? new Date(feedback.createdAt.seconds * 1000).toLocaleString()
+                      : '-'}
+                  </td>
+                  <td>
+                    <button
+                      className="btn-danger"
+                      onClick={() => handleDelete(feedback.id)}
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FeedbackTab;

client/src/components/UserDashboard.jsx

@@ -18,6 +18,7 @@ import OverviewTab from './Dashboard/OverviewTab';
 import SnippetsTab from './Dashboard/SnippetsTab';
 import AchievementsTab from './Dashboard/AchievementsTab';
 import SettingsTab from './Dashboard/SettingsTab';
+import FeedbackTab from './Dashboard/FeedbackTab';
 
 /**
  * UserDashboard Component - Comprehensive User Dashboard
@@ -332,6 +333,9 @@ const UserDashboard = () => {
               identityLabel={identityLabel}
             />
           )}
+          {activeTab === 'feedback' && (
+            <FeedbackTab />
+          )}
 
           {/* Placeholder for other tabs */}
           {activeTab === 'coding-stats' && (

client/src/firebase.js

@@ -1,5 +1,6 @@
 // src/firebase.js
 import { initializeApp, getApps } from "firebase/app";
+import { getFirestore } from "firebase/firestore";
 import {
   getAuth,
   GoogleAuthProvider,
@@ -34,13 +35,15 @@ const isFirebaseConfigured = () => {
  */
 let app = null;
 let auth = null;
+let db = null;
 let googleProvider = null;
 let githubProvider = null;
 
 try {
   if (isFirebaseConfigured()) {
     app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
     auth = getAuth(app);
+    db = getFirestore(app);
     googleProvider = new GoogleAuthProvider();
     githubProvider = new GithubAuthProvider();
     googleProvider.setCustomParameters({ prompt: "select_account" });
@@ -53,6 +56,7 @@ try {
 export {
   app,
   auth,
+  db,
   googleProvider,
   githubProvider,
-};
+};