status order

src/App.jsx

@@ -11,7 +11,7 @@ import Currency from './pages/Currency';
 import Employees from './pages/Employees';
 import Login from './pages/Login';
 import Payments from './pages/Payments';
-import Permissions from './pages/Permissions'; // Yangi sahifa
+import Permissions from './pages/Permissions';
 import Reference from './pages/Reference';
 import Warhouses from './pages/Warhouses';
 

src/components/Searchs.tsx

@@ -1,13 +1,29 @@
 import { Search } from 'lucide-react';
+import { Dispatch, SetStateAction } from 'react';
 
-const Searchs = ({ searchTerm, loading, setSearchTerm, placeholder = 'Ism, telefon yoki manzil bo‘yicha qidirish...' }) => {
+interface Props {
+  searchTerm: string;
+  loading: boolean;
+  setSearchTerm: Dispatch<SetStateAction<string>>;
+  placeholder: string;
+}
+
+const Searchs = ({ searchTerm, loading, setSearchTerm, placeholder = 'Qidirish' }: Props) => {
   return (
     <div className="mb-4">
       <label htmlFor="search" className="sr-only">
         Qidiruv
       </label>
       <div className="relative max-w-md">
-        <input type="text" id="search" placeholder={placeholder} value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full border border-slate-300 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#3489e3]" disabled={loading} />
+        <input
+          type="text"
+          id="search"
+          placeholder={placeholder}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="w-full border border-slate-300 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#3489e3]"
+          disabled={loading}
+        />
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
       </div>
     </div>

src/components/clients/ClientList.jsx

@@ -2,8 +2,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Edit, Trash2, Users } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import axiosInstance from '../../api/axiosInstance';
-import Searchs from '../../components/Searchs';
 import Pagination from '../Pagination';
+import Searchs from '../Searchs';
 
 const ClientList = ({ alert, setAlert, setClients, setCargoId }) => {
   const client = useQueryClient();
@@ -24,7 +24,7 @@ const ClientList = ({ alert, setAlert, setClients, setCargoId }) => {
       axiosInstance.get('/clients/list', {
         params: {
           page: currentPage,
-          sort: 'id',
+          sort: 'active',
           clientName: searchTerm,
           direction: 'desc',
         },
@@ -44,7 +44,7 @@ const ClientList = ({ alert, setAlert, setClients, setCargoId }) => {
   };
 
   const { mutate: deleteClient, isPending: deleteLoad } = useMutation({
-    mutationFn: (id: number) => axiosInstance.delete(`/users/delete/${id}`),
+    mutationFn: (id) => axiosInstance.delete(`/users/delete/${id}`),
     mutationKey: ['clientsDelete'],
     onSuccess: () => {
       client.invalidateQueries({ queryKey: ['clients'] });
@@ -57,7 +57,7 @@ const ClientList = ({ alert, setAlert, setClients, setCargoId }) => {
     },
   });
 
-  const handlePageChange = (page: number) => {
+  const handlePageChange = (page) => {
     setCurrentPage(page);
   };
 
@@ -81,7 +81,10 @@ const ClientList = ({ alert, setAlert, setClients, setCargoId }) => {
                 <th className="text-left p-4">Passport seriyasi</th>
                 <th className="text-left p-4">PNFL</th>
                 <th className="text-left p-4">Tug'ilgan sana</th>
-                {(userRole === 'ADMIN' || userRole === 'SUPER_ADMIN') && <th className="text-left p-4">Amallar</th>}
+                <th className="text-left p-4">Holati</th>
+                {(userRole === 'ADMIN' || userRole === 'SUPER_ADMIN') && (
+                  <th className="text-left p-4">Amallar</th>
+                )}
               </tr>
             </thead>
             <tbody className="divide-y divide-slate-200">
@@ -95,14 +98,32 @@ const ClientList = ({ alert, setAlert, setClients, setCargoId }) => {
                     <td className="p-4">{client.passportSeries}</td>
                     <td className="p-4">{client.pinfl}</td>
                     <td className="p-4">{client.dateOfBirth}</td>
+                    {/* <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        className="sr-only peer"
+                        checked={client.active}
+                        onChange={handleActive}
+                      />
+                      <div className="w-11 h-6 bg-gray-300 rounded-full peer peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-400 transition-colors duration-300"></div>
+                      <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform duration-300 peer-checked:translate-x-5"></div>
+                    </label> */}
                     {(userRole === 'ADMIN' || userRole === 'SUPER_ADMIN') && (
                       <td className="p-4">
                         <div className="flex gap-2">
-                          <button onClick={() => handleEdit(client.id, client.aviaCargoId)} className="flex items-center gap-1 border border-yellow-300 text-yellow-700 hover:bg-yellow-50 px-3 py-1 rounded-lg" disabled={isLoading}>
+                          <button
+                            onClick={() => handleEdit(client.id, client.aviaCargoId)}
+                            className="flex items-center gap-1 border border-yellow-300 text-yellow-700 hover:bg-yellow-50 px-3 py-1 rounded-lg"
+                            disabled={isLoading}
+                          >
                             <Edit className="h-4 w-4" />
                             <span className="hidden sm:inline">Tahrirlash</span>
                           </button>
-                          <button onClick={() => deleteClient(client.id)} className="flex items-center gap-1 border border-red-300 text-red-700 hover:bg-red-50 px-3 py-1 rounded-lg" disabled={deleteLoad}>
+                          <button
+                            onClick={() => deleteClient(client.id)}
+                            className="flex items-center gap-1 border border-red-300 text-red-700 hover:bg-red-50 px-3 py-1 rounded-lg"
+                            disabled={deleteLoad}
+                          >
                             <Trash2 className="h-4 w-4" />
                             <span className="hidden sm:inline">O'chirish</span>
                           </button>
@@ -116,7 +137,13 @@ const ClientList = ({ alert, setAlert, setClients, setCargoId }) => {
         </div>
       </div>
       <div className="flex items-end mt-5 justify-end">
-        <Pagination currentPage={currentPage} totalPages={data?.totalPages || 1} totalElements={data?.totalElements || 0} onPageChange={handlePageChange} isLoading={isLoading} />
+        <Pagination
+          currentPage={currentPage}
+          totalPages={data?.totalPages || 1}
+          totalElements={data?.totalElements || 0}
+          onPageChange={handlePageChange}
+          isLoading={isLoading}
+        />
       </div>
     </>
   );

src/components/clients/CreateClient.tsx

@@ -80,7 +80,7 @@ const CreateClient = ({ clients, setAlert, cargoId }: CreateClientProps) => {
   const { data: client, refetch: clientRef } = useQuery({
     queryKey: ['client_one'],
     queryFn: async () => axiosInstance.get('/clients/list', { params: { cargoId } }),
-    select: (data) => data.data.data as { data: any[] },
+    select: (data) => data.data.data,
   });
 
   const { data, refetch } = useQuery({
@@ -102,23 +102,24 @@ const CreateClient = ({ clients, setAlert, cargoId }: CreateClientProps) => {
         phone: c.phone,
         pinfl: c.pinfl,
       });
+      setActive(c.active);
     }
     clientRef();
     refetch();
   }, [cargoId, client, refetch, clientRef]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (currentPassport) {
+    if (currentPassport) {
-  //     setFormData((prev) => ({
+      setFormData((prev) => ({
-  //       ...prev,
+        ...prev,
-  //       fullName: currentPassport.fullName || '',
+        fullName: currentPassport.fullName || '',
-  //       passportSeries: currentPassport.passportSeries || '',
+        passportSeries: currentPassport.passportSeries || '',
-  //       pinfl: currentPassport.passportPin || '',
+        pinfl: currentPassport.passportPin || '',
-  //       dateOfBirth: formatDate(currentPassport.birthDate),
+        dateOfBirth: formatDate(currentPassport.birthDate),
-  //     }));
+      }));
-  //     setActive(currentPassport.active);
+      setActive(currentPassport.active);
-  //   }
+    }
-  // }, [currentPassport]);
+  }, [currentPassport]);
 
   const { mutate: createMutate } = useMutation({
     mutationFn: async (params: any) => {
@@ -202,6 +203,8 @@ const CreateClient = ({ clients, setAlert, cargoId }: CreateClientProps) => {
     setAlert({ type: 'success', message: "Passport ma'lumotlari yangilandi." });
   };
 
+  console.log(active);
+
   return (
     <div>
       {(userRole === 'ADMIN' || userRole === 'SUPER_ADMIN') && (
@@ -211,7 +214,15 @@ const CreateClient = ({ clients, setAlert, cargoId }: CreateClientProps) => {
             {clients ? 'Mijozni tahrirlash' : "Yangi mijoz qo'shish"}
           </h2>
 
-          {clients && data && data.length > 0 && <PassportCarousel passports={data} onUpdate={handlePassportUpdate} setTargetImage={setTargetImage} setOpenModal={setOpenModal} setCurrentPassport={setCurrentPassport} />}
+          {clients && data && data.length > 0 && (
+            <PassportCarousel
+              passports={data}
+              onUpdate={handlePassportUpdate}
+              setTargetImage={setTargetImage}
+              setOpenModal={setOpenModal}
+              setCurrentPassport={setCurrentPassport}
+            />
+          )}
 
           <form className="space-y-6" onSubmit={onSubmit}>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-10">
@@ -225,13 +236,24 @@ const CreateClient = ({ clients, setAlert, cargoId }: CreateClientProps) => {
               ].map((field) => (
                 <div key={field.name}>
                   <label className="block text-sm font-medium mb-1">{field.label}</label>
-                  <input type={field.type} name={field.name} value={formData[field.name as keyof FormData]} onChange={handleChange} className="w-full border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#3489e3]" />
+                  <input
+                    type={field.type}
+                    name={field.name}
+                    value={formData[field.name as keyof FormData]}
+                    onChange={handleChange}
+                    className="w-full border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#3489e3]"
+                  />
                 </div>
               ))}
 
               {clients && currentPassport && (
                 <label className="relative inline-flex items-center cursor-pointer">
-                  <input type="checkbox" className="sr-only peer" checked={active} onChange={handleActive} />
+                  <input
+                    type="checkbox"
+                    className="sr-only peer"
+                    checked={active}
+                    onChange={handleActive}
+                  />
                   <div className="w-11 h-6 bg-gray-300 rounded-full peer peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-400 transition-colors duration-300"></div>
                   <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform duration-300 peer-checked:translate-x-5"></div>
                 </label>
@@ -239,22 +261,42 @@ const CreateClient = ({ clients, setAlert, cargoId }: CreateClientProps) => {
             </div>
 
             <div className="flex flex-col sm:flex-row gap-3 pt-4">
-              <button type="submit" className="bg-[#3489e3] hover:bg-blue-500 text-white px-6 py-2 rounded-lg disabled:opacity-60">
+              <button
+                type="submit"
+                className="bg-[#3489e3] hover:bg-blue-500 text-white px-6 py-2 rounded-lg disabled:opacity-60"
+              >
                 {clients ? 'Yangilash' : "Qo'shish"}
               </button>
-              <button type="button" className="border border-slate-300 text-slate-700 hover:bg-slate-50 px-6 py-2 rounded-lg">
+              <button
+                type="button"
+                className="border border-slate-300 text-slate-700 hover:bg-slate-50 px-6 py-2 rounded-lg"
+              >
                 Bekor qilish
               </button>
             </div>
           </form>
         </div>
       )}
-      {tagetIamge && opneModal && <ModalIamge image={tagetIamge} setTargetImage={setTargetImage} setOpenModal={setOpenModal} />}
+      {tagetIamge && opneModal && (
+        <ModalIamge
+          image={tagetIamge}
+          setTargetImage={setTargetImage}
+          setOpenModal={setOpenModal}
+        />
+      )}
     </div>
   );
 };
 
-const ModalIamge = ({ image, setTargetImage, setOpenModal }: { image: string; setTargetImage: (img: string | null) => void; setOpenModal: (open: boolean) => void }) => {
+const ModalIamge = ({
+  image,
+  setTargetImage,
+  setOpenModal,
+}: {
+  image: string;
+  setTargetImage: (img: string | null) => void;
+  setOpenModal: (open: boolean) => void;
+}) => {
   return (
     <div className="w-full h-screen bg-black/60 fixed top-0 bottom-0 left-0 z-50 overflow-hidden">
       <button

src/components/payments/ModalPayment.jsx

@@ -1,7 +1,17 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { AlertCircle, CheckCircle, Clock, CreditCard, Package, Phone, User, X, XCircle } from 'lucide-react';
+import {
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  CreditCard,
+  Package,
+  Phone,
+  User,
+  X,
+  XCircle,
+} from 'lucide-react';
 import { useEffect } from 'react';
 import axiosInstance from '../../api/axiosInstance';
 import { cn } from '../../lib/utils';
@@ -71,7 +81,9 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
     return new Intl.NumberFormat('uz-UZ').format(amount) + " so'm";
   };
 
-  const currentStatus = data ? paymentStatuses.find((status) => status.value === data.paymentStatus) : paymentStatuses[0];
+  const currentStatus = data
+    ? paymentStatuses.find((status) => status.value === data.paymentStatus)
+    : paymentStatuses[0];
   const CurrentIcon = currentStatus ? currentStatus.icon : paymentStatuses[0];
 
   return (
@@ -80,7 +92,10 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
       <div className="relative bg-white rounded-xl shadow-2xl w-[800px] max-w-[95vw] max-h-[90vh] overflow-hidden">
         <div className="flex items-center justify-between p-6 border-b border-gray-200">
           <h2 className="text-xl font-semibold text-gray-900">To'lov ma'lumotlari</h2>
-          <button onClick={onClose} className="p-2 rounded-full hover:bg-gray-100 transition-colors">
+          <button
+            onClick={onClose}
+            className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+          >
             <X className="w-5 h-5 text-gray-500" />
           </button>
         </div>
@@ -90,7 +105,10 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
             <div className="flex flex-col items-center justify-center py-12">
               <XCircle className="w-12 h-12 text-red-400 mb-3" />
               <p className="text-red-600 text-center">Ma'lumotlarni yuklashda xatolik yuz berdi</p>
-              <button onClick={() => refetch()} className="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+              <button
+                onClick={() => refetch()}
+                className="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
                 Qayta urinish
               </button>
             </div>
@@ -125,7 +143,14 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
                   </div>
                   <div className="flex flex-col gap-4">
                     <span className="font-medium text-lg text-gray-600">To'lov holati:</span>
-                    <button className={cn('inline-flex w-fit items-center gap-1 px-2 py-1 rounded-full font-medium text-lg', currentStatus.bgColor, currentStatus.borderColor, currentStatus.color)}>
+                    <button
+                      className={cn(
+                        'inline-flex w-fit items-center gap-1 px-2 py-1 rounded-full font-medium text-lg',
+                        currentStatus.bgColor,
+                        currentStatus.borderColor,
+                        currentStatus.color
+                      )}
+                    >
                       <CurrentIcon className="h-4 w-4" />
                       <span className="font-medium">{currentStatus.label}</span>
                     </button>
@@ -162,11 +187,21 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
                       <button
                         className={cn(
                           'inline-flex w-fit items-center gap-1 px-2 py-1 rounded-full font-medium text-lg',
-                          data.paymentType === null ? 'bg-red-50 text-red-600 border-red-200' : data.paymentType === 'CASH' ? 'bg-green-50 text-green-600 border-green-200' : 'bg-green-50 text-green-600 border-green-200'
+                          data.paymentType === null
+                            ? 'bg-red-50 text-red-600 border-red-200'
+                            : data.paymentType === 'CASH'
+                            ? 'bg-green-50 text-green-600 border-green-200'
+                            : 'bg-green-50 text-green-600 border-green-200'
                         )}
                       >
                         <CurrentIcon className="h-4 w-4" />
-                        <span className="font-medium">{data.paymentType === null ? "To'lanmagan" : data.paymentType === 'CASH' ? 'Naqd' : data.paymentType}</span>
+                        <span className="font-medium">
+                          {data.paymentType === null
+                            ? "To'lanmagan"
+                            : data.paymentType === 'CASH'
+                            ? 'Naqd'
+                            : data.paymentType}
+                        </span>
                       </button>
                     </div>
                   </div>
@@ -183,16 +218,21 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
                     {data.clickTransactions.map((transaction, index) => (
                       <div key={index} className="border border-gray-200 rounded-lg p-4 bg-white">
                         <div className="flex items-center justify-between mb-3">
-                          <span className="font-medium text-lg text-gray-900">ID: {transaction.transactionId}</span>
+                          <span className="font-medium text-lg text-gray-900">
-                          <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full font-medium text-lg ${getStatusColor(transaction.status)}`}>
+                            ID: {transaction.transactionId}
-                            {getStatusIcon(transaction.status)}
+                          </span>
+                          <span
+                            className={`inline-flex items-center gap-1 px-2 py-1 rounded-full font-medium text-lg`}
+                          >
                             {transaction.status}
                           </span>
                         </div>
                         <div className="grid grid-cols-2 gap-3 text-sm">
                           <div>
                             <span className="font-medium text-lg text-gray-600">Summa:</span>
-                            <p className="text-gray-900 font-semibold">{formatAmount(transaction.amount)}</p>
+                            <p className="text-gray-900 font-semibold">
+                              {formatAmount(transaction.amount)}
+                            </p>
                           </div>
                           <div>
                             <span className="font-medium text-lg text-gray-600">Provayder:</span>
@@ -204,13 +244,19 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
                           </div>
                           {transaction.completeTime && (
                             <div>
-                              <span className="font-medium text-lg text-gray-600">Tugallangan:</span>
+                              <span className="font-medium text-lg text-gray-600">
-                              <p className="text-gray-900">{formatDate(transaction.completeTime)}</p>
+                                Tugallangan:
+                              </span>
+                              <p className="text-gray-900">
+                                {formatDate(transaction.completeTime)}
+                              </p>
                             </div>
                           )}
                           {transaction.cancelTime && (
                             <div>
-                              <span className="font-medium text-lg text-gray-600">Bekor qilingan:</span>
+                              <span className="font-medium text-lg text-gray-600">
+                                Bekor qilingan:
+                              </span>
                               <p className="text-gray-900">{formatDate(transaction.cancelTime)}</p>
                             </div>
                           )}
@@ -239,16 +285,21 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
                     {data.paymeTransactions.map((transaction, index) => (
                       <div key={index} className="border border-gray-200 rounded-lg p-4 bg-white">
                         <div className="flex items-center justify-between mb-3">
-                          <span className="font-medium text-lg text-gray-900">ID: {transaction.transactionId}</span>
+                          <span className="font-medium text-lg text-gray-900">
-                          <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full font-medium text-lg ${getStatusColor(transaction.status)}`}>
+                            ID: {transaction.transactionId}
-                            {getStatusIcon(transaction.status)}
+                          </span>
+                          <span
+                            className={`inline-flex items-center gap-1 px-2 py-1 rounded-full font-medium text-lg`}
+                          >
                             {transaction.status}
                           </span>
                         </div>
                         <div className="grid grid-cols-2 gap-3 text-sm">
                           <div>
                             <span className="font-medium text-lg text-gray-600">Summa:</span>
-                            <p className="text-gray-900 font-semibold">{formatAmount(transaction.amount)}</p>
+                            <p className="text-gray-900 font-semibold">
+                              {formatAmount(transaction.amount)}
+                            </p>
                           </div>
                           <div>
                             <span className="font-medium text-lg text-gray-600">Provayder:</span>
@@ -260,13 +311,19 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
                           </div>
                           {transaction.completeTime && (
                             <div>
-                              <span className="font-medium text-lg text-gray-600">Tugallangan:</span>
+                              <span className="font-medium text-lg text-gray-600">
-                              <p className="text-gray-900">{formatDate(transaction.completeTime)}</p>
+                                Tugallangan:
+                              </span>
+                              <p className="text-gray-900">
+                                {formatDate(transaction.completeTime)}
+                              </p>
                             </div>
                           )}
                           {transaction.cancelTime && (
                             <div>
-                              <span className="font-medium text-lg text-gray-600">Bekor qilingan:</span>
+                              <span className="font-medium text-lg text-gray-600">
+                                Bekor qilingan:
+                              </span>
                               <p className="text-gray-900">{formatDate(transaction.cancelTime)}</p>
                             </div>
                           )}
@@ -285,7 +342,11 @@ const ModalPayment = ({ isOpen, onClose, packetId }) => {
                 </div>
               )}
 
-              {(!data.clickTransactions || data.clickTransactions.length === 0) && (!data.paymeTransactions || data.paymeTransactions.length === 0) && !(['PAYED', 'PENDING'].includes(data.paymentStatus) && data.paymentType === 'CASH') && (
+              {(!data.clickTransactions || data.clickTransactions.length === 0) &&
+                (!data.paymeTransactions || data.paymeTransactions.length === 0) &&
+                !(
+                  ['PAYED', 'PENDING'].includes(data.paymentStatus) && data.paymentType === 'CASH'
+                ) && (
                   <div className="text-center py-8">
                     <Clock className="w-12 h-12 text-gray-400 mx-auto mb-3" />
                     <p className="text-gray-500">Hozircha tranzaksiyalar mavjud emas</p>

src/components/payments/PaymentStatusSelector.jsx

@@ -40,18 +40,14 @@ const PaymentStatusSelector = ({ value, onChange, disabled = false }) => {
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
   const buttonRef = useRef(null);
 
-  const currentStatus = paymentStatuses.find((status) => status.value === value) || paymentStatuses[0];
+  const currentStatus =
+    paymentStatuses.find((status) => status.value === value) || paymentStatuses[0];
   const CurrentIcon = currentStatus.icon;
 
   const handleSelect = (statusValue) => {
-    if (statusValue === 'PAID' && (value === 'UNPAID' || value === 'PENDING')) {
+    // Faqat PAYED holatiga o'tkazish
+    if (statusValue === 'PAYED' && value !== 'PAYED') {
       onChange('PAYED');
-    } else if (statusValue === 'PAID' && value === 'PAID') {
-      // Already paid, do nothing
-      return;
-    } else if (statusValue !== 'PAID') {
-      // Show warning for non-PAID status changes
-      return;
     }
     setIsOpen(false);
   };
@@ -88,17 +84,18 @@ const PaymentStatusSelector = ({ value, onChange, disabled = false }) => {
           <CurrentIcon className="h-4 w-4" />
           <span className="font-medium">{currentStatus.label}</span>
         </div>
-        {!disabled && <ChevronDown className={cn('h-4 w-4 transition-transform duration-200', isOpen && 'rotate-180')} />}
+        {!disabled && (
+          <ChevronDown
+            className={cn('h-4 w-4 transition-transform duration-200', isOpen && 'rotate-180')}
+          />
+        )}
       </button>
 
       {/* Options (portal) */}
       {isOpen &&
         createPortal(
           <>
-            {/* Backdrop */}
             <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
-
-            {/* Dropdown */}
             <div
               className="absolute bg-white border border-slate-200 rounded-lg shadow-lg z-50 overflow-hidden"
               style={{
@@ -111,17 +108,24 @@ const PaymentStatusSelector = ({ value, onChange, disabled = false }) => {
               {paymentStatuses.map((status) => {
                 const StatusIcon = status.icon;
                 const isSelected = status.value === value;
-                const isDisabled = status.value !== 'PAID' || value === 'PAID';
 
                 return (
                   <button
                     key={status.value}
                     type="button"
-                    onClick={() => !isDisabled && handleSelect(status.value)}
+                    onClick={() => handleSelect(status.value)}
-                    disabled={isDisabled}
+                    className={cn(
-                    className={cn('flex items-center gap-3 w-full px-3 py-2.5 text-sm transition-colors duration-150', isDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-slate-50 focus:bg-slate-50 focus:outline-none cursor-pointer', isSelected && 'bg-slate-100')}
+                      'flex items-center gap-3 w-full px-3 py-2.5 text-sm hover:bg-slate-50 transition-colors duration-150'
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        'flex items-center justify-center w-6 h-6 rounded-full',
+                        status.bgColor,
+                        status.borderColor,
+                        'border'
+                      )}
                     >
-                    <div className={cn('flex items-center justify-center w-6 h-6 rounded-full', status.bgColor, status.borderColor, 'border')}>
                       <StatusIcon className={cn('h-3 w-3', status.color)} />
                     </div>
                     <span className={cn('font-medium', status.color)}>{status.label}</span>

src/components/payments/PaymentsList.jsx

@@ -2,7 +2,7 @@
 
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { QrCode, Search, Users } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import axiosInstance from '../../api/axiosInstance';
 import Pagination from '../Pagination';
 import ModalPayment from './ModalPayment';
@@ -17,15 +17,17 @@ const PaymentsList = ({ setAlert }) => {
   const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
   const [scannedResult, setScannedResult] = useState(null);
   const [packetid, setPacketId] = useState();
+  const [userRole, setUserRole] = useState('');
 
-  const userRole = (() => {
+  useEffect(() => {
-    try {
     const storedUser = localStorage.getItem('user');
-      return storedUser ? JSON.parse(storedUser).user.role : null;
+    if (storedUser) {
-    } catch {
+      const parsed = JSON.parse(storedUser);
-      return null;
+      setUserRole(parsed.user?.role || null);
     }
-  })();
+  }, []);
+
+  console.log(userRole);
 
   const { data, isLoading, refetch } = useQuery({
     queryKey: ['payments_list', currentPage, searchTerm, cargoType],
@@ -36,6 +38,7 @@ const PaymentsList = ({ setAlert }) => {
           cargoType,
           size: 30,
           search: searchTerm,
+          sort: 'paymentStatus',
         },
       }),
     select(data) {
@@ -86,7 +89,11 @@ const PaymentsList = ({ setAlert }) => {
           refetch();
         }}
       />
-      <ModalPayment packetId={packetid} isOpen={isPaymentModalOpen} onClose={() => setIsPaymentModalOpen(false)} />
+      <ModalPayment
+        packetId={packetid}
+        isOpen={isPaymentModalOpen}
+        onClose={() => setIsPaymentModalOpen(false)}
+      />
 
       <div className="relative flex gap-4">
         <div className="mb-4 w-[90%]">
@@ -97,7 +104,7 @@ const PaymentsList = ({ setAlert }) => {
             <input
               type="text"
               id="search"
-              placeholder={"Cargo Ids, Partiya nomi, Paket nomi bo'yicha qidirish"}
+              placeholder={"Cargo Ids, Paket nomi bo'yicha qidirish"}
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               className="w-full border border-slate-300 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#3489e3]"
@@ -106,7 +113,11 @@ const PaymentsList = ({ setAlert }) => {
           </div>
         </div>
         <div className="mb-4 w-[10%]">
-          <select name="role" className="w-full border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#3489e3]" onChange={(e) => setCargoType(e.target.value)}>
+          <select
+            name="role"
+            className="w-full border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#3489e3]"
+            onChange={(e) => setCargoType(e.target.value)}
+          >
             <option value="">Barchasi</option>
             <option value="AVIA">AVIA</option>
             <option value="AUTO">AUTO</option>
@@ -115,7 +126,10 @@ const PaymentsList = ({ setAlert }) => {
       </div>
 
       <div className="flex justify-end mb-4">
-        <button className="bg-[#28A7E8] rounded-md p-2 cursor-pointer hover:bg-[#2196d3] transition-colors" onClick={() => setIsQrModalOpen(true)}>
+        <button
+          className="bg-[#28A7E8] rounded-md p-2 cursor-pointer hover:bg-[#2196d3] transition-colors"
+          onClick={() => setIsQrModalOpen(true)}
+        >
           <QrCode className="size-6 text-white" />
         </button>
       </div>
@@ -162,10 +176,20 @@ const PaymentsList = ({ setAlert }) => {
                       <td className="p-4">{client.cargoId}</td>
                       <td className="p-4">{client.partyName}</td>
                       <td className="p-4 max-w-3xs">{client.packetName}</td>
-                      {client.paymentType === null ? <td className="p-4 text-red-500">To'lanmagan</td> : <td className="p-4 text-green-600">{client.paymentType === 'CASH' ? 'Naxt' : client.paymentType}</td>}
+                      {client.paymentType === null ? (
+                        <td className="p-4 text-red-500">To'lanmagan</td>
+                      ) : (
+                        <td className="p-4 text-green-600">
+                          {client.paymentType === 'CASH' ? 'Naxt' : client.paymentType}
+                        </td>
+                      )}
                       {(userRole === 'ADMIN' || userRole === 'SUPER_ADMIN') && (
                         <td className="p-4">
-                          <PaymentStatusSelector value={client.paymentStatus || 'NEW'} onChange={(value) => handlePaymentStatusChange(client.packetId, value)} disabled={client.paymentStatus === 'PAYED'} />
+                          <PaymentStatusSelector
+                            value={client.paymentStatus || 'NEW'}
+                            onChange={(value) => handlePaymentStatusChange(client.packetId, value)}
+                            disabled={client.paymentStatus === 'PAYED'}
+                          />
                         </td>
                       )}
                       <td className="p-4">
@@ -187,7 +211,13 @@ const PaymentsList = ({ setAlert }) => {
       </div>
 
       <div className="flex items-end mt-5 justify-end">
-        <Pagination currentPage={currentPage} totalPages={data?.totalPages || 1} totalElements={data?.totalElements || 0} onPageChange={handlePageChange} isLoading={isLoading} />
+        <Pagination
+          currentPage={currentPage}
+          totalPages={data?.totalPages || 1}
+          totalElements={data?.totalElements || 0}
+          onPageChange={handlePageChange}
+          isLoading={isLoading}
+        />
       </div>
     </>
   );