From f8abf9b5536e80fbae1bec1d3312586a77a4b7f4 Mon Sep 17 00:00:00 2001
From: suryacp23 <suryacp.com@gmail.com>
Date: Wed, 29 Jul 2026 10:29:14 +0530
Subject: [PATCH] admin page added

---
 src/App.tsx                                   |   6 +
 src/api/client.ts                             |  19 +
 src/api/types.ts                              |  14 +
 src/components/cards/DailyLogCard.tsx         |  55 ++-
 src/components/dv/DailyLogDetail.tsx          |  47 +-
 .../forms/fields/GeolocationInput.tsx         | 157 +++---
 src/screens/ConsoleLayout.tsx                 |  16 +-
 src/screens/admin/DatasetItemsPage.tsx        | 459 ++++++++++++++++++
 src/screens/admin/DatasetsPage.tsx            | 105 ++++
 9 files changed, 773 insertions(+), 105 deletions(-)
 create mode 100644 src/screens/admin/DatasetItemsPage.tsx
 create mode 100644 src/screens/admin/DatasetsPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 0bbea71..e3d382a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,8 @@ import { DailyLogsPage } from './screens/DailyLogsPage'
 import { AllDailyLogsPage } from './screens/AllDailyLogsPage'
 import { AnalyticsPage } from './screens/AnalyticsPage'
 import { DailySalesReportPage } from './screens/DailySalesReportPage'
+import { DatasetsPage } from './screens/admin/DatasetsPage'
+import { DatasetItemsPage } from './screens/admin/DatasetItemsPage'
 function App() {
   return (
     <AuthProvider>
@@ -35,6 +37,10 @@ function App() {
 
             <Route path="/analytics" element={<AnalyticsPage />} />
             <Route path="/sales-report" element={<DailySalesReportPage />} />
+
+            <Route path="/admin/datasets" element={<DatasetsPage />}>
+              <Route path=":id" element={<DatasetItemsPage />} />
+            </Route>
           </Route>
           <Route path="*" element={<Navigate to="/daily" replace />} />
         </Routes>
diff --git a/src/api/client.ts b/src/api/client.ts
index 308d894..cf8a2b8 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -3,6 +3,7 @@ import type {
   AiDecision,
   ApiError,
   AuditEntry,
+  Dataset,
   FormScreenResponse,
   LoginResponse,
   RecordViewParams,
@@ -310,6 +311,24 @@ export class ZinoClient {
     });
   }
 
+  // --- Datasets ---
+
+  getDatasets(): Promise<Dataset[]> {
+    return this.request<Dataset[]>('GET', `/app/${APP_ID}/datasets`);
+  }
+
+  getDataset(id: number | string): Promise<Dataset> {
+    return this.request<Dataset>('GET', `/app/${APP_ID}/datasets/${id}`);
+  }
+
+  createDataset(payload: { name: string; data_type: 'string' | 'object'; keys: string[]; description?: string }): Promise<Dataset> {
+    return this.request<Dataset>('POST', `/app/${APP_ID}/datasets`, payload);
+  }
+
+  updateDataset(id: number | string, payload: Partial<{ name: string; data_type: 'string' | 'object'; keys: string[]; description: string; items: any[] }>): Promise<Dataset> {
+    return this.request<Dataset>('PUT', `/app/${APP_ID}/datasets/${id}`, payload);
+  }
+
   // --- File upload + OCR (multipart, field-scoped) ---
 
   private fieldForm(file: File, ctx: FieldContext): FormData {
diff --git a/src/api/types.ts b/src/api/types.ts
index 42ee795..383bf54 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -19,6 +19,20 @@ export interface LoginResponse {
   user: User;
 }
 
+// --- Datasets ---
+
+export interface Dataset {
+  id: number;
+  uuid?: string;
+  name: string;
+  description?: string;
+  data_type: 'string' | 'object';
+  keys: string[];
+  item_count?: number;
+  items?: any[];
+}
+
+
 // --- Record view (POST /app/{appId}/view/recordview) ---
 
 export interface RecordViewField {
diff --git a/src/components/cards/DailyLogCard.tsx b/src/components/cards/DailyLogCard.tsx
index 7723851..f248d26 100644
--- a/src/components/cards/DailyLogCard.tsx
+++ b/src/components/cards/DailyLogCard.tsx
@@ -21,25 +21,29 @@ export function DailyLogCard({ row, onPunchOut, isDetailView = false }: { row: R
   const nonProdCalls = formatValue(row.total_non_productive_calls || 0);
   const eodNotes = formatValue(row.eod_notes_remarks || row.notes || '—');
 
-  // Date
-  let dateStr = '—';
-  if (row.date) dateStr = String(row.date).split('T')[0];
-  else if (row.created_at) dateStr = String(row.created_at).split('T')[0];
-  
-  try {
-    if (dateStr !== '—') {
-      const d = new Date(dateStr);
+  const formatDateStr = (raw: string | undefined | null) => {
+    if (!raw || raw === '—') return '—';
+    try {
+      const d = new Date(raw);
       if (!isNaN(d.getTime())) {
-        dateStr = d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).replace(/ /g, '-');
+        return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).replace(/ /g, '-');
       }
-    }
-  } catch (e) {}
+    } catch (e) {}
+    const part = String(raw).split('T')[0];
+    return part || '—';
+  };
 
   const formatTimeStr = (t: string | undefined | null) => {
     if (!t) return '—';
     const str = String(t);
     if (str === '—') return str;
     try {
+      if (str.includes('T') || (str.includes('-') && str.includes(':'))) {
+        const d = new Date(str);
+        if (!isNaN(d.getTime())) {
+          return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
+        }
+      }
       let timeParts = str.split(':');
       if (str.includes('T')) {
         timeParts = str.split('T')[1].replace('Z', '').split('.')[0].split(':');
@@ -59,16 +63,29 @@ export function DailyLogCard({ row, onPunchOut, isDetailView = false }: { row: R
     }
   };
 
-  // Checkin time
-  let checkInTimeRaw = row.time || row.created_at || row.punch_in_time;
+  // Checkin (Punch In) time & date
+  let checkInTimeRaw =
+    row['ac04a444-9b96-463d-bc91-447fa80b028f__created_at'] ||
+    row['ac04a444_9b96_463d_bc91_447fa80b028f__created_at'] ||
+    row['ac04a444-9b96-463d-bc91-447fa80b028f_created_at'] ||
+    row['ac04a444_9b96_463d_bc91_447fa80b028f_created_at'] ||
+    row.time || row.created_at || row.punch_in_time;
   let checkInTime = formatTimeStr(checkInTimeRaw);
+  let punchInDateStr = formatDateStr(checkInTimeRaw || row.date || row.created_at);
 
-  // Check out time
-  let checkOutTimeRaw = row.check_out_time || row.punch_out_time;
+  // Check out (Punch Out) time & date
+  let checkOutTimeRaw =
+    row['37c218fc-fd91-41d1-9964-fcaeade54e74__created_at'] ||
+    row['37c218fc_fd91-41d1-9964-fcaeade54e74__created_at'] ||
+    row['37c218fc-fd91-41d1-9964-fcaeade54e74_created_at'] ||
+    row['37c218fc_fd91-41d1-9964-fcaeade54e74_created_at'] ||
+    row.check_out_time || row.punch_out_time;
   if (!checkOutTimeRaw && stateName.toLowerCase().includes('out') && row.time) {
       checkOutTimeRaw = row.time;
   }
   let checkOutTime = checkOutTimeRaw ? formatTimeStr(checkOutTimeRaw) : null;
+  let punchOutDateStr = checkOutTimeRaw ? formatDateStr(checkOutTimeRaw) : '—';
+  if (punchOutDateStr === '—') punchOutDateStr = punchInDateStr;
 
   const isPunchedIn = stateName.toLowerCase().includes('punched in') || stateName.toLowerCase().includes('active') || (stateName.toLowerCase().includes('in') && !stateName.toLowerCase().includes('out'));
   
@@ -112,7 +129,7 @@ export function DailyLogCard({ row, onPunchOut, isDetailView = false }: { row: R
               <div className="z-card-footer-label" style={{ whiteSpace: 'nowrap' }}><Clock size={14} /> PUNCH-IN TIME</div>
               <div style={{ display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' }}>
                 <span className="z-card-footer-value" style={{ display: 'flex', gap: '6px', fontSize: '13px' }}>
-                  <span>{dateStr}</span>
+                  <span>{punchInDateStr}</span>
                   <span>{checkInTime}</span>
                 </span>
               </div>
@@ -122,7 +139,7 @@ export function DailyLogCard({ row, onPunchOut, isDetailView = false }: { row: R
                 <div className="z-card-footer-label" style={{ whiteSpace: 'nowrap' }}><Clock size={14} /> PUNCH-OUT TIME</div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' }}>
                   <span className="z-card-footer-value" style={{ display: 'flex', gap: '6px', fontSize: '13px' }}>
-                    <span>{dateStr}</span>
+                    <span>{punchOutDateStr}</span>
                     <span>{checkOutTime}</span>
                   </span>
                 </div>
@@ -148,12 +165,12 @@ export function DailyLogCard({ row, onPunchOut, isDetailView = false }: { row: R
           <div className="z-card-route mt-4" style={{ paddingTop: '16px', gridTemplateColumns: 'repeat(2, 1fr)' }}>
             <div>
               <p className="z-card-grid-item-label flex items-center gap-1"><Clock size={12} /> PUNCH-IN</p>
-              <p className="z-card-route-val" style={{ fontSize: '13px' }}>{dateStr} {checkInTime}</p>
+              <p className="z-card-route-val" style={{ fontSize: '13px' }}>{punchInDateStr} {checkInTime}</p>
             </div>
             {checkOutTime && (
               <div>
                 <p className="z-card-grid-item-label flex items-center gap-1"><Clock size={12} /> PUNCH-OUT</p>
-                <p className="z-card-route-val" style={{ fontSize: '13px' }}>{dateStr} {checkOutTime}</p>
+                <p className="z-card-route-val" style={{ fontSize: '13px' }}>{punchOutDateStr} {checkOutTime}</p>
               </div>
             )}
           </div>
diff --git a/src/components/dv/DailyLogDetail.tsx b/src/components/dv/DailyLogDetail.tsx
index d05f989..8fb1678 100644
--- a/src/components/dv/DailyLogDetail.tsx
+++ b/src/components/dv/DailyLogDetail.tsx
@@ -51,25 +51,29 @@ export function DailyLogDetail({ instanceId, onBack }: DailyLogDetailProps) {
   const nonProdCalls = formatValue(row.total_non_productive_calls || 0);
   const eodNotes = formatValue(row.eod_notes_remarks || row.notes || '—');
 
-  // Format Date & Time
-  let dateStr = '—';
-  if (row.date) dateStr = String(row.date).split('T')[0];
-  else if (row.created_at) dateStr = String(row.created_at).split('T')[0];
-
-  try {
-    if (dateStr !== '—') {
-      const d = new Date(dateStr);
+  const formatDateStr = (raw: string | undefined | null) => {
+    if (!raw || raw === '—') return '—';
+    try {
+      const d = new Date(raw);
       if (!isNaN(d.getTime())) {
-        dateStr = d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).replace(/ /g, '-');
+        return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).replace(/ /g, '-');
       }
-    }
-  } catch (e) {}
+    } catch (e) {}
+    const part = String(raw).split('T')[0];
+    return part || '—';
+  };
 
   const formatTimeStr = (t: string | undefined | null) => {
     if (!t) return '—';
     const str = String(t);
     if (str === '—') return str;
     try {
+      if (str.includes('T') || (str.includes('-') && str.includes(':'))) {
+        const d = new Date(str);
+        if (!isNaN(d.getTime())) {
+          return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
+        }
+      }
       let timeParts = str.split(':');
       if (str.includes('T')) {
         timeParts = str.split('T')[1].replace('Z', '').split('.')[0].split(':');
@@ -89,14 +93,27 @@ export function DailyLogDetail({ instanceId, onBack }: DailyLogDetailProps) {
     }
   };
 
-  const checkInTimeRaw = row.time || row.created_at || row.punch_in_time;
+  const checkInTimeRaw =
+    row['ac04a444-9b96-463d-bc91-447fa80b028f__created_at'] ||
+    row['ac04a444_9b96_463d_bc91_447fa80b028f__created_at'] ||
+    row['ac04a444-9b96-463d-bc91-447fa80b028f_created_at'] ||
+    row['ac04a444_9b96_463d_bc91_447fa80b028f_created_at'] ||
+    row.time || row.created_at || row.punch_in_time;
   const checkInTime = formatTimeStr(checkInTimeRaw);
+  const punchInDateStr = formatDateStr(checkInTimeRaw || row.date || row.created_at);
 
-  let checkOutTimeRaw = row.check_out_time || row.punch_out_time;
+  let checkOutTimeRaw =
+    row['37c218fc-fd91-41d1-9964-fcaeade54e74__created_at'] ||
+    row['37c218fc_fd91-41d1-9964-fcaeade54e74__created_at'] ||
+    row['37c218fc-fd91-41d1-9964-fcaeade54e74_created_at'] ||
+    row['37c218fc_fd91-41d1-9964-fcaeade54e74_created_at'] ||
+    row.check_out_time || row.punch_out_time;
   if (!checkOutTimeRaw && stateName.toLowerCase().includes('out') && row.time) {
       checkOutTimeRaw = row.time;
   }
   const checkOutTime = checkOutTimeRaw ? formatTimeStr(checkOutTimeRaw) : null;
+  let punchOutDateStr = checkOutTimeRaw ? formatDateStr(checkOutTimeRaw) : '—';
+  if (punchOutDateStr === '—') punchOutDateStr = punchInDateStr;
 
   const isPunchedIn = stateName.toLowerCase().includes('punched in') || stateName.toLowerCase().includes('active') || (stateName.toLowerCase().includes('in') && !stateName.toLowerCase().includes('out'));
 
@@ -164,7 +181,7 @@ export function DailyLogDetail({ instanceId, onBack }: DailyLogDetailProps) {
               <div className="text-xs">
                 <div className="font-bold text-slate-800 uppercase tracking-wider text-[10px] mb-0.5">PUNCH IN</div>
                 <div className="text-slate-800 font-medium text-[12px] leading-tight">
-                  {dateStr} • {checkInTime}
+                  {punchInDateStr} • {checkInTime}
                 </div>
               </div>
             </div>
@@ -177,7 +194,7 @@ export function DailyLogDetail({ instanceId, onBack }: DailyLogDetailProps) {
                 <div className="text-xs">
                   <div className="font-bold text-slate-800 uppercase tracking-wider text-[10px] mb-0.5">PUNCH OUT</div>
                   <div className="text-slate-800 font-medium text-[12px] leading-tight">
-                    {dateStr} • {checkOutTime}
+                    {punchOutDateStr} • {checkOutTime}
                   </div>
                 </div>
               </div>
diff --git a/src/components/forms/fields/GeolocationInput.tsx b/src/components/forms/fields/GeolocationInput.tsx
index cc81063..406d7b0 100644
--- a/src/components/forms/fields/GeolocationInput.tsx
+++ b/src/components/forms/fields/GeolocationInput.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { Modal } from '../../reusable/Modal';
 import { Button } from '../../buttons/Button';
 import { useJsApiLoader, GoogleMap, Marker } from '@react-google-maps/api';
-import { X } from "lucide-react";
+import { MapPin, Crosshair, Map as MapIcon, Loader2, X } from 'lucide-react';
 
 const mapContainerStyle = {
   width: '100%',
@@ -10,11 +10,6 @@ const mapContainerStyle = {
   borderRadius: '8px'
 };
 
-const defaultCenter = {
-  lat: 20.5937,
-  lng: 78.9629
-};
-
 export function GeolocationInput({
   label,
   required,
@@ -23,14 +18,14 @@ export function GeolocationInput({
 }: {
   label: string;
   required?: boolean;
-  value: { latitude: number; longitude: number; accuracy?: number } | null;
+  value: { latitude?: number; longitude?: number; lat?: number; lng?: number; accuracy?: number } | null;
   onChange: (val: { latitude: number; longitude: number; accuracy?: number } | null) => void;
 }) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   
   const [isMapModalOpen, setIsMapModalOpen] = useState(false);
-  const [mapMarkerPos, setMapMarkerPos] = useState<{lat: number, lng: number} | null>(null);
+  const [mapMarkerPos, setMapMarkerPos] = useState<{ lat: number; lng: number } | null>(null);
 
   const isLocalhost = typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
 
@@ -39,41 +34,46 @@ export function GeolocationInput({
     googleMapsApiKey: isLocalhost ? '' : (import.meta.env.VITE_GOOGLE_MAPS_API_KEY || '')
   });
 
-  // Auto-fetch location on first mount if no value is present
-  useEffect(() => {
-    if (!value) {
-      fetchLocation();
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // Extract lat, lng & accuracy from value (supporting both latitude/longitude and lat/lng)
+  const lat = value ? (value.latitude ?? value.lat ?? null) : null;
+  const lng = value ? (value.longitude ?? value.lng ?? null) : null;
+  const accuracy = value?.accuracy;
 
-  const fetchLocation = () => {
-    if (!navigator.geolocation) {
-      setError('Geolocation is not supported by your browser.');
+  const fetchLocation = useCallback(() => {
+    setError(null);
+    if (!("geolocation" in navigator)) {
+      setError("Geolocation not supported on this device");
       return;
     }
     setLoading(true);
-    setError(null);
     navigator.geolocation.getCurrentPosition(
-      (position) => {
+      (pos) => {
         onChange({
-          latitude: position.coords.latitude,
-          longitude: position.coords.longitude,
-          accuracy: position.coords.accuracy,
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+          accuracy: pos.coords.accuracy,
         });
         setLoading(false);
       },
       (err) => {
-        setError(err.message);
+        setError(err.message || "Unable to get location");
         setLoading(false);
       },
-      { enableHighAccuracy: true }
+      { enableHighAccuracy: true, timeout: 10000 }
     );
-  };
+  }, [onChange]);
+
+  // Auto-fetch location on first mount if no value is present
+  useEffect(() => {
+    if (!value || (lat == null && lng == null)) {
+      fetchLocation();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const handleOpenMap = () => {
-    if (value) {
-      setMapMarkerPos({ lat: value.latitude, lng: value.longitude });
+    if (lat != null && lng != null) {
+      setMapMarkerPos({ lat, lng });
     } else {
       setMapMarkerPos(null);
     }
@@ -93,72 +93,89 @@ export function GeolocationInput({
     if (mapMarkerPos) {
       onChange({
         latitude: mapMarkerPos.lat,
-        longitude: mapMarkerPos.lng
+        longitude: mapMarkerPos.lng,
+        accuracy: 10,
       });
       setIsMapModalOpen(false);
     }
   };
 
   const clear = () => onChange(null);
-  const hasValue = !!value;
+  const hasValidCoords = lat != null && lng != null;
 
   return (
-    <div className="flex flex-col gap-1.5 font-sans w-full">
-      <span className="text-sm font-medium text-muted">
+    <div className="space-y-2.5 font-sans w-full">
+      <label className="flex items-center gap-1.5 text-xs font-medium text-slate-700">
+        <MapPin className="h-3.5 w-3.5 text-slate-500" />
         {label}
-        {required && <span className="text-ruby-600"> *</span>}
-      </span>
-      
-      <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center w-full border border-slate-200 bg-white rounded-lg p-2 shadow-sm">
-        <div className="flex items-center gap-2">
-          <Button type="button" variant="secondary" size="sm" onClick={fetchLocation} disabled={loading}>
-            {loading ? 'Locating...' : 'Get Location'}
-          </Button>
-          <Button type="button" variant="outline" size="sm" onClick={handleOpenMap}>
-            Select Map
-          </Button>
-        </div>
-        
-        {hasValue ? (
-          <div className="flex items-center gap-2 sm:ml-auto text-sm text-slate-700 font-medium bg-slate-50 px-3 py-1.5 rounded-md border border-slate-100">
-            <span className="flex h-2 w-2 rounded-full bg-emerald-500"></span>
-            {value.latitude.toFixed(5)}, {value.longitude.toFixed(5)}
-            <button
-              type="button"
-              onClick={clear}
-              className="ml-1 text-slate-400 hover:text-ruby-500 transition-colors"
-              aria-label="Clear location"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          </div>
-        ) : (
-          <span className="text-xs text-slate-400 sm:ml-auto px-2 py-1">
-            No location set
-          </span>
-        )}
+        {required && <span className="text-red-500">*</span>}
+      </label>
+
+      <div className="flex items-center gap-2 flex-wrap">
+        <button
+          type="button"
+          onClick={fetchLocation}
+          disabled={loading}
+          className="inline-flex items-center gap-1.5 rounded-lg border border-emerald-300 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 transition-colors hover:bg-emerald-100 disabled:opacity-60 cursor-pointer"
+        >
+          {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Crosshair className="h-3.5 w-3.5" />}
+          {loading ? "Locating…" : "Get Location"}
+        </button>
+        <button
+          type="button"
+          onClick={handleOpenMap}
+          className="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition-colors hover:border-emerald-300 hover:bg-emerald-50 cursor-pointer"
+        >
+          <MapIcon className="h-3.5 w-3.5" />
+          Select from Map
+        </button>
       </div>
-      
-      {error && <span className="text-xs text-ruby-600 px-1">{error}</span>}
-      {required && !value && <input type="text" className="sr-only" required />}
+
+      {hasValidCoords ? (
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-emerald-500/40 bg-emerald-50/50 px-3 py-2">
+          <div className="min-w-0">
+            <div className="font-mono text-sm font-semibold tabular-nums text-slate-800 truncate">
+              {lat.toFixed(5)}, {lng.toFixed(5)}
+            </div>
+            {typeof accuracy === "number" && (
+              <div className="text-[10px] text-slate-500">± {Math.round(accuracy)} m accuracy</div>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={clear}
+            className="shrink-0 grid h-6 w-6 place-items-center rounded-full text-slate-400 transition-colors hover:text-red-500 cursor-pointer"
+            aria-label="Clear location"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      ) : (
+        <div className="text-xs text-slate-400">No location captured yet.</div>
+      )}
+
+      {error && <div className="text-xs text-red-500">{error}</div>}
+      {required && !hasValidCoords && <input type="text" className="sr-only" required tabIndex={-1} />}
 
       {isMapModalOpen && (
         <Modal 
           open={isMapModalOpen} 
           onClose={() => setIsMapModalOpen(false)} 
-          title="Select Location"
+          title="Select Location on Map"
           width="lg"
         >
           <div className="flex flex-col gap-4">
-            <p className="text-sm text-slate-600">Click on the map to place a pin at your desired location.</p>
+            <p className="text-sm text-slate-600">Click on the map to place a pin at the desired store location.</p>
             
             <div className="border border-slate-200 rounded-lg overflow-hidden relative min-h-[400px] bg-slate-100 flex items-center justify-center">
               {!isLoaded ? (
-                <span className="text-slate-500 font-medium">Loading Map...</span>
+                <span className="text-slate-500 font-medium flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" /> Loading Map...
+                </span>
               ) : (
                 <GoogleMap
                   mapContainerStyle={mapContainerStyle}
-                  center={mapMarkerPos || defaultCenter}
+                  center={mapMarkerPos || { lat: 20.5937, lng: 78.9629 }}
                   zoom={mapMarkerPos ? 15 : 5}
                   onClick={handleMapClick}
                   options={{
diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx
index 37743c2..e08ce7e 100644
--- a/src/screens/ConsoleLayout.tsx
+++ b/src/screens/ConsoleLayout.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { NavLink, Navigate, Outlet, useNavigate } from 'react-router-dom';
-import { LogOut, Menu, X } from 'lucide-react';
+import { LogOut, Menu, X, Database } from 'lucide-react';
 import { cn } from '../lib/cn';
 import { useAuth } from '../auth/context';
 import { onAuthErrorAll, orderBookingClient } from '../api/clients';
@@ -129,6 +129,20 @@ export function ConsoleLayout() {
               </NavLink>
             );
           })}
+
+          <div className="my-2 border-t border-border-subtle" />
+
+          <NavLink
+            to="/admin/datasets"
+            onClick={() => setIsMenuOpen(false)}
+            className={({ isActive }) => cn(
+              "flex items-center gap-3 px-4 py-3 mx-2 rounded-lg no-underline transition-colors duration-150 sidebar-item",
+              isActive ? "active" : ""
+            )}
+          >
+            <Database size={20} className="shrink-0" />
+            <span>Manage Datasets</span>
+          </NavLink>
         </div>
 
         <div className="p-4 border-t border-border-subtle shrink-0 flex flex-col gap-3 mb-[env(safe-area-inset-bottom)]">
diff --git a/src/screens/admin/DatasetItemsPage.tsx b/src/screens/admin/DatasetItemsPage.tsx
new file mode 100644
index 0000000..648e03f
--- /dev/null
+++ b/src/screens/admin/DatasetItemsPage.tsx
@@ -0,0 +1,459 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { orderBookingClient } from '../../api/clients';
+import type { Dataset } from '../../api/types';
+import { Button } from '../../components/buttons/Button';
+import { Spinner } from '../../components/reusable/Spinner';
+import { Save, Trash2, Plus, Database, Upload, Search } from 'lucide-react';
+
+export function DatasetItemsPage() {
+  const { id } = useParams<{ id: string }>();
+
+  const [dataset, setDataset] = useState<Dataset | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [invalidCells, setInvalidCells] = useState<Set<string>>(new Set());
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+
+  // Local state for items editing
+  const [items, setItems] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    if (id) fetchDataset(id);
+  }, [id]);
+
+  const fetchDataset = async (datasetId: string) => {
+    try {
+      setLoading(true);
+      const res = await orderBookingClient.getDataset(datasetId);
+      setDataset(res);
+      setItems(res.items || []);
+      setError('');
+    } catch (err: any) {
+      setError(err.message || 'Failed to fetch dataset details');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!dataset || !id) return;
+    setInvalidCells(new Set());
+
+    let hasError = false;
+    const newInvalidCells = new Set<string>();
+
+    if (dataset.data_type === 'object') {
+      items.forEach((obj, idx) => {
+        const hasSomeValue = dataset.keys.some(k => (obj[k] || '').trim() !== '');
+        const hasMissingValue = dataset.keys.some(k => !(obj[k] || '').trim());
+
+        if (hasSomeValue && hasMissingValue) {
+          hasError = true;
+          dataset.keys.forEach(k => {
+            if (!(obj[k] || '').trim()) {
+              newInvalidCells.add(`${idx}-${k}`);
+            }
+          });
+        }
+      });
+    }
+
+    if (hasError) {
+      setInvalidCells(newInvalidCells);
+      return;
+    }
+
+    let cleanedItems: any[] = [];
+    if (dataset.data_type === 'string') {
+      cleanedItems = items.filter(val => typeof val === 'string' && val.trim() !== '');
+    } else {
+      cleanedItems = items.filter(obj => dataset.keys.some(k => (obj[k] || '').trim() !== ''));
+    }
+
+    try {
+      setSaving(true);
+      const payload = {
+        items: cleanedItems
+      };
+      const res = await orderBookingClient.updateDataset(id, payload);
+      setDataset(res);
+      setItems(res.items || []);
+      setError('');
+    } catch (err: any) {
+      setError(err.message || 'Failed to save dataset items');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // String Array handlers
+  const handleStringChange = (index: number, val: string) => {
+    const newItems = [...items];
+    newItems[index] = val;
+    setItems(newItems);
+  };
+
+  const handleAddString = () => {
+    if (items.length > 0 && typeof items[items.length - 1] === 'string' && items[items.length - 1].trim() === '') {
+      return;
+    }
+    setItems([...items, '']);
+  };
+
+  // Object Array handlers
+  const handleObjectChange = (index: number, key: string, val: string) => {
+    const newItems = [...items];
+    if (!newItems[index]) newItems[index] = {};
+    newItems[index][key] = val;
+    setItems(newItems);
+
+    if (invalidCells.has(`${index}-${key}`)) {
+      const newInvalid = new Set(invalidCells);
+      newInvalid.delete(`${index}-${key}`);
+      setInvalidCells(newInvalid);
+    }
+  };
+
+  const handleAddObject = () => {
+    if (items.length > 0) {
+      const lastObj = items[items.length - 1];
+      const hasAnyValue = dataset?.keys?.some(k => (lastObj[k] || '').trim() !== '');
+      if (!hasAnyValue && dataset?.keys?.length) {
+        return;
+      }
+    }
+    const newObj: any = {};
+    if (dataset?.keys) {
+      dataset.keys.forEach(k => { newObj[k] = ''; });
+    }
+    setItems([...items, newObj]);
+  };
+
+  const handleRemoveItem = (index: number) => {
+    const newItems = [...items];
+    newItems.splice(index, 1);
+    setItems(newItems);
+    setSelectedRows(new Set());
+    setInvalidCells(new Set());
+  };
+
+  const toggleRowSelection = (index: number) => {
+    const newSet = new Set(selectedRows);
+    if (newSet.has(index)) newSet.delete(index);
+    else newSet.add(index);
+    setSelectedRows(newSet);
+  };
+
+  const toggleSelectAll = () => {
+    if (selectedRows.size === items.length && items.length > 0) {
+      setSelectedRows(new Set());
+    } else {
+      setSelectedRows(new Set(items.map((_, i) => i)));
+    }
+  };
+
+  const handleMultiDelete = () => {
+    if (selectedRows.size === 0) return;
+    const newItems = items.filter((_, idx) => !selectedRows.has(idx));
+    setItems(newItems);
+    setSelectedRows(new Set());
+    setInvalidCells(new Set());
+  };
+
+  const handleReset = () => {
+    if (dataset) {
+      setItems(dataset.items || []);
+      setSelectedRows(new Set());
+      setInvalidCells(new Set());
+      setError('');
+    }
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const text = event.target?.result as string;
+      if (!text) return;
+
+      const rows = text.split(/\r?\n/).map(row => row.trim()).filter(row => row);
+      if (rows.length === 0) return;
+
+      if (dataset?.data_type === 'string') {
+        const parsed = rows.map(r => r.split(',')[0].replace(/^"|"$/g, '').trim());
+        setItems([...items, ...parsed]);
+      } else {
+        const headers = rows[0].split(',').map(h => h.replace(/^"|"$/g, '').trim());
+        const newItems = rows.slice(1).map(row => {
+          const values = row.split(',').map(v => v.replace(/^"|"$/g, '').trim());
+          const obj: any = {};
+          headers.forEach((h, i) => {
+            if (dataset?.keys?.includes(h)) {
+              obj[h] = values[i] || '';
+            }
+          });
+          dataset?.keys?.forEach(k => {
+            if (!(k in obj)) obj[k] = '';
+          });
+          return obj;
+        });
+        setItems([...items, ...newItems]);
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = '';
+  };
+
+  if (loading) {
+    return <div className="p-10 flex justify-center"><Spinner /></div>;
+  }
+
+  if (!dataset) {
+    return <div className="p-10 text-center text-red-600 font-medium">{error || 'Dataset not found.'}</div>;
+  }
+
+  const isString = dataset.data_type === 'string';
+  const hasChanges = JSON.stringify(items) !== JSON.stringify(dataset.items || []);
+
+  const filteredIndices = items
+    .map((item, idx) => ({ item, idx }))
+    .filter(({ item }) => {
+      if (!searchTerm) return true;
+      const lowerSearch = searchTerm.toLowerCase();
+      if (isString) {
+        return (typeof item === 'string') && item.toLowerCase().includes(lowerSearch);
+      } else {
+        return dataset?.keys?.some(k => 
+          item[k] && typeof item[k] === 'string' && item[k].toLowerCase().includes(lowerSearch)
+        );
+      }
+    })
+    .map(({ idx }) => idx);
+
+  return (
+    <div className="flex flex-col h-full bg-transparent">
+      <header className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 bg-card border-b border-border-subtle">
+        <div className="flex items-center gap-3 flex-wrap">
+          <h1 className="text-base sm:text-lg font-bold text-foreground m-0 flex items-center gap-2">
+            <Database size={20} className="shrink-0 text-navy-600" /> 
+            <span className="truncate">{dataset.name}</span>
+            <span className={`text-[10px] uppercase font-bold px-1.5 py-0.5 rounded flex items-center gap-1 shrink-0 ${
+              !isString ? 'bg-purple-100 text-purple-700' : 'bg-emerald-100 text-emerald-700'
+            }`}>
+              {!isString ? 'Table' : 'List'}
+            </span>
+            <span className="text-xs sm:text-sm font-normal text-muted shrink-0">
+              {items.length} items {dataset.keys?.length ? `- ${dataset.keys.length} cols` : ''}
+            </span>
+          </h1>
+        </div>
+        <div className="flex items-center gap-2 flex-wrap">
+          <div className="relative">
+            <input type="file" accept=".csv" onChange={handleFileUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" title="Import CSV" />
+            <Button variant="outline" size="sm" className="rounded font-medium flex items-center gap-1.5"><Upload size={14} /> Import</Button>
+          </div>
+          {selectedRows.size > 0 && (
+            <Button variant="danger" size="sm" onClick={handleMultiDelete} className="rounded font-semibold px-3 flex items-center gap-1.5">
+              <Trash2 size={14} /> Delete ({selectedRows.size})
+            </Button>
+          )}
+          {hasChanges && (
+            <Button variant="secondary" size="sm" onClick={handleReset} disabled={saving} className="rounded font-semibold">
+              Reset
+            </Button>
+          )}
+          <Button size="sm" onClick={handleSave} disabled={saving || !hasChanges} className="flex items-center gap-1.5 rounded font-semibold">
+            <Save size={16} /> {saving ? 'Saving...' : 'Save'}
+          </Button>
+        </div>
+      </header>
+
+      {error && <div className="m-4 p-4 bg-red-50 text-red-600 rounded-md border border-red-100 font-medium">{error}</div>}
+
+      <div className="flex-1 p-3 sm:p-6 overflow-y-auto">
+        {isString ? (
+          <div className="bg-card border border-border-subtle rounded-lg shadow-sm">
+            <div className="p-3 sm:p-4 border-b border-border-subtle flex items-center justify-between gap-3">
+              <div className="relative w-full sm:w-64">
+                <input 
+                  type="text" 
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  placeholder="Search rows..." 
+                  className="w-full text-sm pl-8 pr-4 py-2 border border-border-subtle rounded-md focus:outline-none focus:ring-1 focus:ring-navy-600 bg-background text-foreground" 
+                />
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted" />
+              </div>
+              <div className="text-xs sm:text-sm text-muted shrink-0">{items.length} rows</div>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="min-w-full table-auto text-left text-sm whitespace-nowrap bg-card">
+                <thead className="bg-black/5 border-b border-border-subtle">
+                  <tr>
+                    <th className="px-4 py-3 font-semibold text-muted w-10 text-center border-r border-border-subtle">
+                      <input type="checkbox" checked={selectedRows.size === items.length && items.length > 0} onChange={toggleSelectAll} className="rounded border-border-subtle text-navy-600 focus:ring-navy-600 cursor-pointer" />
+                    </th>
+                    <th className="px-4 py-3 font-bold text-xs uppercase text-muted w-10 text-center border-r border-border-subtle">#</th>
+                    <th className="px-4 py-3 font-bold text-xs uppercase text-muted border-r border-border-subtle">VALUE</th>
+                    <th className="px-4 py-3 font-bold text-xs uppercase text-muted text-center w-16">ACTIONS</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-border-subtle">
+                  {filteredIndices.map((idx) => {
+                    const val = items[idx];
+                    return (
+                    <tr key={idx} className={`bg-card hover:bg-black/5 transition-colors ${selectedRows.has(idx) ? '!bg-navy-50/10' : ''}`}>
+                      <td className="px-4 py-2 text-center border-r border-border-subtle">
+                        <input
+                          type="checkbox"
+                          checked={selectedRows.has(idx)}
+                          onChange={() => toggleRowSelection(idx)}
+                          className="rounded border-border-subtle text-navy-600 focus:ring-navy-600 cursor-pointer"
+                        />
+                      </td>
+                      <td className="px-4 py-2 text-muted font-mono text-center text-xs border-r border-border-subtle">{idx + 1}</td>
+                      <td className="px-0 py-0 relative border-r border-border-subtle min-w-[150px]">
+                        <div className="invisible px-4 py-3 text-sm whitespace-pre" aria-hidden="true">
+                          {val || 'Enter value'}
+                        </div>
+                        <input
+                          type="text"
+                          value={val}
+                          onChange={(e) => handleStringChange(idx, e.target.value)}
+                          className="absolute inset-0 w-full h-full px-4 py-2 border-none bg-transparent text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-inset focus:ring-navy-600 transition-colors"
+                          placeholder="Enter value"
+                        />
+                      </td>
+                      <td className="px-4 py-2 text-center">
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveItem(idx)}
+                          className="p-1.5 text-muted hover:text-red-500 transition-all cursor-pointer"
+                          title="Remove Row"
+                        >
+                          <Trash2 size={16} />
+                        </button>
+                      </td>
+                    </tr>
+                    );
+                  })}
+                  {items.length === 0 && (
+                    <tr>
+                      <td colSpan={4} className="px-5 py-10 text-center text-muted italic font-medium">
+                        No string items exist.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+            <div className="p-4 border-t border-border-subtle bg-card flex justify-between items-center text-xs text-muted rounded-b-lg">
+              <Button variant="primary" size="sm" onClick={handleAddString} className="font-semibold px-4 flex items-center gap-1.5">
+                <Plus size={16} /> Add Row
+              </Button>
+              <div>{items.length} rows</div>
+            </div>
+          </div>
+        ) : (
+          <div className="bg-card border border-border-subtle rounded-lg shadow-sm">
+            <div className="p-3 sm:p-4 border-b border-border-subtle flex items-center justify-between gap-3">
+              <div className="relative w-full sm:w-64">
+                <input 
+                  type="text" 
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  placeholder="Search rows..." 
+                  className="w-full text-sm pl-8 pr-4 py-2 border border-border-subtle rounded-md focus:outline-none focus:ring-1 focus:ring-navy-600 bg-background text-foreground" 
+                />
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted" />
+              </div>
+              <div className="text-xs sm:text-sm text-muted shrink-0">{items.length} rows</div>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="min-w-full table-auto text-left text-sm whitespace-nowrap bg-card">
+                <thead className="bg-black/5 border-b border-border-subtle">
+                  <tr>
+                    <th className="px-4 py-3 font-semibold text-muted w-10 text-center border-r border-border-subtle">
+                      <input type="checkbox" checked={selectedRows.size === items.length && items.length > 0} onChange={toggleSelectAll} className="rounded border-border-subtle text-navy-600 focus:ring-navy-600 cursor-pointer" />
+                    </th>
+                    <th className="px-4 py-3 font-bold text-xs uppercase text-muted w-10 text-center border-r border-border-subtle">#</th>
+                    {dataset.keys?.map(k => (
+                      <th key={k} className="px-4 py-3 font-bold text-xs uppercase text-muted border-r border-border-subtle">{k}</th>
+                    ))}
+                    <th className="px-4 py-3 font-bold text-xs uppercase text-muted text-center w-16">ACTIONS</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-border-subtle">
+                  {filteredIndices.map((idx) => {
+                    const rowObj = items[idx];
+                    return (
+                    <tr key={idx} className={`bg-card hover:bg-black/5 transition-colors ${selectedRows.has(idx) ? '!bg-navy-50/10' : ''}`}>
+                      <td className="px-4 py-2 text-center border-r border-border-subtle">
+                        <input
+                          type="checkbox"
+                          checked={selectedRows.has(idx)}
+                          onChange={() => toggleRowSelection(idx)}
+                          className="rounded border-border-subtle text-navy-600 focus:ring-navy-600 cursor-pointer"
+                        />
+                      </td>
+                      <td className="px-4 py-2 text-muted font-mono text-center text-xs border-r border-border-subtle">{idx + 1}</td>
+                      {dataset.keys?.map(k => {
+                        const isInvalid = invalidCells.has(`${idx}-${k}`);
+                        return (
+                          <td key={k} className="px-0 py-0 relative border-r border-border-subtle min-w-[150px]">
+                            <div className="invisible px-4 py-3 text-sm whitespace-pre" aria-hidden="true">
+                              {rowObj[k] || `Enter ${k}`}
+                            </div>
+                            <input
+                              type="text"
+                              value={rowObj[k] || ''}
+                              onChange={(e) => handleObjectChange(idx, k, e.target.value)}
+                              className={`absolute inset-0 w-full h-full px-4 py-2 border-none bg-transparent text-sm text-foreground transition-colors ${isInvalid
+                                ? 'ring-2 ring-inset ring-red-400 bg-red-50/50 focus:ring-red-500 focus:outline-none'
+                                : 'focus:outline-none focus:ring-2 focus:ring-inset focus:ring-navy-600'
+                                }`}
+                              placeholder={`Enter ${k}`}
+                            />
+                          </td>
+                        );
+                      })}
+                      <td className="px-4 py-2 text-center">
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveItem(idx)}
+                          className="p-1.5 text-muted hover:text-red-500 transition-all cursor-pointer"
+                          title="Remove Row"
+                        >
+                          <Trash2 size={16} />
+                        </button>
+                      </td>
+                    </tr>
+                    );
+                  })}
+                  {items.length === 0 && (
+                    <tr>
+                      <td colSpan={(dataset.keys?.length || 0) + 3} className="px-5 py-10 text-center text-muted italic font-medium">
+                        No data rows available.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+            <div className="p-4 border-t border-border-subtle bg-card flex justify-between items-center text-xs text-muted rounded-b-lg">
+              <Button variant="primary" size="sm" onClick={handleAddObject} className="font-semibold px-4 flex items-center gap-1.5">
+                <Plus size={16} /> Add Row
+              </Button>
+              <div>{items.length} rows - {dataset.keys?.length || 0} cols</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/screens/admin/DatasetsPage.tsx b/src/screens/admin/DatasetsPage.tsx
new file mode 100644
index 0000000..8aaea88
--- /dev/null
+++ b/src/screens/admin/DatasetsPage.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import { orderBookingClient } from '../../api/clients';
+import type { Dataset } from '../../api/types';
+import { Spinner } from '../../components/reusable/Spinner';
+import { Database } from 'lucide-react';
+import { useNavigate, useLocation, Outlet, useParams } from 'react-router-dom';
+
+export function DatasetsPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { id } = useParams<{ id: string }>();
+
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    fetchDatasets();
+  }, []);
+
+  const fetchDatasets = async () => {
+    try {
+      setLoading(true);
+      const res = await orderBookingClient.getDatasets();
+      setDatasets(res);
+      setError('');
+
+      // Auto-select first dataset if none selected and on base path
+      if (res.length > 0 && (location.pathname.endsWith('/admin/datasets') || location.pathname.endsWith('/admin/datasets/'))) {
+        navigate(`/admin/datasets/${res[0].id}`, { replace: true });
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to fetch datasets');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="p-10 flex justify-center"><Spinner /></div>;
+  }
+
+  if (error) {
+    return <div className="p-4 bg-red-50 text-red-600 rounded-md border border-red-100 font-medium">{error}</div>;
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row min-h-[calc(100vh-140px)] bg-card border border-border-subtle rounded-lg overflow-hidden">
+      {/* Sidebar */}
+      <div className="w-full md:w-64 border-b md:border-b-0 md:border-r border-border-subtle flex flex-col bg-card shrink-0">
+        <div className="p-4 border-b border-border-subtle flex items-center gap-2">
+          <Database size={18} className="text-muted" />
+          <h2 className="text-sm font-bold text-foreground tracking-wide">DATASETS</h2>
+        </div>
+        <div className="flex-1 overflow-y-auto max-h-48 md:max-h-none">
+          <ul className="flex flex-col py-2">
+            {datasets.map((ds) => {
+              const isActive = id === String(ds.id);
+              const isTable = ds.data_type === 'object';
+              return (
+                <li key={ds.id}>
+                  <button
+                    type="button"
+                    onClick={() => navigate(`/admin/datasets/${ds.id}`)}
+                    className={`w-full text-left px-4 py-3 flex flex-col gap-1 border-l-4 transition-colors cursor-pointer ${
+                      isActive 
+                        ? 'border-navy-600 bg-navy-50/10 text-foreground font-semibold' 
+                        : 'border-transparent hover:bg-black/5 text-muted'
+                    }`}
+                  >
+                    <div className={`font-medium text-sm truncate ${isActive ? 'text-foreground font-bold' : 'text-foreground/80'}`}>
+                      {ds.name}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className={`text-[10px] uppercase font-bold px-1.5 py-0.5 rounded flex items-center gap-1 ${
+                        isTable ? 'bg-purple-100 text-purple-700' : 'bg-emerald-100 text-emerald-700'
+                      }`}>
+                        {isTable ? 'Table' : 'List'}
+                      </span>
+                      <span className="text-xs text-muted font-medium">
+                        {ds.item_count || 0} items
+                      </span>
+                    </div>
+                  </button>
+                  <div className="h-px bg-border-subtle mx-4" />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="flex-1 bg-card overflow-y-auto min-w-0">
+        {id ? (
+          <Outlet />
+        ) : (
+          <div className="h-full min-h-[300px] flex items-center justify-center text-muted p-6 text-center">
+            Select a dataset to view its contents
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}