import { useTranslations } from 'next-intl';
import { useAppSelector } from '@/redux/store';

export default function GeneralLook()
{

    const t = useTranslations('statistics');
    const report = useAppSelector((state) => state.statisticsReducer.value.report)

    return (
        <>
            <div className="lg:w-1/3 w-full flex flex-col lg:gap-7 gap-3">
                <div className="w-full h-full flex lg:flex-row flex-col justify-between items-center gap-3 lg:px-5 p-5 border border-secondary-light bg-primary dark:bg-primary-dark rounded-md shadow">
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-info flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.69141 3.22229C8.69141 1.44589 7.24365 0 5.46436 0C3.68506 0 2.23779 1.44589 2.23779 3.22229C2.23779 4.9987 3.68506 6.44361 5.46436 6.44361C7.24365 6.44361 8.69141 4.9987 8.69141 3.22229ZM5.46436 1.99675C6.14111 1.99675 6.69141 2.54664 6.69141 3.22229C6.69141 3.89795 6.14111 4.44686 5.46436 4.44686C4.78809 4.44686 4.23779 3.89795 4.23779 3.22229C4.23779 2.54664 4.78809 1.99675 5.46436 1.99675ZM1 14.4238C1.55225 14.4238 2 13.9773 2 13.4254C2 13.1859 2.0271 12.9508 2.07495 12.7212C2.21057 12.0707 2.53113 11.4708 3.01514 10.988C3.67041 10.3338 4.5415 9.974 5.46826 9.974C5.70428 9.974 5.93713 9.99837 6.16113 10.0446C6.38989 10.0917 6.60944 10.1617 6.81299 10.2548C7.3125 10.4781 7.90723 10.2626 8.1377 9.76048C8.36719 9.25934 8.14551 8.66656 7.64307 8.43744C6.98193 8.13617 6.22998 7.97725 5.46826 7.97725C4.00732 7.97725 2.63379 8.54469 1.60107 9.57621C0.568359 10.6068 0 11.9737 0 13.4254C0 13.9773 0.447754 14.4238 1 14.4238ZM19.3086 3.22229C19.3086 4.9987 20.7563 6.44361 22.5356 6.44361C24.3149 6.44361 25.7622 4.9987 25.7622 3.22229C25.7622 1.44589 24.3149 0 22.5356 0C20.7563 0 19.3086 1.44589 19.3086 3.22229ZM22.5356 4.44686C21.8589 4.44686 21.3086 3.89795 21.3086 3.22229C21.3086 2.54664 21.8589 1.99675 22.5356 1.99675C23.2119 1.99675 23.7622 2.54664 23.7622 3.22229C23.7622 3.89795 23.2119 4.44686 22.5356 4.44686ZM22.5317 7.97725C21.77 7.97725 21.0181 8.13617 20.3569 8.43744C19.8545 8.66656 19.6328 9.25934 19.8623 9.76048C20.0918 10.2626 20.6865 10.479 21.187 10.2548C21.3906 10.1617 21.6101 10.0917 21.8389 10.0446C22.0629 9.99837 22.2957 9.974 22.5317 9.974C23.4585 9.974 24.3296 10.3338 24.9849 10.988C25.4689 11.4708 25.7894 12.0707 25.925 12.7212C25.9729 12.9508 26 13.1859 26 13.4254C26 13.9773 26.4478 14.4238 27 14.4238C27.5522 14.4238 28 13.9773 28 13.4254C28 11.9737 27.4316 10.6068 26.3989 9.57621C25.3662 8.54469 23.9927 7.97725 22.5317 7.97725ZM17.7988 4.47221C17.7988 2.38089 16.0947 0.679558 14 0.679558C11.9053 0.679558 10.2012 2.38089 10.2012 4.47221C10.2012 6.56354 11.9053 8.26487 14 8.26487C16.0947 8.26487 17.7988 6.56354 17.7988 4.47221ZM14 2.67631C14.9917 2.67631 15.7988 3.48164 15.7988 4.47221C15.7988 5.46279 14.9917 6.26812 14 6.26812C13.0083 6.26812 12.2012 5.46279 12.2012 4.47221C12.2012 3.48164 13.0083 2.67631 14 2.67631ZM8.38965 18C8.94171 18 9.38928 17.5527 9.38953 17.0011C9.38953 17.001 9.38953 17.0013 9.38953 17.0011C9.38953 14.4633 11.458 12.3978 14 12.3978C16.542 12.3978 18.6104 14.4628 18.6104 17.0007C18.6104 17.0005 18.6104 17.0008 18.6104 17.0007C18.6106 17.5522 19.0583 17.999 19.6104 17.999C20.1626 17.999 20.6104 17.5525 20.6104 17.0007C20.6104 13.362 17.645 10.401 14 10.401C10.355 10.401 7.38965 13.362 7.38965 17.0016C7.38965 17.5535 7.8374 18 8.38965 18Z" fill="white"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.membersCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('totalMembers')}</p>
                        </span>
                    </div>
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-success flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.69141 3.22229C8.69141 1.44589 7.24365 0 5.46436 0C3.68506 0 2.23779 1.44589 2.23779 3.22229C2.23779 4.9987 3.68506 6.44361 5.46436 6.44361C7.24365 6.44361 8.69141 4.9987 8.69141 3.22229ZM5.46436 1.99675C6.14111 1.99675 6.69141 2.54664 6.69141 3.22229C6.69141 3.89795 6.14111 4.44686 5.46436 4.44686C4.78809 4.44686 4.23779 3.89795 4.23779 3.22229C4.23779 2.54664 4.78809 1.99675 5.46436 1.99675ZM1 14.4238C1.55225 14.4238 2 13.9773 2 13.4254C2 13.1859 2.0271 12.9508 2.07495 12.7212C2.21057 12.0707 2.53113 11.4708 3.01514 10.988C3.67041 10.3338 4.5415 9.974 5.46826 9.974C5.70428 9.974 5.93713 9.99837 6.16113 10.0446C6.38989 10.0917 6.60944 10.1617 6.81299 10.2548C7.3125 10.4781 7.90723 10.2626 8.1377 9.76048C8.36719 9.25934 8.14551 8.66656 7.64307 8.43744C6.98193 8.13617 6.22998 7.97725 5.46826 7.97725C4.00732 7.97725 2.63379 8.54469 1.60107 9.57621C0.568359 10.6068 0 11.9737 0 13.4254C0 13.9773 0.447754 14.4238 1 14.4238ZM19.3086 3.22229C19.3086 4.9987 20.7563 6.44361 22.5356 6.44361C24.3149 6.44361 25.7622 4.9987 25.7622 3.22229C25.7622 1.44589 24.3149 0 22.5356 0C20.7563 0 19.3086 1.44589 19.3086 3.22229ZM22.5356 4.44686C21.8589 4.44686 21.3086 3.89795 21.3086 3.22229C21.3086 2.54664 21.8589 1.99675 22.5356 1.99675C23.2119 1.99675 23.7622 2.54664 23.7622 3.22229C23.7622 3.89795 23.2119 4.44686 22.5356 4.44686ZM22.5317 7.97725C21.77 7.97725 21.0181 8.13617 20.3569 8.43744C19.8545 8.66656 19.6328 9.25934 19.8623 9.76048C20.0918 10.2626 20.6865 10.479 21.187 10.2548C21.3906 10.1617 21.6101 10.0917 21.8389 10.0446C22.0629 9.99837 22.2957 9.974 22.5317 9.974C23.4585 9.974 24.3296 10.3338 24.9849 10.988C25.4689 11.4708 25.7894 12.0707 25.925 12.7212C25.9729 12.9508 26 13.1859 26 13.4254C26 13.9773 26.4478 14.4238 27 14.4238C27.5522 14.4238 28 13.9773 28 13.4254C28 11.9737 27.4316 10.6068 26.3989 9.57621C25.3662 8.54469 23.9927 7.97725 22.5317 7.97725ZM17.7988 4.47221C17.7988 2.38089 16.0947 0.679558 14 0.679558C11.9053 0.679558 10.2012 2.38089 10.2012 4.47221C10.2012 6.56354 11.9053 8.26487 14 8.26487C16.0947 8.26487 17.7988 6.56354 17.7988 4.47221ZM14 2.67631C14.9917 2.67631 15.7988 3.48164 15.7988 4.47221C15.7988 5.46279 14.9917 6.26812 14 6.26812C13.0083 6.26812 12.2012 5.46279 12.2012 4.47221C12.2012 3.48164 13.0083 2.67631 14 2.67631ZM8.38965 18C8.94171 18 9.38928 17.5527 9.38953 17.0011C9.38953 17.001 9.38953 17.0013 9.38953 17.0011C9.38953 14.4633 11.458 12.3978 14 12.3978C16.542 12.3978 18.6104 14.4628 18.6104 17.0007C18.6104 17.0005 18.6104 17.0008 18.6104 17.0007C18.6106 17.5522 19.0583 17.999 19.6104 17.999C20.1626 17.999 20.6104 17.5525 20.6104 17.0007C20.6104 13.362 17.645 10.401 14 10.401C10.355 10.401 7.38965 13.362 7.38965 17.0016C7.38965 17.5535 7.8374 18 8.38965 18Z" fill="white"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.activeMembersCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('totalActiveMembers')}</p>
                        </span>
                    </div>
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-error flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.69141 3.22229C8.69141 1.44589 7.24365 0 5.46436 0C3.68506 0 2.23779 1.44589 2.23779 3.22229C2.23779 4.9987 3.68506 6.44361 5.46436 6.44361C7.24365 6.44361 8.69141 4.9987 8.69141 3.22229ZM5.46436 1.99675C6.14111 1.99675 6.69141 2.54664 6.69141 3.22229C6.69141 3.89795 6.14111 4.44686 5.46436 4.44686C4.78809 4.44686 4.23779 3.89795 4.23779 3.22229C4.23779 2.54664 4.78809 1.99675 5.46436 1.99675ZM1 14.4238C1.55225 14.4238 2 13.9773 2 13.4254C2 13.1859 2.0271 12.9508 2.07495 12.7212C2.21057 12.0707 2.53113 11.4708 3.01514 10.988C3.67041 10.3338 4.5415 9.974 5.46826 9.974C5.70428 9.974 5.93713 9.99837 6.16113 10.0446C6.38989 10.0917 6.60944 10.1617 6.81299 10.2548C7.3125 10.4781 7.90723 10.2626 8.1377 9.76048C8.36719 9.25934 8.14551 8.66656 7.64307 8.43744C6.98193 8.13617 6.22998 7.97725 5.46826 7.97725C4.00732 7.97725 2.63379 8.54469 1.60107 9.57621C0.568359 10.6068 0 11.9737 0 13.4254C0 13.9773 0.447754 14.4238 1 14.4238ZM19.3086 3.22229C19.3086 4.9987 20.7563 6.44361 22.5356 6.44361C24.3149 6.44361 25.7622 4.9987 25.7622 3.22229C25.7622 1.44589 24.3149 0 22.5356 0C20.7563 0 19.3086 1.44589 19.3086 3.22229ZM22.5356 4.44686C21.8589 4.44686 21.3086 3.89795 21.3086 3.22229C21.3086 2.54664 21.8589 1.99675 22.5356 1.99675C23.2119 1.99675 23.7622 2.54664 23.7622 3.22229C23.7622 3.89795 23.2119 4.44686 22.5356 4.44686ZM22.5317 7.97725C21.77 7.97725 21.0181 8.13617 20.3569 8.43744C19.8545 8.66656 19.6328 9.25934 19.8623 9.76048C20.0918 10.2626 20.6865 10.479 21.187 10.2548C21.3906 10.1617 21.6101 10.0917 21.8389 10.0446C22.0629 9.99837 22.2957 9.974 22.5317 9.974C23.4585 9.974 24.3296 10.3338 24.9849 10.988C25.4689 11.4708 25.7894 12.0707 25.925 12.7212C25.9729 12.9508 26 13.1859 26 13.4254C26 13.9773 26.4478 14.4238 27 14.4238C27.5522 14.4238 28 13.9773 28 13.4254C28 11.9737 27.4316 10.6068 26.3989 9.57621C25.3662 8.54469 23.9927 7.97725 22.5317 7.97725ZM17.7988 4.47221C17.7988 2.38089 16.0947 0.679558 14 0.679558C11.9053 0.679558 10.2012 2.38089 10.2012 4.47221C10.2012 6.56354 11.9053 8.26487 14 8.26487C16.0947 8.26487 17.7988 6.56354 17.7988 4.47221ZM14 2.67631C14.9917 2.67631 15.7988 3.48164 15.7988 4.47221C15.7988 5.46279 14.9917 6.26812 14 6.26812C13.0083 6.26812 12.2012 5.46279 12.2012 4.47221C12.2012 3.48164 13.0083 2.67631 14 2.67631ZM8.38965 18C8.94171 18 9.38928 17.5527 9.38953 17.0011C9.38953 17.001 9.38953 17.0013 9.38953 17.0011C9.38953 14.4633 11.458 12.3978 14 12.3978C16.542 12.3978 18.6104 14.4628 18.6104 17.0007C18.6104 17.0005 18.6104 17.0008 18.6104 17.0007C18.6106 17.5522 19.0583 17.999 19.6104 17.999C20.1626 17.999 20.6104 17.5525 20.6104 17.0007C20.6104 13.362 17.645 10.401 14 10.401C10.355 10.401 7.38965 13.362 7.38965 17.0016C7.38965 17.5535 7.8374 18 8.38965 18Z" fill="white"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.disActiveMembersCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('totalUnActiveMembers')}</p>
                        </span>
                    </div>
                </div>
                <div className="w-full h-full flex lg:flex-row flex-col justify-between items-center gap-3 lg:px-5 p-5 border border-secondary-light bg-primary dark:bg-primary-dark rounded-md shadow">
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-info flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 28 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.466812 0C0.343006 0 0.22427 0.0482399 0.136726 0.134107C0.0491819 0.219973 0 0.336433 0 0.457867V9.78279C0 9.90422 0.0491819 10.0207 0.136726 10.1065C0.22427 10.1924 0.343006 10.2407 0.466812 10.2407H5.57467C5.69847 10.2407 5.81721 10.1924 5.90475 10.1065C5.9923 10.0207 6.04148 9.90422 6.04148 9.78279V9.1088L14.7615 12.0062C14.7735 12.0097 14.7857 12.0128 14.7979 12.0153C15.8128 12.2681 16.9845 12.1179 17.8696 11.5346L26.8996 6.72149C26.9021 6.72151 26.9045 6.72151 26.907 6.72149L27.1283 6.59786C27.4933 6.39598 27.7702 6.06987 27.9067 5.68125C28.0431 5.29263 28.0296 4.86844 27.8687 4.48893C27.582 3.82502 27.0191 3.52008 26.5793 3.4569V3.45323C26.3111 3.41598 26.0378 3.43629 25.7783 3.51275C25.7627 3.51836 25.7474 3.52478 25.7325 3.53199L20.7545 5.7966C20.761 5.73433 20.775 5.67572 20.775 5.61253C20.775 4.58325 19.9067 3.74718 18.8527 3.74718H14.7074C14.6906 3.71605 14.67 3.67209 14.6532 3.64279C14.4318 3.24967 14.1528 2.89054 13.8251 2.57688C12.9156 1.70753 11.6947 1.22287 10.4248 1.22708H6.04148V0.457867C6.04148 0.336433 5.9923 0.219973 5.90475 0.134107C5.81721 0.0482399 5.69847 0 5.57467 0H0.466812ZM0.933624 0.915734H5.10785V9.32492H0.933624V0.915734ZM6.04054 2.14282H10.4248C11.0564 2.14018 11.6791 2.28787 12.2396 2.57321C12.8002 2.85855 13.2817 3.27302 13.643 3.78107C13.7121 3.87997 13.7775 3.98161 13.8363 4.08692C13.9101 4.21604 13.9595 4.29571 13.9988 4.38545L14.1192 4.66292H18.8527C19.4128 4.66292 19.8414 5.08232 19.8414 5.61253C19.8414 6.00996 19.5996 6.34237 19.2438 6.48523L19.2373 6.48706C19.1197 6.53285 18.9908 6.56032 18.8527 6.56032H12.3593V7.47605H18.8527C19.0487 7.47605 19.2326 7.43759 19.411 7.38448C19.4665 7.38084 19.5208 7.36751 19.5716 7.3451L26.0864 4.38179C26.0948 4.38179 26.2488 4.33234 26.444 4.36072C26.6447 4.3882 26.8361 4.44314 27.0097 4.84332C27.0851 5.01556 27.0918 5.20929 27.0286 5.38616C26.9653 5.56303 26.8366 5.71015 26.668 5.79843L26.4496 5.91747L17.3869 10.7507C17.3737 10.7577 17.361 10.7654 17.3486 10.7736C16.7324 11.1802 15.7764 11.3139 15.0295 11.128H15.0276L6.04148 8.14271L6.04054 2.14282Z" fill="white"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.servicesCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('totalServices')}</p>
                        </span>
                    </div>
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-success flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 28 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.466812 0C0.343006 0 0.22427 0.0482399 0.136726 0.134107C0.0491819 0.219973 0 0.336433 0 0.457867V9.78279C0 9.90422 0.0491819 10.0207 0.136726 10.1065C0.22427 10.1924 0.343006 10.2407 0.466812 10.2407H5.57467C5.69847 10.2407 5.81721 10.1924 5.90475 10.1065C5.9923 10.0207 6.04148 9.90422 6.04148 9.78279V9.1088L14.7615 12.0062C14.7735 12.0097 14.7857 12.0128 14.7979 12.0153C15.8128 12.2681 16.9845 12.1179 17.8696 11.5346L26.8996 6.72149C26.9021 6.72151 26.9045 6.72151 26.907 6.72149L27.1283 6.59786C27.4933 6.39598 27.7702 6.06987 27.9067 5.68125C28.0431 5.29263 28.0296 4.86844 27.8687 4.48893C27.582 3.82502 27.0191 3.52008 26.5793 3.4569V3.45323C26.3111 3.41598 26.0378 3.43629 25.7783 3.51275C25.7627 3.51836 25.7474 3.52478 25.7325 3.53199L20.7545 5.7966C20.761 5.73433 20.775 5.67572 20.775 5.61253C20.775 4.58325 19.9067 3.74718 18.8527 3.74718H14.7074C14.6906 3.71605 14.67 3.67209 14.6532 3.64279C14.4318 3.24967 14.1528 2.89054 13.8251 2.57688C12.9156 1.70753 11.6947 1.22287 10.4248 1.22708H6.04148V0.457867C6.04148 0.336433 5.9923 0.219973 5.90475 0.134107C5.81721 0.0482399 5.69847 0 5.57467 0H0.466812ZM0.933624 0.915734H5.10785V9.32492H0.933624V0.915734ZM6.04054 2.14282H10.4248C11.0564 2.14018 11.6791 2.28787 12.2396 2.57321C12.8002 2.85855 13.2817 3.27302 13.643 3.78107C13.7121 3.87997 13.7775 3.98161 13.8363 4.08692C13.9101 4.21604 13.9595 4.29571 13.9988 4.38545L14.1192 4.66292H18.8527C19.4128 4.66292 19.8414 5.08232 19.8414 5.61253C19.8414 6.00996 19.5996 6.34237 19.2438 6.48523L19.2373 6.48706C19.1197 6.53285 18.9908 6.56032 18.8527 6.56032H12.3593V7.47605H18.8527C19.0487 7.47605 19.2326 7.43759 19.411 7.38448C19.4665 7.38084 19.5208 7.36751 19.5716 7.3451L26.0864 4.38179C26.0948 4.38179 26.2488 4.33234 26.444 4.36072C26.6447 4.3882 26.8361 4.44314 27.0097 4.84332C27.0851 5.01556 27.0918 5.20929 27.0286 5.38616C26.9653 5.56303 26.8366 5.71015 26.668 5.79843L26.4496 5.91747L17.3869 10.7507C17.3737 10.7577 17.361 10.7654 17.3486 10.7736C16.7324 11.1802 15.7764 11.3139 15.0295 11.128H15.0276L6.04148 8.14271L6.04054 2.14282Z" fill="white"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.activeServicesCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('totalActiveServices')}</p>
                        </span>
                    </div>
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-error flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 28 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.466812 0C0.343006 0 0.22427 0.0482399 0.136726 0.134107C0.0491819 0.219973 0 0.336433 0 0.457867V9.78279C0 9.90422 0.0491819 10.0207 0.136726 10.1065C0.22427 10.1924 0.343006 10.2407 0.466812 10.2407H5.57467C5.69847 10.2407 5.81721 10.1924 5.90475 10.1065C5.9923 10.0207 6.04148 9.90422 6.04148 9.78279V9.1088L14.7615 12.0062C14.7735 12.0097 14.7857 12.0128 14.7979 12.0153C15.8128 12.2681 16.9845 12.1179 17.8696 11.5346L26.8996 6.72149C26.9021 6.72151 26.9045 6.72151 26.907 6.72149L27.1283 6.59786C27.4933 6.39598 27.7702 6.06987 27.9067 5.68125C28.0431 5.29263 28.0296 4.86844 27.8687 4.48893C27.582 3.82502 27.0191 3.52008 26.5793 3.4569V3.45323C26.3111 3.41598 26.0378 3.43629 25.7783 3.51275C25.7627 3.51836 25.7474 3.52478 25.7325 3.53199L20.7545 5.7966C20.761 5.73433 20.775 5.67572 20.775 5.61253C20.775 4.58325 19.9067 3.74718 18.8527 3.74718H14.7074C14.6906 3.71605 14.67 3.67209 14.6532 3.64279C14.4318 3.24967 14.1528 2.89054 13.8251 2.57688C12.9156 1.70753 11.6947 1.22287 10.4248 1.22708H6.04148V0.457867C6.04148 0.336433 5.9923 0.219973 5.90475 0.134107C5.81721 0.0482399 5.69847 0 5.57467 0H0.466812ZM0.933624 0.915734H5.10785V9.32492H0.933624V0.915734ZM6.04054 2.14282H10.4248C11.0564 2.14018 11.6791 2.28787 12.2396 2.57321C12.8002 2.85855 13.2817 3.27302 13.643 3.78107C13.7121 3.87997 13.7775 3.98161 13.8363 4.08692C13.9101 4.21604 13.9595 4.29571 13.9988 4.38545L14.1192 4.66292H18.8527C19.4128 4.66292 19.8414 5.08232 19.8414 5.61253C19.8414 6.00996 19.5996 6.34237 19.2438 6.48523L19.2373 6.48706C19.1197 6.53285 18.9908 6.56032 18.8527 6.56032H12.3593V7.47605H18.8527C19.0487 7.47605 19.2326 7.43759 19.411 7.38448C19.4665 7.38084 19.5208 7.36751 19.5716 7.3451L26.0864 4.38179C26.0948 4.38179 26.2488 4.33234 26.444 4.36072C26.6447 4.3882 26.8361 4.44314 27.0097 4.84332C27.0851 5.01556 27.0918 5.20929 27.0286 5.38616C26.9653 5.56303 26.8366 5.71015 26.668 5.79843L26.4496 5.91747L17.3869 10.7507C17.3737 10.7577 17.361 10.7654 17.3486 10.7736C16.7324 11.1802 15.7764 11.3139 15.0295 11.128H15.0276L6.04148 8.14271L6.04054 2.14282Z" fill="white"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.disActiveServicesCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('totalUnActiveServices')}</p>
                        </span>
                    </div>
                </div>
                <div className="w-full h-full flex lg:flex-row flex-col justify-between items-center gap-3 lg:px-5 p-5 border border-secondary-light bg-primary dark:bg-primary-dark rounded-md shadow">
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-info flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10.5045 31.7874C10.5348 31.8115 10.5693 31.8292 10.5998 31.8532C10.7647 31.9805 10.943 32.0872 11.1128 32.2075C11.4932 32.4797 11.874 32.7502 12.2768 32.9832C12.2895 32.9904 12.3032 32.9955 12.3158 33.0029C12.8205 33.2929 13.336 33.5632 13.8722 33.7894L14.048 33.8625C14.297 33.9667 14.5395 34.0675 14.8147 34.1637C15.5243 34.4014 16.1282 34.5657 16.706 34.6829C17.0753 34.7592 17.4262 34.8167 17.76 34.8605C17.811 34.8675 17.8632 34.8692 17.9143 34.8755C18.148 34.9032 18.3815 34.9304 18.5908 34.9415C18.9795 34.9807 19.388 35.0002 19.777 35.0002C28.0485 35.0002 34.777 28.2717 34.777 20.0002C34.777 19.079 34.0315 18.3335 33.1103 18.3335C32.1892 18.3335 31.4437 19.079 31.4437 20.0002C31.4437 26.4325 26.2093 31.6669 19.777 31.6669C19.396 31.6669 19.0208 31.6282 18.6458 31.5914C18.3745 31.5695 18.0815 31.5234 17.7855 31.4732C17.5233 31.4274 17.2617 31.3789 17.0043 31.3155C16.8143 31.2695 16.6328 31.2175 16.45 31.1634C15.5797 30.9029 14.7393 30.5564 13.956 30.1054C13.952 30.103 13.9478 30.1015 13.9438 30.0992C13.6425 29.9254 13.3605 29.7207 13.0757 29.5207C12.9278 29.4154 12.7732 29.3247 12.6293 29.2117C12.469 29.0875 12.3242 28.9439 12.1702 28.8114C11.9348 28.6065 11.6948 28.4059 11.4727 28.1852C11.3623 28.0737 11.2665 27.9475 11.1605 27.8314L14.1457 27.2935C15.0507 27.1292 15.6528 26.2632 15.49 25.3567C15.3257 24.4517 14.4712 23.8495 13.5532 24.0124L6.5935 25.2672C6.159 25.3454 5.77317 25.5944 5.52083 25.9574C5.2685 26.3204 5.17083 26.7679 5.249 27.204L6.50383 34.162C6.65033 34.9677 7.35183 35.5325 8.14283 35.5325C8.2405 35.5325 8.33983 35.5244 8.44067 35.5065C9.34567 35.3422 9.94783 34.4762 9.785 33.5697L9.265 30.6892C9.27767 30.7015 9.29233 30.7117 9.305 30.724C9.72217 31.1282 10.115 31.4822 10.5045 31.7874ZM29.2725 8.21304C29.2432 8.18971 29.21 8.17271 29.1805 8.14954C29.0075 8.01588 28.8207 7.90354 28.6422 7.77771C28.27 7.51238 27.8982 7.24738 27.5045 7.01938C27.4757 7.00271 27.4442 6.99088 27.4152 6.97438C26.9245 6.69471 26.4253 6.43071 25.905 6.21121L25.7292 6.13804C25.4802 6.03388 25.2377 5.93304 24.9625 5.83688C24.2512 5.59921 23.6473 5.43321 23.0697 5.31771C22.702 5.24138 22.3515 5.18388 22.0177 5.13988C21.9668 5.13288 21.9152 5.13138 21.8643 5.12488C21.6305 5.09721 21.3968 5.07004 21.1867 5.05888C20.7975 5.01971 20.389 5.00021 20 5.00021C11.7285 5.00021 5 11.7287 5 20.0002C5 20.9214 5.7455 21.6669 6.66667 21.6669C7.58783 21.6669 8.33333 20.9214 8.33333 20.0002C8.33333 13.5679 13.5677 8.33354 20 8.33354C20.381 8.33354 20.7562 8.37221 21.1312 8.40904C21.4025 8.43088 21.6955 8.47704 21.9915 8.52721C22.2538 8.57304 22.5153 8.62154 22.7727 8.68488C22.9627 8.73104 23.1442 8.78304 23.327 8.83704C24.5443 9.20154 25.6875 9.76371 26.7213 10.493C26.8608 10.5929 27.0077 10.6785 27.1437 10.7854C27.303 10.9087 27.4468 11.0519 27.6 11.1834C27.839 11.3914 28.0817 11.595 28.3095 11.8215C28.4177 11.9312 28.5122 12.055 28.6162 12.1692L25.6315 12.7069C24.7265 12.8712 24.1243 13.7372 24.2872 14.6437C24.4337 15.4494 25.1352 16.0142 25.9262 16.0142C26.0238 16.0142 26.1232 16.006 26.224 15.9882L33.1837 14.7334C33.6182 14.6552 34.004 14.4062 34.2563 14.0432C34.5087 13.6802 34.6063 13.2327 34.5282 12.7965L33.2733 5.83854C33.109 4.93354 32.2512 4.32821 31.3365 4.49421C30.4315 4.65854 29.8293 5.52454 29.9922 6.43104L30.5123 9.31104C30.4922 9.29104 30.4687 9.27504 30.4483 9.25521C30.0412 8.86204 29.656 8.51521 29.2725 8.21304Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.activeSubscriptionsCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('totalActiveSubscriptions')}</p>
                        </span>
                    </div>
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-warning flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10.5045 31.7874C10.5348 31.8115 10.5693 31.8292 10.5998 31.8532C10.7647 31.9805 10.943 32.0872 11.1128 32.2075C11.4932 32.4797 11.874 32.7502 12.2768 32.9832C12.2895 32.9904 12.3032 32.9955 12.3158 33.0029C12.8205 33.2929 13.336 33.5632 13.8722 33.7894L14.048 33.8625C14.297 33.9667 14.5395 34.0675 14.8147 34.1637C15.5243 34.4014 16.1282 34.5657 16.706 34.6829C17.0753 34.7592 17.4262 34.8167 17.76 34.8605C17.811 34.8675 17.8632 34.8692 17.9143 34.8755C18.148 34.9032 18.3815 34.9304 18.5908 34.9415C18.9795 34.9807 19.388 35.0002 19.777 35.0002C28.0485 35.0002 34.777 28.2717 34.777 20.0002C34.777 19.079 34.0315 18.3335 33.1103 18.3335C32.1892 18.3335 31.4437 19.079 31.4437 20.0002C31.4437 26.4325 26.2093 31.6669 19.777 31.6669C19.396 31.6669 19.0208 31.6282 18.6458 31.5914C18.3745 31.5695 18.0815 31.5234 17.7855 31.4732C17.5233 31.4274 17.2617 31.3789 17.0043 31.3155C16.8143 31.2695 16.6328 31.2175 16.45 31.1634C15.5797 30.9029 14.7393 30.5564 13.956 30.1054C13.952 30.103 13.9478 30.1015 13.9438 30.0992C13.6425 29.9254 13.3605 29.7207 13.0757 29.5207C12.9278 29.4154 12.7732 29.3247 12.6293 29.2117C12.469 29.0875 12.3242 28.9439 12.1702 28.8114C11.9348 28.6065 11.6948 28.4059 11.4727 28.1852C11.3623 28.0737 11.2665 27.9475 11.1605 27.8314L14.1457 27.2935C15.0507 27.1292 15.6528 26.2632 15.49 25.3567C15.3257 24.4517 14.4712 23.8495 13.5532 24.0124L6.5935 25.2672C6.159 25.3454 5.77317 25.5944 5.52083 25.9574C5.2685 26.3204 5.17083 26.7679 5.249 27.204L6.50383 34.162C6.65033 34.9677 7.35183 35.5325 8.14283 35.5325C8.2405 35.5325 8.33983 35.5244 8.44067 35.5065C9.34567 35.3422 9.94783 34.4762 9.785 33.5697L9.265 30.6892C9.27767 30.7015 9.29233 30.7117 9.305 30.724C9.72217 31.1282 10.115 31.4822 10.5045 31.7874ZM29.2725 8.21304C29.2432 8.18971 29.21 8.17271 29.1805 8.14954C29.0075 8.01588 28.8207 7.90354 28.6422 7.77771C28.27 7.51238 27.8982 7.24738 27.5045 7.01938C27.4757 7.00271 27.4442 6.99088 27.4152 6.97438C26.9245 6.69471 26.4253 6.43071 25.905 6.21121L25.7292 6.13804C25.4802 6.03388 25.2377 5.93304 24.9625 5.83688C24.2512 5.59921 23.6473 5.43321 23.0697 5.31771C22.702 5.24138 22.3515 5.18388 22.0177 5.13988C21.9668 5.13288 21.9152 5.13138 21.8643 5.12488C21.6305 5.09721 21.3968 5.07004 21.1867 5.05888C20.7975 5.01971 20.389 5.00021 20 5.00021C11.7285 5.00021 5 11.7287 5 20.0002C5 20.9214 5.7455 21.6669 6.66667 21.6669C7.58783 21.6669 8.33333 20.9214 8.33333 20.0002C8.33333 13.5679 13.5677 8.33354 20 8.33354C20.381 8.33354 20.7562 8.37221 21.1312 8.40904C21.4025 8.43088 21.6955 8.47704 21.9915 8.52721C22.2538 8.57304 22.5153 8.62154 22.7727 8.68488C22.9627 8.73104 23.1442 8.78304 23.327 8.83704C24.5443 9.20154 25.6875 9.76371 26.7213 10.493C26.8608 10.5929 27.0077 10.6785 27.1437 10.7854C27.303 10.9087 27.4468 11.0519 27.6 11.1834C27.839 11.3914 28.0817 11.595 28.3095 11.8215C28.4177 11.9312 28.5122 12.055 28.6162 12.1692L25.6315 12.7069C24.7265 12.8712 24.1243 13.7372 24.2872 14.6437C24.4337 15.4494 25.1352 16.0142 25.9262 16.0142C26.0238 16.0142 26.1232 16.006 26.224 15.9882L33.1837 14.7334C33.6182 14.6552 34.004 14.4062 34.2563 14.0432C34.5087 13.6802 34.6063 13.2327 34.5282 12.7965L33.2733 5.83854C33.109 4.93354 32.2512 4.32821 31.3365 4.49421C30.4315 4.65854 29.8293 5.52454 29.9922 6.43104L30.5123 9.31104C30.4922 9.29104 30.4687 9.27504 30.4483 9.25521C30.0412 8.86204 29.656 8.51521 29.2725 8.21304Z" fill="currentColor"/>
                            </svg>
                        </span>

                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.expiredSoonSubscriptionsCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('expiredSoonSubscriptionsCount')}</p>
                        </span>
                    </div>
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md bg-error flex items-center justify-center">
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10.5045 31.7874C10.5348 31.8115 10.5693 31.8292 10.5998 31.8532C10.7647 31.9805 10.943 32.0872 11.1128 32.2075C11.4932 32.4797 11.874 32.7502 12.2768 32.9832C12.2895 32.9904 12.3032 32.9955 12.3158 33.0029C12.8205 33.2929 13.336 33.5632 13.8722 33.7894L14.048 33.8625C14.297 33.9667 14.5395 34.0675 14.8147 34.1637C15.5243 34.4014 16.1282 34.5657 16.706 34.6829C17.0753 34.7592 17.4262 34.8167 17.76 34.8605C17.811 34.8675 17.8632 34.8692 17.9143 34.8755C18.148 34.9032 18.3815 34.9304 18.5908 34.9415C18.9795 34.9807 19.388 35.0002 19.777 35.0002C28.0485 35.0002 34.777 28.2717 34.777 20.0002C34.777 19.079 34.0315 18.3335 33.1103 18.3335C32.1892 18.3335 31.4437 19.079 31.4437 20.0002C31.4437 26.4325 26.2093 31.6669 19.777 31.6669C19.396 31.6669 19.0208 31.6282 18.6458 31.5914C18.3745 31.5695 18.0815 31.5234 17.7855 31.4732C17.5233 31.4274 17.2617 31.3789 17.0043 31.3155C16.8143 31.2695 16.6328 31.2175 16.45 31.1634C15.5797 30.9029 14.7393 30.5564 13.956 30.1054C13.952 30.103 13.9478 30.1015 13.9438 30.0992C13.6425 29.9254 13.3605 29.7207 13.0757 29.5207C12.9278 29.4154 12.7732 29.3247 12.6293 29.2117C12.469 29.0875 12.3242 28.9439 12.1702 28.8114C11.9348 28.6065 11.6948 28.4059 11.4727 28.1852C11.3623 28.0737 11.2665 27.9475 11.1605 27.8314L14.1457 27.2935C15.0507 27.1292 15.6528 26.2632 15.49 25.3567C15.3257 24.4517 14.4712 23.8495 13.5532 24.0124L6.5935 25.2672C6.159 25.3454 5.77317 25.5944 5.52083 25.9574C5.2685 26.3204 5.17083 26.7679 5.249 27.204L6.50383 34.162C6.65033 34.9677 7.35183 35.5325 8.14283 35.5325C8.2405 35.5325 8.33983 35.5244 8.44067 35.5065C9.34567 35.3422 9.94783 34.4762 9.785 33.5697L9.265 30.6892C9.27767 30.7015 9.29233 30.7117 9.305 30.724C9.72217 31.1282 10.115 31.4822 10.5045 31.7874ZM29.2725 8.21304C29.2432 8.18971 29.21 8.17271 29.1805 8.14954C29.0075 8.01588 28.8207 7.90354 28.6422 7.77771C28.27 7.51238 27.8982 7.24738 27.5045 7.01938C27.4757 7.00271 27.4442 6.99088 27.4152 6.97438C26.9245 6.69471 26.4253 6.43071 25.905 6.21121L25.7292 6.13804C25.4802 6.03388 25.2377 5.93304 24.9625 5.83688C24.2512 5.59921 23.6473 5.43321 23.0697 5.31771C22.702 5.24138 22.3515 5.18388 22.0177 5.13988C21.9668 5.13288 21.9152 5.13138 21.8643 5.12488C21.6305 5.09721 21.3968 5.07004 21.1867 5.05888C20.7975 5.01971 20.389 5.00021 20 5.00021C11.7285 5.00021 5 11.7287 5 20.0002C5 20.9214 5.7455 21.6669 6.66667 21.6669C7.58783 21.6669 8.33333 20.9214 8.33333 20.0002C8.33333 13.5679 13.5677 8.33354 20 8.33354C20.381 8.33354 20.7562 8.37221 21.1312 8.40904C21.4025 8.43088 21.6955 8.47704 21.9915 8.52721C22.2538 8.57304 22.5153 8.62154 22.7727 8.68488C22.9627 8.73104 23.1442 8.78304 23.327 8.83704C24.5443 9.20154 25.6875 9.76371 26.7213 10.493C26.8608 10.5929 27.0077 10.6785 27.1437 10.7854C27.303 10.9087 27.4468 11.0519 27.6 11.1834C27.839 11.3914 28.0817 11.595 28.3095 11.8215C28.4177 11.9312 28.5122 12.055 28.6162 12.1692L25.6315 12.7069C24.7265 12.8712 24.1243 13.7372 24.2872 14.6437C24.4337 15.4494 25.1352 16.0142 25.9262 16.0142C26.0238 16.0142 26.1232 16.006 26.224 15.9882L33.1837 14.7334C33.6182 14.6552 34.004 14.4062 34.2563 14.0432C34.5087 13.6802 34.6063 13.2327 34.5282 12.7965L33.2733 5.83854C33.109 4.93354 32.2512 4.32821 31.3365 4.49421C30.4315 4.65854 29.8293 5.52454 29.9922 6.43104L30.5123 9.31104C30.4922 9.29104 30.4687 9.27504 30.4483 9.25521C30.0412 8.86204 29.656 8.51521 29.2725 8.21304Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{report?.expiredSubscriptionsCount.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{t('totalExpiredSubscriptions')}</p>
                        </span>
                    </div>
                </div>
            </div>
        </>
    )
}