dgrcorrientes-modulos 1.0.0

package/src/stories/Components/AverageAttended/AverageAttended.tsx

@@ -0,0 +1,311 @@
+import {useCallback, useEffect, useState} from 'react';
+import {Badge} from '../../Elements/Badge/Badge';
+import {Icon} from '../../Elements/Icon/Icon';
+import './AverageAttended.scss';
+
+export interface IAverageAttended {
+  // BASE
+  option?: IOptions[];
+  option2?: IOptions2[];
+  option3?: IOptions3[];
+  Call: ICall[];
+
+  // IS-OPTIONS
+
+  // EVENTS
+
+  // GENERIC
+  className?: string;
+}
+export interface IOptions {
+  status?: string;
+  icon: string;
+  iconColor?: string;
+  amountCall?: number | string;
+  minutes?: string;
+  description?: string;
+  labelTop: string;
+  labelButtom: string;
+  color: string;
+  colorText: string;
+  colorTextPositive: string;
+}
+export interface IOptions2 {
+  status?: string;
+  icon: string;
+  iconColor?: string;
+  amountCall?: number | string;
+  minutes?: string;
+  description?: string;
+  labelTop: string;
+  labelButtom: string;
+  color: string;
+  colorText: string;
+  colorTextPositive: string;
+}
+
+export interface IOptions3 {
+  status?: string;
+  icon: string;
+  iconColor?: string;
+  amountCall?: number | string;
+  minutes?: string;
+  description?: string;
+  labelTop: string;
+  labelButtom: string;
+  color: string;
+  colorText: string;
+  colorTextPositive: string;
+}
+interface ICall {
+  id: number;
+  date: Date;
+  arrivalTime: Date;
+  serviceStartTime?: Date;
+}
+declare global {
+  interface Date {
+    getWeek(): number;
+  }
+}
+
+export const AverageAttended = ({option, option2, option3, Call, className}: IAverageAttended) => {
+  const [CallThisWeek, setCallThisWeek] = useState<number>(0);
+  const [CallLastWeek, setCallLastWeek] = useState<number>(0);
+  const [averageCall, setAverageCall] = useState<number>(0);
+  const [currentCallWaitingTime, setCurrentCallWaitingTime] = useState<number | null>(null);
+  const [currentCallerviceTime, setCurrentCallerviceTime] = useState<number | null>(null);
+  const [averageWaitTime, setAverageWaitTime] = useState<number | null>(null);
+  const [averageServiceTime, setAverageServiceTime] = useState<number | null>(null);
+
+  useEffect(() => {
+    const currentDate = new Date();
+    const currentWeek = currentDate.getWeek();
+    const lastWeek = currentWeek - 1;
+
+    const CallInCurrentWeek = Call.filter(Call => Call.date.getWeek() === currentWeek);
+    const CallInLastWeek = Call.filter(Call => Call.date.getWeek() === lastWeek);
+
+    setCallThisWeek(CallInCurrentWeek.length);
+    setCallLastWeek(CallInLastWeek.length);
+
+    const avgCall = CallInLastWeek.length !== 0 ? (CallInCurrentWeek.length - CallInLastWeek.length) / CallInLastWeek.length : 0;
+    const roundedAvgCall = parseFloat(avgCall.toFixed(2));
+
+    setAverageCall(roundedAvgCall);
+
+    // Calcular el tiempo de espera y tiempo de servicio de la llamada actual
+    const currentCall = Call[Call.length - 1]; // Suponiendo que la última llamada es la actual
+    if (currentCall) {
+      const now = new Date();
+      const arrivalTime = currentCall.arrivalTime;
+      const serviceStartTime = currentCall.serviceStartTime || arrivalTime;
+
+      // Calcular el tiempo de espera
+      const waitingTime = (serviceStartTime || now).getTime() - arrivalTime.getTime();
+      setCurrentCallWaitingTime(waitingTime / (1000 * 60)); // Convertir a minutos
+
+      // Calcular el tiempo de servicio
+      const serviceTime = now.getTime() - (serviceStartTime || arrivalTime).getTime();
+      const totalMinutes = Math.floor(serviceTime / (1000 * 60));
+      setCurrentCallerviceTime(totalMinutes); // Convertir a minutos
+      const hours = Math.floor(totalMinutes / 60);
+      const minutes = totalMinutes % 60;
+
+      // Calcular el tiempo de servicio y promedio de tiempo de servicio
+      const currentWeekServiceTime = calculateServiceTime(CallInCurrentWeek);
+      const lastWeekServiceTime = calculateServiceTime(CallInLastWeek);
+      const avgServiceTime = calculateAverageServiceTime(
+        currentWeekServiceTime,
+        lastWeekServiceTime,
+        CallInCurrentWeek.length,
+        CallInLastWeek.length,
+      );
+      setAverageServiceTime(avgServiceTime);
+
+      // Verificar si hay horas para decidir cómo formatear
+    } else {
+      setCurrentCallWaitingTime(null);
+      setCurrentCallerviceTime(null);
+    }
+
+    // Calcular el promedio de minutos de espera respecto a la semana anterior
+    const currentWeekWaitTime = calculateWaitTime(CallInCurrentWeek);
+    const lastWeekWaitTime = calculateWaitTime(CallInLastWeek);
+    const avgWaitTime = calculateAverageWaitTime(currentWeekWaitTime, lastWeekWaitTime, CallInCurrentWeek.length, CallInLastWeek.length);
+    setAverageWaitTime(avgWaitTime);
+  }, [Call]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const currentCall = Call[Call.length - 1];
+      if (currentCall && currentCall.serviceStartTime) {
+        const now = new Date();
+        const serviceTime = now.getTime() - currentCall.serviceStartTime.getTime();
+
+        setCurrentCallerviceTime(serviceTime / (1000 * 60));
+      } else {
+        setCurrentCallerviceTime(null);
+      }
+    }, 1000); // Actualizar cada 1000 ms (1 segundo)
+
+    return () => clearInterval(intervalId); // Limpiar el intervalo al desmontar el componente
+  }, [Call]);
+
+  const formattedServiceTime =
+    currentCallerviceTime !== null
+      ? `${Math.floor(currentCallerviceTime / 60)}:${(currentCallerviceTime % 60).toFixed(0).padStart(2, '0')}`
+      : 'N/A';
+
+  const formattedWaitingTime =
+    currentCallWaitingTime !== null
+      ? `${Math.floor(currentCallWaitingTime / 60)}:${(currentCallWaitingTime % 60).toFixed(0).padStart(2, '0')}`
+      : 'N/A';
+
+  const formattedAvgWaitTime =
+    averageWaitTime !== null ? `${Math.floor(averageWaitTime / 60)}:${(averageWaitTime % 60).toFixed(0).padStart(2, '0')}` : 'N/A';
+
+  const calculateAverageServiceTime = (
+    currentWeekServiceTime: number,
+    lastWeekServiceTime: number,
+    currentWeekCalls: number,
+    lastWeekCalls: number,
+  ) => {
+    const currentWeekDenominator = currentWeekCalls > 0 ? currentWeekCalls : 1;
+    const lastWeekDenominator = lastWeekCalls > 0 ? lastWeekCalls : 1;
+    // Calcula el promedio en minutos directamente
+    const avgServiceTime = (currentWeekServiceTime / currentWeekDenominator - lastWeekServiceTime / lastWeekDenominator) / (1000 * 60);
+    const percentage = avgServiceTime / 100;
+
+    // Redondea avgServiceTime a dos decimales
+    const roundedAvgServiceTime = parseFloat(avgServiceTime.toFixed(2));
+
+    return roundedAvgServiceTime / 100;
+  };
+
+  const calculateServiceTime = (calls: ICall[]) => {
+    return calls.reduce((acc, call) => {
+      if (call.serviceStartTime && call.arrivalTime) {
+        const serviceTime = new Date().getTime() - call.serviceStartTime.getTime();
+        return acc + serviceTime;
+      }
+      return acc;
+    }, 0);
+  };
+
+  const calculateWaitTime = (calls: ICall[]) => {
+    return calls.reduce((acc, call) => {
+      if (call.serviceStartTime && call.arrivalTime) {
+        const waitTime = call.serviceStartTime.getTime() - call.arrivalTime.getTime();
+        return acc + waitTime;
+      }
+      return acc;
+    }, 0);
+  };
+  const calculateAverageWaitTime = (
+    currentWeekWaitTime: number,
+    lastWeekWaitTime: number,
+    currentWeekCalls: number,
+    lastWeekCalls: number,
+  ) => {
+    const currentWeekDenominator = currentWeekCalls > 0 ? currentWeekCalls : 1;
+    const lastWeekDenominator = lastWeekCalls > 0 ? lastWeekCalls : 1;
+    // Calcula el promedio en minutos directamente
+    const avgWaitTime = (currentWeekWaitTime / currentWeekDenominator - lastWeekWaitTime / lastWeekDenominator) / (1000 * 60);
+
+    // Redondea avgWaitTime a dos decimales
+    const roundedAvgWaitTime = parseFloat(avgWaitTime.toFixed(2));
+
+    return roundedAvgWaitTime;
+  };
+
+  Date.prototype.getWeek = function () {
+    var date = new Date(this.getTime());
+    date.setHours(0, 0, 0, 0);
+    date.setDate(date.getDate() + 4 - (date.getDay() || 7));
+    var yearStart = new Date(date.getFullYear(), 0, 1);
+    var weekNo = Math.ceil(((date.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+    return weekNo;
+  };
+  return (
+    <div className="elv-component elv-averageAttended">
+      <div
+        className={['averageAttended box is-flex is-gap-4 is-justify-content-space-between', `${className ? ' ' + className : ''}`].join(
+          '',
+        )}
+      >
+        {option?.map(item => (
+          <div className="averageAttended__option is-flex is-align-items-center is-fullw">
+            <div>
+              <Icon icon={item.icon} color={item.iconColor} className="is-size-1" />
+            </div>
+            <div className="is-flex is-flex-direction-column is-gap-4">
+              <div className="averageAttended__colorDark has-text-weight-semibold">{item.status}</div>
+              <div className="averageAttended__colorDark has-text-weight-bold is-size-3">{CallThisWeek}</div>
+              <div className="is-flex is-align-items-center">
+                <Badge
+                  text={`${averageCall < 0 ? item.labelButtom : item.labelTop}${averageCall.toString()}%`}
+                  color={item.color}
+                  colorText={`${averageCall < 0 ? item.colorText : item.colorTextPositive}`}
+                  className="badge"
+                />
+                <p className="ml-3 is-size-14px has-text-grey">{item.description}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {option2?.map(item => (
+          <div className="averageAttended__option is-flex is-align-items-center is-fullw">
+            <div>
+              <Icon icon={item.icon} color={item.iconColor} className="is-size-1" />
+            </div>
+            <div className="is-flex is-flex-direction-column is-gap-4">
+              <div className="averageAttended__colorDark has-text-weight-semibold">{item.status}</div>
+              {formattedWaitingTime !== null && (
+                <div className="averageAttended__colorDark has-text-weight-bold is-size-3">{`${formattedWaitingTime}${item.amountCall}`}</div>
+              )}
+
+              <div className="is-flex is-align-items-center">
+                <Badge
+                  text={`${averageWaitTime !== null && averageWaitTime < 0 ? item.labelButtom : item.labelTop}${
+                    averageWaitTime !== null && averageWaitTime.toFixed(1)
+                  }%`}
+                  color={item.color}
+                  colorText={averageWaitTime != null && averageWaitTime < 0 ? item.colorText : item.colorTextPositive}
+                  className="badge"
+                />
+                <p className="ml-3 is-size-14px has-text-grey">{item.description}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {option3?.map(item => (
+          <div className="averageAttended__option is-flex is-align-items-center is-fullw">
+            <div>
+              <Icon icon={item.icon} color={item.iconColor} className="is-size-1" />
+            </div>
+            <div className="is-flex is-flex-direction-column is-gap-4">
+              <div className="averageAttended__colorDark has-text-weight-semibold">{item.status}</div>
+              {formattedServiceTime !== null && (
+                <div className="averageAttended__colorDark has-text-weight-bold is-size-3">{`${formattedServiceTime}${item.amountCall}`}</div>
+              )}
+              <div className="is-flex is-align-items-center">
+                <Badge
+                  text={`${averageServiceTime != null && averageServiceTime < 0 ? item.labelButtom : item.labelTop}${
+                    averageServiceTime != null && averageServiceTime.toFixed(1)
+                  }%`}
+                  color={item.color}
+                  colorText={`${averageServiceTime != null && averageServiceTime < 0 ? item.colorText : item.colorTextPositive}`}
+                  className="badge"
+                />
+                <p className="ml-3 is-size-14px has-text-grey">{item.description}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/stories/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,45 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Breadcrumb} from './Breadcrumb';
+
+export default {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  args: {
+    defaultActiveLabel: 'Label 2',
+    items: [
+      {label: '', icon: 'fa-solid fa-house', onClick: () => console.log('1er Label Presionado')},
+      {label: 'Label 2', onClick: () => console.log('2do Label Presionado')},
+      {label: 'Label 3', onClick: () => console.log('3er Label Presionado')},
+      {label: 'Label 4', icon: 'fas fa-coffee', onClick: () => console.log('4to Label Presionado')},
+      {label: 'Label 5', onClick: () => console.log('5to Label Presionado')},
+    ],
+  },
+  argTypes: {type: {control: 'radio', options: ['not-lined', 'updown-lined', 'outlined', 'outlined-border', 'outlined-border-color']}},
+} as ComponentMeta<typeof Breadcrumb>;
+
+const Template: ComponentStory<typeof Breadcrumb> = args => <Breadcrumb {...args} />;
+
+export const NotLine = Template.bind({});
+NotLine.args = {
+  type: 'not-lined',
+};
+
+export const UpDownLine = Template.bind({});
+UpDownLine.args = {
+  type: 'updown-lined',
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  type: 'outlined',
+};
+
+export const OutlinedBorder = Template.bind({});
+OutlinedBorder.args = {
+  type: 'outlined-border',
+};
+
+export const OutlinedBorderColor = Template.bind({});
+OutlinedBorderColor.args = {
+  type: 'outlined-border-color',
+};

package/src/stories/Components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,68 @@
+import {useState} from 'react';
+import './breadcrumb.scss';
+import {shortenText} from '../../../utils/functions';
+
+export interface IBreadcrumb extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  type: string;
+  defaultActiveLabel?: string;
+  items: {
+    label?: string;
+    icon?: any;
+    onClick?: () => void;
+  }[];
+
+  // events
+  handleActive?: (itemActive: ItemValue) => void;
+
+  // react
+  className?: string;
+}
+
+export interface ItemValue {
+  label?: string;
+  icon?: any;
+  onClick?: () => void;
+}
+
+export const Breadcrumb = ({type, defaultActiveLabel, items, handleActive, className, ...props}: IBreadcrumb) => {
+  const itemActive = items.find(item => item.label === defaultActiveLabel);
+  const [activeStep, setActiveStep] = useState(itemActive);
+
+  const handleClick = (item: ItemValue) => {
+    setActiveStep(item);
+
+    if (handleActive) {
+      handleActive(item);
+    }
+
+    if (item.onClick) {
+      item.onClick();
+    }
+  };
+
+  return (
+    <div className="elv-component elv-nav_bc" {...props}>
+      <nav aria-label="nav_bc" className={`nav_bc nav_bc--${type} ${className ? className : ''}`}>
+        <ol className="bc-list">
+          {items.map((item, index) => (
+            <li key={item.label} className={`bc-item ${item === activeStep ? 'bc-item--active' : ''}`}>
+              <p
+                className="bc-item__bc-link"
+                onClick={() => {
+                  handleClick(item);
+                }}
+              >
+                {item.icon && item.icon !== '' && (
+                  <i className={`${item.icon} item-icon ${item.label && item.label !== '' ? '--and-label' : ''}`}></i>
+                )}
+                {item.label && item.label !== '' && shortenText(item.label, 25)}
+              </p>
+              {index < items.length - 1 && <i className="fa-solid fa-chevron-right bc-item__chebron"></i>}
+            </li>
+          ))}
+        </ol>
+      </nav>
+    </div>
+  );
+};

package/src/stories/Components/Breadcrumb/breadcrumb.scss

@@ -0,0 +1,82 @@
+@import '/src/sass/utilities/variables';
+
+/* =========================================== NAV (father div & types) ============================================== */
+.nav_bc {
+  display: inline-block;
+  min-width: 430px;
+  padding-right: 10px;
+  padding-left: 5px;
+
+  &--updown-lined {
+    border-top: 1px solid $primary-600;
+    border-bottom: 1px solid $primary-600;
+  }
+
+  &--outlined {
+    border: 1px solid $primary-600;
+    border-radius: 10px;
+  }
+
+  &--outlined-border {
+    border: 1px solid $primary-600;
+    border-radius: 25px;
+  }
+
+  &--outlined-border-color {
+    background-color: #e7f0ff;
+    border: 1px solid $primary-600;
+    border-radius: 25px;
+  }
+
+  /* =========================================== OL (items list) ============================================== */
+  .bc-list {
+    display: flex;
+    list-style: none;
+    flex-wrap: wrap;
+    padding-left: 0px;
+    margin: 15px;
+  }
+
+  /* =========================================== LI (items) ============================================== */
+  .bc-item {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    color: #737373;
+    cursor: pointer;
+
+    font-size: 14px;
+    line-height: 150%;
+
+    &--active {
+      color: $primary-600;
+    }
+
+    /* =========================================== LINK ============================================== */
+    &__bc-link {
+      align-items: center;
+      text-decoration: none;
+      text-align: center;
+
+      &:hover {
+        color: $primary-600;
+      }
+
+      .item-icon {
+        font-size: 16px;
+
+        &.--and-label {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    /* =========================================== CHEBRÓN ============================================== */
+    &__chebron {
+      color: $text-500;
+      margin-left: 15px;
+      margin-right: 15px;
+    }
+  }
+}

package/src/stories/Components/CTA/CTA.scss

@@ -0,0 +1,76 @@
+@import '/src/sass/utilities/variables';
+
+.elv-cta {
+  .cta {
+    min-height: 290px;
+    min-width: 320px;
+
+    background-color: $white;
+    border: 1px solid $text-300;
+    box-shadow: 0px 4px 8px rgba(14, 31, 53, 0.1), 0px 8px 16px rgba(14, 31, 53, 0.16), 0px 16px 28px -1px rgba(14, 31, 53, 0.1);
+    border-radius: 22px;
+    overflow: hidden;
+
+    &__principal {
+      max-width: 265px;
+      margin: 53px 48px;
+
+      .title {
+        font-size: 36px;
+        min-width: 230px;
+      }
+    }
+
+    &__items {
+      margin: 48px;
+      margin-left: 0px;
+      padding: 30px;
+
+      @media screen and (max-width: $mobile) {
+        margin: 0px;
+      }
+
+      .columns {
+        gap: 40px;
+
+        @media screen and (max-width: 1100px) {
+          flex-direction: column;
+        }
+
+        .item {
+          &__icon {
+            min-width: 48px;
+            height: 48px;
+            border-radius: 8px;
+            background-color: $primary-100;
+
+            .fa_icon {
+              font-size: 25px;
+              color: $text-800;
+            }
+
+            .svg_icon {
+              width: 25px;
+              fill: $text-800;
+            }
+          }
+
+          &__description {
+            margin-left: 24px;
+            color: $primary-600;
+            // max-width: 178px;
+
+            .title {
+              margin: 0;
+              color: $primary-600;
+            }
+
+            p {
+              max-width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/stories/Components/CTA/CTA.stories.tsx

@@ -0,0 +1,46 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {CTA} from './CTA';
+
+export default {
+  title: 'Components/CTA',
+  component: CTA,
+  args: {
+    title: 'Sugerencias y Quejas',
+    button: {
+      type: 'button',
+      color: 'primary',
+      size: 'medium',
+      fill: 'outline',
+      loading: false,
+      disabled: false,
+      label: 'Más información',
+      trailingIcon: true,
+      onClick: () => console.log('Button Clicked'),
+    },
+    items: [
+      {
+        icon: {icon: 'fa fa-home'},
+        title: 'Sugerencia',
+        description:
+          'Consejo, idea o propuesta presentada con el propósito de mejorar la prestación de un servicio o producto ofrecido por la D.G.R.',
+      },
+      {
+        icon: {icon: 'fa fa-home'},
+        title: 'Sugerencia',
+        description:
+          'Consejo, idea o propuesta presentada con el propósito de mejorar la prestación de un servicio o producto ofrecido por la D.G.R.',
+      },
+      {
+        icon: {icon: 'fa fa-home'},
+        title: 'Sugerencia',
+        description:
+          'Consejo, idea o propuesta presentada con el propósito de mejorar la prestación de un servicio o producto ofrecido por la D.G.R.',
+      },
+    ],
+  },
+} as ComponentMeta<typeof CTA>;
+
+const Template: ComponentStory<typeof CTA> = args => <CTA {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};