imbric-theme 0.1.7 → 0.1.9

package/atoms/AlertModal/AlertModal.js

@@ -58,8 +58,8 @@ AlertModal.defaultProps = {
   getStyles: () => { },
   onConfirm: () => { },
   // onDismiss: () => {}, // Not default for use onConfirm if is undefined
-  titleAlert: 'Felicidades!',
-  subTitleAlert: 'Todo ha ido correctamente',
+  titleAlert: '',
+  subTitleAlert: '',
   txtBtnAlert: 'Ok',
   txtBtnAlertCancel: 'Cancelar',
   iconAlert: 'success',

package/atoms/Input/Input.js

@@ -21,6 +21,7 @@ export const Input = ({
   isInlineCode,
   isInputFilter,
   isInputSecondary,
+  isDate,
   onChange,
   onFocus,
   onBlur,
@@ -69,6 +70,7 @@ export const Input = ({
             'is-inline-code': isInlineCode,
             'is-input-filter': isInputFilter,
             'is-input-secondary': isInputSecondary,
+            'is-date': isDate,
           })}
           readOnly={readonly}
           type={type}
@@ -102,6 +104,7 @@ export const Input = ({
               'is-inline-code': isInlineCode,
               'is-input-filter': isInputFilter,
               'is-input-secondary': isInputSecondary,
+              'is-date': isDate,
             })}
             readOnly={readonly}
             type={type}
@@ -142,6 +145,7 @@ export const Input = ({
             'is-inline-code': isInlineCode,
             'is-input-filter': isInputFilter,
             'is-input-secondary': isInputSecondary,
+            'is-date': isDate,
           })}
           readOnly={readonly}
           type={type}
@@ -185,6 +189,7 @@ Input.propTypes = {
   isInlineCode: PropTypes.bool,
   isInputFilter: PropTypes.bool,
   isInputSecondary: PropTypes.bool,
+  isDate: PropTypes.bool,
   isViewIcon: PropTypes.bool,
   idIcon: PropTypes.string,
   nameIcon: PropTypes.string,
@@ -210,6 +215,7 @@ Input.defaultProps = {
   isInlineCode: false,
   isInputFilter: false,
   isInputSecondary: false,
+  isDate: false,
   onChange: () => { },
   onFocus: () => { },
   onBlur: () => { },

package/atoms/Input/Input.module.css

@@ -80,4 +80,9 @@
 .box-icon-input {
   display: flex;
   align-items: center;
+}
+
+.is-date {
+  width: 85px;
+  padding: 10px 6px;
 }

package/layout/DynamicTable/DynamicTable.js

@@ -7,10 +7,13 @@ import DynamicSelect from '../../molecules/DynamicSelect'
 import DatePicker from '../../molecules/DatePicker'
 import Label from '../../atoms/Label'
 import Icon from '../../atoms/Icon'
+import Paragraph from '../../atoms/Paragraph'
 import Button from '../../atoms/Button'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 import ReactTooltip from 'react-tooltip'
-import Heading from '../../atoms/Heading/Heading'
+import Checkbox from '../../atoms/Checkbox/Checkbox'
+
+
 
 
 export const DynamicTable = ({
@@ -22,6 +25,7 @@ export const DynamicTable = ({
   isLayoutDate,
   isViewRange,
   isViewTitleTable,
+  isViewTitleTableSecundary,
   isViewAddColumn,
   isViewFilterTable,
   isViewBtn,
@@ -41,6 +45,7 @@ export const DynamicTable = ({
   handleAddColumn,
   handleFilterTable,
   handleSelectRange,
+  handleSelectRangeSecundary,
   handleDownloadExcel,
   handleDefaultValue,
   handleDefaultValueFilter,
@@ -52,8 +57,12 @@ export const DynamicTable = ({
   isLoadingDinamicSelectFilter,
   labelSinceDateRange,
   labelTillDateRange,
+  labelSinceDateRangeSecundary,
+  labelTillDateRangeSecundary,
   txtTootipFileDownload,
   titleHeadingTable,
+  titleHeadingTableSecundary,
+  handleChangeCheckboxDate,
 }) => {
 
   const [tableData, setTableData] = useState(optionsData);
@@ -65,6 +74,9 @@ export const DynamicTable = ({
   // STATE TOOLTIP
   const [isToolTipMounted, setIsToolTipMounted] = useState(false)
 
+  const [dataCheckboxCheckboxDate, setCheckboxCheckboxDate] = useState(false)
+  const [dataDisabledDate, setDisabledDate] = useState(true)
+
   // TOOLTIP
   const handleMouseEnter = () => {
     setIsToolTipMounted(true)
@@ -91,7 +103,19 @@ export const DynamicTable = ({
       });
       setTableData(sorted);
     }
-  };
+  }
+
+  const handleChangeCheckboxDateMy = (op) => {
+
+    if (op.target.checked) {
+      setCheckboxCheckboxDate(true)
+      setDisabledDate(false)
+    } else {
+      setCheckboxCheckboxDate(false)
+      setDisabledDate(true)
+    }
+
+  }
 
   return (
 
@@ -102,19 +126,35 @@ export const DynamicTable = ({
       <div className={getStyles('opFunctionBoxTotal2')}>
 
         {isViewTitleTable ? (
+
+          <>
+
+            <div className={getStyles('opFunctionBox1')}>
+
+              <Paragraph weight="semibold" size="md">{titleHeadingTable}</Paragraph>
+
+            </div>
+
+            <Horizontal size="sm" />
+
+          </>
+
+        ) : null}
+
+        {isViewTitleTableSecundary ? (
           <div className={getStyles('opFunctionBox1')}>
-            <Heading
-              size="sm"
-            >
-              {titleHeadingTable}
-            </Heading>
+
+            <Paragraph weight="semibold" size="md">{titleHeadingTableSecundary}</Paragraph>
+
           </div>
         ) : null}
 
+
         {isViewLeftBtn ? (
 
           <>
 
+            <Horizontal size="sm" />
             <div className={getStyles('opFunctionBox3')}>
 
               <Button
@@ -126,10 +166,11 @@ export const DynamicTable = ({
               </Button>
 
             </div>
-          </>
-        ) : null}
 
+            <Horizontal size="sm" />
 
+          </>
+        ) : null}
 
         {isViewLeftBtnSecondary ? (
 
@@ -167,8 +208,6 @@ export const DynamicTable = ({
           </>
         ) : null}
 
-
-
         {isViewRange ? (
           <div className={getStyles('opFunctionBox1')}>
             <DatePicker
@@ -179,10 +218,44 @@ export const DynamicTable = ({
             />
           </div>
         ) : null}
+
       </div>
       <div className={getStyles('opFunctionBox2')}>
 
 
+        {isViewRange ? (
+          <>
+
+            <Checkbox
+              id={'dateSecundary'}
+              name={'dateSecundary'}
+              label={'Fecha creación'}
+              onChange={op => (
+                handleChangeCheckboxDate(op),
+                handleChangeCheckboxDateMy(op)
+              )}
+              value={dataCheckboxCheckboxDate}
+            // handleClick={handleClickCheck(values[name])}
+            // onChange={formikLoginCompany.handleChange}
+            // value={formikLoginCompany.values.terms1}
+            />
+
+            <div className={getStyles('opFunctionBox1')}>
+              <DatePicker
+                isLayoutDate={isLayoutDate}
+                onChangeRange={handleSelectRangeSecundary}
+                sinceDateRange={labelSinceDateRangeSecundary}
+                tillDateRange={labelTillDateRangeSecundary}
+                disabledInputRange={dataDisabledDate}
+              />
+            </div>
+
+            <Horizontal size="sm" />
+
+          </>
+        ) : null}
+
+
         {isViewFilterTable ? (
           <div className={getStyles('opFunctionBox3')}>
             <Label>{labelDinamicSelectFilter}</Label>
@@ -204,8 +277,6 @@ export const DynamicTable = ({
           </div>
         ) : null}
 
-
-
         {isViewAddColumn ? (
           <div className={getStyles('opFunctionBox3')}>
             <Label>{labelDinamicSelect}</Label>
@@ -227,7 +298,6 @@ export const DynamicTable = ({
           </div>
         ) : null}
 
-
         {isViewBtn ? (
 
           <>
@@ -246,7 +316,6 @@ export const DynamicTable = ({
           </>
         ) : null}
 
-
         {isViewDownloadDoc ? (
           <div id='boxFileDownload' className={getStyles('opFunctionBox3')}>
 
@@ -301,6 +370,7 @@ DynamicTable.propTypes = {
   getStyles: PropTypes.func.isRequired,
   isViewRange: PropTypes.bool,
   isViewTitleTable: PropTypes.bool,
+  isViewTitleTableSecundary: PropTypes.bool,
   isViewAddColumn: PropTypes.bool,
   isViewFilterTable: PropTypes.bool,
   isViewDownloadDoc: PropTypes.bool,
@@ -312,6 +382,7 @@ DynamicTable.propTypes = {
   isError: PropTypes.string,
   isLayoutDate: PropTypes.string,
   handleSelectRange: PropTypes.func,
+  handleSelectRangeSecundary: PropTypes.func,
   handleDownloadExcel: PropTypes.func,
   labelDinamicSelect: PropTypes.string,
   placeholderDinamicSelect: PropTypes.string,
@@ -319,6 +390,8 @@ DynamicTable.propTypes = {
   placeholderDinamicSelectFilter: PropTypes.string,
   labelSinceDateRange: PropTypes.string,
   labelTillDateRange: PropTypes.string,
+  labelSinceDateRangeSecundary: PropTypes.string,
+  labelTillDateRangeSecundary: PropTypes.string,
   typeBtn: PropTypes.string,
   titleBtn: PropTypes.string,
   handleBtn: PropTypes.func,
@@ -332,6 +405,7 @@ DynamicTable.propTypes = {
   handleBtnTertiary: PropTypes.func,
   txtTootipFileDownload: PropTypes.string,
   titleHeadingTable: PropTypes.string,
+  titleHeadingTableSecundary: PropTypes.string,
 }
 
 DynamicTable.defaultProps = {
@@ -340,6 +414,7 @@ DynamicTable.defaultProps = {
   handleFilterTable: () => { },
   isViewRange: true,
   isViewTitleTable: false,
+  isViewTitleTableSecundary: false,
   isViewAddColumn: true,
   isViewFilterTable: false,
   isViewDownloadDoc: true,
@@ -347,6 +422,7 @@ DynamicTable.defaultProps = {
   isViewLeftBtn: false,
   isLayoutDate: 'Calendar',
   handleSelectRange: () => { },
+  handleSelectRangeSecundary: () => { },
   handleDownloadExcel: () => { },
   labelDinamicSelect: 'Mostrar u ocultar columnas',
   placeholderDinamicSelect: 'Seleccionar columnas',
@@ -354,6 +430,8 @@ DynamicTable.defaultProps = {
   placeholderDinamicSelectFilter: '',
   labelSinceDateRange: 'Desde',
   labelTillDateRange: 'Hasta',
+  labelSinceDateRangeSecundary: 'Desde',
+  labelTillDateRangeSecundary: 'Hasta',
   typeBtn: 'primary',
   titleBtn: '',
   handleBtn: () => { },
@@ -367,6 +445,7 @@ DynamicTable.defaultProps = {
   handleBtnTertiary: () => { },
   txtTootipFileDownload: '',
   titleHeadingTable: 'Total: 200',
+  titleHeadingTableSecundary: '',
 }
 
 export default withStyles(styles)(DynamicTable)

package/layout/DynamicTable/DynamicTable.module.css

@@ -6,7 +6,7 @@
 }
 
 .opFunctionBox3 {
-  margin-left: 16px;
+  margin-left: 0px;
 }
 
 /* .opFunctionBox1 {
@@ -15,15 +15,16 @@
 
 .opFunctionBoxTotal2 {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-end;
   width: 100%;
   justify-content: flex-start;
 }
 
 .opFunctionBox2 {
+  margin-left: 24px;
   display: inline-flex;
   align-items: flex-end;
-  width: 100%;
+  width: 70%;
   justify-content: flex-end;
 }
 

package/molecules/ColumnTable/ColumnTable.js

@@ -104,7 +104,7 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
                       isInline
                       // onChange={item => useStateDate([item.selection])}
                       onChange={item => { onChangeSelect(item, props.idInput) }}
-                      optionsSelect={opSelect}
+                      optionsSelect={opSelect || props.optionsSelect}
                       placeholder={props.placeholder}
                       maxMenuHeight={110}
                     />

package/molecules/DatePicker/DatePicker.js

@@ -33,7 +33,7 @@ import {
 
 
 
-export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange }) => {
+export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange, disabledInputRange }) => {
 
   const [isShowCalendar, setShowCalendar] = useState(false);
 
@@ -51,7 +51,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
   // ]);
 
   moment.locale('es')
-  const format = "DD/MMMM/YYYY";
+  const format = "DD/MM/YYYY";
 
 
   const handleSelectRange = (item) => {
@@ -100,22 +100,26 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
                 <Label>{sinceDateRange}</Label>
                 <Input
                   isInline
+                  isDate
                   id="startDate"
                   onClick={handleClickOpenCalendar}
                   placeholder="Et harum quidem"
                   value={moment(state[0].startDate).format(format).toString()}
+                  disabled={disabledInputRange}
                 />
-                <Vertical size="xs" />
+                {/* <Vertical size="xs" /> */}
               </div>
-
+              <Horizontal size="xs" />
               <div>
                 <Label>{tillDateRange}</Label>
                 <Input
                   isInline
+                  isDate
                   id="endDate"
                   onClick={handleClickOpenCalendar}
                   placeholder="Et harum quidem"
                   value={moment(state[0].endDate).format(format).toString()}
+                  disabled={disabledInputRange}
                 />
               </div>
             </div>
@@ -229,6 +233,7 @@ DatePicker.propTypes = {
   onChangeRange: PropTypes.func,
   sinceDateRange: PropTypes.string,
   tillDateRange: PropTypes.string,
+  disabledInputRange: PropTypes.bool,
 }
 
 DatePicker.defaultProps = {
@@ -237,6 +242,7 @@ DatePicker.defaultProps = {
   onChangeRange: () => { },
   sinceDateRange: 'Desde',
   tillDateRange: 'Hasta',
+  disabledInputRange: false
 }
 
 export default withStyles(styles)(DatePicker)

package/molecules/DynamicSelect/DynamicSelect.js

@@ -1,9 +1,42 @@
+// import React from 'react'
 import React from 'react'
-import Select from 'react-select'
+// import Select from 'react-select'
 import PropTypes from 'prop-types'
 import styles from './DynamicSelect.module.css'
 import withStyles from '../../hocs/withStyles'
 
+import Select, { components } from 'react-select'
+
+import {
+  SortableContainer,
+  SortableElement,
+  sortableHandle
+} from 'react-sortable-hoc'
+
+const SortableMultiValue = SortableElement((props) => {
+  // this prevents the menu from being opened/closed when the user clicks
+  // on a value to begin dragging it. ideally, detecting a click (instead of
+  // a drag) would still focus the control and toggle the menu, but that
+  // requires some magic with refs that are out of scope for this example
+  const onMouseDown = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  // const onMouseUp = (e) => {
+  //   e.target.remove()
+  // }
+
+  const innerProps = { ...props.innerProps, onMouseDown };
+  return <components.MultiValue {...props} innerProps={innerProps} />
+})
+
+const SortableMultiValueLabel = sortableHandle((props) => (
+  <components.MultiValueLabel {...props} innerProps={props.innerProps} />
+))
+
+const SortableSelect = SortableContainer(Select)
+
 
 export const DynamicSelect = ({
   getStyles,
@@ -24,6 +57,10 @@ export const DynamicSelect = ({
   closeMenuOnSelect,
   maxMenuHeight,
   instanceId,
+  sortableMultiSelect,
+  onSortEnd,
+  formatGroupLabel,
+  hideSelectedOptions,
 }) => {
 
 
@@ -94,6 +131,21 @@ export const DynamicSelect = ({
       minWidth: "100%",
     }),
 
+    multiValue: (base) => ({
+      ...base,
+      color: "hsl(0deg 100% 50%)",
+      zIndex: "40",
+      // width: "max-content",
+      // minWidth: "100%",
+    }),
+
+    MultiValueGeneric: (base) => ({
+      ...base,
+      color: "hsl(0deg 100% 50%)",
+      // width: "max-content",
+      // minWidth: "100%",
+    }),
+
     // menu: styles => ({ ...styles,                 
     //   width: '500px'
     //  })  
@@ -105,43 +157,76 @@ export const DynamicSelect = ({
 
   }
 
-  // const handleChange = (value) => {
-  //   console.group('Value Changed');
-  //   console.log(value);
-  //   // console.log(`action: ${actionMeta.action}`);
-  //   console.groupEnd();
-  // };
 
   return (
 
     <div className={getStyles('dynamic-select', {
       'is-inline': isInline,
     })}>
-      <Select
-        name="basic"
-        // className="basic-single"
-        // classNamePrefix="select"
-        placeholder={placeholder}
-        styles={customStyles}
-        options={optionsSelect}
-        defaultValue={defaultValue}
-        value={value}
-        isMulti={isMulti}
-        isClearable={isClearable}
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        isRtl={isRtl}
-        isSearchable={isSearchable}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        closeMenuOnSelect={closeMenuOnSelect}
-        maxMenuHeight={maxMenuHeight}
-        autosize={true}
-        instanceId={instanceId}
-        menuPlacement='auto'
-        menuPosition='fixed'
-      />
+
+
+      {sortableMultiSelect ?
+        <SortableSelect
+          useDragHandle
+          // react-sortable-hoc props:
+          axis="xy"
+          onSortEnd={onSortEnd}
+          distance={4}
+          // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
+          getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+          // react-select props:
+          styles={customStyles}
+          placeholder={placeholder}
+          isMulti={isMulti}
+          options={optionsSelect}
+          defaultValue={defaultValue}
+          value={value}
+          onChange={onChange}
+          components={{
+            MultiValue: SortableMultiValue,
+            MultiValueLabel: SortableMultiValueLabel
+          }}
+          isClearable={isClearable}
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          closeMenuOnSelect={false}
+          autosize={true}
+          instanceId={instanceId}
+          menuPlacement='auto'
+          menuPosition='fixed'
+          formatGroupLabel={formatGroupLabel}
+          hideSelectedOptions={hideSelectedOptions}
+        />
+        :
+        <Select
+          name="basic"
+          // className="basic-single"
+          // classNamePrefix="select"
+          placeholder={placeholder}
+          styles={customStyles}
+          options={optionsSelect}
+          defaultValue={defaultValue}
+          value={value}
+          isMulti={isMulti}
+          isClearable={isClearable}
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          isRtl={isRtl}
+          isSearchable={isSearchable}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          closeMenuOnSelect={closeMenuOnSelect}
+          maxMenuHeight={maxMenuHeight}
+          autosize={true}
+          instanceId={instanceId}
+          menuPlacement='auto'
+          menuPosition='fixed'
+          formatGroupLabel={formatGroupLabel}
+          hideSelectedOptions={hideSelectedOptions}
+        />}
+
+
     </div>
 
   )
@@ -165,6 +250,8 @@ DynamicSelect.propTypes = {
   closeMenuOnSelect: PropTypes.bool,
   maxMenuHeight: PropTypes.number,
   instanceId: PropTypes.string,
+  sortableMultiSelect: PropTypes.bool,
+  hideSelectedOptions: PropTypes.bool,
 }
 
 DynamicSelect.defaultProps = {
@@ -182,7 +269,9 @@ DynamicSelect.defaultProps = {
   onBlur: () => { },
   closeMenuOnSelect: true,
   maxMenuHeight: 300,
-  instanceId: ''
+  instanceId: '',
+  sortableMultiSelect: false,
+  hideSelectedOptions: true,
 }
 
 export default withStyles(styles)(DynamicSelect)

package/molecules/RowTable/RowTable.js

@@ -21,6 +21,7 @@ export const RowTable = ({
   isClickRow,
   onClickRow,
   onClickActionUserView,
+  onClickActionFileDownload,
   onClickActionListInvoice,
   onClickActionListXLS,
   onClickActionListCSV,
@@ -32,6 +33,7 @@ export const RowTable = ({
   onClickActionClone,
   onClickActionCheckbox,
   txtTootipIconUserView,
+  txtTootipIconFileDownload,
   txtTootipIconListInvoice,
   txtTootipIconListListXLS,
   txtTootipIconListListCSV,
@@ -42,7 +44,6 @@ export const RowTable = ({
   txtTootipIconLink,
   txtTootipIconClone,
   txtTootipIconCheckbox,
-  colorRow,
 }) => {
 
 
@@ -124,6 +125,7 @@ export const RowTable = ({
                       (
                         <td
                           className={getStyles('td', 'tdacction')}
+                          style={{ color: item.colorTxtRow }}
                           key={[itemTd.accessor] + (indexTd + index)}
                         >
 
@@ -139,6 +141,7 @@ export const RowTable = ({
                       (
                         <td
                           className={getStyles('td', 'tdacction')}
+                          style={{ color: item.colorTxtRow }}
                           key={[itemTd.accessor] + (indexTd + index)}
                         >
                         </td>
@@ -159,6 +162,7 @@ export const RowTable = ({
                         (
                           <td
                             className={getStyles('td', 'tdacction')}
+                            style={{ color: item.colorTxtRow }}
                             key={[itemTd.accessor] + (indexTd + index)}
                           >
 
@@ -170,6 +174,7 @@ export const RowTable = ({
                         (
                           <td
                             className={getStyles('td', 'tdacction')}
+                            style={{ color: item.colorTxtRow }}
                             key={[itemTd.accessor] + (indexTd + index)}
                           >
                             {/* {String(item[itemTd.accessor])} */}
@@ -186,6 +191,7 @@ export const RowTable = ({
                       !loading ? (
                         <td
                           className={getStyles('td', 'tdacction')}
+                          style={{ color: item.colorTxtRow }}
                           key={[itemTd.accessor] + (indexTd + index)}
                         >
 
@@ -209,7 +215,7 @@ export const RowTable = ({
 
                         ?
 
-                        <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                        <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
 
                           {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
 
@@ -250,7 +256,10 @@ export const RowTable = ({
                         itemTd.isPicture
 
                           ?
-                          <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
+                          <td
+                            className={getStyles('td', 'tdacction')}
+                            style={{ color: item.colorTxtRow }}
+                            key={[itemTd.accessor] + (indexTd + index)}>
                             <Picture
                               src={item[itemTd.accessor]}
                               width={50}
@@ -262,7 +271,7 @@ export const RowTable = ({
 
                             ?
 
-                            <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
+                            <td style={{ color: item.colorTxtRow }} className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
 
 
                               {itemTd.viewListInvoice ?
@@ -800,6 +809,72 @@ export const RowTable = ({
                                 : null}
 
 
+                              {itemTd.viewFileDownload ?
+
+                                item.viewFileDownload === undefined ?
+
+                                  <>
+                                    <span
+                                      data-tip
+                                      data-for='fileDownload'
+                                      onMouseEnter={handleMouseEnter}
+                                      onMouseLeave={handleMouseLeave}
+                                    >
+                                      <>
+                                        <Icon
+                                          id="fileDownload"
+                                          background="base"
+                                          name="fileDownload"
+                                          onClick={(e) => { onClickActionFileDownload(e, item) }}
+                                        />
+                                        <Horizontal size="xs" />
+                                      </>
+
+                                    </span>
+
+                                    {isToolTipMounted ? (
+                                      <ReactTooltip id='fileDownload' type='error'>
+                                        <span>{txtTootipIconFileDownload}</span>
+                                      </ReactTooltip>
+                                    ) : null}
+                                  </>
+
+                                  :
+
+                                  item.viewFileDownload ?
+
+                                    <>
+                                      <span
+                                        data-tip
+                                        data-for='fileDownload'
+                                        onMouseEnter={handleMouseEnter}
+                                        onMouseLeave={handleMouseLeave}
+                                      >
+                                        <>
+                                          <Icon
+                                            id="fileDownload"
+                                            background="base"
+                                            name="fileDownload"
+                                            onClick={(e) => { onClickActionFileDownload(e, item) }}
+                                          />
+                                          <Horizontal size="xs" />
+                                        </>
+
+                                      </span>
+
+                                      {isToolTipMounted ? (
+                                        <ReactTooltip id='fileDownload' type='error'>
+                                          <span>{txtTootipIconFileDownload}</span>
+                                        </ReactTooltip>
+                                      ) : null}
+                                    </>
+
+                                    : null
+
+                                : null}
+
+
+
 
                               {itemTd.viewCheckbox ?
 
@@ -883,7 +958,7 @@ export const RowTable = ({
 
                               ?
 
-                              <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
+                              <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
 
                               :
 
@@ -893,7 +968,7 @@ export const RowTable = ({
 
                                 itemTd.typeFilterSub === 'date_only' ?
 
-                                  <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                                  <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
 
                                     {item[itemTd.accessor] ? (
 
@@ -907,7 +982,7 @@ export const RowTable = ({
 
                                   :
 
-                                  <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                                  <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
                                     {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
                                     {item[itemTd.accessor] ? (
 
@@ -928,7 +1003,7 @@ export const RowTable = ({
 
                                     item[itemTd.accessor] === itemSelect.value ?
 
-                                      <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
+                                      <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
                                         {itemSelect.label}
                                       </td>
 
@@ -949,20 +1024,20 @@ export const RowTable = ({
 
                                       itemTd.characterExtra === 'km'
                                         ?
-                                        <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                        <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                         :
-                                        <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                        <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                       :
-                                      <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
+                                      <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
 
                                     :
 
                                     itemTd.subTypeFilter
 
                                       ?
-                                      <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                      <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                       :
-                                      <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
+                                      <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
 
                 // <>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -60,7 +60,8 @@
     "react-moment": "1.1.2",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
-    "react-select": "5.3.2",
+    "react-select": "5.8.0",
+    "react-sortable-hoc": "2.0.0",
     "react-spinners": "0.13.4",
     "react-tooltip": "4.4.0",
     "storybook-addon-theme-changer": "0.1.2",