Authsec_ReactBootStrapNew/src/components/Dashboard/SetupView.js

import React,{useState,useEffect} from "react";
import "../Dashboard/CSS/CSS/SetupView.css"; // Assuming you have a CSS file for styling
import { useNavigate } from "react-router-dom";
import Spinner from '../../UIComponants/Spinner';

function SetupView({
  onUserMaintenanceClick,
  onMenuAccessControl,
  onUserGroupMaintenance,
  onSystemParameter,
  onMenuMaintenance,
  onAccessType,
  onAPIregistry,
  onTokenregistry,
  onDataType1,
  onDataType2,
  onDataType3,
  onDataType4,
  onDataType5,
  onDataType6,
  onDynamicTable,
  oncodeExtension,
}) {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate loading data
    setTimeout(() => {
      setLoading(false);
    }, 3000); // Simulated 3 seconds loading
  }, []);

  return (

    <div className="setup-view">
      {loading ? (
        <Spinner /> // Display the spinner while loading
      ) : (
        <div className="usercards-container">
      <div className="usercards">
        <div
          className="usercard"
          onClick={() => {
            console.log("User Maintenance card clicked");
            console.log("Navigating to:", "/admin/user-maintenance");

            navigate("/admin/user-maintenance");
          }}
          // onClick={onUserMaintenanceClick}
        >
          <i className="fa fa-user-cog card-icon"></i>
          <h3>User Maintenance</h3>
          <p>Content for Card 1</p>
        </div>
        <div
          className="usercard"
          onClick={() => {
            navigate("/admin/menu-access-control");
            // navigate("/admin/menu-access-control2")
          }}
        >
          <i className="fa-solid fa-lock"></i>
          <h3>Menu Access Control</h3>
          <p>Content for Card 2</p>
        </div>
        <div className="usercard"  onClick={() => {
            navigate("/admin/user-Group-Maintenance");
          }}>
          <i className="fa-solid fa-users"></i>
          <h3>User Group Maintenance</h3>
          <p>Content for Card 3</p>
        </div>
        <div className="usercard" onClick={() => {
            navigate("/admin/system-parameter");
          }}>
          <i className="fa-solid fa-gears"></i>
          <h3>System Parameter</h3>
          <p>Content for Card 4</p>
        </div>
        <div className="usercard" onClick={() => {
            navigate("/admin/menu-maintenance");
          }}>
          <i className="fa-solid fa-utensils"></i>
          <h3>Menu Maintenance</h3>
          <p>Content for Card 5</p>
        </div>
        <div className="usercard" onClick={() => {
            navigate("/admin/access-type");
          }}>
          <i className="fa-solid fa-key"></i>
          <h3>Access Type</h3>
          <p>Content for Card 6</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/api-registry")
        }}>
          <i className="fas fa-database"></i>
          <h3>API Registry</h3>
          <p>Content for Card 7</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/token-registry")
        }}>
          <i className="fas fa-key"></i>
          <h3>Token Registry</h3>
          <p>Content for Card 8</p>
        </div>
        {/* <div className="usercard" onClick={()=>{
          navigate("/admin/datatype-1")
        }}>
          <i className="fa fa-file"></i>
          <h3>DATATYPE1</h3>
          <p>Content for Card 9</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/datatype-2")
        }}>
          <i className="fa fa-file"></i>
          <h3>DATATYPE2</h3>
          <p>Content for Card 10</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/datatype-3")
        }}>
          <i className="fa fa-file"></i>
          <h3>DATATYPE3</h3>
          <p>Content for Card 11</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/datatype-4")
        }}>
          <i className="fa fa-file"></i>
          <h3>DATATYPE4</h3>
          <p>Content for Card 12</p>
        </div>
        <div className="usercard"onClick={()=>{
          navigate("/admin/datatype-5")
        }}>
          <i className="fa fa-file"></i>
          <h3>DATATYPE5</h3>
          <p>Content for Card 13</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/datatype-6")
        }}>
          <i className="fa fa-file"></i>
          <h3>DATATYPE6</h3>
          <p>Content for Card 14</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/basics-datatypes")
        }}>
          <i className="fa fa-file"></i>
          <h3>Basics Datatypes</h3>
          <p>Content for Card 15</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/advance-datatypes")
        }}>
          <i className="fa fa-file"></i>
          <h3>Advanced Datatypes</h3>
          <p>Content for Card 16</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/advance-datatypes2")
        }}>
          <i className="fa fa-file"></i>
          <h3>Advanced Datatypes 2</h3>
          <p>Content for Card 17</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/premium-datatypes")
        }}>
          <i className="fa fa-file"></i>
          <h3>Premium Datatypes</h3>
          <p>Content for Card 18</p>
        </div> */}
        <div className="usercard" onClick={()=>{
          navigate("/admin/user-report")
        }}>
          <i className="fa fa-file"></i>
          <h3>Reports</h3>
          <p>Report Description</p>
        </div>
        <div className="usercard" onClick={()=>{
          navigate("/admin/dynamic-form")
        }}>
          <i className="fa fa-file"></i>
          <h3>DynamicForm</h3>
          <p>Content for Card 16</p>
        </div>

      </div>
    </div>
      )}
    </div>

   
  );
}

export default SetupView;