From b85775a4131d19d613f6b5bd13f99689801e8d15 Mon Sep 17 00:00:00 2001
From: Bhanu Prakash Sai Potteri <bhanu.potteri@getzino.com>
Date: Wed, 8 Jul 2026 11:34:43 +0530
Subject: [PATCH] Modernize mobile UI

- StatsTiles: on-brand compact tiles (token accents) vs generic gradients
- RecordView: pill search, filter chips, elevated list cards w/ chevron
- Bottom nav: active sunrise pill + elevation
---
 src/components/reusable/StatsTiles.tsx |  55 ++++-----
 src/components/rv/RecordView.tsx       | 159 +++++++++++++------------
 src/screens/ConsoleLayout.tsx          |  33 +++--
 3 files changed, 126 insertions(+), 121 deletions(-)

diff --git a/src/components/reusable/StatsTiles.tsx b/src/components/reusable/StatsTiles.tsx
index ea6a3eb..82e446d 100644
--- a/src/components/reusable/StatsTiles.tsx
+++ b/src/components/reusable/StatsTiles.tsx
@@ -1,60 +1,45 @@
-import { Card } from "./Card";
 import type { TileItem } from "../../api/types";
 
 export interface StatsTilesProps {
   tiles?: TileItem[];
 }
 
-const colors = [
-  "from-blue-500 to-cyan-500",
-  "from-emerald-500 to-green-500",
-  "from-orange-500 to-amber-500",
-  "from-violet-500 to-fuchsia-500",
-  "from-pink-500 to-rose-500",
-  "from-indigo-500 to-blue-500",
+const TONES = [
+  "bg-sunrise-500",
+  "bg-emerald-500",
+  "bg-sky-500",
+  "bg-amber-500",
+  "bg-navy-600",
+  "bg-ruby-500",
 ];
 
 export function StatsTiles({ tiles }: StatsTilesProps) {
   if (!tiles?.length) return null;
 
   return (
-    <div className="grid grid-cols-2 gap-5 md:grid-cols-4">
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
       {tiles.map((tile, idx) => {
         const displayLabel = (tile.key || `tile_${idx}`)
           .replace(/_/g, " ")
           .replace(/\b\w/g, (c) => c.toUpperCase());
 
-        const gradient = colors[idx % colors.length];
-
         return (
-          <Card
+          <div
             key={tile.tile_uid || idx}
-            className="group relative overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+            className="relative overflow-hidden rounded-xl border border-border-subtle bg-card p-4 shadow-sm"
           >
-            {/* Top Gradient */}
-            <div
-              className={`absolute left-0 top-0 h-1.5 w-full bg-gradient-to-r ${gradient}`}
+            <span
+              className={`absolute inset-x-0 top-0 h-1 ${TONES[idx % TONES.length]}`}
             />
-
-            {/* Background Decoration */}
-            <div
-              className={`absolute -right-6 -top-6 h-24 w-24 rounded-full bg-gradient-to-br ${gradient} opacity-10 transition-all duration-300 group-hover:scale-125`}
-            />
-
-            <div className="relative flex flex-col gap-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.15em] text-gray-500">
-                {displayLabel}
-              </p>
-
-              <h2 className="text-4xl font-bold tracking-tight text-gray-900">
-                {(tile.value as React.ReactNode) ?? "-"}
-              </h2>
-
-              <div className="h-1 w-12 rounded-full bg-gray-200 transition-all duration-300 group-hover:w-20 group-hover:bg-blue-500" />
-            </div>
-          </Card>
+            <p className="text-2xs font-semibold uppercase tracking-[0.12em] text-muted">
+              {displayLabel}
+            </p>
+            <p className="mt-2 font-numeric text-3xl font-bold leading-none tracking-tight text-strong nums">
+              {(tile.value as React.ReactNode) ?? "-"}
+            </p>
+          </div>
         );
       })}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/rv/RecordView.tsx b/src/components/rv/RecordView.tsx
index e8b78f4..9c5b61c 100644
--- a/src/components/rv/RecordView.tsx
+++ b/src/components/rv/RecordView.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Search } from 'lucide-react';
+import { Search, ChevronRight } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { formatValue } from '../../lib/format';
 import type { ZinoClient } from '../../api/client';
 import type { RecordViewField, RecordViewResponse } from '../../api/types';
-import { Card } from '../reusable/Card';
 import { Pagination } from '../reusable/Pagination';
 import { Spinner } from '../reusable/Spinner';
 import { EmptyState } from '../reusable/EmptyState';
@@ -119,27 +118,37 @@ export function RecordView({
 
   const chartData = resp?.chart_data;
 
+  const filterEntries = resp?.config?.filter_options
+    ? Object.entries(resp.config.filter_options).filter(([, o]) => o && o.length > 0)
+    : [];
+
   return (
-    <div className="flex flex-col gap-6 w-full">
+    <div className="flex flex-col gap-5 w-full">
       <StatsTiles tiles={tileValues} />
 
       <AnalyticsChart data={chartData} />
 
-      <Card
-        title={title}
-        action={headerActions}
-        pad={false}
-      >
-        <div className="flex flex-col sm:flex-row sm:flex-wrap items-stretch sm:items-center justify-between gap-3 p-4 border-b border-border-subtle bg-slate-50/50">
-          <div className="flex flex-col sm:flex-row flex-wrap gap-3 w-full sm:w-auto">
-            {resp?.config?.filter_options && Object.entries(resp.config.filter_options).map(([key, options]) => {
-              if (!options || options.length === 0) return null;
-              
-              // Find the field in config to get its proper label
-              const fieldDef = resp.config.fields.find(f => f.field_key === key);
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="text-lg font-bold tracking-tight text-strong">{title}</h2>
+        {headerActions}
+      </div>
+
+      <div className="flex flex-col gap-2.5">
+        <div className="relative focus-ring rounded-pill border border-border-subtle bg-card shadow-sm">
+          <Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-faint pointer-events-none" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search…"
+            className="w-full h-11 rounded-pill bg-transparent pl-11 pr-4 font-sans text-sm text-strong outline-none placeholder:text-faint"
+          />
+        </div>
+        {filterEntries.length > 0 && (
+          <div className="flex gap-2 overflow-x-auto scrollbar-slim -mx-1 px-1 pb-1">
+            {filterEntries.map(([key, options]) => {
+              const fieldDef = resp?.config.fields.find(f => f.field_key === key);
               const label = fieldDef?.output_label || key;
-              
-              const opts = options.map(o => ({ value: o, label: o }));
+              const opts = options!.map(o => ({ value: o, label: o }));
               return (
                 <Select
                   key={key}
@@ -149,72 +158,70 @@ export function RecordView({
                     setPage(1);
                   }}
                   options={[{ value: '', label: `All ${label}` }, ...opts]}
-                  className="w-full sm:w-40 shrink-0"
+                  className="w-40 shrink-0"
                 />
               );
             })}
           </div>
-          <div className="relative w-full sm:w-[240px] shrink-0">
-            <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-faint pointer-events-none" />
-            <input
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search…"
-              className="w-full h-9 rounded-md border border-border-default bg-card pl-9 pr-3 font-sans text-sm text-strong outline-none focus-ring"
-            />
-          </div>
-        </div>
+        )}
+      </div>
 
-        {error ? (
-          <EmptyState title="Couldn’t load records" hint={error} />
-        ) : loading && !resp ? (
-          <div className="p-10 flex justify-center">
-            <Spinner label="Loading records…" />
-          </div>
-        ) : rows.length === 0 ? (
-          <EmptyState title="No records" hint={debounced ? 'Nothing matches your search.' : undefined} />
-        ) : (
-          <div className="flex flex-col gap-3 p-3">
-            {rows.map((row, i) => {
-              const [primary, ...secondary] = fields;
-              return (
-                <div
-                  key={rowKey ? rowKey(row, i) : String(row.instance_id ?? i)}
-                  onClick={onRowClick ? () => onRowClick(row, i) : undefined}
-                  className={cn(
-                    'rounded-lg border border-border-subtle bg-card p-4 min-h-[56px] transition-colors duration-150',
-                    onRowClick && 'cursor-pointer active:opacity-80',
-                  )}
-                >
-                  {primary && (
-                    <p className="text-md font-semibold text-strong break-words">
-                      {formatValue(row[primary.field_key])}
-                    </p>
-                  )}
-                  {secondary.length > 0 && (
-                    <div className="mt-1.5 flex flex-col gap-0.5">
-                      {secondary.map((f) => (
-                        <p key={f.field_key} className="text-xs text-faint break-words">
-                          <span className="text-muted">{f.output_label}:</span> {formatValue(row[f.field_key])}
-                        </p>
-                      ))}
-                    </div>
-                  )}
-                  {rowActions && (
-                    <div
-                      onClick={(e) => e.stopPropagation()}
-                      className="mt-3 pt-3 border-t border-border-subtle flex justify-end gap-2"
-                    >
-                      {rowActions(row)}
-                    </div>
+      {error ? (
+        <EmptyState title="Couldn’t load records" hint={error} />
+      ) : loading && !resp ? (
+        <div className="p-10 flex justify-center">
+          <Spinner label="Loading records…" />
+        </div>
+      ) : rows.length === 0 ? (
+        <EmptyState title="No records" hint={debounced ? 'Nothing matches your search.' : undefined} />
+      ) : (
+        <div className="flex flex-col gap-3">
+          {rows.map((row, i) => {
+            const [primary, ...secondary] = fields;
+            return (
+              <div
+                key={rowKey ? rowKey(row, i) : String(row.instance_id ?? i)}
+                onClick={onRowClick ? () => onRowClick(row, i) : undefined}
+                className={cn(
+                  'rounded-xl border border-border-subtle bg-card p-4 shadow-sm transition-transform duration-150',
+                  onRowClick && 'cursor-pointer active:scale-[0.99]',
+                )}
+              >
+                <div className="flex items-center gap-3">
+                  <div className="min-w-0 flex-1">
+                    {primary && (
+                      <p className="text-[15px] font-semibold text-strong truncate">
+                        {formatValue(row[primary.field_key])}
+                      </p>
+                    )}
+                    {secondary.length > 0 && (
+                      <div className="mt-1 flex flex-col gap-0.5">
+                        {secondary.map((f) => (
+                          <p key={f.field_key} className="text-xs text-muted truncate">
+                            <span className="text-faint">{f.output_label}:</span> {formatValue(row[f.field_key])}
+                          </p>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  {onRowClick && (
+                    <ChevronRight size={18} className="shrink-0 text-slate-300" />
                   )}
                 </div>
-              );
-            })}
-          </div>
-        )}
-        <Pagination page={page} pageSize={pageSize} total={total} onPage={setPage} />
-      </Card>
+                {rowActions && (
+                  <div
+                    onClick={(e) => e.stopPropagation()}
+                    className="mt-3 pt-3 border-t border-border-subtle flex justify-end gap-2"
+                  >
+                    {rowActions(row)}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <Pagination page={page} pageSize={pageSize} total={total} onPage={setPage} />
     </div>
   );
 }
diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx
index a64e313..3e3b075 100644
--- a/src/screens/ConsoleLayout.tsx
+++ b/src/screens/ConsoleLayout.tsx
@@ -25,7 +25,7 @@ export function ConsoleLayout() {
 
   return (
     <div className="min-h-screen bg-app flex flex-col">
-      <header className="sticky top-0 z-20 shrink-0 flex items-center justify-between gap-3 px-4 h-14 pt-[env(safe-area-inset-top)] bg-navy-grad border-b border-border-navy">
+      <header className="sticky top-0 z-20 shrink-0 flex items-center justify-between gap-3 px-4 h-14 pt-[env(safe-area-inset-top)] bg-navy-grad shadow-md">
         <div className="flex flex-col justify-center leading-none">
           <span className="text-base font-extrabold text-on-navy tracking-[-0.01em] leading-none">Krishna Sales</span>
           <span className="text-2xs text-on-navy-muted">Sandbox {APP_ID}{user?.name ? ` · ${user.name}` : ''}</span>
@@ -50,7 +50,7 @@ export function ConsoleLayout() {
       </main>
 
       <nav
-        className="fixed bottom-0 inset-x-0 z-20 h-16 pb-[env(safe-area-inset-bottom)] bg-card border-t border-border-subtle grid"
+        className="fixed bottom-0 inset-x-0 z-20 h-16 pb-[env(safe-area-inset-bottom)] bg-card border-t border-border-subtle grid shadow-[0_-2px_16px_rgba(11,27,59,0.06)]"
         style={{ gridTemplateColumns: `repeat(${SCREENS.length}, minmax(0, 1fr))` }}
       >
         {SCREENS.map((t) => {
@@ -59,15 +59,28 @@ export function ConsoleLayout() {
             <NavLink
               key={t.key}
               to={`/${t.key}`}
-              className={({ isActive }) =>
-                cn(
-                  'flex flex-col items-center justify-center gap-1 no-underline min-h-[48px]',
-                  isActive ? 'text-sunrise-500' : 'text-faint',
-                )
-              }
+              className="flex flex-col items-center justify-center gap-1 no-underline min-h-[48px]"
             >
-              <Icon size={22} />
-              <span className="text-2xs font-medium leading-none">{t.label}</span>
+              {({ isActive }) => (
+                <>
+                  <span
+                    className={cn(
+                      'flex items-center justify-center h-7 w-14 rounded-pill transition-colors duration-150',
+                      isActive ? 'bg-sunrise-100 text-sunrise-600' : 'text-faint',
+                    )}
+                  >
+                    <Icon size={20} />
+                  </span>
+                  <span
+                    className={cn(
+                      'text-2xs leading-none transition-colors duration-150',
+                      isActive ? 'font-semibold text-sunrise-600' : 'font-medium text-faint',
+                    )}
+                  >
+                    {t.label}
+                  </span>
+                </>
+              )}
             </NavLink>
           );
         })}