diff --git a/src/Layouts/DefaultLayout.tsx b/src/Layouts/DefaultLayout.tsx index cd9428a..b52e7d5 100644 --- a/src/Layouts/DefaultLayout.tsx +++ b/src/Layouts/DefaultLayout.tsx @@ -15,26 +15,26 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => { return ( - + - - + + - + {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ? {title} : - navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000', fontSize: '14px', }}> {title} - {children?.map(({ title, path, Icon }, index) => navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000' }} > {title})} + navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000', fontSize: '14px', }}> {title} + {children?.map(({ title, path, Icon }, index) => navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} > {title})} )} - - + + navigate('/profile')} > diff --git a/src/Pages/CMS/CMS.tsx b/src/Pages/CMS/CMS.tsx deleted file mode 100644 index 61435eb..0000000 --- a/src/Pages/CMS/CMS.tsx +++ /dev/null @@ -1,6 +0,0 @@ -const CMS = () => { - return ( -
CMS
- ) -} -export default CMS \ No newline at end of file diff --git a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx new file mode 100644 index 0000000..af41137 --- /dev/null +++ b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const AboutUs = () => { + return ( + + + AboutUs + + ) + } + export default AboutUs \ No newline at end of file diff --git a/src/Pages/ManageCMS/FAQ/FAQ.tsx b/src/Pages/ManageCMS/FAQ/FAQ.tsx new file mode 100644 index 0000000..ef5d8c9 --- /dev/null +++ b/src/Pages/ManageCMS/FAQ/FAQ.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const FAQ = () => { + return ( + + + FAQ + + ) + } + export default FAQ \ No newline at end of file diff --git a/src/Pages/ManageCMS/Privacy/Privacy.tsx b/src/Pages/ManageCMS/Privacy/Privacy.tsx new file mode 100644 index 0000000..04c2cab --- /dev/null +++ b/src/Pages/ManageCMS/Privacy/Privacy.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const Privacy = () => { + return ( + + + Privacy + + ) + } + export default Privacy \ No newline at end of file diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx new file mode 100644 index 0000000..fac9534 --- /dev/null +++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const PrivacyPolicy = () => { + return ( + + + PrivacyPolicy + + ) + } + export default PrivacyPolicy \ No newline at end of file diff --git a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx new file mode 100644 index 0000000..280ca98 --- /dev/null +++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const TermsAndConditions = () => { + return ( + + + TermsAndConditions + + ) + } + export default TermsAndConditions \ No newline at end of file diff --git a/src/Pages/ManageCommunity/ManageCommunity.tsx b/src/Pages/ManageCommunity/ManageCommunity.tsx deleted file mode 100644 index 9588a01..0000000 --- a/src/Pages/ManageCommunity/ManageCommunity.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import MainFrame from "../../components/MainFrame" - -const ManageCommunity = () => { - return ( - - - - ) -} -export default ManageCommunity \ No newline at end of file diff --git a/src/Pages/ManageCommunity/ManagePost.tsx b/src/Pages/ManageCommunity/ManagePost.tsx deleted file mode 100644 index 17f55ca..0000000 --- a/src/Pages/ManageCommunity/ManagePost.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import MainFrame from "../../components/MainFrame" - -const ManagePost = () => { - return ( - - - - ) -} - -export default ManagePost \ No newline at end of file diff --git a/src/Pages/Support/Support.tsx b/src/Pages/ManageContact/ManageContact.tsx similarity index 57% rename from src/Pages/Support/Support.tsx rename to src/Pages/ManageContact/ManageContact.tsx index 47bd3d4..f9e78f6 100644 --- a/src/Pages/Support/Support.tsx +++ b/src/Pages/ManageContact/ManageContact.tsx @@ -1,11 +1,11 @@ import MainFrame from "../../components/MainFrame" -const Support = () => { +const ManageContact = () => { return ( - + ManageContact ) } -export default Support \ No newline at end of file +export default ManageContact \ No newline at end of file diff --git a/src/Pages/ManageGroups/ManageGroups.tsx b/src/Pages/ManageGroups/ManageGroups.tsx index ae5dedc..871c889 100644 --- a/src/Pages/ManageGroups/ManageGroups.tsx +++ b/src/Pages/ManageGroups/ManageGroups.tsx @@ -3,7 +3,7 @@ import MainFrame from "../../components/MainFrame" const ManageGroups = () => { return ( - + ManageGroups ) } diff --git a/src/Pages/ManageJobs/ManageJobs.tsx b/src/Pages/ManageJobs/ManageJobs.tsx new file mode 100644 index 0000000..9beadb6 --- /dev/null +++ b/src/Pages/ManageJobs/ManageJobs.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../components/MainFrame" + + +const ManageJobs = () => { + return ( + + + ManageJobs + + ) + } + export default ManageJobs \ No newline at end of file diff --git a/src/Pages/ManagePost/ManagePost.tsx b/src/Pages/ManagePost/ManagePost.tsx new file mode 100644 index 0000000..19e7cfb --- /dev/null +++ b/src/Pages/ManagePost/ManagePost.tsx @@ -0,0 +1,12 @@ + +import MainFrame from '../../components/MainFrame' + +const ManagePost = () => { + return ( + + ManagePost + + ) +} + +export default ManagePost diff --git a/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx b/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx new file mode 100644 index 0000000..39fac36 --- /dev/null +++ b/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const DeactivatedAccounts = () => { + return ( + + DeactivatedAccounts + + ) +} + +export default DeactivatedAccounts \ No newline at end of file diff --git a/src/Pages/ManageUsers/ManageUsers.tsx b/src/Pages/ManageUsers/ManageUsers.tsx deleted file mode 100644 index e6080cd..0000000 --- a/src/Pages/ManageUsers/ManageUsers.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import MainFrame from "../../components/MainFrame" - -const ManageUsers = () => { - return ( - - - - ) -} - -export default ManageUsers \ No newline at end of file diff --git a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx new file mode 100644 index 0000000..92a9b84 --- /dev/null +++ b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx @@ -0,0 +1,122 @@ +import { Box, HStack, Image, Input, Text } from "@chakra-ui/react"; +import MainFrame from "../../../components/MainFrame"; +import AlertDailog from "../../../components/AlertDailog"; +import { FcCancel } from "react-icons/fc"; +import { NavLink } from "react-router-dom"; +import { MdOutlineRemoveRedEye } from "react-icons/md"; +import { RiDeleteBin5Line } from "react-icons/ri"; +import DataTable from "../../../components/DataTable"; +import { HiCheck } from "react-icons/hi2"; +import { HiX } from "react-icons/hi"; +import { Switch } from "../../../components/ui/switch"; +import { Button } from "../../../components/ui/button"; +import { InputGroup } from "../../../components/ui/input-group"; +import { LuSearch } from "react-icons/lu"; + +const tableHeadRow = [ + "Sr. No", + "First Name", + "Mobile Number ", + "Gender", + "DOB", + "Type Of User", + "Language", + "Activate/Deactivate", + "Action", +]; + +const registerUser: any[] = [ + ...Array.from({ length: 12 }, (_, i) => ({ + "Sr. No": i + 1, + "First Name": "Ritesh", + "Mobile Number ": "akanksha@gmail.com", + "Gender": "9876543210", + "DOB": "Female", + "Type Of User": "15-01-1990", + "Language": "Mumbai", + "Activate/Deactivate": ( + + + + ), + "Action": ( + + } + alertCaption="Are you sure you want to deactivate this user?" + onConfirm={() => { + console.log("User deleted:", i + 1); + }} + /> + + + + + {/* */} + } + alertCaption="are you sure you want to delete ?" + onConfirm={() => { + console.log("User deleted:", i + 1); + }} + /> + + ), + })), +]; + +const RegisterUsers = () => { + return ( + + + + + Register Users + + + + + } + color={"#000"} + > + + + + + + + + ); +}; + +export default RegisterUsers; diff --git a/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx new file mode 100644 index 0000000..052c2de --- /dev/null +++ b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const AgencyMaster = () => { + return ( + + + AgencyMaster + + ) + } + export default AgencyMaster \ No newline at end of file diff --git a/src/Pages/MasterModule/Country/Country.tsx b/src/Pages/MasterModule/Country/Country.tsx new file mode 100644 index 0000000..71676e1 --- /dev/null +++ b/src/Pages/MasterModule/Country/Country.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const Country = () => { + return ( + + + Country + + ) + } + export default Country \ No newline at end of file diff --git a/src/Pages/MasterModule/JobStatus/JobStatus.tsx b/src/Pages/MasterModule/JobStatus/JobStatus.tsx new file mode 100644 index 0000000..8a7e6ed --- /dev/null +++ b/src/Pages/MasterModule/JobStatus/JobStatus.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const JobStatus = () => { + return ( + + + JobStatus + + ) + } + export default JobStatus \ No newline at end of file diff --git a/src/Pages/MasterModule/JobType/JobType.tsx b/src/Pages/MasterModule/JobType/JobType.tsx new file mode 100644 index 0000000..d134f83 --- /dev/null +++ b/src/Pages/MasterModule/JobType/JobType.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const JobType = () => { + return ( + + + JobType + + ) + } + export default JobType \ No newline at end of file diff --git a/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx new file mode 100644 index 0000000..a10c785 --- /dev/null +++ b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const TemplateMaster = () => { + return ( + + + TemplateMaster + + ) + } + export default TemplateMaster \ No newline at end of file diff --git a/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx new file mode 100644 index 0000000..b6e8985 --- /dev/null +++ b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx @@ -0,0 +1,12 @@ +import MainFrame from "../../../components/MainFrame" + + +const WorkspaceMode = () => { + return ( + + + WorkspaceMode + + ) + } + export default WorkspaceMode \ No newline at end of file diff --git a/src/Pages/Reporting/Reporting.tsx b/src/Pages/MyProfile/MyProfile.tsx similarity index 61% rename from src/Pages/Reporting/Reporting.tsx rename to src/Pages/MyProfile/MyProfile.tsx index 7f0e7c3..9c7ed8b 100644 --- a/src/Pages/Reporting/Reporting.tsx +++ b/src/Pages/MyProfile/MyProfile.tsx @@ -1,11 +1,11 @@ import MainFrame from "../../components/MainFrame" -const Reporting = () => { +const MyProfile = () => { return ( - + MyProfile ) } -export default Reporting \ No newline at end of file +export default MyProfile \ No newline at end of file diff --git a/src/Pages/Profile/Profile.tsx b/src/Pages/Profile/Profile.tsx index ff8f49e..49e11f8 100644 --- a/src/Pages/Profile/Profile.tsx +++ b/src/Pages/Profile/Profile.tsx @@ -3,7 +3,7 @@ import MainFrame from "../../components/MainFrame" const Profile = () => { return ( - + Profile ) } diff --git a/src/Pages/SubAdmin/SubAdmin.tsx b/src/Pages/SubAdmin/SubAdmin.tsx index 4ed0414..a094200 100644 --- a/src/Pages/SubAdmin/SubAdmin.tsx +++ b/src/Pages/SubAdmin/SubAdmin.tsx @@ -4,7 +4,7 @@ const SubAdmin = () => { return ( - + SubAdmin ) } diff --git a/src/Routes/Nav.ts b/src/Routes/Nav.ts index f225b1a..83956b9 100644 --- a/src/Routes/Nav.ts +++ b/src/Routes/Nav.ts @@ -1,77 +1,143 @@ -import { LiaUsersSolid } from "react-icons/lia"; -import { LuBellDot } from "react-icons/lu"; -import { MdOutlineSupportAgent, MdPostAdd } from "react-icons/md"; +import { LuBriefcaseBusiness} from "react-icons/lu"; +import { MdHeadsetMic, MdOutlineDashboard} from "react-icons/md"; import { GoDotFill } from "react-icons/go"; - -import { TbFileSettings, TbLayoutDashboard, TbReport, TbUsers, TbUsersGroup } from "react-icons/tb"; -import { RiUserSettingsLine } from "react-icons/ri"; +import { HiOutlinePencilSquare } from "react-icons/hi2"; +import { BiUser, BiUserPin } from "react-icons/bi"; +import { PiUsersThree } from "react-icons/pi"; +import { BsBoxes, BsPersonBadge } from "react-icons/bs"; +import { AiOutlineFileText } from "react-icons/ai"; export const nav = [ { title: "Dashboard", path: "/", - Icon: TbLayoutDashboard, + Icon: MdOutlineDashboard, type:'single' }, { title: "Manage Users", - path: "/manage-user", - Icon: TbUsers, - type:'single' - }, - { - title: "Manage Groups", - path: "/manage-groups", - Icon: TbUsersGroup, - type:'single' - }, - { - title: "Community", - path: "/manage-community", - Icon: LiaUsersSolid, + path: "/register-users", + Icon: BiUserPin, type:'multiple', children: [ { - title: "Manage Community", - path: "/manage-community", + title: "Register Users", + path: "/register-users", Icon: GoDotFill, }, { - title: "Manage Post", - path: "/manage-post", + title: "Deactivated Accounts", + path: "/deactivated-accounts", Icon: GoDotFill, }, ], }, { - title: "Support", - path: "/support", - Icon: MdOutlineSupportAgent, + title: "Manage Post", + path: "/manage-post", + Icon: HiOutlinePencilSquare, type:'single' }, { - title: "Sub-Admin", + title: "Manage Sub-Admin", path: "/sub-admin", - Icon: RiUserSettingsLine, + Icon: BiUser, type:'single' }, { - title: "Reporting", - path: "/reporting", - Icon: TbReport, + title: "Manage Jobs", + path: "/manage-jobs", + Icon: LuBriefcaseBusiness, type:'single' }, { - title: "CMS", - path: "/cms", - Icon: TbFileSettings, + title: "Manage Groups", + path: "/manage-groups", + Icon: PiUsersThree, type:'single' }, { - title: "Manage Notifications", - path: "/manage-notification", - Icon: LuBellDot, + title: "Manage Contact Us", + path: "/manage-contact", + Icon: MdHeadsetMic , type:'single' - } + }, + { + title: "Manage CMS", + path: "/faq", + Icon: AiOutlineFileText, + type:'multiple', + children: [ + { + title: "FAQs", + path: "/faq", + Icon: GoDotFill, + }, + { + title: "About Us", + path: "/about-us", + Icon: GoDotFill, + }, + { + title: "Privacy Policy", + path: "/privacy-policy", + Icon: GoDotFill, + }, + { + title: "Terms And Conditions", + path: "/terms-conditions", + Icon: GoDotFill, + }, + { + title: "Privacy", + path: "/privacy", + Icon: GoDotFill, + }, + ], + }, + { + title: "My Profile", + path: "/profile", + Icon: BsPersonBadge, + type:'single' + }, + { + title: "Master Module", + path: "/agency-master", + Icon: BsBoxes, + type:'multiple', + children: [ + { + title: "Agency Master", + path: "/agency-master", + Icon: GoDotFill, + }, + { + title: "Template Master", + path: "/template-master", + Icon: GoDotFill, + }, + { + title: "Job Type", + path: "/job-type", + Icon: GoDotFill, + }, + { + title: "Workspace Mode", + path: "/workspace-mode", + Icon: GoDotFill, + }, + { + title: "Country", + path: "/country", + Icon: GoDotFill, + }, + { + title: "Job Status", + path: "/job-status", + Icon: GoDotFill, + }, + ], + }, ]; \ No newline at end of file diff --git a/src/Routes/Routes.ts b/src/Routes/Routes.ts index b58d3ec..aadb3d9 100644 --- a/src/Routes/Routes.ts +++ b/src/Routes/Routes.ts @@ -1,24 +1,49 @@ -import CMS from "../Pages/CMS/CMS"; + import Dashboard from "../Pages/Dashboard/Dashboard"; -import ManageCommunity from "../Pages/ManageCommunity/ManageCommunity"; -import ManagePost from "../Pages/ManageCommunity/ManagePost"; import ManageGroups from "../Pages/ManageGroups/ManageGroups"; -import ManageUsers from "../Pages/ManageUsers/ManageUsers"; +import ManageJobs from "../Pages/ManageJobs/ManageJobs"; +import ManagePost from "../Pages/ManagePost/ManagePost"; import Profile from "../Pages/Profile/Profile"; -import Reporting from "../Pages/Reporting/Reporting"; import SubAdmin from "../Pages/SubAdmin/SubAdmin"; -import Support from "../Pages/Support/Support"; +import ManageContact from "../Pages/ManageContact/ManageContact"; +import FAQ from "../Pages/ManageCMS/FAQ/FAQ"; +import AboutUs from "../Pages/ManageCMS/AboutUs/AboutUs"; +import PrivacyPolicy from "../Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy"; +import TermsAndConditions from "../Pages/ManageCMS/TermsAndConditions/TermsAndConditions"; +import Privacy from "../Pages/ManageCMS/Privacy/Privacy"; +import MyProfile from "../Pages/MyProfile/MyProfile"; +import Notification from "../Pages/Notification/Notification"; +import AgencyMaster from "../Pages/MasterModule/AgencyMaster/AgencyMaster"; +import TemplateMaster from "../Pages/MasterModule/TemplateMaster/TemplateMaster"; +import JobType from "../Pages/MasterModule/JobType/JobType"; +import WorkspaceMode from "../Pages/MasterModule/WorkspaceMode/WorkspaceMode"; +import Country from "../Pages/MasterModule/Country/Country"; +import JobStatus from "../Pages/MasterModule/JobStatus/JobStatus"; +import RegisterUsers from "../Pages/ManageUsers/RegisterUsers/RegisterUsers"; +import DeactivatedAccounts from "../Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts"; + export const RouteLink = [ { path: "/", Component: Dashboard }, - { path: "/manage-user", Component: ManageUsers }, - { path: "/manage-groups", Component: ManageGroups }, - { path: "/manage-community", Component: ManageCommunity}, - { path: "/manage-post", Component: ManagePost}, - { path: "/support", Component: Support}, + { path: "/register-users", Component: RegisterUsers }, + { path: "/deactivated-accounts", Component: DeactivatedAccounts }, + { path: "/manage-post", Component: ManagePost }, { path: "/sub-admin", Component: SubAdmin}, - { path: "/reporting", Component: Reporting}, - { path: "/cms", Component: CMS}, - { path: "/manage-notification", Component: CMS}, + { path: "/manage-jobs", Component: ManageJobs}, + { path: "/manage-groups", Component: ManageGroups }, + { path: "/manage-contact", Component: ManageContact}, + { path: "/faq", Component: FAQ}, + { path: "/about-us", Component: AboutUs}, + { path: "/privacy-policy", Component: PrivacyPolicy}, + { path: "/terms-conditions", Component: TermsAndConditions}, + { path: "/privacy", Component: Privacy}, + { path: "/my-profile", Component: MyProfile}, + { path: "/manage-notification", Component: Notification}, { path: "/profile", Component: Profile}, + { path: "/agency-master", Component: AgencyMaster}, + { path: "/template-master", Component: TemplateMaster}, + { path: "/job-type", Component: JobType}, + { path: "/workspace-mode", Component: WorkspaceMode}, + { path: "/country", Component: Country}, + { path: "/job-status", Component: JobStatus}, ] \ No newline at end of file diff --git a/src/components/AlertDailog.tsx b/src/components/AlertDailog.tsx new file mode 100644 index 0000000..6410783 --- /dev/null +++ b/src/components/AlertDailog.tsx @@ -0,0 +1,125 @@ +import React from "react"; + +import { DialogBody, HStack, Icon, Text } from "@chakra-ui/react"; +import { Button } from "./ui/button"; +import { + DialogActionTrigger, + DialogCloseTrigger, + DialogContent, + DialogRoot, + DialogTrigger, +} from "./ui/dialog"; + +interface DeleteConfirmationDialogProps { + onConfirm?: () => void; + alertText?: string; + alertCaption?: string; + alertIcon?: any; + AltertTiggerIcon?: any; + button?: any; + iconColor?: string; +} + +const AlertDailog: React.FC = ({ + onConfirm, + alertText, + alertCaption, + alertIcon, + AltertTiggerIcon, + button, + iconColor, +}) => { + return ( + + + {button ? ( + button + ) : ( + + + + )} + + + {/* */} + {/* */} + + {/* */} + + {alertIcon && alertIcon} + + {alertText} + + + {" "} + {alertCaption} + + + + + + + + + + + + + ); +}; + +export default AlertDailog; diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx new file mode 100644 index 0000000..a291d1a --- /dev/null +++ b/src/components/DataTable.tsx @@ -0,0 +1,130 @@ +import { useState } from "react"; +import { HStack, Stack, Table } from "@chakra-ui/react"; +import { PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot } from "./ui/pagination"; +// import { +// PaginationItems, +// PaginationNextTrigger, +// PaginationPrevTrigger, +// PaginationRoot, +// } from "./ui/pagination"; + +interface TableProps { + tableHeadRow: string[]; + data: Record[]; + sortableColumns?: string[]; // Specify which columns are sortable +} + +const DataTable: React.FC = ({ + tableHeadRow, + data, + sortableColumns = [], +}) => { + const [sortedData, setSortedData] = useState(data); + const [sortConfig, setSortConfig] = useState<{ + key: string; + direction: "asc" | "desc"; + } | null>(null); + + const handleSort = (column: string) => { + if (!sortableColumns.includes(column)) return; + + let direction: "asc" | "desc" = "asc"; + if ( + sortConfig && + sortConfig.key === column && + sortConfig.direction === "asc" + ) { + direction = "desc"; + } + + const sortedArray = [...sortedData].sort((a, b) => { + if (a[column] < b[column]) return direction === "asc" ? -1 : 1; + if (a[column] > b[column]) return direction === "asc" ? 1 : -1; + return 0; + }); + + setSortedData(sortedArray); + setSortConfig({ key: column, direction }); + }; + + return ( + + + + + + {tableHeadRow.map((item, index) => ( + handleSort(item)} + cursor={ + sortableColumns.includes(item) ? "pointer" : "default" + } + _hover={ + sortableColumns.includes(item) + ? { textDecoration: "underline" } + : {} + } + > + {item} + {sortableColumns.includes(item) && + sortConfig?.key === item && ( + + {sortConfig.direction === "asc" ? "\u25B2" : "\u25BC"} + + )} + + ))} + + + + {sortedData.map((item: any, index) => ( + + {tableHeadRow.map((heading, colIndex) => ( + + {item[heading]} + + ))} + + ))} + + + + + + + + + + + + ); +}; + +export default DataTable; diff --git a/src/components/MainFrame.tsx b/src/components/MainFrame.tsx index 32c5f64..95160b2 100644 --- a/src/components/MainFrame.tsx +++ b/src/components/MainFrame.tsx @@ -13,13 +13,15 @@ interface MainFrameProps { const MainFrame: FC = ({ children, title }) => { return ( - + {children} diff --git a/src/components/ui/link-button.tsx b/src/components/ui/link-button.tsx new file mode 100644 index 0000000..defa1c3 --- /dev/null +++ b/src/components/ui/link-button.tsx @@ -0,0 +1,12 @@ +"use client" + +import type { HTMLChakraProps, RecipeProps } from "@chakra-ui/react" +import { createRecipeContext } from "@chakra-ui/react" + +export interface LinkButtonProps + extends HTMLChakraProps<"a", RecipeProps<"button">> {} + +const { withContext } = createRecipeContext({ key: "button" }) + +// Replace "a" with your framework's link component +export const LinkButton = withContext("a") diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx new file mode 100644 index 0000000..d9db678 --- /dev/null +++ b/src/components/ui/pagination.tsx @@ -0,0 +1,237 @@ +"use client"; + +import type { ButtonProps, TextProps } from "@chakra-ui/react"; +import { + Button, + Pagination as ChakraPagination, + HStack, + IconButton, + Text, + createContext, + usePaginationContext, +} from "@chakra-ui/react"; +import * as React from "react"; +import { HiChevronLeft, HiChevronRight } from "react-icons/hi2"; +import { LinkButton } from "./link-button"; + +interface ButtonVariantMap { + current: ButtonProps["variant"]; + default: ButtonProps["variant"]; + ellipsis: ButtonProps["variant"]; +} + +type PaginationVariant = "outline" | "solid" | "subtle"; + +interface ButtonVariantContext { + size: ButtonProps["size"]; + variantMap: ButtonVariantMap; + getHref?: (page: number) => string; +} + +const [RootPropsProvider, useRootProps] = createContext({ + name: "RootPropsProvider", +}); + +export interface PaginationRootProps + extends Omit { + size?: ButtonProps["size"]; + variant?: PaginationVariant; + getHref?: (page: number) => string; +} + +const variantMap: Record = { + outline: { default: "ghost", ellipsis: "plain", current: "solid" }, + solid: { default: "outline", ellipsis: "outline", current: "solid" }, + subtle: { default: "ghost", ellipsis: "plain", current: "subtle" }, +}; + +export const PaginationRoot = React.forwardRef< + HTMLDivElement, + PaginationRootProps +>(function PaginationRoot(props, ref) { + const { size = "sm", variant = "outline", getHref, ...rest } = props; + return ( + + + + ); +}); + +export const PaginationEllipsis = React.forwardRef< + HTMLDivElement, + ChakraPagination.EllipsisProps +>(function PaginationEllipsis(props, ref) { + const { size, variantMap } = useRootProps(); + return ( + + + + ); +}); + +export const PaginationItem = React.forwardRef< + HTMLButtonElement, + ChakraPagination.ItemProps +>(function PaginationItem(props, ref) { + const { page } = usePaginationContext(); + const { size, variantMap, getHref } = useRootProps(); + + const current = page === props.value; + const variant = current ? variantMap.current : variantMap.default; + + if (getHref) { + return ( + + {props.value} + + ); + } + + return ( + + + + ); +}); + +export const PaginationPrevTrigger = React.forwardRef< + HTMLButtonElement, + ChakraPagination.PrevTriggerProps +>(function PaginationPrevTrigger(props, ref) { + const { size, variantMap, getHref } = useRootProps(); + const { previousPage } = usePaginationContext(); + + if (getHref) { + return ( + + + + ); + } + + return ( + + + + + + ); +}); + +export const PaginationNextTrigger = React.forwardRef< + HTMLButtonElement, + ChakraPagination.NextTriggerProps +>(function PaginationNextTrigger(props, ref) { + const { size, variantMap, getHref } = useRootProps(); + const { nextPage } = usePaginationContext(); + + if (getHref) { + return ( + + Next + + ); + } + + return ( + + + Next + + + + ); +}); + +export const PaginationItems = (props: React.HTMLAttributes) => { + return ( + + {({ pages }) => + pages.map((page, index) => ( + + )) + } + + ); +}; + +interface PageTextProps extends TextProps { + format?: "short" | "compact" | "long"; +} + +export const PaginationPageText = React.forwardRef< + HTMLParagraphElement, + PageTextProps +>(function PaginationPageText(props, ref) { + const { format = "compact", ...rest } = props; + const { page, totalPages, pageRange, count } = usePaginationContext(); + const content = React.useMemo(() => { + if (format === "short") return `${page} / ${totalPages}`; + if (format === "compact") return `${page} of ${totalPages}`; + return `${pageRange.start + 1} - ${Math.min(pageRange.end, count)} of ${count}`; + }, [format, page, totalPages, pageRange, count]); + + return ( + + {content} + + ); +}); diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx new file mode 100644 index 0000000..a677ca2 --- /dev/null +++ b/src/components/ui/switch.tsx @@ -0,0 +1,39 @@ +import { Switch as ChakraSwitch } from "@chakra-ui/react" +import * as React from "react" + +export interface SwitchProps extends ChakraSwitch.RootProps { + inputProps?: React.InputHTMLAttributes + rootRef?: React.Ref + trackLabel?: { on: React.ReactNode; off: React.ReactNode } + thumbLabel?: { on: React.ReactNode; off: React.ReactNode } +} + +export const Switch = React.forwardRef( + function Switch(props, ref) { + const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = + props + + return ( + + + + + {thumbLabel && ( + + {thumbLabel?.on} + + )} + + {trackLabel && ( + + {trackLabel.on} + + )} + + {children != null && ( + {children} + )} + + ) + }, +) diff --git a/src/index.css b/src/index.css index 1ac4b6c..0afb1ee 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,8 @@ +@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); + + + *{ margin: 0; padding: 0; @@ -5,6 +10,17 @@ } +body { + margin: 0; + padding: 0; + font-family: "Roboto", serif; +} + +.Oxygen{ + font-family: "Oxygen", serif +} + + .active { background-color: #02A0A0 !important; color: #fff !important; @@ -116,3 +132,32 @@ right: 40%; } + +/* Style the scrollbar */ +::-webkit-scrollbar { + width: 6px; /* Width of the vertical scrollbar */ + height: 12px; /* Height of the horizontal scrollbar */ +} + +/* Style the scrollbar track (the background area) */ +::-webkit-scrollbar-track { + background-color: #f1f1f1; + border-radius: 10px; +} + +/* Style the scrollbar thumb (the draggable part) */ +::-webkit-scrollbar-thumb { + background-color: #c8c8c8cf; + /* Gray color for the thumb */ + border-radius: 10px; + border: 1px solid #f1f1f1; /* Border around the thumb */ +} + +/* Style the scrollbar thumb on hover */ +::-webkit-scrollbar-thumb:hover { + background-color: #555; /* Darker gray when hovered */ +} + +input:focus-visible { + border: none !important; +}