@granto-umbrella/umbrella-components 2.3.23 → 3.0.1

package/src/components/molecules/InsuranceCard/InsuranceCard.tsx

@@ -0,0 +1,418 @@
+import React, { useState } from "react";
+import {
+  FileText,
+  CreditCard,
+  Download,
+  PlusCircle,
+  ChevronDown,
+  ChevronUp,
+  Loader2,
+} from "lucide-react";
+import {
+  CardContainer,
+  HeaderRow,
+  InfoRow,
+  InfoLabel,
+  TruncatedValue,
+  Actions,
+  DropdownWrapper,
+  DropdownMenu,
+  StyledMenuItem,
+  Text,
+  BodyRow,
+  InfoSubValue,
+  ProdValue,
+  ProcessValue,
+  ActionButton,
+} from "./InsuranceCard.styles";
+import { InsuranceCardProps, MenuItemProps, StatusVariant } from "./InsuranceCard.types";
+
+import Pill from "../../atoms/Pill/Pill";
+
+
+
+
+const applyMask = (value: string, mask: string): string => {
+  let result = "";
+  let valueIndex = 0;
+  
+  for (let i = 0; i < mask.length && valueIndex < value.length; i++) {
+    if (mask[i] === "0") {
+      result += value[valueIndex];
+      valueIndex++;
+    } else {
+      result += mask[i];
+    }
+  }
+  
+  return result;
+};
+
+
+const isValidCNPJ = (value: string): boolean => {
+  const cleanValue = value.replace(/\D/g, "");
+  return cleanValue.length === 14;
+};
+
+
+const formatDate = (isoDate: string): string => {
+  const date = new Date(isoDate);
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+};
+
+
+const product_list = [
+  { value: "001", label: "Seguro Garantia" },
+  { value: "002", label: "Seguro Fiança" },
+
+];
+
+const formatProduct = (modality: string) => {
+  const type = modality.at(2);
+  const result = [];
+
+  switch (type) {
+    case "1":
+      result.push("Tradicional");
+      break;
+    case "2":
+      result.push("Judicial");
+      break;
+    default:
+      result.push("Desconhecido");
+      break;
+  }
+
+  result.push(
+    product_list.find((item) => item.value === modality)?.label ??
+      "Desconhecido"
+  );
+  return result;
+};
+
+// Ícones do phosphor-react substituídos por componentes inline
+const ArrowCircleUpRight = ({ size = 16 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
+    <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" />
+  </svg>
+);
+
+const Cube = ({ size = 16 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
+    <path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l80-43.78Z" />
+  </svg>
+);
+
+const XCircle = ({ size = 16 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
+    <path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" />
+  </svg>
+);
+
+// ===== COMPONENTE PRINCIPAL =====
+
+export const InsuranceCard: React.FC<InsuranceCardProps> = ({
+  idGranto,
+  idOrder,
+  idInsurance,
+  idInterno,
+  isSupply,
+  hasMinute,
+  statusLabel,
+  statusVariant,
+  seguradoName,
+  seguradoCnpj,
+  product,
+  issuedDate,
+  totalValue,
+  processId,
+  activeIndex,
+  testId,
+  openCardId,
+  setOpenCardId,
+  
+}) => {
+  const [loadingItem, setLoadingItem] = useState<string | null>(null);
+  const isOpen = openCardId === idOrder;
+
+  const toggleOpen = () => {
+    setOpenCardId(isOpen ? null : idOrder);
+  };
+
+  const handleClick = async (
+    key: string,
+    callback: () => Promise<void> | void
+  ) => {
+    setLoadingItem(key);
+    await Promise.resolve(callback());
+    setLoadingItem(null);
+  };
+
+  const [productTitle, productDescription] = formatProduct(product);
+
+  // Mock das funções (você ajustará quando os hooks existirem)
+  const downloadFile = (type: string, flag: boolean) => {
+    console.log(`Download ${type}:`, flag);
+  };
+
+  const searchCerts = (insurance: string, order: string) => {
+    console.log(`Search certs for ${insurance}, ${order}`);
+  };
+
+  const onEndorsementClick = (company: string, insurance: string) => {
+    console.log(`Endorsement for ${company}, ${insurance}`);
+  };
+
+  const irParaContinuarEmissao = () => {
+    console.log("Continuar emissão");
+    // Implementar navegação quando disponível
+  };
+
+  const abrirModalExcluirProposta = () => {
+    console.log("Abrir modal excluir");
+    // Modal será implementado depois
+  };
+
+  const abrirModalRecusarProposta = () => {
+    console.log("Abrir modal recusar");
+    // Modal será implementado depois
+  };
+
+  return (
+    <CardContainer
+      data-testid={testId}
+      id={testId}
+      $variant={statusVariant as StatusVariant}
+    >
+      <HeaderRow>
+        {isSupply && (
+          <Pill size={"sm"} variant="supply">
+            <Cube />
+            Supply
+          </Pill>
+        )}
+        <Text>ID Granto: {idGranto}</Text>
+        <Text>ID interno: {idInterno}</Text>
+        <Text $variant={statusVariant as StatusVariant}>
+          {activeIndex === 0 ? "Etapa" : "Status"}: {statusLabel}
+        </Text>
+      </HeaderRow>
+      <BodyRow>
+        <InfoRow>
+          <InfoLabel>Segurado</InfoLabel>
+          <TruncatedValue>{seguradoName}</TruncatedValue>
+          <InfoSubValue>
+            {applyMask(
+              seguradoCnpj,
+              isValidCNPJ(seguradoCnpj)
+                ? "00.000.000/0000-00"
+                : "000.000.000-00"
+            )}
+          </InfoSubValue>
+        </InfoRow>
+        <InfoRow>
+          <InfoLabel>Produto</InfoLabel>
+          <ProdValue>{productTitle}</ProdValue>
+          <InfoSubValue>{productDescription}</InfoSubValue>
+        </InfoRow>
+        <InfoRow>
+          <InfoLabel>
+            {activeIndex === 0 ? "Iniciado em" : "Emitido em"}
+          </InfoLabel>
+          <InfoSubValue>{formatDate(issuedDate)}</InfoSubValue>
+        </InfoRow>
+        <InfoRow>
+          <InfoLabel>
+            {activeIndex === 0 ? "Valor a ser pago" : "Valor pago"}
+          </InfoLabel>
+          <InfoSubValue>{totalValue}</InfoSubValue>
+        </InfoRow>
+        <InfoRow>
+          <InfoLabel>Processo</InfoLabel>
+          <ProcessValue>
+            {processId
+              ? applyMask(processId || "", "0000000-00.0000.0.00.0000")
+              : "-"}
+          </ProcessValue>
+        </InfoRow>
+        <Actions>
+          <DropdownWrapper>
+            <ActionButton
+              data-testid={`btn_minhas_emissoes_mais_informacoes_${processId}`}
+              id={`btn_minhas_emissoes_mais_informacoes_${processId}`}
+              onClick={toggleOpen}
+            >
+              Mais informações{" "}
+              {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+            </ActionButton>
+            {isOpen && activeIndex === 0 && (
+              <DropdownMenu>
+                <MenuItem
+                  data-testid={`btn_minhas_emissoes_continuar_emissao_${processId}`}
+                  id={`btn_minhas_emissoes_continuar_emissao_${processId}`}
+                  icon={
+                    loadingItem === "continuar_emissao" ? (
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : (
+                      <ArrowCircleUpRight size={16} />
+                    )
+                  }
+                  onClick={() =>
+                    handleClick("continuar_emissao", irParaContinuarEmissao)
+                  }
+                >
+                  Continuar emissão
+                </MenuItem>
+                {hasMinute && (
+                  <MenuItem
+                    data-testid={`btn_minhas_emissoes_baixar_minuta_${processId}`}
+                    id={`btn_minhas_emissoes_baixar_minuta_${processId}`}
+                    icon={
+                      loadingItem === "minuta" ? (
+                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      ) : (
+                        <Download size={16} />
+                      )
+                    }
+                    onClick={() =>
+                      handleClick("minuta", () => downloadFile("MINUTE", true))
+                    }
+                  >
+                    Baixar minuta
+                  </MenuItem>
+                )}
+                {statusLabel === "Aguardando aprovação" && (
+                  <MenuItem
+                    danger
+                    data-testid={`btn_minhas_emissoes_recusar_proposta_${processId}`}
+                    id={`btn_minhas_emissoes_recusar_proposta_${processId}`}
+                    icon={
+                      loadingItem === "recusar_proposta" ? (
+                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      ) : (
+                        <XCircle size={16} />
+                      )
+                    }
+                    onClick={() =>
+                      handleClick("recusar_proposta", abrirModalRecusarProposta)
+                    }
+                  >
+                    Recusar proposta
+                  </MenuItem>
+                )}
+                {statusLabel === "Proposta recusada" && (
+                  <MenuItem
+                    danger
+                    data-testid={`btn_minhas_emissoes_excluir_proposta_${processId}`}
+                    id={`btn_minhas_emissoes_excluir_proposta_${processId}`}
+                    icon={
+                      loadingItem === "excluir_proposta" ? (
+                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      ) : (
+                        <XCircle size={16} />
+                      )
+                    }
+                    onClick={() =>
+                      handleClick("excluir_proposta", abrirModalExcluirProposta)
+                    }
+                  >
+                    Excluir proposta
+                  </MenuItem>
+                )}
+              </DropdownMenu>
+            )}
+            {isOpen && activeIndex === 1 && (
+              <DropdownMenu>
+                <MenuItem
+                  data-testid={`btn_minhas_emissoes_baixar_apolice_${processId}`}
+                  id={`btn_minhas_emissoes_baixar_apolice_${processId}`}
+                  icon={
+                    loadingItem === "apolice" ? (
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : (
+                      <FileText size={16} />
+                    )
+                  }
+                  onClick={() =>
+                    handleClick("apolice", () => downloadFile("POLICY", true))
+                  }
+                >
+                  Baixar apólice
+                </MenuItem>
+                <MenuItem
+                  data-testid={`btn_minhas_emissoes_baixar_boleto_${processId}`}
+                  id={`btn_minhas_emissoes_baixar_boleto_${processId}`}
+                  icon={
+                    loadingItem === "boleto" ? (
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : (
+                      <CreditCard size={16} />
+                    )
+                  }
+                  onClick={() =>
+                    handleClick("boleto", () => downloadFile("SLIP", true))
+                  }
+                >
+                  Baixar boleto
+                </MenuItem>
+                <MenuItem
+                  data-testid={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
+                  id={`btn_minhas_emissoes_baixar_certidoes_${processId}`}
+                  icon={
+                    loadingItem === "certidoes" ? (
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : (
+                      <Download size={16} />
+                    )
+                  }
+                  onClick={() =>
+                    handleClick("certidoes", () =>
+                      searchCerts(idInsurance!, idOrder)
+                    )
+                  }
+                >
+                  Baixar certidões
+                </MenuItem>
+                <MenuItem
+                  data-testid={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
+                  id={`btn_minhas_emissoes_solicitar_endosso_${processId}`}
+                  icon={
+                    loadingItem === "endosso" ? (
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : (
+                      <PlusCircle size={16} />
+                    )
+                  }
+                  onClick={() =>
+                    handleClick("endosso", () =>
+                      onEndorsementClick("Umbrela Corp", idInsurance!)
+                    )
+                  }
+                >
+                  Solicitar endosso
+                </MenuItem>
+              </DropdownMenu>
+            )}
+          </DropdownWrapper>
+        </Actions>
+      </BodyRow>
+    </CardContainer>
+  );
+};
+
+const MenuItem: React.FC<MenuItemProps> = ({
+  icon,
+  danger,
+  children,
+  ...rest
+}) => {
+  return (
+    <StyledMenuItem {...rest} $danger={danger}>
+      {icon}
+      {children}
+    </StyledMenuItem>
+  );
+};

package/src/components/molecules/InsuranceCard/InsuranceCard.types.ts

@@ -0,0 +1,32 @@
+export type StatusVariant = "primary" | "success" | "warning" | "danger";
+
+export interface InsuranceCardProps {
+  idGranto: string;
+  idOrder: string;
+  idInsurance?: string;
+  idInterno: string;
+  isSupply: boolean;
+  hasMinute: boolean;
+  statusLabel: string;
+  statusVariant: StatusVariant;
+  seguradoName: string;
+  seguradoCnpj: string;
+  product: string;
+  issuedDate: string;
+  totalValue: string;
+  processId?: string;
+  activeIndex: number;
+  testId?: string;
+  openCardId: string | null;
+  setOpenCardId: (id: string | null) => void;
+  runQuery: () => void;
+}
+
+export interface MenuItemProps {
+  icon: React.ReactNode;
+  danger?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+  id?: string;
+  "data-testid"?: string;
+}

package/src/components/molecules/InsuranceCard/index.tsx

@@ -0,0 +1 @@
+export { InsuranceCard } from "./InsuranceCard";

package/src/components/molecules/PieChartComponent/PieChartComponent.styles.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const StyledPieChart = styled.div`
+  .recharts-wrapper {
+    margin: auto;
+  }
+`;
+

package/src/components/molecules/PieChartComponent/PieChartComponent.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from "react";
+import { PieChart, Pie, Label, Tooltip } from "recharts";
+import { StyledPieChart } from "./PieChartComponent.styles";
+import { PieChartComponentProps } from "./PieChartComponent.types";
+import {
+  semanticColors,
+  typographyTokens,
+} from "../../../styles/tokens";
+
+const PieChartComponent = ({ data }: PieChartComponentProps) => {
+  const totalEmissoes = useMemo(
+    () => data.reduce((acc, curr) => acc + curr.value, 0),
+    [data]
+  );
+
+  return (
+    <StyledPieChart>
+      <PieChart width={155} height={155}>
+        <Tooltip cursor={false} />
+        <Pie
+          data={data}
+          dataKey="value"
+          nameKey="name"
+          innerRadius={52}
+          outerRadius={62}
+          stroke="none"
+          paddingAngle={2}
+        >
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                const { cx, cy } = viewBox;
+                return (
+                  <text
+                    x={cx}
+                    y={cy}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                  >
+                    <tspan
+                      x={cx}
+                      y={(cy ?? 0) - 8}
+                      style={{
+                        fontSize: typographyTokens.fontSizes.displayL,
+                        fontWeight: typographyTokens.fontWeights.bold,
+                        fill: semanticColors.base.text,
+                      }}
+                    >
+                      {totalEmissoes}
+                    </tspan>
+                    <tspan
+                      x={cx}
+                      y={(cy ?? 0) + 16}
+                      style={{
+                        fontSize: typographyTokens.fontSizes.bodyS,
+                        fill: semanticColors.base.text,
+                      }}
+                    >
+                      emissões
+                    </tspan>
+                  </text>
+                );
+              }
+              return null;
+            }}
+          />
+        </Pie>
+      </PieChart>
+    </StyledPieChart>
+  );
+};
+
+export { PieChartComponent };

package/src/components/molecules/PieChartComponent/PieChartComponent.types.ts

@@ -0,0 +1,11 @@
+export interface PieChartData {
+  name: string;
+  value: number;
+  fill: string;
+
+ [key: string]: string | number;
+}
+
+export interface PieChartComponentProps {
+  data: PieChartData[];
+}

package/src/components/molecules/PieChartComponent/index.tsx

@@ -0,0 +1 @@
+export { PieChartComponent } from "./PieChartComponent";

package/src/components/molecules/RadioGroupField/RadioGroupField.styles.tsx

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+import {
+  semanticColors,
+  semanticRadius,
+  semanticSizes,
+  typographyTokens,
+} from "../../../styles/tokens";
+
+export const RadioGroupContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${semanticSizes.global.gap.md};
+  width: 100%;
+`;
+
+export const RadioButton = styled.div<{ isSelected: boolean }>`
+  min-width: 274px;
+  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding["2xl"]};
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: ${semanticRadius.global.radius.md2};
+  transition: all 0.2s;
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  font-weight: ${typographyTokens.fontWeights.regular};
+
+  ${({ isSelected }) =>
+    isSelected
+      ? `
+    background-color: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    border: none;
+  `
+      : `
+    background-color: ${semanticColors.base.background};
+    color: ${semanticColors.neutral[700]};
+    border: 1px solid ${semanticColors.global.border.default};
+    
+    &:hover {
+      border-color: ${semanticColors.global.border.medium};
+    }
+  `}
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+
+export const RadioLabel = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.lg};
+  cursor: pointer;
+  margin: 0;
+`;
+
+export const HiddenRadioInput = styled.input`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;

package/src/components/molecules/RadioGroupField/RadioGroupField.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import {
+  RadioGroupContainer,
+  RadioButton,
+  RadioLabel,
+  HiddenRadioInput,
+} from "./RadioGroupField.styles";
+import { RadioGroupFieldProps } from "./RadioGroupField.types";
+
+const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  name = "radio-group",
+  disabled = false,
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue || "");
+  
+  // Componente controlado ou não-controlado
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const handleChange = (optionValue: string) => {
+    if (disabled) return;
+    
+    if (!isControlled) {
+      setInternalValue(optionValue);
+    }
+    
+    onChange?.(optionValue);
+  };
+
+  return (
+    <RadioGroupContainer>
+      {options.map((option) => {
+        const isSelected = currentValue === option.value;
+        
+        return (
+          <RadioButton
+            key={option.value}
+            isSelected={isSelected}
+            onClick={() => handleChange(option.value)}
+            role="radio"
+            aria-checked={isSelected}
+            aria-disabled={disabled}
+          >
+            <RadioLabel>
+              <HiddenRadioInput
+                type="radio"
+                name={name}
+                value={option.value}
+                checked={isSelected}
+                onChange={() => handleChange(option.value)}
+                disabled={disabled}
+              />
+              
+              {isSelected ? option.iconActive : option.iconInactive}
+              
+              <span>{option.label}</span>
+            </RadioLabel>
+          </RadioButton>
+        );
+      })}
+    </RadioGroupContainer>
+  );
+};
+
+export { RadioGroupField };

package/src/components/molecules/RadioGroupField/RadioGroupField.types.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  iconActive?: ReactNode;
+  iconInactive?: ReactNode;
+}
+
+export interface RadioGroupFieldProps {
+  options: RadioOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+}