@jescon-technologies/react-native-ui-kit 0.0.14 → 0.0.15

package/src/Hoc/HDashboard.tsx

@@ -0,0 +1,1064 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextProps,
+  View,
+  ViewProps,
+  FlatList,
+  ListRenderItemInfo,
+  ActivityIndicator,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  DimensionValue,
+} from 'react-native';
+import {
+  BarChart,
+  BubbleChart,
+  CandleStickChart,
+  LineChart,
+  LineChartBicolor,
+  PieChart,
+  PieChartPro,
+  PopulationPyramid,
+  RadarChart,
+} from 'react-native-gifted-charts';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+import HShadowButton from './HShadowButton';
+import HIcons from './HIcons';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Global } from '../Common/Global';
+import SDateTimePicker from '../StaticComponents/SDateTimePicker';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface Theme {
+  colors: Record<string, string>;
+}
+type ThemeColorKey = string;
+
+interface DateRange {
+  from?: string;
+  to?: string;
+}
+
+interface ChartConfig {
+  component: keyof typeof GIFTED_CHARTS | string;
+  props?: Record<string, unknown> & {
+    data?: PieDatum[];
+    centerLabelComponent?: () => React.ReactElement | null;
+  };
+}
+
+interface WidgetLayout {
+  visible?: boolean;
+  order?: number;
+}
+
+interface Widget {
+  id?: string | number;
+  type: 'chart' | 'heatmap' | 'ranking' | string;
+  title?: string;
+  subtitle?: string;
+  iconName?: string;
+  unit?: string;
+  chart?: ChartConfig;
+  data?: WidgetDatum[];
+  options?: { lowColor?: string; highColor?: string };
+  layout?: WidgetLayout;
+}
+
+interface WidgetDatum {
+  id?: string | number;
+  label?: string;
+  name?: string;
+  value?: number | string;
+  ratio?: number;
+  percentage?: number;
+  color?: string;
+}
+
+interface PieDatum {
+  value?: number | string;
+  text?: string;
+  label?: string;
+  color?: string;
+}
+
+interface Dashboard {
+  dashboardId?: string | number;
+  dashboardTitle?: string;
+  department?: string;
+  iconName?: string;
+  dateRange?: DateRange;
+  widgets?: Widget[];
+  theme?: Theme;
+  content?: ContentConfig;
+  chartStyle?: ChartStyleConfig;
+}
+
+interface ContentConfig {
+  iconGroup?: number;
+  widgetIconSize?: number;
+  departmentIconSize?: number;
+  detailsLabel?: string;
+  unsupportedWidgetMessage?: string;
+  loadingLabel?: string;
+  emptyStateMessage?: string;
+  horizontalPadding?: number | string;
+}
+
+interface ChartStyleConfig {
+  bar?: Record<string, unknown>;
+  line?: Record<string, unknown>;
+  pie?: { centerCaption?: string; [key: string]: unknown };
+  axisTextStyle?: TextStyle;
+  [key: string]: unknown;
+}
+
+interface DashboardPayload {
+  departments: Dashboard[];
+  theme?: Theme;
+  content?: ContentConfig;
+  chartStyle?: ChartStyleConfig;
+}
+
+interface HDashboardProps {
+  /** Pre-supplied dashboard data; when present, the API is not called. */
+  dashboardData?: DashboardPayload | Dashboard[] | Dashboard | null;
+  /** API URL. When present (and `dashboardData` is not), the component fetches. */
+  buttonapi?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const GIFTED_CHARTS = {
+  BarChart,
+  BubbleChart,
+  CandleStickChart,
+  LineChart,
+  LineChartBicolor,
+  PieChart,
+  PieChartPro,
+  PopulationPyramid,
+  RadarChart,
+} as const;
+
+/** Chart components have wildly divergent prop shapes; we don't try to union them. */
+type ChartComponent = React.ComponentType<Record<string, unknown>>;
+
+const PIE_CHARTS = new Set<string>(['PieChart', 'PieChartPro']);
+const AXIS_CHARTS = new Set<string>(['LineChart', 'LineChartBicolor', 'BarChart']);
+
+// ---------------------------------------------------------------------------
+// Core helpers
+// ---------------------------------------------------------------------------
+
+const themeColor = (theme: Theme | null | undefined, key: ThemeColorKey): string | undefined =>
+  theme?.colors?.[key];
+
+const toNumber = (value: unknown): number => Number(value || 0);
+const formatNumber = (value: unknown): string => toNumber(value).toLocaleString();
+
+const normalizeDashboardPayload = (
+  raw: DashboardPayload | Dashboard[] | Dashboard | null | undefined
+): DashboardPayload => {
+  if (!raw) return { departments: [] };
+  if (Array.isArray(raw)) return { departments: raw };
+  if (Array.isArray((raw as DashboardPayload).departments)) return raw as DashboardPayload;
+  return { ...(raw as object), departments: [raw as Dashboard] };
+};
+
+const pickInitialDashboard = (departments: Dashboard[]): Dashboard | null =>
+  departments && departments.length ? departments[0] : null;
+
+// ---------------------------------------------------------------------------
+// Reusable themed primitives
+// ---------------------------------------------------------------------------
+
+interface ThemedTextProps extends TextProps {
+  theme: Theme | null;
+  colorKey?: ThemeColorKey;
+  style?: StyleProp<TextStyle>;
+  children?: React.ReactNode;
+}
+
+const ThemedText: React.FC<ThemedTextProps> = ({
+  theme,
+  colorKey = 'text',
+  style,
+  children,
+  ...props
+}) => (
+  <Text style={[style, { color: themeColor(theme, colorKey) }]} {...props}>
+    {children}
+  </Text>
+);
+
+interface ThemedViewProps extends ViewProps {
+  theme: Theme | null;
+  backgroundColorKey?: ThemeColorKey;
+  borderColorKey?: ThemeColorKey;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+
+const ThemedView: React.FC<ThemedViewProps> = ({
+  theme,
+  backgroundColorKey,
+  borderColorKey,
+  style,
+  children,
+  ...props
+}) => {
+  const dynamic: ViewStyle = {};
+  if (backgroundColorKey) dynamic.backgroundColor = themeColor(theme, backgroundColorKey);
+  if (borderColorKey) dynamic.borderColor = themeColor(theme, borderColorKey);
+  return (
+    <View style={[style, dynamic]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+interface IconRendererProps {
+  name?: string;
+  icongroup?: number;
+  size?: number;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const IconRenderer: React.FC<IconRendererProps> = ({ name, icongroup, size, color, style }) =>
+  name ? (
+    <HIcons.Icons
+      name={name}
+      icongroup={icongroup}
+      size={size}
+      color={color}
+      style={style}
+    />
+  ) : null;
+
+interface EmptyStateProps {
+  message: string;
+  theme: Theme | null;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ message, theme }) => (
+  <ThemedText theme={theme} colorKey="muted" style={styles.emptyText}>
+    {message}
+  </ThemedText>
+);
+
+// ---------------------------------------------------------------------------
+// Generic list renderer
+// ---------------------------------------------------------------------------
+
+const renderList = <T,>(
+  data: T[],
+  keyFn: (item: T, index: number) => string | number,
+  renderItem: (item: T, index: number, key: string | number) => React.ReactNode
+): React.ReactNode[] => data.map((item, index) => renderItem(item, index, keyFn(item, index)));
+
+// ---------------------------------------------------------------------------
+// Shared legend
+// ---------------------------------------------------------------------------
+
+interface ChartLegendProps {
+  data?: PieDatum[];
+  theme: Theme | null;
+}
+
+const ChartLegend: React.FC<ChartLegendProps> = ({ data, theme }) => {
+  if (!Array.isArray(data)) return null;
+  return (
+    <View
+      style={[
+        styles.chartLegend,
+        { borderTopColor: themeColor(theme, 'border') ?? 'transparent' },
+      ]}
+    >
+      {renderList(
+        data,
+        (item, i) => `${item.text || item.label || 'segment'}-${i}`,
+        (item, _index, key) => (
+          <View key={key} style={styles.chartLegendItem}>
+            <View
+              style={[
+                styles.chartLegendDot,
+                { backgroundColor: item.color || themeColor(theme, 'primary') },
+              ]}
+            />
+            <ThemedText theme={theme} colorKey="muted" style={styles.chartLegendLabel}>
+              {item.text || item.label}
+            </ThemedText>
+            <ThemedText theme={theme} colorKey="text" style={styles.chartLegendValue}>
+              {formatNumber(item.value)}
+            </ThemedText>
+          </View>
+        )
+      )}
+    </View>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Chart sub-components
+// ---------------------------------------------------------------------------
+
+interface PieChartCenterLabelProps {
+  data: PieDatum[];
+  theme: Theme | null;
+  caption?: string;
+}
+
+const PieChartCenterLabel: React.FC<PieChartCenterLabelProps> = ({ data, theme, caption }) => {
+  const total = data.reduce((sum, item) => sum + toNumber(item.value), 0);
+  return (
+    <View style={styles.pieCenterLabel}>
+      <ThemedText theme={theme} colorKey="text" style={styles.pieCenterValue}>
+        {formatNumber(total)}
+      </ThemedText>
+      <ThemedText theme={theme} colorKey="muted" style={styles.pieCenterCaption}>
+        {caption}
+      </ThemedText>
+    </View>
+  );
+};
+
+const buildChartDefaults = (
+  componentName: string,
+  styleConfig: ChartStyleConfig,
+  configuredProps: NonNullable<ChartConfig['props']>,
+  theme: Theme | null
+): Record<string, unknown> => {
+  const defaults: Record<string, unknown> = {};
+
+  if (AXIS_CHARTS.has(componentName)) {
+    const base =
+      (componentName === 'BarChart' ? styleConfig.bar : styleConfig.line) || {};
+    const axisStyle = styleConfig.axisTextStyle || {};
+    Object.assign(defaults, base, {
+      yAxisTextStyle: axisStyle,
+      xAxisLabelTextStyle: axisStyle,
+    });
+  }
+
+  if (
+    PIE_CHARTS.has(componentName) &&
+    !configuredProps.centerLabelComponent &&
+    Array.isArray(configuredProps.data)
+  ) {
+    defaults.centerLabelComponent = () => (
+      <PieChartCenterLabel
+        data={configuredProps.data as PieDatum[]}
+        theme={theme}
+        caption={styleConfig.pie?.centerCaption}
+      />
+    );
+  }
+
+  return defaults;
+};
+
+// ---------------------------------------------------------------------------
+// Widget renderers
+// ---------------------------------------------------------------------------
+
+interface WidgetRendererProps {
+  widget: Widget;
+  theme: Theme | null;
+  content?: ContentConfig | null;
+  chartStyle?: ChartStyleConfig;
+}
+
+const ChartWidget: React.FC<WidgetRendererProps> = ({ widget, theme, chartStyle }) => {
+  const componentName = widget.chart?.component ?? '';
+  const ChartComponent = (GIFTED_CHARTS as Record<string, ChartComponent | undefined>)[
+    componentName
+  ];
+
+  if (!ChartComponent) {
+    return <EmptyState message={`Unsupported chart: ${componentName}`} theme={theme} />;
+  }
+
+  const configuredProps = widget.chart?.props || {};
+  const defaults = buildChartDefaults(componentName, chartStyle || {}, configuredProps, theme);
+
+  return (
+    <View style={styles.chartContainer}>
+      {React.createElement(ChartComponent, Object.assign({}, defaults, configuredProps))}
+      {PIE_CHARTS.has(componentName) && (
+        <ChartLegend data={configuredProps.data as PieDatum[]} theme={theme} />
+      )}
+    </View>
+  );
+};
+
+const HeatmapWidget: React.FC<WidgetRendererProps> = ({ widget, theme }) => {
+  const data = widget.data || [];
+  const lowColor = widget.options?.lowColor || themeColor(theme, 'grid');
+  const highColor = widget.options?.highColor || themeColor(theme, 'danger');
+
+  return (
+    <View style={styles.heatmap}>
+      {renderList(
+        data,
+        (item, i) => item.id || item.label || i,
+        (item, _index, key) => (
+          <View
+            key={key}
+            style={[
+              styles.heatCell,
+              {
+                backgroundColor:
+                  item.color || ((item.ratio ?? 0) > 0.5 ? highColor : lowColor),
+              },
+            ]}
+          >
+            <ThemedText theme={theme} colorKey="text" style={styles.heatLabel}>
+              {item.label || item.name}
+            </ThemedText>
+            <ThemedText theme={theme} colorKey="text" style={styles.heatValue}>
+              {item.value}
+            </ThemedText>
+          </View>
+        )
+      )}
+    </View>
+  );
+};
+
+const RankingWidget: React.FC<WidgetRendererProps> = ({ widget, theme }) => {
+  const data = widget.data || [];
+  return (
+    <View>
+      {renderList(
+        data,
+        (item, i) => item.id || i,
+        (item, index, key) => (
+          <View key={key} style={styles.rankRow}>
+            <ThemedText theme={theme} colorKey="muted" style={styles.rankNumber}>
+              {index + 1}
+            </ThemedText>
+            <View style={styles.rankBody}>
+              <View style={styles.rankLabels}>
+                <ThemedText theme={theme} colorKey="text" style={styles.itemTitle}>
+                  {item.label}
+                </ThemedText>
+                <ThemedText theme={theme} colorKey="muted" style={styles.itemSubtitle}>
+                  {item.value} {widget.unit}
+                </ThemedText>
+              </View>
+              <View
+                style={[
+                  styles.progressTrack,
+                  { backgroundColor: themeColor(theme, 'border') },
+                ]}
+              >
+                <View
+                  style={[
+                    styles.progressFill,
+                    {
+                      width: `${item.percentage ?? 0}%` as DimensionValue,
+                      backgroundColor: themeColor(theme, 'primary'),
+                    },
+                  ]}
+                />
+              </View>
+            </View>
+          </View>
+        )
+      )}
+    </View>
+  );
+};
+
+const WIDGET_RENDERERS: Record<string, React.ComponentType<WidgetRendererProps>> = {
+  chart: ChartWidget,
+  heatmap: HeatmapWidget,
+  ranking: RankingWidget,
+};
+
+// ---------------------------------------------------------------------------
+// Widget shell
+// ---------------------------------------------------------------------------
+
+interface WidgetBodyProps extends WidgetRendererProps {}
+
+const WidgetBody: React.FC<WidgetBodyProps> = ({ widget, theme, content, chartStyle }) => {
+  const Renderer = WIDGET_RENDERERS[widget.type];
+  return Renderer ? (
+    <Renderer widget={widget} theme={theme} content={content} chartStyle={chartStyle} />
+  ) : (
+    <EmptyState
+      message={content?.unsupportedWidgetMessage ?? 'Unsupported widget type.'}
+      theme={theme}
+    />
+  );
+};
+
+interface DashboardWidgetProps extends WidgetRendererProps {}
+
+const DashboardWidget: React.FC<DashboardWidgetProps> = ({
+  widget,
+  theme,
+  content,
+  chartStyle,
+}) => {
+  const primary = themeColor(theme, 'primary');
+
+  return (
+    <ThemedView
+      theme={theme}
+      backgroundColorKey="surface"
+      borderColorKey="border"
+      style={styles.widgetCard}
+    >
+      <View
+        style={[styles.widgetHeader, { borderBottomColor: themeColor(theme, 'border') }]}
+      >
+        <IconRenderer
+          name={widget.iconName}
+          icongroup={content?.iconGroup}
+          size={content?.widgetIconSize}
+          color={primary}
+          style={styles.widgetIcon}
+        />
+        <View style={styles.widgetHeaderCopy}>
+          <ThemedText theme={theme} colorKey="text" style={styles.widgetTitle}>
+            {widget.title}
+          </ThemedText>
+          {widget.subtitle ? (
+            <ThemedText theme={theme} colorKey="muted" style={styles.widgetSubtitle}>
+              {widget.subtitle}
+            </ThemedText>
+          ) : null}
+        </View>
+        <HShadowButton
+          usetext
+          displaytext={`${content?.detailsLabel ?? 'Details'} ›`}
+          buttonstyle={[
+            styles.detailsButton,
+            {
+              borderColor: primary,
+              backgroundColor: primary ? `${primary}0D` : undefined,
+            },
+          ]}
+          textstyle={[styles.detailsButtonText, { color: primary }]}
+        />
+      </View>
+      <WidgetBody widget={widget} theme={theme} content={content} chartStyle={chartStyle} />
+    </ThemedView>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Department selector & header
+// ---------------------------------------------------------------------------
+
+interface DepartmentButtonProps {
+  item: Dashboard;
+  selected: boolean;
+  onPress: (department: string) => void;
+  theme: Theme | null;
+  content?: ContentConfig | null;
+}
+
+const DepartmentButton: React.FC<DepartmentButtonProps> = ({
+  item,
+  selected,
+  onPress,
+  theme,
+  content,
+}) => {
+  const primary = themeColor(theme, 'primary');
+  const onPrimary = themeColor(theme, 'onPrimary');
+
+  return (
+    <HShadowButton
+      usetext
+      displaytext={item.department ?? ''}
+      buttonCallback={() => onPress(item.department ?? '')}
+      buttonstyle={[
+        styles.departmentButton,
+        {
+          borderColor: selected ? primary : themeColor(theme, 'border'),
+          backgroundColor: selected ? primary : themeColor(theme, 'surface'),
+        },
+      ]}
+      textstyle={[
+        styles.departmentButtonText,
+        { color: selected ? onPrimary : themeColor(theme, 'text') },
+      ]}
+      prefixComponent={
+        item.iconName ? (
+          <HIcons.Icons
+            name={item.iconName}
+            icongroup={content?.iconGroup}
+            size={content?.departmentIconSize}
+            color={selected ? onPrimary : primary}
+          />
+        ) : null
+      }
+    />
+  );
+};
+
+interface DateRangeDisplayProps {
+  dateRange?: DateRange;
+}
+
+const DateRangeDisplay: React.FC<DateRangeDisplayProps> = ({ dateRange }) => {
+  if (!dateRange) return null;
+  return (
+    <View style={styles.datePickerRow}>
+      <View style={styles.datePickerWrapper}>
+        <SDateTimePicker
+          labeltext="From Date"
+          icon={dateIcon}
+          positionviewstyle={styles.datePickerLabel}
+          positiontextstyle={styles.datePickerLabelText}
+          pickerstyle={styles.datePicker}
+          textstyle={styles.datePickerText}
+          passingDate={dateRange.from ? new Date(dateRange.from) : new Date()}
+          date={true}
+          disabled={true}
+          time={false}
+        />
+      </View>
+
+      <View style={styles.datePickerWrapper}>
+        <SDateTimePicker
+          labeltext="To Date"
+          icon={dateIcon}
+          positionviewstyle={styles.datePickerLabel}
+          positiontextstyle={styles.datePickerLabelText}
+          pickerstyle={styles.datePicker}
+          textstyle={styles.datePickerText}
+          passingDate={dateRange.to ? new Date(dateRange.to) : new Date()}
+          date={true}
+          time={false}
+          disabled={true}
+        />
+      </View>
+    </View>
+  );
+};
+
+interface DashboardHeaderProps {
+  dashboard: Dashboard;
+  departments: Dashboard[];
+  onSelectDepartment: (department: string) => void;
+  theme: Theme | null;
+  content?: ContentConfig | null;
+  horizontalPadding: number;
+}
+
+const DashboardHeader: React.FC<DashboardHeaderProps> = ({
+  dashboard,
+  departments,
+  onSelectDepartment,
+  theme,
+  content,
+  horizontalPadding,
+}) => {
+  return (
+    <ThemedView
+      theme={theme}
+      backgroundColorKey="surface"
+      style={[
+        styles.header,
+        {
+          paddingHorizontal: horizontalPadding,
+          borderBottomColor: themeColor(theme, 'border'),
+        },
+      ]}
+    >
+      <View style={styles.headerTop}>
+        <ThemedText theme={theme} colorKey="text" style={styles.dashboardTitle}>
+          {dashboard.dashboardTitle}
+        </ThemedText>
+        <DateRangeDisplay dateRange={dashboard.dateRange} />
+      </View>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.departmentSelector}
+      >
+        {renderList(
+          departments,
+          (item, i) => item.dashboardId || item.department || i,
+          (item, _index, key) => (
+            <DepartmentButton
+              key={key}
+              item={item}
+              selected={item.department === dashboard.department}
+              onPress={onSelectDepartment}
+              theme={theme}
+              content={content}
+            />
+          )
+        )}
+      </ScrollView>
+    </ThemedView>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Loading / empty states
+// ---------------------------------------------------------------------------
+
+interface CenteredStateProps {
+  theme: Theme | null;
+  children?: React.ReactNode;
+}
+
+const CenteredState: React.FC<CenteredStateProps> = ({ theme, children }) => (
+  <ThemedView theme={theme} backgroundColorKey="background" style={styles.centerState}>
+    {children}
+  </ThemedView>
+);
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export default function HDashboard({ dashboardData, buttonapi }: HDashboardProps): React.ReactElement {
+  const bootstrap = useMemo(() => normalizeDashboardPayload(dashboardData), [dashboardData]);
+
+  const [departments, setDepartments] = useState<Dashboard[]>(bootstrap.departments);
+  const [dashboard, setDashboard] = useState<Dashboard | null>(
+    pickInitialDashboard(bootstrap.departments)
+  );
+  const [apiDashboardConfig, setApiDashboardConfig] = useState<DashboardPayload | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const theme =
+    dashboardData && !Array.isArray(dashboardData)
+      ? (dashboardData as DashboardPayload).theme
+      : undefined;
+  const resolvedTheme: Theme | null =
+    theme || apiDashboardConfig?.theme || dashboard?.theme || null;
+
+  const content: ContentConfig | null =
+    (dashboardData && !Array.isArray(dashboardData)
+      ? (dashboardData as DashboardPayload).content
+      : undefined) ||
+    apiDashboardConfig?.content ||
+    dashboard?.content ||
+    null;
+
+  const chartStyle: ChartStyleConfig | undefined =
+    (dashboardData && !Array.isArray(dashboardData)
+      ? (dashboardData as DashboardPayload).chartStyle
+      : undefined) ||
+    apiDashboardConfig?.chartStyle ||
+    dashboard?.chartStyle;
+
+  const horizontalPadding = Number(content?.horizontalPadding ?? 16);
+
+  const visibleWidgets = useMemo<Widget[]>(() => {
+    if (!dashboard || !Array.isArray(dashboard.widgets)) return [];
+    return dashboard.widgets
+      .filter((widget) => widget?.layout?.visible)
+      .sort((left, right) => (left?.layout?.order ?? 0) - (right?.layout?.order ?? 0));
+  }, [dashboard]);
+
+  const getData = useCallback(async (url: string) => {
+    setIsLoading(true);
+    try {
+      const response = (await NetworkServiceCall('get', url)) as {
+        httpstatus?: number;
+        data?: DashboardPayload | Dashboard[] | Dashboard;
+      };
+      if (response?.httpstatus === 200 && response?.data) {
+        const normalized = normalizeDashboardPayload(response.data);
+        setApiDashboardConfig(normalized);
+        setDepartments(normalized.departments);
+        setDashboard(pickInitialDashboard(normalized.departments));
+      } else {
+        notifyMessage('Data Not Found');
+      }
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      notifyMessage('Error loading data');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (buttonapi) getData(buttonapi);
+  }, [buttonapi, getData]);
+
+  const selectDepartment = useCallback(
+    (nextDepartment: string) => {
+      const next = departments.find((item) => item.department === nextDepartment);
+      if (next) setDashboard(next);
+    },
+    [departments]
+  );
+
+  const renderHeader = useCallback(() => {
+    if (!dashboard) return null;
+    return (
+      <DashboardHeader
+        dashboard={dashboard}
+        departments={departments}
+        onSelectDepartment={selectDepartment}
+        theme={resolvedTheme}
+        content={content}
+        horizontalPadding={horizontalPadding}
+      />
+    );
+  }, [dashboard, departments, selectDepartment, resolvedTheme, content, horizontalPadding]);
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<Widget>) => (
+      <DashboardWidget
+        widget={item}
+        theme={resolvedTheme}
+        content={content}
+        chartStyle={chartStyle}
+      />
+    ),
+    [resolvedTheme, content, chartStyle]
+  );
+
+  if (isLoading && !dashboard) {
+    return (
+      <CenteredState theme={resolvedTheme}>
+        <ActivityIndicator size="large" color={themeColor(resolvedTheme, 'primary')} />
+        <ThemedText theme={resolvedTheme} colorKey="muted" style={styles.centerStateText}>
+          {content?.loadingLabel ?? 'Loading…'}
+        </ThemedText>
+      </CenteredState>
+    );
+  }
+
+  if (!dashboard) {
+    return (
+      <CenteredState theme={resolvedTheme}>
+        <ThemedText theme={resolvedTheme} colorKey="muted" style={styles.centerStateText}>
+          {content?.emptyStateMessage ?? 'No dashboard data available.'}
+        </ThemedText>
+      </CenteredState>
+    );
+  }
+
+  return (
+    <FlatList<Widget>
+      data={visibleWidgets}
+      keyExtractor={(item, index) =>
+        item?.id != null ? String(item.id) : String(index)
+      }
+      renderItem={renderItem}
+      ListHeaderComponent={renderHeader}
+      keyboardShouldPersistTaps="handled"
+      style={[styles.screen, { backgroundColor: themeColor(resolvedTheme, 'background') }]}
+      disableVirtualization={Platform.OS === 'web'}
+      numColumns={2}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  screen: { flex: 1 },
+  centerState: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  centerStateText: { marginTop: 12, fontSize: 14, textAlign: 'center' },
+  header: {
+    paddingTop: 12,
+    paddingBottom: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    marginBottom: 10,
+  },
+  headerTop: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
+  headerIdentity: { flexDirection: 'row', alignItems: 'center', flex: 1 },
+  headerCopy: { flex: 1 },
+  dashboardTitle: { fontSize: 24, fontWeight: '800', letterSpacing: -0.2 },
+  dateRangeBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: 220,
+    flexShrink: 1,
+    marginLeft: 12,
+    padding: 7,
+    borderWidth: 1,
+    borderRadius: 14,
+  },
+  dateRangeIconWrap: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+  },
+  dateRangeCopy: { flexShrink: 1, marginLeft: 9 },
+  dateRangeLabel: { fontSize: 9, fontWeight: '800', letterSpacing: 0.7 },
+  dateRange: { fontSize: 12, fontWeight: '700', marginTop: 2 },
+  departmentSelector: { flexDirection: 'row', paddingVertical: 14 },
+  departmentButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    marginRight: 8,
+  },
+  departmentButtonText: { fontSize: 12, fontWeight: '700' },
+  widgetCard: {
+    width: '50%',
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    minHeight: 88,
+    overflow: 'hidden',
+  },
+  chartContainer: { alignItems: 'center', overflow: 'hidden', width: '100%' },
+  pieCenterLabel: { alignItems: 'center', justifyContent: 'center' },
+  pieCenterValue: { fontSize: 22, fontWeight: '800', letterSpacing: -0.4 },
+  pieCenterCaption: { fontSize: 9, marginTop: 2 },
+  widgetHeader: {
+    minHeight: 38,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingBottom: 10,
+    marginBottom: 12,
+  },
+  widgetHeaderCopy: { flex: 1, paddingRight: 12 },
+  widgetIcon: { marginRight: 8, marginTop: 1 },
+  widgetTitle: { fontSize: 16, fontWeight: '800', letterSpacing: -0.2 },
+  widgetSubtitle: { fontSize: 12, marginTop: 3, lineHeight: 17, fontWeight: '500' },
+  detailsButton: {
+    height: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    marginTop: 1,
+  },
+  detailsButtonText: { fontSize: 10, fontWeight: '700' },
+  chartLegend: {
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    marginTop: 14,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingTop: 10,
+  },
+  chartLegendItem: {
+    width: '50%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 5,
+    paddingRight: 10,
+  },
+  chartLegendDot: { width: 8, height: 8, borderRadius: 4, marginRight: 7 },
+  chartLegendLabel: { flex: 1, fontSize: 10, fontWeight: '600' },
+  chartLegendValue: { fontSize: 10, fontWeight: '800' },
+  emptyText: { fontSize: 13, textAlign: 'center', paddingVertical: 26 },
+  itemTitle: { fontSize: 13, fontWeight: '700' },
+  itemSubtitle: { fontSize: 11, marginTop: 3 },
+  progressTrack: { height: 10, borderRadius: 8, overflow: 'hidden', marginVertical: 6 },
+  progressFill: { height: '100%', borderRadius: 8 },
+  heatmap: { flexDirection: 'row', flexWrap: 'wrap' },
+  heatCell: {
+    flexGrow: 1,
+    flexBasis: '25%',
+    minWidth: 64,
+    minHeight: 58,
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 3,
+    borderRadius: 8,
+  },
+  heatLabel: { fontSize: 11, fontWeight: '600' },
+  heatValue: { fontSize: 14, fontWeight: '700', marginTop: 3 },
+  rankRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 6 },
+  rankNumber: { width: 24, fontSize: 13, fontWeight: '700' },
+  rankBody: { flex: 1 },
+  rankLabels: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 },
+  datePickerRow: {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+  },
+  datePickerWrapper: {
+    marginHorizontal: '2%',
+  },
+  datePickerLabel: {
+    position: 'absolute',
+    top: normalize(-8),
+    left: normalize(10),
+    backgroundColor: 'white',
+    paddingHorizontal: normalize(5),
+    zIndex: 1,
+  },
+  datePickerLabelText: {
+    color: Global.AppTheme.primary_color,
+    fontSize: normalize(12),
+    fontWeight: '600',
+  },
+  datePicker: {
+    backgroundColor: 'white',
+    width: '100%',
+    borderColor: '#d1d1d1',
+    borderWidth: 1,
+    borderRadius: normalize(8),
+    height: normalize(30),
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  datePickerText: {
+    fontSize: normalize(14),
+    color: '#333',
+    fontWeight: '500',
+    paddingLeft: normalize(10),
+  },
+});
+
+/**
+ * `dateIcon` is passed to `SDateTimePicker`'s `icon` prop, which expects an
+ * icon descriptor ({ icongroup, name, color, size }). It's NOT a `ViewStyle`,
+ * so `StyleSheet.create` rejects it. Plain object keeps the same shape.
+ */
+const dateIcon = {
+  icongroup: 5,
+  name: 'calendar-alt',
+  color: Global.AppTheme.primary_color,
+  size: normalize(15),
+};