@suflon/rnmd-reporting 0.0.3 → 0.0.4

package/src/modules/ManagementReport/components/DetailsListingView.tsx

@@ -0,0 +1,781 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  useColorScheme,
+} from 'react-native';
+import {
+  IManagementReportDetail,
+  Icon,
+  useManagementReportStore,
+} from '@suflon/native-ui';
+import { themeColors } from '@/theme/colors';
+import { TimeframeDropdown, TimeframeOption, getTimeframeDateFilter } from './TimeframeDropdown';
+
+interface DetailsListingViewProps {
+  details: IManagementReportDetail[];
+  executionData: Record<number, any[]>;
+  searchQuery?: string;
+  doctorFilter?: string;
+  loading?: boolean;
+}
+
+const IGNORED_KEYS = new Set([
+  'raw',
+  'created_at',
+  'updated_at',
+  'modified_by',
+  'tenant_id',
+  'company_id',
+  'region_id',
+  'counter',
+  'currency',
+  'source',
+  'is_reschedule',
+]);
+
+function formatColumnTitle(key: string): string {
+  const customMap: Record<string, string> = {
+    plan_num: 'Plan #',
+    plan_type: 'Plan Type',
+    txn_number: 'Txn No',
+    txn_date: 'Date',
+    prescription_num: 'Presc #',
+    prescription_date: 'Date',
+    appointment_date: 'Date',
+    schedule_date: 'Schedule Date',
+    actual_date: 'Actual Date',
+    start_date: 'Start Date',
+    end_date: 'End Date',
+    appointment_type: 'Mode',
+    service_type: 'Service',
+    total_amount: 'Total Amt',
+    return_amount: 'Return Amt',
+    refunded_amount: 'Refund',
+    balance_amount: 'Balance',
+    discount_amount: 'Discount',
+    tax_amount: 'Tax',
+    mrp: 'MRP',
+    fees: 'Fee',
+    payment_status: 'Payment',
+    approval_status: 'Approval',
+    notes: 'Notes',
+    patient: 'Patient',
+    staff: 'Doctor / Staff',
+    status: 'Status',
+    severity: 'Severity',
+    title: 'Title / Description',
+    number: 'Ref #',
+    phone: 'Phone',
+    total: 'Total',
+    completed: 'Completed',
+    cancelled: 'Cancelled',
+    upcoming: 'Upcoming',
+    overdue: 'Overdue',
+    count: 'Count',
+    quantity: 'Qty',
+    qty: 'Qty',
+    price: 'Price',
+    rate: 'Rate',
+  };
+
+  if (customMap[key]) return customMap[key];
+
+  return key
+    .replace(/_/g, ' ')
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+    .trim();
+}
+
+function isAmountField(key: string): boolean {
+  const k = key.toLowerCase();
+  return (
+    k === 'mrp' ||
+    k === 'fees' ||
+    k === 'fee' ||
+    k.includes('amount') ||
+    k.includes('tax') ||
+    k.includes('discount') ||
+    k.includes('refund') ||
+    k.includes('balance') ||
+    k.includes('price') ||
+    k.includes('cost') ||
+    (k.includes('total_') && !k.includes('count'))
+  );
+}
+
+function isCountField(key: string): boolean {
+  const k = key.toLowerCase();
+  return (
+    k === 'total' ||
+    k === 'completed' ||
+    k === 'cancelled' ||
+    k === 'upcoming' ||
+    k === 'overdue' ||
+    k.includes('count') ||
+    k === 'quantity' ||
+    k === 'qty'
+  );
+}
+
+function isStatusField(key: string): boolean {
+  const k = key.toLowerCase();
+  return (
+    k === 'status' ||
+    k === 'severity' ||
+    k === 'payment_status' ||
+    k === 'approval_status' ||
+    k === 'state'
+  );
+}
+
+function isIdField(key: string): boolean {
+  const k = key.toLowerCase();
+  return (
+    k === 'plan_num' ||
+    k === 'txn_number' ||
+    k === 'prescription_num' ||
+    k === 'number' ||
+    k === 'invoice_num' ||
+    k === 'bill_num' ||
+    k === 'order_num' ||
+    k === 'id' ||
+    k === 'code'
+  );
+}
+
+function getColumnWidth(key: string): number {
+  if (isIdField(key)) return 80;
+  if (isStatusField(key)) return 86;
+  if (isCountField(key)) return 68;
+  if (isAmountField(key)) return 84;
+  if (key.includes('date')) return 86;
+  if (key.includes('time')) return 70;
+  if (key === 'plan_type' || key === 'service_type' || key === 'appointment_type') return 90;
+  if (key === 'title' || key === 'diagnosis' || key === 'category') return 130;
+  if (key === 'patient' || key === 'customer_name' || key === 'name') return 115;
+  if (key === 'staff' || key === 'doctor' || key === 'consultant') return 115;
+  if (key === 'notes') return 95;
+  if (key === 'phone') return 82;
+  return 85;
+}
+
+const StatusBadge: React.FC<{ value: string }> = ({ value }) => {
+  const isDark = useColorScheme() === 'dark';
+  if (!value || value === '-') {
+    return <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] font-medium">-</Text>;
+  }
+
+  const vLower = value.toLowerCase();
+  const isSuccess = ['completed', 'paid', 'approved', 'active', 'safe', 'mild'].includes(vLower);
+  const isWarning = ['upcoming', 'scheduled', 'pending', 'in_progress', 'moderate'].includes(vLower);
+  const isDanger = ['cancelled', 'rejected', 'expired', 'severe', 'high', 'overdue'].includes(vLower);
+
+  const badgeClass = isSuccess
+    ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-800'
+    : isWarning
+    ? 'bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 border-violet-200 dark:border-violet-800'
+    : isDanger
+    ? 'bg-rose-50 dark:bg-rose-950/40 text-rose-700 dark:text-rose-300 border-rose-200 dark:border-rose-800'
+    : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-700';
+
+  const badgeTextColor = isSuccess
+    ? (isDark ? '#6EE7B7' : '#047857')
+    : isWarning
+    ? (isDark ? '#C4B5FD' : '#6D28D9')
+    : isDanger
+    ? (isDark ? '#FDA4AF' : '#BE123C')
+    : (isDark ? '#E5E7EB' : '#334155');
+
+  return (
+    <View className={`px-1.5 py-0.5 rounded-lg self-start border ${badgeClass}`}>
+      <Text style={{ color: badgeTextColor }} className="text-[9px] font-bold uppercase" numberOfLines={1}>
+        {value}
+      </Text>
+    </View>
+  );
+};
+
+const SingleReportTableCard: React.FC<{
+  detail: IManagementReportDetail;
+  rows: any[];
+  searchQuery: string;
+  doctorFilter: string;
+  loading: boolean;
+}> = ({
+  detail,
+  rows,
+  searchQuery,
+  doctorFilter,
+  loading,
+}) => {
+  const isDark = useColorScheme() === 'dark';
+  const [timeframe, setTimeframe] = useState<TimeframeOption>('Monthly');
+  const [layoutMode, setLayoutMode] = useState<'table' | 'card'>('table');
+  const [statusFilter, setStatusFilter] = useState<string>('ALL');
+  const [fetching, setFetching] = useState(false);
+  const PAGE_SIZE = 10;
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const executeReportItem = useManagementReportStore((s) => s.executeReportItem);
+
+  const handleSelectTimeframe = useCallback(
+    async (selectedTf: TimeframeOption) => {
+      setTimeframe(selectedTf);
+      if (detail.report_id) {
+        setFetching(true);
+        const dateFilter = getTimeframeDateFilter(selectedTf);
+        const state = useManagementReportStore.getState();
+        const origin = (state.selectedReport?.mgmt_report_type || state.activeCategory || 'opd').toLowerCase();
+        await executeReportItem(
+          detail.report_id,
+          detail.report?.is_dynamic || false,
+          { filters: dateFilter },
+          origin,
+          true
+        );
+        setFetching(false);
+      }
+    },
+    [detail, executeReportItem]
+  );
+
+  const validRows = useMemo(() => {
+    if (!Array.isArray(rows)) return [];
+    return rows.filter((r) => r && typeof r === 'object');
+  }, [rows]);
+
+  const dynamicColumns = useMemo(() => {
+    if (validRows.length === 0) return [];
+    const keysSet = new Set<string>();
+
+    validRows.forEach((r) => {
+      Object.keys(r).forEach((k) => {
+        if (!IGNORED_KEYS.has(k) && r[k] !== undefined) {
+          keysSet.add(k);
+        }
+      });
+    });
+
+    const allKeys = Array.from(keysSet);
+
+    return allKeys.sort((a, b) => {
+      const getPriority = (k: string) => {
+        if (isIdField(k)) return 1;
+        if (k.includes('date')) return 2;
+        if (k === 'staff' || k === 'doctor' || k === 'consultant') return 3;
+        if (k === 'patient' || k === 'customer_name' || k === 'vendor_name' || k === 'name') return 4;
+        if (k === 'title' || k === 'diagnosis' || k === 'plan_type' || k === 'service_type' || k === 'category') return 5;
+        if (k.includes('time')) return 6;
+        if (isAmountField(k)) return 7;
+        if (isCountField(k)) return 8;
+        if (isStatusField(k)) return 9;
+        return 10;
+      };
+      return getPriority(a) - getPriority(b);
+    });
+  }, [validRows]);
+
+  const availableStatuses = useMemo(() => {
+    const set = new Set<string>();
+    validRows.forEach((r) => {
+      const st = r.status || r.severity || r.payment_status || r.plan_type;
+      if (st && st !== '-' && typeof st === 'string') {
+        set.add(st);
+      }
+    });
+    return Array.from(set);
+  }, [validRows]);
+
+  const filteredRows = useMemo(() => {
+    const q = searchQuery.toLowerCase().trim();
+    const doc = doctorFilter && doctorFilter !== 'ALL' ? doctorFilter.toLowerCase().trim() : '';
+
+    return validRows.filter((r) => {
+      const matchSearch =
+        !q ||
+        Object.values(r).some((v) =>
+          typeof v === 'string' || typeof v === 'number'
+            ? String(v).toLowerCase().includes(q)
+            : false
+        );
+
+      const staffVal = (r.staff || r.doctor || r.consultant || '').toLowerCase();
+      const matchDoc = !doc || staffVal.includes(doc);
+
+      const stVal = (r.status || r.severity || r.payment_status || r.plan_type || '').toLowerCase();
+      const matchStatus =
+        statusFilter === 'ALL' || stVal === statusFilter.toLowerCase();
+
+      return matchSearch && matchDoc && matchStatus;
+    });
+  }, [validRows, searchQuery, doctorFilter, statusFilter]);
+
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, doctorFilter, statusFilter]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredRows.length / PAGE_SIZE));
+  const startIdx = (currentPage - 1) * PAGE_SIZE;
+  const endIdx = Math.min(startIdx + PAGE_SIZE, filteredRows.length);
+  const displayedRows = useMemo(() => {
+    return filteredRows.slice(startIdx, endIdx);
+  }, [filteredRows, startIdx, endIdx]);
+
+  const totalTableWidth = useMemo(() => {
+    const colsWidth = dynamicColumns.reduce((sum, col) => sum + getColumnWidth(col), 0);
+    return Math.max(colsWidth + 24, 380);
+  }, [dynamicColumns]);
+
+  const isBusy = loading || fetching;
+  const title = detail.report?.name || detail.report_num || 'Records Listing';
+
+  return (
+    <View className="p-3.5 rounded-3xl bg-white dark:bg-background-darkSecondaryBg border border-slate-100 dark:border-slate-800 mb-3.5">
+      {/* Header: Table Title & Action Controls */}
+      <View className="flex-row items-center justify-between pb-2.5 border-b border-slate-100 dark:border-slate-800">
+        <View className="flex-1 mr-2">
+          <Text
+            style={{ color: isDark ? '#FFFFFF' : '#0F172A' }}
+            className="text-[14px] font-extrabold tracking-tight leading-tight"
+            numberOfLines={1}
+          >
+            {title}
+          </Text>
+          <Text
+            style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }}
+            className="text-[10px] font-medium mt-0.5"
+            numberOfLines={1}
+          >
+            {filteredRows.length} total records ({timeframe})
+          </Text>
+        </View>
+
+        {/* Right Action Controls: Timeframe Dropdown + Interactive Table/Cards Switcher */}
+        <View className="flex-row items-center gap-1.5 shrink-0">
+          <TimeframeDropdown
+            value={timeframe}
+            onChange={handleSelectTimeframe}
+          />
+
+          {/* Interactive Table / Cards Pill Switcher */}
+          {filteredRows.length > 0 && (
+            <View className="p-0.5 rounded-xl bg-slate-100 dark:bg-slate-800 flex-row items-center">
+              <TouchableOpacity
+                onPress={() => setLayoutMode('table')}
+                activeOpacity={0.7}
+                hitSlop={{ top: 6, bottom: 6, left: 6, right: 4 }}
+                style={{
+                  backgroundColor: layoutMode === 'table' ? (isDark ? themeColors.slate[700] : themeColors.white) : 'transparent',
+                }}
+                className="px-2 py-1 rounded-lg flex-row items-center gap-1"
+              >
+                <Icon
+                  name="align-justify"
+                  type="Feather"
+                  size={10}
+                  color={layoutMode === 'table' ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8')}
+                />
+                <Text
+                  style={{
+                    color: layoutMode === 'table' ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8'),
+                    fontWeight: layoutMode === 'table' ? '700' : '500',
+                  }}
+                  className="text-[11px]"
+                >
+                  Table
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                onPress={() => setLayoutMode('card')}
+                activeOpacity={0.7}
+                hitSlop={{ top: 6, bottom: 6, left: 4, right: 6 }}
+                style={{
+                  backgroundColor: layoutMode === 'card' ? (isDark ? themeColors.slate[700] : themeColors.white) : 'transparent',
+                }}
+                className="px-2 py-1 rounded-lg flex-row items-center gap-1"
+              >
+                <Icon
+                  name="grid"
+                  type="Feather"
+                  size={10}
+                  color={layoutMode === 'card' ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8')}
+                />
+                <Text
+                  style={{
+                    color: layoutMode === 'card' ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8'),
+                    fontWeight: layoutMode === 'card' ? '700' : '500',
+                  }}
+                  className="text-[11px]"
+                >
+                  Cards
+                </Text>
+              </TouchableOpacity>
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* Dynamic Status Quick Filter Chips */}
+      {availableStatuses.length > 1 && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: 6 }}
+          className="pt-2 pb-1"
+        >
+          <TouchableOpacity
+            onPress={() => setStatusFilter('ALL')}
+            activeOpacity={0.8}
+            style={{
+              backgroundColor: statusFilter === 'ALL' ? '#7c3aed' : (isDark ? themeColors.slate[800] : themeColors.slate[100]),
+              borderColor: statusFilter === 'ALL' ? '#7c3aed' : (isDark ? themeColors.slate[700] : themeColors.slate[200]),
+            }}
+            className="px-2.5 py-1 rounded-xl border"
+          >
+            <Text
+              style={{ color: statusFilter === 'ALL' ? '#FFFFFF' : (isDark ? '#9CA3AF' : '#64748b') }}
+              className="text-[10px] font-bold"
+            >
+              All ({validRows.length})
+            </Text>
+          </TouchableOpacity>
+
+          {availableStatuses.map((st) => {
+            const isActive = statusFilter === st;
+            const count = validRows.filter(
+              (r) => (r.status || r.severity || r.payment_status || r.plan_type) === st
+            ).length;
+            return (
+              <TouchableOpacity
+                key={st}
+                onPress={() => setStatusFilter(st)}
+                activeOpacity={0.8}
+                style={{
+                  backgroundColor: isActive ? '#7c3aed' : (isDark ? themeColors.slate[800] : themeColors.slate[100]),
+                  borderColor: isActive ? '#7c3aed' : (isDark ? themeColors.slate[700] : themeColors.slate[200]),
+                }}
+                className="px-2.5 py-1 rounded-xl border"
+              >
+                <Text
+                  style={{ color: isActive ? '#FFFFFF' : (isDark ? '#9CA3AF' : '#64748b') }}
+                  className="text-[10px] font-bold capitalize"
+                >
+                  {st} ({count})
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      )}
+
+      {/* Main Content Layout: Table vs Cards */}
+      {isBusy ? (
+        <View className="py-10 items-center justify-center">
+          <ActivityIndicator size="small" color="#7c3aed" />
+          <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] font-semibold mt-2">
+            Loading {timeframe} records...
+          </Text>
+        </View>
+      ) : filteredRows.length === 0 ? (
+        <View className="py-7 px-4 items-center justify-center rounded-2xl border border-dashed border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-background-lightBlack mt-1">
+          <Icon name="inbox" type="Feather" size={18} color="#94a3b8" />
+          <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-bold mt-1">
+            No records for {timeframe}
+          </Text>
+          <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] text-center mt-0.5">
+            {searchQuery ? 'No results matched your search query.' : 'Try selecting Monthly or adjusting filters.'}
+          </Text>
+        </View>
+      ) : layoutMode === 'table' ? (
+        <ScrollView horizontal showsHorizontalScrollIndicator={true} className="mt-1">
+          <View
+            style={{ minWidth: totalTableWidth }}
+            className="overflow-hidden"
+          >
+            {/* Dynamic Table Header */}
+            <View className="flex-row py-2 px-2.5 border-b border-slate-100 dark:border-slate-800/80">
+              {dynamicColumns.map((colKey) => (
+                <Text
+                  key={colKey}
+                  style={{
+                    width: getColumnWidth(colKey),
+                    color: isDark ? '#9CA3AF' : '#94A3B8',
+                  }}
+                  className="text-[9px] uppercase font-bold pr-1.5"
+                  numberOfLines={1}
+                >
+                  {formatColumnTitle(colKey)}
+                </Text>
+              ))}
+            </View>
+
+            {/* Dynamic Table Rows */}
+            {displayedRows.map((row, rowIdx) => (
+              <View
+                key={rowIdx}
+                className="flex-row items-center py-2.5 px-2.5 border-b border-slate-100 dark:border-slate-800/60"
+              >
+                {dynamicColumns.map((colKey) => {
+                  const val = row[colKey];
+                  const width = getColumnWidth(colKey);
+
+                  if (isStatusField(colKey)) {
+                    return (
+                      <View key={colKey} style={{ width }} className="pr-1.5 justify-center">
+                        <StatusBadge value={String(val || '-')} />
+                      </View>
+                    );
+                  }
+
+                  if (isAmountField(colKey)) {
+                    const formatted =
+                      val != null && val !== '' && !isNaN(Number(val))
+                        ? `₹${Number(val).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`
+                        : String(val || '-');
+                    return (
+                      <Text
+                        key={colKey}
+                        style={{
+                          width,
+                          color: isDark ? '#FFFFFF' : '#0F172A',
+                        }}
+                        className="text-[11px] font-bold pr-1.5 font-mono"
+                        numberOfLines={1}
+                      >
+                        {formatted}
+                      </Text>
+                    );
+                  }
+
+                  if (isCountField(colKey)) {
+                    const isOverdue = colKey === 'overdue' && Number(val) > 0;
+                    const isCompleted = colKey === 'completed' && Number(val) > 0;
+
+                    return (
+                      <Text
+                        key={colKey}
+                        style={{
+                          width,
+                          color: isOverdue
+                            ? (isDark ? '#FDA4AF' : '#E11D48')
+                            : isCompleted
+                            ? (isDark ? '#6EE7B7' : '#059669')
+                            : (isDark ? '#E5E7EB' : '#334155'),
+                        }}
+                        className="text-xs font-bold pr-1.5"
+                        numberOfLines={1}
+                      >
+                        {val !== undefined && val !== null ? String(val) : '-'}
+                      </Text>
+                    );
+                  }
+
+                  if (isIdField(colKey)) {
+                    return (
+                      <Text
+                        key={colKey}
+                        style={{ width }}
+                        className="text-[10px] font-mono font-bold text-violet-600 dark:text-violet-400 pr-1.5"
+                        numberOfLines={1}
+                      >
+                        {String(val || `#${startIdx + rowIdx + 1}`)}
+                      </Text>
+                    );
+                  }
+
+                  const isSecondaryText =
+                    colKey.includes('date') || colKey === 'staff' || colKey === 'doctor' || colKey === 'notes';
+
+                  return (
+                    <Text
+                      key={colKey}
+                      style={{
+                        width,
+                        color: isSecondaryText
+                          ? (isDark ? '#9CA3AF' : '#94A3B8')
+                          : (isDark ? '#E2E8F0' : '#1E293B'),
+                      }}
+                      className="text-xs pr-1.5 font-medium"
+                      numberOfLines={1}
+                    >
+                      {val === '' || val === null || val === undefined ? '-' : String(val)}
+                    </Text>
+                  );
+                })}
+              </View>
+            ))}
+          </View>
+        </ScrollView>
+      ) : (
+        /* Theme-Aligned Dynamic Cards Layout */
+        <View className="space-y-2 mt-2">
+          {displayedRows.map((row, rowIdx) => {
+            const idKey = dynamicColumns.find(isIdField);
+            const statusKey = dynamicColumns.find(isStatusField);
+            const amountKey = dynamicColumns.find(isAmountField);
+            const titleKey = dynamicColumns.find(
+              (k) => k === 'patient' || k === 'customer_name' || k === 'title' || k === 'name' || k === 'plan_type'
+            );
+            const otherKeys = dynamicColumns.filter(
+              (k) => k !== idKey && k !== statusKey && k !== amountKey && k !== titleKey
+            ).slice(0, 4);
+
+            return (
+              <View
+                key={rowIdx}
+                className="p-3 rounded-2xl bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700/70 space-y-2"
+              >
+                <View className="flex-row items-center justify-between">
+                  <View className="flex-row items-center gap-2">
+                    {idKey && (
+                      <Text className="text-[10px] font-mono font-bold text-violet-600 dark:text-violet-400">
+                        {String(row[idKey] || `#${startIdx + rowIdx + 1}`)}
+                      </Text>
+                    )}
+                    {titleKey && (
+                      <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-bold" numberOfLines={1}>
+                        {row[titleKey] ? String(row[titleKey]) : '-'}
+                      </Text>
+                    )}
+                  </View>
+                  {statusKey && <StatusBadge value={String(row[statusKey] || '-')} />}
+                </View>
+
+                <View className="flex-row flex-wrap items-center justify-between pt-1.5 border-t border-slate-100 dark:border-slate-700/60 gap-y-1.5">
+                  {otherKeys.map((k) => (
+                    <View key={k} className="min-w-[45%]">
+                      <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[9px]">{formatColumnTitle(k)}</Text>
+                      <Text style={{ color: isDark ? '#E2E8F0' : '#1E293B' }} className="text-xs font-semibold mt-0.5">
+                        {row[k] !== undefined && row[k] !== null && row[k] !== '' ? String(row[k]) : '-'}
+                      </Text>
+                    </View>
+                  ))}
+                  {amountKey && (
+                    <View className="min-w-[45%] items-end">
+                      <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[9px]">{formatColumnTitle(amountKey)}</Text>
+                      <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-bold mt-0.5">
+                        {row[amountKey] != null && !isNaN(Number(row[amountKey]))
+                          ? `₹${Number(row[amountKey]).toLocaleString()}`
+                          : String(row[amountKey] || '-')}
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+            );
+          })}
+        </View>
+      )}
+
+      {/* Bottom Clean Pagination Bar */}
+      {filteredRows.length > 0 && (
+        <View className="flex-row items-center justify-between pt-2.5 mt-2 border-t border-slate-100 dark:border-slate-800">
+          <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] font-medium">
+            Showing {startIdx + 1}-{endIdx} of {filteredRows.length}
+          </Text>
+
+          <View className="flex-row items-center gap-1">
+            <TouchableOpacity
+              onPress={() => setCurrentPage((p) => Math.max(1, p - 1))}
+              disabled={currentPage <= 1}
+              activeOpacity={0.8}
+              className={`w-6 h-6 rounded-lg items-center justify-center border ${
+                currentPage > 1
+                  ? 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700'
+                  : 'bg-slate-50 dark:bg-slate-900 border-slate-100 dark:border-slate-800 opacity-40'
+              }`}
+            >
+              <Icon name="chevron-left" type="Feather" size={11} color={currentPage > 1 ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8')} />
+            </TouchableOpacity>
+
+            <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-[10px] font-bold px-1">
+              {currentPage} / {totalPages}
+            </Text>
+
+            <TouchableOpacity
+              onPress={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+              disabled={currentPage >= totalPages}
+              activeOpacity={0.8}
+              className={`w-6 h-6 rounded-lg items-center justify-center border ${
+                currentPage < totalPages
+                  ? 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700'
+                  : 'bg-slate-50 dark:bg-slate-900 border-slate-100 dark:border-slate-800 opacity-40'
+              }`}
+            >
+              <Icon name="chevron-right" type="Feather" size={11} color={currentPage < totalPages ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8')} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export const DetailsListingView: React.FC<DetailsListingViewProps> = ({
+  details,
+  executionData,
+  searchQuery = '',
+  doctorFilter = 'ALL',
+  loading = false,
+}) => {
+  const listingDetails = useMemo(() => {
+    let target = details.filter(
+      (d) =>
+        d.display_size === 'LG' ||
+        d.report?.report_type === 'LISTING' ||
+        d.report?.report_type === 'TABLE'
+    );
+
+    if (target.length === 0) {
+      target = details.filter(
+        (d) =>
+          d.display_size !== 'XS' &&
+          d.display_size !== 'SM' &&
+          d.report?.report_type !== 'CARD' &&
+          d.report?.report_type !== 'SUMMARY'
+      );
+    }
+
+    if (target.length === 0) {
+      target = details.filter((d) => {
+        const rows = executionData[d.report_id];
+        return Array.isArray(rows) && rows.length > 0;
+      });
+    }
+
+    if (target.length === 0 && details.length > 0) {
+      target = details.filter((d) => d.report?.report_type !== 'CARD' && d.display_size !== 'XS');
+    }
+
+    return target;
+  }, [details, executionData]);
+
+  if (listingDetails.length === 0) {
+    return null;
+  }
+
+  return (
+    <View className="space-y-3.5">
+      {listingDetails.map((d) => {
+        const rows = executionData[d.report_id] || [];
+
+        return (
+          <SingleReportTableCard
+            key={d.id || d.report_id}
+            detail={d}
+            rows={rows}
+            searchQuery={searchQuery}
+            doctorFilter={doctorFilter}
+            loading={loading}
+          />
+        );
+      })}
+    </View>
+  );
+};