@credithub/harlan-components 1.9.0 → 1.10.1

package/lib/esm/components/dossie/summary/cardsAndProducts.js

@@ -0,0 +1,207 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { getField, getFieldRfb, getProductsPrices } from "./utils";
+import { useConsultasComplementares } from "../../../hooks/useConsultasComplementares";
+import { formatMoney } from "../../../utils/number";
+import XPathUtils from "../../../utils/xpath";
+var useCardsAndProducts = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var finderResponse = _a.finderResponse, rfbResponse = _a.rfbResponse;
+    var _g = useConsultasComplementares(), consultasComplementares = _g.consultasComplementares, setConsultasComplementares = _g.setConsultasComplementares, hasCredits = _g.hasCredits;
+    var isPF = !!getField("cpf", finderResponse);
+    var productsPrices = getProductsPrices(isPF);
+    var handleOnClick = function (key) {
+        return function () {
+            var callback = function () {
+                return setConsultasComplementares &&
+                    setConsultasComplementares(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { consultaRealizada: true }), _a)));
+                    });
+            };
+            return hasCredits
+                ? hasCredits(productsPrices[key] * 1000, callback)
+                : callback();
+        };
+    };
+    var _h = {
+        cards: [
+            {
+                title: getField("nome", finderResponse) || getFieldRfb("nome", rfbResponse),
+                header: "Nome",
+            },
+            {
+                title: getField("sexo", finderResponse, function (value) { return (isPF && (value == "M" ? "Masculino" : "Feminino")) || ""; }),
+                header: "Sexo",
+            },
+            {
+                title: getField("dataNascimento", finderResponse),
+                header: "Data De Nascimento",
+            },
+            {
+                title: getField("idade", finderResponse),
+                header: "Idade",
+            },
+            {
+                title: isPF && getField("faixaIdade", finderResponse),
+                header: "Faixa De Idade",
+            },
+            {
+                title: getField("signo", finderResponse),
+                header: "Signo",
+            },
+            {
+                title: getField("rg", finderResponse),
+                header: "Rg",
+            },
+            {
+                title: getField("ufRg", finderResponse),
+                header: "Uf Do Rg",
+            },
+            {
+                title: getField("status", finderResponse),
+                header: "Situação",
+            },
+            {
+                title: getField("statusData", finderResponse),
+                header: "Data Da Situação",
+            },
+            {
+                title: getField("maeNome", finderResponse),
+                header: "Nome Da Mãe",
+            },
+            {
+                title: getField("maeCpf", finderResponse),
+                header: "Cpf Da Mãe",
+            },
+            {
+                title: getField("obitoProvavel", finderResponse),
+                header: "Óbito Provável",
+            },
+            {
+                title: getField("tituloEleitoral", finderResponse),
+                header: "Titulo Eleitoral",
+            },
+            {
+                title: getField("grauInstrucao", finderResponse),
+                header: "Grau De Instrução",
+            },
+            {
+                title: getField("dependentes", finderResponse),
+                header: "Dependentes",
+            },
+            {
+                title: getField("estadoCivil", finderResponse),
+                header: "Estado Civil",
+            },
+            {
+                title: getField("renda", finderResponse, formatMoney),
+                header: "Renda",
+            },
+            {
+                title: getField("ppe", finderResponse, function (value) { return (isPF && (value ? "Sim" : "Não")) || ""; }),
+                header: "Pessoa Politicamente Exposta",
+            },
+            {
+                title: getField("nomeFantasia", finderResponse) || XPathUtils.select("string(//RFB/nome/@fantasia)", rfbResponse),
+                header: "Nome Fantasia",
+            },
+            {
+                title: getField("receitaStatus", finderResponse) || getFieldRfb("situacao", rfbResponse),
+                header: "Status da Receita",
+            },
+            {
+                title: getField("dataReceitaStatus", finderResponse) || getFieldRfb("dataSituacao", rfbResponse),
+                header: "Data do Status na Receita",
+            },
+            {
+                title: getField("tipoEmpresa", finderResponse),
+                header: "Tipo da Empresa",
+            },
+            {
+                title: getField("cnaeDescricao", finderResponse) || getFieldRfb("atividade-economica", rfbResponse),
+                header: "Atividade Econômica",
+            },
+            {
+                title: getField("naturezaJuridica", finderResponse),
+                header: "Natureza Jurídica",
+            },
+            {
+                title: getField("dataAbertura", finderResponse) || getFieldRfb("data-abertura", rfbResponse),
+                header: "Data De Abertura",
+            },
+            {
+                title: getField("idadeEmpresa", finderResponse),
+                header: "Idade Da Empresa",
+            },
+            {
+                title: isPF && getField("faixaIdade", finderResponse),
+                header: "Faixa De Idade da Empresa",
+            },
+            {
+                title: getField("quantidadeFuncionarios", finderResponse),
+                header: "Quantidade De Funcionários",
+            },
+            {
+                title: getField("faixaFuncionarios", finderResponse),
+                header: "Faixa De Funcionários",
+            },
+            {
+                title: getField("porteEmpresa", finderResponse),
+                header: "Porte Da Empresa",
+            },
+            {
+                title: formatMoney(getField("capitalSocial", finderResponse) || getFieldRfb("capitalSocial", rfbResponse)),
+                header: "Capital Social",
+            },
+        ].filter(function (card) { return card.title; }),
+        products: [
+            {
+                title: "Consultar SCR",
+                onClick: handleOnClick("scr"),
+                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.scr,
+            },
+            {
+                title: "Consultar Veículos",
+                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.veiculos,
+                onClick: handleOnClick("veiculos"),
+                hide: (_b = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.veiculos) === null || _b === void 0 ? void 0 : _b.consultaRealizada,
+            },
+            {
+                title: "Consultar Pefin/Refin Boa Vista",
+                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.refinBoaVista,
+                onClick: handleOnClick("refinBoaVista"),
+                hide: (_c = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinBoaVista) === null || _c === void 0 ? void 0 : _c.consultaRealizada,
+            },
+            {
+                title: "Consultar Score Boa Vista",
+                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.scoreBoaVista,
+                onClick: handleOnClick("scoreBoaVista"),
+                hide: (_d = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.scoreBoaVista) === null || _d === void 0 ? void 0 : _d.consultaRealizada,
+            },
+            {
+                title: "Consultar Pefin/Refin Serasa",
+                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.refinSerasa,
+                onClick: handleOnClick("refinSerasa"),
+                hide: (_e = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinSerasa) === null || _e === void 0 ? void 0 : _e.consultaRealizada,
+            },
+            {
+                title: "Consultar Imóveis SP Capital",
+                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.imoveis,
+                onclick: handleOnClick("imoveis"),
+                hide: !isPF || ((_f = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.imoveis) === null || _f === void 0 ? void 0 : _f.consultaRealizada),
+            },
+        ],
+    }, cards = _h.cards, products = _h.products;
+    return { cards: cards, products: products };
+};
+export default useCardsAndProducts;

package/lib/esm/components/dossie/summary/summary.d.ts

@@ -11,7 +11,8 @@ export type CardsAndProducts = {
     }[];
 };
 interface SummaryProps {
-    finderResponse: Document;
+    finderResponse?: Document;
+    rfbResponse?: Document;
 }
 export declare const Summary: React.FC<SummaryProps>;
 export default Summary;

package/lib/esm/components/dossie/summary/summary.js

@@ -1,235 +1,25 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-import React, { useContext } from "react";
-import cn from "classnames";
+import React from "react";
 import AddItemField from "../../../components/common/addItem";
-import XPathUtils from "../../../utils/xpath";
 import Button from "../../../components/common/button";
-import { formatCnpj, formatCpf } from "../../../utils/string";
 import { formatMoney } from "../../../utils/number";
-import { ConsultasComplementaresContext, } from "../../../components/consultasComplementares";
+import useCardsAndProducts from "./cardsAndProducts";
+import styled from "styled-components";
+var ContainerSummary = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: repeat(1, auto);\n  gap: 1rem;\n  padding: 1rem;\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: repeat(1, auto);\n  gap: 1rem;\n  padding: 1rem;\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n  }\n"])));
+var ContentSummary = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-row: 1 / 8;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0 1rem;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  display: grid;\n  grid-row: 1 / 8;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0 1rem;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+var FieldSummary = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  margin-bottom: 1rem;\n  grid-column: ", ";\n\n  @media (max-width: 1280px) {\n    grid-column: 1 / -1;\n  }\n"], ["\n  align-items: center;\n  margin-bottom: 1rem;\n  grid-column: ", ";\n\n  @media (max-width: 1280px) {\n    grid-column: 1 / -1;\n  }\n"])), function (props) { return (props.fullRow ? "1 / 3" : "auto"); });
+var ButtonsSummary = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.5rem;\n\n  @media (max-width: 768px) {\n    align-items: center;\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.5rem;\n\n  @media (max-width: 768px) {\n    align-items: center;\n    max-width: 100%;\n  }\n"])));
 export var Summary = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var finderResponse = _a.finderResponse;
-    var consultasComplementaresContext = useContext(ConsultasComplementaresContext);
-    var _g = (consultasComplementaresContext && consultasComplementaresContext) || {}, consultasComplementares = _g.consultasComplementares, setConsultasComplementares = _g.setConsultasComplementares, hasCredits = _g.hasCredits;
-    var getField = function (path, formatter) {
-        var value = XPathUtils.select("string(".concat(path, ")"), XPathUtils.select("//cadastro", finderResponse)[0]);
-        return formatter ? formatter(value) : value;
-    };
-    var isPF = !!getField("cpf");
-    var productsPrices = getProductsPrices(isPF);
-    var handleOnClick = function (key) {
-        return function () {
-            var callback = function () {
-                return setConsultasComplementares &&
-                    setConsultasComplementares(function (prev) {
-                        var _a;
-                        return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { consultaRealizada: true }), _a)));
-                    });
-            };
-            return hasCredits
-                ? hasCredits(productsPrices[key] * 1000, callback)
-                : callback();
-        };
-    };
-    var _h = {
-        cards: [
-            {
-                title: getField("nome"),
-                header: "Nome",
-            },
-            {
-                title: getField("cpf", formatCpf),
-                header: "Cpf",
-            },
-            {
-                title: getField("sexo", function (value) { return (isPF && (value == "M" ? "Masculino" : "Feminino")) || ""; }),
-                header: "Sexo",
-            },
-            {
-                title: getField("dataNascimento"),
-                header: "Data De Nascimento",
-            },
-            {
-                title: getField("idade"),
-                header: "Idade",
-            },
-            {
-                title: isPF && getField("faixaIdade"),
-                header: "Faixa De Idade",
-            },
-            {
-                title: getField("signo"),
-                header: "Signo",
-            },
-            {
-                title: getField("rg"),
-                header: "Rg",
-            },
-            {
-                title: getField("ufRg"),
-                header: "Uf Do Rg",
-            },
-            {
-                title: getField("status"),
-                header: "Situação",
-            },
-            {
-                title: getField("statusData"),
-                header: "Data Da Situação",
-            },
-            {
-                title: getField("maeNome"),
-                header: "Nome Da Mãe",
-            },
-            {
-                title: getField("maeCpf"),
-                header: "Cpf Da Mãe",
-            },
-            {
-                title: getField("obitoProvavel"),
-                header: "Óbito Provável",
-            },
-            {
-                title: getField("tituloEleitoral"),
-                header: "Titulo Eleitoral",
-            },
-            {
-                title: getField("grauInstrucao"),
-                header: "Grau De Instrução",
-            },
-            {
-                title: getField("dependentes"),
-                header: "Dependentes",
-            },
-            {
-                title: getField("estadoCivil"),
-                header: "Estado Civil",
-            },
-            {
-                title: getField("renda", formatMoney),
-                header: "Renda",
-            },
-            {
-                title: getField("ppe", function (value) { return (isPF && (value ? "Sim" : "Não")) || ""; }),
-                header: "Pessoa Politicamente Exposta",
-            },
-            {
-                title: getField("nomeFantasia"),
-                header: "Nome Fantasia",
-            },
-            {
-                title: formatCnpj(getField("cnpj")),
-                header: "Cnpj",
-            },
-            {
-                title: getField("receitaStatus"),
-                header: "Status da Receita",
-            },
-            {
-                title: getField("dataReceitaStatus"),
-                header: "Data do Status na Receita",
-            },
-            {
-                title: getField("tipoEmpresa"),
-                header: "Tipo da Empresa",
-            },
-            {
-                title: getField("cnaeDescricao"),
-                header: "Atividade Econômica",
-            },
-            {
-                title: getField("naturezaJuridica"),
-                header: "Natureza Jurídica",
-            },
-            {
-                title: getField("dataAbertura"),
-                header: "Data De Abertura",
-            },
-            {
-                title: getField("idadeEmpresa"),
-                header: "Idade Da Empresa",
-            },
-            {
-                title: isPF && getField("faixaIdade"),
-                header: "Faixa De Idade da Empresa",
-            },
-            {
-                title: getField("quantidadeFuncionarios"),
-                header: "Quantidade De Funcionários",
-            },
-            {
-                title: getField("faixaFuncionarios"),
-                header: "Faixa De Funcionários",
-            },
-            {
-                title: getField("porteEmpresa"),
-                header: "Porte Da Empresa",
-            },
-            {
-                title: getField("capitalSocial", formatMoney),
-                header: "Capital Social",
-            },
-        ].filter(function (card) { return card.title; }),
-        products: [
-            {
-                title: 'Consultar Imóveis SP Capital',
-                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.imoveis,
-                onclick: handleOnClick('imoveis'),
-                hide: !isPF || ((_b = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.imoveis) === null || _b === void 0 ? void 0 : _b.consultaRealizada)
-            },
-            {
-                title: "Consultar Pefin/Refin Boa Vista",
-                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.refinBoaVista,
-                onClick: handleOnClick("refinBoaVista"),
-                hide: (_c = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinBoaVista) === null || _c === void 0 ? void 0 : _c.consultaRealizada,
-            },
-            {
-                title: "Consultar Score Boa Vista",
-                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.scoreBoaVista,
-                onClick: handleOnClick("scoreBoaVista"),
-                hide: (_d = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.scoreBoaVista) === null || _d === void 0 ? void 0 : _d.consultaRealizada,
-            },
-            {
-                title: "Consultar Pefin/Refin Serasa",
-                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.refinSerasa,
-                onClick: handleOnClick("refinSerasa"),
-                hide: (_e = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinSerasa) === null || _e === void 0 ? void 0 : _e.consultaRealizada,
-            },
-            {
-                title: "Consultar Veículos",
-                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.veiculos,
-                onClick: handleOnClick('veiculos'),
-                hide: (_f = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.veiculos) === null || _f === void 0 ? void 0 : _f.consultaRealizada
-            },
-            {
-                title: "Consultar SCR",
-                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.scr,
-            },
-        ],
-    }, cards = _h.cards, products = _h.products;
-    return (React.createElement("div", { className: cn("container") },
-        React.createElement("div", { className: cn("content", "summary-content") },
-            cards.map(function (card, index) { return (React.createElement(AddItemField, { key: index, name: card.header, value: card.title, className: cn("field"), style: { display: "inline-block" } })); }),
-            products.map(function (product, index) { return (React.createElement("div", { hidden: product === null || product === void 0 ? void 0 : product.hide, key: index, className: cn("field", "summary-divider") },
-                React.createElement(Button, { smallContent: formatMoney(product.price), onClick: function () { return (product === null || product === void 0 ? void 0 : product.onClick) && (product === null || product === void 0 ? void 0 : product.onClick()); } }, product.title))); }))));
+    var finderResponse = _a.finderResponse, rfbResponse = _a.rfbResponse;
+    var _b = useCardsAndProducts({ finderResponse: finderResponse, rfbResponse: rfbResponse }), cards = _b.cards, products = _b.products;
+    return (React.createElement(ContainerSummary, null,
+        React.createElement(ContentSummary, null, cards.map(function (card, index) { return (React.createElement(FieldSummary, { key: index, fullRow: card.header === "Nome" || card.header === "Nome Da Mãe" },
+            React.createElement(AddItemField, { name: card.header, value: card.title }))); })),
+        products.map(function (product, index) { return (React.createElement(ButtonsSummary, { key: index, hidden: product === null || product === void 0 ? void 0 : product.hide },
+            React.createElement(Button, { onClick: function () { return (product === null || product === void 0 ? void 0 : product.onClick) && (product === null || product === void 0 ? void 0 : product.onClick()); }, smallContent: formatMoney(product.price), style: { width: index >= 2 ? "254px" : "auto" } }, product.title))); })));
 };
-var getProductsPrices = function (isPF) { return ({
-    refinBoaVista: isPF ? 2.7 : 3.5,
-    scoreBoaVista: isPF ? 3 : 6,
-    refinSerasa: 4.2,
-    veiculos: 10,
-    scr: 7,
-    imoveis: 20,
-}); };
 export default Summary;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/components/dossie/summary/utils.d.ts

@@ -0,0 +1,10 @@
+export declare const getField: (path: string, response?: Document, formatter?: ((value: string | number) => string) | undefined) => string;
+export declare const getFieldRfb: (path: string, response?: Document | null, formatter?: ((value: string | number) => string) | undefined) => string;
+export declare const getProductsPrices: (isPF: boolean) => {
+    refinBoaVista: number;
+    scoreBoaVista: number;
+    refinSerasa: number;
+    veiculos: number;
+    scr: number;
+    imoveis: number;
+};

package/lib/esm/components/dossie/summary/utils.js

@@ -0,0 +1,29 @@
+import XPathUtils from "../../../utils/xpath";
+export var getField = function (path, response, formatter) {
+    var _a;
+    if (!response)
+        return "";
+    var cadastro = (_a = XPathUtils.selectArray("//cadastro", response)) === null || _a === void 0 ? void 0 : _a[0];
+    if (!cadastro)
+        return "";
+    var value = XPathUtils.select("string(".concat(path, ")"), cadastro);
+    return formatter ? formatter(value) : value;
+};
+export var getFieldRfb = function (path, response, formatter) {
+    var _a;
+    if (!response)
+        return "";
+    var rfb = (_a = XPathUtils.selectArray("//RFB", response)) === null || _a === void 0 ? void 0 : _a[0];
+    if (!rfb)
+        return "";
+    var value = XPathUtils.select("string(".concat(path, ")"), rfb);
+    return formatter ? formatter(value) : value;
+};
+export var getProductsPrices = function (isPF) { return ({
+    refinBoaVista: isPF ? 2.7 : 3.5,
+    scoreBoaVista: isPF ? 3 : 6,
+    refinSerasa: 4.2,
+    veiculos: 10,
+    scr: 7,
+    imoveis: 20,
+}); };

package/lib/esm/components/dossie/transactionTable/transactionTable.js

@@ -1,30 +1,38 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from "react";
-import cn from "classnames";
 import AddItemField from "../../common/addItem";
 import XPathUtils from "../../../utils/xpath";
+import styled from "styled-components";
+import IconePessoa from "../../../assets/icones/iconePessoa";
+import theme from "../../../components/interface/theme";
+var StyledContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  margin-bottom: 1.25rem;\n  border-top: 0.1rem solid ", ";\n  padding: 1rem;\n  @media (max-width: 992px) {\n    grid-template-columns: 1fr;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  margin-bottom: 1.25rem;\n  border-top: 0.1rem solid ", ";\n  padding: 1rem;\n  @media (max-width: 992px) {\n    grid-template-columns: 1fr;\n  }\n"])), theme.colors.cinzaClaro);
+var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  grid-row: 1 / 6;\n  padding: 1rem;\n  margin: 1rem;\n  @media (max-width: 992px) {\n    padding: 0 0 1rem 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  grid-row: 1 / 6;\n  padding: 1rem;\n  margin: 1rem;\n  @media (max-width: 992px) {\n    padding: 0 0 1rem 0;\n  }\n"])));
+var Title = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 18px;\n  font-weight: bold;\n  text-align: center;\n"], ["\n  font-size: 18px;\n  font-weight: bold;\n  text-align: center;\n"])));
+var Count = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  color: ", ";\n  text-align: center;\n  padding: 1rem;\n"], ["\n  font-size: 14px;\n  color: ", ";\n  text-align: center;\n  padding: 1rem;\n"])), theme.colors.cinzaEscuro);
+var TransactionContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  align-items: flex-start;\n"])));
+var UserField = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  padding-right: 16px;\n"], ["\n  flex: 1;\n  padding-right: 16px;\n"])));
+var DateField = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  text-align: right;\n"], ["\n  flex: 1;\n  text-align: right;\n"])));
 export var TransactionsTable = function (_a) {
     var _b = _a.events, events = _b === void 0 ? [] : _b;
-    return (React.createElement("div", null,
-        React.createElement("div", { className: cn("container") },
-            React.createElement("div", null,
-                React.createElement("div", { className: cn("field", "transaction-content-header"
-                    //"mdl-cell",
-                    //"mdl-cell--9-col",
-                    //"transaction-field"
-                    ) },
-                    React.createElement("span", { className: cn("span", "transaction-span") },
-                        "Quem Consultou esse Documento?",
-                        " "),
-                    React.createElement("span", { className: cn("quantidade-quem-consultou") },
-                        "(", events === null || events === void 0 ? void 0 :
-                        events.length,
-                        " usu\u00E1rios consultaram esse documento)")))),
+    return (React.createElement(StyledContainer, null,
+        React.createElement(Header, null,
+            React.createElement(Title, null, "Quem Consultou esse Documento?"),
+            React.createElement(Count, null,
+                "(", events === null || events === void 0 ? void 0 :
+                events.length,
+                " usu\u00E1rios consultaram esse documento)"),
+            React.createElement(IconePessoa, { size: 60 })),
         events.map(function (event, index) {
             var _a;
-            return (React.createElement("div", { key: index, className: cn("container", "container-quem-consultou") },
-                React.createElement("div", { className: cn("transaction-content") },
-                    React.createElement(AddItemField, { name: "Usu\u00E1rio", value: XPathUtils.select("string(./usuario)", event), className: cn("mdl-cell", "mdl-cell--6-col"), style: { display: "inline-block", padding: "2px 0px" } }),
+            return (React.createElement(TransactionContent, { key: index },
+                React.createElement(UserField, null,
+                    React.createElement(AddItemField, { name: "Usu\u00E1rio", value: XPathUtils.select("string(./usuario)", event), style: { display: "inline-block", padding: "2px 0px" } })),
+                React.createElement(DateField, null,
                     React.createElement(AddItemField, { name: "Data", value: (_a = new Date(XPathUtils.select("string(./ultimaConsulta)", event))) === null || _a === void 0 ? void 0 : _a.toLocaleDateString(), style: { display: "inline-block" } }))));
         })));
 };
 export default TransactionsTable;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;