admin panel
This commit is contained in:
hamid zarghami
@@ -0,0 +1,218 @@
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import Table from '@/components/Table'
|
||||
import { ColumnType } from '@/components/types/TableTypes'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/components/Button'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { AddressData, CreateAddressType } from './types/Types'
|
||||
import { useGetDomains } from '../domain/hooks/useDomainData'
|
||||
import { yupResolver } from "@hookform/resolvers/yup"
|
||||
import * as yup from "yup"
|
||||
import { useCreateAddress, useGetAddress } from './hooks/useAddressData'
|
||||
import { toast } from '@/components/Toast'
|
||||
import { ErrorType } from '@/helpers/types'
|
||||
import ProgressBarEmail from './components/ProgressBarEmail'
|
||||
import ToggleStatus from './components/ToggleStatus'
|
||||
|
||||
|
||||
|
||||
const Address: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const schema = yup.object().shape({
|
||||
title: yup.string().required(t('errors.required')),
|
||||
username: yup.string().required(t('errors.required')),
|
||||
password: yup.string().required(t('errors.required')),
|
||||
domainId: yup.string().required(t('errors.required')),
|
||||
})
|
||||
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const [status, setStatus] = useState<string>('all')
|
||||
|
||||
const { data: domain } = useGetDomains()
|
||||
const { mutate: createAddress, isPending } = useCreateAddress()
|
||||
const { data: addresses, isPending: isPendingAddress } = useGetAddress(search, status)
|
||||
const { register, handleSubmit, formState: { errors },
|
||||
} = useForm<CreateAddressType>({
|
||||
resolver: yupResolver(schema),
|
||||
defaultValues: {
|
||||
domainId: domain?.data?.domain?.id || '',
|
||||
}
|
||||
})
|
||||
|
||||
const columns: ColumnType<AddressData>[] = [
|
||||
{
|
||||
title: t('setting.address_title'),
|
||||
key: 'title',
|
||||
width: '200px'
|
||||
},
|
||||
{
|
||||
title: t('setting.email'),
|
||||
key: 'email',
|
||||
width: '300px',
|
||||
render: (item: AddressData) => (
|
||||
<div key={item.id} className='dltr flex justify-end'>
|
||||
{item.emailAddress}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: t('setting.quota'),
|
||||
key: 'quota',
|
||||
width: '300px',
|
||||
render: (item: AddressData) => {
|
||||
|
||||
return (
|
||||
<ProgressBarEmail key={item.id} item={item} />
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('setting.status'),
|
||||
key: 'status',
|
||||
width: '120px',
|
||||
align: 'center',
|
||||
render: (item: AddressData) => (
|
||||
<div key={item.id} className='dltr flex justify-end'>
|
||||
<ToggleStatus defaultStatus={item.isActive} id={item.id} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'all', label: 'همه' },
|
||||
{ value: 'active', label: t('setting.active') },
|
||||
{ value: 'inactive', label: t('setting.inactive') }
|
||||
]
|
||||
|
||||
const onSubmit = (params: CreateAddressType) => {
|
||||
createAddress(params, {
|
||||
onSuccess: (data) => {
|
||||
toast(data?.data?.message, 'success')
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast(error.response?.data?.error?.message[0], 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex xl:flex-row flex-col-reverse gap-8 mt-8'>
|
||||
<div className='flex-1'>
|
||||
<div className='flex gap-2 justify-between'>
|
||||
<div>
|
||||
<Select
|
||||
placeholder={t('setting.status')}
|
||||
items={statusOptions}
|
||||
className='w-[120px]'
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-1'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('setting.search')}
|
||||
className='xl:w-[300px] flex-1'
|
||||
onChangeSearchFinal={(e) => setSearch(e)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
isLoading={isPendingAddress}
|
||||
columns={columns}
|
||||
data={addresses?.data?.users}
|
||||
pagination={{
|
||||
currentPage: 1,
|
||||
totalPages: 6,
|
||||
onPageChange: (page) => console.log('Page:', page)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='xl:w-[350px] w-full bg-white rounded-4xl p-8'>
|
||||
<div>
|
||||
{t('setting.add_address')}
|
||||
</div>
|
||||
|
||||
{/* <div className='mt-8 flex items-center justify-between'>
|
||||
<div>
|
||||
{t('setting.status')}
|
||||
</div>
|
||||
<div className='dltr pt-2'>
|
||||
<Switch />
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('setting.domain1')}
|
||||
value={domain?.data?.domain?.name}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('setting.title1')}
|
||||
{...register('title')}
|
||||
error_text={errors.title?.message}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 relative'>
|
||||
<Input
|
||||
label={t('setting.username')}
|
||||
className='text-left'
|
||||
{...register('username')}
|
||||
error_text={errors.username?.message}
|
||||
/>
|
||||
<div className='absolute flex items-center dltr text-xs z-10 right-[1px] top-[29px] rounded-r-2.5 h-[38px] bg-[#EBEEF5] px-3'>
|
||||
@ {domain?.data?.domain?.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('setting.password')}
|
||||
type='password'
|
||||
{...register('password')}
|
||||
error_text={errors.password?.message}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-2 text-xs'>
|
||||
<div>رمز عبور میبایست:</div>
|
||||
<ul className='list-disc pr-3 mt-1 flex flex-col gap-1'>
|
||||
<li>حداقل ۸ کاراکتر باشد</li>
|
||||
<li>ترکیبی از حروف کوچک و بزرگ باشد</li>
|
||||
<li>شامل اعداد باشد</li>
|
||||
<li>شامل کاراکتر های خاص (نماد ها) باشد</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='mt-9 flex justify-end'>
|
||||
<Button
|
||||
className='w-fit px-20'
|
||||
onClick={handleSubmit(onSubmit)}
|
||||
loading={isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('setting.create')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Address
|
||||
@@ -0,0 +1,33 @@
|
||||
import { convertToGB } from '@/config/func'
|
||||
import { FC } from 'react'
|
||||
import { AddressData } from '../types/Types'
|
||||
|
||||
const ProgressBarEmail: FC<{ item: AddressData }> = ({ item }) => {
|
||||
const usedQuota = item.emailQuotaUsed || 0;
|
||||
const totalQuota = item.emailQuota || 0;
|
||||
const percentage = Math.min((usedQuota / totalQuota) * 100, 100);
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='flex justify-between text-sm'>
|
||||
<span className='text-gray-600 dltr'>
|
||||
{convertToGB(usedQuota)} GB / {convertToGB(totalQuota)} GB
|
||||
</span>
|
||||
{/* <span className='text-gray-500'>
|
||||
{percentage.toFixed(1)}%
|
||||
</span> */}
|
||||
</div>
|
||||
<div className='w-full bg-gray-200 dltr overflow-hidden rounded-full h-2'>
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all duration-300 ${percentage > 90 ? 'bg-red-500' :
|
||||
percentage > 70 ? 'bg-yellow-500' :
|
||||
'bg-green-500'
|
||||
}`}
|
||||
style={{ width: `${percentage}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProgressBarEmail
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { FC, useState } from 'react'
|
||||
import { useToggleStatus } from '../hooks/useAddressData'
|
||||
|
||||
const ToggleStatus: FC<{ defaultStatus: boolean, id: string }> = ({ defaultStatus, id }) => {
|
||||
const [isActive, setIsActive] = useState(defaultStatus)
|
||||
const { mutate: toggleStatus } = useToggleStatus()
|
||||
|
||||
const handleToggleStatus = () => {
|
||||
toggleStatus(id)
|
||||
setIsActive(!isActive)
|
||||
}
|
||||
return (
|
||||
<Switch checked={isActive} onCheckedChange={handleToggleStatus} />
|
||||
)
|
||||
}
|
||||
|
||||
export default ToggleStatus
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/Service";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
export const useGetAddress = (search: string, status: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["address", search, status],
|
||||
queryFn: () => api.getAddress(search, status),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateAddress = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: api.createAddress,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["address"] });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useToggleStatus = () => {
|
||||
return useMutation({
|
||||
mutationFn: api.toggleStatus,
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
import axios from "@/config/axios";
|
||||
import { CreateAddressType } from "../types/Types";
|
||||
|
||||
export const getAddress = async (search: string, status: string) => {
|
||||
const query = new URLSearchParams();
|
||||
if (search) query.set("q", search);
|
||||
if (status && status !== "all")
|
||||
query.set("isActive", status === "active" ? "1" : "0");
|
||||
const { data } = await axios.get(`/users?${query.toString()}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createAddress = async (params: CreateAddressType) => {
|
||||
const { data } = await axios.post(`/users`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const toggleStatus = async (id: string) => {
|
||||
const { data } = await axios.patch(`/users/${id}/toggle-status`);
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,58 @@
|
||||
export type CreateAddressType = {
|
||||
username: string;
|
||||
password: string;
|
||||
domainId: string;
|
||||
title: string;
|
||||
};
|
||||
|
||||
export interface AddressData extends Record<string, unknown> {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
title: string;
|
||||
userName: string;
|
||||
password: string;
|
||||
emailAddress: string;
|
||||
emailEnabled: boolean;
|
||||
emailQuota: number;
|
||||
emailQuotaUsed: number;
|
||||
emailAccountId: string;
|
||||
displayName: string;
|
||||
isActive: boolean;
|
||||
emailSignature: string | null;
|
||||
role: string;
|
||||
business: {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
danakSubscriptionId: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
logoUrl: string | null;
|
||||
domain: string;
|
||||
};
|
||||
domain: {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
name: string;
|
||||
status: string;
|
||||
isVerified: boolean;
|
||||
isActive: boolean;
|
||||
verifiedAt: string;
|
||||
lastCheckedAt: string | null;
|
||||
notes: string;
|
||||
dkimEnabled: boolean;
|
||||
dkimSelector: string;
|
||||
dkimPrivateKey: string;
|
||||
dkimPublicKey: string;
|
||||
spfEnabled: boolean;
|
||||
spfRecord: string | null;
|
||||
dmarcEnabled: boolean;
|
||||
dmarcPolicy: string | null;
|
||||
business: string;
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user