@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/widgets/JSONViewer.tsx

@@ -0,0 +1,192 @@
+import React, { useMemo, useState } from "react";
+import { Platform, Text, View } from "react-native";
+
+import { ThemedActivityIndicator } from "../theme";
+
+const parseDeepJson = (value: any): any => {
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      return parseDeepJson(parsed);
+    } catch {
+      return value;
+    }
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(parseDeepJson);
+  }
+
+  if (value && typeof value === "object") {
+    const result: any = {};
+    for (const key in value) {
+      result[key] = parseDeepJson(value[key]);
+    }
+    return result;
+  }
+
+  return value;
+};
+
+const JSON_COLORS = {
+  key: "#0066CC",
+  string: "#008000",
+  number: "#FF8C00",
+  boolean: "#9966CC",
+  null: "#999999",
+  punctuation: "#666666",
+};
+
+const MAX_JSON_SIZE = 500_000; // 500KB límite
+const MAX_LINES = 500; // Máximo 500 líneas con colores
+
+interface JsonLine {
+  text: string;
+  color: string;
+}
+
+function parseJsonToColoredLines(jsonString: string): JsonLine[] {
+  // Protección 1: Verificar tamaño
+  if (jsonString.length > MAX_JSON_SIZE) {
+    return [
+      {
+        text: `⚠️ JSON muy grande (${(jsonString.length / 1024).toFixed(1)}KB)\n\n`,
+        color: "#FF6600",
+      },
+      { text: "Mostrando como texto plano por performance...\n\n", color: "#666666" },
+      { text: jsonString, color: "#333333" },
+    ];
+  }
+
+  const lines = jsonString.split("\n");
+
+  // Protección 2: Verificar cantidad de líneas
+  if (lines.length > MAX_LINES) {
+    return [
+      {
+        text: `⚠️ JSON muy largo (${lines.length} líneas)\n\n`,
+        color: "#FF6600",
+      },
+      { text: "Mostrando como texto plano por performance...\n\n", color: "#666666" },
+      { text: jsonString, color: "#333333" },
+    ];
+  }
+
+  const coloredLines: JsonLine[] = [];
+
+  lines.forEach((line) => {
+    const trimmed = line.trim();
+
+    if (
+      !trimmed ||
+      trimmed === "{" ||
+      trimmed === "}" ||
+      trimmed === "[" ||
+      trimmed === "]" ||
+      trimmed === "," ||
+      trimmed.endsWith(",")
+    ) {
+      const keyMatch = line.match(/^(\s*)"([^"]+)":\s*(.+)$/);
+
+      if (keyMatch) {
+        const indent = keyMatch[1];
+        const key = keyMatch[2];
+        const valueStr = keyMatch[3];
+
+        coloredLines.push(
+          { text: indent, color: JSON_COLORS.punctuation },
+          { text: `"${key}"`, color: JSON_COLORS.key },
+          { text: ": ", color: JSON_COLORS.punctuation },
+        );
+
+        if (valueStr.startsWith('"')) {
+          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.string });
+        } else if (!isNaN(Number(valueStr.replace(",", "")))) {
+          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.number });
+        } else if (valueStr.startsWith("true") || valueStr.startsWith("false")) {
+          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.boolean });
+        } else if (valueStr.startsWith("null")) {
+          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.null });
+        } else {
+          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.punctuation });
+        }
+        return;
+      }
+    }
+
+    coloredLines.push({ text: line + "\n", color: JSON_COLORS.punctuation });
+  });
+
+  return coloredLines;
+}
+
+const JsonPreview = ({ selectedJson }: { selectedJson: string }) => {
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  // Protección 3: Formatear con try-catch robusto
+  const formattedJson = useMemo(() => {
+    if (!selectedJson || selectedJson.trim() === "") {
+      return "{}";
+    }
+
+    try {
+      const parsed = JSON.parse(selectedJson);
+      const cleaned = parseDeepJson(parsed);
+      return JSON.stringify(cleaned, null, 2);
+    } catch (error) {
+      console.warn("[JSONViewer] Error parsing JSON:", error);
+      return selectedJson; // Mostrar original si falla
+    }
+  }, [selectedJson]);
+
+  // Protección 4: Colorear con control de procesamiento
+  const coloredLines = useMemo(() => {
+    setIsProcessing(true);
+
+    try {
+      return parseJsonToColoredLines(formattedJson);
+    } catch (error) {
+      console.warn("[JSONViewer] Error coloring JSON:", error);
+      // Fallback a texto plano si falla el coloreado
+      return [{ text: formattedJson, color: "#333333" }];
+    } finally {
+      // Pequeño delay para que el loading sea visible si es necesario
+      setTimeout(() => setIsProcessing(false), 50);
+    }
+  }, [formattedJson]);
+
+  // Protección 5: Mostrar loading mientras procesa JSONs grandes
+  if (isProcessing && formattedJson.length > 50_000) {
+    return (
+      <View className="p-4 items-center justify-center min-h-[200px]">
+        <ThemedActivityIndicator size="large" />
+        <Text className="mt-2 text-text-secondary text-sm">Procesando JSON...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View className="p-4">
+      <Text
+        selectable
+        style={{
+          fontFamily: Platform.select({
+            ios: "Courier",
+            android: "monospace",
+            default: "Courier",
+          }),
+          fontSize: 13,
+          lineHeight: 18,
+        }}
+      >
+        {coloredLines.map((line, index) => (
+          <Text key={index} style={{ color: line.color }}>
+            {line.text}
+          </Text>
+        ))}
+      </Text>
+    </View>
+  );
+};
+
+export default JsonPreview;

package/sincpro_mobile_ui/widgets/MenuCard.tsx

@@ -0,0 +1,37 @@
+import { ComponentType } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import { IconType } from "../lib/icon";
+import { theme } from "../theme/useTheme";
+import { Typography } from "../Typography";
+import { CircleButton } from "./CircleButton";
+
+interface MenuCardProps {
+  title: string;
+  iconType?: IconType;
+  onPress?: () => void;
+  customIcon?: ComponentType<{ size?: number; color?: string }>;
+}
+
+export function MenuCard({
+  title,
+  iconType = "ionicons",
+  onPress,
+  customIcon,
+}: MenuCardProps) {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      className="bg-bg-card rounded-2xl p-4 m-2 w-[45%] shadow-sm"
+      onPress={onPress}
+      style={theme.shadow["sm"]}
+    >
+      <View className="items-center justify-center">
+        <CircleButton customIcon={customIcon} iconType={iconType} />
+        <Typography.Text className="text-text-primary mt-3 text-center" variant="label">
+          {title}
+        </Typography.Text>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/sincpro_mobile_ui/widgets/MenuGrid.tsx

@@ -0,0 +1,33 @@
+import React, { ComponentType } from "react";
+import { View } from "react-native";
+
+import { IconType } from "../lib/icon";
+import { MenuCard } from "./MenuCard";
+
+export interface MenuItem {
+  id: string;
+  title: string;
+  iconType?: IconType;
+  onPress?: () => void;
+  customIcon?: ComponentType<{ size?: number; color?: string }>;
+}
+
+interface MenuGridProps {
+  readonly items: MenuItem[];
+}
+
+export const MenuGrid: React.FC<MenuGridProps> = ({ items }) => {
+  return (
+    <View className="flex-row flex-wrap justify-start p-2 bg-bg-page">
+      {items.map((item) => (
+        <MenuCard
+          customIcon={item.customIcon}
+          iconType={item.iconType}
+          key={item.id}
+          onPress={item.onPress}
+          title={item.title}
+        />
+      ))}
+    </View>
+  );
+};

package/sincpro_mobile_ui/widgets/ScreenHeader.tsx

@@ -0,0 +1,72 @@
+import { View } from "react-native";
+
+import GradientContainer from "../layouts/GradientContainer";
+import { Navigation } from "../Navigation";
+
+const Header = Navigation.Header;
+const HeaderToolbar = Navigation.HeaderToolbar;
+
+export const enum EVariantScreenHeader {
+  FLAT_HEADER = "FLAT_HEADER",
+  ROUNDED_HEADER = "ROUNDED_HEADER",
+  LOGO_WITH_BACK_BUTTON = "LOGO_WITH_BACK_BUTTON",
+  ONLY_LOGO = "ONLY_LOGO",
+}
+
+interface ScreenHeaderProps {
+  variant?: EVariantScreenHeader;
+  title?: string;
+  centerTitle?: boolean;
+  subtitle?: string;
+  logo?: boolean;
+  rightComponent?: React.ReactNode;
+  children?: React.ReactNode;
+  withGradientContainer?: boolean;
+  onBack?: () => void;
+}
+
+function ScreenHeader({
+  variant,
+  title = "Distribución",
+  subtitle,
+  onBack,
+  children,
+}: ScreenHeaderProps) {
+  switch (variant) {
+    case EVariantScreenHeader.FLAT_HEADER:
+      return (
+        <>
+          <HeaderToolbar
+            flat={true}
+            onBack={onBack}
+            subtitle={subtitle}
+            title={title}
+            withBackground={true}
+          />
+          <View>{children}</View>
+        </>
+      );
+    case EVariantScreenHeader.ROUNDED_HEADER:
+      return (
+        <GradientContainer className="pt-0.5 shadow-lg shadow-black/70 rounded-b-[18px] pb-6">
+          <HeaderToolbar
+            flat={true}
+            onBack={onBack}
+            subtitle={subtitle}
+            title={title}
+            withBackground={false}
+          >
+            {children}
+          </HeaderToolbar>
+        </GradientContainer>
+      );
+    case EVariantScreenHeader.LOGO_WITH_BACK_BUTTON:
+      return <Header backButton handleBackButton={onBack} title={"Distribución"} />;
+    case EVariantScreenHeader.ONLY_LOGO:
+      return <Header title={title} />;
+    default:
+      return null;
+  }
+}
+
+export default ScreenHeader;

package/sincpro_mobile_ui/widgets/TimeZoneSelector.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { View } from "react-native";
+
+import { Display, Form } from "../index";
+import { TimezoneLocale } from "../lib/timezone";
+import { theme } from "../theme/useTheme";
+import { Typography } from "../Typography";
+import { TimeZoneSelectorModal } from "./TimeZoneSelectorModal";
+
+interface TimeZoneSelectorProps {
+  onSelect?: (tz: TimezoneLocale) => void;
+  timezone?: string | null;
+}
+
+export function TimeZoneSelector({ onSelect, timezone }: TimeZoneSelectorProps) {
+  const [currentTimezone, setCurrentTimezone] = useState(timezone);
+  const [selectorVisible, setSelectorVisible] = useState(false);
+
+  function handleTimezoneSelected(tz: TimezoneLocale) {
+    setCurrentTimezone(tz.timezone);
+    onSelect?.(tz);
+  }
+
+  const displayTimezone = currentTimezone
+    ? currentTimezone.replace(/_/g, " ").replace("America/", "")
+    : "No configurada";
+
+  return (
+    <View className="bg-slate-50 rounded-xl p-5 my-2.5 shadow-sm">
+      <View className="flex-row items-start">
+        <Display.Icon
+          color={currentTimezone ? theme.info : theme.text.tertiary}
+          name="schedule"
+          size={35}
+          type="material"
+        />
+        <View className="ml-2.5 flex-1">
+          <Typography.Text className="text-base mb-1" semibold>
+            Zona Horaria
+          </Typography.Text>
+
+          {currentTimezone ? (
+            <View className="mt-2 bg-white rounded-lg p-3">
+              <Typography.Text className="text-gray-700" semibold>
+                {displayTimezone}
+              </Typography.Text>
+              <Typography.Text className="text-gray-400 text-xs">
+                {currentTimezone}
+              </Typography.Text>
+
+              <View className="flex-row gap-2 mt-2">
+                <Form.Button
+                  onPress={() => setSelectorVisible(true)}
+                  size="small"
+                  title="Cambiar"
+                  variant="outline"
+                />
+              </View>
+            </View>
+          ) : (
+            <>
+              <Typography.Text className="text-gray-500 mb-2">
+                Selecciona una zona horaria
+              </Typography.Text>
+              <Form.Button
+                onPress={() => setSelectorVisible(true)}
+                size="small"
+                title="Seleccionar Zona Horaria"
+              />
+            </>
+          )}
+        </View>
+      </View>
+
+      <TimeZoneSelectorModal
+        currentTimezone={currentTimezone}
+        onClose={() => setSelectorVisible(false)}
+        onSelect={handleTimezoneSelected}
+        visible={selectorVisible}
+      />
+    </View>
+  );
+}

package/sincpro_mobile_ui/widgets/TimeZoneSelectorModal.tsx

@@ -0,0 +1,179 @@
+import { useMemo, useState } from "react";
+import { FlatList, TextInput, TouchableOpacity, View } from "react-native";
+
+import { BottomSheet } from "../Dialog/BottomSheet";
+import { Display, Form } from "../index";
+import { TimezoneLocale } from "../lib/timezone";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+
+interface TimeZoneSelectorModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onSelect: (tz: TimezoneLocale) => void;
+  currentTimezone?: string | null;
+}
+
+const TIMEZONES_LOCALES: Record<string, TimezoneLocale> = {
+  bolivia: { timezone: "America/La_Paz", locale: "es-BO" },
+  costaRica: { timezone: "America/Costa_Rica", locale: "es-CR" },
+  guatemala: { timezone: "America/Guatemala", locale: "es-GT" },
+  argentina: { timezone: "America/Argentina/Buenos_Aires", locale: "es-AR" },
+  peru: { timezone: "America/Lima", locale: "es-PE" },
+  newYork: { timezone: "America/New_York", locale: "en-US" },
+  japon: { timezone: "Asia/Tokyo", locale: "ja-JP" },
+};
+
+interface TimezoneItem extends TimezoneLocale {
+  label: string;
+}
+
+function TimezoneRow({
+  item,
+  isSelected,
+  onSelect,
+}: {
+  item: TimezoneItem;
+  isSelected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      className={`flex-row items-center p-4 border-b border-gray-100 ${
+        isSelected ? "bg-blue-50" : "bg-white"
+      }`}
+      onPress={onSelect}
+    >
+      <Display.Icon
+        color={isSelected ? theme.info : theme.text.secondary}
+        name="schedule"
+        size={24}
+        type="material"
+      />
+      <View className="ml-3 flex-1">
+        <Typography.Text semibold>{item.label}</Typography.Text>
+        <Typography.Text className="text-gray-400 text-xs">{item.locale}</Typography.Text>
+      </View>
+      {isSelected && (
+        <View className="w-6 h-6 rounded-full bg-blue-500 items-center justify-center">
+          <Display.Icon color={theme.text.inverse} name="check" size={16} type="material" />
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+function EmptyState() {
+  return (
+    <View className="p-8 items-center justify-center" style={{ minHeight: 200 }}>
+      <Display.Icon color={theme.text.tertiary} name="search-off" size={48} type="material" />
+      <Typography.Text className="text-gray-500 text-center mt-4">
+        {"No se encontraron zonas horarias"}
+      </Typography.Text>
+    </View>
+  );
+}
+
+function TimeZoneSelectorModal({
+  visible,
+  onClose,
+  onSelect,
+  currentTimezone,
+}: TimeZoneSelectorModalProps) {
+  const [query, setQuery] = useState("");
+  const [selectedTimezone, setSelectedTimezone] = useState<string | null>(
+    currentTimezone || null,
+  );
+
+  const timezoneList = useMemo<TimezoneItem[]>(() => {
+    return Object.values(TIMEZONES_LOCALES).map((tz) => ({
+      ...tz,
+      label: tz.timezone.replace(/_/g, " ").replace("America/", ""),
+    }));
+  }, []);
+
+  const filteredTimezones = useMemo(() => {
+    if (!query.trim()) return timezoneList;
+
+    const normalizedQuery = query
+      .toLowerCase()
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "");
+
+    return timezoneList.filter(({ label, timezone }) => {
+      const normalizedLabel = label
+        .toLowerCase()
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "");
+      const normalizedTz = timezone.toLowerCase();
+      return (
+        normalizedLabel.includes(normalizedQuery) || normalizedTz.includes(normalizedQuery)
+      );
+    });
+  }, [query, timezoneList]);
+
+  function handleConfirm() {
+    const selected = timezoneList.find((tz) => tz.timezone === selectedTimezone);
+    if (selected) {
+      onSelect({ timezone: selected.timezone, locale: selected.locale });
+      onClose();
+    }
+  }
+
+  return (
+    <BottomSheet.Root onClose={onClose} size="large" visible={visible}>
+      <BottomSheet.Header>
+        <View className="px-5 pb-3">
+          <Typography.Text bold variant="subtitle">
+            {"Zona Horaria"}
+          </Typography.Text>
+          <Typography.Text className="text-gray-500 text-xs">
+            {"Selecciona tu zona horaria"}
+          </Typography.Text>
+        </View>
+        <View className="px-5 pb-3">
+          <TextInput
+            className="bg-gray-100 px-4 py-3 rounded-xl"
+            onChangeText={setQuery}
+            placeholder={"Buscar zona horaria..."}
+            placeholderTextColor={theme.text.tertiary}
+            value={query}
+          />
+        </View>
+      </BottomSheet.Header>
+
+      <BottomSheet.Content scrollable>
+        {filteredTimezones.length === 0 ? (
+          <EmptyState />
+        ) : (
+          <FlatList
+            data={filteredTimezones}
+            keyExtractor={(item) => item.timezone}
+            renderItem={({ item }) => (
+              <TimezoneRow
+                isSelected={selectedTimezone === item.timezone}
+                item={item}
+                onSelect={() => setSelectedTimezone(item.timezone)}
+              />
+            )}
+            scrollEnabled={false}
+          />
+        )}
+      </BottomSheet.Content>
+
+      <BottomSheet.Actions layout="horizontal">
+        <View className="flex-1">
+          <Form.Button onPress={onClose} title={"Cancelar"} variant="outline" />
+        </View>
+        {selectedTimezone && (
+          <View className="flex-1">
+            <Form.Button onPress={handleConfirm} title={"Confirmar"} variant="primary" />
+          </View>
+        )}
+      </BottomSheet.Actions>
+    </BottomSheet.Root>
+  );
+}
+
+export { TimeZoneSelectorModal };

package/sincpro_mobile_ui/widgets/index.ts

@@ -0,0 +1,7 @@
+export { CircleButton } from "./CircleButton";
+export { default as GeoPermissionCard } from "./GeoPermissionCard";
+export { HomeHeader } from "./HomeHeader";
+export { MenuCard } from "./MenuCard";
+export type { MenuItem } from "./MenuGrid";
+export { MenuGrid } from "./MenuGrid";
+export { TimeZoneSelector } from "./TimeZoneSelector";