diff --git a/public/svg/add.svg b/public/svg/add.svg new file mode 100644 index 0000000..ae9028f --- /dev/null +++ b/public/svg/add.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/svg/filter.svg b/public/svg/filter.svg new file mode 100644 index 0000000..288df85 --- /dev/null +++ b/public/svg/filter.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/svg/question.svg b/public/svg/question.svg new file mode 100644 index 0000000..7a11239 --- /dev/null +++ b/public/svg/question.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/svg/view.svg b/public/svg/view.svg new file mode 100644 index 0000000..acb9f0e --- /dev/null +++ b/public/svg/view.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/app/admin-dashboard/components/AdminDashboardHeader.tsx b/src/app/admin-dashboard/components/AdminDashboardHeader.tsx index 096e8f9..d57ff33 100644 --- a/src/app/admin-dashboard/components/AdminDashboardHeader.tsx +++ b/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 (
-

Dashboard

+

{currentPage}

-
+
Notification @@ -35,14 +52,15 @@ export default function AdminDashboardHeader({ className="rounded-full" alt="Avatar" /> - - Not Connected - + Not Connected
-
diff --git a/src/app/admin-dashboard/components/SupportAddQuestion.tsx b/src/app/admin-dashboard/components/SupportAddQuestion.tsx new file mode 100644 index 0000000..6078a61 --- /dev/null +++ b/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 ( +
+
+ + + + {isAddingQuestion ? ( + <> +

Add Question

+ +
+ + + + + + + + +
+ + + + ) : isConfirmationVisible ? ( +
+ +

Question Added

+

+ Question Added Sucessfully +

+ +
+ ) : null} +
+
+ ); +} diff --git a/src/app/admin-dashboard/components/SupportEditQuestion.tsx b/src/app/admin-dashboard/components/SupportEditQuestion.tsx new file mode 100644 index 0000000..e942626 --- /dev/null +++ b/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 ( +
+
+ {isSuccess ? ( +
+ +

Changes Saved

+

Question Edited successfully.

+ +
+ ) : ( + <> + +

Edit Question

+ + + setQuestion(e.target.value)} + className="w-full p-2 rounded-xl bg-[#21202A] border border-[#D9D9DD] text-white mb-4 outline-none" + /> + + + + + +