# Dashboard Refactoring Guide

## Backend (Porto Architecture)

### ✅ Completed Changes

#### 1. Actions реорганизованы по доменам:
```
Actions/
├── Posts/
│   ├── CreatePostAction.php
│   ├── UpdatePostAction.php
│   ├── PublishPostAction.php
│   └── QuickUploadFileAction.php
├── Sliders/ (9 files)
├── Schedules/ (5 files)
├── EducationalGroups/ (4 files)
└── EmailNews/ (3 files)
```

#### 2. Tasks реорганизованы по доменам:
```
Tasks/
├── Posts/ (7 files)
├── Sliders/ (1 file)
├── Files/ (2 files)
├── AI/ (7 files)
└── Email/ (5 files)
```

#### 3. Все импорты обновлены:
- Controllers используют новые пути Actions
- Actions используют новые пути Tasks
- Commands обновлены

---

## Frontend (Vue Components)

### ✅ Created Shared Components

Расположение: `resources/js/Pages/Dashboard/Components/shared/`

1. **FlashMessages.vue** - Универсальный компонент flash-сообщений
   - Поддерживает глобальные ($page.props.flash) и локальные сообщения
   - Анимации появления/исчезновения
   
2. **Pagination.vue** - Pagination компонент
   - Принимает объект pagination data
   - Рендерит ссылки и информацию о показанных записях

3. **EmptyState.vue** - Empty state для таблиц
   - Настраиваемый заголовок и описание
   - Поддержка action кнопки (ссылка или функция)
   - Кастомизируемая иконка

4. **DataFilters.vue** - Контейнер фильтров
   - Slot-based архитектура для гибкости
   - Встроенная кнопка сброса
   - Emit события reset

5. **SearchInput.vue** - Поле поиска
   - v-model поддержка
   - Иконка лупы
   - Emit события search при Enter

6. **SelectFilter.vue** - Выпадающий список фильтра
   - v-model поддержка
   - Slot-based для options
   - Emit события change

---

## 📋 How to Refactor Pages

### Example: Refactoring Posts/Index.vue

#### BEFORE (old approach - 718 lines):
```vue
<template>
  <DashboardLayout>
    <!-- Flash Messages - duplicated code -->
    <transition ...>
      <div v-if="$page.props.flash?.success" class="...">
        <!-- 40 lines of duplicated markup -->
      </div>
    </transition>
    
    <!-- Filters - duplicated structure -->
    <div class="bg-layer border...">
      <div class="p-4 border-b...">
        <!-- Filter markup -->
      </div>
      <div class="p-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <!-- Search input -->
          <!-- Status filter -->
          <!-- Reset button -->
        </div>
      </div>
    </div>
    
    <!-- Table -->
    <div class="bg-layer border...">
      <!-- Table header -->
      <table>
        <!-- Table body -->
        <!-- Empty state - 30+ lines -->
      </table>
      <!-- Pagination - 30+ lines -->
    </div>
  </DashboardLayout>
</template>
```

#### AFTER (with shared components - ~400 lines):
```vue
<template>
  <DashboardLayout>
    <template #header-icon>
      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
      </svg>
    </template>
    <template #header-title>Новости</template>
    <template #header-subtitle>Управление публикациями</template>
    <template #header-actions>
      <a :href="route('dashboard.posts.create')" class="...">
        Создать новость
      </a>
    </template>

    <!-- Use shared FlashMessages -->
    <FlashMessages />

    <!-- Created Post Notification (specific to Posts) -->
    <transition ...>
      <div v-if="$page.props.flash?.created_post" class="...">
        <!-- Post-specific notification -->
      </div>
    </transition>

    <!-- Use shared DataFilters -->
    <DataFilters title="Фильтры" @reset="resetFilters">
      <SearchInput 
        v-model="searchQuery" 
        label="Поиск по заголовку"
        placeholder="Введите название..."
        @search="search"
      />
      
      <SelectFilter
        v-model="statusQuery"
        label="Статус"
        placeholder="Все статусы"
        @change="filterByStatus"
      >
        <option v-for="status in [PostStatus.PUBLISHED, PostStatus.VERIFICATION, PostStatus.REJECTED]"
                :key="status.value"
                :value="status.value">
          {{ status.label }}
        </option>
      </SelectFilter>
    </DataFilters>

    <!-- Posts Table -->
    <div class="bg-layer border border-layer-line rounded-lg shadow-xs overflow-hidden">
      <!-- Table Header Stats -->
      <div class="px-6 py-4 border-b border-line-2 bg-surface/50">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-4">
            <span class="text-sm text-foreground">
              Всего: <span class="font-medium">{{ posts.total }}</span>
            </span>
            <span class="text-xs text-muted-foreground-1 px-2 py-0.5 bg-primary/10 text-primary rounded-full">
              {{ posts.data.length }} на странице
            </span>
          </div>
        </div>
      </div>

      <!-- Table -->
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-line-2">
          <thead class="bg-surface/50">
            <tr>
              <!-- Table headers -->
            </tr>
          </thead>
          <tbody class="divide-y divide-line-2">
            <tr v-for="post in posts.data" :key="post.id" class="...">
              <!-- Post row - keep this as is -->
            </tr>

            <!-- Use shared EmptyState -->
            <EmptyState 
              v-if="posts.data.length === 0"
              :columns="6"
              title="Новости не найдены"
              description="Создайте первую новость или измените параметры поиска"
              :action-url="route('dashboard.posts.create')"
              action-text="Создать новость"
            />
          </tbody>
        </table>
      </div>

      <!-- Use shared Pagination -->
      <Pagination :data="posts" />
    </div>

    <!-- Post Modal (keep as is - specific to Posts) -->
  </DashboardLayout>
</template>

<script>
import DashboardLayout from '../Components/DashboardLayout.vue';
import FlashMessages from '../Components/shared/FlashMessages.vue';
import DataFilters from '../Components/shared/DataFilters.vue';
import SearchInput from '../Components/shared/SearchInput.vue';
import SelectFilter from '../Components/shared/SelectFilter.vue';
import EmptyState from '../Components/shared/EmptyState.vue';
import Pagination from '../Components/shared/Pagination.vue';
import PostStatus from '@/Enum/PostStatus.js';

export default {
  name: 'PostsIndex',
  components: {
    DashboardLayout,
    FlashMessages,
    DataFilters,
    SearchInput,
    SelectFilter,
    EmptyState,
    Pagination
  },
  
  // ... rest of the script stays the same
}
</script>
```

### Key Benefits:
1. **Reduced duplication**: ~150 lines saved from FlashMessages, ~30 from EmptyState, ~30 from Pagination
2. **Consistent UI**: All pages use same components
3. **Easier maintenance**: Fix once, apply everywhere
4. **Better readability**: Clear structure, less noise

---

## 🎯 Next Steps

### For Posts/Index.vue:
1. Replace FlashMessages section with `<FlashMessages />`
2. Replace Filters section with `<DataFilters>` + child components
3. Replace Empty State with `<EmptyState>`
4. Replace Pagination with `<Pagination>`
5. Keep table rows and modal as is (post-specific)

### For Schedules/Index.vue:
Same approach, but with schedule-specific filters

### For Posts/Form.vue (1284 lines!):
Break into subcomponents:
- `PostMainInfo.vue` - title, slug, status, category
- `PostContentBuilder.vue` - content blocks
- `PostMedia.vue` - images, preview
- `PostSliderSettings.vue` - slider config
- `PostPublishSettings.vue` - publish settings
- `PostSocialMedia.vue` - VK, other social

---

## 📝 Migration Checklist

- [x] Backend Actions grouped by domain
- [x] Backend Tasks grouped by domain
- [x] All imports updated in Controllers
- [x] Shared components created
- [ ] Posts/Index refactored
- [ ] Schedules/Index refactored
- [ ] Posts/Form broken into subcomponents
- [ ] All pages tested and working