feat/implement sopport page for maintainer

src/app/admin-dashboard/components/AdminDashboardHeader.tsx

@@ -1,10 +1,19 @@
-import React from "react";
+"use client";
+
+import React, { useEffect, useState } from "react";
 import Notification from "../../../../public/svg/notification.svg";
 import Avatar from "../../../../public/svg/Avatar.svg";
 import { MdOutlineKeyboardArrowDown } from "react-icons/md";
 import { Menu, Plus } from "lucide-react";
 import Image from "next/image";
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
+
+const navItems = [
+  { href: "/admin-dashboard", label: "Dashboard" },
+  { href: "/admin-dashboard/plans", label: "Inheritance Plans" },
+  { href: "/admin-dashboard/claims", label: "Claims" },
+  { href: "/admin-dashboard/support", label: "Support" },
+];
 
 export default function AdminDashboardHeader({
   sidebarOpen,
@@ -13,17 +22,25 @@ export default function AdminDashboardHeader({
   sidebarOpen: boolean;
   setSidebarOpen: any;
 }) {
+  const pathname = usePathname();
+  const [currentPage, setCurrentPage] = useState("Dashboard");
+
+  useEffect(() => {
+    const matchedPage =
+      navItems.find((item) => pathname === item.href)?.label || "Dashboard";
+    setCurrentPage(matchedPage);
+  }, [pathname]);
 
   return (
     <header className="flex justify-between items-center p-6">
-      <h1 className="lg:text-3xl text-2xl font-semibold">Dashboard</h1>
+      <h1 className="lg:text-3xl text-2xl font-semibold">{currentPage}</h1>
 
-      <div className=" flex items-center gap-4 ">
+      <div className="flex items-center gap-4">
         <Image
           src={Notification}
           width={40}
           height={40}
-          className="text-white cursor-pointer "
+          className="text-white cursor-pointer"
           alt="Notification"
         />
 
@@ -35,14 +52,15 @@ export default function AdminDashboardHeader({
             className="rounded-full"
             alt="Avatar"
           />
-          <span className="lg:text-sm text-xs text-[#F3F5FF]">
-            Not Connected
-          </span>
+          <span className="lg:text-sm text-xs text-[#F3F5FF]">Not Connected</span>
           <Plus />
           <MdOutlineKeyboardArrowDown />
         </div>
-        <button className="md:hidden" onClick={() => setSidebarOpen(!sidebarOpen)}>
-          <Menu  />
+        <button
+          className="md:hidden"
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+        >
+          <Menu />
         </button>
       </div>
     </header>

src/app/admin-dashboard/components/SupportAddQuestion.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { CheckCircle } from "lucide-react";
+
+interface AddQuestionModalProps {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+}
+
+export default function AddQuestionModal({ isOpen, setIsOpen }: AddQuestionModalProps) {
+  const [isAddingQuestion, setIsAddingQuestion] = useState(true); 
+  const [isConfirmationVisible, setIsConfirmationVisible] = useState(false); 
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [setIsOpen]);
+
+  if (!isOpen) return null;
+
+  const handleApplyChanges = () => {
+    setIsAddingQuestion(false); 
+    setIsConfirmationVisible(true); 
+
+    setTimeout(() => {
+      setIsOpen(false);
+      setIsAddingQuestion(true); 
+      setIsConfirmationVisible(false);
+    }, 15000);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-[#21202A] p-8 rounded-3xl max-w-xl w-full text-white border border-[#615F71]">
+
+        <button onClick={() => setIsOpen(false)} className="text-gray-400 text-xl hover:text-white">
+          &larr; Go Back
+        </button>
+
+        {isAddingQuestion ? (
+          <>
+            <h2 className="text-3xl font-bold text-center mt-5">Add Question</h2>
+
+            <div className="mt-4">
+              <label className="block text-sm">Question</label>
+              <input 
+                type="text" 
+                className="w-full p-3 mt-1 text-sm bg-[#2B2A38] border border-[#D9D9DD] rounded-md outline-none" 
+                placeholder="Enter your question"
+              />
+
+              <label className="block mt-3 text-sm">Category</label>
+              <select className="w-full p-3 mt-1 text-sm bg-[#2B2A38] border border-[#D9D9DD] rounded-md outline-none">
+                <option>Security</option>
+                <option>Account</option>
+                <option>Billing</option>
+              </select>
+
+              <label className="block mt-3 text-sm">Answer</label>
+              <textarea 
+                className="w-full p-2 mt-1 bg-[#2B2A38] text-sm border border-[#D9D9DD] rounded-md h-28 outline-none"
+                placeholder="Enter your answer"
+              ></textarea>
+            </div>
+
+            <button 
+              onClick={handleApplyChanges} 
+              className="mt-4 lg:w-[35%] bg-[#1B0055] px-6 py-2 border border-[#C0BFC6] rounded-2xl hover:bg-[#290080a4]"
+            >
+              Apply Changes
+            </button>
+          </>
+        ) : isConfirmationVisible ? (
+          <div className="flex flex-col items-center justify-center h-full">
+            <CheckCircle className="text-green-500 w-28 h-28" />
+            <h2 className="text-4xl font-bold mt-4">Question Added</h2>
+            <p className="text-center text-sm mt-4">
+              Question Added Sucessfully
+            </p>
+            <button 
+              onClick={() => setIsOpen(false)} 
+              className="mt-4 bg-white text-black px-10 py-2 rounded-2xl hover:bg-zinc-300"
+            >
+              Close
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

src/app/admin-dashboard/components/SupportEditQuestion.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { CheckCircle } from "lucide-react";
+
+interface QuestionData {
+  question: string;
+  answer: string;
+  category: string;
+}
+
+interface SupportEditQuestionProps {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+  questionData?: QuestionData; 
+}
+
+export default function SupportEditQuestion({ isOpen, setIsOpen, questionData }: SupportEditQuestionProps) {
+  const [question, setQuestion] = useState(questionData?.question || "");
+  const [answer, setAnswer] = useState(questionData?.answer || "");
+  const [category, setCategory] = useState(questionData?.category || "");
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  useEffect(() => {
+    if (questionData) {
+      setQuestion(questionData.question);
+      setAnswer(questionData.answer);
+      setCategory(questionData.category);
+    }
+  }, [questionData]);
+
+  const handleApplyChanges = () => {
+    setIsSuccess(true);
+
+    setTimeout(() => {
+      setIsOpen(false);
+      setIsSuccess(false);
+    }, 10000);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-[#21202A] p-6 rounded-lg max-w-2xl shadow-lg w-full border border-[#615F71]">
+        {isSuccess ? (
+          <div className="flex flex-col items-center justify-center h-full py-20 rounded-xl">
+            <CheckCircle className="text-green-500 w-28 h-28" />
+            <h2 className="text-4xl font-bold mt-4">Changes Saved</h2>
+            <p className="text-center text-sm mt-4">Question Edited successfully.</p>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="mt-4 bg-white text-black px-10 py-2 rounded-2xl hover:bg-zinc-300"
+            >
+              Close
+            </button>
+          </div>
+        ) : (
+          <>
+            <button onClick={() => setIsOpen(false)} className="text-white mb-4 text-xl">
+              ← Go Back
+            </button>
+            <h2 className="text-3xl font-bold mb-4 text-center">Edit Question</h2>
+
+            <label className="block mb-2 text-white">Question</label>
+            <input
+              type="text"
+              value={question}
+              onChange={(e) => setQuestion(e.target.value)}
+              className="w-full p-2 rounded-xl bg-[#21202A] border border-[#D9D9DD] text-white mb-4 outline-none"
+            />
+
+            <label className="block mb-2 text-white">Category</label>
+            <select
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              className="w-full p-2 rounded-xl bg-[#21202A] border border-[#D9D9DD] text-white mb-4 outline-none"
+            >
+              <option value="Security">Security</option>
+              <option value="General">General</option>
+              <option value="Technical">Technical</option>
+            </select>
+
+            <label className="block mb-2 text-white">Answer</label>
+            <textarea
+              value={answer}
+              onChange={(e) => setAnswer(e.target.value)}
+              className="w-full p-2 rounded-xl bg-[#21202A] border border-[#D9D9DD] text-white mb-4 pb-16 outline-none"
+            />
+
+            <button
+              onClick={handleApplyChanges}
+              className="bg-[#1B0055] text-white px-8 py-2 rounded-2xl border border-[#C0BFC6]"
+            >
+              Apply Changes
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}