import { useEffect } from 'react'
import { useTranslations } from 'next-intl';
import { useDispatch } from 'react-redux';
import { useAppSelector } from '@/redux/store';
import CircularProgress from '@mui/material/CircularProgress';
import { AppDispatch } from '@/redux/store';
import { setSearchKeyword ,load , search , delete_ } from '@/redux/features/members-slice'
import ListPagination from './parts/membersListPagination'
import { setDetailsPopUp , setUpdatePopUp , setUpdateSubPopUp , setCurrentPage } from '@/redux/features/members-slice';

export default function List()
{
    const t = useTranslations('members');
    const dispatch = useDispatch<AppDispatch>()

    const listContent = useAppSelector((state) => state.membersReducer.value.listContent)
    const isLoading = useAppSelector((state) => state.membersReducer.value.isLoading)
    const loadedFirstTime = useAppSelector((state) => state.membersReducer.value.loadedFirstTime)
    const searchKeyword = useAppSelector((state) => state.membersReducer.value.searchKeyword)
    const currentPage = useAppSelector((state) => state.membersReducer.value.currentPage)
    const appGeneralSettings = useAppSelector((state) => state.settingsReducer.value.appGeneralSettings)   

    useEffect(() => {
        if(loadedFirstTime) return;
        if(isLoading) return;
        async function a()
        {
            await dispatch(load({page : 1}))
        }
        a()
    }, [])

    return (
        <>
            <div className="flex flex-col gap-3 w-full w-auto">
                <header className="w-full flex lg:flex-row flex-col lg:justify-between lg:items-center gap-3">
                    <h1 className="font-semibold text-[20px] text-text dark:text-text-dark">{t('members')}</h1>
                    <label htmlFor="email" className="relative text-gray-400 focus-within:text-gray-600 block">
                        <svg className="text-secondary dark:text-primary/50 cursor-pointer w-[15px] h-[15px] absolute top-1/2 transform -translate-y-1/2 rtl:left-3 ltr:right-3" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.4479 16.9688L14.9063 13.4375C16.0489 11.9817 16.669 10.184 16.6667 8.33334C16.6667 6.68516 16.1779 5.074 15.2623 3.70359C14.3466 2.33318 13.0451 1.26507 11.5224 0.634341C9.99965 0.00361068 8.32409 -0.161417 6.70759 0.160126C5.09108 0.48167 3.60622 1.27534 2.44078 2.44078C1.27534 3.60622 0.48167 5.09108 0.160126 6.70759C-0.161417 8.32409 0.00361068 9.99965 0.634341 11.5224C1.26507 13.0451 2.33318 14.3466 3.70359 15.2623C5.074 16.1779 6.68516 16.6667 8.33334 16.6667C10.184 16.669 11.9817 16.0489 13.4375 14.9063L16.9688 18.4479C17.0656 18.5456 17.1808 18.6231 17.3077 18.6759C17.4347 18.7288 17.5708 18.756 17.7083 18.756C17.8459 18.756 17.982 18.7288 18.1089 18.6759C18.2359 18.6231 18.3511 18.5456 18.4479 18.4479C18.5456 18.3511 18.6231 18.2359 18.6759 18.1089C18.7288 17.982 18.756 17.8459 18.756 17.7083C18.756 17.5708 18.7288 17.4347 18.6759 17.3077C18.6231 17.1808 18.5456 17.0656 18.4479 16.9688ZM2.08334 8.33334C2.08334 7.0972 2.44989 5.88883 3.13665 4.86102C3.82341 3.83322 4.79953 3.03214 5.94157 2.55909C7.0836 2.08604 8.34027 1.96227 9.55265 2.20343C10.765 2.44459 11.8787 3.03984 12.7528 3.91392C13.6268 4.788 14.2221 5.90164 14.4632 7.11402C14.7044 8.3264 14.5806 9.58307 14.1076 10.7251C13.6345 11.8671 12.8335 12.8433 11.8057 13.53C10.7778 14.2168 9.56947 14.5833 8.33334 14.5833C6.67573 14.5833 5.08602 13.9249 3.91392 12.7528C2.74182 11.5807 2.08334 9.99094 2.08334 8.33334Z" fill="currentColor"/>
                        </svg>
                        <input onChange={(async(e) => {
                            if(e.target.value.length == 0)
                            {
                                dispatch(setCurrentPage(1));
                            }
                            dispatch(setSearchKeyword(e.target.value))
                            await dispatch(search({
                                searchKeyword: e.target.value
                            }))
                        })}
                        value={searchKeyword} 
                        className="lg:w-[300px] w-full text-text dark:text-text-dark rounded-[5px] px-3 h-[50px] border-[1px] !border-secondary-light bg-primary-dark/5 placeholder:font-semibold" type="text" placeholder={t('searchForServices')}></input>
                    </label>
                </header>
                <div className="panel !p-0 mb-7 dark:bg-primary-dark">
                    <header className="w-full lg:flex gap-3 hidden justify-between items-center p-5 opacity-50 font-semibold border-b-[1px] border-secondary-light">
                        <span className="w-full text-start">#</span>
                        <span className="w-full text-start">{t('firstName')}</span>
                        <span className="w-full text-start">{t('lastName')}</span>
                        <span className="w-full text-start">{t('gendre')}</span>
                        <span className="w-full text-start">{t('payMonth')}</span>
                        <span className="w-full text-start">{t('planDelay')}</span>
                        <span className="w-full text-start">{t('planStatus')}</span>
                        <span className="w-full text-start">{t('actions')}</span>
                    </header>
                    <main className="flex flex-col justify-center items-center">
                        {
                            !isLoading && listContent.flat().length == 0 && currentPage >= 2 && searchKeyword.length == 0 ?
                            <div className="p-5 py-10 flex justify-start items-center gap-3 [&_*]:fill-warning">
                                <svg width="25" height="25" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.5" d="M15.2069 2.85079C15.6886 1.98507 16.3858 1.26524 17.2277 0.76451C18.0696 0.263778 19.0261 0 20 0C20.9739 0 21.9304 0.263778 22.7723 0.76451C23.6142 1.26524 24.3114 1.98507 24.7931 2.85079L39.309 29.3012C39.77 30.1312 40.0083 31.0711 39.9998 32.0257C39.9913 32.9802 39.7363 33.9155 39.2607 34.7368C38.7781 35.5842 38.085 36.286 37.2518 36.7713C36.4186 37.2565 35.4747 37.5078 34.5159 37.4998H5.48407C4.52527 37.5078 3.58143 37.2565 2.74819 36.7713C1.91496 36.286 1.22192 35.5842 0.739307 34.7368C0.263677 33.9155 0.00870576 32.9802 0.000218482 32.0257C-0.0082688 31.0711 0.230027 30.1312 0.690974 29.3012L15.2069 2.85079ZM20 30.6818C20.3296 30.6818 20.6518 30.5819 20.9259 30.3946C21.2 30.2073 21.4136 29.9411 21.5397 29.6296C21.6659 29.3182 21.6989 28.9754 21.6346 28.6448C21.5703 28.3142 21.4115 28.0104 21.1785 27.7721C20.9454 27.5337 20.6484 27.3713 20.3251 27.3056C20.0018 27.2398 19.6668 27.2736 19.3622 27.4026C19.0577 27.5316 18.7974 27.7501 18.6143 28.0304C18.4312 28.3107 18.3334 28.6402 18.3334 28.9773C18.3334 29.4294 18.509 29.8629 18.8215 30.1826C19.1341 30.5022 19.558 30.6818 20 30.6818ZM18.3334 22.1593C18.3334 22.6114 18.509 23.0449 18.8215 23.3646C19.1341 23.6843 19.558 23.8638 20 23.8638C20.442 23.8638 20.8659 23.6843 21.1785 23.3646C21.491 23.0449 21.6666 22.6114 21.6666 22.1593V11.9324C21.6666 11.4803 21.491 11.0467 21.1785 10.7271C20.8659 10.4074 20.442 10.2279 20 10.2279C19.558 10.2279 19.1341 10.4074 18.8215 10.7271C18.509 11.0467 18.3334 11.4803 18.3334 11.9324V22.1593Z" fill="currentColor"/>
                                    <circle cx="20" cy="29" r="2" fill="currentColor"/>
                                    <rect x="18" y="10" width="4" height="14" rx="2" fill="currentColor"/>
                                </svg>
                                <h2 className="text-text dark:text-text-dark font-semibold">{t('thisPageIsEmpty')}</h2>
                            </div>
                            :
                            <></>
                        }
                        {
                            !isLoading && listContent.flat().length == 0 && currentPage < 2  && searchKeyword.length == 0 ?
                            <div className="p-5 py-10 flex justify-start items-center gap-3 [&_*]:fill-warning">
                                <svg width="25" height="25" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.5" d="M15.2069 2.85079C15.6886 1.98507 16.3858 1.26524 17.2277 0.76451C18.0696 0.263778 19.0261 0 20 0C20.9739 0 21.9304 0.263778 22.7723 0.76451C23.6142 1.26524 24.3114 1.98507 24.7931 2.85079L39.309 29.3012C39.77 30.1312 40.0083 31.0711 39.9998 32.0257C39.9913 32.9802 39.7363 33.9155 39.2607 34.7368C38.7781 35.5842 38.085 36.286 37.2518 36.7713C36.4186 37.2565 35.4747 37.5078 34.5159 37.4998H5.48407C4.52527 37.5078 3.58143 37.2565 2.74819 36.7713C1.91496 36.286 1.22192 35.5842 0.739307 34.7368C0.263677 33.9155 0.00870576 32.9802 0.000218482 32.0257C-0.0082688 31.0711 0.230027 30.1312 0.690974 29.3012L15.2069 2.85079ZM20 30.6818C20.3296 30.6818 20.6518 30.5819 20.9259 30.3946C21.2 30.2073 21.4136 29.9411 21.5397 29.6296C21.6659 29.3182 21.6989 28.9754 21.6346 28.6448C21.5703 28.3142 21.4115 28.0104 21.1785 27.7721C20.9454 27.5337 20.6484 27.3713 20.3251 27.3056C20.0018 27.2398 19.6668 27.2736 19.3622 27.4026C19.0577 27.5316 18.7974 27.7501 18.6143 28.0304C18.4312 28.3107 18.3334 28.6402 18.3334 28.9773C18.3334 29.4294 18.509 29.8629 18.8215 30.1826C19.1341 30.5022 19.558 30.6818 20 30.6818ZM18.3334 22.1593C18.3334 22.6114 18.509 23.0449 18.8215 23.3646C19.1341 23.6843 19.558 23.8638 20 23.8638C20.442 23.8638 20.8659 23.6843 21.1785 23.3646C21.491 23.0449 21.6666 22.6114 21.6666 22.1593V11.9324C21.6666 11.4803 21.491 11.0467 21.1785 10.7271C20.8659 10.4074 20.442 10.2279 20 10.2279C19.558 10.2279 19.1341 10.4074 18.8215 10.7271C18.509 11.0467 18.3334 11.4803 18.3334 11.9324V22.1593Z" fill="currentColor"/>
                                    <circle cx="20" cy="29" r="2" fill="currentColor"/>
                                    <rect x="18" y="10" width="4" height="14" rx="2" fill="currentColor"/>
                                </svg>
                                <h2 className="text-text dark:text-text-dark font-semibold">{t('noData')}</h2>
                            </div>
                            :
                            <></>
                        }
                        {
                            !isLoading && listContent.flat().length == 0 && searchKeyword.length != 0 ?
                            <div className="p-5 py-10 flex justify-start items-center gap-3 [&_*]:fill-warning">
                                <svg width="25" height="25" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M27.3438 20.3125C27.7656 20.3125 28.125 20.6719 28.125 21.0938C28.125 21.5156 27.7656 21.875 27.3438 21.875C26.9219 21.875 26.5625 21.5156 26.5625 21.0938C26.5625 20.6719 26.9219 20.3125 27.3438 20.3125ZM13.2812 20.3125C13.7031 20.3125 14.0625 20.6719 14.0625 21.0938C14.0625 21.5156 13.7031 21.875 13.2812 21.875C12.8594 21.875 12.5 21.5156 12.5 21.0938C12.5 20.6719 12.8594 20.3125 13.2812 20.3125Z" fill="currentColor"/>
                                    <path d="M36.6094 37.3451C36.4094 37.3451 36.2094 37.2686 36.0562 37.117L32.5938 33.6545C32.2891 33.3498 32.2891 32.8545 32.5938 32.5498C32.8984 32.2451 33.3937 32.2451 33.6984 32.5498L37.1609 36.0123C37.4656 36.317 37.4656 36.8123 37.1609 37.117C37.0094 37.2701 36.8094 37.3451 36.6094 37.3451Z" fill="currentColor"/>
                                    <path d="M44.5312 48.4375C43.4891 48.4375 42.5078 48.0312 41.7688 47.2937L36.3 41.825C35.5625 41.0859 35.1562 40.1062 35.1562 39.0625C35.1562 38.0188 35.5625 37.0391 36.3 36.3C37.7156 34.8844 40.4078 34.8844 41.8234 36.3L47.2922 41.7688C48.0313 42.5078 48.4375 43.4875 48.4375 44.5312C48.4375 45.575 48.0312 46.5547 47.2937 47.2937C46.5562 48.0328 45.5734 48.4375 44.5312 48.4375ZM39.0625 36.75C38.4266 36.75 37.8234 36.9875 37.4047 37.4063C36.9625 37.8484 36.7188 38.4375 36.7188 39.0625C36.7188 39.6875 36.9625 40.2766 37.4047 40.7203L42.8734 46.1891C43.7594 47.0734 45.3016 47.0734 46.1875 46.1891C46.6312 45.7453 46.875 45.1563 46.875 44.5312C46.875 43.9062 46.6313 43.3172 46.1891 42.8734L40.7203 37.4047C40.3016 36.9875 39.6984 36.75 39.0625 36.75ZM20.3125 39.0625C9.97344 39.0625 1.5625 30.6516 1.5625 20.3125C1.5625 9.97344 9.97344 1.5625 20.3125 1.5625C30.6516 1.5625 39.0625 9.97344 39.0625 20.3125C39.0625 30.6516 30.6516 39.0625 20.3125 39.0625ZM20.3125 3.125C10.8359 3.125 3.125 10.8359 3.125 20.3125C3.125 29.7891 10.8359 37.5 20.3125 37.5C29.7891 37.5 37.5 29.7891 37.5 20.3125C37.5 10.8359 29.7891 3.125 20.3125 3.125Z" fill="currentColor"/>
                                    <path d="M21.875 25.0328C21.4438 25.0328 21.0938 24.6828 21.0938 24.2516C21.0938 23.8219 20.7437 23.4703 20.3125 23.4703C19.8813 23.4703 19.5312 23.8219 19.5312 24.2516C19.5312 24.6828 19.1812 25.0328 18.75 25.0328C18.3188 25.0328 17.9688 24.6828 17.9688 24.2516C17.9688 22.9594 19.0203 21.9078 20.3125 21.9078C21.6047 21.9078 22.6562 22.9594 22.6562 24.2516C22.6562 24.6828 22.3062 25.0328 21.875 25.0328ZM27.3438 22.6562C26.4969 22.6562 25.7812 21.9406 25.7812 21.0937C25.7812 20.2469 26.4969 19.5312 27.3438 19.5312C28.1906 19.5312 28.9062 20.2469 28.9062 21.0937C28.9062 21.9406 28.1906 22.6562 27.3438 22.6562ZM13.2812 22.6562C12.4344 22.6562 11.7188 21.9406 11.7188 21.0937C11.7188 20.2469 12.4344 19.5312 13.2812 19.5312C14.1281 19.5312 14.8438 20.2469 14.8438 21.0937C14.8438 21.9406 14.1281 22.6562 13.2812 22.6562Z" fill="currentColor"/>
                                    <path d="M36.6094 37.3451C36.4094 37.3451 36.2094 37.2686 36.0562 37.117L32.5938 33.6545C32.2891 33.3498 32.2891 32.8545 32.5938 32.5498C32.8984 32.2451 33.3937 32.2451 33.6984 32.5498L37.1609 36.0123C37.4656 36.317 37.4656 36.8123 37.1609 37.117C37.0094 37.2701 36.8094 37.3451 36.6094 37.3451Z" fill="currentColor"/>
                                    <path d="M44.5312 48.4375C43.4891 48.4375 42.5078 48.0312 41.7688 47.2937L36.3 41.825C35.5625 41.0859 35.1562 40.1062 35.1562 39.0625C35.1562 38.0188 35.5625 37.0391 36.3 36.3C37.7156 34.8844 40.4078 34.8844 41.8234 36.3L47.2922 41.7688C48.0313 42.5078 48.4375 43.4875 48.4375 44.5312C48.4375 45.575 48.0312 46.5547 47.2937 47.2937C46.5562 48.0328 45.5734 48.4375 44.5312 48.4375ZM39.0625 36.75C38.4266 36.75 37.8234 36.9875 37.4047 37.4063C36.9625 37.8484 36.7188 38.4375 36.7188 39.0625C36.7188 39.6875 36.9625 40.2766 37.4047 40.7203L42.8734 46.1891C43.7594 47.0734 45.3016 47.0734 46.1875 46.1891C46.6312 45.7453 46.875 45.1563 46.875 44.5312C46.875 43.9062 46.6313 43.3172 46.1891 42.8734L40.7203 37.4047C40.3016 36.9875 39.6984 36.75 39.0625 36.75ZM20.3125 39.0625C9.97344 39.0625 1.5625 30.6516 1.5625 20.3125C1.5625 9.97344 9.97344 1.5625 20.3125 1.5625C30.6516 1.5625 39.0625 9.97344 39.0625 20.3125C39.0625 30.6516 30.6516 39.0625 20.3125 39.0625ZM20.3125 3.125C10.8359 3.125 3.125 10.8359 3.125 20.3125C3.125 29.7891 10.8359 37.5 20.3125 37.5C29.7891 37.5 37.5 29.7891 37.5 20.3125C37.5 10.8359 29.7891 3.125 20.3125 3.125Z" fill="currentColor"/>
                                    <path d="M21.875 25.0328C21.4438 25.0328 21.0938 24.6828 21.0938 24.2516C21.0938 23.8219 20.7437 23.4703 20.3125 23.4703C19.8813 23.4703 19.5312 23.8219 19.5312 24.2516C19.5312 24.6828 19.1812 25.0328 18.75 25.0328C18.3188 25.0328 17.9688 24.6828 17.9688 24.2516C17.9688 22.9594 19.0203 21.9078 20.3125 21.9078C21.6047 21.9078 22.6562 22.9594 22.6562 24.2516C22.6562 24.6828 22.3062 25.0328 21.875 25.0328ZM27.3438 22.6562C26.4969 22.6562 25.7812 21.9406 25.7812 21.0937C25.7812 20.2469 26.4969 19.5312 27.3438 19.5312C28.1906 19.5312 28.9062 20.2469 28.9062 21.0937C28.9062 21.9406 28.1906 22.6562 27.3438 22.6562ZM13.2812 22.6562C12.4344 22.6562 11.7188 21.9406 11.7188 21.0937C11.7188 20.2469 12.4344 19.5312 13.2812 19.5312C14.1281 19.5312 14.8438 20.2469 14.8438 21.0937C14.8438 21.9406 14.1281 22.6562 13.2812 22.6562Z" fill="currentColor"/>
                                </svg>               
                                <h2 className="text-text dark:text-text-dark font-semibold">{t('noSearchResults')}</h2>
                            </div>
                            :
                            <></>
                        }
                        {
                            // single sender account
                            isLoading ?
                            <div className="p-5 flex justify-start items-center gap-3">
                                <CircularProgress color="secondary" size={24} />                            
                            </div>
                            :
                            listContent.flat().map((v : any , i) => {
                                return (
                                    <div key={i} className="w-full flex gap-3 justify-between items-center p-5 font-semibold h-[70px] border-b-[1px] border-secondary-light/30">
                                        <span className="w-full text-start whitespace-nowrap text-ellipsis overflow-hidden lg:block hidden">{i + 1}</span>
                                        <span className="w-full text-start whitespace-nowrap text-ellipsis overflow-hidden">{v.firstName}</span>
                                        <span className="w-full text-start flex gap-2 whitespace-nowrap text-ellipsis overflow-hidden lg:block hidden">{v.lastName}</span>
                                        <span className="w-full text-start flex gap-2 whitespace-nowrap text-ellipsis overflow-hidden lg:block hidden">{t(v.gendre+'Gendre')}</span>
                                        <span className="w-full text-start flex gap-2 whitespace-nowrap text-ellipsis overflow-hidden lg:block hidden">{v.payMonth} {appGeneralSettings.currencySymbol}</span>
                                        <span className="w-full text-start flex gap-2 whitespace-nowrap text-ellipsis overflow-hidden lg:block hidden">{v.planDelay + ' ' + t('months')}</span>
                                        <span className="w-full text-start flex gap-2 whitespace-nowrap text-ellipsis overflow-hidden">
                                            {v.planExpAt_unix - (Date.now() / 1000) > 259200 ? 
                                            <span className="flex gap-1 text-success">
                                                <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <rect y="2.79895" width="3.95833" height="3.95833" rx="1" transform="rotate(-45 0 2.79895)" fill="currentColor"/>
                                                </svg>
                                                {t('trueActive')}
                                            </span>
                                            : 
                                            (
                                                v.planExpAt_unix - (Date.now() / 1000) > 0 ?
                                                <span className="flex gap-1 text-warning">
                                                    <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <rect y="2.79895" width="3.95833" height="3.95833" rx="1" transform="rotate(-45 0 2.79895)" fill="currentColor"/>
                                                    </svg>
                                                    {t('expireVerySoon')}
                                                </span>
                                                :
                                                <span className="flex gap-1 text-error">
                                                    <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <rect y="2.79895" width="3.95833" height="3.95833" rx="1" transform="rotate(-45 0 2.79895)" fill="currentColor"/>
                                                    </svg>
                                                    {t('falseActive')}
                                                </span>
                                            )
                                            }
                                        </span>
                                        <span className="lg:w-full w-[100px] h-full text-start flex justify-start items-center gap-3">               
                                            <button onClick={async() => {
                                                dispatch(setUpdateSubPopUp({
                                                    status: true,
                                                    data: v
                                                }))
                                            }} className="[&_*]:fill-success [&_*]:dark:fill-success">
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M4.72703 14.3043C4.74067 14.3151 4.7562 14.3231 4.76993 14.3339C4.8441 14.3912 4.92435 14.4392 5.00077 14.4933C5.17192 14.6158 5.3433 14.7375 5.52457 14.8424C5.53027 14.8456 5.53643 14.8479 5.54213 14.8512C5.76923 14.9817 6.0012 15.1034 6.24248 15.2052L6.3216 15.2381C6.43365 15.285 6.54277 15.3303 6.6666 15.3736C6.98595 15.4806 7.25767 15.5545 7.5177 15.6072C7.6839 15.6416 7.84177 15.6675 7.992 15.6872C8.01495 15.6903 8.03842 15.6911 8.06145 15.6939C8.1666 15.7064 8.27168 15.7186 8.36588 15.7236C8.54077 15.7413 8.7246 15.75 8.89965 15.75C12.6218 15.75 15.6496 12.7222 15.6496 9.00005C15.6496 8.58552 15.3142 8.25005 14.8996 8.25005C14.4851 8.25005 14.1496 8.58552 14.1496 9.00005C14.1496 11.8946 11.7942 14.25 8.89965 14.25C8.7282 14.25 8.55937 14.2326 8.39062 14.2161C8.26853 14.2062 8.13667 14.1855 8.00348 14.1629C7.8855 14.1423 7.76775 14.1204 7.65195 14.0919C7.56645 14.0712 7.48478 14.0478 7.4025 14.0235C7.01085 13.9062 6.6327 13.7503 6.2802 13.5474C6.2784 13.5463 6.27652 13.5456 6.27472 13.5446C6.13912 13.4664 6.01222 13.3743 5.88405 13.2843C5.81752 13.2369 5.74793 13.1961 5.6832 13.1452C5.61105 13.0893 5.54588 13.0247 5.47658 12.9651C5.37068 12.8729 5.26268 12.7826 5.1627 12.6833C5.11305 12.6331 5.06993 12.5763 5.02222 12.5241L6.36555 12.282C6.7728 12.2081 7.04377 11.8184 6.9705 11.4105C6.89655 11.0032 6.51202 10.7322 6.09892 10.8055L2.96707 11.3702C2.77155 11.4054 2.59793 11.5174 2.48438 11.6808C2.37083 11.8441 2.32687 12.0455 2.36205 12.2418L2.92672 15.3729C2.99265 15.7354 3.30833 15.9896 3.66428 15.9896C3.70823 15.9896 3.75293 15.9859 3.7983 15.9779C4.20555 15.9039 4.47652 15.5142 4.40325 15.1063L4.16925 13.8101C4.17495 13.8156 4.18155 13.8202 4.18725 13.8258C4.37498 14.0076 4.55175 14.1669 4.72703 14.3043ZM13.1726 3.69582C13.1594 3.68532 13.1445 3.67767 13.1312 3.66725C13.0534 3.6071 12.9693 3.55655 12.889 3.49992C12.7215 3.38052 12.5542 3.26127 12.377 3.15867C12.3641 3.15117 12.3499 3.14585 12.3368 3.13842C12.116 3.01257 11.8914 2.89377 11.6573 2.795L11.5781 2.76207C11.4661 2.7152 11.3569 2.66982 11.2331 2.62655C10.913 2.5196 10.6413 2.4449 10.3813 2.39292C10.2159 2.35857 10.0582 2.3327 9.90795 2.3129C9.88508 2.30975 9.86182 2.30907 9.83895 2.30615C9.73373 2.2937 9.62857 2.28147 9.534 2.27645C9.35887 2.25882 9.17505 2.25005 9 2.25005C5.27782 2.25005 2.25 5.27787 2.25 9.00005C2.25 9.41457 2.58548 9.75005 3 9.75005C3.41453 9.75005 3.75 9.41457 3.75 9.00005C3.75 6.1055 6.10545 3.75005 9 3.75005C9.17145 3.75005 9.34028 3.76745 9.50903 3.78402C9.63113 3.79385 9.76297 3.81462 9.89617 3.8372C10.0142 3.85782 10.1319 3.87965 10.2477 3.90815C10.3332 3.92892 10.4149 3.95232 10.4971 3.97662C11.0449 4.14065 11.5594 4.39362 12.0246 4.72182C12.0874 4.76675 12.1535 4.8053 12.2146 4.85337C12.2863 4.90887 12.3511 4.9733 12.42 5.03247C12.5275 5.12607 12.6368 5.21772 12.7393 5.31965C12.788 5.369 12.8305 5.42472 12.8773 5.4761L11.5342 5.71805C11.1269 5.792 10.856 6.1817 10.9292 6.58962C10.9951 6.95217 11.3108 7.20635 11.6668 7.20635C11.7107 7.20635 11.7554 7.20267 11.8008 7.19465L14.9326 6.62997C15.1282 6.5948 15.3018 6.48275 15.4153 6.3194C15.5289 6.15605 15.5729 5.95467 15.5377 5.7584L14.973 2.6273C14.8991 2.22005 14.513 1.94765 14.1014 2.02235C13.6942 2.0963 13.4232 2.486 13.4965 2.89392L13.7305 4.18992C13.7215 4.18092 13.7109 4.17372 13.7017 4.1648C13.5185 3.98787 13.3452 3.8318 13.1726 3.69582Z" fill="currentColor"/>
                                                </svg>
                                            </button>
                                            <button onClick={async() => {
                                                dispatch(setUpdatePopUp({
                                                    status: true,
                                                    data: v
                                                }))
                                            }} className="[&_*]:fill-success [&_*]:dark:fill-success">
                                                <svg width="15" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M6.36069 6.61884L5.39925 9.91891C5.3176 10.1996 5.39219 10.5041 5.59355 10.7111C5.74073 10.8626 5.93856 10.9446 6.14093 10.9446C6.21527 10.9446 6.29012 10.9337 6.36321 10.9109L9.56961 9.92151C9.69234 9.88363 9.80423 9.81515 9.89471 9.72177L15.7732 3.67103C15.9184 3.52161 16.0001 3.31876 16.0001 3.10761C16.0001 2.89646 15.9184 2.6936 15.7732 2.54419L13.528 0.23346C13.2256 -0.0778202 12.7357 -0.0778202 12.4333 0.23346L6.55499 6.28421C6.46426 6.37759 6.39774 6.49225 6.36069 6.61884ZM7.78786 7.26889L12.9806 1.92371L14.1308 3.10761L8.93806 8.45279L7.29541 8.95966L7.78786 7.26889Z" fill="#4DB33D"/>
                                                    <path d="M15.2258 7.4375C14.7981 7.4375 14.4516 7.79444 14.4516 8.23438V13.5469C14.4516 14.2794 13.8727 14.875 13.1613 14.875H2.83871C2.12727 14.875 1.54839 14.2794 1.54839 13.5469V2.92188C1.54839 2.18933 2.12727 1.59375 2.83871 1.59375H8C8.42767 1.59375 8.77419 1.23681 8.77419 0.796875C8.77419 0.356936 8.42767 0 8 0H2.83871C1.27344 0 0 1.311 0 2.92188V13.5469C0 15.1577 1.27344 16.4688 2.83871 16.4688H13.1613C14.7266 16.4688 16 15.1577 16 13.5469V8.23438C16 7.79444 15.6535 7.4375 15.2258 7.4375Z" fill="#4DB33D"/>
                                                </svg>                                 
                                            </button>
                                            <button onClick={async() => {
                                                await dispatch(delete_({
                                                    id: v._id
                                                }))
                                            }} className="[&_*]:fill-error [&_*]:dark:fill-error">
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M2.0625 4.625C2.0625 4.27983 2.32153 4.00001 2.64107 4.00001L4.63925 3.99968C5.03626 3.98881 5.38652 3.71612 5.52161 3.31268C5.52516 3.30208 5.52924 3.28899 5.54389 3.24152L5.62999 2.96245C5.68267 2.79134 5.72857 2.64227 5.79281 2.50902C6.04657 1.98262 6.51606 1.61708 7.0586 1.52349C7.19593 1.4998 7.34136 1.4999 7.50832 1.50002H10.1168C10.2838 1.4999 10.4292 1.4998 10.5665 1.52349C11.1091 1.61708 11.5786 1.98262 11.8323 2.50902C11.8966 2.64227 11.9425 2.79134 11.9951 2.96245L12.0812 3.24152C12.0959 3.28899 12.1 3.30208 12.1035 3.31268C12.2387 3.71612 12.6584 3.98915 13.0553 4.00001H14.9839C15.3034 4.00001 15.5625 4.27983 15.5625 4.625C15.5625 4.97018 15.3034 5.25 14.9839 5.25H2.64107C2.32153 5.25 2.0625 4.97018 2.0625 4.625Z" fill="currentColor"/>
                                                    <path opacity="0.5" d="M8.7051 16.4997H9.29528C11.3259 16.4997 12.3412 16.4997 13.0013 15.8523C13.6615 15.2049 13.7291 14.143 13.8641 12.0191L14.0588 8.95863C14.132 7.80626 14.1687 7.23003 13.8375 6.86489C13.5063 6.49976 12.9471 6.49976 11.8286 6.49976H6.17179C5.05329 6.49976 4.49403 6.49976 4.16286 6.86489C3.83169 7.23003 3.86833 7.80626 3.94162 8.95863L4.13625 12.0191C4.27133 14.143 4.33887 15.2049 4.99901 15.8523C5.65915 16.4997 6.67446 16.4997 8.7051 16.4997Z" fill="currentColor"/>
                                                </svg>
                                            </button>
                                            <button onClick={async() => {
                                                dispatch(setDetailsPopUp({
                                                    status: true,
                                                    data: v ? v : null
                                                }))
                                            }} className="[&_*]:fill-info [&_*]:dark:fill-info">
                                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M13.3336 13.3333H1.66641V1.66672H6.875V0H1.66641C0.749649 0 0 0.749883 0 1.66672V13.3333C0 14.2501 0.749649 15 1.66641 15H13.3336C14.2504 15 15 14.2501 15 13.3333V8.125H13.3336V13.3333ZM8.75 0V1.66672H12.167L3.74996 10.0833L4.9166 11.25L13.3336 2.83316V6.25H15V0H8.75Z" fill="currentColor"/>
                                                </svg>
                                            </button> 
                                        </span>
                                    </div>
                                )
                            })
                        }
                        <ListPagination />
                    </main>
                </div>
            </div>
        </>
    )
}