fix(sorting): update handleSort to support dropdown sorting behavior and prevent rapid clicks

Author: MatinDehghanian

dashboard/src/components/users/columns.tsx

@@ -15,15 +15,15 @@ export const setupColumns = ({
   dir,
 }: {
   t: (key: string) => string
-  handleSort: (column: string) => void
+  handleSort: (column: string, fromDropdown?: boolean) => void
   filters: { sort: string; status?: string }
   handleStatusFilter: (value: string) => void
   dir: string
 }): ColumnDef<UserResponse>[] => [
   {
     accessorKey: 'username',
     header: () => (
-      <button onClick={handleSort.bind(null, 'username')} className="flex w-full items-center gap-1 px-2 py-3">
+      <button onClick={() => handleSort('username')} className="flex w-full items-center gap-1 px-2 py-3">
         <div className="text-xs">
           <span className="md:hidden">{t('users')}</span>
           <span className="hidden capitalize md:block">{t('username')}</span>
@@ -77,7 +77,7 @@ export const setupColumns = ({
         {/* Desktop expire sorting */}
         <div className="hidden items-center sm:flex">
           <span>/</span>
-          <button className="flex w-full items-center gap-1 px-2 py-3" onClick={handleSort.bind(null, 'expire')}>
+          <button className="flex w-full items-center gap-1 px-2 py-3" onClick={() => handleSort('expire')}>
             <div className="text-xs capitalize">
               <span className="md:hidden">{t('expire')}</span>
               <span className="hidden md:block">{t('expire')}</span>
@@ -115,7 +115,7 @@ export const setupColumns = ({
   {
     id: 'details',
     header: () => (
-      <button className="flex w-full items-center gap-1 px-0 py-3" onClick={handleSort.bind(null, 'used_traffic')}>
+      <button className="flex w-full items-center gap-1 px-0 py-3" onClick={() => handleSort('used_traffic')}>
         <div className="text-xs capitalize">
           <span className="md:hidden">{t('dataUsage')}</span>
           <span className="hidden md:block">{t('dataUsage')}</span>

dashboard/src/components/users/filters.tsx

@@ -61,7 +61,7 @@ interface FiltersProps {
   advanceSearchOnOpen: (status: boolean) => void
   advanceSearchForm?: UseFormReturn<Record<string, unknown>>
   onClearAdvanceSearch?: () => void
-  handleSort?: (column: string) => void
+  handleSort?: (column: string, fromDropdown?: boolean) => void
 }
 
 export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen, advanceSearchForm, onClearAdvanceSearch, handleSort }: FiltersProps) => {
@@ -196,7 +196,7 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
                   {section.items.map(item => (
                     <DropdownMenuItem
                       key={item.value}
-                      onClick={() => handleSort && handleSort(item.value)}
+                      onClick={() => handleSort && handleSort(item.value, true)}
                       className={`whitespace-nowrap px-2 py-1.5 text-xs md:px-3 md:py-2 ${filters.sort === item.value ? 'bg-accent' : ''}`}
                     >
                       <section.icon className="mr-1.5 h-3 w-3 flex-shrink-0 md:mr-2 md:h-4 md:w-4" />

dashboard/src/components/users/users-table.tsx

@@ -126,7 +126,7 @@ const UsersTable = memo(() => {
   // Filters will trigger new queries automatically
 
   const handleSort = useCallback(
-    (column: string) => {
+    (column: string, fromDropdown = false) => {
       // Prevent rapid clicking
       if (isSorting) return
 
@@ -136,24 +136,38 @@ const UsersTable = memo(() => {
 
       // Clean the column name in case it comes with prefix
       const cleanColumn = column.startsWith('-') ? column.slice(1) : column
-      const isDescending = column.startsWith('-')
 
-      if (isDescending) {
-        // User clicked on descending option
-        if (filters.sort === '-' + cleanColumn) {
-          // If already descending, reset to default
-          newSort = '-created_at'
+      if (fromDropdown) {
+        // Dropdown behavior: click to sort, click again to reset
+        if (column.startsWith('-')) {
+          // Dropdown descending option clicked
+          if (filters.sort === '-' + cleanColumn) {
+            // If already descending, reset to default
+            newSort = '-created_at'
+          } else {
+            // Set to descending
+            newSort = '-' + cleanColumn
+          }
         } else {
-          // Set to descending
-          newSort = '-' + cleanColumn
+          // Dropdown ascending option clicked
+          if (filters.sort === cleanColumn) {
+            // If already ascending, reset to default
+            newSort = '-created_at'
+          } else {
+            // Set to ascending
+            newSort = cleanColumn
+          }
         }
       } else {
-        // User clicked on ascending option
+        // Table column behavior: traditional 3-state cycling (asc → desc → asc)
         if (filters.sort === cleanColumn) {
-          // If already ascending, reset to default
-          newSort = '-created_at'
+          // If currently ascending, make it descending
+          newSort = '-' + cleanColumn
+        } else if (filters.sort === '-' + cleanColumn) {
+          // If currently descending, make it ascending
+          newSort = cleanColumn
         } else {
-          // Set to ascending
+          // If different column or default, make it ascending
           newSort = cleanColumn
         }
       }