list icon and delete icon

src/pages/icon/List.tsx

@@ -1,23 +1,51 @@
 import { useState, type FC } from 'react'
-import { useGetIcons } from './hooks/useIconData'
+import { useGetIcons, useDeleteIcon } from './hooks/useIconData'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { Add } from 'iconsax-react'
 import CreateIcon from './components/CreateIcon'
+import Td from '../../components/Td'
+import Input from '../../components/Input'
+import PageLoading from '../../components/PageLoading'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import { IconType } from './types/Types'
+import moment from 'moment-jalaali'
 
 const IconsList: FC = () => {
 
     const { t } = useTranslation('global')
     const [showModal, setShowModal] = useState<boolean>(false)
-    const { refetch } = useGetIcons()
+    const [search, setSearch] = useState<string>('')
+    const { data: iconsData, isLoading, refetch } = useGetIcons()
+    const deleteIcon = useDeleteIcon()
 
     const handleCloseModal = () => {
         setShowModal(false)
         refetch()
     }
 
+    const handleDelete = (id: string) => {
+        deleteIcon.mutate(id, {
+            onSuccess: () => {
+                refetch()
+                toast.success(t('success'))
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const icons = (iconsData as unknown as { data?: IconType[] })?.data || []
+    const filteredIcons = icons.filter((icon: IconType) =>
+        icon.url.toLowerCase().includes(search.toLowerCase()) ||
+        icon.group?.name?.toLowerCase().includes(search.toLowerCase())
+    )
+
     return (
-        <div className='mt-4'>
+        <div className='mt-4 min-h-[500px]'>
             <div className='flex justify-between items-center'>
                 <div>
                     {t('icon.list_icon')}
@@ -36,6 +64,75 @@ const IconsList: FC = () => {
                 </Button>
             </div>
 
+            <div className='mt-4'>
+                <div className='flex justify-end items-center'>
+                    <div className='xl:w-[300px] w-full'>
+                        <Input
+                            variant='search'
+                            placeholder={t('ads.search')}
+                            className='bg-white w-full'
+                            onChangeSearchFinal={(value) => setSearch(value)}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {
+                isLoading ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm'>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={t('icon.url')} />
+                                    <Td text={t('icon.group')} />
+                                    <Td text={t('icon.created_at')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    filteredIcons.map((item: IconType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={''}>
+                                                    <div className='flex items-center gap-3'>
+                                                        <div className='size-10 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center'>
+                                                            <img
+                                                                src={item.url}
+                                                                alt={item.url}
+                                                                className='size-full object-contain'
+                                                                onError={(e) => {
+                                                                    const target = e.target as HTMLImageElement
+                                                                    target.style.display = 'none'
+                                                                }}
+                                                            />
+                                                        </div>
+                                                        <div className='truncate max-w-xs' title={item.url}>
+                                                            {item.url}
+                                                        </div>
+                                                    </div>
+                                                </Td>
+                                                <Td text={item.group?.name || '-'} />
+                                                <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
+                                                <Td text={''}>
+                                                    <div className='flex gap-2 items-center'>
+                                                        <TrashWithConfrim
+                                                            onDelete={() => handleDelete(item.id)}
+                                                            isLoading={deleteIcon.isPending}
+                                                        />
+                                                    </div>
+                                                </Td>
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
             <CreateIcon
                 open={showModal}
                 close={handleCloseModal}

src/pages/icon/hooks/useIconData.ts

@@ -33,3 +33,9 @@ export const useCreateIcon = () => {
     mutationFn: api.createIcon,
   });
 };
+
+export const useDeleteIcon = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteIcon(id),
+  });
+};

src/pages/icon/service/IconService.ts

@@ -3,9 +3,10 @@ import {
   CreateGroupIconType,
   CreateIconType,
   GroupIconsResponse,
+  IconsResponse,
 } from "../types/Types";
 
-export const getIcons = async () => {
+export const getIcons = async (): Promise<IconsResponse> => {
   const { data } = await axios.get("/admin/icons");
   return data;
 };
@@ -29,3 +30,8 @@ export const createIcon = async (params: CreateIconType) => {
   const { data } = await axios.post("/admin/icons", params);
   return data;
 };
+
+export const deleteIcon = async (id: string) => {
+  const { data } = await axios.delete(`/admin/icons/${id}`);
+  return data;
+};

src/pages/icon/types/Types.ts

@@ -21,3 +21,24 @@ export type CreateIconType = {
   url: string;
   groupId: string;
 };
+
+export type IconGroupType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+};
+
+export type IconType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  url: string;
+  group: IconGroupType;
+};
+
+export interface IconsResponse extends IResponse<IconType[]> {
+  statusCode: number;
+}