From 0bd2efdf4896646b164da1c3352cd41ce12e30c6 Mon Sep 17 00:00:00 2001 From: ayo-ola0710 Date: Mon, 24 Mar 2025 16:26:19 +0100 Subject: [PATCH 1/4] feat/implement sopport page for maintainer --- public/svg/add.svg | 7 ++ public/svg/filter.svg | 7 ++ public/svg/question.svg | 7 ++ public/svg/view.svg | 7 ++ .../components/AdminDashboardHeader.tsx | 31 ++++-- .../components/SupportAddQuestion.tsx | 90 +++++++++++++++ .../components/SupportEditQuestion.tsx | 90 +++++++++++++++ .../components/SupportFaqs.tsx | 103 ++++++++++++++++++ .../components/SupportQuickAction.tsx | 40 +++++++ .../components/SupportReply.tsx | 78 +++++++++++++ .../components/SupportSearchBar.tsx | 35 ++++++ .../components/SupportStatCard.tsx | 55 ++++++++++ .../components/SupportTicket.tsx | 73 +++++++++++++ .../SupportTicketDetailAnswered.tsx | 82 ++++++++++++++ .../SupportTicketDetailUnanswered.tsx | 80 ++++++++++++++ src/app/admin-dashboard/support/page.tsx | 17 ++- 16 files changed, 793 insertions(+), 9 deletions(-) create mode 100644 public/svg/add.svg create mode 100644 public/svg/filter.svg create mode 100644 public/svg/question.svg create mode 100644 public/svg/view.svg create mode 100644 src/app/admin-dashboard/components/SupportAddQuestion.tsx create mode 100644 src/app/admin-dashboard/components/SupportEditQuestion.tsx create mode 100644 src/app/admin-dashboard/components/SupportFaqs.tsx create mode 100644 src/app/admin-dashboard/components/SupportQuickAction.tsx create mode 100644 src/app/admin-dashboard/components/SupportReply.tsx create mode 100644 src/app/admin-dashboard/components/SupportSearchBar.tsx create mode 100644 src/app/admin-dashboard/components/SupportStatCard.tsx create mode 100644 src/app/admin-dashboard/components/SupportTicket.tsx create mode 100644 src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx create mode 100644 src/app/admin-dashboard/components/SupportTicketDetailUnanswered.tsx 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..5bd467a 100644 --- a/src/app/admin-dashboard/components/AdminDashboardHeader.tsx +++ b/src/app/admin-dashboard/components/AdminDashboardHeader.tsx @@ -1,10 +1,12 @@ +"use client"; + import React 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"; export default function AdminDashboardHeader({ sidebarOpen, @@ -13,17 +15,31 @@ export default function AdminDashboardHeader({ sidebarOpen: boolean; setSidebarOpen: any; }) { + const pathname = usePathname(); + + const normalizedPathname = pathname.endsWith("/") + ? pathname.slice(0, -1) + : pathname; + + const pageTitles: { [key: string]: string } = { + "/admin-dashboard": "Dashboard", + "/admin-dashboard/support": "Support", + "/admin-dashboard/plans": "Plans", + "/admin-dashboard/claims": "Claims", + }; + + const pageTitle = pageTitles[normalizedPathname] || "Dashboard"; return (
-

Dashboard

+

{pageTitle}

-
+
Notification @@ -35,14 +51,13 @@ 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..aee4ecc --- /dev/null +++ b/src/app/admin-dashboard/components/SupportAddQuestion.tsx @@ -0,0 +1,90 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { CheckCircle } from "lucide-react"; + +export default function AddQuestionModal({ isOpen, setIsOpen }) { + const [isAddingQuestion, setIsAddingQuestion] = useState(true); + const [isConfirmationVisible, setIsConfirmationVisible] = useState(false); + + useEffect(() => { + const handleKeyDown = (event) => { + 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..f3ddfff --- /dev/null +++ b/src/app/admin-dashboard/components/SupportEditQuestion.tsx @@ -0,0 +1,90 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { CheckCircle } from "lucide-react"; + +export default function SupportEditQuestion({ isOpen, setIsOpen, questionData }) { + 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" + /> + + + + + + +
+ + + )} + + {status === "sent" && ( + <> +
+ +

Reply Sent

+

Message sent to user's email address. Please continue discussion or
settle disputes in mailbox.

+ +
+ + )} + + {status === "deleted" && ( + <> +
+ +

Delete Successful

+

Question deleted successfully.

+ +
+ + )} +
+ + ); +} diff --git a/src/app/admin-dashboard/components/SupportSearchBar.tsx b/src/app/admin-dashboard/components/SupportSearchBar.tsx new file mode 100644 index 0000000..0787189 --- /dev/null +++ b/src/app/admin-dashboard/components/SupportSearchBar.tsx @@ -0,0 +1,35 @@ +import Image from "next/image"; +import { Search, Download } from "lucide-react"; + +export default function SearchBar() { + return ( +
+ + {/* Search Bar */} +
+ + + +
+ + {/* Actions: Download CSV & Filter */} +
+ + +
+ +
+ ); +} diff --git a/src/app/admin-dashboard/components/SupportStatCard.tsx b/src/app/admin-dashboard/components/SupportStatCard.tsx new file mode 100644 index 0000000..ea8a12b --- /dev/null +++ b/src/app/admin-dashboard/components/SupportStatCard.tsx @@ -0,0 +1,55 @@ +import Image from "next/image"; + +interface Stat { + icon: string; + label: string; + value: string; +} + +const stats: Stat[] = [ + { + icon: "/svg/ticket.svg", + label: "Total Support Tickets", + value: "58", + }, + { + icon: "/svg/ticket.svg", + label: "Unanswered Support Tickets", + value: "45", + }, + { + icon: "/svg/question.svg", + label: "Total FAQs ", + value: "28", + }, +]; + +const SupportStatCard = () => { + return ( +
+ {stats.map((stat, index) => ( +
+
+
+ {`${stat.label} +
+
+
+ {stat.label} +

{stat.value}

+
+
+ ))} +
+ ); +}; + +export default SupportStatCard; diff --git a/src/app/admin-dashboard/components/SupportTicket.tsx b/src/app/admin-dashboard/components/SupportTicket.tsx new file mode 100644 index 0000000..bfb5514 --- /dev/null +++ b/src/app/admin-dashboard/components/SupportTicket.tsx @@ -0,0 +1,73 @@ +"use client"; + +import { useState } from "react"; +import { ChevronDown } from "lucide-react"; +import SupportTicketDetailUnanswered from "../components/SupportTicketDetailUnanswered"; +import SupportTicketDetailAnswered from "../components/SupportTicketDetailAnswered"; + +export default function SupportTicket() { + const [selectedTicket, setSelectedTicket] = useState(null); + + return ( +
+
+
+

Support Tickets

+
+

View All Tickets

+ +
+
+ +
+ + + + + + + + + + + + + {[ + { date: "24 - 01 - 2025", id: "24224", email: "danielochoja@gmail.com", subject: "Inheritance", status: "Answered" }, + { date: "24 - 01 - 2025", id: "34263", email: "daviechoe@inherix.com", subject: "Claims", status: "Answered" }, + { date: "24 - 01 - 2025", id: "35521", email: "nazried@jaspertech.org", subject: "Assets", status: "Unanswered" } + ].map(ticket => ( + + + + + + + + + ))} + +
DateTicket IDEmailSubjectStatusAction
{ticket.date}{ticket.id}{ticket.email}{ticket.subject}{ticket.status} + +
+
+
+ + {/* Ticket Details Modal - Render based on status */} + {selectedTicket && ( + selectedTicket.status === "Answered" ? + setSelectedTicket(null)} /> + : + setSelectedTicket(null)} /> + )} +
+ ); +} diff --git a/src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx b/src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx new file mode 100644 index 0000000..a89c79a --- /dev/null +++ b/src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx @@ -0,0 +1,82 @@ +import { useState } from "react"; +import { FileText, Link } from "lucide-react"; +import SupportReply from "../components/SupportReply"; + +export default function SupportTicketDetailsAnswered({ ticket, onClose }) { + const [isReplyOpen, setIsReplyOpen] = useState(false); + + if (!ticket) { + return null; + } + + const defaultUserId = "12345"; + const defaultDescription = `For some reason, I can't create an inheritance plan. + How do I go about this? I want to leave a huge sum of money for my daughter.`; + const defaultAttachments = ["Screenshot23422332", "Screenshot23422332"]; + + if (isReplyOpen) { + return setIsReplyOpen(false)} />; + } + + + return ( +
+
+

Ticket Details

+ +
+ + + + + + + +
+ Attachment(s) +
+ {ticket.attachments && ticket.attachments.length > 0 + ? ticket.attachments.map((file, index) => ) + : defaultAttachments.map((file, index) => )} +
+
+
+ +
+ + +
+
+ + {/* Reply Modal */} + setIsReplyOpen(false)} /> +
+ ); +} + +const TicketRow = ({ label, value, multiLine }) => ( +
+ {label} + {value} +
+); + +const Attachment = ({ fileName }) => ( +
+
+ + {fileName} +
+ + Preview + + +
+); diff --git a/src/app/admin-dashboard/components/SupportTicketDetailUnanswered.tsx b/src/app/admin-dashboard/components/SupportTicketDetailUnanswered.tsx new file mode 100644 index 0000000..69521f4 --- /dev/null +++ b/src/app/admin-dashboard/components/SupportTicketDetailUnanswered.tsx @@ -0,0 +1,80 @@ +import { useState } from "react"; +import { FileText, Link } from "lucide-react"; +import SupportReply from "../components/SupportReply"; + +export default function SupportTicketDetailsUnanswered({ ticket, onClose }) { + const [isReplyOpen, setIsReplyOpen] = useState(false); + + if (!ticket) { + return null; + } + + const defaultUserId = "12345"; + const defaultDescription = `For some reason, I can't create an inheritance plan. + How do I go about this? I want to leave a huge sum of money for my daughter.`; + const defaultAttachments = ["Screenshot23422332", "Screenshot23422332"]; + + if (isReplyOpen) { + return setIsReplyOpen(false)} />; + } + + + return ( +
+
+

Ticket Details

+ +
+ + + + + + + +
+ Attachment(s) +
+ {ticket.attachments && ticket.attachments.length > 0 + ? ticket.attachments.map((file, index) => ) + : defaultAttachments.map((file, index) => )} +
+
+
+ +
+ + + +
+
+
+ ); + } + +const TicketRow = ({ label, value, multiLine }) => ( +
+ {label} + {value} +
+); + +const Attachment = ({ fileName }) => ( +
+
+ + {fileName} +
+ + Preview + + +
+); diff --git a/src/app/admin-dashboard/support/page.tsx b/src/app/admin-dashboard/support/page.tsx index 8240494..7204a90 100644 --- a/src/app/admin-dashboard/support/page.tsx +++ b/src/app/admin-dashboard/support/page.tsx @@ -1,7 +1,22 @@ import React from 'react' +import SupportStatCard from "../components/SupportStatCard" +import SupportQuickAction from '../components/SupportQuickAction' +import SupportSearchBar from "../components/SupportSearchBar" +import SupportTicket from '../components/SupportTicket' +import SupportFaqs from '../components/SupportFaqs' export default function support() { return ( -
support
+ <> + + + + + + + + + + ) } From 959f0180413968421f6423d38cab520d0f5e735e Mon Sep 17 00:00:00 2001 From: ayo-ola0710 Date: Mon, 24 Mar 2025 17:23:27 +0100 Subject: [PATCH 2/4] fixed issue --- .../components/SupportAddQuestion.tsx | 9 +- .../components/SupportEditQuestion.tsx | 14 +- .../components/SupportFaqs.tsx | 19 ++- .../components/SupportReply.tsx | 70 +++++----- .../components/SupportSearchBar.tsx | 3 - .../components/SupportTicket.tsx | 24 +++- .../SupportTicketDetailAnswered.tsx | 56 ++++++-- .../SupportTicketDetailUnanswered.tsx | 120 ++++++++++-------- 8 files changed, 202 insertions(+), 113 deletions(-) diff --git a/src/app/admin-dashboard/components/SupportAddQuestion.tsx b/src/app/admin-dashboard/components/SupportAddQuestion.tsx index aee4ecc..6078a61 100644 --- a/src/app/admin-dashboard/components/SupportAddQuestion.tsx +++ b/src/app/admin-dashboard/components/SupportAddQuestion.tsx @@ -3,12 +3,17 @@ import { useState, useEffect } from "react"; import { CheckCircle } from "lucide-react"; -export default function AddQuestionModal({ isOpen, setIsOpen }) { +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) => { + const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") setIsOpen(false); }; document.addEventListener("keydown", handleKeyDown); diff --git a/src/app/admin-dashboard/components/SupportEditQuestion.tsx b/src/app/admin-dashboard/components/SupportEditQuestion.tsx index f3ddfff..e942626 100644 --- a/src/app/admin-dashboard/components/SupportEditQuestion.tsx +++ b/src/app/admin-dashboard/components/SupportEditQuestion.tsx @@ -3,7 +3,19 @@ import { useEffect, useState } from "react"; import { CheckCircle } from "lucide-react"; -export default function SupportEditQuestion({ isOpen, setIsOpen, questionData }) { +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 || ""); diff --git a/src/app/admin-dashboard/components/SupportFaqs.tsx b/src/app/admin-dashboard/components/SupportFaqs.tsx index 723740f..b17a292 100644 --- a/src/app/admin-dashboard/components/SupportFaqs.tsx +++ b/src/app/admin-dashboard/components/SupportFaqs.tsx @@ -6,25 +6,32 @@ import { ChevronDown } from "lucide-react"; import SupportAddQuestion from "../components/SupportAddQuestion"; import SupportEditQuestion from "../components/SupportEditQuestion"; +interface FAQ { + question: string; + answer: string; + category: string; +} + export default function SupportFaqs() { const [isAddOpen, setIsAddOpen] = useState(false); const [isEditOpen, setIsEditOpen] = useState(false); - const [selectedQuestion, setSelectedQuestion] = useState(null); + const [selectedQuestion, setSelectedQuestion] = useState(undefined); + - const faqs = [ + const faqs: FAQ[] = [ { question: "How Secure is the Platform?", - answer: `InheritX ensures top-tier security with multi-signature validation, time-locked smart contracts, and zero-knowledge proofs for privacy. We conduct regular thrid-party audits, sopport hardware wallet intergration, and use advanced encryption to protect users assests `, + answer: `InheritX ensures top-tier security with multi-signature validation, time-locked smart contracts, and zero-knowledge proofs for privacy. We conduct regular third-party audits, support hardware wallet integration, and use advanced encryption to protect users' assets.`, category: "Security", }, { - question: "What makes InheritX different form traditional inheritance platforms?", - answer: `InheritX leverages blockchain technology to ensure automated execution of inheritance plans through smart contracts, eliminating the need for intermidaries while maintaining decentralized security. Our platform provides transparent verification of inheritance conditions, enabling beneficaries to access assets with complete trust. Additionally, immutable record-keeping ensures that all transactions and inheritance plans remain tamper-proof and permanently verfiable on the blockchain.`, + question: "What makes InheritX different from traditional inheritance platforms?", + answer: `InheritX leverages blockchain technology to ensure automated execution of inheritance plans through smart contracts, eliminating the need for intermediaries while maintaining decentralized security. Our platform provides transparent verification of inheritance conditions, enabling beneficiaries to access assets with complete trust. Additionally, immutable record-keeping ensures that all transactions and inheritance plans remain tamper-proof and permanently verifiable on the blockchain.`, category: "Security", }, ]; - const handleEditClick = (faq) => { + const handleEditClick = (faq: FAQ) => { setSelectedQuestion(faq); setIsEditOpen(true); }; diff --git a/src/app/admin-dashboard/components/SupportReply.tsx b/src/app/admin-dashboard/components/SupportReply.tsx index 15cfe69..5774766 100644 --- a/src/app/admin-dashboard/components/SupportReply.tsx +++ b/src/app/admin-dashboard/components/SupportReply.tsx @@ -1,17 +1,25 @@ import { useState } from "react"; import { CheckCircle } from "lucide-react"; -export default function ReplyModal({ isOpen, onClose }) { - const [status, setStatus] = useState("reply"); +interface ReplyModalProps { + isOpen: boolean; + onClose: () => void; +} + +export default function ReplyModal({ isOpen, onClose }: ReplyModalProps) { + const [status, setStatus] = useState<"reply" | "sent" | "deleted">("reply"); if (!isOpen) return null; return (
-
+
{status === "reply" && ( - )} @@ -29,8 +37,8 @@ export default function ReplyModal({ isOpen, onClose }) { + placeholder="Send Message" + />
-
- +
+ +

Reply Sent

+

+ Message sent to user's email address. Please continue discussion or
settle disputes in mailbox. +

+ +
)} {status === "deleted" && ( - <> -
- -

Delete Successful

-

Question deleted successfully.

- -
- +
+ +

Delete Successful

+

Question deleted successfully.

+ +
)}
diff --git a/src/app/admin-dashboard/components/SupportSearchBar.tsx b/src/app/admin-dashboard/components/SupportSearchBar.tsx index 0787189..9b00bd3 100644 --- a/src/app/admin-dashboard/components/SupportSearchBar.tsx +++ b/src/app/admin-dashboard/components/SupportSearchBar.tsx @@ -5,7 +5,6 @@ export default function SearchBar() { return (
- {/* Search Bar */}
- {/* Actions: Download CSV & Filter */}
-
); } diff --git a/src/app/admin-dashboard/components/SupportTicket.tsx b/src/app/admin-dashboard/components/SupportTicket.tsx index bfb5514..6ed0d31 100644 --- a/src/app/admin-dashboard/components/SupportTicket.tsx +++ b/src/app/admin-dashboard/components/SupportTicket.tsx @@ -5,8 +5,20 @@ import { ChevronDown } from "lucide-react"; import SupportTicketDetailUnanswered from "../components/SupportTicketDetailUnanswered"; import SupportTicketDetailAnswered from "../components/SupportTicketDetailAnswered"; +interface SupportTicketType { + date: string; + id: string; + email: string; + subject: string; + status: string; + userId: string; + description: string; + attachments: string[]; +} + export default function SupportTicket() { - const [selectedTicket, setSelectedTicket] = useState(null); + + const [selectedTicket, setSelectedTicket] = useState(null); return (
@@ -47,9 +59,15 @@ export default function SupportTicket() { diff --git a/src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx b/src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx index a89c79a..d73f4d5 100644 --- a/src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx +++ b/src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx @@ -1,24 +1,40 @@ +"use client"; + import { useState } from "react"; import { FileText, Link } from "lucide-react"; -import SupportReply from "../components/SupportReply"; +import SupportReply from "../components/SupportReply"; + +interface SupportTicketType { + id: string; + userId?: string; + subject: string; + email: string; + status: string; + description?: string; + attachments?: string[]; +} -export default function SupportTicketDetailsAnswered({ ticket, onClose }) { - const [isReplyOpen, setIsReplyOpen] = useState(false); +interface SupportTicketDetailsAnsweredProps { + ticket: SupportTicketType; + onClose: () => void; +} + +export default function SupportTicketDetailsAnswered({ ticket, onClose }: SupportTicketDetailsAnsweredProps) { + const [isReplyOpen, setIsReplyOpen] = useState(false); if (!ticket) { - return null; + return null; } - const defaultUserId = "12345"; + const defaultUserId = "12345"; const defaultDescription = `For some reason, I can't create an inheritance plan. - How do I go about this? I want to leave a huge sum of money for my daughter.`; - const defaultAttachments = ["Screenshot23422332", "Screenshot23422332"]; + How do I go about this? I want to leave a huge sum of money for my daughter.`; + const defaultAttachments = ["Screenshot23422332", "Screenshot23422332"]; if (isReplyOpen) { return setIsReplyOpen(false)} />; } - return (
@@ -43,32 +59,44 @@ export default function SupportTicketDetailsAnswered({ ticket, onClose }) {
- -
- {/* Reply Modal */} setIsReplyOpen(false)} />
); } -const TicketRow = ({ label, value, multiLine }) => ( +interface TicketRowProps { + label: string; + value: string; + multiLine?: boolean; +} + +const TicketRow = ({ label, value, multiLine }: TicketRowProps) => (
{label} {value}
); -const Attachment = ({ fileName }) => ( +interface AttachmentProps { + fileName: string; +} + +const Attachment = ({ fileName }: AttachmentProps) => (
diff --git a/src/app/admin-dashboard/components/SupportTicketDetailUnanswered.tsx b/src/app/admin-dashboard/components/SupportTicketDetailUnanswered.tsx index 69521f4..48604fb 100644 --- a/src/app/admin-dashboard/components/SupportTicketDetailUnanswered.tsx +++ b/src/app/admin-dashboard/components/SupportTicketDetailUnanswered.tsx @@ -2,71 +2,87 @@ import { useState } from "react"; import { FileText, Link } from "lucide-react"; import SupportReply from "../components/SupportReply"; -export default function SupportTicketDetailsUnanswered({ ticket, onClose }) { - const [isReplyOpen, setIsReplyOpen] = useState(false); +interface SupportTicket { + id: string; + userId: string; + subject: string; + email: string; + status: string; + description: string; + attachments: string[]; +} - if (!ticket) { - return null; - } - - const defaultUserId = "12345"; - const defaultDescription = `For some reason, I can't create an inheritance plan. - How do I go about this? I want to leave a huge sum of money for my daughter.`; - const defaultAttachments = ["Screenshot23422332", "Screenshot23422332"]; - - if (isReplyOpen) { - return setIsReplyOpen(false)} />; - } +interface Props { + ticket: SupportTicket; + onClose: () => void; +} +export default function SupportTicketDetailsUnanswered({ ticket, onClose }: Props) { + const [isReplyOpen, setIsReplyOpen] = useState(false); - return ( -
-
-

Ticket Details

- -
- - - - - - - -
- Attachment(s) -
- {ticket.attachments && ticket.attachments.length > 0 - ? ticket.attachments.map((file, index) => ) - : defaultAttachments.map((file, index) => )} -
+ if (!ticket) { + return null; + } + + const defaultUserId = "12345"; + const defaultDescription = `For some reason, I can't create an inheritance plan. + How do I go about this? I want to leave a huge sum of money for my daughter.`; + const defaultAttachments = ["Screenshot23422332", "Screenshot23422332"]; + + if (isReplyOpen) { + return setIsReplyOpen(false)} />; + } + + return ( +
+
+

Ticket Details

+ +
+ + + + + + + +
+ Attachment(s) +
+ {ticket.attachments && ticket.attachments.length > 0 + ? ticket.attachments.map((file, index) => ) + : defaultAttachments.map((file, index) => )}
- -
- - - -
+
+ +
+ + +
- ); - } - -const TicketRow = ({ label, value, multiLine }) => ( +
+ ); +} + +const TicketRow = ({ label, value, multiLine }: { label: string; value: string; multiLine?: boolean }) => (
{label} {value}
); -const Attachment = ({ fileName }) => ( +const Attachment = ({ fileName }: { fileName: string }) => (
From fe979f2247979e23109b92daa78b481161fad30e Mon Sep 17 00:00:00 2001 From: ayo-ola0710 Date: Thu, 27 Mar 2025 09:53:41 +0100 Subject: [PATCH 3/4] resolved conflict --- .../components/AdminDashboardHeader.tsx | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/src/app/admin-dashboard/components/AdminDashboardHeader.tsx b/src/app/admin-dashboard/components/AdminDashboardHeader.tsx index 5bd467a..319f60c 100644 --- a/src/app/admin-dashboard/components/AdminDashboardHeader.tsx +++ b/src/app/admin-dashboard/components/AdminDashboardHeader.tsx @@ -1,6 +1,5 @@ "use client"; - -import React from "react"; +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"; @@ -8,6 +7,13 @@ import { Menu, Plus } from "lucide-react"; import Image from "next/image"; 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, setSidebarOpen, @@ -17,22 +23,17 @@ export default function AdminDashboardHeader({ }) { const pathname = usePathname(); - const normalizedPathname = pathname.endsWith("/") - ? pathname.slice(0, -1) - : pathname; + const [currentPage, setCurrentPage] = useState("Dashboard"); - const pageTitles: { [key: string]: string } = { - "/admin-dashboard": "Dashboard", - "/admin-dashboard/support": "Support", - "/admin-dashboard/plans": "Plans", - "/admin-dashboard/claims": "Claims", - }; - - const pageTitle = pageTitles[normalizedPathname] || "Dashboard"; + useEffect(() => { + const matchedPage = + navItems.find((item) => pathname === item.href)?.label || "Dashboard"; + setCurrentPage(matchedPage); + }, [pathname]); return (
-

{pageTitle}

+

{currentPage}

- -
From 82d1d09ac26ebf8796f659aab41e6271937b8439 Mon Sep 17 00:00:00 2001 From: ayo-ola0710 Date: Thu, 27 Mar 2025 10:00:03 +0100 Subject: [PATCH 4/4] resolved conflict --- src/app/admin-dashboard/components/AdminDashboardHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/admin-dashboard/components/AdminDashboardHeader.tsx b/src/app/admin-dashboard/components/AdminDashboardHeader.tsx index 319f60c..d57ff33 100644 --- a/src/app/admin-dashboard/components/AdminDashboardHeader.tsx +++ b/src/app/admin-dashboard/components/AdminDashboardHeader.tsx @@ -1,4 +1,5 @@ "use client"; + import React, { useEffect, useState } from "react"; import Notification from "../../../../public/svg/notification.svg"; import Avatar from "../../../../public/svg/Avatar.svg"; @@ -22,7 +23,6 @@ export default function AdminDashboardHeader({ setSidebarOpen: any; }) { const pathname = usePathname(); - const [currentPage, setCurrentPage] = useState("Dashboard"); useEffect(() => {