Amirmahdi/approagency-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: redesign

Browse Source
This commit is contained in:
Amirmahdi
2026-07-10 16:01:27 +03:30
parent 05262b7636
commit a447222201
31 changed files with 1426 additions and 1738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/users/PackageSelector.tsx
+66 -25
View File
@@ -3,6 +3,7 @@
import { PackageName } from '@/types/package';
import { useState, useEffect } from 'react';
import { packagesApi } from '@/lib/api/packages';
import { CubeIcon } from '@heroicons/react/24/outline';
interface PackageSelectorProps {
token: string;
@@ -25,7 +26,6 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
const data = await packagesApi.getAllPackages(token);
setPackages(data);
// Select first package if none selected
if (data.length > 0 && !selectedPackage) {
onPackageChange(data[0].name!);
}
@@ -36,32 +36,73 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
}
};
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
onPackageChange(e.target.value);
};
if (loading) {
return (
<div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
<div className="animate-pulse flex items-center gap-3">
<div className="h-10 w-10 bg-gray-200 dark:bg-gray-800 rounded-xl" />
<div className="flex-1">
<div className="h-3 w-24 bg-gray-200 dark:bg-gray-800 rounded mb-2" />
<div className="h-4 w-48 bg-gray-200 dark:bg-gray-800 rounded" />
</div>
</div>
</div>
);
}
return (
<div className="bg-white dark:bg-gray-900 p-4 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 mb-6">
<label htmlFor="package-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج
<div className="mb-6">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
پکیج را انتخاب کنید
</label>
<select
id="package-select"
value={selectedPackage || ''}
onChange={handleChange}
disabled={loading || isLoading}
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 transition-colors"
>
{loading ? (
<option>در حال بارگذاری...</option>
) : (
packages.map((pkg) => (
<option key={pkg.id} value={pkg.name || ''}>
{pkg.title} ({pkg.name})
</option>
))
)}
</select>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
{packages.map((pkg) => {
const isSelected = selectedPackage === pkg.name;
return (
<button
key={pkg.id}
onClick={() => onPackageChange(pkg.name!)}
disabled={isLoading}
className={`flex items-center gap-3 p-4 rounded-2xl text-right transition-all duration-150 ${
isSelected
? 'bg-indigo-50 dark:bg-indigo-500/10 ring-2 ring-indigo-600 dark:ring-indigo-400 shadow-sm'
: 'bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 hover:ring-gray-300 dark:hover:ring-gray-700 hover:shadow-sm'
} disabled:opacity-50`}
>
{pkg.image && typeof pkg.image === 'string' ? (
<img src={pkg.image} alt={pkg.title || ''} className="h-10 w-10 rounded-xl object-cover flex-shrink-0" />
) : (
<div className={`h-10 w-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
isSelected
? 'bg-indigo-100 dark:bg-indigo-500/15'
: 'bg-gray-100 dark:bg-gray-800'
}`}>
<CubeIcon className={`h-5 w-5 ${isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-400 dark:text-gray-500'}`} />
</div>
)}
<div className="min-w-0">
<p className={`text-sm font-semibold truncate ${
isSelected ? 'text-indigo-700 dark:text-indigo-400' : 'text-gray-900 dark:text-gray-100'
}`}>
{pkg.title || 'بدون عنوان'}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400 truncate" dir="ltr">
{pkg.name}
</p>
</div>
{isSelected && (
<div className="mr-auto flex-shrink-0">
<div className="h-5 w-5 rounded-full bg-indigo-600 dark:bg-indigo-400 flex items-center justify-center">
<svg className="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
</div>
</div>
)}
</button>
);
})}
</div>
</div>
);
}
}