dgrcorrientes-modulos 1.0.0

package/src/stories/Components/CollapseEdit/CollapseEdit.tsx

@@ -0,0 +1,185 @@
+import './CollapseEdit.scss';
+import {Checkbox, ICheckbox} from '../../Form/Checkbox/Checkbox';
+import {IInput, Input} from '../../Form/Input/Input';
+import {Button, IButton} from '../../Elements/Button/Button';
+import {StrictMode, useState} from 'react';
+
+export interface ICollapseEdit extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // BASE
+  labelDescription: string;
+  checkbox?: ICheckbox;
+  input?: IInput;
+  inputAmount?: IInput;
+  buttonRecalculate?: IButton;
+  buttonCancel?: IButton;
+  buttonSave?: IButton;
+  priceTopEdit?: {labelImpost?: string; labelNumberI?: number};
+  priceBottomEdit?: {labelAliquot?: string; labelNumberA?: number};
+
+  // IS-OPTIONS
+  showAmountinEdit?: boolean;
+
+  // EVENTS
+  onCantidadChange?: (newValue: string) => void;
+  onSaveData?: (Data: IDataPrice) => void;
+  // GENERIC
+  className?: string;
+}
+export interface IDataPrice {
+  calculatedtax: number;
+  aliquot: number;
+}
+
+export const CollapseEdit = ({
+  labelDescription,
+  checkbox,
+  input,
+  inputAmount,
+  buttonRecalculate,
+  buttonCancel,
+  className,
+  priceTopEdit,
+  priceBottomEdit,
+  onCantidadChange,
+  onSaveData,
+  showAmountinEdit,
+  ...props
+}: ICollapseEdit) => {
+  const [quantity, setquantity] = useState(0);
+  const [taxableamount, settaxableamount] = useState(0);
+  const [isChecked, setIsChecked] = useState(true);
+  const [tax, setTax] = useState(priceTopEdit?.labelNumberI);
+
+  const handleCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
+  const submitData = () => {
+    if (showAmountinEdit) {
+      onSaveData &&
+        onSaveData({
+          calculatedtax:
+            quantity && taxableamount && priceBottomEdit?.labelNumberA ? quantity * taxableamount * priceBottomEdit?.labelNumberA : 0,
+
+          aliquot: priceBottomEdit?.labelNumberA ? priceBottomEdit.labelNumberA : 0,
+        });
+    } else {
+      onSaveData &&
+        onSaveData({
+          calculatedtax: taxableamount && priceBottomEdit?.labelNumberA ? taxableamount * priceBottomEdit?.labelNumberA : 0,
+
+          aliquot: priceBottomEdit?.labelNumberA ? priceBottomEdit.labelNumberA : 0,
+        });
+    }
+  };
+
+  return (
+    <div className="elv-component elv-collapsedit" {...props}>
+      <div
+        className={[
+          'collapsedit box is-flex is-align-items-center px-4 py-2 has-background-white',
+          `${className ? ' ' + className : ''}`,
+        ].join('')}
+      >
+        <div className="collapsedit__breakpoint4 is-flex is-align-items-center justify-content-space-between is-fullw ">
+          <div className="collapsedit__breakpoint3 is-align-items-center is-flex is-fullw ">
+            <div className="collapsedit__breakpoint2 is-flex is-align-items-center is-gap-4">
+              <div className="collapsedit__breakpoint1 is-flex is-align-items-center is-gap-4">
+                <div className="collapsedit__desc-cont is-flex is-gap-4 mr-4 is-align-items-center">
+                  <div className="collapsedit__desc has-text-grey-dark is-size-14px">{labelDescription}</div>
+                  <div className="collapsedit__check is-size-14px">
+                    {checkbox && <Checkbox {...checkbox} onCheck={handleCheckboxChange} className="" />}
+                  </div>
+                </div>
+
+                <div className="collapsedit__input">
+                  {showAmountinEdit && (
+                    <>
+                      {input && (
+                        <Input
+                          {...input}
+                          isDisabled={!isChecked}
+                          className=""
+                          onChangeInput={e => {
+                            setquantity(Number.parseInt(e.target.value));
+                          }}
+                        />
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+
+              <div className="collapsedit__inputAmount mr-4 ">
+                {inputAmount && (
+                  <Input
+                    {...inputAmount}
+                    isDisabled={!isChecked}
+                    onChangeInput={e => {
+                      settaxableamount(Number.parseInt(e.target.value));
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+
+            <div className="collapsedit__taxes is-flex is-gap-4">
+              {priceBottomEdit && (
+                <div className="collapsedit__bottom is-flex is-flex-direction-column is-align-items-flex-end">
+                  <div className="is-size-14px has-text-grey-dark">{priceBottomEdit.labelNumberA}</div>
+                  <div className="is-size-10px has-text-grey-light">{priceBottomEdit.labelAliquot}</div>
+                </div>
+              )}
+
+              {priceTopEdit && (
+                <div className="collapsedit__top is-flex is-flex-direction-column is-align-items-flex-end">
+                  <div className="is-size-14px has-text-grey-dark">$ {tax}</div>
+                  <div className="is-size-10px has-text-grey-light">{priceTopEdit.labelImpost}</div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="collapsedit__buttonCont is-flex is-gap-3 is-align-items-center">
+            <div className="">
+              {buttonRecalculate && (
+                <Button
+                  {...buttonRecalculate}
+                  className="collapsedit__buttonRec is-size-14px"
+                  onClick={() => {
+                    if (showAmountinEdit) {
+                      setTax(
+                        quantity && taxableamount && priceBottomEdit?.labelNumberA
+                          ? quantity * taxableamount * priceBottomEdit?.labelNumberA
+                          : 0,
+                      );
+                    } else {
+                      setTax(taxableamount && priceBottomEdit?.labelNumberA ? taxableamount * priceBottomEdit?.labelNumberA : 0);
+                    }
+                  }}
+                />
+              )}
+            </div>
+            <div className="collapsedit__button is-flex is-gap-4 is-align-items-center ">
+              <div className="button-cancel ml-4">
+                {buttonCancel && <Button {...buttonCancel} isFullWidth={true} className="has-text-danger is-full-tablet is-size-14px" />}
+              </div>
+              <div className="button-save">
+                <Button
+                  fill={'solid'}
+                  color={'primary'}
+                  size={'normal'}
+                  label={'Guardar'}
+                  className="button-save- is-size-14px"
+                  isFullWidth={true}
+                  onClick={() => {
+                    submitData();
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Components/CompleteDiary/CompleteDiary.scss

@@ -0,0 +1,165 @@
+@import '/src/sass/utilities/variables';
+
+.elv-completediary{
+  .completediary__head{
+
+    .datePickerStyles{
+      cursor: pointer;
+      border: 1px solid  $truegray-400;
+      padding: 2px 15px;
+      border-radius: 4px;
+    }
+    .rotateIcon{
+      rotate: 180deg;
+    }
+    &__filters{
+      color: $truegray-600;
+      flex-wrap: wrap;
+      
+    }
+    &__filter{
+      cursor: pointer;
+      padding: 0px 12px;
+      box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+      border-radius: 100px;
+
+      @media (max-width: 750px){
+        flex: 1 1 40%; /* Ocupa la mitad del ancho disponible (2 elementos por fila) */
+        text-align: center;
+      }
+    }
+    .filter{
+      background-color: $truegray-600;
+      color: $white;
+    }
+    &--breakpoint{
+      @media (max-width: 750px){
+        flex-direction: column;
+        gap: 24px;
+      }
+    }
+  }
+  
+    .completediary{
+        border-radius: 16px;
+        gap: 30px;
+        
+        @media (max-width: 880px){
+          padding: 16px 0px 16px 0px !important;
+          gap: 0px;
+          box-shadow: none;
+        }
+       
+        &__item{
+            border-radius: 4px;
+            border-left: 4px solid $primary-600;
+            box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+            @media (max-width: 750px){
+              padding: 12px !important;
+            }
+        }
+
+       &__status{
+        height: 22px;
+        max-width: 75px;
+        min-width: 75px;
+        border-radius: 100px;
+        padding: 1px 10px;
+       }
+
+       &__buttons{
+        @media (max-width: 650px){
+          gap: 10px !important;
+          flex-direction: column;
+        }
+       }
+
+       &__dropComponent{
+        right: -10px;
+        bottom: -105px;
+        z-index: 100;
+       }
+
+       .iconState{
+        color: $truegray-500;
+       }
+
+       .icon_ellipsis{
+        cursor: pointer;
+        color: $truegray-600;
+        @media (max-width: 650px){
+          rotate: 90deg;
+        }
+       }
+
+       .container {
+        flex-wrap: wrap;
+      }
+
+      
+       .info {
+         flex: 1 1 calc(33.33% - 0px); /* Tres columnas con espacio entre ellas */
+       }
+
+       &__tooltip{
+        right: -10px;
+        bottom: -105px;
+        z-index: 100;
+       }
+
+       &__icontooltip{
+        cursor: pointer;
+       }
+
+       &__item{
+        padding: 19px;
+       }
+
+      
+       @media (max-width: 880px) {
+        &__label{
+           display: none;
+        } 
+        &__statu{
+            display: none;
+        }
+        .info {
+          flex: 1 1 100%; /* Una columna en resoluciones pequeñas */
+          margin-left: 0px;
+          margin-bottom: 10px;
+        }
+      }
+    
+    .time-label {
+      flex: 1;
+      @media (max-width: 750px){
+        gap: 0px !important;
+      }
+    }
+    .time{
+      min-width: 45px;
+    }
+    
+    .current-time {
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: $black;
+      z-index: 2;
+      pointer-events: none;
+      color: $black;
+      font-weight: bold;
+
+      @media (max-width: 880px){
+        display: none !important;
+      
+      }
+    }
+
+    .icon-time{
+      top: 1;
+      left: 0;
+    }
+    
+    }
+}

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

@@ -0,0 +1,219 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {CompleteDiary} from './CompleteDiary';
+import {Tooltip} from '../Tooltip/Tooltip';
+
+export default {
+  title: 'Components/CompleteDiary',
+  component: CompleteDiary,
+  args: {
+    title: 'Agenda',
+    labelName: 'Nombre',
+    labelCuit: 'CUIT',
+    labelStatus: 'Estado',
+    iconText: 'Usá esta Base Imponible para tu declaración de Bienes Personales 2023',
+    changeDate: 'Cambiar la fecha',
+    labelAll: 'Todos',
+    labelPresent: 'Presentes',
+    labelMissing: 'Ausentes',
+    labelCatered: 'Atendidos',
+    showDiary: true,
+    // turnosEnHorarioActual: [
+    //   {
+    //     hour: 9,
+    //     minute: '30',
+    //     turno: {
+    //       name: 'Gallardo, Teresa',
+    //       cuit: '20-33753951-8',
+    //       status: 'Atendido',
+    //       colorBackgroundState: '#059669',
+    //       iconColor: '#34D399',
+    //       colorBackground: ' #EEE',
+    //     },
+    //   },
+
+    //   {
+    //     //hour: 10,
+    //     //minute: '30',
+    //     turno: {
+    //       name: 'Gallardo, Teresa',
+    //       cuit: '20-33753951-8',
+    //       status: 'Atendido',
+    //       colorBackgroundState: '#059669',
+    //       iconColor: '#34D399',
+    //       colorBackground: ' #EEE',
+    //     },
+    //   },
+    // ],
+    shifts: [
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Atendido',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 8,
+        minute: '00',
+      },
+      {
+        name: 'López, Damián',
+        cuit: '20-33753951-8',
+        status: 'Atendido',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 8,
+        minute: '30',
+      },
+      {
+        name: 'Rosas, Juan Manuel',
+        cuit: '20-33753951-8',
+        status: 'Ausente',
+        colorBackgroundState: '#EA580C',
+        iconColor: '#FFF7ED',
+        colorBackground: ' #EEE',
+        hour: 9,
+        minute: '00',
+      },
+      {
+        name: 'Castro, Julieta',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#124596',
+        iconColor: '#FFF7ED',
+        showButton: true,
+        colorBackground: '#FFF',
+        menuDropComponent: (
+          <Tooltip
+            active
+            contentType="text"
+            text="Usá esta Base Imponible para tu declaración de Bienes Personales 2023"
+            trianglePos="none"
+          />
+        ),
+        hour: 10,
+        minute: '00',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 10,
+        minute: '30',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 10,
+        minute: '30',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 11,
+        minute: '00',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 11,
+        minute: '30',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 12,
+        minute: '00',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 12,
+        minute: '30',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 13,
+        minute: '00',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 13,
+        minute: '30',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 14,
+        minute: '00',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 14,
+        minute: '30',
+      },
+      {
+        name: 'Gallardo, Teresa',
+        cuit: '20-33753951-8',
+        status: 'Presente',
+        colorBackgroundState: '#059669',
+        iconColor: '#34D399',
+        colorBackground: ' #EEE',
+        hour: 15,
+        minute: '00',
+      },
+    ],
+    onCancel: () => console.log('clicked button cancel'),
+    onAttend: () => console.log('clicked button Attend'),
+    onEllipse: () => console.log('clicked button Ellipse'),
+    onDate: data => console.log(data),
+    scheduleRest: {start: new Date('2023-12-12T13:00:00'), end: new Date('2023-12-12T14:30:00')},
+  },
+} as ComponentMeta<typeof CompleteDiary>;
+
+const Template: ComponentStory<typeof CompleteDiary> = args => <CompleteDiary {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};