update

frontend/src/pages/Contacts.jsx

@@ -1,5 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { Users, Mail, Building2, Briefcase, FileText, SlidersHorizontal, Loader2 } from 'lucide-react';
+import {
+    Users,
+    Mail,
+    Building2,
+    Briefcase,
+    FileText,
+    SlidersHorizontal,
+    Loader2,
+    ArrowUp,
+    ArrowDown,
+    ArrowUpDown,
+} from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -123,6 +134,43 @@ export default function Contacts() {
 
     const totalPages = Math.max(1, Math.ceil(total / Number(pageSize || 50)));
 
+    const toggleSort = (field) => {
+        if (sortBy === field) {
+            setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+        } else {
+            setSortBy(field);
+            setSortDir('asc');
+        }
+        setPage(1);
+    };
+
+    const SortHeader = ({ field, label, className = '' }) => {
+        const active = sortBy === field;
+        return (
+            <th className={`px-3 py-2 font-medium ${className}`}>
+                <button
+                    type="button"
+                    className="inline-flex items-center gap-1.5 text-left text-slate-600 hover:text-violet-700 transition-colors group"
+                    onClick={() => toggleSort(field)}
+                >
+                    <span>{label}</span>
+                    {active ? (
+                        sortDir === 'asc' ? (
+                            <ArrowUp className="h-3.5 w-3.5 text-violet-600 shrink-0" aria-hidden />
+                        ) : (
+                            <ArrowDown className="h-3.5 w-3.5 text-violet-600 shrink-0" aria-hidden />
+                        )
+                    ) : (
+                        <ArrowUpDown
+                            className="h-3.5 w-3.5 text-slate-300 group-hover:text-slate-400 shrink-0"
+                            aria-hidden
+                        />
+                    )}
+                </button>
+            </th>
+        );
+    };
+
     const filtersBlock = (
         <div className="space-y-3">
             <div className="flex items-center text-xs text-slate-500 gap-1.5 font-medium">
@@ -183,49 +231,6 @@ export default function Contacts() {
                         )}
                     </>
                 )}
-                <Select value={sortBy} onValueChange={setSortBy}>
-                    <SelectTrigger className="border-slate-200 bg-white">
-                        <SelectValue placeholder="Sort by" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="created_at">Created At</SelectItem>
-                        <SelectItem value="first_name">First Name</SelectItem>
-                        <SelectItem value="last_name">Last Name</SelectItem>
-                        <SelectItem value="email">Email</SelectItem>
-                        <SelectItem value="company">Company</SelectItem>
-                        <SelectItem value="title">Title</SelectItem>
-                        {fields.map((field) => (
-                            <SelectItem key={`sort-${field}`} value={field}>
-                                {field}
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-                <Select value={sortDir} onValueChange={setSortDir}>
-                    <SelectTrigger className="border-slate-200 bg-white">
-                        <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="asc">Ascending</SelectItem>
-                        <SelectItem value="desc">Descending</SelectItem>
-                    </SelectContent>
-                </Select>
-                <Select
-                    value={pageSize}
-                    onValueChange={(v) => {
-                        setPageSize(v);
-                        setPage(1);
-                    }}
-                >
-                    <SelectTrigger className="border-slate-200 bg-white">
-                        <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="25">25 / page</SelectItem>
-                        <SelectItem value="50">50 / page</SelectItem>
-                        <SelectItem value="100">100 / page</SelectItem>
-                    </SelectContent>
-                </Select>
             </div>
         </div>
     );
@@ -236,10 +241,6 @@ export default function Contacts() {
             subtitle="Apollo CSV contacts stored in SQLite with full field payload."
         >
             <MainTableWorkspace
-                tabs={[
-                    { label: 'Main table', active: true },
-                    { label: 'By company', active: false, disabled: true },
-                ]}
                 primaryAction={{ label: 'New contact', to: '/' }}
                 search={{
                     value: searchQuery,
@@ -272,11 +273,11 @@ export default function Contacts() {
                         <>
                             <table className="w-full text-sm min-w-[720px]">
                                 <thead>
-                                    <tr className="bg-slate-50 text-left text-slate-600 border-b border-slate-200">
-                                        <th className="px-3 py-2 font-medium">Name</th>
-                                        <th className="px-3 py-2 font-medium">Email</th>
-                                        <th className="px-3 py-2 font-medium">Company</th>
-                                        <th className="px-3 py-2 font-medium">Title</th>
+                                    <tr className="bg-slate-50 text-left border-b border-slate-200">
+                                        <SortHeader field="first_name" label="Name" />
+                                        <SortHeader field="email" label="Email" />
+                                        <SortHeader field="company" label="Company" />
+                                        <SortHeader field="title" label="Title" />
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -315,9 +316,28 @@ export default function Contacts() {
                                     })}
                                 </tbody>
                             </table>
-                            <div className="flex items-center justify-between px-4 py-3 border-t border-slate-100 bg-slate-50/50">
-                                <div className="text-xs text-slate-500">
-                                    Page {page} of {totalPages}
+                            <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3 border-t border-slate-100 bg-slate-50/50">
+                                <div className="flex flex-wrap items-center gap-3 text-xs text-slate-600">
+                                    <span className="text-slate-500">Rows per page</span>
+                                    <Select
+                                        value={pageSize}
+                                        onValueChange={(v) => {
+                                            setPageSize(v);
+                                            setPage(1);
+                                        }}
+                                    >
+                                        <SelectTrigger className="h-8 w-[88px] border-slate-200 bg-white text-xs">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="25">25</SelectItem>
+                                            <SelectItem value="50">50</SelectItem>
+                                            <SelectItem value="100">100</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    <span className="text-slate-500">
+                                        Page {page} of {totalPages}
+                                    </span>
                                 </div>
                                 <div className="flex items-center gap-2">
                                     <Button