list of values

src/pages/theme/Values.tsx

@@ -0,0 +1,85 @@
+import { type FC } from 'react'
+import { useGetThemeValues } from './hooks/useThemeData'
+import { useParams } from 'react-router-dom'
+import PageTitle from '@/components/PageTitle'
+import Td from '@/components/Td'
+import { Eye } from 'iconsax-react'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+
+const Values: FC = () => {
+    const { id } = useParams()
+    const { data, isLoading } = useGetThemeValues(id!)
+
+    if (isLoading) {
+        return <div className="flex justify-center items-center h-64">در حال بارگذاری...</div>
+    }
+
+    const themeInfo = data?.results?.data?.[0]?.theme
+
+    return (
+        <div>
+            <PageTitle title1='مقادیر تم' />
+
+            {themeInfo && (
+                <div className='mt-5 p-4 bg-gray-50 rounded-lg'>
+                    <div className='flex gap-4'>
+                        <div>
+                            <span className='text-gray-600'>عنوان تم: </span>
+                            <span className='font-semibold'>{themeInfo.title}</span>
+                        </div>
+                        <div>
+                            <span className='text-gray-600'>نوع ورودی: </span>
+                            <span className='font-semibold'>{themeInfo.inputType}</span>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
+                <table className='w-full text-sm'>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={'نام'} />
+                            <Td text={'مقدار'} />
+                            <Td text={'عملیات'} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            data?.results?.data && data.results.data.length > 0 ? (
+                                data.results.data.map((item) => {
+                                    return (
+                                        <tr className='tr' key={item._id}>
+                                            <Td text={item.name} />
+                                            <Td text={item.value.toString()} />
+                                            <Td text=''>
+                                                <div className='flex gap-2'>
+                                                    <Eye size={16} color='#8C90A3' />
+                                                    <TrashWithConfrim
+                                                        onDelete={() => {
+                                                            toast.error('این قابلیت در حال توسعه است')
+                                                        }}
+                                                        isLoading={false}
+                                                    />
+                                                </div>
+                                            </Td>
+                                        </tr>
+                                    )
+                                })
+                            ) : (
+                                <tr>
+                                    <td colSpan={3} className='text-center py-8 text-gray-500'>
+                                        هیچ مقداری یافت نشد
+                                    </td>
+                                </tr>
+                            )
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default Values

src/pages/theme/hooks/useThemeData.ts

@@ -48,3 +48,11 @@ export const useDeleteTheme = () => {
     },
   });
 };
+
+export const useGetThemeValues = (id: string) => {
+  return useQuery({
+    queryKey: ["theme-values", id],
+    queryFn: () => api.getThemeValues(id),
+    enabled: !!id,
+  });
+};

src/pages/theme/service/ThemeService.ts

@@ -3,6 +3,7 @@ import type {
   CreateThemeType,
   GetThemesResponseType,
   GetThemeByIdResponseType,
+  GetThemeValuesResponseType,
 } from "../type/Types";
 
 export const getThemes = async (): Promise<GetThemesResponseType> => {
@@ -38,3 +39,12 @@ export const deleteTheme = async (id: string) => {
   const { data } = await axios.delete(`/admin/category/theme/${id}`);
   return data;
 };
+
+export const getThemeValues = async (
+  id: string
+): Promise<GetThemeValuesResponseType> => {
+  const { data } = await axios.get<GetThemeValuesResponseType>(
+    `/admin/category/theme-value/${id}/values`
+  );
+  return data;
+};

src/pages/theme/type/Types.ts

@@ -28,3 +28,26 @@ export type GetThemeByIdResponseType = {
     data: ThemeType;
   };
 };
+
+export type CreateThemeValueType = {
+  theme: string;
+  name: string;
+  value: string;
+};
+
+export type ThemeValueType = {
+  _id: string;
+  theme: ThemeType;
+  name: string;
+  value: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type GetThemeValuesResponseType = {
+  status: number;
+  success: boolean;
+  results: {
+    data: ThemeValueType[];
+  };
+};

src/router/Main.tsx

@@ -86,6 +86,7 @@ import Cancels from '@/pages/orders/Cancels'
 import ThemeList from '@/pages/theme/List'
 import CreateTheme from '@/pages/theme/Create'
 import UpdateTheme from '@/pages/theme/Update'
+import Values from '@/pages/theme/Values'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -210,6 +211,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.products.theme.list} element={<ThemeList />} />
                             <Route path={Pages.products.theme.create} element={<CreateTheme />} />
                             <Route path={`${Pages.products.theme.update}:id`} element={<UpdateTheme />} />
+                            <Route path={`${Pages.products.theme.values}:id`} element={<Values />} />
                         </Routes>
                     </div>
                 </div>