# 🎨 کامپوننت‌های پنل ادمین - طراحی شده و زیبا

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

```bash
npm install lucide-react react-hot-toast axios
npm install -D tailwindcss@latest
```

## 1. HomeFeatures Management - مدیریت ویژگی‌های صفحه اصلی

### کامپوننت اصلی با طراحی زیبا

```jsx
// src/pages/admin/HomeFeatures.jsx
import React, { useState, useEffect } from 'react';
import { Plus, Edit2, Trash2, Eye, EyeOff, GripVertical } from 'lucide-react';
import * as Icons from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import axios from 'axios';

const API_URL = 'http://localhost:8000/api';
const token = localStorage.getItem('token');

const HomeFeatures = () => {
  const [features, setFeatures] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [editingFeature, setEditingFeature] = useState(null);

  useEffect(() => {
    loadFeatures();
  }, []);

  const loadFeatures = async () => {
    try {
      const { data } = await axios.get(`${API_URL}/admin/home-features`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      setFeatures(data.data);
    } catch (error) {
      toast.error('خطا در بارگذاری ویژگی‌ها');
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id) => {
    if (!confirm('آیا مطمئن هستید؟')) return;
    
    try {
      await axios.delete(`${API_URL}/admin/home-features/${id}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      toast.success('ویژگی با موفقیت حذف شد');
      loadFeatures();
    } catch (error) {
      toast.error('خطا در حذف ویژگی');
    }
  };

  const handleEdit = (feature) => {
    setEditingFeature(feature);
    setShowModal(true);
  };

  const handleCreate = () => {
    setEditingFeature(null);
    setShowModal(true);
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
      <Toaster position="top-left" />
      
      {/* Header */}
      <div className="max-w-7xl mx-auto mb-8">
        <div className="bg-white rounded-2xl shadow-lg p-6 flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-800 mb-2">
              مدیریت ویژگی‌های صفحه اصلی
            </h1>
            <p className="text-gray-600">
              باکس‌های ویژگی مثل ارسال رایگان، پشتیبانی 24/7 و...
            </p>
          </div>
          <button
            onClick={handleCreate}
            className="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-3 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
          >
            <Plus size={20} />
            <span>افزودن ویژگی جدید</span>
          </button>
        </div>
      </div>

      {/* Features Grid */}
      <div className="max-w-7xl mx-auto">
        {features.length === 0 ? (
          <div className="bg-white rounded-2xl shadow-lg p-12 text-center">
            <div className="text-gray-400 text-6xl mb-4">📦</div>
            <h3 className="text-xl font-semibold text-gray-700 mb-2">
              هنوز ویژگی‌ای اضافه نشده
            </h3>
            <p className="text-gray-500 mb-6">
              اولین ویژگی صفحه اصلی خود را اضافه کنید
            </p>
            <button
              onClick={handleCreate}
              className="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition-colors"
            >
              افزودن ویژگی
            </button>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {features.map((feature) => {
              const IconComponent = Icons[feature.icon] || Icons.Box;
              
              return (
                <div
                  key={feature.id}
                  className="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group"
                >
                  {/* Preview */}
                  <div
                    className="p-8 text-center relative"
                    style={{
                      backgroundColor: feature.bg_color,
                      color: feature.text_color
                    }}
                  >
                    <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
                      <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                        feature.is_active 
                          ? 'bg-green-500/20 text-green-700' 
                          : 'bg-red-500/20 text-red-700'
                      }`}>
                        {feature.is_active ? 'فعال' : 'غیرفعال'}
                      </span>
                    </div>
                    
                    <IconComponent
                      size={56}
                      style={{ color: feature.icon_color }}
                      className="mx-auto mb-4 drop-shadow-lg"
                      strokeWidth={1.5}
                    />
                    <h3 className="text-xl font-bold mb-2 drop-shadow">
                      {feature.title}
                    </h3>
                    <p className="text-sm opacity-90 leading-relaxed">
                      {feature.description}
                    </p>
                  </div>

                  {/* Actions */}
                  <div className="bg-gray-50 p-4 flex items-center justify-between border-t">
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => handleEdit(feature)}
                        className="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-colors"
                        title="ویرایش"
                      >
                        <Edit2 size={18} />
                      </button>
                      <button
                        onClick={() => handleDelete(feature.id)}
                        className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors"
                        title="حذف"
                      >
                        <Trash2 size={18} />
                      </button>
                    </div>
                    <div className="flex items-center gap-2 text-xs text-gray-500">
                      <GripVertical size={16} />
                      <span>ترتیب: {feature.sort_order}</span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Modal */}
      {showModal && (
        <FeatureModal
          feature={editingFeature}
          onClose={() => {
            setShowModal(false);
            setEditingFeature(null);
          }}
          onSave={() => {
            setShowModal(false);
            setEditingFeature(null);
            loadFeatures();
          }}
        />
      )}
    </div>
  );
};

// Feature Modal Component
const FeatureModal = ({ feature, onClose, onSave }) => {
  const [formData, setFormData] = useState(feature || {
    title: '',
    description: '',
    icon: 'Box',
    bg_color: '#F5F5F5',
    icon_color: '#1976D2',
    text_color: '#212121',
    sort_order: 0,
    is_active: true
  });

  const iconOptions = [
    'Truck', 'Headphones', 'ShieldCheck', 'CreditCard',
    'Gift', 'Award', 'Zap', 'Heart', 'Star', 'Package',
    'Phone', 'MessageCircle', 'Lock', 'RefreshCw', 'Clock',
    'Sparkles', 'TrendingUp', 'Users', 'Mail', 'Globe'
  ];

  const colorPresets = [
    { name: 'آبی', bg: '#E3F2FD', icon: '#1976D2', text: '#0D47A1' },
    { name: 'بنفش', bg: '#F3E5F5', icon: '#7B1FA2', text: '#4A148C' },
    { name: 'سبز', bg: '#E8F5E9', icon: '#388E3C', text: '#1B5E20' },
    { name: 'نارنجی', bg: '#FFF3E0', icon: '#F57C00', text: '#E65100' },
    { name: 'قرمز', bg: '#FFEBEE', icon: '#C62828', text: '#B71C1C' },
    { name: 'طوسی', bg: '#F5F5F5', icon: '#616161', text: '#212121' },
  ];

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      if (feature) {
        await axios.put(
          `${API_URL}/admin/home-features/${feature.id}`,
          formData,
          { headers: { Authorization: `Bearer ${token}` } }
        );
        toast.success('ویژگی با موفقیت ویرایش شد');
      } else {
        await axios.post(
          `${API_URL}/admin/home-features`,
          formData,
          { headers: { Authorization: `Bearer ${token}` } }
        );
        toast.success('ویژگی با موفقیت ایجاد شد');
      }
      onSave();
    } catch (error) {
      toast.error('خطا در ذخیره ویژگی');
    }
  };

  const IconPreview = Icons[formData.icon] || Icons.Box;

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="sticky top-0 bg-gradient-to-r from-blue-600 to-blue-700 text-white p-6 rounded-t-2xl">
          <h2 className="text-2xl font-bold">
            {feature ? 'ویرایش ویژگی' : 'افزودن ویژگی جدید'}
          </h2>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          {/* Live Preview */}
          <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-8 border-2 border-dashed border-gray-300">
            <p className="text-sm text-gray-600 mb-4 text-center">پیش‌نمایش زنده</p>
            <div
              className="rounded-xl p-8 text-center transition-all duration-300"
              style={{
                backgroundColor: formData.bg_color,
                color: formData.text_color
              }}
            >
              <IconPreview
                size={64}
                style={{ color: formData.icon_color }}
                className="mx-auto mb-4 drop-shadow-lg"
                strokeWidth={1.5}
              />
              <h3 className="text-2xl font-bold mb-2">
                {formData.title || 'عنوان ویژگی'}
              </h3>
              <p className="text-sm opacity-90">
                {formData.description || 'توضیحات ویژگی'}
              </p>
            </div>
          </div>

          {/* Form Fields */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Title */}
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                عنوان *
              </label>
              <input
                type="text"
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                placeholder="مثال: ارسال رایگان"
                required
              />
            </div>

            {/* Description */}
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                توضیحات
              </label>
              <textarea
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                rows="3"
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
                placeholder="مثال: برای سفارش‌های بالای 500 هزار تومان"
              />
            </div>

            {/* Icon Selection */}
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-3">
                انتخاب آیکون
              </label>
              <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-10 gap-2">
                {iconOptions.map((iconName) => {
                  const Icon = Icons[iconName];
                  return (
                    <button
                      key={iconName}
                      type="button"
                      onClick={() => setFormData({ ...formData, icon: iconName })}
                      className={`p-3 rounded-lg border-2 transition-all hover:scale-110 ${
                        formData.icon === iconName
                          ? 'border-blue-600 bg-blue-50'
                          : 'border-gray-200 hover:border-blue-300'
                      }`}
                      title={iconName}
                    >
                      <Icon size={24} className="mx-auto" />
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Color Presets */}
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-3">
                پالت‌های رنگی آماده
              </label>
              <div className="grid grid-cols-3 sm:grid-cols-6 gap-3">
                {colorPresets.map((preset) => (
                  <button
                    key={preset.name}
                    type="button"
                    onClick={() => setFormData({
                      ...formData,
                      bg_color: preset.bg,
                      icon_color: preset.icon,
                      text_color: preset.text
                    })}
                    className="group relative"
                  >
                    <div
                      className="h-16 rounded-lg border-2 border-gray-200 group-hover:border-blue-500 transition-all flex items-center justify-center"
                      style={{ backgroundColor: preset.bg }}
                    >
                      <IconPreview size={24} style={{ color: preset.icon }} />
                    </div>
                    <span className="block text-xs text-gray-600 mt-1 text-center">
                      {preset.name}
                    </span>
                  </button>
                ))}
              </div>
            </div>

            {/* Custom Colors */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                رنگ پس‌زمینه
              </label>
              <div className="flex gap-2">
                <input
                  type="color"
                  value={formData.bg_color}
                  onChange={(e) => setFormData({ ...formData, bg_color: e.target.value })}
                  className="w-16 h-12 rounded-lg border border-gray-300 cursor-pointer"
                />
                <input
                  type="text"
                  value={formData.bg_color}
                  onChange={(e) => setFormData({ ...formData, bg_color: e.target.value })}
                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
                  placeholder="#F5F5F5"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                رنگ آیکون
              </label>
              <div className="flex gap-2">
                <input
                  type="color"
                  value={formData.icon_color}
                  onChange={(e) => setFormData({ ...formData, icon_color: e.target.value })}
                  className="w-16 h-12 rounded-lg border border-gray-300 cursor-pointer"
                />
                <input
                  type="text"
                  value={formData.icon_color}
                  onChange={(e) => setFormData({ ...formData, icon_color: e.target.value })}
                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
                  placeholder="#1976D2"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                رنگ متن
              </label>
              <div className="flex gap-2">
                <input
                  type="color"
                  value={formData.text_color}
                  onChange={(e) => setFormData({ ...formData, text_color: e.target.value })}
                  className="w-16 h-12 rounded-lg border border-gray-300 cursor-pointer"
                />
                <input
                  type="text"
                  value={formData.text_color}
                  onChange={(e) => setFormData({ ...formData, text_color: e.target.value })}
                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
                  placeholder="#212121"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                ترتیب نمایش
              </label>
              <input
                type="number"
                value={formData.sort_order}
                onChange={(e) => setFormData({ ...formData, sort_order: parseInt(e.target.value) })}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500"
              />
            </div>

            {/* Active Toggle */}
            <div className="md:col-span-2">
              <label className="flex items-center gap-3 cursor-pointer">
                <div className="relative">
                  <input
                    type="checkbox"
                    checked={formData.is_active}
                    onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
                    className="sr-only"
                  />
                  <div className={`w-14 h-8 rounded-full transition-colors ${
                    formData.is_active ? 'bg-green-500' : 'bg-gray-300'
                  }`}>
                    <div className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform ${
                      formData.is_active ? 'transform translate-x-6' : ''
                    }`}></div>
                  </div>
                </div>
                <span className="text-sm font-medium text-gray-700">
                  {formData.is_active ? 'فعال' : 'غیرفعال'}
                </span>
              </label>
            </div>
          </div>

          {/* Actions */}
          <div className="flex gap-3 pt-6 border-t">
            <button
              type="submit"
              className="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all font-medium shadow-lg hover:shadow-xl"
            >
              {feature ? 'ذخیره تغییرات' : 'ایجاد ویژگی'}
            </button>
            <button
              type="button"
              onClick={onClose}
              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition-colors font-medium"
            >
              انصراف
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default HomeFeatures;
```

---

ادامه میدم...