feat: enhance user management dashboard with new components and notifications (#81)

Co-authored-by: martinvibes <martinmachiebe21@gmail>

Author: martinvibes

public/strk.png.svg

@@ -7,6 +7,9 @@ import Image from "next/image";
 
 import { Header } from "@/components/dashboard/header";
 import reader1_img from "@/assets/images/reader1.png";
+import DirectNotificationContent from "@/components/dashboard/DirectNotificationContent";
+import ReviewsAndFeedbackContent from "@/components/dashboard/ReviewsAndFeedbackContent";
+import TransactionContent from "@/components/dashboard/TransactionContent";
 
 import { Search } from "lucide-react";
 
@@ -67,9 +70,9 @@ const UserProfilePage = () => {
   const [activeTab, setActiveTab] = useState("Library");
   const [activeFilter, setActiveFilter] = useState("All");
 
-  const setShowModal = (show: boolean) => { 
+  const setShowModal = (show: boolean) => {
     setSuspendModalOpen(show);
-  }
+  };
 
   const stats = [
     { label: "Following", value: "4", color: "text-blue-600" },
@@ -229,9 +232,11 @@ const UserProfilePage = () => {
   return (
     <>
       <Header title="Reader's Profile" />
-      {suspendModalOpen && <div className="min-h-screen h-full p-4 md:p-6 absolute top-0 left-0 right-0 z-50">
-        <SuspendUserModal setShow={setShowModal} />
-      </div>}
+      {suspendModalOpen && (
+        <div className="min-h-screen h-full p-4 md:p-6 absolute top-0 left-0 right-0 z-50">
+          <SuspendUserModal setShow={setShowModal} />
+        </div>
+      )}
       <div className="min-h-screen bg-gray-50 p-4 md:p-6">
         <div className="w-full mx-auto">
           {/* Header Section */}
@@ -290,7 +295,10 @@ const UserProfilePage = () => {
             {/* Stats Grid */}
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12">
               {stats.map((stat, index) => (
-                <div key={index} className=" border p-4 rounded-lg">
+                <div
+                  key={index}
+                  className=" border border-[#E9F7FF] p-4 rounded-lg"
+                >
                   <div className="text-sm text-gray-500 mt-1 mb-2">
                     {stat.label}
                   </div>
@@ -340,7 +348,10 @@ const UserProfilePage = () => {
                 {/* Library Stats */}
                 <div className="grid grid-cols-2 lg:grid-cols-4  gap-4 mb-6">
                   {libraryStats.map((stat, index) => (
-                    <div key={index} className=" border p-6 rounded-lg">
+                    <div
+                      key={index}
+                      className=" border border-[#E9F7FF] p-6 rounded-lg"
+                    >
                       <div className="text-xs text-gray-500">{stat.label}</div>
 
                       <div className="text-lg font-bold text-gray-700">
@@ -388,14 +399,30 @@ const UserProfilePage = () => {
               </div>
             )}
 
+            {/* Direct Notification Content */}
+            {activeTab === "Direct Notification" && (
+              <DirectNotificationContent />
+            )}
+
+            {/* Transaction Content */}
+            {activeTab === "Transactions" && <TransactionContent />}
+
+            {/* Reviews & Feedback Content */}
+            {activeTab === "Reviews & Feedback" && (
+              <ReviewsAndFeedbackContent />
+            )}
+
             {/* Other Tab Contents */}
-            {activeTab !== "Library" && (
-              <div className="p-6">
-                <div className="text-center text-gray-500 py-8">
-                  {activeTab} content would go here
+            {activeTab !== "Library" &&
+              activeTab !== "Direct Notification" &&
+              activeTab !== "Transactions" &&
+              activeTab !== "Reviews & Feedback" && (
+                <div className="p-6">
+                  <div className="text-center text-gray-500 py-8">
+                    {activeTab} content would go here
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
           </div>
         </div>
       </div>

src/app/dashboard/admin/user-management/readers/[id]/page.tsx

@@ -1,5 +1,11 @@
-"use client"
-import React, { createContext, useContext, ReactNode, useState, useEffect } from "react";
+"use client";
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  useEffect,
+} from "react";
 import { AccountStatus, useAccount, useConnect } from "@starknet-react/core";
 
 // Define the context type
@@ -27,13 +33,13 @@ export function WalletProvider({ children }: { children: ReactNode }) {
 
   // Check if any wallet is available in the browser
   useEffect(() => {
-    const hasWallet = connectors.some(connector => connector.available());
+    const hasWallet = connectors.some((connector) => connector.available());
     setIsWalletDetected(hasWallet);
   }, [connectors]);
 
   // Handle connection errors
   useEffect(() => {
-    if (status === "error" as AccountStatus) {
+    if (status === ("error" as AccountStatus)) {
       setError(new Error("Failed to connect wallet"));
     } else {
       setError(null);
@@ -59,13 +65,11 @@ export function WalletProvider({ children }: { children: ReactNode }) {
     error,
     isModalOpen,
     openConnectModal,
-    closeConnectModal
+    closeConnectModal,
   };
 
   return (
-    <WalletContext.Provider value={value}>
-      {children}
-    </WalletContext.Provider>
+    <WalletContext.Provider value={value}>{children}</WalletContext.Provider>
   );
 }
 

src/components/blockchain/wallet-connect-context.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import React from "react";
+
+interface DeleteReviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  review?: {
+    id: string;
+    bookTitle: string;
+    author: string;
+    reviewerName: string;
+    rating: number;
+    reviewText: string;
+  } | null;
+}
+
+const DeleteReviewModal: React.FC<DeleteReviewModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  review,
+}) => {
+  if (!isOpen || !review) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#00000098] bg-opacity-50">
+      <div className="bg-white rounded-lg max-w-md w-full mx-4 p-6">
+        {/* Warning Icon */}
+        <div className="flex justify-center mb-6">
+          <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center">
+            <div className="w-20 h-20 bg-gray-600 rounded-full flex items-center justify-center">
+              <div className="w-10 h-10 bg-gray-800 rounded-sm flex items-center justify-center">
+                <span className="text-white text-xl font-bold">!</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Warning Message */}
+        <div className="text-center mb-8 px-8">
+          <p className="text-gray-700 leading-relaxed">
+            You are about to delete{" "}
+            <span className="text-blue-600 font-medium">
+              @{review.reviewerName}'s
+            </span>{" "}
+            Review on the book{" "}
+            <span className="font-medium">
+              {review.bookTitle} by {review.author}
+            </span>
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center justify-center gap-4">
+          <button
+            onClick={onConfirm}
+            className="px-6 py-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-colors font-medium"
+          >
+            Delete
+          </button>
+          <button
+            onClick={onClose}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteReviewModal;