From 9ba93f669073fadbe92c78f2eb3e39e30de476c1 Mon Sep 17 00:00:00 2001
From: suryac <surya.c@getzino.com>
Date: Wed, 5 Aug 2026 12:40:32 +0530
Subject: [PATCH] added sorting

---
 src/components/rv/RecordView.tsx | 41 +++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/rv/RecordView.tsx b/src/components/rv/RecordView.tsx
index 588cd4b..8329d56 100644
--- a/src/components/rv/RecordView.tsx
+++ b/src/components/rv/RecordView.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Search, X } from 'lucide-react';
+import { Search, X, ChevronUp, ChevronDown } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { formatValue } from '../../lib/format';
 import type { ZinoClient } from '../../api/client';
@@ -75,6 +75,29 @@ export function RecordView({
   const [search, setSearch] = useState('');
   const [debounced, setDebounced] = useState('');
 
+  const [internalSortBy, setInternalSortBy] = useState<string | undefined>(sortBy);
+  const [internalSortDir, setInternalSortDir] = useState<'asc' | 'desc' | undefined>(sortDir);
+
+  useEffect(() => {
+    setInternalSortBy(sortBy);
+    setInternalSortDir(sortDir);
+  }, [sortBy, sortDir]);
+
+  const handleSort = (fieldKey: string) => {
+    if (internalSortBy === fieldKey) {
+      if (internalSortDir === 'asc') {
+        setInternalSortDir('desc');
+      } else {
+        setInternalSortBy(undefined);
+        setInternalSortDir(undefined);
+      }
+    } else {
+      setInternalSortBy(fieldKey);
+      setInternalSortDir('asc');
+    }
+    setPage(1);
+  };
+
   const initialFiltersNormalized = useMemo(() => {
     const res: Record<string, string[]> = {};
     if (initialFilters) {
@@ -131,8 +154,8 @@ export function RecordView({
           limit: internalPageSize,
           search: debounced,
           filters: filtersParam,
-          sortBy,
-          sortDir,
+          sortBy: internalSortBy,
+          sortDir: internalSortDir,
           presetAlias
         });
        
@@ -147,7 +170,7 @@ export function RecordView({
     return () => {
       live = false;
     };
-  }, [client, rvUid, page, internalPageSize, debounced, filtersParam, refreshKey, sortBy, sortDir]);
+  }, [client, rvUid, page, internalPageSize, debounced, filtersParam, refreshKey, internalSortBy, internalSortDir]);
 
   const fields: RecordViewField[] = useMemo(() => {
     const all = resp?.config.fields ?? [];
@@ -331,9 +354,15 @@ export function RecordView({
                   {fields.map((f) => (
                     <th
                       key={f.field_key}
-                      className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-[var(--z-rv-table-header)]"
+                      onClick={() => handleSort(f.field_key)}
+                      className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-[var(--z-rv-table-header)] cursor-pointer select-none hover:bg-black/5 transition-colors"
                     >
-                      {f.output_label}
+                      <div className="flex items-center gap-1.5">
+                        {f.output_label}
+                        {internalSortBy === f.field_key && (
+                          internalSortDir === 'asc' ? <ChevronUp size={14} className="text-ruby-600" /> : <ChevronDown size={14} className="text-ruby-600" />
+                        )}
+                      </div>
                     </th>
                   ))}
                   {rowActions && (