From d60359f09b130fde48ea0727427b6784e206c252 Mon Sep 17 00:00:00 2001
From: Theresa <ttnguyen1011@csu.fullerton.edu>
Date: Sun, 30 Mar 2025 21:19:45 -0700
Subject: [PATCH 1/7] unifying user and resarcher login

---
 client/src/components/DataUpload.js           |   6 +-
 client/src/components/dashboard/Dashboard.js  | 109 ++++--
 .../src/components/dashboard/RoleSwitcher.js  | 149 +++++++++
 client/src/components/roles/ForgotPassword.js | 161 +++++++++
 client/src/components/roles/Register.js       | 302 +++++++++++++++++
 client/src/components/roles/RoleSelector.js   | 316 +++++++++---------
 client/src/utils/navigation.js                |   2 +
 7 files changed, 853 insertions(+), 192 deletions(-)
 create mode 100644 client/src/components/dashboard/RoleSwitcher.js
 create mode 100644 client/src/components/roles/ForgotPassword.js
 create mode 100644 client/src/components/roles/Register.js

diff --git a/client/src/components/DataUpload.js b/client/src/components/DataUpload.js
index 97cc2b9..cd348a4 100755
--- a/client/src/components/DataUpload.js
+++ b/client/src/components/DataUpload.js
@@ -294,7 +294,7 @@ const DataUpload = ({ onUploadSuccess, onUploadError }) => {
                 htmlFor="category"
                 className="block text-sm font-medium text-gray-700 mb-1"
               >
-                Category
+                Category *
               </label>
               <select
                 id="category"
@@ -317,7 +317,7 @@ const DataUpload = ({ onUploadSuccess, onUploadError }) => {
                 htmlFor="description"
                 className="block text-sm font-medium text-gray-700 mb-1"
               >
-                Description
+                Description *
               </label>
               <textarea
                 id="description"
@@ -335,7 +335,7 @@ const DataUpload = ({ onUploadSuccess, onUploadError }) => {
                 htmlFor="price"
                 className="block text-sm font-medium text-gray-700 mb-1"
               >
-                Price (ETH)
+                Price (ETH) *
               </label>
               <input
                 id="price"
diff --git a/client/src/components/dashboard/Dashboard.js b/client/src/components/dashboard/Dashboard.js
index ab193c6..10f4ce1 100644
--- a/client/src/components/dashboard/Dashboard.js
+++ b/client/src/components/dashboard/Dashboard.js
@@ -2,6 +2,7 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import PropTypes from 'prop-types';
 import {
   FileText,
   Upload,
@@ -31,6 +32,7 @@ import hipaaComplianceService from "../../services/hipaaComplianceService.js";
 import useAsyncOperation from "../../hooks/useAsyncOperation.js";
 import ErrorDisplay from "../ui/ErrorDisplay.js";
 import LoadingSpinner from "../ui/LoadingSpinner.js";
+import RoleSwitcher from "./RoleSwitcher.js";
 
 /**
  * Unified Dashboard Component
@@ -107,6 +109,8 @@ const Dashboard = ({ onNavigate }) => {
     availableDatasets: [],
   });
 
+  const [downloadLoading, setDownloadLoading] = useState(false);
+
   // State for viewing records (patient dashboard)
   const [viewingRecord, setViewingRecord] = useState(null);
 
@@ -119,12 +123,29 @@ const Dashboard = ({ onNavigate }) => {
   // Combine loading states
   const isLoading = uiLoading || healthDataLoading || asyncLoading;
 
+  // ADD LOADING TIMEOUT FIX
+  useEffect(() => {
+    if (isLoading && !uiError) {
+      console.log("Still loading on Dashboard page...");
+      // Force exit loading state after 5 seconds for testing
+      const timer = setTimeout(() => {
+        console.log("Forcing loading state to false after timeout");
+        dispatch(setLoading(false));
+      }, 5000);
+      
+      return () => clearTimeout(timer);
+    }
+  }, [isLoading, uiError, dispatch]);
+
   // Function to fetch all dashboard data
   const fetchDashboardData = useCallback(async () => {
+    console.log("Starting fetchDashboardData");
     try {
+      console.log("Setting loading state to true");
       dispatch(setLoading(true));
       dispatch(setError(null));
 
+      console.log("About to call hipaaComplianceService.createAuditLog");
       // Create HIPAA-compliant audit log
       await hipaaComplianceService.createAuditLog("DASHBOARD_ACCESS", {
         action: "VIEW",
@@ -132,7 +153,9 @@ const Dashboard = ({ onNavigate }) => {
         userId,
         timestamp: new Date().toISOString(),
       });
+      console.log("Audit log created successfully");
 
+      console.log("Setting dashboard data");
       // Set appropriate dashboard data based on role
       setDashboardData((prevData) => ({
         ...prevData,
@@ -140,7 +163,9 @@ const Dashboard = ({ onNavigate }) => {
         recentActivity: [],
         availableDatasets: userRole === "researcher" ? healthData || [] : [],
       }));
+      console.log("Dashboard data set successfully");
 
+      console.log("Setting loading state to false");
       dispatch(setLoading(false));
     } catch (err) {
       console.error("Dashboard data fetch error:", err);
@@ -153,9 +178,10 @@ const Dashboard = ({ onNavigate }) => {
         })
       );
 
+      console.log("Setting loading state to false after error");
       dispatch(setLoading(false));
     }
-  }, [userRole, userId, dispatch, healthData]);
+  }, [userRole, userId, dispatch, healthData, userProfile.securityScore]);
 
   // Fetch dashboard data when component mounts or when dependencies change
   useEffect(() => {
@@ -199,16 +225,21 @@ const Dashboard = ({ onNavigate }) => {
   // Handle record download (Patient dashboard)
   const handleDownloadRecord = useCallback(
     async (recordId) => {
+      setDownloadLoading(true);
       executeAsync(async () => {
-        await downloadRecord(recordId);
-
-        // Log download for HIPAA compliance
-        await hipaaComplianceService.createAuditLog("RECORD_DOWNLOAD", {
-          action: "DOWNLOAD",
-          recordId,
-          timestamp: new Date().toISOString(),
-          userId,
-        });
+        try {
+          await downloadRecord(recordId);
+  
+          // Log download for HIPAA compliance
+          await hipaaComplianceService.createAuditLog("RECORD_DOWNLOAD", {
+            action: "DOWNLOAD",
+            recordId,
+            timestamp: new Date().toISOString(),
+            userId
+          });
+        } finally {
+          setDownloadLoading(false);
+        }
       });
     },
     [executeAsync, downloadRecord, userId]
@@ -387,14 +418,21 @@ const Dashboard = ({ onNavigate }) => {
   if (userRole === "patient") {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* User welcome */}
-        <div className="mb-8">
-          <h1 className="text-2xl font-bold text-gray-900">
-            Welcome, {userProfile?.name || "Patient"}
-          </h1>
-          <p className="text-gray-600">
-            Your patient dashboard for managing health data
-          </p>
+        {/* User welcome with Role Switcher */}
+        <div className="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">
+              Welcome, {userProfile?.name || "Patient"}
+            </h1>
+            <p className="text-gray-600">
+              Your patient dashboard for managing health data
+            </p>
+          </div>
+          
+          {/* Role Switcher Component */}
+          <div className="mt-4 md:mt-0">
+            <RoleSwitcher />
+          </div>
         </div>
 
         {/* Stats Grid */}
@@ -696,14 +734,21 @@ const Dashboard = ({ onNavigate }) => {
   // RESEARCHER DASHBOARD RENDER
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      {/* User welcome */}
-      <div className="mb-8">
-        <h1 className="text-2xl font-bold text-gray-900">
-          Welcome, {userProfile?.name || "Researcher"}
-        </h1>
-        <p className="text-gray-600">
-          Your researcher dashboard for discovering and analyzing health data
-        </p>
+      {/* User welcome with Role Switcher */}
+      <div className="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">
+            Welcome, {userProfile?.name || "Researcher"}
+          </h1>
+          <p className="text-gray-600">
+            Your researcher dashboard for discovering and analyzing health data
+          </p>
+        </div>
+        
+        {/* Role Switcher Component */}
+        <div className="mt-4 md:mt-0">
+          <RoleSwitcher />
+        </div>
       </div>
 
       {/* Stats Grid */}
@@ -751,14 +796,6 @@ const Dashboard = ({ onNavigate }) => {
 
       {/* Quick Actions */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-        <button
-          onClick={() => handleNavigateTo("/browse")}
-          className="p-4 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2 font-medium"
-        >
-          <Database className="w-5 h-5" />
-          Browse Datasets
-        </button>
-
         <button
           onClick={() => handleNavigateTo("/studies")}
           className="p-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2 font-medium"
@@ -1068,7 +1105,7 @@ const Dashboard = ({ onNavigate }) => {
           </div>
         ) : (
           <div className="text-center py-8 text-gray-500">
-            No recent activity to display
+            No recent activity to display woooooo
           </div>
         )}
       </div>
@@ -1080,4 +1117,4 @@ Dashboard.propTypes = {
   onNavigate: PropTypes.func,
 };
 
-export default Dashboard;
+export default Dashboard;
\ No newline at end of file
diff --git a/client/src/components/dashboard/RoleSwitcher.js b/client/src/components/dashboard/RoleSwitcher.js
new file mode 100644
index 0000000..c55374e
--- /dev/null
+++ b/client/src/components/dashboard/RoleSwitcher.js
@@ -0,0 +1,149 @@
+// client/src/components/dashboard/RoleSwitcher.js
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { User, Microscope, Loader, AlertCircle } from "lucide-react";
+import { setRole } from "../../redux/slices/roleSlice.js";
+import { addNotification } from "../../redux/slices/notificationSlice.js";
+import { updateUserProfile } from "../../redux/slices/userSlice.js";
+import hipaaComplianceService from "../../services/hipaaComplianceService.js";
+import authService from "../../services/authService.js";
+import authUtils from "../../utils/authUtils.js";
+
+/**
+ * Role Switcher Component for the Dashboard
+ * Allows users to switch between patient and researcher roles
+ */
+const RoleSwitcher = () => {
+  const dispatch = useDispatch();
+  const currentRole = useSelector((state) => state.role.role);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [selectedRole, setSelectedRole] = useState(null);
+
+  /**
+   * Handle role switch - reusing logic from the original RoleSelector
+   */
+  const handleRoleSwitch = async (role) => {
+    // If already selected or in process, do nothing
+    if (role === currentRole || loading) return;
+    
+    try {
+      setLoading(true);
+      setError(null);
+      setSelectedRole(role);
+      
+      console.log(`Switching role to: ${role}`);
+      
+      // Audit role selection for HIPAA compliance
+      await hipaaComplianceService.createAuditLog("ROLE_SWITCH", {
+        fromRole: currentRole,
+        toRole: role,
+        timestamp: new Date().toISOString(),
+        action: "SWITCH",
+      });
+
+      // Get current user data to merge with role
+      const userData = authService.getCurrentUser() || {};
+      const walletAddress = userData.address || localStorage.getItem("healthmint_wallet_address");
+
+      if (!walletAddress) {
+        throw new Error("Wallet address not found. Please reconnect your wallet.");
+      }
+
+      const updatedUserData = {
+        ...userData,
+        role,
+        address: walletAddress,
+        lastUpdated: new Date().toISOString(),
+      };
+
+      // Update user data in authService
+      authService.updateUserData?.(updatedUserData) || 
+        authUtils.forceRegistrationComplete?.(role, walletAddress, updatedUserData);
+
+      // Explicitly set in localStorage
+      localStorage.setItem("healthmint_user_role", role);
+
+      // Dispatch role selection action to Redux
+      dispatch(setRole(role));
+
+      // Update user profile with role information
+      dispatch(updateUserProfile(updatedUserData));
+
+      // Success notification
+      dispatch(
+        addNotification({
+          type: "success",
+          message: `Switched to ${role === "patient" ? "Patient" : "Researcher"} view`,
+          duration: 3000,
+        })
+      );
+
+    } catch (err) {
+      console.error("Role switch error:", err);
+      setError(err.message || "Failed to switch role. Please try again.");
+
+      dispatch(
+        addNotification({
+          type: "error",
+          message: err.message || "Failed to switch role. Please try again.",
+        })
+      );
+
+    } finally {
+      setLoading(false);
+      setSelectedRole(null);
+    }
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      {error && (
+        <div className="fixed top-4 right-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg shadow-md flex items-center gap-2 z-50">
+          <AlertCircle size={20} className="flex-shrink-0 text-red-500" />
+          <span>{error}</span>
+        </div>
+      )}
+      
+      <span className="text-sm text-gray-500 mr-2">View as:</span>
+      
+      {/* Patient Role Button */}
+      <button
+        className={`flex items-center px-3 py-1.5 text-sm rounded-md transition-colors ${
+          currentRole === "patient"
+            ? "bg-blue-100 text-blue-700"
+            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+        }`}
+        onClick={() => !loading && handleRoleSwitch("patient")}
+        disabled={loading || currentRole === "patient"}
+        aria-label="Switch to Patient view"
+      >
+        <User className="w-4 h-4 mr-1.5" />
+        Patient
+        {loading && selectedRole === "patient" && (
+          <Loader className="w-3 h-3 ml-1.5 animate-spin" />
+        )}
+      </button>
+      
+      {/* Researcher Role Button */}
+      <button
+        className={`flex items-center px-3 py-1.5 text-sm rounded-md transition-colors ${
+          currentRole === "researcher"
+            ? "bg-purple-100 text-purple-700"
+            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+        }`}
+        onClick={() => !loading && handleRoleSwitch("researcher")}
+        disabled={loading || currentRole === "researcher"}
+        aria-label="Switch to Researcher view"
+      >
+        <Microscope className="w-4 h-4 mr-1.5" />
+        Researcher
+        {loading && selectedRole === "researcher" && (
+          <Loader className="w-3 h-3 ml-1.5 animate-spin" />
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default RoleSwitcher;
\ No newline at end of file
diff --git a/client/src/components/roles/ForgotPassword.js b/client/src/components/roles/ForgotPassword.js
new file mode 100644
index 0000000..b80ab6d
--- /dev/null
+++ b/client/src/components/roles/ForgotPassword.js
@@ -0,0 +1,161 @@
+// client/src/components/auth/ForgotPassword.js
+import React, { useState, useCallback } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { Loader, ArrowLeft, Mail, AlertCircle } from "lucide-react";
+import { addNotification } from "../../redux/slices/notificationSlice";
+
+const ForgotPassword = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  
+  // Form state
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [resetEmailSent, setResetEmailSent] = useState(false);
+  
+  const handleSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    
+    try {
+      setLoading(true);
+      setError(null);
+      
+      // Basic validation
+      if (!email) {
+        throw new Error("Please enter your email address");
+      }
+      
+      // Email format validation
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(email)) {
+        throw new Error("Please enter a valid email address");
+      }
+      
+      // Simulate API call for password reset
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      
+      // Mark as successful
+      setResetEmailSent(true);
+      
+      // Success notification
+      dispatch(
+        addNotification({
+          type: "success",
+          message: "Password reset email sent successfully!",
+        })
+      );
+      
+    } catch (err) {
+      console.error("Password reset error:", err);
+      setError(err.message || "Failed to send reset email. Please try again.");
+      
+      dispatch(
+        addNotification({
+          type: "error",
+          message: err.message || "Failed to send reset email. Please try again.",
+        })
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [dispatch, email]);
+  
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
+      {error && (
+        <div className="fixed top-4 right-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg shadow-md flex items-center gap-2">
+          <AlertCircle size={20} className="flex-shrink-0 text-red-500" />
+          <span>{error}</span>
+        </div>
+      )}
+      
+      <div className="max-w-md w-full">
+        <div className="mb-8 text-center">
+          <h1 className="text-3xl font-bold mb-2">Reset Your Password</h1>
+          <p className="text-gray-600">
+            Enter your email to receive password reset instructions
+          </p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow-md p-8">
+          {resetEmailSent ? (
+            <div className="text-center">
+              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Mail size={32} className="text-green-500" />
+              </div>
+              <h2 className="text-xl font-semibold mb-2">Check your inbox</h2>
+              <p className="text-gray-600 mb-6">
+                We've sent a password reset link to <strong>{email}</strong>. 
+                Please check your email and follow the instructions to reset your password.
+              </p>
+              <p className="text-sm text-gray-500 mb-6">
+                Didn't receive the email? Check your spam folder or 
+                <button 
+                  className="text-blue-600 hover:text-blue-800 ml-1" 
+                  onClick={() => setResetEmailSent(false)}
+                >
+                  try again
+                </button>.
+              </p>
+              <Link
+                to="/login"
+                className="inline-flex items-center text-blue-600 hover:text-blue-800"
+              >
+                <ArrowLeft size={16} className="mr-1" /> Return to login
+              </Link>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit}>
+              <div className="mb-6">
+                <label 
+                  htmlFor="email" 
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Email Address
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Enter your email"
+                  required
+                  disabled={loading}
+                />
+              </div>
+              
+              <button
+                type="submit"
+                className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader className="w-4 h-4 mr-2 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  "Send Reset Link"
+                )}
+              </button>
+              
+              <div className="mt-4 text-center">
+                <Link
+                  to="/login"
+                  className="inline-flex items-center text-blue-600 hover:text-blue-800"
+                >
+                  <ArrowLeft size={16} className="mr-1" /> Return to login
+                </Link>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;
\ No newline at end of file
diff --git a/client/src/components/roles/Register.js b/client/src/components/roles/Register.js
new file mode 100644
index 0000000..c0822b3
--- /dev/null
+++ b/client/src/components/roles/Register.js
@@ -0,0 +1,302 @@
+// client/src/components/roles/Register.js
+import React, { useState, useCallback } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { Loader, ArrowLeft, AlertCircle, Users } from "lucide-react";
+import { addNotification } from "../../redux/slices/notificationSlice";
+import { updateUserProfile } from "../../redux/slices/userSlice";
+import { setRole } from "../../redux/slices/roleSlice";
+import authService from "/../services/authService";
+
+const Register = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  
+  // Form state
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+    agreeToTerms: false
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData(prevData => ({
+      ...prevData,
+      [name]: type === 'checkbox' ? checked : value
+    }));
+  };
+  
+  const validateForm = () => {
+    if (!formData.name) {
+      throw new Error("Please enter your name");
+    }
+    
+    if (!formData.email) {
+      throw new Error("Please enter your email");
+    }
+    
+    // Email format validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(formData.email)) {
+      throw new Error("Please enter a valid email address");
+    }
+    
+    if (!formData.password) {
+      throw new Error("Please enter a password");
+    }
+    
+    // Password strength validation
+    if (formData.password.length < 8) {
+      throw new Error("Password must be at least 8 characters long");
+    }
+    
+    if (formData.password !== formData.confirmPassword) {
+      throw new Error("Passwords do not match");
+    }
+    
+    if (!formData.agreeToTerms) {
+      throw new Error("You must agree to the Terms of Service and Privacy Policy");
+    }
+    
+    return true;
+  };
+  
+  const handleSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    
+    try {
+      setLoading(true);
+      setError(null);
+      
+      // Validate form data
+      validateForm();
+      
+      // Get wallet address if available
+      const walletAddress = localStorage.getItem("healthmint_wallet_address") || "0x0000000";
+      
+      // Create user data
+      const userData = {
+        id: 'user-' + Math.random().toString(36).substring(2),
+        name: formData.name,
+        email: formData.email,
+        role: "patient", // Default role
+        address: walletAddress,
+        createdAt: new Date().toISOString()
+      };
+      
+      // Create a mock token
+      const token = 'token-' + Date.now();
+      
+      // Set all required localStorage items for your auth system
+      localStorage.setItem("healthmint_user", JSON.stringify(userData));
+      localStorage.setItem("healthmint_auth_token", token);
+      localStorage.setItem("healthmint_token_expiry", (Date.now() + 3600 * 1000).toString());
+      localStorage.setItem("healthmint_registration_status", "complete");
+      localStorage.setItem("healthmint_user_role", "patient");
+      localStorage.setItem("healthmint_is_new_user", "false");
+      localStorage.setItem("healthmint_wallet_connection", "true");
+      
+      // Mark registration as complete using your auth service
+      authService.completeRegistration({
+        ...userData,
+        token
+      });
+      
+      // Update Redux state
+      dispatch(setRole("patient"));
+      dispatch(updateUserProfile(userData));
+      
+      // Success notification
+      dispatch(
+        addNotification({
+          type: "success",
+          message: "Account created successfully! Welcome to Healthmint.",
+          duration: 5000,
+        })
+      );
+      
+      // Navigate to dashboard
+      navigate("/dashboard", {
+        replace: true,
+        state: { registrationCompleted: true }
+      });
+      
+    } catch (err) {
+      console.error("Registration error:", err);
+      setError(err.message || "Failed to create account. Please try again.");
+      
+      dispatch(
+        addNotification({
+          type: "error",
+          message: err.message || "Failed to create account. Please try again.",
+        })
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [dispatch, navigate, formData]);
+  
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
+      {error && (
+        <div className="fixed top-4 right-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg shadow-md flex items-center gap-2">
+          <AlertCircle size={20} className="flex-shrink-0 text-red-500" />
+          <span>{error}</span>
+        </div>
+      )}
+      
+      <div className="max-w-md w-full">
+        <div className="mb-8 text-center">
+          <h1 className="text-3xl font-bold mb-2">Create an Account</h1>
+          <p className="text-gray-600">
+            Join Healthmint to securely manage and share your health data
+          </p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow-md p-8">
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label 
+                htmlFor="name" 
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Full Name
+              </label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                value={formData.name}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your full name"
+                required
+                disabled={loading}
+              />
+            </div>
+            
+            <div className="mb-4">
+              <label 
+                htmlFor="email" 
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Email Address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                value={formData.email}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your email"
+                required
+                disabled={loading}
+              />
+            </div>
+            
+            <div className="mb-4">
+              <label 
+                htmlFor="password" 
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                value={formData.password}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Create a password"
+                required
+                disabled={loading}
+              />
+              <p className="mt-1 text-xs text-gray-500">
+                Password must be at least 8 characters long
+              </p>
+            </div>
+            
+            <div className="mb-6">
+              <label 
+                htmlFor="confirmPassword" 
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                value={formData.confirmPassword}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Confirm your password"
+                required
+                disabled={loading}
+              />
+            </div>
+            
+            <div className="mb-6">
+              <label className="flex items-start cursor-pointer">
+                <input
+                  type="checkbox"
+                  name="agreeToTerms"
+                  checked={formData.agreeToTerms}
+                  onChange={handleChange}
+                  className="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                  disabled={loading}
+                />
+                <span className="ml-2 block text-sm text-gray-700">
+                  I agree to the 
+                  <a href="/terms" className="text-blue-600 hover:text-blue-800 mx-1">
+                    Terms of Service
+                  </a> 
+                  and 
+                  <a href="/privacy" className="text-blue-600 hover:text-blue-800 mx-1">
+                    Privacy Policy
+                  </a>
+                </span>
+              </label>
+            </div>
+            
+            <button
+              type="submit"
+              className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <Loader className="w-4 h-4 mr-2 animate-spin" />
+                  Creating Account...
+                </>
+              ) : (
+                <>
+                  <Users size={16} className="mr-2" />
+                  Create Account
+                </>
+              )}
+            </button>
+          </form>
+        </div>
+        
+        <div className="mt-6 text-center">
+          <p className="text-gray-600">
+            Already have an account? 
+            <Link to="/login" className="text-blue-600 hover:text-blue-800 ml-1">
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Register;
\ No newline at end of file
diff --git a/client/src/components/roles/RoleSelector.js b/client/src/components/roles/RoleSelector.js
index fb9857e..f7f55f4 100644
--- a/client/src/components/roles/RoleSelector.js
+++ b/client/src/components/roles/RoleSelector.js
@@ -2,80 +2,91 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
-import { User, Microscope, Loader, AlertCircle } from "lucide-react";
+import { Loader, AlertCircle, LogIn } from "lucide-react";
 import { setRole } from "../../redux/slices/roleSlice.js";
 import { addNotification } from "../../redux/slices/notificationSlice.js";
 import { updateUserProfile } from "../../redux/slices/userSlice.js";
 import hipaaComplianceService from "../../services/hipaaComplianceService.js";
-import authService from "../../services/authService.js";
+// Import authService properly - it's a default export based on the error messages
+import debugAuthState, { default as authServiceDefault } from "../../services/authService.js";
 import authUtils from "../../utils/authUtils.js";
 
 /**
- * Role Selector Component with improved navigation
+ * Unified Login and Role Selector Component
+ * Now functions as a login page with role selection moved to dashboard
  */
 const RoleSelector = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const location = useLocation();
 
+  // Form state for login
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  
   // Local state
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [selectedRole, setSelectedRole] = useState(null);
   const [redirecting, setRedirecting] = useState(false);
   const [initialCheckComplete, setInitialCheckComplete] = useState(false);
 
-  // Check for an existing role in localStorage or user profile
+  // Check for an existing authenticated user
   useEffect(() => {
     // If we're already checking or redirecting, skip
     if (redirecting || initialCheckComplete) {
       return;
     }
 
-    const checkExistingRole = () => {
-      console.log("Checking for existing role...");
+    const checkExistingUser = () => {
+      console.log("Checking for existing authentication...");
 
       // First, check if we came from a redirect loop - if so, don't redirect again
       const fromPath = location.state?.from;
       if (fromPath === "/dashboard") {
-        console.log("Coming from dashboard, skipping role redirect");
+        console.log("Coming from dashboard, skipping auth redirect");
         setInitialCheckComplete(true);
         return false;
       }
 
       // Check if we have an explicit bypass flag
       if (sessionStorage.getItem("bypass_role_check") === "true") {
-        console.log("Bypassing role check due to session flag");
+        console.log("Bypassing auth check due to session flag");
         // Clear the flag after using it once
         sessionStorage.removeItem("bypass_role_check");
         setInitialCheckComplete(true);
         return false;
       }
 
-      // Check user profile first
-      const userProfile = authService.getCurrentUser();
-      if (userProfile && userProfile.role) {
-        console.log(`Existing role found: ${userProfile.role}`);
-        dispatch(setRole(userProfile.role));
-        return true;
-      }
-
-      // Check localStorage as fallback
-      const storedRole = localStorage.getItem("healthmint_user_role");
-      if (storedRole) {
-        console.log(`Role found in localStorage: ${storedRole}`);
-        dispatch(setRole(storedRole));
-        return true;
+      // Check if user is already authenticated using localStorage directly
+      // since getCurrentUser isn't available according to error
+      try {
+        const userDataString = localStorage.getItem("healthmint_user_data");
+        if (userDataString) {
+          const userProfile = JSON.parse(userDataString);
+          if (userProfile && userProfile.token) {
+            console.log(`Existing authenticated user found: ${userProfile.email || userProfile.name}`);
+            
+            // Check for role
+            const userRole = userProfile.role || localStorage.getItem("healthmint_user_role");
+            if (userRole) {
+              console.log(`User role found: ${userRole}`);
+              dispatch(setRole(userRole));
+              return true;
+            }
+          }
+        }
+      } catch (e) {
+        console.error("Error checking user authentication:", e);
       }
 
       setInitialCheckComplete(true);
       return false;
     };
 
-    const hasRole = checkExistingRole();
+    const isAuthenticated = checkExistingUser();
 
-    // If role is detected and we're not already redirecting, go to dashboard
-    if (hasRole && !redirecting) {
+    // If authenticated and we're not already redirecting, go to dashboard
+    if (isAuthenticated && !redirecting) {
       // Set a flag to prevent route protection loops
       sessionStorage.setItem("bypass_route_protection", "true");
 
@@ -89,70 +100,71 @@ const RoleSelector = () => {
   }, [dispatch, navigate, redirecting, location.state, initialCheckComplete]);
 
   /**
-   * Handle role selection with improved user data persistence and error handling
+   * Handle login with custom implementation
    */
-  const handleRoleSelect = useCallback(
-    async (role) => {
+  const handleLogin = useCallback(
+    async (e) => {
+      if (e) e.preventDefault();
+      
       try {
         // Prevent multiple submissions
         if (loading) return;
 
         setLoading(true);
         setError(null);
-        setSelectedRole(role);
         setRedirecting(true);
 
-        console.log(`Setting role: ${role}`); // Debug log
+        // Basic validation
+        if (!email || !password) {
+          throw new Error("Please enter both email and password");
+        }
+
+        console.log(`Attempting login for: ${email}`);
 
         // Create a bypass flag to prevent infinite redirects
         sessionStorage.setItem("bypass_route_protection", "true");
-        sessionStorage.setItem("temp_selected_role", role);
 
-        // Audit role selection for HIPAA compliance
-        await hipaaComplianceService.createAuditLog("ROLE_SELECTION", {
-          role,
+        // Since the real login function isn't available (based on error messages),
+        // we'll implement a simple login mechanism
+        
+        // Simulate authentication - in a real app, this would call your API
+        const userData = {
+          id: 'user-' + Math.random().toString(36).substring(2),
+          name: email.split('@')[0], // Use part of email as name
+          email: email,
+          token: 'token-' + Math.random().toString(36).substring(2),
+          roles: ['patient', 'researcher'],
+          lastLogin: new Date().toISOString()
+        };
+
+        // Audit login for HIPAA compliance
+        await hipaaComplianceService.createAuditLog("LOGIN", {
+          email,
           timestamp: new Date().toISOString(),
-          action: "SELECT",
+          action: "LOGIN",
         });
 
-        // Get current user data to merge with role
-        const userData = authService.getCurrentUser() || {};
-        const walletAddress =
-          userData.address || localStorage.getItem("healthmint_wallet_address");
+        // Set default role (can be changed in dashboard)
+        const defaultRole = "patient";
 
-        if (!walletAddress) {
-          throw new Error(
-            "Wallet address not found. Please reconnect your wallet."
-          );
-        }
+        // Get wallet address if available
+        const walletAddress = localStorage.getItem("healthmint_wallet_address");
 
+        // Update user data with role
         const updatedUserData = {
           ...userData,
-          name: userData.name || "User",
-          role,
+          role: defaultRole,
           address: walletAddress,
           lastUpdated: new Date().toISOString(),
         };
 
-        // Update user data in authService with more robust error handling
-        const registrationSuccess = authUtils.forceRegistrationComplete(
-          role,
-          walletAddress,
-          updatedUserData
-        );
-
-        if (!registrationSuccess) {
-          console.error("Failed to complete registration via authUtils");
-          // Fallback method
-          authService.completeRegistration(updatedUserData);
-        }
-
-        // Explicitly set in localStorage for redundancy
-        localStorage.setItem("healthmint_user_role", role);
+        // Store user data in localStorage since setUserData isn't available
+        localStorage.setItem("healthmint_user_data", JSON.stringify(updatedUserData));
+        localStorage.setItem("healthmint_user_role", defaultRole);
         localStorage.setItem("healthmint_is_new_user", "false");
 
         // Dispatch role selection action to Redux
-        dispatch(setRole(role));
+        dispatch(setRole(defaultRole));
 
         // Update user profile with role information
         dispatch(updateUserProfile(updatedUserData));
@@ -161,24 +173,24 @@ const RoleSelector = () => {
         dispatch(
           addNotification({
             type: "success",
-            message: `Successfully set role as ${role === "patient" ? "Patient" : "Researcher"}`,
-            duration: 3000,
+            message: "Login successful! You can now switch between Patient and Researcher views in the dashboard.",
+            duration: 5000,
           })
         );
 
-        // Use React Router navigation with a state flag to prevent loops
+        // Navigate to dashboard
         navigate("/dashboard", {
           replace: true,
-          state: { roleJustSelected: true },
+          state: { loginJustCompleted: true },
         });
       } catch (err) {
-        console.error("Role selection error:", err);
-        setError(err.message || "Failed to set role. Please try again.");
+        console.error("Login error:", err);
+        setError(err.message || "Login failed. Please try again.");
 
         dispatch(
           addNotification({
             type: "error",
-            message: err.message || "Failed to set role. Please try again.",
+            message: err.message || "Login failed. Please try again.",
           })
         );
 
@@ -187,12 +199,12 @@ const RoleSelector = () => {
 
         // Clear any bypass flags on error
         sessionStorage.removeItem("bypass_route_protection");
-        sessionStorage.removeItem("temp_selected_role");
       }
     },
-    [dispatch, loading, navigate]
+    [dispatch, loading, navigate, email, password]
   );
 
+  // Show login form instead of role selection
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
       {error && (
@@ -202,100 +214,98 @@ const RoleSelector = () => {
         </div>
       )}
 
-      <div className="max-w-4xl w-full">
+      <div className="max-w-md w-full">
         <div className="mb-8 text-center">
-          <h1 className="text-3xl font-bold mb-2">Choose Your Role</h1>
+          <h1 className="text-3xl font-bold mb-2">Welcome to Healthmint</h1>
           <p className="text-gray-600">
-            Select how you want to use the Healthmint platform
+            Sign in to access the Healthmint platform
           </p>
         </div>
 
-        <div className="flex flex-col md:flex-row gap-6 justify-center items-stretch">
-          {/* Patient Card */}
-          <div
-            className={`w-full md:w-1/2 bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1 ${
-              selectedRole === "patient" ? "ring-2 ring-blue-500" : ""
-            } ${loading ? "opacity-75 pointer-events-none" : ""}`}
-            onClick={() => !loading && handleRoleSelect("patient")}
-          >
-            <div className="p-8 flex flex-col items-center gap-4 h-full">
-              <div className="bg-blue-50 p-4 rounded-full">
-                <User className="w-12 h-12 text-blue-500" />
-              </div>
-              <h2 className="text-2xl font-semibold text-gray-800">Patient</h2>
-              <p className="text-sm text-gray-600 text-center leading-relaxed flex-grow">
-                Share and manage your health data securely on the blockchain.
-                Control access to your records and potentially earn rewards for
-                contributing to medical research.
-              </p>
-              <button
-                className={`w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors mt-2 flex items-center justify-center ${
-                  loading ? "opacity-75 cursor-not-allowed" : ""
-                }`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  !loading && handleRoleSelect("patient");
-                }}
-                disabled={loading}
-                aria-label="Select Patient Role"
+        <div className="bg-white rounded-lg shadow-md p-8">
+          <form onSubmit={handleLogin}>
+            <div className="mb-4">
+              <label 
+                htmlFor="email" 
+                className="block text-sm font-medium text-gray-700 mb-1"
               >
-                {loading && selectedRole === "patient" ? (
-                  <>
-                    <Loader className="w-4 h-4 mr-2 animate-spin" />
-                    Setting Patient Role...
-                  </>
-                ) : (
-                  "Select Patient Role"
-                )}
-              </button>
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your email"
+                required
+                disabled={loading}
+              />
             </div>
-          </div>
-
-          {/* Researcher Card */}
-          <div
-            className={`w-full md:w-1/2 bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1 ${
-              selectedRole === "researcher" ? "ring-2 ring-purple-500" : ""
-            } ${loading ? "opacity-75 pointer-events-none" : ""}`}
-            onClick={() => !loading && handleRoleSelect("researcher")}
-          >
-            <div className="p-8 flex flex-col items-center gap-4 h-full">
-              <div className="bg-purple-50 p-4 rounded-full">
-                <Microscope className="w-12 h-12 text-purple-500" />
-              </div>
-              <h2 className="text-2xl font-semibold text-gray-800">
-                Researcher
-              </h2>
-              <p className="text-sm text-gray-600 text-center leading-relaxed flex-grow">
-                Access and analyze anonymized health data for research purposes.
-                Discover patterns, conduct studies, and contribute to medical
-                advancements with blockchain-verified data integrity.
-              </p>
-              <button
-                className={`w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-4 rounded-lg transition-colors mt-2 flex items-center justify-center ${
-                  loading ? "opacity-75 cursor-not-allowed" : ""
-                }`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  !loading && handleRoleSelect("researcher");
-                }}
+            
+            <div className="mb-6">
+              <label 
+                htmlFor="password" 
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your password"
+                required
                 disabled={loading}
-                aria-label="Select Researcher Role"
+              />
+            </div>
+            
+            <button
+              type="submit"
+              className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <Loader className="w-4 h-4 mr-2 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                <>
+                  <LogIn className="w-4 h-4 mr-2" />
+                  Sign In
+                </>
+              )}
+            </button>
+            
+            <div className="mt-4 text-center text-sm">
+              <a 
+                href="/forgot-password" 
+                className="text-blue-600 hover:text-blue-800"
+              >
+                Forgot password?
+              </a>
+              <span className="mx-2 text-gray-500">•</span>
+              <a 
+                href="/register" 
+                className="text-blue-600 hover:text-blue-800"
               >
-                {loading && selectedRole === "researcher" ? (
-                  <>
-                    <Loader className="w-4 h-4 mr-2 animate-spin" />
-                    Setting Researcher Role...
-                  </>
-                ) : (
-                  "Select Researcher Role"
-                )}
-              </button>
+                Create an account
+              </a>
             </div>
-          </div>
+          </form>
+        </div>
+        
+        <div className="mt-6 text-center text-sm text-gray-500">
+          <p>
+            After login, you'll be able to choose between Patient and Researcher views from the dashboard.
+          </p>
         </div>
       </div>
     </div>
   );
 };
 
-export default RoleSelector;
+export default RoleSelector;
\ No newline at end of file
diff --git a/client/src/utils/navigation.js b/client/src/utils/navigation.js
index 7046478..9282d5d 100644
--- a/client/src/utils/navigation.js
+++ b/client/src/utils/navigation.js
@@ -7,6 +7,8 @@
 export const ROUTES = {
   // Auth routes
   LOGIN: "/login",
+  FORGOT_PASSWORD: "/forgot-password",
+  REGISTER: "/register",
   ROLE_SELECT: "/select-role",
 
   // Dashboard routes

From 197ad86e79ad3bf06a91cc52656d44ef912efb72 Mon Sep 17 00:00:00 2001
From: Theresa <ttnguyen1011@csu.fullerton.edu>
Date: Sun, 30 Mar 2025 21:26:34 -0700
Subject: [PATCH 2/7] resolving conflict for Dashboard.js

---
 client/src/components/dashboard/Dashboard.js | 155 +++++++++----------
 1 file changed, 73 insertions(+), 82 deletions(-)

diff --git a/client/src/components/dashboard/Dashboard.js b/client/src/components/dashboard/Dashboard.js
index 10f4ce1..bfa1b18 100644
--- a/client/src/components/dashboard/Dashboard.js
+++ b/client/src/components/dashboard/Dashboard.js
@@ -1,8 +1,8 @@
 // client/src/components/dashboard/Dashboard.js
 import React, { useState, useEffect, useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
 import { useSelector, useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import PropTypes from 'prop-types';
 import {
   FileText,
   Upload,
@@ -32,7 +32,6 @@ import hipaaComplianceService from "../../services/hipaaComplianceService.js";
 import useAsyncOperation from "../../hooks/useAsyncOperation.js";
 import ErrorDisplay from "../ui/ErrorDisplay.js";
 import LoadingSpinner from "../ui/LoadingSpinner.js";
-import RoleSwitcher from "./RoleSwitcher.js";
 
 /**
  * Unified Dashboard Component
@@ -55,7 +54,6 @@ const Dashboard = ({ onNavigate }) => {
   // Extract only needed properties from user profile to avoid unnecessary re-renders
   const {
     pendingRequests = 0,
-    securityScore = 85,
     activeStudies = 0,
     appliedFilters = 0,
   } = useMemo(() => userProfile, [userProfile]);
@@ -76,7 +74,6 @@ const Dashboard = ({ onNavigate }) => {
   const {
     loading: asyncLoading,
     execute: executeAsync,
-    clearError: clearAsyncError,
   } = useAsyncOperation({
     componentId: "Dashboard",
     userId,
@@ -109,8 +106,6 @@ const Dashboard = ({ onNavigate }) => {
     availableDatasets: [],
   });
 
-  const [downloadLoading, setDownloadLoading] = useState(false);
-
   // State for viewing records (patient dashboard)
   const [viewingRecord, setViewingRecord] = useState(null);
 
@@ -119,33 +114,18 @@ const Dashboard = ({ onNavigate }) => {
   const [selectedDataset, setSelectedDataset] = useState(null);
   const [detailsLoading, setDetailsLoading] = useState(false);
   const [datasetDetails, setDatasetDetails] = useState(null);
+  const [downloadLoading, setDownloadLoading] = useState(false);
+  const [downloadingRecordId, setDownloadingRecordId] = useState(null);
 
   // Combine loading states
   const isLoading = uiLoading || healthDataLoading || asyncLoading;
 
-  // ADD LOADING TIMEOUT FIX
-  useEffect(() => {
-    if (isLoading && !uiError) {
-      console.log("Still loading on Dashboard page...");
-      // Force exit loading state after 5 seconds for testing
-      const timer = setTimeout(() => {
-        console.log("Forcing loading state to false after timeout");
-        dispatch(setLoading(false));
-      }, 5000);
-      
-      return () => clearTimeout(timer);
-    }
-  }, [isLoading, uiError, dispatch]);
-
   // Function to fetch all dashboard data
   const fetchDashboardData = useCallback(async () => {
-    console.log("Starting fetchDashboardData");
     try {
-      console.log("Setting loading state to true");
       dispatch(setLoading(true));
       dispatch(setError(null));
 
-      console.log("About to call hipaaComplianceService.createAuditLog");
       // Create HIPAA-compliant audit log
       await hipaaComplianceService.createAuditLog("DASHBOARD_ACCESS", {
         action: "VIEW",
@@ -153,9 +133,7 @@ const Dashboard = ({ onNavigate }) => {
         userId,
         timestamp: new Date().toISOString(),
       });
-      console.log("Audit log created successfully");
 
-      console.log("Setting dashboard data");
       // Set appropriate dashboard data based on role
       setDashboardData((prevData) => ({
         ...prevData,
@@ -163,9 +141,7 @@ const Dashboard = ({ onNavigate }) => {
         recentActivity: [],
         availableDatasets: userRole === "researcher" ? healthData || [] : [],
       }));
-      console.log("Dashboard data set successfully");
 
-      console.log("Setting loading state to false");
       dispatch(setLoading(false));
     } catch (err) {
       console.error("Dashboard data fetch error:", err);
@@ -178,10 +154,9 @@ const Dashboard = ({ onNavigate }) => {
         })
       );
 
-      console.log("Setting loading state to false after error");
       dispatch(setLoading(false));
     }
-  }, [userRole, userId, dispatch, healthData, userProfile.securityScore]);
+  }, [userRole, userId, dispatch, healthData]);
 
   // Fetch dashboard data when component mounts or when dependencies change
   useEffect(() => {
@@ -225,24 +200,42 @@ const Dashboard = ({ onNavigate }) => {
   // Handle record download (Patient dashboard)
   const handleDownloadRecord = useCallback(
     async (recordId) => {
-      setDownloadLoading(true);
-      executeAsync(async () => {
-        try {
-          await downloadRecord(recordId);
-  
-          // Log download for HIPAA compliance
-          await hipaaComplianceService.createAuditLog("RECORD_DOWNLOAD", {
-            action: "DOWNLOAD",
-            recordId,
-            timestamp: new Date().toISOString(),
-            userId
-          });
-        } finally {
-          setDownloadLoading(false);
-        }
-      });
+      try {
+        setDownloadLoading(true);
+        setDownloadingRecordId(recordId);
+
+        await hipaaComplianceService.createAuditLog("RECORD_DOWNLOAD", {
+          action: "DOWNLOAD",
+          recordId,
+          timestamp: new Date().toISOString(),
+          userId,
+        });
+
+        await downloadRecord(recordId);
+
+        // Show success notification
+        dispatch(
+          addNotification({
+            type: "success",
+            message: "Record downloaded successfully",
+          })
+        );
+      } catch (error) {
+        console.error("Download error:", error);
+
+        // Show error notification
+        dispatch(
+          addNotification({
+            type: "error",
+            message: "Failed to download record",
+          })
+        );
+      } finally {
+        setDownloadLoading(false);
+        setDownloadingRecordId(null);
+      }
     },
-    [executeAsync, downloadRecord, userId]
+    [downloadRecord, dispatch, userId]
   );
 
   // Handle share record (Patient dashboard)
@@ -418,21 +411,14 @@ const Dashboard = ({ onNavigate }) => {
   if (userRole === "patient") {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* User welcome with Role Switcher */}
-        <div className="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center">
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900">
-              Welcome, {userProfile?.name || "Patient"}
-            </h1>
-            <p className="text-gray-600">
-              Your patient dashboard for managing health data
-            </p>
-          </div>
-          
-          {/* Role Switcher Component */}
-          <div className="mt-4 md:mt-0">
-            <RoleSwitcher />
-          </div>
+        {/* User welcome */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-gray-900">
+            Welcome, {userProfile?.name || "Patient"}
+          </h1>
+          <p className="text-gray-600">
+            Your patient dashboard for managing health data
+          </p>
         </div>
 
         {/* Stats Grid */}
@@ -653,16 +639,20 @@ const Dashboard = ({ onNavigate }) => {
                     </button>
 
                     <button
-                      onClick={() => handleDownloadRecord(record)}
-                      disabled={downloadLoading}
+                      onClick={() => handleDownloadRecord(record.id)}
+                      disabled={
+                        downloadLoading && downloadingRecordId === record.id
+                      }
                       className={`flex items-center justify-center gap-2 px-4 py-2 ${
-                        downloadLoading
+                        downloadLoading && downloadingRecordId === record.id
                           ? "bg-gray-200 text-gray-500 cursor-not-allowed"
                           : "bg-blue-500 hover:bg-blue-600 text-white"
                       } rounded-lg`}
-                      aria-busy={downloadLoading}
+                      aria-busy={
+                        downloadLoading && downloadingRecordId === record.id
+                      }
                     >
-                      {downloadLoading ? (
+                      {downloadLoading && downloadingRecordId === record.id ? (
                         <LoadingSpinner size="small" color="gray" />
                       ) : (
                         <Download size={18} />
@@ -734,21 +724,14 @@ const Dashboard = ({ onNavigate }) => {
   // RESEARCHER DASHBOARD RENDER
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      {/* User welcome with Role Switcher */}
-      <div className="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900">
-            Welcome, {userProfile?.name || "Researcher"}
-          </h1>
-          <p className="text-gray-600">
-            Your researcher dashboard for discovering and analyzing health data
-          </p>
-        </div>
-        
-        {/* Role Switcher Component */}
-        <div className="mt-4 md:mt-0">
-          <RoleSwitcher />
-        </div>
+      {/* User welcome */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">
+          Welcome, {userProfile?.name || "Researcher"}
+        </h1>
+        <p className="text-gray-600">
+          Your researcher dashboard for discovering and analyzing health data
+        </p>
       </div>
 
       {/* Stats Grid */}
@@ -796,6 +779,14 @@ const Dashboard = ({ onNavigate }) => {
 
       {/* Quick Actions */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <button
+          onClick={() => handleNavigateTo("/browse")}
+          className="p-4 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2 font-medium"
+        >
+          <Database className="w-5 h-5" />
+          Browse Datasets
+        </button>
+
         <button
           onClick={() => handleNavigateTo("/studies")}
           className="p-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2 font-medium"
@@ -1105,7 +1096,7 @@ const Dashboard = ({ onNavigate }) => {
           </div>
         ) : (
           <div className="text-center py-8 text-gray-500">
-            No recent activity to display woooooo
+            No recent activity to display
           </div>
         )}
       </div>

From a5f15ca82cba4ce2bea392512fc79615baeab0d5 Mon Sep 17 00:00:00 2001
From: Theresa <ttnguyen1011@csu.fullerton.edu>
Date: Mon, 31 Mar 2025 10:44:34 -0700
Subject: [PATCH 3/7] resolving pull request conflict

---
 client/src/components/roles/RoleSelector.js | 364 +++++++++++---------
 1 file changed, 194 insertions(+), 170 deletions(-)

diff --git a/client/src/components/roles/RoleSelector.js b/client/src/components/roles/RoleSelector.js
index f7f55f4..443333d 100644
--- a/client/src/components/roles/RoleSelector.js
+++ b/client/src/components/roles/RoleSelector.js
@@ -1,92 +1,85 @@
-// client/src/components/roles/RoleSelector.js
+// src/components/roles/RoleSelector.js
 import React, { useState, useEffect, useCallback } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
-import { Loader, AlertCircle, LogIn } from "lucide-react";
+import { User, Microscope, Loader } from "lucide-react";
 import { setRole } from "../../redux/slices/roleSlice.js";
 import { addNotification } from "../../redux/slices/notificationSlice.js";
 import { updateUserProfile } from "../../redux/slices/userSlice.js";
 import hipaaComplianceService from "../../services/hipaaComplianceService.js";
-// Import authService properly - it's a default export based on the error messages
-import debugAuthState, { default as authServiceDefault } from "../../services/authService.js";
+import authService from "../../services/authService.js";
 import authUtils from "../../utils/authUtils.js";
+import WalletErrorNotification from "../WalletErrorNotification.js";
 
 /**
- * Unified Login and Role Selector Component
- * Now functions as a login page with role selection moved to dashboard
+ * Role Selector Component with improved navigation
  */
 const RoleSelector = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const location = useLocation();
 
-  // Form state for login
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  
+  // Get wallet address from Redux state
+  const walletAddress = useSelector((state) => state.wallet.address);
+
   // Local state
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [selectedRole, setSelectedRole] = useState(null);
   const [redirecting, setRedirecting] = useState(false);
   const [initialCheckComplete, setInitialCheckComplete] = useState(false);
 
-  // Check for an existing authenticated user
+  // Check for an existing role in localStorage or user profile
   useEffect(() => {
     // If we're already checking or redirecting, skip
     if (redirecting || initialCheckComplete) {
       return;
     }
 
-    const checkExistingUser = () => {
-      console.log("Checking for existing authentication...");
+    const checkExistingRole = () => {
+      console.log("Checking for existing role...");
 
       // First, check if we came from a redirect loop - if so, don't redirect again
       const fromPath = location.state?.from;
       if (fromPath === "/dashboard") {
-        console.log("Coming from dashboard, skipping auth redirect");
+        console.log("Coming from dashboard, skipping role redirect");
         setInitialCheckComplete(true);
         return false;
       }
 
       // Check if we have an explicit bypass flag
       if (sessionStorage.getItem("bypass_role_check") === "true") {
-        console.log("Bypassing auth check due to session flag");
+        console.log("Bypassing role check due to session flag");
         // Clear the flag after using it once
         sessionStorage.removeItem("bypass_role_check");
         setInitialCheckComplete(true);
         return false;
       }
 
-      // Check if user is already authenticated using localStorage directly
-      // since getCurrentUser isn't available according to error
-      try {
-        const userDataString = localStorage.getItem("healthmint_user_data");
-        if (userDataString) {
-          const userProfile = JSON.parse(userDataString);
-          if (userProfile && userProfile.token) {
-            console.log(`Existing authenticated user found: ${userProfile.email || userProfile.name}`);
-            
-            // Check for role
-            const userRole = userProfile.role || localStorage.getItem("healthmint_user_role");
-            if (userRole) {
-              console.log(`User role found: ${userRole}`);
-              dispatch(setRole(userRole));
-              return true;
-            }
-          }
-        }
-      } catch (e) {
-        console.error("Error checking user authentication:", e);
+      // Check user profile first
+      const userProfile = authService.getCurrentUser();
+      if (userProfile && userProfile.role) {
+        console.log(`Existing role found: ${userProfile.role}`);
+        dispatch(setRole(userProfile.role));
+        return true;
+      }
+
+      // Check localStorage as fallback
+      const storedRole = localStorage.getItem("healthmint_user_role");
+      if (storedRole) {
+        console.log(`Role found in localStorage: ${storedRole}`);
+        dispatch(setRole(storedRole));
+        return true;
       }
 
       setInitialCheckComplete(true);
       return false;
     };
 
-    const isAuthenticated = checkExistingUser();
+    const hasRole = checkExistingRole();
 
-    // If authenticated and we're not already redirecting, go to dashboard
-    if (isAuthenticated && !redirecting) {
+    // If role is detected and we're not already redirecting, go to dashboard
+    if (hasRole && !redirecting) {
       // Set a flag to prevent route protection loops
       sessionStorage.setItem("bypass_route_protection", "true");
 
@@ -99,72 +92,93 @@ const RoleSelector = () => {
     }
   }, [dispatch, navigate, redirecting, location.state, initialCheckComplete]);
 
+  // Check for wallet address
+  useEffect(() => {
+    // Try to get the wallet address from localStorage as fallback
+    const localStorageAddress = localStorage.getItem(
+      "healthmint_wallet_address"
+    );
+
+    if (!walletAddress && !localStorageAddress) {
+      setError("Wallet address not found. Please reconnect your wallet.");
+    } else if (
+      error === "Wallet address not found. Please reconnect your wallet."
+    ) {
+      // Clear any existing wallet error if we now have a wallet address
+      setError(null);
+    }
+  }, [walletAddress, error]);
+
   /**
-   * Handle login with custom implementation
+   * Handle role selection with improved user data persistence and error handling
    */
-  const handleLogin = useCallback(
-    async (e) => {
-      if (e) e.preventDefault();
-      
+  const handleRoleSelect = useCallback(
+    async (role) => {
       try {
         // Prevent multiple submissions
         if (loading) return;
 
         setLoading(true);
         setError(null);
+        setSelectedRole(role);
         setRedirecting(true);
 
-        // Basic validation
-        if (!email || !password) {
-          throw new Error("Please enter both email and password");
-        }
-
-        console.log(`Attempting login for: ${email}`);
+        console.log(`Setting role: ${role}`); // Debug log
 
         // Create a bypass flag to prevent infinite redirects
         sessionStorage.setItem("bypass_route_protection", "true");
+        sessionStorage.setItem("temp_selected_role", role);
 
-        // Since the real login function isn't available (based on error messages),
-        // we'll implement a simple login mechanism
-        
-        // Simulate authentication - in a real app, this would call your API
-        const userData = {
-          id: 'user-' + Math.random().toString(36).substring(2),
-          name: email.split('@')[0], // Use part of email as name
-          email: email,
-          token: 'token-' + Math.random().toString(36).substring(2),
-          roles: ['patient', 'researcher'],
-          lastLogin: new Date().toISOString()
-        };
-
-        // Audit login for HIPAA compliance
-        await hipaaComplianceService.createAuditLog("LOGIN", {
-          email,
+        // Audit role selection for HIPAA compliance
+        await hipaaComplianceService.createAuditLog("ROLE_SELECTION", {
+          role,
           timestamp: new Date().toISOString(),
-          action: "LOGIN",
+          action: "SELECT",
         });
 
-        // Set default role (can be changed in dashboard)
-        const defaultRole = "patient";
+        // Use the address from Redux state first, then fallback to localStorage
+        const currentWalletAddress =
+          walletAddress || localStorage.getItem("healthmint_wallet_address");
+
+        if (!currentWalletAddress) {
+          throw new Error(
+            "Wallet address not found. Please reconnect your wallet."
+          );
+        }
 
-        // Get wallet address if available
-        const walletAddress = localStorage.getItem("healthmint_wallet_address");
+        // Get current user data to merge with role
+        const userData = authService.getCurrentUser() || {};
 
-        // Update user data with role
         const updatedUserData = {
           ...userData,
-          role: defaultRole,
-          address: walletAddress,
+          name: userData.name || "User",
+          role,
+          address: currentWalletAddress,
           lastUpdated: new Date().toISOString(),
         };
 
-        // Store user data in localStorage since setUserData isn't available
-        localStorage.setItem("healthmint_user_data", JSON.stringify(updatedUserData));
-        localStorage.setItem("healthmint_user_role", defaultRole);
+        // Update user data in authService with more robust error handling
+        const registrationSuccess = authUtils.forceRegistrationComplete(
+          role,
+          currentWalletAddress,
+          updatedUserData
+        );
+
+        if (!registrationSuccess) {
+          console.error("Failed to complete registration via authUtils");
+          // Fallback method
+          authService.completeRegistration(updatedUserData);
+        }
+
+        // Explicitly set in localStorage for redundancy
+        localStorage.setItem("healthmint_user_role", role);
         localStorage.setItem("healthmint_is_new_user", "false");
 
+        // Make sure the wallet connection is marked as true
+        localStorage.setItem("healthmint_wallet_connection", "true");
+
         // Dispatch role selection action to Redux
-        dispatch(setRole(defaultRole));
+        dispatch(setRole(role));
 
         // Update user profile with role information
         dispatch(updateUserProfile(updatedUserData));
@@ -173,24 +187,24 @@ const RoleSelector = () => {
         dispatch(
           addNotification({
             type: "success",
-            message: "Login successful! You can now switch between Patient and Researcher views in the dashboard.",
-            duration: 5000,
+            message: `Successfully set role as ${role === "patient" ? "Patient" : "Researcher"}`,
+            duration: 3000,
           })
         );
 
-        // Navigate to dashboard
+        // Use React Router navigation with a state flag to prevent loops
         navigate("/dashboard", {
           replace: true,
-          state: { loginJustCompleted: true },
+          state: { roleJustSelected: true },
         });
       } catch (err) {
-        console.error("Login error:", err);
-        setError(err.message || "Login failed. Please try again.");
+        console.error("Role selection error:", err);
+        setError(err.message || "Failed to set role. Please try again.");
 
         dispatch(
           addNotification({
             type: "error",
-            message: err.message || "Login failed. Please try again.",
+            message: err.message || "Failed to set role. Please try again.",
           })
         );
 
@@ -199,109 +213,119 @@ const RoleSelector = () => {
 
         // Clear any bypass flags on error
         sessionStorage.removeItem("bypass_route_protection");
+        sessionStorage.removeItem("temp_selected_role");
       }
     },
-    [dispatch, loading, navigate, email, password]
+    [dispatch, loading, navigate, walletAddress]
   );
 
-  // Show login form instead of role selection
+  // Handle error notification close
+  const handleErrorClose = () => {
+    setError(null);
+  };
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
-      {error && (
-        <div className="fixed top-4 right-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg shadow-md flex items-center gap-2">
-          <AlertCircle size={20} className="flex-shrink-0 text-red-500" />
-          <span>{error}</span>
-        </div>
+      {/* Error notification popup */}
+      {error && error.includes("Wallet address not found") && (
+        <WalletErrorNotification
+          message={error}
+          isVisible={true}
+          onClose={handleErrorClose}
+          autoRedirect={false}
+        />
       )}
 
-      <div className="max-w-md w-full">
+      <div className="max-w-4xl w-full">
         <div className="mb-8 text-center">
-          <h1 className="text-3xl font-bold mb-2">Welcome to Healthmint</h1>
+          <h1 className="text-3xl font-bold mb-2">Choose Your Role</h1>
           <p className="text-gray-600">
-            Sign in to access the Healthmint platform
+            Select how you want to use the Healthmint platform
           </p>
         </div>
 
-        <div className="bg-white rounded-lg shadow-md p-8">
-          <form onSubmit={handleLogin}>
-            <div className="mb-4">
-              <label 
-                htmlFor="email" 
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Email
-              </label>
-              <input
-                id="email"
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Enter your email"
-                required
+        <div className="flex flex-col md:flex-row gap-6 justify-center items-stretch">
+          {/* Patient Card */}
+          <div
+            className={`w-full md:w-1/2 bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1 ${
+              selectedRole === "patient" ? "ring-2 ring-blue-500" : ""
+            } ${loading ? "opacity-75 pointer-events-none" : ""}`}
+            onClick={() => !loading && handleRoleSelect("patient")}
+          >
+            <div className="p-8 flex flex-col items-center gap-4 h-full">
+              <div className="bg-blue-50 p-4 rounded-full">
+                <User className="w-12 h-12 text-blue-500" />
+              </div>
+              <h2 className="text-2xl font-semibold text-gray-800">Patient</h2>
+              <p className="text-sm text-gray-600 text-center leading-relaxed flex-grow">
+                Share and manage your health data securely on the blockchain.
+                Control access to your records and potentially earn rewards for
+                contributing to medical research.
+              </p>
+              <button
+                className={`w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors mt-2 flex items-center justify-center ${
+                  loading ? "opacity-75 cursor-not-allowed" : ""
+                }`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  !loading && handleRoleSelect("patient");
+                }}
                 disabled={loading}
-              />
-            </div>
-            
-            <div className="mb-6">
-              <label 
-                htmlFor="password" 
-                className="block text-sm font-medium text-gray-700 mb-1"
+                aria-label="Select Patient Role"
               >
-                Password
-              </label>
-              <input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Enter your password"
-                required
-                disabled={loading}
-              />
+                {loading && selectedRole === "patient" ? (
+                  <>
+                    <Loader className="w-4 h-4 mr-2 animate-spin" />
+                    Setting Patient Role...
+                  </>
+                ) : (
+                  "Select Patient Role"
+                )}
+              </button>
             </div>
-            
-            <button
-              type="submit"
-              className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center"
-              disabled={loading}
-            >
-              {loading ? (
-                <>
-                  <Loader className="w-4 h-4 mr-2 animate-spin" />
-                  Signing in...
-                </>
-              ) : (
-                <>
-                  <LogIn className="w-4 h-4 mr-2" />
-                  Sign In
-                </>
-              )}
-            </button>
-            
-            <div className="mt-4 text-center text-sm">
-              <a 
-                href="/forgot-password" 
-                className="text-blue-600 hover:text-blue-800"
-              >
-                Forgot password?
-              </a>
-              <span className="mx-2 text-gray-500">•</span>
-              <a 
-                href="/register" 
-                className="text-blue-600 hover:text-blue-800"
+          </div>
+
+          {/* Researcher Card */}
+          <div
+            className={`w-full md:w-1/2 bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1 ${
+              selectedRole === "researcher" ? "ring-2 ring-purple-500" : ""
+            } ${loading ? "opacity-75 pointer-events-none" : ""}`}
+            onClick={() => !loading && handleRoleSelect("researcher")}
+          >
+            <div className="p-8 flex flex-col items-center gap-4 h-full">
+              <div className="bg-purple-50 p-4 rounded-full">
+                <Microscope className="w-12 h-12 text-purple-500" />
+              </div>
+              <h2 className="text-2xl font-semibold text-gray-800">
+                Researcher
+              </h2>
+              <p className="text-sm text-gray-600 text-center leading-relaxed flex-grow">
+                Access and analyze anonymized health data for research purposes.
+                Discover patterns, conduct studies, and contribute to medical
+                advancements with blockchain-verified data integrity.
+              </p>
+              <button
+                className={`w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-4 rounded-lg transition-colors mt-2 flex items-center justify-center ${
+                  loading ? "opacity-75 cursor-not-allowed" : ""
+                }`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  !loading && handleRoleSelect("researcher");
+                }}
+                disabled={loading}
+                aria-label="Select Researcher Role"
               >
-                Create an account
-              </a>
+                {loading && selectedRole === "researcher" ? (
+                  <>
+                    <Loader className="w-4 h-4 mr-2 animate-spin" />
+                    Setting Researcher Role...
+                  </>
+                ) : (
+                  "Select Researcher Role"
+                )}
+              </button>
             </div>
-          </form>
-        </div>
-        
-        <div className="mt-6 text-center text-sm text-gray-500">
-          <p>
-            After login, you'll be able to choose between Patient and Researcher views from the dashboard.
-          </p>
+          </div>
         </div>
       </div>
     </div>

From ce83be4cbececf6943aebdd8158e35e12a2d1ff7 Mon Sep 17 00:00:00 2001
From: Theresa <ttnguyen1011@csu.fullerton.edu>
Date: Mon, 31 Mar 2025 19:20:54 -0700
Subject: [PATCH 4/7] patching logDataAcess problem for researchers requesting
 access to dataset

---
 client/src/components/DataBrowser.js          | 38 +++++++++++
 .../providers/HipaaComplianceProvider.js      | 10 ++-
 client/src/services/hipaaComplianceService.js | 67 +++++++++++++++++++
 3 files changed, 114 insertions(+), 1 deletion(-)

diff --git a/client/src/components/DataBrowser.js b/client/src/components/DataBrowser.js
index abea250..1ab65fe 100755
--- a/client/src/components/DataBrowser.js
+++ b/client/src/components/DataBrowser.js
@@ -7,6 +7,44 @@ import { addNotification } from "../redux/slices/notificationSlice.js";
 import hipaaComplianceService from "../services/hipaaComplianceService.js";
 import DataBrowserView from "./DataBrowserView.js";
 
+if (!hipaaComplianceService.logDataAccess) {
+  hipaaComplianceService.logDataAccess = async function(dataId, purpose, action, metadata = {}) {
+    try {
+      // Create the audit log entry
+      const logEntry = {
+        dataId,
+        purpose,
+        action,
+        timestamp: new Date().toISOString(),
+        userId: metadata.userId || 'unknown',
+        ...metadata,
+      };
+      
+      // Use the createAuditLog method which we know exists
+      await this.createAuditLog('DATA_ACCESS', {
+        dataId,
+        purpose,
+        action,
+        ...metadata,
+        timestamp: new Date().toISOString(),
+      });
+      
+      console.log('[HIPAA] Data access logged:', { 
+        dataId, 
+        action, 
+        purpose,
+        timestamp: logEntry.timestamp
+      });
+      
+      return logEntry;
+    } catch (error) {
+      console.error('[HIPAA] Error logging data access:', error);
+      // Return an empty object instead of throwing to prevent crashes
+      return {};
+    }
+  };
+}
+
 // Categories from backend
 const CATEGORIES = [
   "All",
diff --git a/client/src/components/providers/HipaaComplianceProvider.js b/client/src/components/providers/HipaaComplianceProvider.js
index 209a77f..4179301 100644
--- a/client/src/components/providers/HipaaComplianceProvider.js
+++ b/client/src/components/providers/HipaaComplianceProvider.js
@@ -1,6 +1,7 @@
 // src/components/providers/HipaaComplianceProvider.js
 import React, { createContext, useContext } from "react";
 import PropTypes from "prop-types";
+import hipaaComplianceService from "../../services/hipaaComplianceService.js";
 import useHipaaCompliance from "../../hooks/useHipaaCompliance.js";
 
 // Create context for HIPAA compliance
@@ -16,6 +17,13 @@ export const HipaaComplianceProvider = ({ children, options = {} }) => {
   // Use the hook to get all HIPAA functionality
   const hipaaCompliance = useHipaaCompliance(options);
 
+  // The error suggests that when importing hipaaComplianceService directly in other 
+  // components, the logDataAccess method might not be correctly attached to it
+  // Let's ensure the service itself has the method properly attached
+  if (!hipaaComplianceService.logDataAccess) {
+    hipaaComplianceService.logDataAccess = hipaaCompliance.logDataAccess;
+  }
+
   return (
     <HipaaComplianceContext.Provider value={hipaaCompliance}>
       {children}
@@ -49,4 +57,4 @@ export const useHipaaContext = () => {
   return context;
 };
 
-export default HipaaComplianceProvider;
+export default HipaaComplianceProvider;
\ No newline at end of file
diff --git a/client/src/services/hipaaComplianceService.js b/client/src/services/hipaaComplianceService.js
index 2369cca..ece124f 100644
--- a/client/src/services/hipaaComplianceService.js
+++ b/client/src/services/hipaaComplianceService.js
@@ -920,4 +920,71 @@ class HipaaComplianceService {
 
 // Create and export singleton instance
 const hipaaComplianceService = new HipaaComplianceService();
+
+// Emergency patching for direct imports
+// Some components might be importing the service directly rather than using the context
+if (!hipaaComplianceService.logDataAccess) {
+  /**
+   * Log data access for HIPAA compliance
+   * 
+   * @param {string} dataId - ID of the accessed data
+   * @param {string} purpose - Purpose of access
+   * @param {string} action - Type of action (VIEW, DOWNLOAD, etc.)
+   * @param {Object} metadata - Additional metadata for the access log
+   * @returns {Promise<Object>} - The created audit log entry
+   */
+  hipaaComplianceService.logDataAccess = async function(dataId, purpose, action, metadata = {}) {
+    try {
+      // Create the audit log entry
+      const logEntry = {
+        dataId,
+        purpose,
+        action,
+        timestamp: new Date().toISOString(),
+        userId: metadata.userId || 'unknown',
+        ...metadata,
+      };
+      
+      // Use the existing createAuditLog method to log the access
+      await this.createAuditLog('DATA_ACCESS', {
+        dataId,
+        purpose,
+        action,
+        ...metadata,
+        timestamp: new Date().toISOString(),
+      });
+      
+      console.log('[HIPAA] Data access logged:', { 
+        dataId, 
+        action, 
+        purpose,
+        timestamp: logEntry.timestamp
+      });
+      
+      return logEntry;
+    } catch (error) {
+      console.error('[HIPAA] Error logging data access:', error);
+      throw new Error('Failed to log data access for HIPAA compliance');
+    }
+  };
+}
+
+// Ensure required methods exist
+if (!hipaaComplianceService.logFieldAccess) {
+  hipaaComplianceService.logFieldAccess = async function(dataId, fieldPath, purpose) {
+    try {
+      await this.createAuditLog('FIELD_ACCESS', {
+        dataId,
+        fieldPath,
+        purpose,
+        timestamp: new Date().toISOString(),
+      });
+      return true;
+    } catch (error) {
+      console.error('[HIPAA] Error logging field access:', error);
+      return false;
+    }
+  };
+}
+
 export default hipaaComplianceService;

From 272d50f758b98e77712f247ba520e378fce6aa2f Mon Sep 17 00:00:00 2001
From: Theresa <ttnguyen1011@csu.fullerton.edu>
Date: Tue, 1 Apr 2025 00:13:54 -0700
Subject: [PATCH 5/7] resolving conflict for hipaaComplianceService.js

---
 client/src/services/hipaaComplianceService.js | 1126 ++++-------------
 1 file changed, 243 insertions(+), 883 deletions(-)

diff --git a/client/src/services/hipaaComplianceService.js b/client/src/services/hipaaComplianceService.js
index ece124f..b711410 100644
--- a/client/src/services/hipaaComplianceService.js
+++ b/client/src/services/hipaaComplianceService.js
@@ -1,990 +1,350 @@
-// src/services/hipaaComplianceService.js
-import apiService from "../services/apiService.js";
-import authService from "../services/authService.js";
-import { store } from "../redux/store.js";
-import { addNotification } from "../redux/slices/notificationSlice.js";
-import CryptoJS from "crypto-js";
-
+// client/src/services/hipaaComplianceService.js
 /**
- * Client-side HIPAA Compliance Service
+ * HIPAA Compliance Service
  *
- * Implements HIPAA compliance standards for client-side operations, mirroring
- * server-side standards and ensuring consistent application of HIPAA requirements.
+ * Handles all HIPAA compliance requirements for the application:
+ * - Audit logging
+ * - Consent management
+ * - Data sanitization
+ * - De-identification verification
  */
-class HipaaComplianceService {
-  constructor() {
-    // Constants for PHI identification
-    this.PHI_PATTERNS = {
-      ssn: /\b(?!000|666|9\d{2})\d{3}-(?!00)\d{2}-(?!0000)\d{4}\b/,
-      email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-      phone: /\b\+?1?\s*\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}\b/,
-      dob: /\b\d{1,2}\/\d{1,2}\/\d{2,4}\b/,
-      medicalRecordNumber: /\b[A-Z]{2,3}\d{6,10}\b/,
-      zipCode: /\b\d{5}(?:-\d{4})?\b/,
-    };
-
-    // HIPAA-sensitive field names to watch for
-    this.PHI_FIELDS = [
-      "name",
-      "firstName",
-      "lastName",
-      "email",
-      "address",
-      "phone",
-      "dob",
-      "dateOfBirth",
-      "age",
-      "ssn",
-      "socialSecurityNumber",
-      "medicalRecordNumber",
-      "insuranceId",
-      "diagnosis",
-      "treatment",
-      "medication",
-    ];
-
-    // Consent types for tracking
-    this.CONSENT_TYPES = {
-      DATA_SHARING: "data_sharing",
-      RESEARCH: "research",
-      MARKETING: "marketing",
-      THIRD_PARTY: "third_party",
-      EMERGENCY: "emergency",
-    };
-
-    // Encryption settings - can be tuned according to requirements
-    this.ENCRYPTION_CONFIG = {
-      algorithm: "AES",
-      keySize: 256,
-      iterations: 1000,
-    };
-
-    // Field-specific sanitization rules
-    this.SANITIZATION_RULES = {
-      default: (value) => (typeof value === "string" ? value.trim() : value),
-      email: (value) =>
-        typeof value === "string" ? value.toLowerCase().trim() : value,
-      age: (value) => {
-        const age = parseInt(value);
-        // Age ranges for de-identification
-        if (age >= 90) return "90+";
-        return age;
-      },
-      zipCode: (value) =>
-        typeof value === "string" ? value.substring(0, 3) + "**" : value,
-    };
-  }
-
-  /**
-   * Sanitizes data according to HIPAA guidelines, removing or obscuring PHI
-   * @param {Object} data - The data to sanitize
-   * @param {Object} options - Sanitization options
-   * @returns {Object} Sanitized data
-   */
-  sanitizeData(data, options = {}) {
-    if (!data) return null;
-
-    // Handle arrays
-    if (Array.isArray(data)) {
-      return data.map((item) => this.sanitizeData(item, options));
-    }
-
-    // Handle primitives
-    if (typeof data !== "object" || data === null) {
-      return data;
-    }
-
-    const sanitized = {};
-    const {
-      mode = "default",
-      includeFields = [],
-      excludeFields = [],
-    } = options;
-
-    // Process each field in the object
-    for (const [key, value] of Object.entries(data)) {
-      // Skip excluded fields
-      if (excludeFields.includes(key)) continue;
-
-      // Include specific fields only if includeFields is provided
-      if (includeFields.length > 0 && !includeFields.includes(key)) continue;
-
-      // Apply sanitization based on field type
-      if (this.PHI_FIELDS.includes(key)) {
-        if (mode === "redact") {
-          // Redact PHI fields (replace with type indicator)
-          sanitized[key] =
-            typeof value === "string"
-              ? `[REDACTED ${key.toUpperCase()}]`
-              : null;
-        } else if (mode === "mask") {
-          // Mask PHI fields (partial obfuscation)
-          sanitized[key] = this.maskField(key, value);
-        } else {
-          // Apply field-specific sanitization
-          sanitized[key] = this.sanitizeField(key, value);
-        }
-      } else if (typeof value === "object" && value !== null) {
-        // Recursively sanitize nested objects
-        sanitized[key] = this.sanitizeData(value, options);
-      } else {
-        // Pass through non-PHI fields
-        sanitized[key] = value;
-      }
-    }
-
-    return sanitized;
-  }
 
-  /**
-   * Applies field-specific sanitization rules
-   * @param {string} fieldName - The name of the field
-   * @param {any} value - The field value
-   * @returns {any} Sanitized value
-   */
-  sanitizeField(fieldName, value) {
-    const rule =
-      this.SANITIZATION_RULES[fieldName] || this.SANITIZATION_RULES.default;
-    return rule(value);
-  }
+const CONSENT_TYPES = {
+  DATA_SHARING: "data_sharing",
+  DATA_BROWSING: "data_browsing",
+  RESEARCH_PARTICIPATION: "research_participation",
+  MARKETING: "marketing",
+};
 
-  /**
-   * Masks a field value based on field type
-   * @param {string} fieldName - The name of the field
-   * @param {any} value - The field value
-   * @returns {string} Masked value
-   */
-  maskField(fieldName, value) {
-    if (typeof value !== "string" || !value) return value;
-
-    switch (fieldName) {
-      case "email":
-        const [username, domain] = value.split("@");
-        return `${username.charAt(0)}${"*".repeat(username.length - 2)}${username.charAt(username.length - 1)}@${domain}`;
-
-      case "phone":
-        // Mask middle digits of phone numbers
-        return value.replace(/(\d{3})\d{4}(\d{3})/, "$1****$2");
-
-      case "name":
-      case "firstName":
-      case "lastName":
-        // Keep first letter, mask the rest
-        return value.charAt(0) + "*".repeat(value.length - 1);
-
-      case "ssn":
-      case "socialSecurityNumber":
-        // Only show last 4 digits
-        return "xxx-xx-" + value.slice(-4);
-
-      case "dob":
-      case "dateOfBirth":
-        // Mask day, keep month and year
-        return value.replace(/(\d{1,2})\/(\d{1,2})\/(\d{2,4})/, "$1/*/$3");
-
-      default:
-        // Default masking for other fields
-        if (value.length <= 2) return value;
-        return (
-          value.charAt(0) +
-          "*".repeat(value.length - 2) +
-          value.charAt(value.length - 1)
-        );
-    }
+class HipaaComplianceService {
+  constructor() {
+    this.CONSENT_TYPES = CONSENT_TYPES;
+    this.consentHistory = {};
+    this.auditTrail = [];
+    this.initialized = false;
   }
 
   /**
-   * Checks if a string contains potential PHI
-   * @param {string} text - Text to check
-   * @returns {Object} Results with PHI types found
+   * Initialize the service
    */
-  containsPHI(text) {
-    if (typeof text !== "string") return { hasPHI: false, types: [] };
-
-    const detectedTypes = [];
+  init() {
+    if (this.initialized) return;
 
-    for (const [type, pattern] of Object.entries(this.PHI_PATTERNS)) {
-      if (pattern.test(text)) {
-        detectedTypes.push(type);
+    // Load any stored consent records from localStorage
+    try {
+      const storedConsent = localStorage.getItem("healthmint_consent_history");
+      if (storedConsent) {
+        this.consentHistory = JSON.parse(storedConsent);
       }
+    } catch (err) {
+      console.error("Failed to load consent history:", err);
+      this.consentHistory = {};
     }
 
-    return {
-      hasPHI: detectedTypes.length > 0,
-      types: detectedTypes,
-    };
+    this.initialized = true;
   }
 
   /**
-   * Creates an audit log entry for HIPAA compliance
-   * @param {string} action - The action being performed
-   * @param {Object} details - Details about the action
-   * @returns {Promise<Object>} Audit log entry result
+   * Create an audit log entry
+   * @param {string} eventType - Type of event to log
+   * @param {Object} metadata - Additional metadata about the event
+   * @returns {Promise<Object>} - The created audit log
    */
-  async createAuditLog(action, details = {}) {
+  async createAuditLog(eventType, metadata = {}) {
     try {
-      const user = authService.getCurrentUser();
-      const logEntry = {
-        action,
+      // Ensure service is initialized
+      this.init();
+
+      const auditEntry = {
+        eventType,
         timestamp: new Date().toISOString(),
-        user: user
-          ? user.address
-          : details.walletAddress || details.userId || "anonymous",
-        userAgent: navigator.userAgent,
-        details,
+        ...metadata,
       };
 
-      // For sensitive actions, send to server immediately if possible
-      if (this.isSensitiveAction(action)) {
-        try {
-          if (authService.getToken()) {
-            // If authenticated, send to server
-            return await apiService.post("/api/audit/log", logEntry);
-          } else {
-            // If not authenticated but during registration, queue for later
-            console.log(
-              "Sensitive action during registration - storing locally:",
-              action
-            );
-            this.storeLocalAuditLog(action, details);
-            return { success: true, stored: true };
-          }
-        } catch (apiError) {
-          console.warn(
-            "Failed to send audit log to server, storing locally:",
-            apiError
-          );
-          this.storeLocalAuditLog(action, details);
-          return { success: true, stored: true };
-        }
-      } else {
-        // Queue less sensitive actions for batch processing
-        this.queueAuditLog(logEntry);
-        return { success: true, queued: true };
-      }
-    } catch (error) {
-      console.error("Audit logging error:", error);
-
-      // Store locally if server is unavailable
-      this.storeLocalAuditLog(action, details);
+      // Add to local audit trail for debugging
+      this.auditTrail.push(auditEntry);
 
-      // Track failed logs to retry later
-      this.addToRetryQueue({
-        action,
-        details,
-        timestamp: new Date().toISOString(),
-        attempts: 1,
-      });
+      // In production, this would send to server
+      if (process.env.NODE_ENV === "production") {
+        // Implementation would send to server
+        // await apiClient.post('/api/hipaa/audit', auditEntry);
+      }
 
-      return { success: false, stored: true, error: error.message };
+      return auditEntry;
+    } catch (err) {
+      console.error("Error creating audit log:", err);
+      return null;
     }
   }
 
   /**
-   * Determines if an action is sensitive enough to require immediate logging
-   * @param {string} action - The action to check
-   * @returns {boolean} Whether the action is sensitive
+   * Log data access for HIPAA compliance
+   * @param {string} dataId - ID of the accessed data
+   * @param {string} purpose - Purpose of access
+   * @param {string} action - Action performed (VIEW, DOWNLOAD, etc.)
+   * @param {Object} metadata - Additional metadata
+   * @returns {Promise<Object>} - The created access log
    */
-  isSensitiveAction(action) {
-    const sensitiveActions = [
-      "PHI_ACCESS",
-      "PHI_DOWNLOAD",
-      "PHI_EXPORT",
-      "CONSENT_CHANGE",
-      "EMERGENCY_ACCESS",
-      "AUTHORIZATION_FAILURE",
-      "DATA_BREACH_ATTEMPT",
-    ];
-
-    return sensitiveActions.includes(action);
+  async logDataAccess(dataId, purpose, action, metadata = {}) {
+    return this.createAuditLog("DATA_ACCESS", {
+      dataId,
+      purpose,
+      action,
+      ...metadata,
+    });
   }
 
   /**
-   * Queue audit log for batch processing
-   * @param {Object} logEntry - The log entry to queue
+   * Log specific field access for detailed HIPAA audit trail
+   * @param {string} dataId - ID of the data container
+   * @param {string} fieldPath - Path to the accessed field
+   * @param {string} purpose - Purpose of access
+   * @returns {Promise<Object>} - The created field access log
    */
-  queueAuditLog(logEntry) {
-    const queue = JSON.parse(
-      sessionStorage.getItem("hipaa_audit_queue") || "[]"
-    );
-    queue.push(logEntry);
-
-    // Limit queue size
-    if (queue.length > 50) queue.shift();
-
-    sessionStorage.setItem("hipaa_audit_queue", JSON.stringify(queue));
-
-    // Process queue if it gets large
-    if (queue.length >= 10) {
-      this.processAuditLogQueue();
-    }
+  async logFieldAccess(dataId, fieldPath, purpose) {
+    return this.createAuditLog("FIELD_ACCESS", {
+      dataId,
+      fieldPath,
+      purpose,
+    });
   }
 
   /**
-   * Process queued audit logs
-   * @returns {Promise<Object>} Processing result
+   * Record user consent
+   * @param {string} consentType - Type of consent from CONSENT_TYPES
+   * @param {boolean} consentGiven - Whether consent was given
+   * @param {Object} metadata - Additional metadata about the consent
+   * @returns {Promise<Object>} - The recorded consent
    */
-  async processAuditLogQueue() {
-    const queue = JSON.parse(
-      sessionStorage.getItem("hipaa_audit_queue") || "[]"
-    );
-    if (queue.length === 0) return { success: true, processed: 0 };
-
+  async recordConsent(consentType, consentGiven, metadata = {}) {
     try {
-      sessionStorage.setItem("hipaa_audit_queue", "[]");
-      return { success: true, processed: queue.length };
-    } catch (error) {
-      console.error("Failed to process audit log queue:", error);
-      return { success: false, error: error.message };
-    }
-  }
+      // Ensure service is initialized
+      this.init();
 
-  /**
-   * Store audit logs locally if server is unavailable
-   * @param {string} action - The action being performed
-   * @param {Object} details - Details about the action
-   */
-  storeLocalAuditLog(action, details) {
-    try {
-      const logs = JSON.parse(
-        localStorage.getItem("hipaa_local_audit_logs") || "[]"
-      );
-      logs.push({
-        action,
+      const consentRecord = {
+        consentType,
+        consentGiven,
         timestamp: new Date().toISOString(),
-        details,
-      });
+        ...metadata,
+      };
 
-      // Limit size to prevent storage issues
-      if (logs.length > 100) logs.shift();
+      // Store in local history
+      if (!this.consentHistory[consentType]) {
+        this.consentHistory[consentType] = [];
+      }
 
-      localStorage.setItem("hipaa_local_audit_logs", JSON.stringify(logs));
-    } catch (error) {
-      console.error("Failed to store local audit log:", error);
-    }
-  }
+      this.consentHistory[consentType].push(consentRecord);
 
-  /**
-   * Add a failed log to the retry queue
-   * @param {Object} logEntry - Log entry to retry
-   */
-  addToRetryQueue(logEntry) {
-    try {
-      const retryQueue = JSON.parse(
-        localStorage.getItem("hipaa_audit_retry_queue") || "[]"
-      );
-      retryQueue.push(logEntry);
+      // Save to localStorage for persistence
+      try {
+        localStorage.setItem(
+          "healthmint_consent_history",
+          JSON.stringify(this.consentHistory)
+        );
+      } catch (err) {
+        console.error("Error saving consent to localStorage:", err);
+      }
 
-      // Limit queue size
-      if (retryQueue.length > 50) retryQueue.shift();
+      // Log the consent for HIPAA compliance
+      await this.createAuditLog("CONSENT_RECORDED", {
+        consentType,
+        consentGiven,
+        ...metadata,
+      });
 
-      localStorage.setItem(
-        "hipaa_audit_retry_queue",
-        JSON.stringify(retryQueue)
-      );
-    } catch (error) {
-      console.error("Failed to add to retry queue:", error);
+      return consentRecord;
+    } catch (err) {
+      console.error("Error recording consent:", err);
+      return null;
     }
   }
 
   /**
-   * Process retry queue for failed audit logs
-   * @returns {Promise<Object>} Processing result
+   * Get consent history for a specific type
+   * @param {string} consentType - Type of consent from CONSENT_TYPES
+   * @returns {Array} - Array of consent records
    */
-  async processRetryQueue() {
-    const retryQueue = JSON.parse(
-      localStorage.getItem("hipaa_audit_retry_queue") || "[]"
-    );
-    if (retryQueue.length === 0) return { success: true, processed: 0 };
-
-    const successfulRetries = [];
-    const failedRetries = [];
-
-    for (const entry of retryQueue) {
-      try {
-        // Retry with exponential backoff
-        if (entry.attempts > 5) {
-          // Too many attempts, consider it failed permanently
-          failedRetries.push(entry);
-          continue;
-        }
-
-        await apiService.post("/api/audit/log", {
-          action: entry.action,
-          timestamp: entry.timestamp,
-          details: entry.details,
-          retryCount: entry.attempts,
-        });
-
-        successfulRetries.push(entry);
-      } catch (error) {
-        entry.attempts += 1;
-        entry.lastAttempt = new Date().toISOString();
-        failedRetries.push(entry);
-      }
-    }
-
-    // Update retry queue with remaining failed entries
-    localStorage.setItem(
-      "hipaa_audit_retry_queue",
-      JSON.stringify(failedRetries)
-    );
-
-    return {
-      success: true,
-      processed: successfulRetries.length,
-      remaining: failedRetries.length,
-    };
+  getConsentHistory(consentType) {
+    this.init();
+    return this.consentHistory[consentType] || [];
   }
 
-  // Modified recordConsent method for hipaaComplianceService.js
-  // Replace the existing recordConsent method with this version
-
   /**
-   * Records user consent for data usage
-   * @param {string} consentType - Type of consent
-   * @param {boolean} granted - Whether consent was granted
-   * @param {Object} details - Additional details
-   * @returns {Promise<Object>} Result of consent recording
+   * Verify if user has consented to a specific action
+   * @param {string} consentType - Type of consent from CONSENT_TYPES
+   * @param {Object} metadata - Additional context for request
+   * @returns {Promise<boolean>} - Whether consent has been given
    */
-  async recordConsent(consentType, granted, details = {}) {
-    if (!Object.values(this.CONSENT_TYPES).includes(consentType)) {
-      throw new Error(`Invalid consent type: ${consentType}`);
-    }
-
+  async verifyConsent(consentType, metadata = {}) {
     try {
-      // Get user info - fallback to details if not authenticated
-      const user = authService.getCurrentUser();
-      const userAddress = user?.address || details.userId || "anonymous";
-
-      // Only throw if there's no user AND no userId in details
-      if (!user && !details.userId && !details.walletAddress) {
-        console.warn(
-          "Recording consent for unauthenticated user with fallback ID"
-        );
-      }
+      // Ensure service is initialized
+      this.init();
 
-      const consentData = {
+      // Log the verification attempt
+      await this.createAuditLog("CONSENT_VERIFICATION", {
         consentType,
-        granted,
-        timestamp: new Date().toISOString(),
-        userAddress: details.walletAddress || userAddress,
-        details,
-      };
+        ...metadata,
+      });
 
-      // Create immutable audit log entry for consent
-      await this.createAuditLog(
-        granted ? "CONSENT_GRANTED" : "CONSENT_REVOKED",
-        {
-          consentType,
-          details,
-          userAddress: details.walletAddress || userAddress,
-        }
-      );
+      // Get consent history for this type
+      const consentHistory = this.getConsentHistory(consentType);
 
-      // Store consent with server - when available
-      let response = { success: true };
-      try {
-        // Make API call if authenticated
-        if (authService.getToken()) {
-          response = await apiService.post("/api/user/consent", consentData);
-        } else {
-          // Otherwise just log it
-          console.log("No auth token available - storing consent locally only");
-        }
-      } catch (apiError) {
-        console.warn(
-          "Failed to save consent to server, storing locally only:",
-          apiError
-        );
+      // If no consent history, return false to prompt for consent
+      if (!consentHistory || consentHistory.length === 0) {
+        return false;
       }
 
-      // Also store locally for quick access
-      this.updateLocalConsent(consentType, granted, details);
-
-      return response;
-    } catch (error) {
-      console.error("Consent recording error:", error);
-
-      // Notify user of consent recording failure
-      if (store && store.dispatch) {
-        store.dispatch(
-          addNotification({
-            type: "error",
-            message: `Failed to record your consent preference. Please try again.`,
-            duration: 5000,
-          })
-        );
-      }
+      // Find the most recent consent record
+      const sortedConsent = [...consentHistory].sort(
+        (a, b) => new Date(b.timestamp) - new Date(a.timestamp)
+      );
 
-      throw error;
-    }
-  }
+      const latestConsent = sortedConsent[0];
 
-  /**
-   * Updates local consent storage
-   * @param {string} consentType - Type of consent
-   * @param {boolean} granted - Whether consent was granted
-   * @param {Object} details - Additional details
-   */
-  updateLocalConsent(consentType, granted, details = {}) {
-    try {
-      const consents = JSON.parse(
-        localStorage.getItem("hipaa_user_consents") || "{}"
-      );
+      // Check if consent was given
+      if (!latestConsent.consentGiven) {
+        return false;
+      }
 
-      consents[consentType] = {
-        granted,
-        timestamp: new Date().toISOString(),
-        details,
-      };
+      // Check if consent has expired (30 days)
+      const consentDate = new Date(latestConsent.timestamp);
+      const now = new Date();
+      const daysSinceConsent = (now - consentDate) / (1000 * 60 * 60 * 24);
 
-      localStorage.setItem("hipaa_user_consents", JSON.stringify(consents));
-    } catch (error) {
-      console.error("Failed to update local consent:", error);
-    }
-  }
+      // If more than 30 days, consent has expired
+      if (daysSinceConsent > 30) {
+        return false;
+      }
 
-  /**
-   * Checks if user has given consent for a specific purpose
-   * @param {string} consentType - Type of consent to check
-   * @returns {boolean} Whether consent has been granted
-   */
-  hasConsent(consentType) {
-    try {
-      const consents = JSON.parse(
-        localStorage.getItem("hipaa_user_consents") || "{}"
-      );
-      return consents[consentType]?.granted === true;
-    } catch (error) {
-      console.error("Failed to check consent:", error);
+      // If we got here, consent is valid
+      return true;
+    } catch (err) {
+      console.error("Error verifying consent:", err);
+      // Default to false if there's an error, to ensure proper consent
       return false;
     }
   }
 
   /**
-   * Simple client-side encryption for sensitive data
-   * Not a replacement for server-side encryption, but adds a layer of protection
-   * @param {string|Object} data - Data to encrypt
-   * @param {string} key - Encryption key (defaults to a key derived from user session)
-   * @returns {string} Encrypted data
+   * Validate data access based on permissions and consent
+   * @param {string} dataType - Type of data being accessed
+   * @param {string} accessPurpose - Purpose of the access
+   * @returns {Object} - Validation result
    */
-  encryptData(data, key) {
-    if (!data) return null;
-
-    try {
-      // Convert objects to JSON strings
-      const dataStr =
-        typeof data === "object" ? JSON.stringify(data) : String(data);
-
-      // Use provided key or derive one from user session and app secret
-      const encryptionKey = key || this.deriveEncryptionKey();
-
-      // Encrypt the data
-      const encrypted = CryptoJS.AES.encrypt(dataStr, encryptionKey).toString();
-
-      return encrypted;
-    } catch (error) {
-      console.error("Encryption error:", error);
-      return null;
-    }
+  validateDataAccess() {
+    // Implementation would check permissions based on data type and purpose
+    return {
+      isPermitted: true,
+      requiresConsent: false,
+      consentType: null,
+      actions: [],
+    };
   }
 
   /**
-   * Decrypts data that was encrypted with encryptData
-   * @param {string} encryptedData - Data to decrypt
-   * @param {string} key - Encryption key (should match the one used for encryption)
-   * @returns {string|Object} Decrypted data
+   * Sanitize data for HIPAA compliance
+   * @param {Object} data - Data to sanitize
+   * @param {Object} options - Sanitization options
+   * @returns {Object} - Sanitized data
    */
-  decryptData(encryptedData, key) {
-    if (!encryptedData) return null;
+  sanitizeData(data, options = {}) {
+    if (!data) return data;
 
-    try {
-      // Use provided key or derive one from user session and app secret
-      const decryptionKey = key || this.deriveEncryptionKey();
+    // Using destructuring with _ prefix to indicate unused variable (to avoid ESLint warning)
+    // eslint-disable-next-line no-unused-vars
+    const {
+      mode = "default",
+      excludeFields = [],
+    } = options;
 
-      // Decrypt the data
-      const decrypted = CryptoJS.AES.decrypt(
-        encryptedData,
-        decryptionKey
-      ).toString(CryptoJS.enc.Utf8);
+    // Return a deep copy to avoid modifying original
+    const sanitized = JSON.parse(JSON.stringify(data));
 
-      // Try to parse as JSON, return as string if not valid JSON
-      try {
-        return JSON.parse(decrypted);
-      } catch (e) {
-        return decrypted;
-      }
-    } catch (error) {
-      console.error("Decryption error:", error);
-      return null;
+    // If we're in mask mode, mask sensitive fields
+    if (mode === "mask") {
+      // Implementation would mask specific fields based on HIPAA requirements
+      // In a real implementation, accessPurpose would be used here to determine
+      // appropriate masking levels based on the purpose of access
     }
-  }
-
-  /**
-   * Derives an encryption key from user session and app secret
-   * @returns {string} Derived encryption key
-   */
-  deriveEncryptionKey() {
-    // Get auth token which contains user session info
-    const token = authService.getToken();
 
-    // App secret should be injected by build process
-    const appSecret =
-      process.env.REACT_APP_ENCRYPTION_SEED || "healthmint-client-encryption";
-
-    // Combine token and app secret
-    const seed = `${token || "anonymous"}-${appSecret}-${navigator.userAgent}`;
+    // Exclude specified fields
+    for (const field of excludeFields) {
+      if (field.includes(".")) {
+        // Handle nested fields
+        const parts = field.split(".");
+        let current = sanitized;
+        for (let i = 0; i < parts.length - 1; i++) {
+          if (current[parts[i]]) {
+            current = current[parts[i]];
+          } else {
+            current = null;
+            break;
+          }
+        }
+        if (current) {
+          delete current[parts[parts.length - 1]];
+        }
+      } else {
+        delete sanitized[field];
+      }
+    }
 
-    // Create a hash of the seed for the encryption key
-    return CryptoJS.SHA256(seed).toString();
+    return sanitized;
   }
 
   /**
-   * Synchronizes local audit logs with the server
-   * For use when connection is restored after being offline
-   * @returns {Promise<Object>} Synchronization result
+   * Sanitize a specific input value
+   * @param {any} value - Value to sanitize
+   * @param {string} fieldName - Name of the field
+   * @returns {any} - Sanitized value
    */
-  async syncLocalAuditLogs() {
-    try {
-      // Process any queued audit logs
-      await this.processAuditLogQueue();
-
-      // Process retry queue
-      await this.processRetryQueue();
-
-      // Sync local audit logs
-      const localLogs = JSON.parse(
-        localStorage.getItem("hipaa_local_audit_logs") || "[]"
-      );
-      if (localLogs.length === 0) return { success: true, synced: 0 };
-
-      // Clear local logs after successful sync
-      localStorage.setItem("hipaa_local_audit_logs", "[]");
-
-      return { success: true, synced: localLogs.length };
-    } catch (error) {
-      console.error("Failed to sync local audit logs:", error);
-      return { success: false, error: error.message };
+  sanitizeInputValue(value) {
+    // Simple implementation to sanitize input values
+    if (typeof value === "string") {
+      // Basic XSS prevention
+      return value
+        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
+        .replace(/on\w+="[^"]*"/g, "")
+        .replace(/on\w+='[^']*'/g, "");
     }
+    return value;
   }
 
   /**
-   * Validates if data access is permitted according to HIPAA rules
-   * @param {string} dataType - Type of data being accessed
-   * @param {string} purpose - Purpose of access
-   * @returns {Object} Validation result and required actions
+   * Verify if data is properly de-identified per HIPAA requirements
+   * @param {Object} data - Data to verify
+   * @returns {Object} - Verification result with any issues
    */
-  validateDataAccess(dataType, purpose) {
-    // Check if this data type requires specific consent
-    const requiresSpecificConsent = [
-      "genetic",
-      "mentalHealth",
-      "substanceAbuse",
-      "sexualHealth",
-      "hiv",
-    ].includes(dataType);
-
-    // Check if this purpose requires verification
-    const requiresVerification = [
-      "research",
-      "marketing",
-      "insuranceUnderwriting",
-      "employmentScreening",
-    ].includes(purpose);
-
-    // Determine consent type needed
-    let consentType = this.CONSENT_TYPES.DATA_SHARING;
-    if (purpose === "research") consentType = this.CONSENT_TYPES.RESEARCH;
-    if (purpose === "marketing") consentType = this.CONSENT_TYPES.MARKETING;
-    if (purpose === "thirdParty") consentType = this.CONSENT_TYPES.THIRD_PARTY;
-
-    // Check if user has given necessary consent
-    const hasNecessaryConsent = this.hasConsent(consentType);
-
-    // For special categories, check specific consent
-    const hasSpecificConsent =
-      !requiresSpecificConsent || this.hasConsent(`${dataType}_${purpose}`);
-
+  verifyDeIdentification() {
+    // In a real implementation, this would check for all 18 HIPAA identifiers
     return {
-      isPermitted: hasNecessaryConsent && hasSpecificConsent,
-      requiresConsent: !hasNecessaryConsent,
-      requiresSpecificConsent: requiresSpecificConsent && !hasSpecificConsent,
-      requiresVerification,
-      consentType: requiresSpecificConsent
-        ? `${dataType}_${purpose}`
-        : consentType,
-      actions: this.getRequiredActions(
-        hasNecessaryConsent,
-        hasSpecificConsent,
-        requiresVerification
-      ),
+      isDeIdentified: true,
+      issues: [],
     };
   }
 
   /**
-   * Determines actions required for data access
-   * @param {boolean} hasNecessaryConsent - Whether user has given necessary consent
-   * @param {boolean} hasSpecificConsent - Whether user has given specific consent
-   * @param {boolean} requiresVerification - Whether purpose requires verification
-   * @returns {Array} Required actions
+   * Get current user information for audit purposes
+   * @returns {Object} - User information
    */
-  getRequiredActions(
-    hasNecessaryConsent,
-    hasSpecificConsent,
-    requiresVerification
-  ) {
-    const actions = [];
-
-    if (!hasNecessaryConsent) {
-      actions.push("OBTAIN_CONSENT");
-    }
-
-    if (!hasSpecificConsent) {
-      actions.push("OBTAIN_SPECIFIC_CONSENT");
-    }
-
-    if (requiresVerification) {
-      actions.push("VERIFY_PURPOSE");
-    }
-
-    return actions;
-  }
-
-  /**
-   * Verifies de-identification of data according to HIPAA Safe Harbor method
-   * @param {Object} data - Data to check
-   * @returns {Object} Verification result with issues found
-   */
-  verifyDeIdentification(data) {
-    const issues = [];
-
-    // Check for direct identifiers
-    const directIdentifiers = [
-      "name",
-      "address",
-      "phone",
-      "fax",
-      "email",
-      "ssn",
-      "medicalRecordNumber",
-      "healthPlanNumber",
-      "accountNumber",
-      "certificateNumber",
-      "vehicleIdentifiers",
-      "deviceIdentifiers",
-      "biometricIdentifiers",
-      "fullFacePhotos",
-    ];
-
-    // Check for indirect identifiers
-    const indirectIdentifiers = ["zipCode", "dates", "age"];
-
-    // Recursively scan object for identifiers
-    const scan = (obj, path = "") => {
-      if (!obj || typeof obj !== "object") return;
-
-      for (const [key, value] of Object.entries(obj)) {
-        const currentPath = path ? `${path}.${key}` : key;
-
-        // Check if this is a direct identifier
-        if (
-          directIdentifiers.some((id) =>
-            key.toLowerCase().includes(id.toLowerCase())
-          )
-        ) {
-          if (value !== null && value !== undefined && value !== "") {
-            issues.push({
-              type: "direct_identifier",
-              field: currentPath,
-              recommendation: "Remove this field completely",
-            });
-          }
-        }
-
-        // Check indirect identifiers
-        if (
-          indirectIdentifiers.some((id) =>
-            key.toLowerCase().includes(id.toLowerCase())
-          )
-        ) {
-          if (value !== null && value !== undefined && value !== "") {
-            issues.push({
-              type: "indirect_identifier",
-              field: currentPath,
-              recommendation: this.getDeIdentificationRecommendation(
-                key,
-                value
-              ),
-            });
-          }
-        }
-
-        // Check string values for patterns
-        if (typeof value === "string") {
-          const phiCheck = this.containsPHI(value);
-          if (phiCheck.hasPHI) {
-            issues.push({
-              type: "embedded_phi",
-              field: currentPath,
-              phiTypes: phiCheck.types,
-              recommendation: "Remove or redact PHI from this text",
-            });
-          }
-        }
-
-        // Recursively check nested objects
-        if (value && typeof value === "object") {
-          scan(value, currentPath);
-        }
-      }
-    };
-
-    scan(data);
-
+  getUserInfo() {
+    // Implementation would get user information from auth service
     return {
-      isDeIdentified: issues.length === 0,
-      issues,
-      passesHIPAA:
-        issues.filter((i) => i.type === "direct_identifier").length === 0,
+      userId: localStorage.getItem("healthmint_wallet_address") || "unknown",
+      role: localStorage.getItem("healthmint_user_role") || "unknown",
     };
   }
 
   /**
-   * Gets recommendations for de-identifying different field types
-   * @param {string} field - Field name
-   * @param {any} value - Field value
-   * @returns {string} De-identification recommendation
+   * Clear any error state
    */
-  getDeIdentificationRecommendation(field, value) {
-    if (field.toLowerCase().includes("zip")) {
-      return "Truncate to first 3 digits";
-    } else if (field.toLowerCase().includes("date")) {
-      return "Remove day, keeping only month and year";
-    } else if (field.toLowerCase().includes("age")) {
-      return "For ages over 89, use category 90+";
-    } else {
-      return "Generalize or remove this field";
-    }
-  }
-
-  /**
-   * Gets the history of user consent decisions for a specific consent type
-   * @param {string} consentType - Type of consent to retrieve history for
-   * @returns {Array<Object>} Array of consent history entries
-   */
-  getConsentHistory(consentType) {
-    try {
-      // If no specific consent type is provided, return all consent history
-      if (!consentType) {
-        const allConsents = JSON.parse(
-          localStorage.getItem("hipaa_user_consents") || "{}"
-        );
-
-        const history = [];
-        for (const [type, consentData] of Object.entries(allConsents)) {
-          history.push({
-            consentType: type,
-            granted: consentData.granted,
-            timestamp: consentData.timestamp,
-            details: consentData.details || {},
-          });
-        }
-
-        return history;
-      }
-
-      // For a specific consent type
-      const consents = JSON.parse(
-        localStorage.getItem("hipaa_user_consents") || "{}"
-      );
-
-      if (!consents[consentType]) {
-        return []; // No history for this consent type
-      }
-
-      return [
-        {
-          consentType,
-          granted: consents[consentType].granted,
-          timestamp: consents[consentType].timestamp,
-          details: consents[consentType].details || {},
-        },
-      ];
-    } catch (error) {
-      console.error("Failed to get consent history:", error);
-      return [];
-    }
+  clearError() {
+    // Implementation would clear any error state in the service
   }
 }
 
-// Create and export singleton instance
+// Create singleton instance
 const hipaaComplianceService = new HipaaComplianceService();
 
-// Emergency patching for direct imports
-// Some components might be importing the service directly rather than using the context
-if (!hipaaComplianceService.logDataAccess) {
-  /**
-   * Log data access for HIPAA compliance
-   * 
-   * @param {string} dataId - ID of the accessed data
-   * @param {string} purpose - Purpose of access
-   * @param {string} action - Type of action (VIEW, DOWNLOAD, etc.)
-   * @param {Object} metadata - Additional metadata for the access log
-   * @returns {Promise<Object>} - The created audit log entry
-   */
-  hipaaComplianceService.logDataAccess = async function(dataId, purpose, action, metadata = {}) {
-    try {
-      // Create the audit log entry
-      const logEntry = {
-        dataId,
-        purpose,
-        action,
-        timestamp: new Date().toISOString(),
-        userId: metadata.userId || 'unknown',
-        ...metadata,
-      };
-      
-      // Use the existing createAuditLog method to log the access
-      await this.createAuditLog('DATA_ACCESS', {
-        dataId,
-        purpose,
-        action,
-        ...metadata,
-        timestamp: new Date().toISOString(),
-      });
-      
-      console.log('[HIPAA] Data access logged:', { 
-        dataId, 
-        action, 
-        purpose,
-        timestamp: logEntry.timestamp
-      });
-      
-      return logEntry;
-    } catch (error) {
-      console.error('[HIPAA] Error logging data access:', error);
-      throw new Error('Failed to log data access for HIPAA compliance');
-    }
-  };
-}
-
-// Ensure required methods exist
-if (!hipaaComplianceService.logFieldAccess) {
-  hipaaComplianceService.logFieldAccess = async function(dataId, fieldPath, purpose) {
-    try {
-      await this.createAuditLog('FIELD_ACCESS', {
-        dataId,
-        fieldPath,
-        purpose,
-        timestamp: new Date().toISOString(),
-      });
-      return true;
-    } catch (error) {
-      console.error('[HIPAA] Error logging field access:', error);
-      return false;
-    }
-  };
-}
-
-export default hipaaComplianceService;
+// Export the singleton
+export default hipaaComplianceService;
\ No newline at end of file

From c184b146c9c436f143f21b0bce725d9902636d77 Mon Sep 17 00:00:00 2001
From: Theresa <ttnguyen1011@csu.fullerton.edu>
Date: Tue, 1 Apr 2025 17:34:13 -0700
Subject: [PATCH 6/7] simulated dataset payment

---
 client/src/components/DataBrowser.js         | 146 +++--
 client/src/components/PaymentModal.js        | 566 ++++++++++++++++++
 client/src/components/dashboard/Dashboard.js | 571 ++++++++++++++++---
 client/src/services/transactionService.js    | 281 +++++++++
 4 files changed, 1431 insertions(+), 133 deletions(-)
 create mode 100644 client/src/components/PaymentModal.js
 create mode 100644 client/src/services/transactionService.js

diff --git a/client/src/components/DataBrowser.js b/client/src/components/DataBrowser.js
index 1ab65fe..f79dd15 100755
--- a/client/src/components/DataBrowser.js
+++ b/client/src/components/DataBrowser.js
@@ -6,6 +6,7 @@ import useHealthData from "../hooks/useHealthData.js";
 import { addNotification } from "../redux/slices/notificationSlice.js";
 import hipaaComplianceService from "../services/hipaaComplianceService.js";
 import DataBrowserView from "./DataBrowserView.js";
+import PaymentModal from "./PaymentModal.js";
 
 if (!hipaaComplianceService.logDataAccess) {
   hipaaComplianceService.logDataAccess = async function(dataId, purpose, action, metadata = {}) {
@@ -149,6 +150,8 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
   const [consentModalOpen, setConsentModalOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState(null);
   const [consentsHistory, setConsentsHistory] = useState([]);
+  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+  const [selectedDatasetForPurchase, setSelectedDatasetForPurchase] = useState(null);
 
   // Save favorites to localStorage
   const saveFavorites = useCallback((newFavorites) => {
@@ -363,11 +366,22 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
   const purchaseDatasetImpl = useCallback(
     async (id, consentVerified = false) => {
       try {
+        // Find the dataset to purchase
+        const datasetToPurchase = healthData.find(dataset => dataset.id === id);
+        
+        if (!datasetToPurchase) {
+          throw new Error("Dataset not found");
+        }
+        
+        // Open the payment modal instead of proceeding with direct purchase
+        setSelectedDatasetForPurchase(datasetToPurchase);
+        setIsPaymentModalOpen(true);
+        
         // Log action for HIPAA compliance with comprehensive details
         await hipaaComplianceService.logDataAccess(
           id,
-          "Purchasing dataset for research/personal health records",
-          "PURCHASE",
+          "Initiating purchase flow for dataset",
+          "PURCHASE_INITIATED",
           {
             userRole,
             userId,
@@ -376,73 +390,34 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
             ipAddress: "client", // Server will log actual IP
             datasetInfo: {
               category:
-                healthData.find((d) => d.id === id)?.category || "Unknown",
-              price: healthData.find((d) => d.id === id)?.price || "Unknown",
+                datasetToPurchase.category || "Unknown",
+              price: datasetToPurchase.price || "Unknown",
               anonymized:
-                healthData.find((d) => d.id === id)?.anonymized || false,
-            },
-            transactionId: `tx-${Date.now()}-${Math.floor(
-              Math.random() * 1000
-            )}`,
+                datasetToPurchase.anonymized || false,
+            }
           }
         );
-
-        // Purchase data
-        await purchaseData(id);
-
-        // Record this purchase in the consent history for future reference
-        const updatedHistory = [
-          ...consentsHistory,
-          {
-            consentType: hipaaComplianceService.CONSENT_TYPES.DATA_SHARING,
-            timestamp: new Date().toISOString(),
-            consentGiven: true,
-            purpose: "Dataset purchase confirmation",
-            datasetId: id,
-            actionType: "PURCHASE_COMPLETED",
-          },
-        ];
-        setConsentsHistory(updatedHistory);
-
-        dispatch(
-          addNotification({
-            type: "success",
-            message: "Dataset purchased successfully!",
-          })
-        );
-
-        if (onPurchase) {
-          onPurchase(id);
-        }
       } catch (err) {
-        console.error("Purchase error:", err);
+        console.error("Purchase initiation error:", err);
 
         // Log purchase failure for HIPAA compliance
-        await hipaaComplianceService.createAuditLog("DATASET_PURCHASE_FAILED", {
+        await hipaaComplianceService.createAuditLog("DATASET_PURCHASE_INIT_FAILED", {
           datasetId: id,
           timestamp: new Date().toISOString(),
           userId,
           userRole,
-          errorMessage: err.message || "Unknown purchase error",
+          errorMessage: err.message || "Unknown error initiating purchase",
         });
 
         dispatch(
           addNotification({
             type: "error",
-            message: "Failed to purchase dataset. Please try again.",
+            message: "Failed to initiate dataset purchase. Please try again.",
           })
         );
       }
     },
-    [
-      purchaseData,
-      dispatch,
-      onPurchase,
-      consentsHistory,
-      healthData,
-      userId,
-      userRole,
-    ]
+    [dispatch, healthData, userId, userRole]
   );
 
   // Request and verify consent for data access
@@ -607,6 +582,68 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
     [dispatch, requestAndVerifyConsent, purchaseDatasetImpl]
   );
 
+  const handlePurchaseComplete = useCallback(
+    async (purchaseData) => {
+      try {
+        // Log successful purchase for HIPAA compliance
+        await hipaaComplianceService.logDataAccess(
+          purchaseData.datasetId,
+          "Dataset purchase completed successfully",
+          "PURCHASE_COMPLETED",
+          {
+            userRole,
+            userId,
+            timestamp: new Date().toISOString(),
+            transactionHash: purchaseData.transactionHash,
+            price: purchaseData.price
+          }
+        );
+
+        // Close the payment modal
+        setIsPaymentModalOpen(false);
+        
+        // Record this purchase in the consent history for future reference
+        const updatedHistory = [
+          ...consentsHistory,
+          {
+            consentType: hipaaComplianceService.CONSENT_TYPES.DATA_SHARING,
+            timestamp: new Date().toISOString(),
+            consentGiven: true,
+            purpose: "Dataset purchase confirmation",
+            datasetId: purchaseData.datasetId,
+            actionType: "PURCHASE_COMPLETED",
+          },
+        ];
+        setConsentsHistory(updatedHistory);
+
+        // Call the purchase complete callback
+        if (purchaseData) {
+          await purchaseData(purchaseData.datasetId);
+        }
+
+        dispatch(
+          addNotification({
+            type: "success",
+            message: "Dataset purchased successfully!",
+          })
+        );
+
+        if (onPurchase) {
+          onPurchase(purchaseData.datasetId);
+        }
+      } catch (err) {
+        console.error("Purchase completion error:", err);
+        dispatch(
+          addNotification({
+            type: "error",
+            message: "Error completing purchase. Please contact support.",
+          })
+        );
+      }
+    },
+    [consentsHistory, dispatch, onPurchase, purchaseData, userId, userRole]
+  );
+
   // Handle consent approval from modal
   const handleConsentApproval = useCallback(
     async (approved) => {
@@ -980,6 +1017,15 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
         consentVerified={consentVerified}
       />
 
+      {/* Add the PaymentModal component */}
+      <PaymentModal
+        isOpen={isPaymentModalOpen}
+        onClose={() => setIsPaymentModalOpen(false)}
+        dataset={selectedDatasetForPurchase}
+        onPurchaseComplete={handlePurchaseComplete}
+        walletAddress={userId}
+      />
+
       {/* Render consent modal when needed */}
       {renderConsentModal()}
     </>
diff --git a/client/src/components/PaymentModal.js b/client/src/components/PaymentModal.js
new file mode 100644
index 0000000..8bb93b7
--- /dev/null
+++ b/client/src/components/PaymentModal.js
@@ -0,0 +1,566 @@
+// src/components/PaymentModal.js
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import PropTypes from "prop-types";
+import { 
+  CreditCard, 
+  Lock, 
+  AlertCircle, 
+  Check, 
+  X,
+  ArrowRight,
+  Wallet,
+  Shield,
+  Info
+} from "lucide-react";
+import { useSelector } from "react-redux";
+import { LoadingSpinner } from "./ui";
+import hipaaComplianceService from "../services/hipaaComplianceService.js";
+import transactionService from "../services/transactionService.js";
+
+/**
+ * PaymentModal Component
+ * 
+ * A simulated payment interface for researchers to purchase health datasets
+ * Implements HIPAA-compliant transaction logging
+ */
+const PaymentModal = ({ 
+  isOpen, 
+  onClose, 
+  dataset, 
+  onPurchaseComplete, 
+  walletAddress 
+}) => {
+  // Get user wallet details
+  const userWalletAddress = useSelector(state => state.wallet.address) || walletAddress;
+  const userRole = useSelector(state => state.role.role);
+  
+  // Form state
+  const [paymentMethod, setPaymentMethod] = useState("wallet");
+  const [agreeToTerms, setAgreeToTerms] = useState(false);
+  const [processingPayment, setProcessingPayment] = useState(false);
+  const [transactionComplete, setTransactionComplete] = useState(false);
+  const [transactionHash, setTransactionHash] = useState(null);
+  const [error, setError] = useState(null);
+  const [currentStep, setCurrentStep] = useState(1);
+  const [paymentProgress, setPaymentProgress] = useState(0);
+  
+  // References for accessibility
+  const modalRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  const initialFocusRef = useRef(null);
+
+  // Handle modal close with cleanup
+  const handleClose = useCallback(() => {
+    // Reset state if the modal is closed during transaction
+    if (!transactionComplete && processingPayment) {
+      setProcessingPayment(false);
+    }
+    
+    // If transaction was completed successfully, call the completion handler
+    if (transactionComplete && onPurchaseComplete) {
+      onPurchaseComplete({
+        datasetId: dataset?.id,
+        transactionHash,
+        timestamp: new Date().toISOString(),
+        price: dataset?.price,
+        paymentMethod
+      });
+    }
+    
+    // Reset state
+    setCurrentStep(1);
+    setAgreeToTerms(false);
+    setError(null);
+    setPaymentProgress(0);
+    setTransactionComplete(false);
+    setTransactionHash(null);
+    
+    // Close the modal
+    onClose();
+  }, [
+    transactionComplete, 
+    processingPayment, 
+    onPurchaseComplete, 
+    dataset, 
+    transactionHash, 
+    paymentMethod, 
+    onClose
+  ]);
+
+  // Trap focus within modal for accessibility
+  useEffect(() => {
+    if (!isOpen) return;
+    
+    // Focus the initial element when modal opens
+    if (initialFocusRef.current) {
+      initialFocusRef.current.focus();
+    }
+    
+    // Handle ESC key press
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+    
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, handleClose]);
+
+  // Process the payment
+  const processPayment = async () => {
+    if (processingPayment) return;
+    
+    try {
+      setError(null);
+      setProcessingPayment(true);
+      
+      // Log transaction initiation for HIPAA compliance
+      await hipaaComplianceService.createAuditLog("PAYMENT_INITIATED", {
+        datasetId: dataset?.id,
+        userRole,
+        userId: userWalletAddress,
+        paymentMethod,
+        price: dataset?.price,
+        timestamp: new Date().toISOString(),
+        action: "PAYMENT_START"
+      });
+      
+      // Perform the actual purchase using the transaction service
+      const result = await transactionService.purchaseDataset({
+        datasetId: dataset?.id,
+        buyerAddress: userWalletAddress,
+        price: dataset?.price,
+        onProgress: (progress) => {
+          setPaymentProgress(progress);
+        }
+      });
+      
+      if (!result.success) {
+        throw new Error(result.error || "Transaction failed");
+      }
+      
+      // Set the transaction hash from the successful transaction
+      setTransactionHash(result.transactionHash);
+      
+      // Log successful transaction for HIPAA compliance
+      await hipaaComplianceService.createAuditLog("PAYMENT_COMPLETE", {
+        datasetId: dataset?.id,
+        userRole,
+        userId: userWalletAddress,
+        paymentMethod,
+        price: dataset?.price,
+        transactionHash: result.transactionHash,
+        timestamp: new Date().toISOString(),
+        action: "PAYMENT_SUCCESS"
+      });
+      
+      // Mark transaction as complete
+      setTransactionComplete(true);
+      setCurrentStep(3);
+      
+    } catch (err) {
+      console.error("Payment processing error:", err);
+      setError(err.message || "Transaction failed. Please try again.");
+      
+      // Log failed transaction for HIPAA compliance
+      await hipaaComplianceService.createAuditLog("PAYMENT_FAILED", {
+        datasetId: dataset?.id,
+        userRole,
+        userId: userWalletAddress,
+        paymentMethod,
+        price: dataset?.price,
+        error: err.message || "Unknown error",
+        timestamp: new Date().toISOString(),
+        action: "PAYMENT_FAILURE"
+      });
+      
+    } finally {
+      setProcessingPayment(false);
+    }
+  };
+
+  // Proceed to payment confirmation step
+  const handleProceedToPayment = () => {
+    if (!agreeToTerms) {
+      setError("Please agree to the terms and conditions to proceed.");
+      return;
+    }
+    
+    setCurrentStep(2);
+    setError(null);
+  };
+
+  // Confirm and execute payment
+  const handleConfirmPayment = async () => {
+    await processPayment();
+  };
+
+  // If the modal is not open, don't render anything
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      aria-modal="true"
+      aria-labelledby="payment-modal-title"
+      role="dialog"
+      onClick={(e) => {
+        // Close when clicking outside the modal content
+        if (modalRef.current && !modalRef.current.contains(e.target)) {
+          handleClose();
+        }
+      }}
+    >
+      <div 
+        ref={modalRef} 
+        className="bg-white rounded-xl shadow-xl max-w-2xl w-full m-4 overflow-hidden"
+      >
+        {/* Modal Header */}
+        <div className="p-6 border-b border-gray-200">
+          <div className="flex justify-between items-center">
+            <h2 id="payment-modal-title" className="text-2xl font-bold">
+              {currentStep === 3 
+                ? "Payment Complete" 
+                : `Purchase Dataset ${currentStep === 2 ? "- Confirm Payment" : ""}`}
+            </h2>
+            <button
+              ref={closeButtonRef}
+              onClick={handleClose}
+              className="text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 rounded-full p-1"
+              aria-label="Close dialog"
+            >
+              <X size={24} aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+
+        <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
+          {/* Step 1: Dataset Selection and Terms */}
+          {currentStep === 1 && (
+            <div className="space-y-6">
+              {/* Dataset Information */}
+              <div className="bg-blue-50 rounded-lg p-4 border border-blue-100">
+                <h3 className="font-semibold text-blue-800 mb-2">Dataset Information</h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm text-gray-600">Title:</p>
+                    <p className="font-medium">{dataset?.title || "Selected Dataset"}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-600">Price:</p>
+                    <p className="font-medium text-blue-600">{dataset?.price || "0.00"} ETH</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-600">Category:</p>
+                    <p className="font-medium">{dataset?.category || "Health Data"}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-600">Records:</p>
+                    <p className="font-medium">{dataset?.recordCount || "Unknown"}</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* HIPAA Notice */}
+              <div className="bg-purple-50 border border-purple-100 rounded-lg p-4">
+                <div className="flex items-start gap-2">
+                  <Shield className="text-purple-500 flex-shrink-0 mt-1" size={20} />
+                  <div>
+                    <h3 className="font-medium text-purple-700">HIPAA Compliance Notice</h3>
+                    <p className="text-sm text-purple-600">
+                      This transaction will be logged for HIPAA compliance purposes. All data access 
+                      is tracked and secured according to HIPAA regulations.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Payment Method Selection */}
+              <div>
+                <h3 className="font-medium text-gray-800 mb-3">Select Payment Method</h3>
+                <div className="space-y-3">
+                  <label className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
+                    <input
+                      type="radio"
+                      name="paymentMethod"
+                      value="wallet"
+                      checked={paymentMethod === "wallet"}
+                      onChange={() => setPaymentMethod("wallet")}
+                      className="h-4 w-4 text-blue-600"
+                      ref={initialFocusRef}
+                    />
+                    <Wallet className="ml-3 mr-2 h-5 w-5 text-blue-500" />
+                    <div className="ml-2">
+                      <p className="font-medium">Connected Wallet</p>
+                      <p className="text-sm text-gray-500">
+                        Pay using your currently connected wallet: 
+                        <span className="text-gray-700">
+                          {userWalletAddress 
+                            ? ` ${userWalletAddress.slice(0, 6)}...${userWalletAddress.slice(-4)}` 
+                            : " (No wallet connected)"}
+                        </span>
+                      </p>
+                    </div>
+                  </label>
+
+                  <label className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
+                    <input
+                      type="radio"
+                      name="paymentMethod"
+                      value="card"
+                      checked={paymentMethod === "card"}
+                      onChange={() => setPaymentMethod("card")}
+                      className="h-4 w-4 text-blue-600"
+                    />
+                    <CreditCard className="ml-3 mr-2 h-5 w-5 text-blue-500" />
+                    <div className="ml-2">
+                      <p className="font-medium">Credit Card</p>
+                      <p className="text-sm text-gray-500">Simulated credit card payment</p>
+                    </div>
+                  </label>
+                </div>
+              </div>
+
+              {/* Terms Agreement */}
+              <div className="mt-6">
+                <label className="flex items-start cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={agreeToTerms}
+                    onChange={(e) => setAgreeToTerms(e.target.checked)}
+                    className="mt-1 h-4 w-4 text-blue-600 rounded"
+                  />
+                  <span className="ml-2 text-sm text-gray-700">
+                    I agree to the <button href="#" className="text-blue-600 hover:underline">Terms of Service</button>{" "}
+                    and acknowledge that this purchase grants me a license to access and use this 
+                    dataset for research purposes only, subject to all applicable HIPAA regulations.
+                  </span>
+                </label>
+              </div>
+              
+              {/* Error Message */}
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2">
+                  <AlertCircle size={20} className="text-red-500 flex-shrink-0" />
+                  <span>{error}</span>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 2: Payment Confirmation */}
+          {currentStep === 2 && (
+            <div className="space-y-6">
+              <div className="bg-gray-50 rounded-lg p-6 border border-gray-200 text-center">
+                <h3 className="text-lg font-semibold mb-2">Please Confirm Your Purchase</h3>
+                <p className="mb-4">You're about to purchase:</p>
+                
+                <div className="mb-6">
+                  <span className="text-2xl font-bold text-blue-600">{dataset?.price || "0.00"} ETH</span>
+                </div>
+                
+                <div className="flex justify-center items-center gap-2 mb-4">
+                  <div className="text-gray-500">via</div>
+                  <div className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center">
+                    {paymentMethod === "wallet" ? (
+                      <>
+                        <Wallet size={14} className="mr-1" />
+                        <span>Connected Wallet</span>
+                      </>
+                    ) : (
+                      <>
+                        <CreditCard size={14} className="mr-1" />
+                        <span>Credit Card</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+                
+                <p className="text-sm text-gray-600">
+                  This is a simulated transaction for demonstration purposes.
+                  No actual cryptocurrency will be transferred.
+                </p>
+              </div>
+
+              <div className="bg-yellow-50 border border-yellow-100 rounded-lg p-4">
+                <div className="flex items-start gap-2">
+                  <Info className="text-yellow-500 flex-shrink-0 mt-1" size={20} />
+                  <div>
+                    <p className="text-sm text-yellow-700">
+                      In a production environment, this would initiate an actual blockchain 
+                      transaction. For this demo, we'll simulate the payment process.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Processing Indicator */}
+              {processingPayment && (
+                <div className="text-center py-4">
+                  <LoadingSpinner size="medium" label="Processing payment..." showLabel={true} />
+                  <p className="text-sm text-gray-600 mt-2">
+                    Please wait while your transaction is being processed...
+                  </p>
+                  
+                  {/* Progress bar */}
+                  <div className="w-full mt-4 bg-gray-200 rounded-full h-2.5">
+                    <div 
+                      className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
+                      style={{ width: `${paymentProgress}%` }}
+                    ></div>
+                  </div>
+                  <p className="mt-2 text-xs text-gray-500">
+                    Transaction progress: {paymentProgress}%
+                  </p>
+                </div>
+              )}
+              
+              {/* Error Message */}
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2">
+                  <AlertCircle size={20} className="text-red-500 flex-shrink-0" />
+                  <span>{error}</span>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 3: Transaction Complete */}
+          {currentStep === 3 && (
+            <div className="space-y-6 text-center">
+              <div className="flex justify-center my-6">
+                <div className="h-16 w-16 bg-green-100 rounded-full flex items-center justify-center">
+                  <Check size={32} className="text-green-600" />
+                </div>
+              </div>
+              
+              <h3 className="text-lg font-semibold text-green-700">
+                Transaction Complete!
+              </h3>
+              
+              <div className="bg-gray-50 rounded-lg p-6 border border-gray-200 text-left">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+                  <div>
+                    <p className="text-sm text-gray-500">Transaction ID:</p>
+                    <p className="font-mono text-sm break-all">{transactionHash}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500">Amount:</p>
+                    <p className="font-medium">{dataset?.price || "0.00"} ETH</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500">Date:</p>
+                    <p className="font-medium">{new Date().toLocaleString()}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500">Status:</p>
+                    <p className="font-medium text-green-600">Confirmed</p>
+                  </div>
+                </div>
+                
+                <div className="border-t border-gray-200 pt-4 mt-2">
+                  <p className="text-sm text-gray-700">
+                    Your payment has been processed successfully. You now have access to this dataset.
+                    You can view your purchased datasets in your research dashboard.
+                  </p>
+                </div>
+              </div>
+              
+              <div className="bg-blue-50 border border-blue-100 rounded-lg p-4 text-left">
+                <div className="flex items-start gap-2">
+                  <Info className="text-blue-500 flex-shrink-0 mt-1" size={20} />
+                  <div>
+                    <p className="text-sm text-blue-700">
+                      This was a simulated transaction for demonstration purposes.
+                      In a production environment, a real cryptocurrency transaction would have been executed.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer with Actions */}
+        <div className="p-6 border-t border-gray-200 bg-gray-50">
+          <div className="flex justify-end gap-3">
+            {currentStep === 1 && (
+              <>
+                <button
+                  onClick={handleClose}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleProceedToPayment}
+                  disabled={!agreeToTerms}
+                  className={`px-4 py-2 flex items-center gap-2 text-white font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 ${
+                    !agreeToTerms
+                      ? "bg-blue-300 cursor-not-allowed"
+                      : "bg-blue-500 hover:bg-blue-600"
+                  }`}
+                >
+                  <span>Continue</span>
+                  <ArrowRight size={16} />
+                </button>
+              </>
+            )}
+
+            {currentStep === 2 && (
+              <>
+                <button
+                  onClick={() => setCurrentStep(1)}
+                  disabled={processingPayment}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Back
+                </button>
+                <button
+                  onClick={handleConfirmPayment}
+                  disabled={processingPayment}
+                  className={`px-4 py-2 flex items-center gap-2 text-white font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 ${
+                    processingPayment
+                      ? "bg-blue-300 cursor-not-allowed"
+                      : "bg-blue-500 hover:bg-blue-600"
+                  }`}
+                >
+                  {processingPayment ? (
+                    <span>Processing...</span>
+                  ) : (
+                    <>
+                      <span>Confirm Purchase</span>
+                      <Lock size={16} />
+                    </>
+                  )}
+                </button>
+              </>
+            )}
+
+            {currentStep === 3 && (
+              <button
+                onClick={handleClose}
+                className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400"
+              >
+                Close
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PaymentModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  dataset: PropTypes.object,
+  onPurchaseComplete: PropTypes.func,
+  walletAddress: PropTypes.string
+};
+
+export default PaymentModal;
\ No newline at end of file
diff --git a/client/src/components/dashboard/Dashboard.js b/client/src/components/dashboard/Dashboard.js
index 1f2984f..878ff1f 100644
--- a/client/src/components/dashboard/Dashboard.js
+++ b/client/src/components/dashboard/Dashboard.js
@@ -23,6 +23,7 @@ import {
   Share2,
   Eye,
   Lock,
+  CreditCard,
 } from "lucide-react";
 import { setLoading, setError } from "../../redux/slices/uiSlice.js";
 import { addNotification } from "../../redux/slices/notificationSlice.js";
@@ -32,12 +33,15 @@ import hipaaComplianceService from "../../services/hipaaComplianceService.js";
 import useAsyncOperation from "../../hooks/useAsyncOperation.js";
 import ErrorDisplay from "../ui/ErrorDisplay.js";
 import LoadingSpinner from "../ui/LoadingSpinner.js";
+import PaymentModal from "../PaymentModal.js";
+import transactionService from "../../services/transactionService.js";
 
 /**
  * Unified Dashboard Component
  *
  * Combines both patient and researcher dashboard functionality into a single component
  * that renders the appropriate interface based on the user's role.
+ * Now includes integrated payment functionality for dataset purchases.
  */
 const Dashboard = ({ onNavigate }) => {
   const dispatch = useDispatch();
@@ -93,6 +97,20 @@ const Dashboard = ({ onNavigate }) => {
     [userRecords]
   );
 
+  // Payment modal states
+  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+  const [selectedDatasetForPurchase, setSelectedDatasetForPurchase] = useState(null);
+  const [purchasedDatasets, setPurchasedDatasets] = useState([]);
+  const [recentTransactions, setRecentTransactions] = useState([]);
+  
+  // Apply filtering to datasets
+  const [filterApplied, setFilterApplied] = useState(false);
+  const [filterCriteria, setFilterCriteria] = useState({
+    category: "All",
+    priceRange: "all",
+    verifiedOnly: false
+  });
+
   const [dashboardData, setDashboardData] = useState({
     recentActivity: [],
     securityScore: 85,
@@ -113,6 +131,55 @@ const Dashboard = ({ onNavigate }) => {
   // Combine loading states
   const isLoading = uiLoading || healthDataLoading || asyncLoading;
 
+  // Filter health data using the filter criteria
+  const filteredHealthData = useMemo(() => {
+    if (!healthData || !filterApplied) return healthData;
+    
+    return healthData.filter(dataset => {
+      // Check category filter
+      if (filterCriteria.category !== "All" && dataset.category !== filterCriteria.category) {
+        return false;
+      }
+      
+      // Check price range filter
+      if (filterCriteria.priceRange !== "all") {
+        const price = parseFloat(dataset.price || 0);
+        if (filterCriteria.priceRange === "low" && price > 0.1) return false;
+        if (filterCriteria.priceRange === "medium" && (price <= 0.1 || price > 0.25)) return false;
+        if (filterCriteria.priceRange === "high" && price <= 0.25) return false;
+      }
+      
+      // Check verified filter
+      if (filterCriteria.verifiedOnly && !dataset.verified) {
+        return false;
+      }
+      
+      return true;
+    });
+  }, [healthData, filterApplied, filterCriteria]);
+
+  // Load purchased datasets on component mount for researchers
+  useEffect(() => {
+    if (userRole === "researcher") {
+      const purchased = transactionService.getPurchasedDatasets(userId);
+      setPurchasedDatasets(purchased);
+      
+      // Get recent transaction history
+      const transactions = transactionService.getTransactionHistory(userId)
+        .slice(0, 5) // Only get 5 most recent transactions
+        .map(tx => ({
+          id: tx.hash,
+          type: "purchase",
+          message: `Purchased dataset ${tx.metadata?.datasetId || 'Unknown'}`,
+          timestamp: new Date(tx.timestamp).toLocaleString(),
+          category: "Dataset Purchase",
+          status: tx.status === 'confirmed' ? 'success' : 'error'
+        }));
+      
+      setRecentTransactions(transactions);
+    }
+  }, [userRole, userId]);
+
   // Function to fetch all dashboard data
   const fetchDashboardData = useCallback(async () => {
     try {
@@ -125,14 +192,28 @@ const Dashboard = ({ onNavigate }) => {
         userRole,
         userId,
         timestamp: new Date().toISOString(),
+        appliedFilters: filterApplied ? appliedFilters : 0, // Use appliedFilters counter
+        filterCriteria: filterApplied ? JSON.stringify(filterCriteria) : "none"
       });
 
+      // Filter out already purchased datasets for researchers
+      let availableDatasets = userRole === "researcher" ? filteredHealthData || [] : [];
+      
+      if (userRole === "researcher" && purchasedDatasets.length > 0) {
+        availableDatasets = availableDatasets.filter(
+          dataset => !purchasedDatasets.includes(dataset.id)
+        );
+      }
+
       // Set appropriate dashboard data based on role
       setDashboardData((prevData) => ({
         ...prevData,
         securityScore: userProfile?.securityScore || 85,
-        recentActivity: [],
-        availableDatasets: userRole === "researcher" ? healthData || [] : [],
+        // Combine any API-fetched activity with local transaction records
+        recentActivity: userRole === "researcher" 
+          ? [...recentTransactions, ...(prevData.recentActivity || [])] 
+          : prevData.recentActivity || [],
+        availableDatasets: availableDatasets,
       }));
 
       dispatch(setLoading(false));
@@ -149,7 +230,56 @@ const Dashboard = ({ onNavigate }) => {
 
       dispatch(setLoading(false));
     }
-  }, [userRole, userId, dispatch, healthData, userProfile]);
+  }, [
+    userRole, 
+    userId, 
+    dispatch, 
+    filteredHealthData, 
+    userProfile, 
+    purchasedDatasets, 
+    recentTransactions, 
+    filterApplied, 
+    appliedFilters, 
+    filterCriteria
+  ]);
+
+  // Apply filter handler
+  const handleApplyFilter = useCallback(() => {
+    setFilterApplied(true);
+    
+    // Log filter application for HIPAA compliance
+    hipaaComplianceService.createAuditLog("FILTER_APPLIED", {
+      action: "FILTER",
+      userRole,
+      userId,
+      timestamp: new Date().toISOString(),
+      filterCriteria: JSON.stringify(filterCriteria)
+    });
+    
+    // Refresh data with filters
+    fetchDashboardData();
+  }, [fetchDashboardData, filterCriteria, userRole, userId]);
+
+  // Reset filters handler
+  const handleResetFilters = useCallback(() => {
+    setFilterApplied(false);
+    setFilterCriteria({
+      category: "All",
+      priceRange: "all",
+      verifiedOnly: false
+    });
+    
+    // Log filter reset for HIPAA compliance
+    hipaaComplianceService.createAuditLog("FILTER_RESET", {
+      action: "RESET_FILTER",
+      userRole,
+      userId,
+      timestamp: new Date().toISOString()
+    });
+    
+    // Refresh data
+    fetchDashboardData();
+  }, [fetchDashboardData, userRole, userId]);
 
   // Fetch dashboard data when component mounts or when dependencies change
   useEffect(() => {
@@ -299,30 +429,105 @@ const Dashboard = ({ onNavigate }) => {
 
   // Handle dataset purchase (Researcher dashboard)
   const handlePurchaseDataset = useCallback(
-    async (id) => {
-      executeAsync(async () => {
+    (datasetId) => {
+      // Find the dataset to purchase
+      const datasetToPurchase = healthData.find(dataset => dataset.id === datasetId);
+      
+      if (!datasetToPurchase) {
+        dispatch(
+          addNotification({
+            type: "error",
+            message: "Dataset not found",
+          })
+        );
+        return;
+      }
+      
+      // Check if already purchased
+      if (purchasedDatasets.includes(datasetId)) {
+        dispatch(
+          addNotification({
+            type: "info",
+            message: "You have already purchased this dataset",
+          })
+        );
+        return;
+      }
+      
+      // Set the dataset for purchase and open the payment modal
+      setSelectedDatasetForPurchase(datasetToPurchase);
+      setIsPaymentModalOpen(true);
+    },
+    [dispatch, healthData, purchasedDatasets]
+  );
+
+  // Handle successful purchase completion
+  const handlePurchaseComplete = useCallback(
+    async (purchaseDetails) => {
+      try {
         // Log action for HIPAA compliance
         await hipaaComplianceService.logDataAccess(
-          id,
-          "Purchasing dataset for research",
-          "PURCHASE",
+          purchaseDetails.datasetId,
+          "Dataset purchase completed",
+          "PURCHASE_COMPLETE",
           {
             userId,
             userRole,
+            transactionHash: purchaseDetails.transactionHash,
+            timestamp: purchaseDetails.timestamp,
+            price: purchaseDetails.price,
+            paymentMethod: purchaseDetails.paymentMethod
           }
         );
 
+        // Update local state to reflect the purchase
+        setPurchasedDatasets(prev => [...prev, purchaseDetails.datasetId]);
+        
+        // Add the transaction to recent activity
+        const newTransaction = {
+          id: purchaseDetails.transactionHash,
+          type: "purchase",
+          message: `Purchased dataset ${purchaseDetails.datasetId}`,
+          timestamp: new Date().toLocaleString(),
+          category: "Dataset Purchase",
+          status: "success"
+        };
+        
+        setRecentTransactions(prev => [newTransaction, ...prev]);
+        
+        // Update dashboard data to include new transaction
+        setDashboardData(prev => ({
+          ...prev,
+          recentActivity: [newTransaction, ...(prev.recentActivity || [])]
+        }));
+
+        // Show success notification
         dispatch(
           addNotification({
             type: "success",
-            message: "Dataset purchased successfully!",
+            message: "Dataset purchased successfully! You now have access to this data.",
+            duration: 5000,
           })
         );
-
-        // Here would be the actual purchase functionality
-      });
+        
+        // Close preview modal if open
+        if (previewOpen) {
+          setPreviewOpen(false);
+        }
+        
+        // Refresh dashboard data to reflect changes
+        fetchDashboardData();
+      } catch (error) {
+        console.error("Error processing purchase completion:", error);
+        dispatch(
+          addNotification({
+            type: "error",
+            message: "There was an issue recording your purchase. Please contact support.",
+          })
+        );
+      }
     },
-    [executeAsync, dispatch, userId, userRole]
+    [dispatch, fetchDashboardData, previewOpen, userId, userRole]
   );
 
   // Close the preview modal (Researcher dashboard)
@@ -349,6 +554,10 @@ const Dashboard = ({ onNavigate }) => {
         return <Microscope className="w-5 h-5 text-purple-500" />;
       case "publication":
         return <BookOpen className="w-5 h-5 text-indigo-500" />;
+      case "purchase":
+        return <CreditCard className="w-5 h-5 text-blue-500" />;
+      case "filter":
+        return <Filter className="w-5 h-5 text-teal-500" />;
       default:
         return <Clock className="w-5 h-5 text-gray-500" />;
     }
@@ -367,6 +576,14 @@ const Dashboard = ({ onNavigate }) => {
     }
   };
 
+  // Check if a dataset is already purchased
+  const isDatasetPurchased = useCallback(
+    (datasetId) => {
+      return purchasedDatasets.includes(datasetId);
+    },
+    [purchasedDatasets]
+  );
+
   // Loading state
   if (isLoading && !uiError) {
     return (
@@ -717,6 +934,15 @@ const Dashboard = ({ onNavigate }) => {
   // RESEARCHER DASHBOARD RENDER
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Payment Modal */}
+      <PaymentModal
+        isOpen={isPaymentModalOpen}
+        onClose={() => setIsPaymentModalOpen(false)}
+        dataset={selectedDatasetForPurchase}
+        onPurchaseComplete={handlePurchaseComplete}
+        walletAddress={userId}
+      />
+
       {/* User welcome */}
       <div className="mb-8">
         <h1 className="text-2xl font-bold text-gray-900">
@@ -753,10 +979,10 @@ const Dashboard = ({ onNavigate }) => {
 
         <div className="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
           <div className="flex items-center gap-4">
-            <Search className="text-blue-500 w-8 h-8" />
+            <CreditCard className="text-blue-500 w-8 h-8" />
             <div>
-              <p className="text-gray-600 text-sm">Data Requests</p>
-              <p className="text-2xl font-semibold">{pendingRequests}</p>
+              <p className="text-gray-600 text-sm">Purchased Datasets</p>
+              <p className="text-2xl font-semibold">{purchasedDatasets.length}</p>
             </div>
           </div>
         </div>
@@ -791,20 +1017,186 @@ const Dashboard = ({ onNavigate }) => {
         </button>
 
         <button
-          onClick={() => handleNavigateTo("/requests")}
+          onClick={() => handleNavigateTo("/purchased")}
           className="p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 font-medium"
         >
-          <Search className="w-5 h-5" />
-          Manage Requests
+          <CreditCard className="w-5 h-5" />
+          My Purchased Data
         </button>
       </div>
 
+      {/* Filter Panel - Now using Filter component properly */}
+      <div className="bg-white rounded-xl shadow-md p-6 mb-8">
+        <div className="flex items-center gap-2 mb-4">
+          <Filter className="text-blue-500" size={20} />
+          <h2 className="text-lg font-medium">Filter Datasets</h2>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+          <div>
+            <label
+              htmlFor="category"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Category
+            </label>
+            <select
+              id="category"
+              value={filterCriteria.category}
+              onChange={(e) => setFilterCriteria(prev => ({ ...prev, category: e.target.value }))}
+              className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+            >
+              <option value="All">All Categories</option>
+              <option value="General Health">General Health</option>
+              <option value="Cardiology">Cardiology</option>
+              <option value="Neurology">Neurology</option>
+              <option value="Laboratory">Laboratory</option>
+              <option value="Genetics">Genetics</option>
+            </select>
+          </div>
+
+          <div>
+            <label
+              htmlFor="priceRange"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Price Range
+            </label>
+            <select
+              id="priceRange"
+              value={filterCriteria.priceRange}
+              onChange={(e) => setFilterCriteria(prev => ({ ...prev, priceRange: e.target.value }))}
+              className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+            >
+              <option value="all">All Prices</option>
+              <option value="low">Low (≤ 0.1 ETH)</option>
+              <option value="medium">Medium (0.1-0.24 ETH)</option>
+              <option value="high">High (≥ 0.25 ETH)</option>
+            </select>
+          </div>
+
+          <div className="flex items-center mt-7">
+            <label className="flex items-center space-x-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={filterCriteria.verifiedOnly}
+                onChange={(e) => setFilterCriteria(prev => ({ ...prev, verifiedOnly: e.target.checked }))}
+                className="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+              />
+              <span className="text-gray-700">Show verified data only</span>
+            </label>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={handleResetFilters}
+            className="px-4 py-2 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50"
+          >
+            Reset Filters
+          </button>
+
+          <button
+            onClick={handleApplyFilter}
+            className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 flex items-center gap-2"
+          >
+            <Filter size={16} />
+            Apply Filters
+          </button>
+        </div>
+      </div>
+
+      {/* Purchased Datasets Section */}
+      {purchasedDatasets.length > 0 && (
+        <div className="bg-white rounded-xl shadow-md mb-8">
+          <div className="p-6 border-b border-gray-200">
+            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+              <h2 className="text-2xl font-semibold text-gray-900">
+                Your Purchased Datasets
+              </h2>
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <CheckCircle className="w-4 h-4 text-green-500" />
+                  <span className="text-sm text-gray-600">Purchased Data</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-6 space-y-4">
+            {purchasedDatasets.length > 0 ? (
+              <div className="space-y-4">
+                {healthData.filter(dataset => purchasedDatasets.includes(dataset.id))
+                  .map(dataset => (
+                    <div
+                      key={dataset.id}
+                      className="border border-green-100 bg-green-50 rounded-lg p-6 hover:bg-green-100 transition-colors"
+                    >
+                      <div className="flex flex-col lg:flex-row justify-between items-start gap-4">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2">
+                            <h3 className="text-lg font-medium">
+                              {dataset.title || dataset.category || "Health Dataset"}
+                            </h3>
+                            <CheckCircle className="w-4 h-4 text-green-500" />
+                          </div>
+                          <p className="text-gray-600 text-sm mt-1">
+                            Purchased • {dataset.recordCount || "Unknown"} records
+                          </p>
+                          <p className="text-gray-700 mt-2">
+                            {dataset.description || "No description available."}
+                          </p>
+                          <div className="flex flex-wrap gap-2 mt-3">
+                            <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                              {dataset.category || "Health Data"}
+                            </span>
+                            <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                              Purchased
+                            </span>
+                          </div>
+                        </div>
+                        <div className="flex flex-col gap-2 w-full lg:w-auto">
+                          <button
+                            onClick={() => handleViewDataset(dataset.id)}
+                            className="w-full lg:w-auto bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2"
+                          >
+                            <Eye className="w-4 h-4" />
+                            View Data
+                          </button>
+                          <button 
+                            className="w-full lg:w-auto border border-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2"
+                          >
+                            <Download className="w-4 h-4" />
+                            Download
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 bg-gray-50 rounded-lg">
+                <CreditCard className="w-12 h-12 text-gray-300 mx-auto mb-3" />
+                <p className="text-gray-700 mb-2">You haven't purchased any datasets yet</p>
+                <button
+                  onClick={() => handleNavigateTo("/browse")}
+                  className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors inline-flex items-center gap-2 text-sm font-medium"
+                >
+                  <Search className="w-4 h-4" />
+                  Browse Available Datasets
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Available Datasets */}
       <div className="bg-white rounded-xl shadow-md mb-8">
         <div className="p-6 border-b border-gray-200">
           <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
             <h2 className="text-2xl font-semibold text-gray-900">
-              Available Datasets
+              Available Datasets {filterApplied ? "(Filtered)" : ""}
             </h2>
             <div className="flex items-center gap-4">
               <div className="flex items-center gap-2">
@@ -907,12 +1299,10 @@ const Dashboard = ({ onNavigate }) => {
                         </div>
                         <div className="bg-gray-50 p-4 rounded-lg">
                           <h5 className="font-medium text-gray-900 mb-1">
-                            Data Type
+                            Price
                           </h5>
-                          <p className="text-lg font-semibold">
-                            {datasetDetails.anonymized
-                              ? "Anonymized"
-                              : "Identifiable"}
+                          <p className="text-lg font-semibold text-blue-600">
+                            {datasetDetails.price || "0.00"} ETH
                           </p>
                         </div>
                       </div>
@@ -939,17 +1329,27 @@ const Dashboard = ({ onNavigate }) => {
                       Close
                     </button>
 
-                    <button
-                      onClick={() => {
-                        handlePurchaseDataset(selectedDataset);
-                        handleClosePreview();
-                      }}
-                      className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600"
-                    >
-                      Purchase Dataset
-                    </button>
+                    {!isDatasetPurchased(selectedDataset) ? (
+                      <button
+                        onClick={() => {
+                          handlePurchaseDataset(selectedDataset);
+                          handleClosePreview();
+                        }}
+                        className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 flex items-center gap-2"
+                      >
+                        <CreditCard size={16} className="mr-1" />
+                        Purchase Dataset
+                      </button>
+                    ) : (
+                      <button
+                        className="px-4 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 flex items-center gap-2"
+                      >
+                        <CheckCircle size={16} className="mr-1" />
+                        Already Purchased
+                      </button>
+                    )}
 
-                    <button className="px-4 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 flex items-center">
+                    <button className="px-4 py-2 bg-purple-500 text-white font-medium rounded-lg hover:bg-purple-600 flex items-center">
                       <Download size={16} className="mr-2" />
                       Download Sample
                     </button>
@@ -972,62 +1372,67 @@ const Dashboard = ({ onNavigate }) => {
               </button>
             </div>
           ) : (
-            healthData.slice(0, 3).map((dataset) => (
-              <div
-                key={dataset.id}
-                className="border rounded-lg p-6 hover:bg-gray-50 transition-colors"
-              >
-                <div className="flex flex-col lg:flex-row justify-between items-start gap-4">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <h3 className="text-lg font-medium">
-                        {dataset.title || dataset.category || "Health Dataset"}
-                      </h3>
-                      {dataset.verified && (
-                        <CheckCircle className="w-4 h-4 text-green-500" />
-                      )}
-                    </div>
-                    <p className="text-gray-600 text-sm mt-1">
-                      {dataset.recordCount || "Unknown"} records •{" "}
-                      {dataset.anonymized ? "Anonymized" : "Identifiable"}
-                    </p>
-                    <p className="text-gray-700 mt-2">
-                      {dataset.description || "No description available."}
-                    </p>
-                    <div className="flex flex-wrap gap-2 mt-3">
-                      <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                        {dataset.category || "Health Data"}
-                      </span>
-                      {dataset.verified && (
-                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                          Verified
+            (filterApplied ? filteredHealthData : healthData)
+              .filter(dataset => !purchasedDatasets.includes(dataset.id))
+              .slice(0, 3)
+              .map((dataset) => (
+                <div
+                  key={dataset.id}
+                  className="border rounded-lg p-6 hover:bg-gray-50 transition-colors"
+                >
+                  <div className="flex flex-col lg:flex-row justify-between items-start gap-4">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-lg font-medium">
+                          {dataset.title || dataset.category || "Health Dataset"}
+                        </h3>
+                        {dataset.verified && (
+                          <CheckCircle className="w-4 h-4 text-green-500" />
+                        )}
+                      </div>
+                      <p className="text-gray-600 text-sm mt-1">
+                        {dataset.recordCount || "Unknown"} records •{" "}
+                        {dataset.anonymized ? "Anonymized" : "Identifiable"}
+                      </p>
+                      <p className="text-gray-700 mt-2">
+                        {dataset.description || "No description available."}
+                      </p>
+                      <div className="flex flex-wrap gap-2 mt-3">
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                          {dataset.category || "Health Data"}
                         </span>
-                      )}
-                      {dataset.studyType && (
+                        {dataset.verified && (
+                          <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                            Verified
+                          </span>
+                        )}
                         <span className="px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                          {dataset.studyType}
+                          {dataset.price || "0.00"} ETH
                         </span>
-                      )}
+                      </div>
+                    </div>
+                    <div className="flex flex-col gap-2 w-full lg:w-auto">
+                      <button
+                        onClick={() => handleViewDataset(dataset.id)}
+                        className="w-full lg:w-auto bg-purple-500 text-white px-6 py-2 rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2"
+                      >
+                        <Eye className="w-4 h-4" />
+                        View Details
+                      </button>
+                      <button
+                        onClick={() => handlePurchaseDataset(dataset.id)}
+                        className="w-full lg:w-auto bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-2"
+                      >
+                        <CreditCard className="w-4 h-4" />
+                        Purchase ({dataset.price || "0.00"} ETH)
+                      </button>
                     </div>
-                  </div>
-                  <div className="flex flex-col gap-2 w-full lg:w-auto">
-                    <button
-                      onClick={() => handleViewDataset(dataset.id)}
-                      className="w-full lg:w-auto bg-purple-500 text-white px-6 py-2 rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                      Request Access
-                    </button>
-                    <button className="w-full lg:w-auto border border-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
-                      <Download className="w-4 h-4" />
-                      Sample Data
-                    </button>
                   </div>
                 </div>
-              </div>
-            ))
+              ))
           )}
 
-          {healthData && healthData.length > 3 && (
+          {(filterApplied ? filteredHealthData : healthData).filter(dataset => !purchasedDatasets.includes(dataset.id)).length > 3 && (
             <div className="mt-4 text-center">
               <button
                 onClick={() => handleNavigateTo("/browse")}
diff --git a/client/src/services/transactionService.js b/client/src/services/transactionService.js
new file mode 100644
index 0000000..57863dc
--- /dev/null
+++ b/client/src/services/transactionService.js
@@ -0,0 +1,281 @@
+// src/services/transactionService.js
+/**
+ * Transaction Service
+ * 
+ * Simulates blockchain transactions for health data purchases
+ * and maintains a transaction history
+ */
+
+// Store transaction history in localStorage
+const STORAGE_KEY = 'healthmint_transactions';
+
+/**
+ * Get all transactions from storage
+ * @returns {Array} Array of transaction objects
+ */
+const getTransactions = () => {
+  try {
+    const storedTransactions = localStorage.getItem(STORAGE_KEY);
+    return storedTransactions ? JSON.parse(storedTransactions) : [];
+  } catch (error) {
+    console.error('Error retrieving transactions:', error);
+    return [];
+  }
+};
+
+/**
+ * Save transactions to storage
+ * @param {Array} transactions - Array of transaction objects to save
+ */
+const saveTransactions = (transactions) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(transactions));
+  } catch (error) {
+    console.error('Error saving transactions:', error);
+  }
+};
+
+/**
+ * Generate a mock Ethereum transaction hash
+ * @returns {string} A mock transaction hash
+ */
+const generateTransactionHash = () => {
+  const characters = '0123456789abcdef';
+  let hash = '0x';
+  for (let i = 0; i < 64; i++) {
+    hash += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return hash;
+};
+
+/**
+ * Simulate a blockchain transaction with configurable success rate
+ * @param {Object} options - Transaction options
+ * @param {string} options.from - Sender address
+ * @param {string} options.to - Recipient address
+ * @param {string|number} options.value - Amount to transfer
+ * @param {number} options.successRate - Probability of success (0-1)
+ * @param {function} options.onProgress - Progress callback function
+ * @returns {Promise<Object>} Transaction result
+ */
+const simulateTransaction = async (options = {}) => {
+  const {
+    from = '0x0000000000000000000000000000000000000000',
+    to = '0x0000000000000000000000000000000000000000',
+    value = '0',
+    successRate = 0.95,  // 95% success rate by default
+    delayMs = 2500,      // Simulate network delay
+    onProgress          // Optional progress callback
+  } = options;
+
+  // Simulate blockchain call
+  return new Promise((resolve, reject) => {
+    // Initial progress
+    if (onProgress) onProgress(0);
+    
+    setTimeout(() => {
+      // Middle progress
+      if (onProgress) onProgress(50);
+      
+      setTimeout(() => {
+        // Final progress
+        if (onProgress) onProgress(100);
+        
+        // Determine if transaction succeeds based on success rate
+        const isSuccessful = Math.random() < successRate;
+        
+        if (isSuccessful) {
+          const transactionHash = generateTransactionHash();
+          const timestamp = new Date().toISOString();
+          
+          // Create transaction record
+          const transaction = {
+            hash: transactionHash,
+            from,
+            to,
+            value,
+            timestamp,
+            status: 'confirmed',
+            blockNumber: Math.floor(Math.random() * 1000000) + 15000000,
+            gasUsed: Math.floor(Math.random() * 100000) + 50000,
+          };
+          
+          // Add to transaction history
+          const transactions = getTransactions();
+          transactions.push(transaction);
+          saveTransactions(transactions);
+          
+          resolve({
+            success: true,
+            transaction
+          });
+        } else {
+          // Simulate random failure reasons
+          const errorTypes = [
+            'Transaction underpriced',
+            'Insufficient funds for gas * price + value',
+            'User rejected transaction',
+            'Transaction timeout'
+          ];
+          
+          const errorMessage = errorTypes[Math.floor(Math.random() * errorTypes.length)];
+          
+          reject(new Error(errorMessage));
+        }
+      }, delayMs / 2);
+    }, delayMs / 2);
+  });
+};
+
+/**
+ * Create a purchase transaction for a health dataset
+ * @param {Object} purchaseData - Purchase details
+ * @param {string} purchaseData.datasetId - ID of the dataset being purchased
+ * @param {string} purchaseData.buyerAddress - Buyer's wallet address
+ * @param {string} purchaseData.sellerAddress - Seller's wallet address
+ * @param {string|number} purchaseData.price - Price in ETH
+ * @param {function} purchaseData.onProgress - Optional progress callback
+ * @returns {Promise<Object>} Transaction result
+ */
+const purchaseDataset = async (purchaseData) => {
+  const {
+    datasetId,
+    buyerAddress,
+    sellerAddress = '0x71C7656EC7ab88b098defB751B7401B5f6d8976F', // Default contract address
+    price,
+    onProgress
+  } = purchaseData;
+  
+  if (!datasetId || !buyerAddress || !price) {
+    throw new Error('Missing required purchase information');
+  }
+  
+  try {
+    // Simulate blockchain transaction
+    const result = await simulateTransaction({
+      from: buyerAddress,
+      to: sellerAddress,
+      value: price,
+      onProgress
+    });
+    
+    // Add dataset-specific metadata to the transaction
+    const transactions = getTransactions();
+    const transactionIndex = transactions.findIndex(tx => tx.hash === result.transaction.hash);
+    
+    if (transactionIndex >= 0) {
+      transactions[transactionIndex].metadata = {
+        type: 'DATASET_PURCHASE',
+        datasetId,
+        purchaseDate: new Date().toISOString()
+      };
+      
+      saveTransactions(transactions);
+    }
+    
+    return {
+      success: true,
+      transactionHash: result.transaction.hash,
+      timestamp: result.transaction.timestamp,
+      datasetId
+    };
+  } catch (error) {
+    console.error('Dataset purchase failed:', error);
+    return {
+      success: false,
+      error: error.message || 'Transaction failed'
+    };
+  }
+};
+
+/**
+ * Get transaction history for a specific wallet address
+ * @param {string} walletAddress - The wallet address to filter transactions for
+ * @returns {Array} Filtered transaction history
+ */
+const getTransactionHistory = (walletAddress) => {
+  if (!walletAddress) return [];
+  
+  const transactions = getTransactions();
+  return transactions.filter(tx => 
+    tx.from.toLowerCase() === walletAddress.toLowerCase() || 
+    tx.to.toLowerCase() === walletAddress.toLowerCase()
+  );
+};
+
+/**
+ * Get purchased datasets for a wallet address
+ * @param {string} walletAddress - The wallet address to check
+ * @returns {Array<string>} Array of purchased dataset IDs
+ */
+const getPurchasedDatasets = (walletAddress) => {
+  if (!walletAddress) return [];
+  
+  const transactions = getTransactions();
+  
+  // Filter successful purchases made by this wallet
+  const purchases = transactions.filter(tx => 
+    tx.from.toLowerCase() === walletAddress.toLowerCase() &&
+    tx.status === 'confirmed' &&
+    tx.metadata?.type === 'DATASET_PURCHASE'
+  );
+  
+  // Extract dataset IDs
+  return purchases.map(tx => tx.metadata.datasetId);
+};
+
+/**
+ * Check if a dataset has been purchased by a specific wallet
+ * @param {string} datasetId - The dataset ID to check
+ * @param {string} walletAddress - The wallet address to check
+ * @returns {boolean} True if the dataset has been purchased
+ */
+const isDatasetPurchased = (datasetId, walletAddress) => {
+  if (!datasetId || !walletAddress) return false;
+  
+  const purchasedDatasets = getPurchasedDatasets(walletAddress);
+  return purchasedDatasets.includes(datasetId);
+};
+
+/**
+ * Get receipt details for a specific transaction
+ * @param {string} transactionHash - The transaction hash to look up
+ * @returns {Object|null} Transaction receipt or null if not found
+ */
+const getTransactionReceipt = (transactionHash) => {
+  if (!transactionHash) return null;
+  
+  const transactions = getTransactions();
+  const transaction = transactions.find(tx => tx.hash === transactionHash);
+  
+  if (!transaction) return null;
+  
+  // Create a receipt-like object with additional information
+  return {
+    transactionHash: transaction.hash,
+    from: transaction.from,
+    to: transaction.to,
+    blockNumber: transaction.blockNumber,
+    status: transaction.status === 'confirmed' ? '0x1' : '0x0', // 0x1 = success, 0x0 = failure
+    gasUsed: transaction.gasUsed,
+    effectiveGasPrice: '0x' + (Math.floor(Math.random() * 100) + 20).toString(16) + '000000000',
+    logs: [],
+    contractAddress: null,
+    timestamp: transaction.timestamp,
+    value: transaction.value,
+    metadata: transaction.metadata || {}
+  };
+};
+
+// Create a named object before exporting it
+const transactionService = {
+  purchaseDataset,
+  getTransactions,
+  getTransactionHistory,
+  getPurchasedDatasets,
+  isDatasetPurchased,
+  getTransactionReceipt
+};
+
+// Export the named object as default
+export default transactionService;
\ No newline at end of file

From e70ee75ce2821480d08b5eedd1510d8a81625919 Mon Sep 17 00:00:00 2001
From: Theresa <ttnguyen1011@csu.fullerton.edu>
Date: Fri, 4 Apr 2025 21:26:11 -0700
Subject: [PATCH 7/7] resolving conflicts to merge

---
 client/src/components/DataBrowser.js         |  448 +++---
 client/src/components/dashboard/Dashboard.js | 1271 ++++++++----------
 2 files changed, 873 insertions(+), 846 deletions(-)

diff --git a/client/src/components/DataBrowser.js b/client/src/components/DataBrowser.js
index f79dd15..de0a55c 100755
--- a/client/src/components/DataBrowser.js
+++ b/client/src/components/DataBrowser.js
@@ -5,46 +5,8 @@ import { useSelector, useDispatch } from "react-redux";
 import useHealthData from "../hooks/useHealthData.js";
 import { addNotification } from "../redux/slices/notificationSlice.js";
 import hipaaComplianceService from "../services/hipaaComplianceService.js";
+import mockPaymentService from "../services/mockPaymentService.js"; // Added mock payment service
 import DataBrowserView from "./DataBrowserView.js";
-import PaymentModal from "./PaymentModal.js";
-
-if (!hipaaComplianceService.logDataAccess) {
-  hipaaComplianceService.logDataAccess = async function(dataId, purpose, action, metadata = {}) {
-    try {
-      // Create the audit log entry
-      const logEntry = {
-        dataId,
-        purpose,
-        action,
-        timestamp: new Date().toISOString(),
-        userId: metadata.userId || 'unknown',
-        ...metadata,
-      };
-      
-      // Use the createAuditLog method which we know exists
-      await this.createAuditLog('DATA_ACCESS', {
-        dataId,
-        purpose,
-        action,
-        ...metadata,
-        timestamp: new Date().toISOString(),
-      });
-      
-      console.log('[HIPAA] Data access logged:', { 
-        dataId, 
-        action, 
-        purpose,
-        timestamp: logEntry.timestamp
-      });
-      
-      return logEntry;
-    } catch (error) {
-      console.error('[HIPAA] Error logging data access:', error);
-      // Return an empty object instead of throwing to prevent crashes
-      return {};
-    }
-  };
-}
 
 // Categories from backend
 const CATEGORIES = [
@@ -97,12 +59,6 @@ const DATA_FORMATS = [
   "Imaging",
 ];
 
-/**
- * DataBrowser Container Component
- *
- * Manages state and data operations for browsing health datasets
- * with enhanced HIPAA compliance and consent verification
- */
 const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
   const dispatch = useDispatch();
   const userRole = useSelector((state) => state.role.role);
@@ -117,7 +73,7 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
     totalCount,
     updateFilter,
     resetFilters,
-    purchaseData,
+    purchaseData, // We'll keep this but won't use it directly
     getHealthDataDetails,
   } = useHealthData({
     initialFilters: {
@@ -136,6 +92,21 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
     loadOnMount: true,
   });
 
+  // Initialize mock payment service on component mount
+  useEffect(() => {
+    // Initialize the mock payment service
+    const initializePaymentService = async () => {
+      try {
+        await mockPaymentService.initializeProvider();
+        console.log("Mock payment service initialized");
+      } catch (err) {
+        console.error("Failed to initialize mock payment service:", err);
+      }
+    };
+
+    initializePaymentService();
+  }, []);
+
   // Local state
   const [advancedFiltersOpen, setAdvancedFiltersOpen] = useState(false);
   const [selectedDataset, setSelectedDataset] = useState(null);
@@ -150,8 +121,11 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
   const [consentModalOpen, setConsentModalOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState(null);
   const [consentsHistory, setConsentsHistory] = useState([]);
-  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
-  const [selectedDatasetForPurchase, setSelectedDatasetForPurchase] = useState(null);
+
+  // Purchase state
+  const [purchasingDataset, setPurchasingDataset] = useState(null);
+  const [purchaseStep, setPurchaseStep] = useState("idle"); // 'idle', 'processing', 'confirming', 'complete', 'error'
+  const [lastTransactionDetails, setLastTransactionDetails] = useState(null); // To store transaction details
 
   // Save favorites to localStorage
   const saveFavorites = useCallback((newFavorites) => {
@@ -295,7 +269,105 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
     [userRole, userId]
   );
 
-  // Define the handleViewDataset and handlePurchase functions without dependencies on each other
+  // Handle purchase start
+  const handlePurchaseStart = useCallback(
+    (datasetId) => {
+      setPurchasingDataset(datasetId);
+      setPurchaseStep("processing");
+
+      // Log purchase initiation for HIPAA compliance
+      hipaaComplianceService.createAuditLog("PURCHASE_INITIATED", {
+        datasetId,
+        timestamp: new Date().toISOString(),
+        userId,
+        userRole,
+        action: "PURCHASE_START",
+      });
+
+      // Show user notification
+      dispatch(
+        addNotification({
+          type: "info",
+          message: "Processing purchase request...",
+          duration: 3000,
+        })
+      );
+    },
+    [dispatch, userId, userRole]
+  );
+
+  // Handle purchase completion
+  const handlePurchaseComplete = useCallback(
+    (datasetId, transactionDetails) => {
+      setPurchaseStep("complete");
+      setLastTransactionDetails(transactionDetails);
+
+      // Log purchase completion for HIPAA compliance
+      hipaaComplianceService.createAuditLog("PURCHASE_COMPLETED", {
+        datasetId,
+        timestamp: new Date().toISOString(),
+        userId,
+        userRole,
+        action: "PURCHASE_COMPLETE",
+        transactionDetails,
+      });
+
+      // Show success notification
+      dispatch(
+        addNotification({
+          type: "success",
+          message: "Purchase completed successfully!",
+          duration: 5000,
+        })
+      );
+
+      // Reset purchase state after delay
+      setTimeout(() => {
+        setPurchasingDataset(null);
+        setPurchaseStep("idle");
+      }, 2000);
+
+      // Call original onPurchase callback if provided
+      if (onPurchase) {
+        onPurchase(datasetId, transactionDetails);
+      }
+    },
+    [dispatch, onPurchase, userId, userRole]
+  );
+
+  // Handle purchase error
+  const handlePurchaseError = useCallback(
+    (datasetId, error) => {
+      setPurchaseStep("error");
+
+      // Log purchase error for HIPAA compliance
+      hipaaComplianceService.createAuditLog("PURCHASE_ERROR", {
+        datasetId,
+        timestamp: new Date().toISOString(),
+        userId,
+        userRole,
+        action: "PURCHASE_ERROR",
+        errorMessage: error?.message || "Unknown purchase error",
+      });
+
+      // Show error notification
+      dispatch(
+        addNotification({
+          type: "error",
+          message:
+            error?.message || "Failed to complete purchase. Please try again.",
+          duration: 7000,
+        })
+      );
+
+      // Reset purchase state after delay
+      setTimeout(() => {
+        setPurchasingDataset(null);
+        setPurchaseStep("idle");
+      }, 3000);
+    },
+    [dispatch, userId, userRole]
+  );
 
   // First, create a viewDatasetImpl function that doesn't depend on requestAndVerifyConsent
   const viewDatasetImpl = useCallback(
@@ -362,26 +434,21 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
     ]
   );
 
-  // Similarly, create a purchaseDatasetImpl function
+  // Updated purchaseDatasetImpl function using mockPaymentService
   const purchaseDatasetImpl = useCallback(
     async (id, consentVerified = false) => {
       try {
-        // Find the dataset to purchase
-        const datasetToPurchase = healthData.find(dataset => dataset.id === id);
-        
-        if (!datasetToPurchase) {
+        // Find the dataset to get price information
+        const dataset = healthData.find((d) => d.id === id);
+        if (!dataset) {
           throw new Error("Dataset not found");
         }
-        
-        // Open the payment modal instead of proceeding with direct purchase
-        setSelectedDatasetForPurchase(datasetToPurchase);
-        setIsPaymentModalOpen(true);
-        
+
         // Log action for HIPAA compliance with comprehensive details
         await hipaaComplianceService.logDataAccess(
           id,
-          "Initiating purchase flow for dataset",
-          "PURCHASE_INITIATED",
+          "Purchasing dataset for research/personal health records",
+          "PURCHASE",
           {
             userRole,
             userId,
@@ -389,35 +456,78 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
             consentVerified: consentVerified,
             ipAddress: "client", // Server will log actual IP
             datasetInfo: {
-              category:
-                datasetToPurchase.category || "Unknown",
-              price: datasetToPurchase.price || "Unknown",
-              anonymized:
-                datasetToPurchase.anonymized || false,
-            }
+              category: dataset.category || "Unknown",
+              price: dataset.price || "Unknown",
+              anonymized: dataset.anonymized || false,
+            },
+            transactionId: `tx-${Date.now()}-${Math.floor(
+              Math.random() * 1000
+            )}`,
           }
         );
+
+        // Initialize mock payment service if needed
+        if (!mockPaymentService.isInitialized) {
+          await mockPaymentService.initializeProvider();
+        }
+
+        // Check balance before proceeding (optional)
+        const balance = await mockPaymentService.getBalance();
+        console.log(`Current balance: ${balance} ETH`);
+
+        if (parseFloat(balance) < parseFloat(dataset.price)) {
+          throw new Error("Insufficient funds to complete this purchase");
+        }
+
+        // Use mock payment service to purchase the dataset
+        const result = await mockPaymentService.purchaseDataset(
+          id,
+          dataset.price
+        );
+
+        if (!result.success) {
+          throw new Error(result.error || "Transaction failed");
+        }
+
+        // Record this purchase in the consent history for future reference
+        const updatedHistory = [
+          ...consentsHistory,
+          {
+            consentType: hipaaComplianceService.CONSENT_TYPES.DATA_SHARING,
+            timestamp: new Date().toISOString(),
+            consentGiven: true,
+            purpose: "Dataset purchase confirmation",
+            datasetId: id,
+            actionType: "PURCHASE_COMPLETED",
+            transactionHash: result.transactionHash,
+          },
+        ];
+        setConsentsHistory(updatedHistory);
+
+        return {
+          success: true,
+          datasetId: id,
+          timestamp: new Date().toISOString(),
+          transactionHash: result.transactionHash,
+          blockNumber: result.blockNumber,
+          gasUsed: result.gasUsed,
+        };
       } catch (err) {
-        console.error("Purchase initiation error:", err);
+        console.error("Purchase error:", err);
 
         // Log purchase failure for HIPAA compliance
-        await hipaaComplianceService.createAuditLog("DATASET_PURCHASE_INIT_FAILED", {
+        await hipaaComplianceService.createAuditLog("DATASET_PURCHASE_FAILED", {
           datasetId: id,
           timestamp: new Date().toISOString(),
           userId,
           userRole,
-          errorMessage: err.message || "Unknown error initiating purchase",
+          errorMessage: err.message || "Unknown purchase error",
         });
 
-        dispatch(
-          addNotification({
-            type: "error",
-            message: "Failed to initiate dataset purchase. Please try again.",
-          })
-        );
+        throw err; // Re-throw for handling in the calling function
       }
     },
-    [dispatch, healthData, userId, userRole]
+    [consentsHistory, healthData, userId, userRole]
   );
 
   // Request and verify consent for data access
@@ -549,99 +659,65 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
     [dispatch, requestAndVerifyConsent, viewDatasetImpl]
   );
 
-  // Similarly, define the public handlePurchase function
+  // Updated handlePurchase function to use our mock payment service
   const handlePurchase = useCallback(
     async (id) => {
       try {
+        // Start the purchase process
+        handlePurchaseStart(id);
+
         // Define the purpose for this action
         const purpose =
           "Purchasing dataset for research/personal health records";
 
-        // Verify consent before proceeding - this requires more explicit consent
+        // Verify consent before proceeding
         const hasConsent = await requestAndVerifyConsent(
           purpose,
           id,
           "PURCHASE"
         );
+
         if (!hasConsent) {
+          // Reset purchase state if consent was denied
+          setPurchasingDataset(null);
+          setPurchaseStep("idle");
           return; // Consent modal will be shown or action was denied
         }
 
-        // Call the implementation function with consent verified
-        await purchaseDatasetImpl(id, true);
+        // Proceed with the purchase
+        try {
+          // Use our updated purchaseDatasetImpl that uses mockPaymentService
+          const result = await purchaseDatasetImpl(id, true);
+
+          // If successful, call the completion handler with transaction details
+          handlePurchaseComplete(id, {
+            timestamp: result.timestamp,
+            datasetId: id,
+            transactionId: result.transactionHash,
+            blockNumber: result.blockNumber,
+            gasUsed: result.gasUsed,
+          });
+        } catch (err) {
+          // If purchase implementation failed, handle the error
+          handlePurchaseError(id, err);
+        }
       } catch (err) {
         console.error("Error in handlePurchase:", err);
-        dispatch(
-          addNotification({
-            type: "error",
-            message: "Failed to process dataset purchase",
-          })
-        );
-      }
-    },
-    [dispatch, requestAndVerifyConsent, purchaseDatasetImpl]
-  );
 
-  const handlePurchaseComplete = useCallback(
-    async (purchaseData) => {
-      try {
-        // Log successful purchase for HIPAA compliance
-        await hipaaComplianceService.logDataAccess(
-          purchaseData.datasetId,
-          "Dataset purchase completed successfully",
-          "PURCHASE_COMPLETED",
-          {
-            userRole,
-            userId,
-            timestamp: new Date().toISOString(),
-            transactionHash: purchaseData.transactionHash,
-            price: purchaseData.price
-          }
-        );
-
-        // Close the payment modal
-        setIsPaymentModalOpen(false);
-        
-        // Record this purchase in the consent history for future reference
-        const updatedHistory = [
-          ...consentsHistory,
-          {
-            consentType: hipaaComplianceService.CONSENT_TYPES.DATA_SHARING,
-            timestamp: new Date().toISOString(),
-            consentGiven: true,
-            purpose: "Dataset purchase confirmation",
-            datasetId: purchaseData.datasetId,
-            actionType: "PURCHASE_COMPLETED",
-          },
-        ];
-        setConsentsHistory(updatedHistory);
-
-        // Call the purchase complete callback
-        if (purchaseData) {
-          await purchaseData(purchaseData.datasetId);
+        // Handle any errors not caught by purchaseDatasetImpl
+        if (purchaseStep !== "error") {
+          handlePurchaseError(id, err);
         }
-
-        dispatch(
-          addNotification({
-            type: "success",
-            message: "Dataset purchased successfully!",
-          })
-        );
-
-        if (onPurchase) {
-          onPurchase(purchaseData.datasetId);
-        }
-      } catch (err) {
-        console.error("Purchase completion error:", err);
-        dispatch(
-          addNotification({
-            type: "error",
-            message: "Error completing purchase. Please contact support.",
-          })
-        );
       }
     },
-    [consentsHistory, dispatch, onPurchase, purchaseData, userId, userRole]
+    [
+      handlePurchaseStart,
+      handlePurchaseComplete,
+      handlePurchaseError,
+      requestAndVerifyConsent,
+      purchaseDatasetImpl,
+      purchaseStep,
+    ]
   );
 
   // Handle consent approval from modal
@@ -703,8 +779,21 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
             // Use viewDatasetImpl directly, since consent is already verified
             await viewDatasetImpl(datasetId, true);
           } else if (actionType === "PURCHASE" && datasetId) {
-            // Use purchaseDatasetImpl directly, since consent is already verified
-            await purchaseDatasetImpl(datasetId, true);
+            // For purchase, start with handlePurchaseStart
+            handlePurchaseStart(datasetId);
+            try {
+              // Use purchaseDatasetImpl directly, since consent is already verified
+              const result = await purchaseDatasetImpl(datasetId, true);
+              handlePurchaseComplete(datasetId, {
+                timestamp: result.timestamp,
+                datasetId,
+                transactionId: result.transactionHash,
+                blockNumber: result.blockNumber,
+                gasUsed: result.gasUsed,
+              });
+            } catch (err) {
+              handlePurchaseError(datasetId, err);
+            }
           } else if (actionType === "DOWNLOAD" && datasetId) {
             // Handle download logic here if applicable
           }
@@ -740,6 +829,9 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
       dispatch,
       viewDatasetImpl,
       purchaseDatasetImpl,
+      handlePurchaseStart,
+      handlePurchaseComplete,
+      handlePurchaseError,
       userId,
       userRole,
     ]
@@ -980,9 +1072,47 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
     );
   };
 
-  // Pass props to the view component
+  // Fetch current wallet balance to display
+  const [walletBalance, setWalletBalance] = useState(null);
+
+  useEffect(() => {
+    const fetchWalletBalance = async () => {
+      try {
+        if (mockPaymentService.isInitialized) {
+          const balance = await mockPaymentService.getBalance();
+          setWalletBalance(balance);
+        }
+      } catch (err) {
+        console.error("Error fetching wallet balance:", err);
+      }
+    };
+
+    fetchWalletBalance();
+
+    // Set up periodic balance updates
+    const intervalId = setInterval(fetchWalletBalance, 10000); // Check every 10 seconds
+
+    return () => clearInterval(intervalId);
+  }, [purchaseStep]); // Re-fetch when purchase state changes
+
+  // Pass props to the view component (including wallet balance)
   return (
     <>
+      {/* Optional wallet balance display */}
+      {walletBalance !== null && (
+        <div className="bg-blue-50 border border-blue-100 rounded-lg p-2 mb-4 flex justify-between items-center">
+          <span className="text-blue-700 font-medium">
+            Wallet Balance: {walletBalance} ETH
+          </span>
+          {lastTransactionDetails && (
+            <span className="text-xs text-blue-600">
+              Last transaction:{" "}
+              {lastTransactionDetails.transactionId?.substring(0, 10)}...
+            </span>
+          )}
+        </div>
+      )}
+
       <DataBrowserView
         userRole={userRole}
         loading={loading}
@@ -1015,15 +1145,11 @@ const DataBrowser = ({ onPurchase, onDatasetSelect }) => {
         studyTypes={STUDY_TYPES}
         dataFormats={DATA_FORMATS}
         consentVerified={consentVerified}
-      />
-
-      {/* Add the PaymentModal component */}
-      <PaymentModal
-        isOpen={isPaymentModalOpen}
-        onClose={() => setIsPaymentModalOpen(false)}
-        dataset={selectedDatasetForPurchase}
-        onPurchaseComplete={handlePurchaseComplete}
-        walletAddress={userId}
+        purchasingDataset={purchasingDataset}
+        purchaseStep={purchaseStep}
+        handlePurchaseStart={handlePurchaseStart}
+        handlePurchaseComplete={handlePurchaseComplete}
+        handlePurchaseError={handlePurchaseError}
       />
 
       {/* Render consent modal when needed */}
@@ -1037,4 +1163,4 @@ DataBrowser.propTypes = {
   onDatasetSelect: PropTypes.func,
 };
 
-export default DataBrowser;
+export default DataBrowser;
\ No newline at end of file
diff --git a/client/src/components/dashboard/Dashboard.js b/client/src/components/dashboard/Dashboard.js
index 878ff1f..93cf2d8 100644
--- a/client/src/components/dashboard/Dashboard.js
+++ b/client/src/components/dashboard/Dashboard.js
@@ -9,7 +9,7 @@ import {
   Clock,
   Shield,
   AlertCircle,
-  Check,
+  CheckCircle, // This is imported correctly
   Bell,
   Database,
   Download,
@@ -18,12 +18,20 @@ import {
   Filter,
   Microscope,
   BookOpen,
-  Info,
-  CheckCircle,
   Share2,
   Eye,
   Lock,
-  CreditCard,
+  Settings,
+  Activity,
+  Briefcase,
+  Clipboard,
+  Award,
+  Layers,
+  HelpCircle,
+  Zap,
+  Users,
+  FileSpreadsheet,
+  PieChart,
 } from "lucide-react";
 import { setLoading, setError } from "../../redux/slices/uiSlice.js";
 import { addNotification } from "../../redux/slices/notificationSlice.js";
@@ -33,20 +41,18 @@ import hipaaComplianceService from "../../services/hipaaComplianceService.js";
 import useAsyncOperation from "../../hooks/useAsyncOperation.js";
 import ErrorDisplay from "../ui/ErrorDisplay.js";
 import LoadingSpinner from "../ui/LoadingSpinner.js";
-import PaymentModal from "../PaymentModal.js";
-import transactionService from "../../services/transactionService.js";
 
 /**
  * Unified Dashboard Component
  *
- * Combines both patient and researcher dashboard functionality into a single component
- * that renders the appropriate interface based on the user's role.
- * Now includes integrated payment functionality for dataset purchases.
+ * Renders a role-specific dashboard with tailored metrics, features, and terminology
+ * for both patients and researchers.
  */
 const Dashboard = ({ onNavigate }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
+  // Get user information from Redux
   const userRole = useSelector(selectRole) || "patient"; // Default to patient if undefined
   const { loading: uiLoading = false, error: uiError = null } = useSelector(
     (state) => state.ui || {}
@@ -59,12 +65,21 @@ const Dashboard = ({ onNavigate }) => {
       "unknown"
   );
 
+  // Get user metrics based on role - removing unused variables to fix warnings
   const {
     pendingRequests = 0,
     activeStudies = 0,
-    appliedFilters = 0,
+    securityScore = 85,
+    // Removing unused variables from destructuring
+    // appliedFilters = 0,
+    // totalUploads = 0,
+    // totalShared = 0,
+    // earnings = "0",
+    // datasetsAccessed = 0,
+    // totalSpent = "0",
   } = userProfile || {};
 
+  // Get health data state from hook
   const {
     userRecords = [],
     healthData = [],
@@ -77,6 +92,7 @@ const Dashboard = ({ onNavigate }) => {
     initialData: [],
   }) || {};
 
+  // Set up async operation handling
   const { loading: asyncLoading = false, execute: executeAsync } =
     useAsyncOperation({
       componentId: "Dashboard",
@@ -91,96 +107,30 @@ const Dashboard = ({ onNavigate }) => {
       },
     }) || {};
 
-  const totalRecords = useMemo(() => userRecords.length || 0, [userRecords]);
-  const sharedRecords = useMemo(
-    () => userRecords.filter((record) => record?.shared).length || 0,
-    [userRecords]
-  );
-
-  // Payment modal states
-  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
-  const [selectedDatasetForPurchase, setSelectedDatasetForPurchase] = useState(null);
-  const [purchasedDatasets, setPurchasedDatasets] = useState([]);
-  const [recentTransactions, setRecentTransactions] = useState([]);
-  
-  // Apply filtering to datasets
-  const [filterApplied, setFilterApplied] = useState(false);
-  const [filterCriteria, setFilterCriteria] = useState({
-    category: "All",
-    priceRange: "all",
-    verifiedOnly: false
-  });
-
-  const [dashboardData, setDashboardData] = useState({
-    recentActivity: [],
-    securityScore: 85,
-    availableDatasets: [],
-  });
-
-  // State for viewing records (patient dashboard)
+  // Local state for UI
   const [viewingRecord, setViewingRecord] = useState(null);
-
-  // State for dataset preview (researcher dashboard)
   const [previewOpen, setPreviewOpen] = useState(false);
   const [selectedDataset, setSelectedDataset] = useState(null);
   const [detailsLoading, setDetailsLoading] = useState(false);
   const [datasetDetails, setDatasetDetails] = useState(null);
   const [downloadLoading, setDownloadLoading] = useState(false);
   const [downloadingRecordId, setDownloadingRecordId] = useState(null);
+  const [dashboardData, setDashboardData] = useState({
+    recentActivity: [],
+    availableDatasets: [],
+  });
 
   // Combine loading states
   const isLoading = uiLoading || healthDataLoading || asyncLoading;
 
-  // Filter health data using the filter criteria
-  const filteredHealthData = useMemo(() => {
-    if (!healthData || !filterApplied) return healthData;
-    
-    return healthData.filter(dataset => {
-      // Check category filter
-      if (filterCriteria.category !== "All" && dataset.category !== filterCriteria.category) {
-        return false;
-      }
-      
-      // Check price range filter
-      if (filterCriteria.priceRange !== "all") {
-        const price = parseFloat(dataset.price || 0);
-        if (filterCriteria.priceRange === "low" && price > 0.1) return false;
-        if (filterCriteria.priceRange === "medium" && (price <= 0.1 || price > 0.25)) return false;
-        if (filterCriteria.priceRange === "high" && price <= 0.25) return false;
-      }
-      
-      // Check verified filter
-      if (filterCriteria.verifiedOnly && !dataset.verified) {
-        return false;
-      }
-      
-      return true;
-    });
-  }, [healthData, filterApplied, filterCriteria]);
-
-  // Load purchased datasets on component mount for researchers
-  useEffect(() => {
-    if (userRole === "researcher") {
-      const purchased = transactionService.getPurchasedDatasets(userId);
-      setPurchasedDatasets(purchased);
-      
-      // Get recent transaction history
-      const transactions = transactionService.getTransactionHistory(userId)
-        .slice(0, 5) // Only get 5 most recent transactions
-        .map(tx => ({
-          id: tx.hash,
-          type: "purchase",
-          message: `Purchased dataset ${tx.metadata?.datasetId || 'Unknown'}`,
-          timestamp: new Date(tx.timestamp).toLocaleString(),
-          category: "Dataset Purchase",
-          status: tx.status === 'confirmed' ? 'success' : 'error'
-        }));
-      
-      setRecentTransactions(transactions);
-    }
-  }, [userRole, userId]);
+  // Derived state
+  const totalRecords = useMemo(() => userRecords.length || 0, [userRecords]);
+  const sharedRecords = useMemo(
+    () => userRecords.filter((record) => record?.shared).length || 0,
+    [userRecords]
+  );
 
-  // Function to fetch all dashboard data
+  // Fetch dashboard data
   const fetchDashboardData = useCallback(async () => {
     try {
       dispatch(setLoading(true));
@@ -192,28 +142,14 @@ const Dashboard = ({ onNavigate }) => {
         userRole,
         userId,
         timestamp: new Date().toISOString(),
-        appliedFilters: filterApplied ? appliedFilters : 0, // Use appliedFilters counter
-        filterCriteria: filterApplied ? JSON.stringify(filterCriteria) : "none"
       });
 
-      // Filter out already purchased datasets for researchers
-      let availableDatasets = userRole === "researcher" ? filteredHealthData || [] : [];
-      
-      if (userRole === "researcher" && purchasedDatasets.length > 0) {
-        availableDatasets = availableDatasets.filter(
-          dataset => !purchasedDatasets.includes(dataset.id)
-        );
-      }
-
       // Set appropriate dashboard data based on role
       setDashboardData((prevData) => ({
         ...prevData,
         securityScore: userProfile?.securityScore || 85,
-        // Combine any API-fetched activity with local transaction records
-        recentActivity: userRole === "researcher" 
-          ? [...recentTransactions, ...(prevData.recentActivity || [])] 
-          : prevData.recentActivity || [],
-        availableDatasets: availableDatasets,
+        recentActivity: [],
+        availableDatasets: userRole === "researcher" ? healthData || [] : [],
       }));
 
       dispatch(setLoading(false));
@@ -230,63 +166,14 @@ const Dashboard = ({ onNavigate }) => {
 
       dispatch(setLoading(false));
     }
-  }, [
-    userRole, 
-    userId, 
-    dispatch, 
-    filteredHealthData, 
-    userProfile, 
-    purchasedDatasets, 
-    recentTransactions, 
-    filterApplied, 
-    appliedFilters, 
-    filterCriteria
-  ]);
-
-  // Apply filter handler
-  const handleApplyFilter = useCallback(() => {
-    setFilterApplied(true);
-    
-    // Log filter application for HIPAA compliance
-    hipaaComplianceService.createAuditLog("FILTER_APPLIED", {
-      action: "FILTER",
-      userRole,
-      userId,
-      timestamp: new Date().toISOString(),
-      filterCriteria: JSON.stringify(filterCriteria)
-    });
-    
-    // Refresh data with filters
-    fetchDashboardData();
-  }, [fetchDashboardData, filterCriteria, userRole, userId]);
-
-  // Reset filters handler
-  const handleResetFilters = useCallback(() => {
-    setFilterApplied(false);
-    setFilterCriteria({
-      category: "All",
-      priceRange: "all",
-      verifiedOnly: false
-    });
-    
-    // Log filter reset for HIPAA compliance
-    hipaaComplianceService.createAuditLog("FILTER_RESET", {
-      action: "RESET_FILTER",
-      userRole,
-      userId,
-      timestamp: new Date().toISOString()
-    });
-    
-    // Refresh data
-    fetchDashboardData();
-  }, [fetchDashboardData, userRole, userId]);
+  }, [userRole, userId, dispatch, healthData, userProfile]);
 
-  // Fetch dashboard data when component mounts or when dependencies change
+  // Fetch dashboard data on component mount
   useEffect(() => {
     fetchDashboardData();
   }, [fetchDashboardData]);
 
-  // Navigation handlers - memoized to prevent unnecessary recreations
+  // Navigation handler
   const handleNavigateTo = useCallback(
     (path) => {
       if (onNavigate) {
@@ -298,7 +185,7 @@ const Dashboard = ({ onNavigate }) => {
     [navigate, onNavigate]
   );
 
-  // Handle record viewing (Patient dashboard)
+  // Patient-specific handlers
   const handleViewRecord = useCallback(
     async (recordId) => {
       executeAsync(async () => {
@@ -320,7 +207,6 @@ const Dashboard = ({ onNavigate }) => {
     [executeAsync, getRecordDetails, userId]
   );
 
-  // Handle record download (Patient dashboard)
   const handleDownloadRecord = useCallback(
     async (recordId) => {
       try {
@@ -361,7 +247,6 @@ const Dashboard = ({ onNavigate }) => {
     [downloadRecord, dispatch, userId]
   );
 
-  // Handle share record (Patient dashboard)
   const handleShareRecord = useCallback(
     async (recordId) => {
       executeAsync(async () => {
@@ -399,7 +284,7 @@ const Dashboard = ({ onNavigate }) => {
     setViewingRecord(null);
   }, []);
 
-  // View dataset details (Researcher dashboard)
+  // Researcher-specific handlers
   const handleViewDataset = useCallback(
     async (datasetId) => {
       executeAsync(async () => {
@@ -427,107 +312,31 @@ const Dashboard = ({ onNavigate }) => {
     [executeAsync, getRecordDetails, userId, userRole]
   );
 
-  // Handle dataset purchase (Researcher dashboard)
   const handlePurchaseDataset = useCallback(
-    (datasetId) => {
-      // Find the dataset to purchase
-      const datasetToPurchase = healthData.find(dataset => dataset.id === datasetId);
-      
-      if (!datasetToPurchase) {
-        dispatch(
-          addNotification({
-            type: "error",
-            message: "Dataset not found",
-          })
-        );
-        return;
-      }
-      
-      // Check if already purchased
-      if (purchasedDatasets.includes(datasetId)) {
-        dispatch(
-          addNotification({
-            type: "info",
-            message: "You have already purchased this dataset",
-          })
-        );
-        return;
-      }
-      
-      // Set the dataset for purchase and open the payment modal
-      setSelectedDatasetForPurchase(datasetToPurchase);
-      setIsPaymentModalOpen(true);
-    },
-    [dispatch, healthData, purchasedDatasets]
-  );
-
-  // Handle successful purchase completion
-  const handlePurchaseComplete = useCallback(
-    async (purchaseDetails) => {
-      try {
+    async (id) => {
+      executeAsync(async () => {
         // Log action for HIPAA compliance
         await hipaaComplianceService.logDataAccess(
-          purchaseDetails.datasetId,
-          "Dataset purchase completed",
-          "PURCHASE_COMPLETE",
+          id,
+          "Purchasing dataset for research",
+          "PURCHASE",
           {
             userId,
             userRole,
-            transactionHash: purchaseDetails.transactionHash,
-            timestamp: purchaseDetails.timestamp,
-            price: purchaseDetails.price,
-            paymentMethod: purchaseDetails.paymentMethod
           }
         );
 
-        // Update local state to reflect the purchase
-        setPurchasedDatasets(prev => [...prev, purchaseDetails.datasetId]);
-        
-        // Add the transaction to recent activity
-        const newTransaction = {
-          id: purchaseDetails.transactionHash,
-          type: "purchase",
-          message: `Purchased dataset ${purchaseDetails.datasetId}`,
-          timestamp: new Date().toLocaleString(),
-          category: "Dataset Purchase",
-          status: "success"
-        };
-        
-        setRecentTransactions(prev => [newTransaction, ...prev]);
-        
-        // Update dashboard data to include new transaction
-        setDashboardData(prev => ({
-          ...prev,
-          recentActivity: [newTransaction, ...(prev.recentActivity || [])]
-        }));
-
-        // Show success notification
         dispatch(
           addNotification({
             type: "success",
-            message: "Dataset purchased successfully! You now have access to this data.",
-            duration: 5000,
-          })
-        );
-        
-        // Close preview modal if open
-        if (previewOpen) {
-          setPreviewOpen(false);
-        }
-        
-        // Refresh dashboard data to reflect changes
-        fetchDashboardData();
-      } catch (error) {
-        console.error("Error processing purchase completion:", error);
-        dispatch(
-          addNotification({
-            type: "error",
-            message: "There was an issue recording your purchase. Please contact support.",
+            message: "Dataset purchased successfully!",
           })
         );
-      }
+
+        // Here would be the actual purchase functionality
+      });
     },
-    [dispatch, fetchDashboardData, previewOpen, userId, userRole]
+    [executeAsync, dispatch, userId, userRole]
   );
 
   // Close the preview modal (Researcher dashboard)
@@ -535,13 +344,13 @@ const Dashboard = ({ onNavigate }) => {
     setPreviewOpen(false);
   }, []);
 
-  // Activity status & icon helpers for activity display
+  // Activity status & icon helpers
   const getActivityIcon = (type) => {
     switch (type) {
       case "upload":
         return <Upload className="w-5 h-5 text-blue-500" />;
       case "access":
-        return <Check className="w-5 h-5 text-green-500" />;
+        return <CheckCircle className="w-5 h-5 text-green-500" />; // Fixed: Changed 'Check' to 'CheckCircle'
       case "request":
         return <Bell className="w-5 h-5 text-yellow-500" />;
       case "download":
@@ -554,10 +363,6 @@ const Dashboard = ({ onNavigate }) => {
         return <Microscope className="w-5 h-5 text-purple-500" />;
       case "publication":
         return <BookOpen className="w-5 h-5 text-indigo-500" />;
-      case "purchase":
-        return <CreditCard className="w-5 h-5 text-blue-500" />;
-      case "filter":
-        return <Filter className="w-5 h-5 text-teal-500" />;
       default:
         return <Clock className="w-5 h-5 text-gray-500" />;
     }
@@ -576,14 +381,6 @@ const Dashboard = ({ onNavigate }) => {
     }
   };
 
-  // Check if a dataset is already purchased
-  const isDatasetPurchased = useCallback(
-    (datasetId) => {
-      return purchasedDatasets.includes(datasetId);
-    },
-    [purchasedDatasets]
-  );
-
   // Loading state
   if (isLoading && !uiError) {
     return (
@@ -603,7 +400,7 @@ const Dashboard = ({ onNavigate }) => {
     );
   }
 
-  // Error state - using our standardized error component
+  // Error state
   if (uiError) {
     return (
       <div className="flex justify-center items-center min-h-[60vh] px-4">
@@ -617,27 +414,27 @@ const Dashboard = ({ onNavigate }) => {
     );
   }
 
-  // PATIENT DASHBOARD RENDER
+  // PATIENT DASHBOARD
   if (userRole === "patient") {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* User welcome */}
+        {/* User welcome - Patient */}
         <div className="mb-8">
           <h1 className="text-2xl font-bold text-gray-900">
             Welcome, {userProfile?.name || "Patient"}
           </h1>
           <p className="text-gray-600">
-            Your patient dashboard for managing health data
+            Manage your health data securely with Healthmint
           </p>
         </div>
 
-        {/* Stats Grid */}
+        {/* Stats Grid - Patient */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
           <div className="bg-white rounded-xl shadow-md p-6 hover:transform hover:-translate-y-1 transition-all duration-300">
             <div className="flex items-center gap-4">
               <FileText className="text-blue-500 w-8 h-8" />
               <div>
-                <p className="text-gray-600 text-sm">Total Records</p>
+                <p className="text-gray-600 text-sm">My Health Records</p>
                 <p className="text-2xl font-semibold">{totalRecords}</p>
               </div>
             </div>
@@ -645,7 +442,7 @@ const Dashboard = ({ onNavigate }) => {
 
           <div className="bg-white rounded-xl shadow-md p-6 hover:transform hover:-translate-y-1 transition-all duration-300">
             <div className="flex items-center gap-4">
-              <Database className="text-green-500 w-8 h-8" />
+              <Share2 className="text-green-500 w-8 h-8" />
               <div>
                 <p className="text-gray-600 text-sm">Shared Records</p>
                 <p className="text-2xl font-semibold">{sharedRecords}</p>
@@ -657,7 +454,7 @@ const Dashboard = ({ onNavigate }) => {
             <div className="flex items-center gap-4">
               <Bell className="text-purple-500 w-8 h-8" />
               <div>
-                <p className="text-gray-600 text-sm">Pending Requests</p>
+                <p className="text-gray-600 text-sm">Access Requests</p>
                 <p className="text-2xl font-semibold">{pendingRequests}</p>
               </div>
             </div>
@@ -667,43 +464,56 @@ const Dashboard = ({ onNavigate }) => {
             <div className="flex items-center gap-4">
               <Shield className="text-indigo-500 w-8 h-8" />
               <div>
-                <p className="text-gray-600 text-sm">Data Security Score</p>
-                <p className="text-2xl font-semibold">
-                  {dashboardData.securityScore}%
-                </p>
+                <p className="text-gray-600 text-sm">Privacy Score</p>
+                <p className="text-2xl font-semibold">{securityScore}%</p>
               </div>
             </div>
           </div>
         </div>
 
-        {/* Quick Actions */}
+        {/* Quick Actions - Patient */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
           <button
             onClick={() => handleNavigateTo("/upload")}
             className="p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 font-medium"
           >
             <Upload className="w-5 h-5" />
-            Upload New Record
+            Upload Health Record
           </button>
 
           <button
-            onClick={() => handleNavigateTo("/permissions")}
-            className="p-4 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2 font-medium"
+            onClick={() => handleNavigateTo("/profile")}
+            className="p-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2 font-medium"
           >
-            <Shield className="w-5 h-5" />
-            Manage Permissions
+            <Settings className="w-5 h-5" />
+            Privacy Settings
           </button>
 
           <button
             onClick={() => handleNavigateTo("/history")}
-            className="p-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2 font-medium"
+            className="p-4 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2 font-medium"
           >
             <Clock className="w-5 h-5" />
-            View Access History
+            Access History
           </button>
         </div>
 
-        {/* Health Records Section */}
+        {/* HIPAA Compliance Banner - Patient */}
+        <div className="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-8 flex items-start gap-3">
+          <Shield className="text-blue-500 flex-shrink-0 mt-1" size={24} />
+          <div>
+            <h3 className="font-medium text-blue-700">
+              Your Data is Protected
+            </h3>
+            <p className="text-sm text-blue-600">
+              Your health information is securely stored and protected in
+              accordance with HIPAA regulations. You control who can access your
+              data and all access is logged for your security.
+            </p>
+          </div>
+        </div>
+
+        {/* Health Records Section - Patient */}
         <div className="bg-white rounded-xl shadow-md p-6 mb-8">
           <h2 className="text-2xl font-semibold mb-6">Your Health Records</h2>
 
@@ -781,7 +591,7 @@ const Dashboard = ({ onNavigate }) => {
             </div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {userRecords.map((record) => (
+              {userRecords.slice(0, 6).map((record) => (
                 <div
                   key={record.id}
                   className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors"
@@ -850,22 +660,15 @@ const Dashboard = ({ onNavigate }) => {
 
                     <button
                       onClick={() => handleDownloadRecord(record.id)}
+                      className="flex-1 flex items-center justify-center gap-1 text-xs text-green-600 hover:text-green-800"
                       disabled={
                         downloadLoading && downloadingRecordId === record.id
                       }
-                      className={`flex items-center justify-center gap-2 px-4 py-2 ${
-                        downloadLoading && downloadingRecordId === record.id
-                          ? "bg-gray-200 text-gray-500 cursor-not-allowed"
-                          : "bg-blue-500 hover:bg-blue-600 text-white"
-                      } rounded-lg`}
-                      aria-busy={
-                        downloadLoading && downloadingRecordId === record.id
-                      }
                     >
                       {downloadLoading && downloadingRecordId === record.id ? (
-                        <LoadingSpinner size="small" color="gray" />
+                        <LoadingSpinner size="small" color="green" />
                       ) : (
-                        <Download size={18} />
+                        <Download size={14} />
                       )}
                       <span>Download</span>
                     </button>
@@ -882,6 +685,101 @@ const Dashboard = ({ onNavigate }) => {
               ))}
             </div>
           )}
+
+          {/* View all records button */}
+          {userRecords.length > 6 && (
+            <div className="mt-6 text-center">
+              <button
+                onClick={() => handleNavigateTo("/records")}
+                className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors inline-flex items-center gap-2"
+              >
+                View All Records
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Data Controls Section - Patient */}
+        <div className="bg-white rounded-xl shadow-md p-6 mb-8">
+          <h2 className="text-2xl font-semibold mb-6">Data Controls</h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="border border-gray-200 rounded-lg p-5">
+              <div className="flex items-center mb-4">
+                <Lock className="text-blue-500 w-6 h-6 mr-3" />
+                <h3 className="text-lg font-medium">Privacy Settings</h3>
+              </div>
+              <p className="text-gray-600 mb-4">
+                Control who can access your health data and how it's used for
+                research.
+              </p>
+              <button
+                onClick={() => handleNavigateTo("/profile")}
+                className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors inline-flex items-center gap-2"
+              >
+                Manage Privacy
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <div className="border border-gray-200 rounded-lg p-5">
+              <div className="flex items-center mb-4">
+                <Database className="text-purple-500 w-6 h-6 mr-3" />
+                <h3 className="text-lg font-medium">Data Sharing</h3>
+              </div>
+              <p className="text-gray-600 mb-4">
+                Manage research access to your anonymized health data and track
+                usage.
+              </p>
+              <button
+                onClick={() => handleNavigateTo("/sharing")}
+                className="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors inline-flex items-center gap-2"
+              >
+                Sharing Controls
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
         </div>
 
         {/* Recent Activity */}
@@ -927,33 +825,80 @@ const Dashboard = ({ onNavigate }) => {
             </div>
           )}
         </div>
+
+        {/* Educational Resources - Patient */}
+        <div className="bg-white rounded-xl shadow-md p-6 mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Health Resources</h2>
+          <p className="text-gray-600 mb-6">
+            Learn more about managing your health data and privacy.
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all">
+              <HelpCircle className="text-blue-500 w-8 h-8 mb-3" />
+              <h3 className="font-medium mb-2">HIPAA Rights Guide</h3>
+              <p className="text-sm text-gray-600 mb-3">
+                Understand your rights under HIPAA and how your data is
+                protected.
+              </p>
+              {/* Fix for anchor href warning */}
+              <button
+                onClick={() => handleNavigateTo("/resources/hipaa-guide")}
+                className="text-blue-600 text-sm hover:underline"
+              >
+                Learn more →
+              </button>
+            </div>
+
+            <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all">
+              <Layers className="text-green-500 w-8 h-8 mb-3" />
+              <h3 className="font-medium mb-2">Data Sharing Benefits</h3>
+              <p className="text-sm text-gray-600 mb-3">
+                How sharing your health data can contribute to medical advances.
+              </p>
+              {/* Fix for anchor href warning */}
+              <button
+                onClick={() => handleNavigateTo("/resources/sharing-benefits")}
+                className="text-green-600 text-sm hover:underline"
+              >
+                Learn more →
+              </button>
+            </div>
+
+            <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all">
+              <Shield className="text-purple-500 w-8 h-8 mb-3" />
+              <h3 className="font-medium mb-2">Privacy Best Practices</h3>
+              <p className="text-sm text-gray-600 mb-3">
+                Tips for maintaining privacy while sharing health information.
+              </p>
+              {/* Fix for anchor href warning */}
+              <button
+                onClick={() => handleNavigateTo("/resources/privacy-practices")}
+                className="text-purple-600 text-sm hover:underline"
+              >
+                Learn more →
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
 
-  // RESEARCHER DASHBOARD RENDER
+  // RESEARCHER DASHBOARD
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      {/* Payment Modal */}
-      <PaymentModal
-        isOpen={isPaymentModalOpen}
-        onClose={() => setIsPaymentModalOpen(false)}
-        dataset={selectedDatasetForPurchase}
-        onPurchaseComplete={handlePurchaseComplete}
-        walletAddress={userId}
-      />
-
-      {/* User welcome */}
+      {/* User welcome - Researcher */}
       <div className="mb-8">
         <h1 className="text-2xl font-bold text-gray-900">
           Welcome, {userProfile?.name || "Researcher"}
         </h1>
         <p className="text-gray-600">
-          Your researcher dashboard for discovering and analyzing health data
+          Discover and analyze health datasets for your research
         </p>
       </div>
 
-      {/* Stats Grid */}
+      {/* Stats Grid - Researcher */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
         <div className="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
           <div className="flex items-center gap-4">
@@ -969,7 +914,7 @@ const Dashboard = ({ onNavigate }) => {
 
         <div className="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
           <div className="flex items-center gap-4">
-            <BarChart className="text-green-500 w-8 h-8" />
+            <Microscope className="text-indigo-500 w-8 h-8" />
             <div>
               <p className="text-gray-600 text-sm">Active Studies</p>
               <p className="text-2xl font-semibold">{activeStudies}</p>
@@ -979,386 +924,219 @@ const Dashboard = ({ onNavigate }) => {
 
         <div className="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
           <div className="flex items-center gap-4">
-            <CreditCard className="text-blue-500 w-8 h-8" />
+            <Clipboard className="text-blue-500 w-8 h-8" />
             <div>
-              <p className="text-gray-600 text-sm">Purchased Datasets</p>
-              <p className="text-2xl font-semibold">{purchasedDatasets.length}</p>
+              <p className="text-gray-600 text-sm">Data Requests</p>
+              <p className="text-2xl font-semibold">{pendingRequests}</p>
             </div>
           </div>
         </div>
 
         <div className="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
           <div className="flex items-center gap-4">
-            <Filter className="text-indigo-500 w-8 h-8" />
+            <Award className="text-green-500 w-8 h-8" />
             <div>
-              <p className="text-gray-600 text-sm">Applied Filters</p>
-              <p className="text-2xl font-semibold">{appliedFilters}</p>
+              <p className="text-gray-600 text-sm">Published Findings</p>
+              <p className="text-2xl font-semibold">
+                {userProfile?.publications?.length || 0}
+              </p>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Quick Actions */}
+      {/* Quick Actions - Researcher */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
         <button
           onClick={() => handleNavigateTo("/browse")}
           className="p-4 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2 font-medium"
         >
-          <Database className="w-5 h-5" />
-          Browse Datasets
+          <Search className="w-5 h-5" />
+          Explore Datasets
         </button>
 
         <button
           onClick={() => handleNavigateTo("/studies")}
-          className="p-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2 font-medium"
+          className="p-4 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors flex items-center justify-center gap-2 font-medium"
         >
-          <BarChart className="w-5 h-5" />
-          View Studies
+          <Microscope className="w-5 h-5" />
+          Manage Studies
         </button>
 
         <button
-          onClick={() => handleNavigateTo("/purchased")}
+          onClick={() => handleNavigateTo("/analysis")}
           className="p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 font-medium"
         >
-          <CreditCard className="w-5 h-5" />
-          My Purchased Data
+          <FileSpreadsheet className="w-5 h-5" />
+          Data Analysis Tools
         </button>
       </div>
 
-      {/* Filter Panel - Now using Filter component properly */}
-      <div className="bg-white rounded-xl shadow-md p-6 mb-8">
-        <div className="flex items-center gap-2 mb-4">
-          <Filter className="text-blue-500" size={20} />
-          <h2 className="text-lg font-medium">Filter Datasets</h2>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
-          <div>
-            <label
-              htmlFor="category"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Category
-            </label>
-            <select
-              id="category"
-              value={filterCriteria.category}
-              onChange={(e) => setFilterCriteria(prev => ({ ...prev, category: e.target.value }))}
-              className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-            >
-              <option value="All">All Categories</option>
-              <option value="General Health">General Health</option>
-              <option value="Cardiology">Cardiology</option>
-              <option value="Neurology">Neurology</option>
-              <option value="Laboratory">Laboratory</option>
-              <option value="Genetics">Genetics</option>
-            </select>
-          </div>
-
-          <div>
-            <label
-              htmlFor="priceRange"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Price Range
-            </label>
-            <select
-              id="priceRange"
-              value={filterCriteria.priceRange}
-              onChange={(e) => setFilterCriteria(prev => ({ ...prev, priceRange: e.target.value }))}
-              className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-            >
-              <option value="all">All Prices</option>
-              <option value="low">Low (≤ 0.1 ETH)</option>
-              <option value="medium">Medium (0.1-0.24 ETH)</option>
-              <option value="high">High (≥ 0.25 ETH)</option>
-            </select>
-          </div>
-
-          <div className="flex items-center mt-7">
-            <label className="flex items-center space-x-2 cursor-pointer">
-              <input
-                type="checkbox"
-                checked={filterCriteria.verifiedOnly}
-                onChange={(e) => setFilterCriteria(prev => ({ ...prev, verifiedOnly: e.target.checked }))}
-                className="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-              />
-              <span className="text-gray-700">Show verified data only</span>
-            </label>
-          </div>
-        </div>
-
-        <div className="flex justify-end gap-3">
-          <button
-            onClick={handleResetFilters}
-            className="px-4 py-2 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50"
-          >
-            Reset Filters
-          </button>
-
-          <button
-            onClick={handleApplyFilter}
-            className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 flex items-center gap-2"
-          >
-            <Filter size={16} />
-            Apply Filters
-          </button>
+      {/* Research Ethics Banner - Researcher */}
+      <div className="bg-purple-50 border border-purple-100 rounded-lg p-4 mb-8 flex items-start gap-3">
+        <Briefcase className="text-purple-500 flex-shrink-0 mt-1" size={24} />
+        <div>
+          <h3 className="font-medium text-purple-700">
+            Research Ethics Reminder
+          </h3>
+          <p className="text-sm text-purple-600">
+            All data access is HIPAA-compliant and ethically sourced. Remember
+            to include proper attribution when publishing findings based on
+            Healthmint datasets.
+          </p>
         </div>
       </div>
 
-      {/* Purchased Datasets Section */}
-      {purchasedDatasets.length > 0 && (
-        <div className="bg-white rounded-xl shadow-md mb-8">
-          <div className="p-6 border-b border-gray-200">
-            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-              <h2 className="text-2xl font-semibold text-gray-900">
-                Your Purchased Datasets
-              </h2>
-              <div className="flex items-center gap-4">
-                <div className="flex items-center gap-2">
-                  <CheckCircle className="w-4 h-4 text-green-500" />
-                  <span className="text-sm text-gray-600">Purchased Data</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="p-6 space-y-4">
-            {purchasedDatasets.length > 0 ? (
-              <div className="space-y-4">
-                {healthData.filter(dataset => purchasedDatasets.includes(dataset.id))
-                  .map(dataset => (
-                    <div
-                      key={dataset.id}
-                      className="border border-green-100 bg-green-50 rounded-lg p-6 hover:bg-green-100 transition-colors"
-                    >
-                      <div className="flex flex-col lg:flex-row justify-between items-start gap-4">
-                        <div className="flex-1">
-                          <div className="flex items-center gap-2">
-                            <h3 className="text-lg font-medium">
-                              {dataset.title || dataset.category || "Health Dataset"}
-                            </h3>
-                            <CheckCircle className="w-4 h-4 text-green-500" />
-                          </div>
-                          <p className="text-gray-600 text-sm mt-1">
-                            Purchased • {dataset.recordCount || "Unknown"} records
-                          </p>
-                          <p className="text-gray-700 mt-2">
-                            {dataset.description || "No description available."}
-                          </p>
-                          <div className="flex flex-wrap gap-2 mt-3">
-                            <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                              {dataset.category || "Health Data"}
-                            </span>
-                            <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                              Purchased
-                            </span>
-                          </div>
-                        </div>
-                        <div className="flex flex-col gap-2 w-full lg:w-auto">
-                          <button
-                            onClick={() => handleViewDataset(dataset.id)}
-                            className="w-full lg:w-auto bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2"
-                          >
-                            <Eye className="w-4 h-4" />
-                            View Data
-                          </button>
-                          <button 
-                            className="w-full lg:w-auto border border-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2"
-                          >
-                            <Download className="w-4 h-4" />
-                            Download
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-              </div>
-            ) : (
-              <div className="text-center py-8 bg-gray-50 rounded-lg">
-                <CreditCard className="w-12 h-12 text-gray-300 mx-auto mb-3" />
-                <p className="text-gray-700 mb-2">You haven't purchased any datasets yet</p>
+      {/* Dataset preview modal */}
+      {previewOpen && selectedDataset && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
+            <div className="p-6 border-b border-gray-200">
+              <div className="flex justify-between items-center">
+                <h3 className="text-2xl font-bold">Dataset Preview</h3>
                 <button
-                  onClick={() => handleNavigateTo("/browse")}
-                  className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors inline-flex items-center gap-2 text-sm font-medium"
+                  onClick={handleClosePreview}
+                  className="text-gray-500 hover:text-gray-700"
                 >
-                  <Search className="w-4 h-4" />
-                  Browse Available Datasets
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
                 </button>
               </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Available Datasets */}
-      <div className="bg-white rounded-xl shadow-md mb-8">
-        <div className="p-6 border-b border-gray-200">
-          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-            <h2 className="text-2xl font-semibold text-gray-900">
-              Available Datasets {filterApplied ? "(Filtered)" : ""}
-            </h2>
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-2">
-                <CheckCircle className="w-4 h-4 text-green-500" />
-                <span className="text-sm text-gray-600">Verified Data</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <AlertCircle className="w-4 h-4 text-yellow-500" />
-                <span className="text-sm text-gray-600">
-                  Pending Verification
-                </span>
-              </div>
             </div>
-          </div>
-        </div>
 
-        <div className="p-6 space-y-4">
-          {/* Dataset preview modal */}
-          {previewOpen && selectedDataset && (
-            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-              <div className="bg-white rounded-xl shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
-                <div className="p-6 border-b border-gray-200">
-                  <div className="flex justify-between items-center">
-                    <h3 className="text-2xl font-bold">Dataset Preview</h3>
-                    <button
-                      onClick={handleClosePreview}
-                      className="text-gray-500 hover:text-gray-700"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-6 w-6"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
+            <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
+              {detailsLoading ? (
+                <div className="flex justify-center items-center h-64">
+                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500"></div>
                 </div>
-
-                <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
-                  {detailsLoading ? (
-                    <div className="flex justify-center items-center h-64">
-                      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
-                    </div>
-                  ) : datasetDetails ? (
-                    <div className="space-y-6">
-                      <div className="bg-blue-50 rounded-lg p-4 border border-blue-100">
-                        <div className="flex items-start gap-2">
-                          <Info
-                            size={20}
-                            className="text-blue-500 flex-shrink-0 mt-0.5"
-                          />
-                          <div className="flex-1">
-                            <h5 className="font-medium text-blue-700">
-                              HIPAA Compliance Notice
-                            </h5>
-                            <p className="text-sm text-blue-600">
-                              This dataset access is logged and monitored in
-                              compliance with HIPAA regulations. All data
-                              accessed is de-identified according to HIPAA Safe
-                              Harbor provisions.
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div>
-                        <h5 className="font-semibold text-gray-900 mb-2">
-                          Description
+              ) : datasetDetails ? (
+                <div className="space-y-6">
+                  <div className="bg-purple-50 rounded-lg p-4 border border-purple-100">
+                    <div className="flex items-start gap-2">
+                      <Briefcase
+                        size={20}
+                        className="text-purple-500 flex-shrink-0 mt-0.5"
+                      />
+                      <div className="flex-1">
+                        <h5 className="font-medium text-purple-700">
+                          Research Use Guidelines
                         </h5>
-                        <p className="text-gray-700">
-                          {datasetDetails.description ||
-                            "No description available."}
+                        <p className="text-sm text-purple-600">
+                          This dataset is provided for research purposes only.
+                          All data is de-identified according to HIPAA Safe
+                          Harbor provisions.
                         </p>
                       </div>
+                    </div>
+                  </div>
 
-                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                        <div className="bg-gray-50 p-4 rounded-lg">
-                          <h5 className="font-medium text-gray-900 mb-1">
-                            Records
-                          </h5>
-                          <p className="text-lg font-semibold">
-                            {datasetDetails.recordCount || "Unknown"}
-                          </p>
-                        </div>
-                        <div className="bg-gray-50 p-4 rounded-lg">
-                          <h5 className="font-medium text-gray-900 mb-1">
-                            Format
-                          </h5>
-                          <p className="text-lg font-semibold">
-                            {datasetDetails.format || "Various"}
-                          </p>
-                        </div>
-                        <div className="bg-gray-50 p-4 rounded-lg">
-                          <h5 className="font-medium text-gray-900 mb-1">
-                            Price
-                          </h5>
-                          <p className="text-lg font-semibold text-blue-600">
-                            {datasetDetails.price || "0.00"} ETH
-                          </p>
-                        </div>
-                      </div>
+                  <div>
+                    <h5 className="font-semibold text-gray-900 mb-2">
+                      Description
+                    </h5>
+                    <p className="text-gray-700">
+                      {datasetDetails.description ||
+                        "No description available."}
+                    </p>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <h5 className="font-medium text-gray-900 mb-1">
+                        Records
+                      </h5>
+                      <p className="text-lg font-semibold">
+                        {datasetDetails.recordCount || "Unknown"}
+                      </p>
                     </div>
-                  ) : (
-                    <div className="text-center py-12">
-                      <AlertCircle
-                        size={48}
-                        className="mx-auto text-gray-400 mb-4"
-                      />
-                      <p className="text-gray-500">
-                        Dataset details not available
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <h5 className="font-medium text-gray-900 mb-1">Format</h5>
+                      <p className="text-lg font-semibold">
+                        {datasetDetails.format || "Various"}
                       </p>
                     </div>
-                  )}
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <h5 className="font-medium text-gray-900 mb-1">
+                        Data Type
+                      </h5>
+                      <p className="text-lg font-semibold">
+                        {datasetDetails.anonymized
+                          ? "Anonymized"
+                          : "Identifiable"}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center py-12">
+                  <AlertCircle
+                    size={48}
+                    className="mx-auto text-gray-400 mb-4"
+                  />
+                  <p className="text-gray-500">Dataset details not available</p>
                 </div>
+              )}
+            </div>
 
-                <div className="p-6 border-t border-gray-200 bg-gray-50">
-                  <div className="flex justify-end gap-3">
-                    <button
-                      onClick={handleClosePreview}
-                      className="px-4 py-2 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50"
-                    >
-                      Close
-                    </button>
+            <div className="p-6 border-t border-gray-200 bg-gray-50">
+              <div className="flex justify-end gap-3">
+                <button
+                  onClick={handleClosePreview}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50"
+                >
+                  Close
+                </button>
 
-                    {!isDatasetPurchased(selectedDataset) ? (
-                      <button
-                        onClick={() => {
-                          handlePurchaseDataset(selectedDataset);
-                          handleClosePreview();
-                        }}
-                        className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 flex items-center gap-2"
-                      >
-                        <CreditCard size={16} className="mr-1" />
-                        Purchase Dataset
-                      </button>
-                    ) : (
-                      <button
-                        className="px-4 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 flex items-center gap-2"
-                      >
-                        <CheckCircle size={16} className="mr-1" />
-                        Already Purchased
-                      </button>
-                    )}
+                <button
+                  onClick={() => {
+                    handlePurchaseDataset(selectedDataset);
+                    handleClosePreview();
+                  }}
+                  className="px-4 py-2 bg-purple-500 text-white font-medium rounded-lg hover:bg-purple-600"
+                >
+                  Purchase Dataset
+                </button>
 
-                    <button className="px-4 py-2 bg-purple-500 text-white font-medium rounded-lg hover:bg-purple-600 flex items-center">
-                      <Download size={16} className="mr-2" />
-                      Download Sample
-                    </button>
-                  </div>
-                </div>
+                <button className="px-4 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 flex items-center">
+                  <Download size={16} className="mr-2" />
+                  Download Sample
+                </button>
               </div>
             </div>
-          )}
+          </div>
+        </div>
+      )}
 
+      {/* Available Datasets Section - Researcher */}
+      <div className="bg-white rounded-xl shadow-md mb-8">
+        <div className="p-6 border-b border-gray-200">
+          <div className="flex justify-between items-center">
+            <h2 className="text-2xl font-semibold text-gray-900">
+              Recent Datasets
+            </h2>
+            <button
+              onClick={() => handleNavigateTo("/browse")}
+              className="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors flex items-center gap-2"
+            >
+              View All
+              <Search size={16} />
+            </button>
+          </div>
+        </div>
+
+        <div className="p-6 space-y-4">
           {!healthData || healthData.length === 0 ? (
             <div className="text-center py-8 bg-purple-50 rounded-lg">
               <Database className="w-12 h-12 text-purple-300 mx-auto mb-3" />
@@ -1372,67 +1150,67 @@ const Dashboard = ({ onNavigate }) => {
               </button>
             </div>
           ) : (
-            (filterApplied ? filteredHealthData : healthData)
-              .filter(dataset => !purchasedDatasets.includes(dataset.id))
-              .slice(0, 3)
-              .map((dataset) => (
-                <div
-                  key={dataset.id}
-                  className="border rounded-lg p-6 hover:bg-gray-50 transition-colors"
-                >
-                  <div className="flex flex-col lg:flex-row justify-between items-start gap-4">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2">
-                        <h3 className="text-lg font-medium">
-                          {dataset.title || dataset.category || "Health Dataset"}
-                        </h3>
-                        {dataset.verified && (
-                          <CheckCircle className="w-4 h-4 text-green-500" />
-                        )}
-                      </div>
-                      <p className="text-gray-600 text-sm mt-1">
-                        {dataset.recordCount || "Unknown"} records •{" "}
-                        {dataset.anonymized ? "Anonymized" : "Identifiable"}
-                      </p>
-                      <p className="text-gray-700 mt-2">
-                        {dataset.description || "No description available."}
-                      </p>
-                      <div className="flex flex-wrap gap-2 mt-3">
-                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                          {dataset.category || "Health Data"}
+            healthData.slice(0, 3).map((dataset) => (
+              <div
+                key={dataset.id}
+                className="border rounded-lg p-6 hover:bg-gray-50 transition-colors"
+              >
+                <div className="flex flex-col lg:flex-row justify-between items-start gap-4">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-lg font-medium">
+                        {dataset.title || dataset.category || "Health Dataset"}
+                      </h3>
+                      {dataset.verified && (
+                        <CheckCircle className="w-4 h-4 text-green-500" />
+                      )}
+                    </div>
+                    <p className="text-gray-600 text-sm mt-1">
+                      {dataset.recordCount || "Unknown"} records •{" "}
+                      {dataset.anonymized ? "Anonymized" : "Identifiable"}
+                    </p>
+                    <p className="text-gray-700 mt-2 line-clamp-2">
+                      {dataset.description || "No description available."}
+                    </p>
+                    <div className="flex flex-wrap gap-2 mt-3">
+                      <span className="px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+                        {dataset.category || "Health Data"}
+                      </span>
+                      {dataset.verified && (
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                          Verified
                         </span>
-                        {dataset.verified && (
-                          <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                            Verified
-                          </span>
-                        )}
-                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                          {dataset.price || "0.00"} ETH
+                      )}
+                      {dataset.studyType && (
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
+                          {dataset.studyType}
                         </span>
-                      </div>
+                      )}
                     </div>
-                    <div className="flex flex-col gap-2 w-full lg:w-auto">
-                      <button
-                        onClick={() => handleViewDataset(dataset.id)}
-                        className="w-full lg:w-auto bg-purple-500 text-white px-6 py-2 rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2"
-                      >
-                        <Eye className="w-4 h-4" />
-                        View Details
-                      </button>
-                      <button
-                        onClick={() => handlePurchaseDataset(dataset.id)}
-                        className="w-full lg:w-auto bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-2"
-                      >
-                        <CreditCard className="w-4 h-4" />
-                        Purchase ({dataset.price || "0.00"} ETH)
-                      </button>
+                  </div>
+                  <div className="flex flex-col gap-2 w-full lg:w-auto">
+                    <div className="text-xl font-bold text-purple-600 mb-2 text-center lg:text-right">
+                      {dataset.price} ETH
                     </div>
+                    <button
+                      onClick={() => handleViewDataset(dataset.id)}
+                      className="w-full lg:w-auto bg-purple-500 text-white px-6 py-2 rounded-lg hover:bg-purple-600 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      View Details
+                    </button>
+                    <button
+                      onClick={() => handlePurchaseDataset(dataset.id)}
+                      className="w-full lg:w-auto border border-purple-500 text-purple-600 px-6 py-2 rounded-lg hover:bg-purple-50 transition-colors flex items-center justify-center gap-2"
+                    >
+                      Purchase
+                    </button>
                   </div>
                 </div>
-              ))
+              </div>
+            ))
           )}
 
-          {(filterApplied ? filteredHealthData : healthData).filter(dataset => !purchasedDatasets.includes(dataset.id)).length > 3 && (
+          {healthData && healthData.length > 3 && (
             <div className="mt-4 text-center">
               <button
                 onClick={() => handleNavigateTo("/browse")}
@@ -1459,7 +1237,75 @@ const Dashboard = ({ onNavigate }) => {
         </div>
       </div>
 
-      {/* Recent Activity */}
+      {/* Research Tools Section - Researcher */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="flex items-center mb-4">
+            <PieChart className="text-indigo-500 w-6 h-6 mr-3" />
+            <h2 className="text-xl font-semibold">Analytics Tools</h2>
+          </div>
+          <p className="text-gray-600 mb-4">
+            Access powerful tools to analyze health datasets and generate
+            insights.
+          </p>
+          <div className="grid grid-cols-2 gap-3">
+            <button className="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-3 py-2 rounded-lg flex items-center gap-2 transition-colors text-sm">
+              <BarChart size={16} />
+              Data Visualization
+            </button>
+            <button className="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-3 py-2 rounded-lg flex items-center gap-2 transition-colors text-sm">
+              <Activity size={16} />
+              Statistical Analysis
+            </button>
+            <button className="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-3 py-2 rounded-lg flex items-center gap-2 transition-colors text-sm">
+              <Users size={16} />
+              Population Studies
+            </button>
+            <button className="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-3 py-2 rounded-lg flex items-center gap-2 transition-colors text-sm">
+              <Filter size={16} />
+              Data Filtering
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="flex items-center mb-4">
+            <Zap className="text-purple-500 w-6 h-6 mr-3" />
+            <h2 className="text-xl font-semibold">Research Pipeline</h2>
+          </div>
+          <p className="text-gray-600 mb-4">
+            Track your research progress from data acquisition to publication.
+          </p>
+          <div className="relative">
+            <div className="absolute left-4 top-6 bottom-0 w-0.5 bg-purple-200"></div>
+            <div className="relative pl-10 pb-3">
+              <div className="absolute left-2 w-4 h-4 rounded-full bg-purple-500"></div>
+              <h3 className="font-medium text-gray-800">Data Acquisition</h3>
+              <p className="text-sm text-gray-600">
+                {healthData?.length || 0} datasets available
+              </p>
+            </div>
+            <div className="relative pl-10 pb-3">
+              <div className="absolute left-2 w-4 h-4 rounded-full bg-purple-300"></div>
+              <h3 className="font-medium text-gray-800">
+                Analysis In Progress
+              </h3>
+              <p className="text-sm text-gray-600">
+                {activeStudies} active studies
+              </p>
+            </div>
+            <div className="relative pl-10">
+              <div className="absolute left-2 w-4 h-4 rounded-full bg-gray-300"></div>
+              <h3 className="font-medium text-gray-800">Publication Ready</h3>
+              <p className="text-sm text-gray-600">
+                {userProfile?.publications?.length || 0} publications
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Recent Activity - Researcher */}
       <div className="bg-white rounded-xl shadow-md p-6 mb-8">
         <h2 className="text-2xl font-semibold mb-6">Recent Activity</h2>
         {dashboardData.recentActivity &&
@@ -1500,6 +1346,61 @@ const Dashboard = ({ onNavigate }) => {
           </div>
         )}
       </div>
+
+      {/* Research Resources - Researcher */}
+      <div className="bg-white rounded-xl shadow-md p-6">
+        <h2 className="text-2xl font-semibold mb-4">Research Resources</h2>
+        <p className="text-gray-600 mb-6">
+          Tools and resources to enhance your research with Healthmint data.
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all">
+            <Award className="text-purple-500 w-8 h-8 mb-3" />
+            <h3 className="font-medium mb-2">Citation Guidelines</h3>
+            <p className="text-sm text-gray-600 mb-3">
+              How to properly cite Healthmint datasets in your publications.
+            </p>
+            {/* Fix for anchor href warning */}
+            <button
+              onClick={() => handleNavigateTo("/resources/citation-guidelines")}
+              className="text-purple-600 text-sm hover:underline"
+            >
+              Learn more →
+            </button>
+          </div>
+
+          <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all">
+            <Briefcase className="text-indigo-500 w-8 h-8 mb-3" />
+            <h3 className="font-medium mb-2">Research Ethics</h3>
+            <p className="text-sm text-gray-600 mb-3">
+              Guidelines for ethical research using anonymized health data.
+            </p>
+            {/* Fix for anchor href warning */}
+            <button
+              onClick={() => handleNavigateTo("/resources/research-ethics")}
+              className="text-indigo-600 text-sm hover:underline"
+            >
+              Learn more →
+            </button>
+          </div>
+
+          <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all">
+            <Users className="text-blue-500 w-8 h-8 mb-3" />
+            <h3 className="font-medium mb-2">Collaboration Network</h3>
+            <p className="text-sm text-gray-600 mb-3">
+              Connect with other researchers working on similar health topics.
+            </p>
+            {/* Fix for anchor href warning */}
+            <button
+              onClick={() => handleNavigateTo("/network/join")}
+              className="text-blue-600 text-sm hover:underline"
+            >
+              Join network →
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };