dgrcorrientes-modulos 1.0.3 → 1.0.4

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

@@ -1,311 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,82 +0,0 @@
-@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

@@ -1,76 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-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 = {};