fix: redesign

app/admin/packages/page.tsx

@@ -5,6 +5,8 @@ import { useAuth } from '@/contexts/AuthContext';
 import { packagesApi } from '@/lib/api/packages';
 import PackageList from '@/components/admin/packages/PackageList';
 import PackageForm from '@/components/admin/packages/PackageForm';
+import PageHeader from '@/components/admin/PageHeader';
+import { showToast } from '@/components/Toast';
 import { PackageName, CreatePackageData, UpdatePackageData } from '@/types/package';
 import { PlusIcon } from '@heroicons/react/24/outline';
 
@@ -15,9 +17,7 @@ export default function PackagesPage() {
     const [isLoading, setIsLoading] = useState(false);
     const [isFormVisible, setIsFormVisible] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState<string | null>(null);
 
-    // Load packages on mount
     useEffect(() => {
         if (token) {
             loadPackages();
@@ -54,11 +54,10 @@ export default function PackagesPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await packagesApi.deletePackage(pkg.name!, token!);
-            setSuccess('پکیج با موفقیت حذف شد');
+            showToast('success', 'پکیج با موفقیت حذف شد');
             await loadPackages();
         } catch (err) {
             setError(err instanceof Error ? err.message : 'خطا در حذف پکیج');
@@ -70,17 +69,14 @@ export default function PackagesPage() {
     const handleSubmit = async (data: CreatePackageData | UpdatePackageData) => {
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             if (selectedPackage) {
-                // Update existing package
                 await packagesApi.updatePackage(selectedPackage.name!, data, token!);
-                setSuccess('پکیج با موفقیت به‌روزرسانی شد');
+                showToast('success', 'پکیج با موفقیت به‌روزرسانی شد');
             } else {
-                // Create new package
                 await packagesApi.createPackage(data as CreatePackageData, token!);
-                setSuccess('پکیج با موفقیت ایجاد شد');
+                showToast('success', 'پکیج با موفقیت ایجاد شد');
             }
 
             await loadPackages();
@@ -97,41 +93,37 @@ export default function PackagesPage() {
         setIsFormVisible(false);
         setSelectedPackage(null);
         setError(null);
-        setSuccess(null);
     };
 
     return (
-        <div className="p-6">
+        <div className="p-4 sm:p-8">
             <div className="max-w-7xl mx-auto">
-                <div className="flex justify-between items-center mb-6">
-                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-                        مدیریت پکیج‌ها
-                    </h1>
-                    {!isFormVisible && (
-                        <button
-                            onClick={handleCreate}
-                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors"
-                        >
-                            <PlusIcon className="h-5 w-5 ml-2" />
-                            پکیج جدید
-                        </button>
-                    )}
-                </div>
+                <PageHeader
+                    title="مدیریت پکیج‌ها"
+                    action={
+                        !isFormVisible ? (
+                            <button
+                                onClick={handleCreate}
+                                className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors shadow-sm shadow-indigo-500/20"
+                            >
+                                <PlusIcon className="h-4 w-4" />
+                                پکیج جدید
+                            </button>
+                        ) : undefined
+                    }
+                />
 
-                {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
-                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
+                    <div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
+                        <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
+                        <button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
+                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                            </svg>
+                        </button>
                     </div>
                 )}
 
-                {success && (
-                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
-                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
-                    </div>
-                )}
-
-                {/* Form or List */}
                 {isFormVisible ? (
                     <PackageForm
                         package={selectedPackage}
@@ -150,4 +142,4 @@ export default function PackagesPage() {
             </div>
         </div>
     );
-}
+}