.

src/services/api.ts

@@ -126,6 +126,7 @@ export type CreateCatalogPayload = {
   description?: string
   displayOrder?: number
   isActive?: boolean
+  imageUrl?: string | null
 }
 
 export type UpdateCatalogPayload = Partial<Omit<CreateCatalogPayload, 'companyId'>>

src/types/index.ts

@@ -208,6 +208,8 @@ export interface Catalog {
   displayOrder: number
   productCount: number
   isActive: boolean
+  description?: string
+  imageUrl?: string
 }
 
 export interface Product {

src/views/catalogs/CatalogsView.vue

@@ -7,6 +7,7 @@ import BaseEmptyState from '@/components/ui/BaseEmptyState.vue'
 import ActiveSwitchCell from '@/components/ui/ActiveSwitchCell.vue'
 import AdminIcon from '@/components/icons/AdminIcon.vue'
 import AdminSelect from '@/components/ui/AdminSelect.vue'
+import AdminImagePicker from '@/components/ui/AdminImagePicker.vue'
 import { catalogsApi, companiesApi } from '@/services/api'
 import { ApiError } from '@/services/http'
 import { useToast } from '@/composables/useToast'
@@ -38,6 +39,7 @@ const emptyForm = () => ({
   name: '',
   displayOrder: catalogList.value.length + 1,
   isActive: true,
+  imageUrl: null as string | null,
 })
 
 const form = reactive(emptyForm())
@@ -100,6 +102,7 @@ function openEditModal(catalog: Catalog) {
   form.name = catalog.name
   form.displayOrder = catalog.displayOrder
   form.isActive = catalog.isActive
+  form.imageUrl = catalog.imageUrl ?? null
   formError.value = ''
 }
 
@@ -123,6 +126,7 @@ async function submitCatalog() {
         name: form.name.trim(),
         displayOrder: Number(form.displayOrder) || 1,
         isActive: form.isActive,
+        imageUrl: form.imageUrl,
       })
       const index = catalogList.value.findIndex((c) => c.id === editingId.value)
       if (index !== -1) {
@@ -140,6 +144,7 @@ async function submitCatalog() {
         name: form.name.trim(),
         displayOrder: Number(form.displayOrder) || 1,
         isActive: form.isActive,
+        imageUrl: form.imageUrl,
       })
       catalogList.value.push({
         ...created,
@@ -220,6 +225,7 @@ function clearFilters() {
         <table class="admin-table">
           <thead>
             <tr>
+              <th>تصویر</th>
               <th>کد</th>
               <th>نام کالیته</th>
               <th>شرکت</th>
@@ -231,6 +237,13 @@ function clearFilters() {
           </thead>
           <tbody>
             <tr v-for="catalog in filteredCatalogs" :key="catalog.id">
+              <td>
+                <span
+                  class="catalog-thumb"
+                  :class="{ 'catalog-thumb--empty': !catalog.imageUrl }"
+                  :style="catalog.imageUrl ? { backgroundImage: `url(${catalog.imageUrl})` } : undefined"
+                />
+              </td>
               <td>{{ catalog.code }}</td>
               <td>{{ catalog.name }}</td>
               <td>{{ catalog.companyName }}</td>
@@ -259,6 +272,11 @@ function clearFilters() {
     <div v-if="!loading && filteredCatalogs.length" class="compact-only admin-card-list">
       <article v-for="catalog in filteredCatalogs" :key="catalog.id" class="admin-card-item">
         <div class="admin-card-item__header">
+          <span
+            class="catalog-thumb"
+            :class="{ 'catalog-thumb--empty': !catalog.imageUrl }"
+            :style="catalog.imageUrl ? { backgroundImage: `url(${catalog.imageUrl})` } : undefined"
+          />
           <p class="admin-card-item__title">کالیته {{ catalog.code }} — {{ catalog.name }}</p>
           <ActiveSwitchCell
             :id="catalog.id"
@@ -316,6 +334,8 @@ function clearFilters() {
             <BaseSwitch v-model="form.isActive" label="وضعیت" />
           </div>
         </div>
+
+        <AdminImagePicker v-model="form.imageUrl" label="تصویر بنر کالیته" />
       </form>
 
       <template #footer>
@@ -362,4 +382,16 @@ function clearFilters() {
 .catalogs-page__table {
   overflow: hidden;
 }
+
+.catalog-thumb {
+  display: block;
+  width: 72px;
+  height: 44px;
+  border-radius: 8px;
+  background: #e8eceb center / cover no-repeat;
+}
+
+.catalog-thumb--empty {
+  background: #eef1f0;
+}
 </style>