diff --git a/src/Pages/Usecase/Usecase.jsx b/src/Pages/Usecase/Usecase.jsx new file mode 100644 index 0000000..34e15dc --- /dev/null +++ b/src/Pages/Usecase/Usecase.jsx @@ -0,0 +1,266 @@ +import React, { useState } from "react"; +import { + Box, + Text, + Tooltip, + HStack, + Input, + Select, + Menu, + MenuButton, + MenuList, + MenuItem, + Switch, + Portal, + useToast, + Image, + Avatar, +} from "@chakra-ui/react"; +import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons"; +import DataTable from "../../Components/DataTable/DataTable"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { Link as RouterLink } from "react-router-dom"; +import { + useDeleteEcoBannerMutation, + useDeleteNewsMutation, + useDeleteUsecaseMutation, + useGetNewsQuery, + useGetUsecaseQuery, + useUpdateNewsStatusMutation, + useUpdateUsecaseStatusMutation, +} from "../../Services/api.service"; +import { HiDotsVertical } from "react-icons/hi"; +import { formatDate } from "../../Components/Functions/UTCConvertor"; +import CustomAlertDialog from "../../Components/CustomAlertDialog"; +import Header from "../../Components/Header"; +import { TABLE_PAGINATION } from "../../Constants/Paginations"; +import TabularView from "../../Components/TabularView/TabularView"; +import ToastBox from "../../Components/ToastBox"; + +const Usecase = () => { + // ====================================================[Hooks]=================================================================== + const toast = useToast(); + const [deleteAlert, setDeleteAlert] = useState(false); + const [actionId, setActionId] = useState(null); + const [deleteIsLoading, setDeleteIsLoading] = useState(false); + // ====================================================[Constants]=================================================================== + const [searchTerm, setSearchTerm] = useState(""); + const [statusFilter, setStatusFilter] = useState("all"); + const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size); + const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page); + const [displayRange, setDisplayRange] = useState({ + start: TABLE_PAGINATION?.page, + end: pageSize, + }); + // ====================================================[RTK Hooks]=================================================================== + const useCase = useGetUsecaseQuery({ page: currentPage, size: pageSize }); + const [deleteUsecase] = useDeleteUsecaseMutation(); + const [updateUsecaseStatus] = useUpdateUsecaseStatusMutation(); + // ====================================================[Functions]=================================================================== + const handleDelete = async (id) => { + try { + // Trigger the mutation + setDeleteIsLoading(true); + await deleteUsecase(id) + .then((response) => { + // Handle the response here + console.log("Mutation response:", response?.data?.statusCode); + console.log("Mutation response:", response?.data?.message); + + if (response?.data?.statusCode === 200) { + setDeleteIsLoading(false); + setDeleteAlert(false); + } + }) + .catch((error) => { + console.error("Error creating community:", error); + setDeleteIsLoading(false); + setDeleteAlert(false); + }); + } catch (error) { + // Handle errors + console.error("Error deleting community:", error); + } + }; + + const handleUpdateStatus = async (id) => { + try { + // Trigger the mutation + await updateUsecaseStatus({ id }) + .then((response) => { + console.log(response?.data); + if (response?.data?.statusCode === 201) { + toast({ + render: () => ( + + ), + }); + } + }) + .catch((error) => { + console.log(error); + }); + } catch (error) { + // Handle errors + console.error("Error updating community status:", error); + } + }; + // ====================================================[Table Filter]================================================================ + const filteredData = useCase?.data?.data?.rows?.filter((item) => { + // Filter by name (case insensitive) + const name = item.title; + const searchLower = searchTerm.toLowerCase(); + const nameMatches = name.toLowerCase().includes(searchLower); + + // Filter by status + const status = item.status; + + const statusMatches = + statusFilter === "all" || + (statusFilter === "active" && status === true) || + (statusFilter === "inactive" && status === false); + + return nameMatches && statusMatches; + }); + // ====================================================[Table Setup]================================================================ + const tableHeadRow = [ + // "Icon", + "Title", + "Discription", + "Updated Date", + "Active", + "Created At", + ]; + const extractedArray = filteredData?.map((item, index) => { + return { + Title: ( + + + {item?.title} + + ), + // Title: {item?.title}, + Discription: ( + + + + {item?.meta_description} + + + + ), + Content: ( + + + + {item?.content} + + + + ), + "Updated Date": ( + + {formatDate(item?.updatedAt)} + + ), + Active: ( + handleUpdateStatus(item.id)} + isChecked={item.status} + /> + ), + "Created At": ( + + + {formatDate(item?.createdAt)} + + + + + + + + + Edit + + + View + + { + setActionId(item.id); + setDeleteAlert(true); + }} + className="web-text-medium" + > + Delete + + + + + + ), + }; + }); + + const updateDisplayRange = (page) => { + const start = (page - 1) * pageSize + 1; + const end = Math.min(start + pageSize - 1, useCase?.data?.data?.totalItems); + setDisplayRange({ start, end }); + }; + + return ( + <> + + setDeleteAlert(false)} + isOpen={deleteAlert} + alertHandler={() => handleDelete(actionId)} + message={"Are you sure you want to delete video?"} + isLoading={deleteIsLoading} + /> + + ); +}; + +export default Usecase; diff --git a/src/Pages/Videos/EditVideos.jsx b/src/Pages/Videos/EditVideos.jsx index e2e5984..e490e5e 100644 --- a/src/Pages/Videos/EditVideos.jsx +++ b/src/Pages/Videos/EditVideos.jsx @@ -28,6 +28,8 @@ import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import Loader01 from "../../Components/Loaders/Loader01"; import { motion } from "framer-motion"; +import { TiWarning } from "react-icons/ti"; +import ToastBox from "../../Components/ToastBox"; const EditVideos = () => { const { id } = useParams(); diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js index f0ee11c..785541e 100644 --- a/src/Routes/Nav.js +++ b/src/Routes/Nav.js @@ -7,6 +7,7 @@ import { IoMdPaper } from "react-icons/io"; import { MdOutlineEvent } from "react-icons/md"; import { CgCommunity } from "react-icons/cg"; import { AiOutlineIdcard } from "react-icons/ai"; +import { LuMonitorPause } from "react-icons/lu"; export const nav = [ { @@ -53,4 +54,9 @@ export const nav = [ path: "/community", Icon: CgCommunity, }, + { + title: "Usecase", + path: "/usecase", + Icon: LuMonitorPause, + }, ]; diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 1143e8c..46d01e2 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -50,6 +50,7 @@ import EcoBanner from "../Pages/Banners/EcoBanner/EcoBanner"; import EcoBannerAdd from "../Pages/Banners/EcoBanner/EcoBannerAdd"; import EcoBannerView from "../Pages/Banners/EcoBanner/EcoBannerView"; import EcoBannerEdit from "../Pages/Banners/EcoBanner/EcoBannerEdit"; +import Usecase from "../Pages/Usecase/Usecase"; export const RouteLink = [ { path: "/", Component: UnderConstruction }, @@ -58,8 +59,8 @@ export const RouteLink = [ // =============[ Videos ]================ { path: "/videos", Component: Videos }, - { path: "videos/add-videos", Component: AddVideos }, - { path: "videos/view/:id", Component: ViewVideos }, + { path: "videos/add-videos", Component: AddVideos }, + { path: "videos/view/:id", Component: ViewVideos }, { path: "videos/edit/:id", Component: EditVideos }, // =============[ Whitepapers ]================ @@ -77,16 +78,21 @@ export const RouteLink = [ // =============[ Community banner ]================ { path: "banner/banner-community", Component: BannerCommunity }, { path: "banner/banner-community/add-banner", Component: BannerCommunityAdd }, - { path: "banner/banner-community/edit/:id",Component: BannerComunityEditPage }, - { path: "banner/banner-community/view/:id", Component: BannerComunityViewPage }, + { + path: "banner/banner-community/edit/:id", + Component: BannerComunityEditPage, + }, + { + path: "banner/banner-community/view/:id", + Component: BannerComunityViewPage, + }, // =============[ learn banner ]================ { path: "banner/learn", Component: BannerLearn }, { path: "banner/learn/add-banner", Component: BannerLearnAdd }, { path: "banner/learn/view/:id", Component: ViewLearnBanner }, - { path: "banner/learn/edit/:id", Component: BannerLearnEdit }, + { path: "banner/learn/edit/:id", Component: BannerLearnEdit }, - // =============[ eco banner ]================ { path: "banner/eco", Component: EcoBanner }, { path: "banner/eco/add-banner", Component: EcoBannerAdd }, @@ -97,26 +103,25 @@ export const RouteLink = [ { path: "banner/build", Component: BannerBuild }, { path: "banner/build/add-banner", Component: BannerBuildAdd }, { path: "banner/build/view/:id", Component: BannerBuildView }, - { path: "banner/build/edit/:id", Component: BannerBuildEdit }, + { path: "banner/build/edit/:id", Component: BannerBuildEdit }, // =============[ news banner ]================ { path: "banner/news", Component: BannerNews }, { path: "banner/news/add-banner", Component: BannerNewsAdd }, { path: "banner/news/view/:id", Component: BannerNewsView }, - { path: "banner/news/edit/:id", Component: BannerNewsEdit }, + { path: "banner/news/edit/:id", Component: BannerNewsEdit }, - // =============[ ecosystem banner ]================ { path: "banner/ecosystem", Component: UnderConstruction }, { path: "banner/ecosystem/add-banner", Component: UnderConstruction }, { path: "banner/ecosystem/view/:id", Component: UnderConstruction }, - { path: "banner/ecosystem/edit/:id", Component: UnderConstruction }, + { path: "banner/ecosystem/edit/:id", Component: UnderConstruction }, // =============[ home banner ]================ { path: "banner/home", Component: HomeBanner }, { path: "banner/home/add-banner", Component: HomeBannerAdd }, { path: "banner/home/view/:id", Component: HomeBannerView }, - { path: "banner/home/edit/:id", Component: BannerHomeEdit }, + { path: "banner/home/edit/:id", Component: BannerHomeEdit }, // =============[ blog ]================ { path: "/blogs-articles", Component: BlogsAndArticles }, @@ -133,6 +138,13 @@ export const RouteLink = [ // =============[ events ]================ { path: "/events", Component: Events }, { path: "/events/add-events", Component: AddEvents }, - { path: "/events/view/:id", Component: ViewEvents }, - { path: "/events/edit/:id", Component: EditEvents }, + { path: "/events/view/:id", Component: ViewEvents }, + { path: "/events/edit/:id", Component: EditEvents }, + + + // =============[ useCase ]================ + { path: "/usecase", Component: Usecase }, + { path: "/usecase/add-events", Component: UnderConstruction }, + { path: "/usecase/view/:id", Component: UnderConstruction }, + { path: "/usecase/edit/:id", Component: UnderConstruction }, ]; diff --git a/src/Services/api.service.js b/src/Services/api.service.js index ba54e78..c9cd3e0 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -31,9 +31,10 @@ export const rubixApi = createApi({ "getVideos", - "getWhitePaper", - "getEcoBanner" + "getEcoBanner", + "getUseCaseById", + "getUseCase" ], endpoints: (builder) => ({ // ===============[ Community cards endpoints ]======================= @@ -183,13 +184,11 @@ export const rubixApi = createApi({ query: ({ id, data }) => ({ url: `/admin/build/${id}`, method: "PUT", - body: data + body: data, }), invalidatesTags: ["getBuildBanner"], }), - - createBuildBanner: builder.mutation({ query: (newBanner) => ({ url: "/admin/build", @@ -226,7 +225,7 @@ export const rubixApi = createApi({ query: ({ id, data }) => ({ url: `/admin/main-news/${id}`, method: "PUT", - body: data + body: data, }), invalidatesTags: ["getNewsBanner"], }), @@ -359,9 +358,6 @@ export const rubixApi = createApi({ invalidatesTags: ["getEvents"], }), - - - // ===============[ Home Banners endpoints ]======================= getHomeBanner: builder.query({ query: () => "/admin/home", @@ -391,7 +387,7 @@ export const rubixApi = createApi({ query: ({ id, data }) => ({ url: `/admin/home/change-visibility/${id}`, method: "POST", - body:data + body: data, }), invalidatesTags: ["getHomeBanner"], }), @@ -404,7 +400,6 @@ export const rubixApi = createApi({ invalidatesTags: ["getHomeBanner"], }), - // ===============[ Ecosystem Banners endpoints ]======================= getEcoBanner: builder.query({ query: () => "/admin/eco", @@ -433,7 +428,7 @@ export const rubixApi = createApi({ query: ({ id, data }) => ({ url: `/admin/eco/change-visibility/${id}`, method: "POST", - body:data + body: data, }), invalidatesTags: ["getEcoBanner"], }), @@ -446,20 +441,12 @@ export const rubixApi = createApi({ invalidatesTags: ["getEcoBanner"], }), - - - - - - - // ===============[ Videos endpoints ]======================= getVideos: builder.query({ query: ({ page, size }) => `/admin/video?page=${page}&size=${size}`, providesTags: ["getVideos"], }), - createVideos: builder.mutation({ query: (video) => ({ url: "/admin/video", @@ -473,19 +460,16 @@ export const rubixApi = createApi({ query: (id) => `/admin/video/${id}`, providesTags: ["getVideos"], }), - updateVideos: builder.mutation({ query: ({ id, data }) => ({ url: `/admin/video/${id}`, method: "PUT", - body: data + body: data, }), invalidatesTags: ["getVideos"], }), - - updateVideosStatus: builder.mutation({ query: ({ id }) => ({ url: `/admin/video/change-visibility/${id}`, @@ -501,7 +485,6 @@ export const rubixApi = createApi({ invalidatesTags: ["getVideos"], }), - // ===============[ White paper endpoints ]======================= getWhitePaper: builder.query({ query: ({ page, size }) => `/admin/whitepaper?page=${page}&size=${size}`, @@ -521,7 +504,7 @@ export const rubixApi = createApi({ }), invalidatesTags: ["getWhitePaper"], }), - + createWhitepaper: builder.mutation({ query: (newBanner) => ({ url: "/admin/whitepaper", @@ -545,14 +528,46 @@ export const rubixApi = createApi({ - - - - - - - - + // ===============[ Usecase endpoints ]======================= + getUsecase: builder.query({ + query: () => "/admin/tech", + providesTags: ["getUseCase"], + }), + createUsecase: builder.mutation({ + query: (newBanner) => ({ + url: "/admin/tech", + method: "POST", + body: newBanner, + }), + invalidatesTags: ["getUseCase"], + }), + getUsecaseById: builder.query({ + query: (id) => `/admin/tech/${id}`, + providesTags: ["getUseCaseById"], + }), + deleteUsecase: builder.mutation({ + query: (id) => ({ + url: `/admin/tech/${id}`, + method: "DELETE", + }), + invalidatesTags: ["getUseCase"], + }), + updateUsecaseStatus: builder.mutation({ + query: ({ id, data }) => ({ + url: `/admin/tech/change-visibility/${id}`, + method: "POST", + body: data, + }), + invalidatesTags: ["getUseCase"], + }), + updateUsecase: builder.mutation({ + query: ({ id, data }) => ({ + url: `/admin/tech/${id}`, + method: "PUT", + body: data, // Include the data you want to send in the request body + }), + invalidatesTags: ["getUseCase"], + }), }), @@ -615,8 +630,6 @@ export const { useGetHomeBannerByIdQuery, useUpdateHomeBannerMutation, - - useGetEventsQuery, useCreateEventsMutation, useUpdateEventsStatusMutation, @@ -624,7 +637,6 @@ export const { useUpdateEventsMutation, useGetEventsByIdQuery, - useGetVideosQuery, useCreateVideosMutation, useDeleteVideosMutation, @@ -632,8 +644,6 @@ export const { useGetVideosByIdQuery, useUpdateVideosMutation, - - useGetWhitePaperQuery, useUpdateWhitepaperStatusMutation, useDeleteWhitepaperMutation, @@ -641,8 +651,6 @@ export const { useGetWhitepaperByIdQuery, useUpdateWhitepaperMutation, - - useGetEcoBannerByIdQuery, useGetEcoBannerQuery, useUpdateEcoBannerMutation, @@ -650,5 +658,14 @@ export const { useDeleteEcoBannerMutation, useCreateEcoBannerMutation, + useCreateUsecaseMutation, + useGetUsecaseByIdQuery, + useUpdateUsecaseMutation, + useDeleteUsecaseMutation, + useGetUsecaseQuery, + useUpdateUsecaseStatusMutation, + + + } = rubixApi;