update

backend/app/main.py

@@ -201,6 +201,8 @@ async def list_contacts(
     op: str = Query("contains", description="Filter op: contains|equals|from|to|between"),
     from_value: str = Query("", description="From value for range filters"),
     to_value: str = Query("", description="To value for range filters"),
+    sort_by: str = Query("created_at", description="Sort field"),
+    sort_dir: str = Query("desc", description="Sort direction: asc|desc"),
     limit: int = Query(200, ge=1, le=1000),
     offset: int = Query(0, ge=0),
     db: Session = Depends(get_db)
@@ -261,6 +263,22 @@ async def list_contacts(
 
         contacts_all = [c for c in contacts_all if match_dynamic(c)]
 
+    # Sort by mapped or raw Apollo fields
+    reverse = (sort_dir or "desc").lower() != "asc"
+    sort_field = sort_by or "created_at"
+
+    def sort_key(c: Contact):
+        val = _contact_value(c, sort_field)
+        num = _to_float(val)
+        if num is not None:
+            return (0, num)
+        dt = _to_datetime(val)
+        if dt is not None:
+            return (1, dt.timestamp())
+        return (2, _safe_str(val).lower())
+
+    contacts_all = sorted(contacts_all, key=sort_key, reverse=reverse)
+
     total = len(contacts_all)
     contacts = contacts_all[offset:offset + limit]
     return {

frontend/src/pages/Contacts.jsx

@@ -19,6 +19,11 @@ export default function Contacts() {
     const [filterValue, setFilterValue] = useState('');
     const [filterFrom, setFilterFrom] = useState('');
     const [filterTo, setFilterTo] = useState('');
+    const [sortBy, setSortBy] = useState('created_at');
+    const [sortDir, setSortDir] = useState('desc');
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState('50');
+    const [total, setTotal] = useState(0);
 
     useEffect(() => {
         fetchFields();
@@ -28,7 +33,11 @@ export default function Contacts() {
     useEffect(() => {
         const timer = setTimeout(() => fetchContacts(), 250);
         return () => clearTimeout(timer);
-    }, [searchQuery, filterField, filterOp, filterValue, filterFrom, filterTo]);
+    }, [searchQuery, filterField, filterOp, filterValue, filterFrom, filterTo, sortBy, sortDir, page, pageSize]);
+
+    useEffect(() => {
+        setPage(1);
+    }, [searchQuery, filterField, filterOp, filterValue, filterFrom, filterTo, sortBy, sortDir, pageSize]);
 
     const fetchFields = async () => {
         try {
@@ -46,19 +55,22 @@ export default function Contacts() {
         setLoading(true);
         try {
             const params = new URLSearchParams();
-            params.set('limit', '1000');
+            const pageLimit = Number(pageSize || 50);
+            const pageOffset = (page - 1) * pageLimit;
+            params.set('limit', String(pageLimit));
+            params.set('offset', String(pageOffset));
+            params.set('sort_by', sortBy);
+            params.set('sort_dir', sortDir);
             if (searchQuery.trim()) params.set('search', searchQuery.trim());
             if (filterField !== 'none') {
                 params.set('field', filterField);
-                params.set('op', filterOp);
-                if (filterOp === 'between') {
+                // If either from/to is provided, use range behavior
+                if (filterFrom.trim() || filterTo.trim()) {
+                    params.set('op', 'between');
                     if (filterFrom.trim()) params.set('from_value', filterFrom.trim());
                     if (filterTo.trim()) params.set('to_value', filterTo.trim());
-                } else if (filterOp === 'from') {
-                    if (filterFrom.trim()) params.set('from_value', filterFrom.trim());
-                } else if (filterOp === 'to') {
-                    if (filterTo.trim()) params.set('to_value', filterTo.trim());
-                } else if (filterValue.trim()) {
+                } else {
+                    params.set('op', filterOp);
                     params.set('value', filterValue.trim());
                 }
             }
@@ -66,6 +78,7 @@ export default function Contacts() {
             if (res.ok) {
                 const data = await res.json();
                 setContacts(data.contacts || []);
+                setTotal(data.total || 0);
             }
         } catch (e) {
             console.error('Failed to fetch contacts:', e);
@@ -99,6 +112,8 @@ export default function Contacts() {
         }
     };
 
+    const totalPages = Math.max(1, Math.ceil(total / Number(pageSize || 50)));
+
     return (
         <AppShell
             title="Contacts"
@@ -152,21 +167,7 @@ export default function Contacts() {
                                         onChange={(e) => setFilterValue(e.target.value)}
                                     />
                                 )}
-                                {filterOp === 'from' && (
-                                    <Input
-                                        placeholder="From value"
-                                        value={filterFrom}
-                                        onChange={(e) => setFilterFrom(e.target.value)}
-                                    />
-                                )}
-                                {filterOp === 'to' && (
-                                    <Input
-                                        placeholder="To value"
-                                        value={filterTo}
-                                        onChange={(e) => setFilterTo(e.target.value)}
-                                    />
-                                )}
-                                {filterOp === 'between' && (
+                                {(filterOp === 'from' || filterOp === 'to' || filterOp === 'between') && (
                                     <div className="grid grid-cols-2 gap-2">
                                         <Input
                                             placeholder="From"
@@ -180,10 +181,52 @@ export default function Contacts() {
                                         />
                                     </div>
                                 )}
+                                <div className="grid grid-cols-2 gap-2">
+                                    <Select value={sortBy} onValueChange={setSortBy}>
+                                        <SelectTrigger>
+                                            <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>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="asc">Ascending</SelectItem>
+                                            <SelectItem value="desc">Descending</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="grid grid-cols-2 gap-2">
+                                    <Select value={pageSize} onValueChange={(v) => { setPageSize(v); setPage(1); }}>
+                                        <SelectTrigger>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="25">25 / page</SelectItem>
+                                            <SelectItem value="50">50 / page</SelectItem>
+                                            <SelectItem value="100">100 / page</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    <div className="text-xs text-slate-500 flex items-center justify-end">
+                                        {total} total contacts
+                                    </div>
+                                </div>
                             </>
                         )}
                     </div>
-                    <div className="max-h-[70vh] overflow-y-auto space-y-2 pr-1">
+                    <div className="max-h-[62vh] overflow-y-auto pr-1 border border-slate-200 rounded-xl">
                         {loading ? (
                             <p className="text-sm text-slate-500 p-3">Loading contacts...</p>
                         ) : contacts.length === 0 ? (
@@ -192,28 +235,54 @@ export default function Contacts() {
                                 <p>No contacts found</p>
                             </div>
                         ) : (
-                            contacts.map((contact) => {
-                                const active = selectedContact?.id === contact.id;
-                                return (
-                                    <button
-                                        key={contact.id}
-                                        onClick={() => openContact(contact)}
-                                        className={`w-full text-left rounded-xl border p-3 transition ${
-                                            active
-                                                ? 'border-violet-300 bg-violet-50'
-                                                : 'border-slate-200 bg-white hover:bg-slate-50'
-                                        }`}
-                                    >
-                                        <div className="font-medium text-slate-800">
-                                            {contact.first_name} {contact.last_name}
-                                        </div>
-                                        <div className="text-xs text-slate-500 truncate">{contact.email || 'No email'}</div>
-                                        <div className="text-xs text-slate-400 truncate">{contact.company || 'No company'}</div>
-                                    </button>
-                                );
-                            })
+                            <table className="w-full text-sm">
+                                <thead className="sticky top-0 bg-slate-50 z-10">
+                                    <tr className="text-left text-slate-500">
+                                        <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>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {contacts.map((contact) => {
+                                        const active = selectedContact?.id === contact.id;
+                                        return (
+                                            <tr
+                                                key={contact.id}
+                                                onClick={() => openContact(contact)}
+                                                className={`cursor-pointer border-t ${
+                                                    active ? 'bg-violet-50' : 'hover:bg-slate-50'
+                                                }`}
+                                            >
+                                                <td className="px-3 py-2 text-slate-800">{contact.first_name} {contact.last_name}</td>
+                                                <td className="px-3 py-2 text-slate-600 truncate max-w-[180px]">{contact.email || 'No email'}</td>
+                                                <td className="px-3 py-2 text-slate-600 truncate max-w-[160px]">{contact.company || 'No company'}</td>
+                                            </tr>
+                                        );
+                                    })}
+                                </tbody>
+                            </table>
                         )}
                     </div>
+                    <div className="flex items-center justify-between mt-3">
+                        <div className="text-xs text-slate-500">Page {page} of {totalPages}</div>
+                        <div className="flex items-center gap-2">
+                            <button
+                                className="text-xs px-2 py-1 rounded border border-slate-200 disabled:opacity-40"
+                                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                                disabled={page <= 1}
+                            >
+                                Prev
+                            </button>
+                            <button
+                                className="text-xs px-2 py-1 rounded border border-slate-200 disabled:opacity-40"
+                                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                                disabled={page >= totalPages}
+                            >
+                                Next
+                            </button>
+                        </div>
+                    </div>
                 </section>
 
                 <section className="lg:col-span-3 rounded-2xl border border-slate-200 bg-white p-6">