81 lines
5.1 KiB
JavaScript
81 lines
5.1 KiB
JavaScript
|
import React, { useState } from 'react';
|
||
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||
|
|
import { faUser, faUsers, faUtensils, faLock, faCogs, faKey } from '@fortawesome/free-solid-svg-icons';
|
||
|
|
import UserMaintance from './UserMaintance';
|
||
|
|
import UserGroupMaintance from './UserGroupMaintance/UserGroupMaintance';
|
||
|
|
import MenuMaintance from './MenuMaintance/MenuMaintance';
|
||
|
|
import MenuAccessControl from './MenuAccessControl/MenuAccessControl';
|
||
|
|
import SystemParameters from './SystemParameters/SystemParameters';
|
||
|
|
import AccessType from './AccessType/AccessType';
|
||
|
|
import ApiRegistery from './ApiRegistery/ApiRegistery';
|
||
|
|
import TokenRegistery from './TokenRegistery/TokenRegistery';
|
||
|
|
import Codeextension from './Codeextension.js';
|
||
|
|
import DynamicTable from './Dynamictable.js';
|
||
|
|
|
||
|
|
const Card = ({ title, content, icon, onClick }) => (
|
||
|
|
<div onClick={onClick} className="bg-white border border-gray-300 rounded-lg shadow-md p-6 m-4 cursor-pointer transition-transform transform hover:scale-105 hover:shadow-lg flex flex-col items-center justify-center text-center">
|
||
|
|
<FontAwesomeIcon icon={icon} className="text-4xl text-gray-800 mb-4" />
|
||
|
|
<h3 className="text-lg font-semibold">{title}</h3>
|
||
|
|
<p className="text-gray-600">{content}</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
const CardList = () => {
|
||
|
|
const [showUserMaintance, setShowUserMaintance] = useState(false);
|
||
|
|
const [showUserGroupMaintance, setShowUserGroupMaintance] = useState(false);
|
||
|
|
const [showMenuMaintance, setShowMenuMaintance] = useState(false);
|
||
|
|
const [showMenuAccessControl, setShowMenuAccessControl] = useState(false);
|
||
|
|
const [showSystemParameters, setShowSystemParameters] = useState(false);
|
||
|
|
const [showAccessType, setShowAccessType] = useState(false);
|
||
|
|
const [showApiRegistery, setShowApiRegistery] = useState(false);
|
||
|
|
const [showTokenRegistery, setShowTokenRegistery] = useState(false);
|
||
|
|
const [showCodeExtension, setShowCodeExtension] = useState(false);
|
||
|
|
const [showDynamicTable, setShowDynamicTable] = useState(false);
|
||
|
|
|
||
|
|
const handleCardClick = (menuItemDesc) => {
|
||
|
|
setShowUserMaintance(menuItemDesc === 'User Maintance');
|
||
|
|
setShowUserGroupMaintance(menuItemDesc === 'User Group Maintance');
|
||
|
|
setShowMenuMaintance(menuItemDesc === 'Menu Maintance');
|
||
|
|
setShowMenuAccessControl(menuItemDesc === 'Menu Access Control');
|
||
|
|
setShowSystemParameters(menuItemDesc === 'System Parameters');
|
||
|
|
setShowAccessType(menuItemDesc === 'Access Type');
|
||
|
|
setShowApiRegistery(menuItemDesc === 'Api Registery');
|
||
|
|
setShowTokenRegistery(menuItemDesc === 'Token Registery');
|
||
|
|
setShowCodeExtension(menuItemDesc === 'Code Extension');
|
||
|
|
setShowDynamicTable(menuItemDesc === 'Dynamic Table');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{!showUserMaintance && !showUserGroupMaintance && !showMenuMaintance && !showMenuAccessControl && !showSystemParameters && !showAccessType && !showApiRegistery && !showTokenRegistery && !showCodeExtension && !showDynamicTable && (
|
||
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
|
|
<Card title="User Maintance" content="Manage users" icon={faUser} onClick={() => handleCardClick('User Maintance')} />
|
||
|
|
<Card title="User Group Maintance" content="Manage user groups" icon={faUsers} onClick={() => handleCardClick('User Group Maintance')} />
|
||
|
|
<Card title="Menu Maintance" content="Manage menus" icon={faUtensils} onClick={() => handleCardClick('Menu Maintance')} />
|
||
|
|
<Card title="Menu Access Control" content="Control menu access" icon={faLock} onClick={() => handleCardClick('Menu Access Control')} />
|
||
|
|
<Card title="System Parameters" content="Configure system parameters" icon={faCogs} onClick={() => handleCardClick('System Parameters')} />
|
||
|
|
<Card title="Access Type" content="Manage access types" icon={faKey} onClick={() => handleCardClick('Access Type')} />
|
||
|
|
<Card title="Api Registery" content="Manage APIs" icon={faUser} onClick={() => handleCardClick('Api Registery')} />
|
||
|
|
<Card title="Token Registery" content="Manage tokens" icon={faKey} onClick={() => handleCardClick('Token Registery')} />
|
||
|
|
<Card title="Code Extension" content="Extend code functionalities" icon={faLock} onClick={() => handleCardClick('Code Extension')} />
|
||
|
|
<Card title="Dynamic Table" content="Dynamic data tables" icon={faKey} onClick={() => handleCardClick('Dynamic Table')} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{showUserMaintance && <UserMaintance />}
|
||
|
|
{showUserGroupMaintance && <UserGroupMaintance />}
|
||
|
|
{showMenuMaintance && <MenuMaintance />}
|
||
|
|
{showMenuAccessControl && <MenuAccessControl />}
|
||
|
|
{showSystemParameters && <SystemParameters />}
|
||
|
|
{showAccessType && <AccessType />}
|
||
|
|
{showApiRegistery && <ApiRegistery />}
|
||
|
|
{showTokenRegistery && <TokenRegistery />}
|
||
|
|
{showCodeExtension && <Codeextension />}
|
||
|
|
{showDynamicTable && <DynamicTable />}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CardList;
|