feat: enhance various pages with improved UI elements and search functionality

assets/admin/pages/SettlementsPage.tsx

@@ -25,6 +25,7 @@ export default function SettlementsPage() {
   const navigate = useNavigate();
   const qc = useQueryClient();
   const [page, setPage] = useState(1);
+  const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('pending');
   const [approveTarget, setApproveTarget] = useState<Settlement | null>(null);
   const [rejectTarget, setRejectTarget] = useState<Settlement | null>(null);
@@ -32,10 +33,11 @@ export default function SettlementsPage() {
   const limit = 15;
 
   const { data, isLoading } = useQuery({
-    queryKey: ['settlements', page, statusFilter],
+    queryKey: ['settlements', page, search, statusFilter],
     queryFn: () => {
       const params = new URLSearchParams({ page: String(page), limit: String(limit) });
       if (statusFilter) params.set('status', statusFilter);
+      if (search) params.set('search', search);
       return api.get<PaginatedResponse<Settlement>>(`/api/v1/admin/settlements?${params}`);
     },
   });
@@ -83,7 +85,7 @@ export default function SettlementsPage() {
       />
 
       <div className="cp-card p-6">
-        <div className="flex items-center gap-3 mb-4">
+        <div className="flex items-center gap-3 mb-4 flex-wrap">
           {STATUS_FILTERS.map((f) => (
             <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
               className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
@@ -98,6 +100,9 @@ export default function SettlementsPage() {
           columns={columns}
           data={items}
           loading={isLoading}
+          searchValue={search}
+          onSearchChange={(v) => { setSearch(v); setPage(1); }}
+          searchPlaceholder="جستجو بر اساس نام نماینده..."
           emptyMessage="هیچ درخواست تسویه‌ای یافت نشد"
           actions={(s) => (
             <>
@@ -107,8 +112,11 @@ export default function SettlementsPage() {
               </button>
               {s.status === 'pending' && (
                 <>
-                  <button onClick={() => setApproveTarget(s)}
-                    className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors" title="تأیید">
+                  <button
+                    onClick={() => setApproveTarget(s)}
+                    className="cp-action-approve"
+                    title="تأیید"
+                  >
                     <CheckIcon className="w-4 h-4" />
                   </button>
                   <button onClick={() => setRejectTarget(s)}
@@ -126,7 +134,7 @@ export default function SettlementsPage() {
       <ConfirmDialog
         open={!!approveTarget}
         title="تأیید تسویه"
-        message={`آیا از تأیید درخواست تسویه ${approveTarget?.representation_name} به مبلغ ${approveTarget ? formatRial(approveTarget.amount) : ''} اطمینان دارید؟`}
+        message={`تسویه ${approveTarget?.representation_name} به مبلغ ${approveTarget ? formatRial(approveTarget.amount) : ''} را تأیید می‌کنید؟`}
         confirmLabel="تأیید"
         loading={approveMutation.isPending}
         onConfirm={() => approveTarget && approveMutation.mutate(approveTarget)}