Refactor code structure and remove redundant changes

src-old/components/common/SortControls.tsx

@@ -0,0 +1,122 @@
+import { ArrowUp, ArrowDown, Loader2 } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+
+interface SortControlsProps<T extends string = string> {
+  /** Current sort field */
+  sortField: T;
+  
+  /** Current sort direction */
+  sortDirection: 'asc' | 'desc';
+  
+  /** Available sort fields with labels */
+  sortFields: Record<T, string>;
+  
+  /** Handler for field change */
+  onFieldChange: (field: T) => void;
+  
+  /** Handler for direction toggle */
+  onDirectionToggle: () => void;
+  
+  /** Whether component is in mobile mode */
+  isMobile?: boolean;
+  
+  /** Whether data is loading */
+  isLoading?: boolean;
+  
+  /** Optional label for the sort selector */
+  label?: string;
+}
+
+/**
+ * Generic reusable sort controls component
+ * 
+ * Provides consistent sorting UI across the application:
+ * - Field selector with custom labels
+ * - Direction toggle (asc/desc)
+ * - Mobile-responsive layout
+ * - Loading states
+ * 
+ * @example
+ * ```tsx
+ * <SortControls
+ *   sortField={sortConfig.field}
+ *   sortDirection={sortConfig.direction}
+ *   sortFields={{
+ *     created_at: 'Date Created',
+ *     name: 'Name',
+ *     status: 'Status'
+ *   }}
+ *   onFieldChange={(field) => setSortConfig({ ...sortConfig, field })}
+ *   onDirectionToggle={() => setSortConfig({
+ *     ...sortConfig,
+ *     direction: sortConfig.direction === 'asc' ? 'desc' : 'asc'
+ *   })}
+ *   isMobile={isMobile}
+ * />
+ * ```
+ */
+export function SortControls<T extends string = string>({
+  sortField,
+  sortDirection,
+  sortFields,
+  onFieldChange,
+  onDirectionToggle,
+  isMobile = false,
+  isLoading = false,
+  label = 'Sort By',
+}: SortControlsProps<T>) {
+  const DirectionIcon = sortDirection === 'asc' ? ArrowUp : ArrowDown;
+
+  return (
+    <div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-end'}`}>
+      <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[160px]'}`}>
+        <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'} flex items-center gap-2`}>
+          {label}
+          {isLoading && <Loader2 className="w-3 h-3 animate-spin text-primary" />}
+        </Label>
+        <Select 
+          value={sortField} 
+          onValueChange={onFieldChange}
+          disabled={isLoading}
+        >
+          <SelectTrigger className={isMobile ? "h-10" : ""} disabled={isLoading}>
+            <SelectValue>
+              {sortFields[sortField]}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(sortFields).map(([field, label]) => (
+              <SelectItem key={field} value={field}>
+                {label as string}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className={isMobile ? "" : "pb-[2px]"}>
+        <Button
+          variant="outline"
+          size={isMobile ? "default" : "icon"}
+          onClick={onDirectionToggle}
+          disabled={isLoading}
+          className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : 'h-10 w-10'}`}
+          title={sortDirection === 'asc' ? 'Ascending' : 'Descending'}
+        >
+          {isLoading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <DirectionIcon className="w-4 h-4" />
+          )}
+          {isMobile && (
+            <span className="capitalize">
+              {isLoading ? 'Loading...' : `${sortDirection}ending`}
+            </span>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}