refac: refactor user & admin dashboard

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

@@ -1,12 +1,14 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import Notification from "../../../../public/svg/notification.svg";
-import Avatar from "../../../../public/svg/Avatar.svg";
+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 { usePathname } from "next/navigation";
+import { useAccount, useDisconnect } from "@starknet-react/core";
+import WalletDisconnectModal from "@/components/Wallet-disconnect-modal";
 
 const navItems = [
   { href: "/admin-dashboard", label: "Dashboard" },
@@ -24,13 +26,20 @@ export default function AdminDashboardHeader({
 }) {
   const pathname = usePathname();
   const [currentPage, setCurrentPage] = useState("Dashboard");
+  const { disconnect } = useDisconnect({});
+  const { address } = useAccount();
+  const [isDisconnect, setIsDisconnect] = useState(false);
 
   useEffect(() => {
     const matchedPage =
       navItems.find((item) => pathname === item.href)?.label || "Dashboard";
     setCurrentPage(matchedPage);
   }, [pathname]);
 
+  const handleDisconnect = () => {
+    disconnect();
+  };
+
   return (
     <header className="flex justify-between items-center p-6">
       <h1 className="lg:text-3xl text-2xl font-semibold">{currentPage}</h1>
@@ -44,15 +53,20 @@ export default function AdminDashboardHeader({
           alt="Notification"
         />
 
-        <div className="flex items-center gap-2 hover:bg-[#FFFFFF1A] bg-[#161716] lg:p-2 p-1 rounded-full cursor-pointer border">
+        <div
+          className="flex items-center gap-2 hover:bg-[#FFFFFF1A] bg-[#161716] lg:p-2 p-1 rounded-full cursor-pointer border"
+          onClick={() => setIsDisconnect(!isDisconnect)}
+        >
           <Image
             src={Avatar}
             width={25}
             height={25}
             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]">
+            {address?.slice(0, 6)}....{address?.slice(-4)}
+          </span>
           <Plus />
           <MdOutlineKeyboardArrowDown />
         </div>
@@ -62,6 +76,14 @@ export default function AdminDashboardHeader({
         >
           <Menu />
         </button>
+
+        {isDisconnect && (
+          <WalletDisconnectModal
+            isOpen={true}
+            onClose={() => setIsDisconnect(false)}
+            onDisconnect={handleDisconnect}
+          />
+        )}
       </div>
     </header>
   );

src/app/admin-dashboard/components/AdminDashboardSidebar.tsx → src/app/dashboard/admin/components/AdminDashboardSidebar.tsx

@@ -13,25 +13,25 @@ interface NavItem {
 
 const navItems: NavItem[] = [
   {
-    href: "/admin-dashboard",
+    href: "/dashboard/admin",
     icon: "/svg/dashboardIcon.svg",
     label: "Dashboard",
     id: 1,
   },
   {
-    href: "/admin-dashboard/plans",
+    href: "/dashboard/admin/plans",
     icon: "/svg/plansIcon.svg", // "bg-[#1E0B40] border border-[#807F8D]"
     label: "Plans",
     id: 2,
   },
   {
-    href: "/admin-dashboard/claims",
+    href: "/dashboard/admin/claims",
     icon: "/svg/claimsIcons.svg",
     label: "Claims",
     id: 3,
   },
   {
-    href: "/admin-dashboard/support",
+    href: "/dashboard/admin/support",
     icon: "/svg/supportIcon.svg",
     label: "Support",
     id: 4,

src/app/admin-dashboard/components/SupportFaqs.tsx → src/app/dashboard/admin/components/SupportFaqs.tsx

@@ -3,8 +3,8 @@
 import Image from "next/image";
 import { useState } from "react";
 import { ChevronDown } from "lucide-react";
-import SupportAddQuestion from "../components/SupportAddQuestion"; 
-import SupportEditQuestion from "../components/SupportEditQuestion";
+import SupportAddQuestion from "./SupportAddQuestion";
+import SupportEditQuestion from "./SupportEditQuestion";
 
 interface FAQ {
   question: string;
@@ -15,8 +15,9 @@ interface FAQ {
 export default function SupportFaqs() {
   const [isAddOpen, setIsAddOpen] = useState(false);
   const [isEditOpen, setIsEditOpen] = useState(false);
-  const [selectedQuestion, setSelectedQuestion] = useState<FAQ | undefined>(undefined);
-
+  const [selectedQuestion, setSelectedQuestion] = useState<FAQ | undefined>(
+    undefined
+  );
 
   const faqs: FAQ[] = [
     {
@@ -25,7 +26,8 @@ export default function SupportFaqs() {
       category: "Security",
     },
     {
-      question: "What makes InheritX different from traditional inheritance platforms?",
+      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",
     },
@@ -48,7 +50,12 @@ export default function SupportFaqs() {
         </button>
 
         <button className="text-white hover:text-gray-300 flex items-center">
-          <Image src="/svg/filter.svg" alt="Filter Icon" width={15} height={15} />
+          <Image
+            src="/svg/filter.svg"
+            alt="Filter Icon"
+            width={15}
+            height={15}
+          />
           <p className="ml-2">Security</p>
         </button>
       </div>
@@ -65,9 +72,13 @@ export default function SupportFaqs() {
 
       <div className="bg-[#29242F] bg-[linear-gradient(180deg,rgba(41,36,47,1)_55%,rgba(20,16,26,1)_100%)] rounded-lg p-4 sm:p-6 border border-[#413F54]">
         <div className="flex justify-between">
-          <h2 className="text-xl lg:text-[32px] mb-4 sm:mb-6 font-[400]">FAQs</h2>
+          <h2 className="text-xl lg:text-[32px] mb-4 sm:mb-6 font-[400]">
+            FAQs
+          </h2>
           <div className="flex">
-            <p className="text-[#5000FF] hover:text-[#5100ffb0]">View All Questions</p>
+            <p className="text-[#5000FF] hover:text-[#5100ffb0]">
+              View All Questions
+            </p>
             <ChevronDown className="w-5 h-5 mt-1 ml-1" />
           </div>
         </div>

src/app/admin-dashboard/components/SupportTicket.tsx → src/app/dashboard/admin/components/SupportTicket.tsx

@@ -2,31 +2,35 @@
 
 import { useState } from "react";
 import { ChevronDown } from "lucide-react";
-import SupportTicketDetailUnanswered from "../components/SupportTicketDetailUnanswered";
-import SupportTicketDetailAnswered from "../components/SupportTicketDetailAnswered";
+import SupportTicketDetailUnanswered from "./SupportTicketDetailUnanswered";
+import SupportTicketDetailAnswered from "./SupportTicketDetailAnswered";
 
 interface SupportTicketType {
   date: string;
   id: string;
   email: string;
   subject: string;
   status: string;
-  userId: string; 
-  description: string; 
+  userId: string;
+  description: string;
   attachments: string[];
 }
 
 export default function SupportTicket() {
-
-  const [selectedTicket, setSelectedTicket] = useState<SupportTicketType | null>(null);
+  const [selectedTicket, setSelectedTicket] =
+    useState<SupportTicketType | null>(null);
 
   return (
     <div className="px-4 sm:px-6 mt-10 pb-10">
       <div className="bg-[#29242F] bg-[linear-gradient(180deg,rgba(41,36,47,1)_55%,rgba(20,16,26,1)_100%)] rounded-lg p-4 sm:p-6 border border-[#413F54]">
         <div className="flex justify-between">
-          <h2 className="text-xl lg:text-[32px] mb-4 sm:mb-6 font-[400]">Support Tickets</h2>
+          <h2 className="text-xl lg:text-[32px] mb-4 sm:mb-6 font-[400]">
+            Support Tickets
+          </h2>
           <div className="flex">
-            <p className="text-[#5000FF] hover:text-[#5100ffb0] cursor-pointer">View All Tickets</p>
+            <p className="text-[#5000FF] hover:text-[#5100ffb0] cursor-pointer">
+              View All Tickets
+            </p>
             <ChevronDown className="w-5 h-5 mt-1 ml-1" />
           </div>
         </div>
@@ -45,10 +49,28 @@ export default function SupportTicket() {
             </thead>
             <tbody className="font-light">
               {[
-                { 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 => (
+                {
+                  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) => (
                 <tr key={ticket.id}>
                   <td className="py-3">{ticket.date}</td>
                   <td className="py-3">{ticket.id}</td>
@@ -62,12 +84,11 @@ export default function SupportTicket() {
                         e.preventDefault();
                         setSelectedTicket({
                           ...ticket,
-                          userId: "N/A", 
-                          description: "No description available.", 
-                          attachments: [], 
+                          userId: "N/A",
+                          description: "No description available.",
+                          attachments: [],
                         });
                       }}
-
                     >
                       View
                     </button>
@@ -80,12 +101,18 @@ export default function SupportTicket() {
       </div>
 
       {/* Ticket Details Modal - Render based on status */}
-      {selectedTicket && (
-        selectedTicket.status === "Answered" ? 
-          <SupportTicketDetailAnswered ticket={selectedTicket} onClose={() => setSelectedTicket(null)} /> 
-          : 
-          <SupportTicketDetailUnanswered ticket={selectedTicket} onClose={() => setSelectedTicket(null)} />
-      )}
+      {selectedTicket &&
+        (selectedTicket.status === "Answered" ? (
+          <SupportTicketDetailAnswered
+            ticket={selectedTicket}
+            onClose={() => setSelectedTicket(null)}
+          />
+        ) : (
+          <SupportTicketDetailUnanswered
+            ticket={selectedTicket}
+            onClose={() => setSelectedTicket(null)}
+          />
+        ))}
     </div>
   );
 }

src/app/admin-dashboard/components/SupportTicketDetailAnswered.tsx → src/app/dashboard/admin/components/SupportTicketDetailAnswered.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { FileText, Link } from "lucide-react";
-import SupportReply from "../components/SupportReply";
+import SupportReply from "./SupportReply";
 
 interface SupportTicketType {
   id: string;
@@ -19,7 +19,10 @@ interface SupportTicketDetailsAnsweredProps {
   onClose: () => void;
 }
 
-export default function SupportTicketDetailsAnswered({ ticket, onClose }: SupportTicketDetailsAnsweredProps) {
+export default function SupportTicketDetailsAnswered({
+  ticket,
+  onClose,
+}: SupportTicketDetailsAnsweredProps) {
   const [isReplyOpen, setIsReplyOpen] = useState(false);
 
   if (!ticket) {
@@ -32,28 +35,43 @@ export default function SupportTicketDetailsAnswered({ ticket, onClose }: Suppor
   const defaultAttachments = ["Screenshot23422332", "Screenshot23422332"];
 
   if (isReplyOpen) {
-    return <SupportReply isOpen={isReplyOpen} onClose={() => setIsReplyOpen(false)} />;
+    return (
+      <SupportReply
+        isOpen={isReplyOpen}
+        onClose={() => setIsReplyOpen(false)}
+      />
+    );
   }
 
   return (
     <div className="fixed inset-0 bg-[#0D0D11CC] bg-opacity-50 flex items-center justify-center">
       <div className="bg-[#21202A] p-10 rounded-lg max-w-2xl w-full h-[90%] text-white border border-[#615F71]">
-        <h2 className="text-xl font-bold text-center mt-[-10px]">Ticket Details</h2>
+        <h2 className="text-xl font-bold text-center mt-[-10px]">
+          Ticket Details
+        </h2>
 
         <div className="space-y-3 mt-2">
           <TicketRow label="Ticket ID" value={ticket.id || "N/A"} />
           <TicketRow label="User ID" value={ticket.userId || defaultUserId} />
           <TicketRow label="Subject" value={ticket.subject || "No Subject"} />
           <TicketRow label="Email" value={ticket.email || "No Email"} />
           <TicketRow label="Status" value={ticket.status || "Pending"} />
-          <TicketRow label="Description" value={ticket.description || defaultDescription} multiLine />
+          <TicketRow
+            label="Description"
+            value={ticket.description || defaultDescription}
+            multiLine
+          />
 
           <div className="bg-[#2B2A38] p-2 rounded-lg border border-[#413F54]">
             <span className="text-white">Attachment(s)</span>
             <div className="space-y-1 mt-1">
               {ticket.attachments && ticket.attachments.length > 0
-                ? ticket.attachments.map((file, index) => <Attachment key={index} fileName={file} />)
-                : defaultAttachments.map((file, index) => <Attachment key={index} fileName={file} />)}
+                ? ticket.attachments.map((file, index) => (
+                    <Attachment key={index} fileName={file} />
+                  ))
+                : defaultAttachments.map((file, index) => (
+                    <Attachment key={index} fileName={file} />
+                  ))}
             </div>
           </div>
         </div>
@@ -74,7 +92,10 @@ export default function SupportTicketDetailsAnswered({ ticket, onClose }: Suppor
         </div>
       </div>
 
-      <SupportReply isOpen={isReplyOpen} onClose={() => setIsReplyOpen(false)} />
+      <SupportReply
+        isOpen={isReplyOpen}
+        onClose={() => setIsReplyOpen(false)}
+      />
     </div>
   );
 }
@@ -88,7 +109,9 @@ interface TicketRowProps {
 const TicketRow = ({ label, value, multiLine }: TicketRowProps) => (
   <div className="flex justify-between bg-[#2B2A38] text-sm border border-[#413F54] p-2 rounded-lg">
     <span className="text-white">{label}</span>
-    <span className={`text-white ${multiLine ? "max-w-md text-right" : ""}`}>{value}</span>
+    <span className={`text-white ${multiLine ? "max-w-md text-right" : ""}`}>
+      {value}
+    </span>
   </div>
 );