@dhiraj0720/report1chart 3.0.6 → 3.0.8

package/src/screens/Report1ModernScreen.jsx

@@ -0,0 +1,662 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import fetchReport4 from '../api/report4Fetcher';
+import ModernDataTable from '../components/ModernDataTable';
+import { formatNumber } from '../utils/formatNumber';
+
+const TABS = [
+  { key: 'kumule', label: 'KÜMÜLE' },
+  { key: 'faaliyet', label: 'FAALİYET KAR/ZARAR' },
+  { key: 'fg', label: 'FG / BRÜT KAR ORANI' },
+];
+
+const toNumber = (value) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+};
+
+const toPercent = (current, previous) => {
+  if (!previous) return 0;
+  return ((current - previous) / Math.abs(previous)) * 100;
+};
+
+const asPercentCell = (value) => {
+  const numeric = toNumber(value);
+  const positive = numeric >= 0;
+  return {
+    text: `${positive ? '+' : ''}${numeric.toFixed(1)}%`,
+    color: positive ? '#15724a' : '#b43c44',
+    weight: '700',
+  };
+};
+
+const mapRowByTab = (row, tabKey) => {
+  if (tabKey === 'faaliyet') {
+    return {
+      name: row.name,
+      value2024: toNumber(row.fk2024),
+      value2025: toNumber(row.fk2025),
+      change: toNumber(row.changePercent),
+      budget2025: toNumber(row.budget2025),
+      variance: toNumber(row.budgetVariancePercent),
+      ratio2024: null,
+      ratio2025: null,
+    };
+  }
+
+  if (tabKey === 'fg') {
+    const ratio2024 = toNumber(row.ratio2024);
+    const ratio2025 = toNumber(row.ratio2025);
+    return {
+      name: row.name,
+      value2024: toNumber(row.gross2024),
+      value2025: toNumber(row.gross2025),
+      change: ratio2025 - ratio2024,
+      budget2025: toNumber(row.fk2025 || row.budget2025),
+      variance: ratio2025 - ratio2024,
+      ratio2024,
+      ratio2025,
+    };
+  }
+
+  return {
+    name: row.name,
+    value2024: toNumber(row.gross2024),
+    value2025: toNumber(row.gross2025),
+    change: toNumber(row.grossChangePercent),
+    budget2025: toNumber(row.budgetGross2025),
+    variance: toNumber(row.budgetGrossVariancePercent),
+    ratio2024: toNumber(row.ratio2024),
+    ratio2025: toNumber(row.ratio2025),
+  };
+};
+
+const Report1ModernScreen = ({ api, token, onBack }) => {
+  const [activeTab, setActiveTab] = useState('kumule');
+  const [sortMode, setSortMode] = useState('growth');
+  const [rowsByTab, setRowsByTab] = useState({});
+  const [loadedByTab, setLoadedByTab] = useState({});
+  const [errorByTab, setErrorByTab] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  const endpointByTab = useMemo(() => ({
+    kumule: api?.kumule,
+    faaliyet: api?.faaliyetKarZarar,
+    fg: api?.fgBrutKarOrani,
+  }), [api]);
+
+  const loadTabData = useCallback(async (tabKey, force = false) => {
+    const endpoint = endpointByTab[tabKey];
+
+    if (!endpoint || !token) {
+      setErrorByTab((prev) => ({
+        ...prev,
+        [tabKey]: 'API endpoint or token missing.',
+      }));
+      return;
+    }
+
+    if (!force && loadedByTab[tabKey]) {
+      return;
+    }
+
+    setLoading(true);
+    setErrorByTab((prev) => ({ ...prev, [tabKey]: null }));
+
+    try {
+      const rows = await fetchReport4(endpoint, token);
+      const sortedRows = [...rows].sort(
+        (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0),
+      );
+
+      setRowsByTab((prev) => ({ ...prev, [tabKey]: sortedRows }));
+      setLoadedByTab((prev) => ({ ...prev, [tabKey]: true }));
+    } catch (error) {
+      setErrorByTab((prev) => ({
+        ...prev,
+        [tabKey]: error?.message || 'Failed to load performance data.',
+      }));
+    } finally {
+      setLoading(false);
+    }
+  }, [endpointByTab, loadedByTab, token]);
+
+  useEffect(() => {
+    loadTabData(activeTab);
+  }, [activeTab, loadTabData]);
+
+  const activeRawRows = rowsByTab[activeTab] || [];
+  const activeError = errorByTab[activeTab];
+  const activeLoaded = loadedByTab[activeTab];
+
+  const mappedRows = useMemo(() => {
+    return activeRawRows.map((row) => mapRowByTab(row, activeTab));
+  }, [activeRawRows, activeTab]);
+
+  const sortedRows = useMemo(() => {
+    const copy = [...mappedRows];
+    if (sortMode === 'name') {
+      return copy.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+    }
+    if (sortMode === 'variance') {
+      return copy.sort((a, b) => b.variance - a.variance);
+    }
+    return copy.sort((a, b) => b.change - a.change);
+  }, [mappedRows, sortMode]);
+
+  const totals = useMemo(() => {
+    const total2024 = sortedRows.reduce((sum, row) => sum + row.value2024, 0);
+    const total2025 = sortedRows.reduce((sum, row) => sum + row.value2025, 0);
+    const budget2025 = sortedRows.reduce((sum, row) => sum + row.budget2025, 0);
+    const avgRatio2025 = sortedRows.length
+      ? sortedRows.reduce((sum, row) => sum + (row.ratio2025 || 0), 0) / sortedRows.length
+      : 0;
+
+    return {
+      total2024,
+      total2025,
+      budget2025,
+      yoy: toPercent(total2025, total2024),
+      avgRatio2025,
+    };
+  }, [sortedRows]);
+
+  const spotlight = sortedRows[0];
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.hero}>
+        <View style={styles.heroGlowLeft} />
+        <View style={styles.heroGlowRight} />
+        <TouchableOpacity onPress={onBack} style={styles.backButton}>
+          <Text style={styles.backIcon}>‹</Text>
+        </TouchableOpacity>
+        <Text style={styles.heroTitle}>Performance Studio</Text>
+        <Text style={styles.heroSubtitle}>Three-tab live performance monitor</Text>
+      </View>
+
+      <View style={styles.tabsContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {TABS.map((tab) => {
+            const isActive = tab.key === activeTab;
+            return (
+              <TouchableOpacity
+                key={tab.key}
+                style={[styles.tabButton, isActive && styles.activeTabButton]}
+                onPress={() => setActiveTab(tab.key)}
+              >
+                <Text style={[styles.tabText, isActive && styles.activeTabText]}>
+                  {tab.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </View>
+
+      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        {loading && !activeLoaded ? (
+          <View style={styles.center}>
+            <ActivityIndicator size="large" color="#ffb155" />
+          </View>
+        ) : null}
+
+        {!loading && activeError && !sortedRows.length ? (
+          <View style={styles.center}>
+            <Text style={styles.errorText}>{activeError}</Text>
+            <TouchableOpacity
+              style={styles.retryButton}
+              onPress={() => loadTabData(activeTab, true)}
+            >
+              <Text style={styles.retryText}>Retry</Text>
+            </TouchableOpacity>
+          </View>
+        ) : null}
+
+        {sortedRows.length ? (
+          <>
+            <View style={styles.kpiRow}>
+              <View style={[styles.kpiCard, styles.kpiWarm]}>
+                <Text style={styles.kpiLabel}>2024 Value</Text>
+                <Text style={styles.kpiValue}>{formatNumber(totals.total2024)}</Text>
+              </View>
+              <View style={[styles.kpiCard, styles.kpiBlue]}>
+                <Text style={styles.kpiLabel}>2025 Value</Text>
+                <Text style={styles.kpiValue}>{formatNumber(totals.total2025)}</Text>
+              </View>
+            </View>
+            <View style={styles.kpiRow}>
+              <View style={[styles.kpiCard, styles.kpiIndigo]}>
+                <Text style={styles.kpiLabel}>2025 Budget</Text>
+                <Text style={styles.kpiValue}>{formatNumber(totals.budget2025)}</Text>
+              </View>
+              <View style={[styles.kpiCard, styles.kpiTeal]}>
+                <Text style={styles.kpiLabel}>Total Change</Text>
+                <Text style={styles.kpiValue}>
+                  {totals.yoy >= 0 ? '+' : ''}
+                  {totals.yoy.toFixed(1)}%
+                </Text>
+              </View>
+            </View>
+
+            <View style={styles.insightStrip}>
+              <View>
+                <Text style={styles.insightLabel}>Average Ratio 2025</Text>
+                <Text style={styles.insightValue}>{totals.avgRatio2025.toFixed(2)}%</Text>
+              </View>
+              <View>
+                <Text style={styles.insightLabel}>Tab</Text>
+                <Text style={styles.insightValue}>{TABS.find((x) => x.key === activeTab)?.label}</Text>
+              </View>
+            </View>
+
+            {spotlight ? (
+              <View style={styles.spotlightCard}>
+                <Text style={styles.spotlightLabel}>SPOTLIGHT</Text>
+                <Text style={styles.spotlightName}>{spotlight.name}</Text>
+                <Text style={styles.spotlightValue}>
+                  2025: {formatNumber(spotlight.value2025)} • Change: {spotlight.change >= 0 ? '+' : ''}
+                  {spotlight.change.toFixed(1)}%
+                </Text>
+              </View>
+            ) : null}
+
+            <View style={styles.sortRow}>
+              <TouchableOpacity
+                style={[styles.sortChip, sortMode === 'growth' && styles.sortChipActive]}
+                onPress={() => setSortMode('growth')}
+              >
+                <Text style={[styles.sortChipText, sortMode === 'growth' && styles.sortChipTextActive]}>
+                  Top Growth
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.sortChip, sortMode === 'variance' && styles.sortChipActive]}
+                onPress={() => setSortMode('variance')}
+              >
+                <Text style={[styles.sortChipText, sortMode === 'variance' && styles.sortChipTextActive]}>
+                  Top Variance
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.sortChip, sortMode === 'name' && styles.sortChipActive]}
+                onPress={() => setSortMode('name')}
+              >
+                <Text style={[styles.sortChipText, sortMode === 'name' && styles.sortChipTextActive]}>
+                  A-Z
+                </Text>
+              </TouchableOpacity>
+            </View>
+
+            {sortedRows.map((item) => {
+              const maxForBar = Math.max(1, item.value2024, item.value2025, item.budget2025);
+              const width2024 = `${(item.value2024 / maxForBar) * 100}%`;
+              const width2025 = `${(item.value2025 / maxForBar) * 100}%`;
+
+              return (
+                <View key={item.name} style={styles.card}>
+                  <View style={styles.cardHeader}>
+                    <Text style={styles.cardTitle}>{item.name}</Text>
+                    <Text style={[styles.badge, item.change >= 0 ? styles.badgeUp : styles.badgeDown]}>
+                      {item.change >= 0 ? '+' : ''}
+                      {item.change.toFixed(1)}%
+                    </Text>
+                  </View>
+
+                  <View style={styles.barRow}>
+                    <Text style={styles.barLabel}>2024</Text>
+                    <View style={styles.track}>
+                      <View style={[styles.fill2024, { width: width2024 }]} />
+                    </View>
+                    <Text style={styles.barValue}>{formatNumber(item.value2024)}</Text>
+                  </View>
+
+                  <View style={styles.barRow}>
+                    <Text style={styles.barLabel}>2025</Text>
+                    <View style={styles.track}>
+                      <View style={[styles.fill2025, { width: width2025 }]} />
+                    </View>
+                    <Text style={styles.barValue}>{formatNumber(item.value2025)}</Text>
+                  </View>
+                </View>
+              );
+            })}
+
+            <ModernDataTable
+              title="Performance Table"
+              columns={[
+                { key: 'name', label: 'Activity', width: 150 },
+                { key: 'value2024', label: '2024', width: 120, align: 'right', render: (row) => formatNumber(row.value2024) },
+                { key: 'value2025', label: '2025', width: 120, align: 'right', render: (row) => formatNumber(row.value2025) },
+                { key: 'change', label: 'Change %', width: 90, align: 'right', render: (row) => asPercentCell(row.change) },
+                { key: 'budget2025', label: 'Budget 2025', width: 130, align: 'right', render: (row) => formatNumber(row.budget2025) },
+                { key: 'variance', label: 'Variance %', width: 95, align: 'right', render: (row) => asPercentCell(row.variance) },
+                {
+                  key: 'ratio2024',
+                  label: 'Ratio 2024',
+                  width: 92,
+                  align: 'right',
+                  render: (row) => (row.ratio2024 === null ? '-' : `${row.ratio2024.toFixed(2)}%`),
+                },
+                {
+                  key: 'ratio2025',
+                  label: 'Ratio 2025',
+                  width: 92,
+                  align: 'right',
+                  render: (row) => (row.ratio2025 === null ? '-' : `${row.ratio2025.toFixed(2)}%`),
+                },
+              ]}
+              rows={sortedRows}
+            />
+          </>
+        ) : null}
+
+        <View style={styles.footerSpacing} />
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: '#0f1726',
+  },
+  hero: {
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 16,
+    backgroundColor: '#131d30',
+    overflow: 'hidden',
+  },
+  heroGlowLeft: {
+    position: 'absolute',
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    left: -70,
+    top: -70,
+    backgroundColor: '#25324d',
+  },
+  heroGlowRight: {
+    position: 'absolute',
+    width: 170,
+    height: 170,
+    borderRadius: 85,
+    right: -60,
+    top: -50,
+    backgroundColor: '#2b3a59',
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.12)',
+  },
+  backIcon: {
+    fontSize: 28,
+    color: '#fff',
+    fontWeight: '700',
+    marginTop: -2,
+  },
+  heroTitle: {
+    marginTop: 10,
+    color: '#fff',
+    fontSize: 22,
+    fontWeight: '800',
+  },
+  heroSubtitle: {
+    marginTop: 5,
+    color: '#c6d1ea',
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  tabsContainer: {
+    backgroundColor: '#111b2d',
+    borderBottomWidth: 1,
+    borderBottomColor: '#2f3b57',
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+  },
+  tabButton: {
+    paddingHorizontal: 14,
+    paddingVertical: 9,
+    borderRadius: 8,
+    marginHorizontal: 4,
+    backgroundColor: '#18233a',
+    borderWidth: 1,
+    borderColor: '#35415e',
+  },
+  activeTabButton: {
+    backgroundColor: '#ffb155',
+    borderColor: '#ffb155',
+  },
+  tabText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#c5d0e8',
+  },
+  activeTabText: {
+    color: '#2e2720',
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 14,
+    paddingTop: 14,
+  },
+  center: {
+    paddingVertical: 24,
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#ffb3bb',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  retryButton: {
+    backgroundColor: '#ffb155',
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  retryText: {
+    color: '#2e2720',
+    fontWeight: '700',
+  },
+  kpiRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  kpiCard: {
+    flex: 1,
+    borderRadius: 14,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginRight: 10,
+  },
+  kpiWarm: {
+    backgroundColor: '#fff4e8',
+    borderColor: '#ffc58c',
+  },
+  kpiBlue: {
+    backgroundColor: '#eaf0ff',
+    borderColor: '#9fb8ff',
+  },
+  kpiIndigo: {
+    backgroundColor: '#edeaff',
+    borderColor: '#b9acf8',
+  },
+  kpiTeal: {
+    backgroundColor: '#e6fff9',
+    borderColor: '#9cead6',
+  },
+  kpiLabel: {
+    fontSize: 11,
+    color: '#4f5b70',
+    marginBottom: 4,
+  },
+  kpiValue: {
+    fontSize: 16,
+    fontWeight: '800',
+    color: '#1d2738',
+  },
+  insightStrip: {
+    backgroundColor: '#1a2640',
+    borderColor: '#303d58',
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  insightLabel: {
+    fontSize: 11,
+    color: '#9eb1d3',
+    marginBottom: 4,
+  },
+  insightValue: {
+    color: '#fff',
+    fontWeight: '800',
+    fontSize: 13,
+  },
+  spotlightCard: {
+    backgroundColor: '#1a2640',
+    borderColor: '#303d58',
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    marginBottom: 10,
+  },
+  spotlightLabel: {
+    fontSize: 10,
+    letterSpacing: 1,
+    color: '#ffbf72',
+    fontWeight: '800',
+  },
+  spotlightName: {
+    marginTop: 6,
+    fontSize: 16,
+    color: '#fff',
+    fontWeight: '800',
+  },
+  spotlightValue: {
+    marginTop: 4,
+    fontSize: 12,
+    color: '#c9d5ed',
+  },
+  sortRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  sortChip: {
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#3c4a67',
+    marginRight: 8,
+    backgroundColor: '#18233a',
+  },
+  sortChipActive: {
+    backgroundColor: '#2d3c59',
+    borderColor: '#6a7da3',
+  },
+  sortChipText: {
+    fontSize: 11,
+    color: '#afbedb',
+    fontWeight: '700',
+  },
+  sortChipTextActive: {
+    color: '#fff',
+  },
+  card: {
+    backgroundColor: '#131d30',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#2f3a55',
+    padding: 12,
+    marginBottom: 10,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  cardTitle: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '800',
+    flex: 1,
+    marginRight: 8,
+  },
+  badge: {
+    borderRadius: 999,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  badgeUp: {
+    backgroundColor: '#1d463a',
+    color: '#7ff0c8',
+  },
+  badgeDown: {
+    backgroundColor: '#522d34',
+    color: '#ff9ca6',
+  },
+  barRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  barLabel: {
+    width: 54,
+    color: '#bac8e1',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  track: {
+    flex: 1,
+    height: 10,
+    borderRadius: 999,
+    backgroundColor: '#27334c',
+    overflow: 'hidden',
+    marginHorizontal: 8,
+  },
+  fill2024: {
+    height: '100%',
+    backgroundColor: '#ffb155',
+    borderRadius: 999,
+  },
+  fill2025: {
+    height: '100%',
+    backgroundColor: '#6db2ff',
+    borderRadius: 999,
+  },
+  barValue: {
+    width: 92,
+    textAlign: 'right',
+    color: '#e4ecff',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  footerSpacing: {
+    height: 14,
+  },
+});
+
+export default Report1ModernScreen;