# 🎨 راهنمای کامل نصب پنل ادمین

## ✨ ویژگی‌های طراحی

این پنل ادمین شامل موارد زیر است:

- ✅ **طراحی مدرن و زیبا** - با استفاده از Tailwind CSS و Gradient ها
- ✅ **انیمیشن‌های نرم** - Hover effects و Transitions حرفه‌ای
- ✅ **Responsive کامل** - برای موبایل، تبلت و دسکتاپ
- ✅ **پیش‌نمایش زنده** - تغییرات را همزمان ببینید
- ✅ **Color Picker** - انتخاب رنگ به صورت بصری
- ✅ **Icon Selector** - انتخاب آیکون از لیست زیبا
- ✅ **پالت‌های رنگی آماده** - کلیک و استفاده کنید
- ✅ **Toast Notifications** - فیدبک فوری از عملیات
- ✅ **Empty States** - صفحات خالی زیبا و دعوت‌کننده
- ✅ **Modal های مدرن** - با Backdrop blur و Shadow

---

## 📦 مرحله 1: نصب پکیج‌های Frontend

### ایجاد پروژه React (اگر ندارید)

```bash
# با Vite (پیشنهادی - سریع‌تر)
npm create vite@latest admin-panel -- --template react
cd admin-panel

# یا با Create React App
npx create-react-app admin-panel
cd admin-panel
```

### نصب پکیج‌های مورد نیاز

```bash
# پکیج‌های اصلی
npm install lucide-react react-hot-toast axios react-router-dom

# Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

---

## ⚙️ مرحله 2: تنظیم Tailwind CSS

### فایل `tailwind.config.js`

```javascript
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        'vazir': ['Vazir', 'sans-serif'],
      },
    },
  },
  plugins: [],
}
```

### فایل `src/index.css`

```css
@import url('https://cdn.jsdelivr.net/npm/vazir-font@latest/dist/font-face.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: 'Vazir', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: rtl;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
```

---

## 🔐 مرحله 3: تنظیم Axios

### فایل `src/api/config.js`

```javascript
import axios from 'axios';
import toast from 'react-hot-toast';

export const API_URL = 'http://localhost:8000/api';

// تنظیم Axios
const api = axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  }
});

// Interceptor برای اضافه کردن توکن
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Interceptor برای مدیریت خطاها
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
      toast.error('لطفا دوباره وارد شوید');
    } else if (error.response?.status === 403) {
      toast.error('شما دسترسی به این بخش ندارید');
    } else if (error.response?.status === 500) {
      toast.error('خطای سرور. لطفا بعداً تلاش کنید');
    }
    return Promise.reject(error);
  }
);

export default api;
```

---

## 📁 مرحله 4: ساختار پروژه

```
admin-panel/
├── src/
│   ├── api/
│   │   └── config.js
│   ├── pages/
│   │   └── admin/
│   │       ├── HomeFeatures.jsx
│   │       └── ProductShowcases.jsx
│   ├── components/
│   │   ├── Layout/
│   │   │   ├── Sidebar.jsx
│   │   │   └── Header.jsx
│   │   └── shared/
│   │       ├── LoadingSpinner.jsx
│   │       └── EmptyState.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── public/
├── package.json
└── tailwind.config.js
```

---

## 🎯 مرحله 5: کپی کامپوننت‌ها

### 1. کامپوننت‌های اصلی را از فایل‌های زیر کپی کنید:

- `docs/ADMIN_PANEL_COMPONENTS.md` → `src/pages/admin/HomeFeatures.jsx`
- `docs/SHOWCASE_ADMIN_COMPONENT.md` → `src/pages/admin/ProductShowcases.jsx` (قسمت اول)
- `docs/SHOWCASE_MODAL_COMPONENTS.md` → همان فایل (قسمت دوم)
- `docs/AUTO_SHOWCASE_MODAL.md` → همان فایل (قسمت سوم)

### 2. تنظیم App.jsx

```jsx
// src/App.jsx
import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';
import HomeFeatures from './pages/admin/HomeFeatures';
import ProductShowcases from './pages/admin/ProductShowcases';
import Sidebar from './components/Layout/Sidebar';

function App() {
  return (
    <BrowserRouter>
      <div className="flex min-h-screen bg-gray-50">
        <Toaster position="top-left" />
        <Sidebar />
        <main className="flex-1">
          <Routes>
            <Route path="/" element={<Navigate to="/admin/home-features" />} />
            <Route path="/admin/home-features" element={<HomeFeatures />} />
            <Route path="/admin/showcases" element={<ProductShowcases />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
}

export default App;
```

### 3. ساخت Sidebar

```jsx
// src/components/Layout/Sidebar.jsx
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Home, ShoppingBag, Settings, LogOut } from 'lucide-react';

const Sidebar = () => {
  const location = useLocation();

  const menuItems = [
    { path: '/admin/home-features', icon: Home, label: 'ویژگی‌های صفحه اصلی' },
    { path: '/admin/showcases', icon: ShoppingBag, label: 'ویترین محصولات' },
  ];

  return (
    <div className="w-64 bg-gradient-to-b from-gray-900 to-gray-800 text-white min-h-screen p-6 shadow-2xl">
      <div className="mb-8">
        <h1 className="text-2xl font-bold mb-2">پنل مدیریت</h1>
        <p className="text-gray-400 text-sm">مدیریت فروشگاه</p>
      </div>

      <nav className="space-y-2">
        {menuItems.map((item) => {
          const Icon = item.icon;
          const isActive = location.pathname === item.path;

          return (
            <Link
              key={item.path}
              to={item.path}
              className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all ${
                isActive
                  ? 'bg-blue-600 text-white shadow-lg'
                  : 'text-gray-300 hover:bg-gray-700/50'
              }`}
            >
              <Icon size={20} />
              <span className="font-medium">{item.label}</span>
            </Link>
          );
        })}
      </nav>

      <div className="absolute bottom-6 left-6 right-6">
        <button className="w-full flex items-center gap-3 px-4 py-3 text-gray-300 hover:bg-red-600/20 hover:text-red-400 rounded-xl transition-all">
          <LogOut size={20} />
          <span>خروج</span>
        </button>
      </div>
    </div>
  );
};

export default Sidebar;
```

---

## 🚀 مرحله 6: اجرای پروژه

```bash
# اجرای Frontend
npm run dev

# پورت پیش‌فرض: http://localhost:5173
```

```bash
# اجرای Backend (در ترمینال دیگر)
cd path/to/laravel
php artisan serve

# پورت پیش‌فرض: http://localhost:8000
```

---

## 🎨 تنظیمات اضافی (اختیاری)

### اضافه کردن Loading Component

```jsx
// src/components/shared/LoadingSpinner.jsx
import React from 'react';

const LoadingSpinner = () => {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="relative">
        <div className="animate-spin rounded-full h-16 w-16 border-b-4 border-blue-600"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <div className="w-8 h-8 bg-blue-600 rounded-full animate-pulse"></div>
        </div>
      </div>
    </div>
  );
};

export default LoadingSpinner;
```

### اضافه کردن Empty State Component

```jsx
// src/components/shared/EmptyState.jsx
import React from 'react';

const EmptyState = ({ icon, title, description, actionLabel, onAction }) => {
  return (
    <div className="bg-white rounded-2xl shadow-lg p-12 text-center">
      <div className="text-6xl mb-4">{icon}</div>
      <h3 className="text-xl font-semibold text-gray-700 mb-2">{title}</h3>
      <p className="text-gray-500 mb-6">{description}</p>
      {actionLabel && onAction && (
        <button
          onClick={onAction}
          className="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition-colors"
        >
          {actionLabel}
        </button>
      )}
    </div>
  );
};

export default EmptyState;
```

---

## ✅ چک‌لیست نهایی

- [ ] پکیج‌ها نصب شدند
- [ ] Tailwind CSS تنظیم شد
- [ ] Axios config ایجاد شد
- [ ] فونت فارسی اضافه شد
- [ ] کامپوننت HomeFeatures کپی شد
- [ ] کامپوننت ProductShowcases کپی شد
- [ ] Sidebar ایجاد شد
- [ ] App.jsx تنظیم شد
- [ ] Frontend اجرا شد (`npm run dev`)
- [ ] Backend اجرا شد (`php artisan serve`)
- [ ] توکن در localStorage ذخیره شد

---

## 🔑 دریافت توکن برای تست

```bash
# لاگین و دریافت توکن
curl -X POST http://localhost:8000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"admin@example.com","password":"password"}'

# توکن را در Console مرورگر ذخیره کنید:
# localStorage.setItem('token', 'YOUR_TOKEN_HERE');
```

---

## 🎉 تمام!

پنل ادمین شما آماده است! حالا می‌توانید:

✅ ویژگی‌های صفحه اصلی را مدیریت کنید  
✅ ویترین‌های دستی بسازید  
✅ ویترین‌های خودکار ایجاد کنید  
✅ همه چیز را ویرایش و حذف کنید  
✅ از UI زیبا و مدرن لذت ببرید  

**موفق باشید! 🚀**