dgrcorrientes-modulos 1.0.0

package/src/stories/Components/CompleteDiary/CompleteDiary.tsx

@@ -0,0 +1,394 @@
+import {useEffect, useRef, useState} from 'react';
+import {Button} from '../../Elements/Button/Button';
+import {Icon} from '../../Elements/Icon/Icon';
+import './CompleteDiary.scss';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import {Tooltip} from '../Tooltip/Tooltip';
+
+export interface ICompleteDiary {
+  // BASE
+  title?: string;
+  labelName?: string;
+  labelCuit?: string;
+  labelStatus?: string;
+  shifts: IShifts[];
+  changeDate?: string;
+  labelAll?: string;
+  labelPresent?: string;
+  labelMissing?: string;
+  labelCatered?: string;
+  iconText?: string;
+  scheduleRest: IScheduleRest;
+
+  // IS-OPTIONS
+  showDiary?: boolean;
+
+  // EVENTS
+  onCancel?: () => void;
+  onAttend?: () => void;
+  onEllipse?: () => void;
+  onDate?: (date: Date | null) => void;
+
+  // GENERIC
+  className?: string;
+}
+export interface IShifts {
+  hour?: number;
+  minute?: string;
+  name?: string;
+  cuit?: string;
+  status?: 'Presente' | 'Ausente' | 'Atendido';
+  colorBackgroundState?: string;
+  iconColor?: string;
+  showButton?: boolean;
+  colorBackground?: string;
+  menuDropComponent?: React.ReactNode;
+}
+
+interface IScheduleRest {
+  start: Date;
+  end: Date;
+}
+
+export const CompleteDiary = ({
+  title,
+  labelName,
+  labelCuit,
+  labelStatus,
+  iconText,
+  shifts,
+  changeDate,
+  labelAll,
+  labelPresent,
+  labelMissing,
+  labelCatered,
+  showDiary,
+  scheduleRest,
+  onCancel,
+  onAttend,
+  onEllipse,
+  onDate,
+  className,
+}: ICompleteDiary) => {
+  const [turnos, setTurnos] = useState(shifts);
+  const [filterState, setfilterState] = useState<string | null>(null);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+  const [quantitypresent, setquantitypresent] = useState<number>(0);
+  const [quantitymissing, setquantitymissing] = useState<number>(0);
+  const [quantitycatered, setquantitycatered] = useState<number>(0);
+  const [totalQuantity, settotalQuantity] = useState<number>(0);
+  const [menuExpanded, setMenuExpanded] = useState(false);
+  const [expandedTooltip, setExpandedTooltip] = useState(false);
+  const startTime = 8 * 60; // 8:00 AM en minutos
+  const endTime = 18 * 60; // 6:00 PM en minutos
+
+  const menuDropRef = useRef<HTMLDivElement>(null);
+  const tooltipMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      // Verificar si el primer menú está desplegado y el clic no ocurrió dentro de él
+      if (menuDropRef.current && menuExpanded) {
+        if (!menuDropRef.current.contains(event.target as Node)) {
+          setMenuExpanded(false);
+        }
+      }
+
+      // Verificar si el segundo menú está desplegado y el clic no ocurrió dentro de él
+      if (tooltipMenuRef.current && expandedTooltip) {
+        if (!tooltipMenuRef.current.contains(event.target as Node)) {
+          setExpandedTooltip(false);
+        }
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [menuDropRef, menuExpanded, tooltipMenuRef, expandedTooltip]);
+
+  const shiftsfilteredref = useRef<IShifts[]>([]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+  };
+
+  const currentHour = currentTime.getHours();
+  const currentMinutes = currentTime.getMinutes();
+  const totalMinutes = currentHour * 60 + currentMinutes;
+
+  const elapsedMinutes = totalMinutes - startTime;
+
+  const adjustedMinutes = elapsedMinutes >= 0 ? (elapsedMinutes <= endTime - startTime ? elapsedMinutes : elapsedMinutes % (24 * 60)) : 0;
+
+  const progress = (adjustedMinutes / (endTime - startTime)) * 100; // Usar el rango de 8 a 18 horas
+
+  const formatDate = (date: Date | null): string => {
+    if (!date) {
+      // Si la fecha es null, muestra la fecha actual
+      const currentDate = new Date();
+      const options: Intl.DateTimeFormatOptions = {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      };
+
+      return currentDate.toLocaleDateString('es-ES', options).replace('.', '');
+    }
+    const options: Intl.DateTimeFormatOptions = {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    };
+    return date.toLocaleDateString('es-ES', options).replace('.', '');
+  };
+
+  useEffect(() => {
+    // Filtrar los turnos cuando cambia el estado
+    const filterShifts = (turnos: IShifts[], estado: string | null) => {
+      switch (estado) {
+        case 'Presente':
+          return turnos.filter(turno => turno.status === 'Presente');
+        case 'Ausente':
+          return turnos.filter(turno => turno.status === 'Ausente');
+        case 'Atendido':
+          return turnos.filter(turno => turno.status === 'Atendido');
+        default:
+          return turnos;
+      }
+    };
+
+    const shiftsFiltered = filterShifts(turnos, filterState);
+    shiftsfilteredref.current = shiftsFiltered;
+
+    // Calcular la cantidad por estado y total
+    let present = 0;
+    let missing = 0;
+    let catered = 0;
+
+    turnos?.forEach(turno => {
+      switch (turno.status) {
+        case 'Presente':
+          present += 1;
+          break;
+        case 'Ausente':
+          missing += 1;
+          break;
+        case 'Atendido':
+          catered += 1;
+          break;
+        default:
+          break;
+      }
+    });
+
+    setquantitypresent(present);
+    setquantitymissing(missing);
+    setquantitycatered(catered);
+    settotalQuantity(turnos.length);
+  }, [turnos, filterState]);
+
+  const addshiftInCurrentSchedule = (hour: number, minute: string) => {
+    const shiftInCurrentSchedule = shiftsfilteredref.current.find(item => item.hour === hour && item.minute === minute);
+
+    if (shiftInCurrentSchedule) {
+      return (
+        <div
+          key={`${hour}:${minute}`}
+          className="completediary__item is-flex is-align-items-center is-gap-5"
+          style={{backgroundColor: shiftInCurrentSchedule.colorBackground}}
+        >
+          <div className="container is-flex is-fullw">
+            <div className="info has-text-weight-semibold is-fullw">{shiftInCurrentSchedule.name}</div>
+            <div className="info is-fullw">{shiftInCurrentSchedule.cuit}</div>
+            <div
+              className="info completediary__status is-flex is-align-items-center"
+              style={{backgroundColor: shiftInCurrentSchedule.colorBackgroundState}}
+            >
+              <Icon icon="fa-solid fa-circle" color={shiftInCurrentSchedule.iconColor} className="mr-2 is-size-7" />
+              <p className="has-text-light is-size-7">{shiftInCurrentSchedule.status}</p>
+            </div>
+          </div>
+
+          <div className="completediary__buttons is-flex is-align-items-center is-gap-4">
+            <div>
+              <Button
+                label="Cancelar"
+                fill="outline"
+                icon="fa-solid fa-xmark"
+                color="secondary"
+                trailingIcon={true}
+                className={`is-size-7 ${shiftInCurrentSchedule.showButton ? '' : 'is-invisible'}`}
+                onClick={() => onCancel && onCancel()}
+              />
+            </div>
+            <div>
+              <Button
+                label="Atender"
+                fill="solid"
+                icon="fa-solid fa-arrow-right-to-bracket"
+                trailingIcon={true}
+                className={`is-size-7 ${shiftInCurrentSchedule.showButton ? '' : 'is-invisible'}`}
+                onClick={() => onAttend && onAttend()}
+              />
+            </div>
+            <div
+              ref={menuDropRef}
+              className="is-relative"
+              onClick={() => {
+                setMenuExpanded(!menuExpanded);
+                onEllipse && onEllipse();
+              }}
+            >
+              <Icon
+                icon="fa-solid fa-ellipsis-vertical"
+                className={`icon_ellipsis  ${shiftInCurrentSchedule.showButton ? '' : 'is-invisible'}`}
+              />
+              {shiftInCurrentSchedule.menuDropComponent && menuExpanded && (
+                <div className="completediary__dropComponent is-absolute">{shiftInCurrentSchedule.menuDropComponent}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return <div style={{backgroundColor: '#CED4DA4D', height: '69px', borderRadius: '4px', border: '1px solid #E5E5E5'}}></div>;
+  };
+
+  return (
+    <div className="elv-component elv-completediary">
+      <div className={['completediary__head is-flex is-flex-direction-column is-gap-5', `${className ? ' ' + className : ''}`].join('')}>
+        {showDiary && <div className="has-text-grey-dark has-text-weight-bold is-size-3">{title}</div>}
+
+        <div className="completediary__head--breakpoint is-flex is-align-items-center is-justify-content-space-between ">
+          <div className="is-flex is-align-items-center is-gap-4">
+            <p className="is-size-7 has-text-weight-medium">{changeDate}</p>
+            <div>
+              <DatePicker
+                selected={selectedDate}
+                onChange={(date: Date | null) => {
+                  setSelectedDate(date), onDate && onDate(date);
+                }}
+                customInput={
+                  <div className="is-flex datePickerStyles">
+                    <span className="has-text-grey-dark">{formatDate(selectedDate)}</span>
+                    <Icon icon="fa-solid fa-chevron-up" className={`ml-3 rotateIcon `} />
+                  </div>
+                }
+              />
+            </div>
+          </div>
+          <div className="completediary__head__filters is-flex is-align-items-center is-size-7 is-gap-4">
+            <div className={`completediary__head__filter ${filterState === null ? 'filter' : ''}`} onClick={() => setfilterState(null)}>
+              {`${labelAll} (${totalQuantity})`}
+            </div>
+            <div
+              className={`completediary__head__filter ${filterState === 'Presente' ? 'filter' : ''}`}
+              onClick={() => setfilterState('Presente')}
+            >
+              {`${labelPresent} (${quantitypresent})`}
+            </div>
+            <div
+              className={`completediary__head__filter ${filterState === 'Ausente' ? 'filter' : ''}`}
+              onClick={() => setfilterState('Ausente')}
+            >
+              {`${labelMissing} (${quantitymissing})`}
+            </div>
+            <div
+              className={`completediary__head__filter ${filterState === 'Atendido' ? 'filter' : ''}`}
+              onClick={() => setfilterState('Atendido')}
+            >
+              {`${labelCatered} (${quantitycatered})`}
+            </div>
+          </div>
+        </div>
+        <div className="completediary is-flex px-5 pt-5 is-flex-direction-column box">
+          <div className="container is-flex is-size-7 has-text-grey-dark m-0 is-align-items-center is-justify-content-space-around">
+            <div className="completediary__label">{labelName}</div>
+            <div className="completediary__label">{labelCuit}</div>
+            <div className="completediary__label is-flex is-align-items-center">
+              <p className="completediary__statu">{labelStatus}</p>
+              <div
+                ref={tooltipMenuRef}
+                className="completediary__icontooltip is-relative"
+                onClick={() => {
+                  setExpandedTooltip(!expandedTooltip);
+                }}
+              >
+                <Icon icon="fa-solid fa-circle-info" className="iconState ml-2 completediary__label" />
+                {expandedTooltip && (
+                  <Tooltip active contentType="text" text={iconText} trianglePos="none" className="completediary__tooltip is-absolute" />
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="completediary__time time-bar is-flex is-flex-direction-column is-align-items-center is-fullw is-relative">
+            <div className="time-range is-flex  is-flex-direction-column-reverse is-size-7 has-text-weight-semibold is-gap-4 is-fullw">
+              {Array.from({length: 22}, (_, index) => {
+                const hour = Math.floor(index / 2) + 8;
+                const minute = index % 2 === 0 ? '00' : '30';
+                const showTime =
+                  hour < 18 || (hour === 18 && minute === '00') || (hour === 8 && minute === '00' && elapsedMinutes >= 24 * 60);
+
+                // Crear un objeto Date para el tiempo actual
+                const currentTime = new Date();
+                currentTime.setHours(hour, parseInt(minute));
+
+                // Verificar si el tiempo actual está dentro del horario de descanso
+                const restSchedule = currentTime >= scheduleRest.start && currentTime < scheduleRest.end;
+
+                // Mostrar el espacio de descanso en lugar de los turnos si es un horario de descanso
+                if (restSchedule) {
+                  return (
+                    showTime &&
+                    hour < 18 && (
+                      <div key={index} className="time-label is-flex is-gap-4">
+                        <span className="time" style={{color: '#16A34A'}}>{`${hour}:${minute} h`}</span>
+                        <div className="is-fullw">
+                          <div style={{backgroundColor: '#ECFDF5', height: '66px', borderRadius: '4px', border: '1px solid #E5E5E5'}}></div>
+                        </div>
+                      </div>
+                    )
+                  );
+                }
+
+                const turnosEnHorario = shiftsfilteredref.current.filter(turno => turno.hour === hour && turno.minute === minute);
+
+                return (
+                  // Mostrar solo las horas hasta las 18:00
+                  showTime &&
+                  hour < 18 && (
+                    <div key={index} className="time-label is-flex is-gap-4 ">
+                      <span className="time">{`${hour}:${minute} h`}</span>
+                      <div className={`is-fullw`}> {addshiftInCurrentSchedule(hour, minute)}</div>
+                    </div>
+                  )
+                );
+              }).reverse()}
+            </div>
+            <div
+              className="current-time is-flex is-absolute is-align-items-center is-justify-content-center"
+              style={{top: `${Math.max(0, Math.min(progress, 100))}%`}}
+            >
+              {/* <span>{formatTime(currentTime)}</span> */}
+              <Icon icon="fa-solid fa-circle" className="icon-time is-absolute" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Components/Dropdown/Dropdown.scss

@@ -0,0 +1,60 @@
+@import '/src/sass/utilities/variables';
+
+.elv-dropdown {
+  .e-dropdown {
+    min-width: 250px;
+    max-width: max-content;
+    box-shadow: 0px 14px 24px rgba(20, 23, 38, 0.12);
+    border-radius: 16px;
+    z-index: 100;
+
+    display: none;
+
+    position: absolute;
+    top: 100%;
+
+    &--left {
+      left: 0;
+    }
+
+    &--center {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &--right {
+      right: 0;
+    }
+
+    &--active {
+      display: block;
+    }
+
+    .dropdown__list {
+      list-style: none;
+      font-weight: $fw-semibold;
+      color: $text-900;
+
+      .list__item {
+        border-radius: 15px;
+        gap: 10px;
+
+        &--active {
+          background-color: $muted-300;
+
+          .item__icon {
+            color: $primary-600;
+          }
+        }
+
+        &--default {
+          color: $text-500;
+        }
+
+        &:hover {
+          background-color: $muted-300;
+        }
+      }
+    }
+  }
+}

package/src/stories/Components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,19 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Dropdown} from './Dropdown';
+
+export default {
+  title: 'Elements/Dropdown',
+  component: Dropdown,
+  args: {
+    position: 'left',
+    options: [{label: 'Opcion 1', icon: {icon: 'fas fa-user'}}, {label: 'Opcion 2'}, {label: 'Opcion 3'}],
+  },
+} as ComponentMeta<typeof Dropdown>;
+
+const Template: ComponentStory<typeof Dropdown> = args => <Dropdown {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {trigger: {label: 'Trigger'}};
+
+export const NoTrigger = Template.bind({});
+NoTrigger.args = {visible: false};

package/src/stories/Components/Dropdown/Dropdown.tsx

@@ -0,0 +1,99 @@
+import {useEffect, useRef, useState} from 'react';
+import {Button, IButton} from '../../Elements/Button/Button';
+import {Icon, IIcon} from '../../Elements/Icon/Icon';
+import './Dropdown.scss';
+import {generateRandomKey} from '../../../utils/functions';
+
+export interface IDropdown extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  trigger?: IButton;
+  options?: {label: string; icon?: IIcon; onClick?: () => void}[];
+  position?: 'left' | 'center' | 'right';
+
+  // boolean
+  visible?: boolean;
+
+  // events
+  onClick?: () => void;
+
+  // react
+  className?: string;
+}
+
+export const Dropdown = ({trigger, options, position, visible, className, onClick, ...props}: IDropdown) => {
+  const [activeState, setActiveState] = useState(visible ? visible : false);
+
+  // =============================== REF USER ===============================
+  const dropRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropRef.current && !dropRef.current.contains(event.target as Node)) {
+        setActiveState(false);
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [dropRef]);
+
+  return (
+    <div className="elv-component elv-dropdown" {...props}>
+      {trigger ? (
+        <div className="is-relative is-inline-block" ref={dropRef}>
+          <Button
+            {...trigger}
+            onClick={() => {
+              setActiveState(!activeState);
+            }}
+          />
+          <div
+            className={[
+              `e-dropdown has-background-white`,
+              `${activeState ? ' e-dropdown--active' : ''}`,
+              `${position ? ' e-dropdown--' + position : ''}`,
+              `${className ? ' ' + className : ''}`,
+            ].join('')}
+          >
+            <ul className={['dropdown__list', ' has-text-weight-semibold', ' p-1'].join('')}>
+              {options?.map((item, index) => (
+                <li
+                  key={index + generateRandomKey()}
+                  className={[`list__item`, ` is-clickable`, ' is-flex is-align-items-center', ' py-4 px-2'].join('')}
+                  onClick={() => item.onClick && item.onClick()}
+                >
+                  {item.icon && <Icon {...item.icon} />}
+                  {item.label}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      ) : (
+        <div
+          className={[
+            `e-dropdown has-background-white`,
+            `${visible ? ' e-dropdown--active' : ''}`,
+            `${position ? ' e-dropdown--' + position : ''}`,
+            `${className ? ' ' + className : ''}`,
+          ].join('')}
+        >
+          <ul className="dropdown__list p-1">
+            {options?.map((item, index) => (
+              <li
+                key={index}
+                className={[`list__item`, ` is-clickable`, ' is-flex is-align-items-center', ' py-4 px-2'].join('')}
+                onClick={() => item.onClick && item.onClick()}
+              >
+                {item.icon && <Icon {...item.icon} />}
+                {item.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/stories/Components/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {EmptyState} from './EmptyState';
+
+export default {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  args: {
+    orientation: 'horizontal',
+    img: 'https://image.shutterstock.com/image-vector/electric-power-plug-holding-hand-260nw-530773483.jpg',
+    error: 'Error 404',
+    title: 'No podemos realizar la acción que intentas hacer',
+    description:
+      'Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.',
+    buttonsActive: false,
+
+    button: [
+      {
+        label: 'Button',
+        size: 'normal',
+        color: 'primary',
+        fill: 'solid',
+        loading: false,
+        disabled: false,
+        leadingIcon: false,
+        type: 'button',
+        onClick: () => console.log('Button Clicked'),
+      },
+      {
+        label: 'Button',
+        size: 'normal',
+        color: 'primary',
+        fill: 'link',
+        loading: false,
+        disabled: false,
+        type: 'button',
+        onClick: () => console.log('Button Clicked'),
+      },
+    ],
+  },
+} as ComponentMeta<typeof EmptyState>;
+
+const Template: ComponentStory<typeof EmptyState> = args => <EmptyState {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

package/src/stories/Components/EmptyState/EmptyState.tsx

@@ -0,0 +1,44 @@
+import {shortenText} from '../../../utils/functions';
+import './emptyState.scss';
+import {Button, IButton} from '../../Elements/Button/Button';
+
+export interface IEmptyState extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  orientation: 'horizontal' | 'vertical';
+  img: string;
+  error: string;
+  title: string;
+  description: string;
+  button: IButton[];
+
+  // boolean
+  buttonsActive: boolean;
+
+  // react
+  className?: string;
+}
+
+export const EmptyState = ({orientation, img, error, title, description, className, buttonsActive, button, ...props}: IEmptyState) => {
+  return (
+    <div className={`elv-component elv-e-state ${className ? className : ''}`} {...props}>
+      <div className={`e-state ${orientation === 'vertical' ? 'e-state--vertical' : ''}`}>
+        <div className="e-state__img-container">
+          <img src={img} alt="" />
+        </div>
+        <div className="e-state__body">
+          <div className="text-container">
+            <p className="error">{error}</p>
+            <p className="title is-4">{title}</p>
+            <p className="description is-5">{description}</p>
+          </div>
+          {buttonsActive && (
+            <div className="buttons-container">
+              {button[0] && <Button isFullWidth={true} {...button[0]} />}
+              {button[1] && <Button isFullWidth={true} {...button[1]} />}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};