rbro-tat-uds 1.6.35 → 2.0.0

package/build/cjs/components/PageTitle/PageTitle.cjs

@@ -0,0 +1,82 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const StyledPageTitle = styled.div`
+  width: fit-content;
+
+  ${(props) => !props.$topText && !props.$bottomText ? styled.css`
+          font-size: 24px;
+          font-weight: 700;
+          color: ${utils.colors.gray_950};
+          line-height: 120%;
+          margin: 0px;
+        ` : styled.css`
+          display: flex;
+          flex-direction: column;
+
+          & > h2 {
+            font-size: 24px;
+            font-weight: 700;
+            color: ${utils.colors.gray_950};
+            line-height: 120%;
+            margin: 0px;
+          }
+
+          & > span {
+            font-size: 14px;
+            color: ${utils.colors.gray_500};
+            font-weight: 400;
+            line-height: 120%;
+          }
+
+          ${(props2) => props2.$topGap && styled.css`
+              & > span:first-child {
+                padding-bottom: ${props2.$topGap && typeof props2.$topGap === "number" && props2.$topGap + "px"};
+              }
+            `}
+
+          ${(props2) => props2.$bottomGap && styled.css`
+              & > span:last-child {
+                padding-top: ${props2.$bottomGap && typeof props2.$bottomGap === "number" && props2.$bottomGap + "px"};
+              }
+            `}
+        `}
+`;
+const PageTitle = ({
+  title = "Title",
+  topText,
+  bottomText,
+  topGap,
+  bottomGap,
+  ...rest
+}) => {
+  const onlyHeader = !topText && !bottomText;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledPageTitle,
+    {
+      as: onlyHeader ? "h2" : "div",
+      $title: title,
+      $topText: topText,
+      $bottomText: bottomText,
+      $topGap: topGap,
+      $bottomGap: bottomGap,
+      ...rest,
+      children: [
+        topText && typeof topText === "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: topText }),
+        title && typeof title === "string" && (onlyHeader ? title : /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title })),
+        bottomText && typeof bottomText === "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: bottomText })
+      ]
+    }
+  );
+};
+
+exports.default = PageTitle;

package/build/cjs/components/PageTitle/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PageTitle = require('./PageTitle.cjs');
+
+
+
+exports.default = PageTitle.default;

package/build/cjs/components/Pill/Pill.cjs

@@ -0,0 +1,67 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const _sizes = {
+  xsmall: styled.css`
+    height: 24px;
+    padding: 0px 8px;
+    font-size: 12px;
+  `,
+  small: styled.css`
+    height: 26px;
+    padding: 0px 10px;
+    font-size: 14px;
+  `,
+  medium: styled.css`
+    height: 32px;
+    padding: 0px 12px;
+    font-size: 16px;
+  `
+};
+const PillStyled = styled.div`
+  width: fit-content;
+  border-radius: ${({ $radius }) => $radius};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  line-height: 1;
+  background-color: ${({ $bgColor }) => $bgColor && utils.colors[$bgColor] ? utils.colors[$bgColor] : utils.colors.gray_950};
+  color: ${({ $textColor }) => $textColor && utils.colors[$textColor] ? utils.colors[$textColor] : utils.colors.white};
+  font-weight: ${({ $fontWeight }) => $fontWeight && [200, 300, 400, 500, 700, 800].includes($fontWeight) ? $fontWeight : 400};
+
+  ${({ $size }) => $size && Object.keys(_sizes).includes($size) ? _sizes[$size] : _sizes["small"]};
+`;
+const Pill = ({
+  bgColor = "gray_950",
+  textColor = "white",
+  fontWeight = 400,
+  size = "small",
+  text = "Utilizat",
+  radius = "99999px",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PillStyled,
+    {
+      $bgColor: bgColor,
+      $textColor: textColor,
+      $fontWeight: fontWeight,
+      $size: size,
+      $radius: radius,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
+    }
+  );
+};
+
+exports.default = Pill;

package/build/cjs/components/Pill/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Pill = require('./Pill.cjs');
+
+
+
+exports.default = Pill.default;

package/build/cjs/components/PlanFinanciarAUMBar/PlanFinanciarAUMBar.cjs

@@ -0,0 +1,276 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const PlanFinanciarAUMBarStyled = styled.svg`
+  ${({ $disabled }) => $disabled && styled.css`
+      background-color: ${utils.colors.gray_60};
+
+      & > rect {
+        visibility: hidden;
+      }
+      & > .label_top {
+        visibility: hidden;
+      }
+      & > .label_bottom {
+        visibility: hidden;
+      }
+    `}
+
+  .label_top {
+    font-size: 14px;
+    font-weight: 500;
+    fill: ${utils.colors.gray_800};
+  }
+  .label_bottom {
+    font-size: 16px;
+    font-weight: 400;
+    fill: ${utils.colors.gray_950};
+  }
+
+  .label_disabled {
+    font-size: 14px;
+    font-weight: 400;
+    fill: ${utils.colors.gray_400};
+  }
+
+  rect {
+    transition: all 0.5s ease-in-out;
+  }
+
+  .label_top,
+  .label_bottom {
+    transition: all 0.5s ease-in-out;
+  }
+`;
+const PlanFinanciarAUMBar = ({
+  totalAUM = 0,
+  cash = 0,
+  crestere = 0,
+  conservare = 0,
+  lichiditate = 0,
+  cashCrestere = 0,
+  cashConservare = 0,
+  cashLichiditate = 0,
+  disabled = false,
+  showRightContent = true,
+  ...rest
+}) => {
+  const svg_ref = React.useRef(null);
+  const refLabelTop = React.useRef(null);
+  const refLabelBottom = React.useRef(null);
+  const resizeObserverRef = React.useRef(null);
+  const min_height_bar = 0.2;
+  const colors_map = {
+    cash: utils.colors.warm_gray_150,
+    crestere: utils.colors.blue_400,
+    conservare: utils.colors.purple_500,
+    lichiditate: utils.colors.pink_400,
+    cashCrestere: utils.colors.blue_300,
+    cashConservare: utils.colors.purple_300,
+    cashLichiditate: utils.colors.pink_300
+  };
+  const [barWidth, setBarWidth] = React.useState(83);
+  const calculatePercentage = React.useCallback(
+    (value) => {
+      const percentage = disabled ? 0 : (value / totalAUM || 0) * barWidth;
+      return (percentage > 0 ? Math.max(percentage, min_height_bar) : 0).toFixed(2);
+    },
+    [disabled, totalAUM, barWidth]
+  );
+  const aum = React.useMemo(() => {
+    const cash_percentage = calculatePercentage(cash);
+    const crestere_percentage = calculatePercentage(crestere);
+    const conservare_percentage = calculatePercentage(conservare);
+    const lichiditate_percentage = calculatePercentage(lichiditate);
+    const cashCrestere_percentage = calculatePercentage(cashCrestere);
+    const cashConservare_percentage = calculatePercentage(cashConservare);
+    const cashLichiditate_percentage = calculatePercentage(cashLichiditate);
+    return {
+      cash_percentage: Number(cash_percentage),
+      crestere_percentage: Number(crestere_percentage),
+      conservare_percentage: Number(conservare_percentage),
+      lichiditate_percentage: Number(lichiditate_percentage),
+      cashCrestere_percentage: Number(cashCrestere_percentage),
+      cashConservare_percentage: Number(cashConservare_percentage),
+      cashLichiditate_percentage: Number(cashLichiditate_percentage)
+    };
+  }, [
+    cash,
+    crestere,
+    conservare,
+    lichiditate,
+    cashCrestere,
+    cashConservare,
+    cashLichiditate,
+    calculatePercentage
+  ]);
+  const aum_cash_width = React.useMemo(() => {
+    const sum = aum.crestere_percentage + aum.conservare_percentage + aum.lichiditate_percentage + aum.cashCrestere_percentage + aum.cashConservare_percentage + aum.cashLichiditate_percentage;
+    return sum > 0 ? aum.cash_percentage : barWidth;
+  }, [aum, barWidth]);
+  const calculateBarWidth = React.useCallback(() => {
+    if (svg_ref.current) {
+      const svgWidth = svg_ref.current.clientWidth;
+      const refLabelBigger = Math.max(
+        refLabelTop.current?.getBBox().width || 0,
+        refLabelBottom.current?.getBBox().width || 0
+      );
+      const textWidth = showRightContent && refLabelBottom.current ? refLabelBigger + 30 || 65 : 4;
+      const newBarsWidth = (svgWidth - Number(textWidth)) / svgWidth * 100;
+      return Number(Math.max(newBarsWidth, 0).toFixed(2));
+    }
+    return 85;
+  }, [showRightContent]);
+  React.useEffect(() => {
+    resizeObserverRef.current = new ResizeObserver(() => {
+      setBarWidth(calculateBarWidth());
+    });
+    if (svg_ref.current) {
+      resizeObserverRef.current.observe(svg_ref.current);
+    }
+    if (refLabelBottom.current) {
+      resizeObserverRef.current.observe(refLabelBottom.current);
+    }
+    setBarWidth(calculateBarWidth());
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+      }
+    };
+  }, [calculateBarWidth]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PlanFinanciarAUMBarStyled,
+    {
+      $disabled: disabled,
+      ref: svg_ref,
+      width: "100%",
+      height: "100%",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: (barWidth + 4) / 2 + "%",
+            y: 48 / 2 + 5,
+            textAnchor: "middle",
+            className: "label_disabled",
+            children: "Grafic indisponibil"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: aum.crestere_percentage + aum.conservare_percentage + aum.lichiditate_percentage + aum.cashCrestere_percentage + aum.cashConservare_percentage + aum.cashLichiditate_percentage + "%",
+            y: 0,
+            height: 48,
+            width: aum_cash_width + "%",
+            fill: colors_map["cash"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: 0,
+            y: 0,
+            height: 48,
+            width: aum.crestere_percentage + "%",
+            fill: colors_map["crestere"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: aum.crestere_percentage + "%",
+            y: 0,
+            height: 48,
+            width: aum.cashCrestere_percentage + "%",
+            fill: colors_map["cashCrestere"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: aum.crestere_percentage + aum.cashCrestere_percentage + "%",
+            y: 0,
+            height: 48,
+            width: aum.conservare_percentage + "%",
+            fill: colors_map["conservare"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: aum.crestere_percentage + aum.cashCrestere_percentage + aum.conservare_percentage + "%",
+            y: 0,
+            height: 48,
+            width: aum.cashConservare_percentage + "%",
+            fill: colors_map["cashConservare"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: aum.crestere_percentage + aum.cashCrestere_percentage + aum.conservare_percentage + aum.cashConservare_percentage + "%",
+            y: 0,
+            height: 48,
+            width: aum.lichiditate_percentage + "%",
+            fill: colors_map["lichiditate"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: aum.crestere_percentage + aum.cashCrestere_percentage + aum.conservare_percentage + aum.cashConservare_percentage + aum.lichiditate_percentage + "%",
+            y: 0,
+            height: 48,
+            width: aum.cashLichiditate_percentage + "%",
+            fill: colors_map["cashLichiditate"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: barWidth + "%", y: 0, height: "100%", width: "4px" }),
+        showRightContent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              ref: refLabelTop,
+              className: "label_top",
+              x: 0,
+              textAnchor: "start",
+              y: 14 + 5,
+              style: {
+                transform: `translateX(${barWidth + 3 + "%"}`
+              },
+              children: "Total AUM"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              ref: refLabelBottom,
+              className: "label_bottom",
+              x: 0,
+              textAnchor: "start",
+              y: 16 + 18 + 5,
+              style: {
+                transform: `translateX(${barWidth + 3 + "%"}`
+              },
+              children: new Intl.NumberFormat("ro-RO").format(totalAUM) + " RON"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+exports.default = PlanFinanciarAUMBar;

package/build/cjs/components/PlanFinanciarAUMBar/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PlanFinanciarAUMBar = require('./PlanFinanciarAUMBar.cjs');
+
+
+
+exports.default = PlanFinanciarAUMBar.default;