imbric-theme 0.3.8 → 0.4.1

package/atoms/LinkItem/LinkItem.js

@@ -10,7 +10,7 @@ import Paragraph from '../Paragraph'
 export const LinkItem = ({ children, size, color, getStyles, isHref }) => {
   return (
     <Link href={isHref} passHref>
-      <a className={getStyles('link', ['color'])}>
+      <a target="_blank" className={getStyles('link', ['color'])}>
         <Paragraph size={size} color={color} weight="semibold" isInline>
           {children}
         </Paragraph>

package/atoms/Modal/Modal.js

@@ -78,7 +78,7 @@ export const Modal = ({
 						{titleModal}
 					</Heading>
         </div>
-        <Container>{children}</Container>
+        <Container><div className={getStyles('container')}>{children}</div></Container>
       </div>
     </div>
   )

package/atoms/Modal/Modal.module.css

@@ -57,11 +57,19 @@
     max-width: 465px;
     height: auto;
     border-radius: var(--border-radius-sm);
+    /* max-height: 100%;
+    overflow: auto; */
   }
 
   .heading {
     flex-direction: row-reverse;
   }
+
+  .container {
+    max-height: 600px;
+    overflow: auto;
+    min-width: 100%;
+  }
 }
 
 @keyframes fadeInModal {

package/hook/useTable.js

@@ -1,45 +1,54 @@
-import { useState, useEffect } from "react";
-
-const calculateRange = (data, rowsPerPage) => {
-  const range = []
-  if (!data) {
-    var num = Math.ceil(1);
-  } else {
-    num = Math.ceil(data.length / rowsPerPage);
-
-  }
-
-  // const num = Math.ceil(data.length / rowsPerPage);
-
-  // let i = 1;
-  for (let i = 1; i <= num; i++) {
-    range.push(i);
-  }
-  return range;
-};
-
-const sliceData = (data, page, rowsPerPage) => {
-
-  if (!data) {
-    return data = [];
-  } else {
-    return data.slice((page - 1) * rowsPerPage, page * rowsPerPage);
-  }
-};
-
-const useTable = (data, page, rowsPerPage) => {
-  const [tableRange, setTableRange] = useState([]);
-  const [slice, setSlice] = useState([]);
-
-  useEffect(() => {
-    const range = calculateRange(data, rowsPerPage);
-    setTableRange([...range]);
-
-    const slice = sliceData(data, page, rowsPerPage);
-    setSlice([...slice]);
-  }, [data, setTableRange, page, setSlice, rowsPerPage]);
-
-  return { slice, range: tableRange };
-};
-
-export default useTable;
+import { useState, useEffect } from 'react'
+
+const calculateRange = (dataTotalQueryCount, data, rowsPerPage) => {
+	const range = []
+	if (!data) {
+		var num = Math.ceil(1)
+	} else {
+		// num = Math.ceil(data.length / rowsPerPage)
+		num = Math.ceil(dataTotalQueryCount / rowsPerPage)
+	}
+
+	// const num = Math.ceil(data.length / rowsPerPage);
+
+	// let i = 1;
+	for (let i = 1; i <= num; i++) {
+		range.push(i)
+	}
+	return range
+}
+
+// const sliceData = (data, page, rowsPerPage) => {
+// 	if (!data) {
+// 		return (data = [])
+// 	} else {
+// 		// return data.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+// 		return data
+// 	}
+// }
+
+const sliceData = (data) => {
+	if (!data) {
+		return (data = [])
+	} else {
+		// return data.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+		return data
+	}
+}
+
+const useTable = (dataTotalQueryCount, data, page, rowsPerPage) => {
+	const [tableRange, setTableRange] = useState([])
+	const [slice, setSlice] = useState([])
+
+	useEffect(() => {
+		const range = calculateRange(dataTotalQueryCount, data, rowsPerPage)
+		setTableRange([...range])
+
+		const slice = sliceData(data, page, rowsPerPage)
+		setSlice([...slice])
+	}, [dataTotalQueryCount, data, setTableRange, page, setSlice, rowsPerPage])
+
+	return { slice, range: tableRange }
+}
+
+export default useTable

package/layout/DynamicTable/DynamicTable.js

@@ -16,7 +16,7 @@ import LoadingError from '../../molecules/LoadingError'
 // import useStateDate from '../../hook/useStateDate';
 
 
-export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isLayoutDate, isViewRange, isViewAddColumn, isViewDownloadDoc, handleAddColumn, handleSelectRange, handleDownloadExcel }) => {
+export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isLayoutDate, isViewRange, isViewAddColumn, isViewDownloadDoc, handleAddColumn, handleSelectRange, handleDownloadExcel, labelDinamicSelect, placeholderDinamicSelect, labelSinceDateRange, labelTillDateRange }) => {
 
   const [tableData, setTableData] = useState(optionsData);
   const [columnsData, setColumnsData] = useState(opColumns);
@@ -94,6 +94,8 @@ export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns,
             <DatePicker
               isLayoutDate={isLayoutDate}
               onChangeRange={handleSelectRange}
+              sinceDateRange={labelSinceDateRange}
+              tillDateRange={labelTillDateRange}
             />
           </div>
         ) : null}
@@ -102,13 +104,13 @@ export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns,
 
           {isViewAddColumn ? (
             <div className={getStyles('opFunctionBox3')}>
-              <Label>Mostrar u ocultar columnas</Label>
+              <Label>{labelDinamicSelect}</Label>
               <DynamicSelect
                 isMulti
                 isInline
                 onChange={handleAddColumn}
                 optionsSelect={addColumsData}
-                placeholder='Seleccionar columnas'
+                placeholder={placeholderDinamicSelect}
               />
             </div>
           ) : null}
@@ -156,6 +158,10 @@ DynamicTable.propTypes = {
   isLayoutDate: PropTypes.string,
   handleSelectRange: PropTypes.func,
   handleDownloadExcel: PropTypes.func,
+  labelDinamicSelect: PropTypes.string,
+  placeholderDinamicSelect: PropTypes.string,
+  labelSinceDateRange: PropTypes.string,
+  labelTillDateRange: PropTypes.string,
 }
 
 DynamicTable.defaultProps = {
@@ -167,6 +173,10 @@ DynamicTable.defaultProps = {
   isLayoutDate: 'Calendar',
   handleSelectRange: () => { },
   handleDownloadExcel: () => { },
+  labelDinamicSelect: 'Mostrar u ocultar columnas',
+  placeholderDinamicSelect: 'Seleccionar columnas',
+  labelSinceDateRange: 'Desde',
+  labelTillDateRange: 'Hasta',
 }
 
 export default withStyles(styles)(DynamicTable)

package/layout/DynamicTable/DynamicTable.stories.js

@@ -27,6 +27,8 @@ export default {
     isViewRange: true,
     isViewAddColumn: true,
     isViewDownloadDoc: true,
+    labelDinamicSelect: 'Mostrar u ocultar columnas',
+    placeholderDinamicSelect: 'Seleccionar columnas',
   },
   argTypes: {
     // types: getOptionsArgTypes(options.types),

package/layout/Navbar/Navbar.js

@@ -2,11 +2,32 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Navbar.module.css'
 import withStyles from '../../hocs/withStyles'
+import { useRouter } from "next/router";
+import Link from 'next/link'
+import DynamicSelect from '../../molecules/DynamicSelect'
 
 import Heading from '../../atoms/Heading/Heading'
 import Tabs from '../../molecules/Tabs/Tabs'
+import Icon from '../../atoms/Icon'
+import { options } from './constants'
+
+export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout, defaultValueLanguage, optionsSelectLanguage, handleChangeLanguage }) => {
+
+
+  const router = useRouter();
+
+  const handleClick = (e, path) => {
+
+    console.log("I clicked on the About Page" + path);
+
+    router.push({
+      pathname: path,
+    })
+
+
+  };
+
 
-export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout }) => {
   return (
     <>
       <header className={getStyles('navbar')}>
@@ -52,16 +73,61 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
         />
 
 
-        {/* <div className={getStyles('navbar__title', 'navbar__item')}>Taksee</div> */}
-        {/* <div className={getStyles('navbar__item')}>Legal</div>
-        <div className={getStyles('navbar__item')}>User Guide</div> */}
-
         {viewOptionsNav ? (
-          <div onClick={linkLogout} className={getStyles('navbar__item', { 'is-playground': viewTabsNav })}>
-            Logout
+          <div className={getStyles('navbar__actions')}>
+            {/* <div className={getStyles('navbar__item')}>Legal</div>
+          <div className={getStyles('navbar__item')}>User Guide</div> */}
+
+            {options.map((item, index) => (
+              <Icon
+                key={index}
+                size='lg'
+                name={item.icon}
+                color='highlight'
+                background='transparent'
+                onClick={(e) => handleClick(e, item.href)}
+              />
+            ))}
+
+            <DynamicSelect
+              isClearable={false}
+              // defaultValue={{
+              //   label: 'ES',
+              //   value: 'es'
+              // }}
+              defaultValue={defaultValueLanguage}
+              onChange={handleChangeLanguage}
+              optionsSelect={optionsSelectLanguage}
+              // optionsSelect={[
+              //   {
+              //     label: 'ES',
+              //     value: 'es'
+              //   },
+              //   {
+              //     label: 'EN',
+              //     value: 'en'
+              //   }
+              // ]}
+            />
+
+            <Icon
+              size='lg'
+              name='logout'
+              color='highlight'
+              background='transparent'
+              onClick={linkLogout}
+            />
+
           </div>
+
         ) : null}
 
+        {/* {viewOptionsNav ? (
+            <div onClick={linkLogout} className={getStyles('navbar__item')}>
+              Logout
+            </div>
+          ) : null} */}
+
 
       </header>
 
@@ -76,6 +142,7 @@ Navbar.propTypes = {
   viewTabsNav: PropTypes.bool,
   viewOptionsNav: PropTypes.bool,
   linkLogout: PropTypes.func,
+  handleChange: PropTypes.func,
 }
 
 Navbar.defaultProps = {

package/layout/Navbar/Navbar.module.css

@@ -27,4 +27,9 @@
     padding: 0.67em 1.5em;
     cursor: pointer;
     vertical-align: middle;
+}
+
+.navbar__actions {
+    display: flex;
+    align-items: center;
 }

package/layout/Navbar/constants.js

@@ -0,0 +1,35 @@
+export const options = [
+	{
+		active: false,
+		href: '#',
+		icon: 'legal',
+		text: 'Legal',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'info',
+		text: 'User Guide',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'profile',
+		text: 'My profile',
+		view: true,
+		viewSubMenu: false,
+	},
+	// {
+	// 	active: false,
+	// 	href: '/home',
+	// 	icon: 'logout',
+	// 	text: 'Salir',
+	// 	view: true,
+	// 	viewSubMenu: false,
+	// },
+
+]

package/molecules/ColumnTable/ColumnTable.js

@@ -7,16 +7,20 @@ import withStyles from '../../hocs/withStyles'
 import Paragraph from '../../atoms/Paragraph'
 import Input from '../../atoms/Input'
 import Icon from '../../atoms/Icon'
+import DynamicSelect from '../../molecules/DynamicSelect'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
 
-export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, columnsData }) => {
+export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, onChangeSelect, columnsData, opSelect }) => {
 
   const [sortable, setSortable] = useState(true);
   const [accessor, setAccessor] = useState("");
   const [sortField, setSortField] = useState("");
   const [order, setOrder] = useState("asc");
 
+  // const [optionsSelect, setOptionsSelect] = useState(opSelect);
+
+
   const handleSortingChange = (accessor) => {
     const sortOrder =
       accessor === sortField && order === "asc" ? "desc" : "asc";
@@ -63,24 +67,24 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
 
                     {item.sortable ?
 
-                        cl === "default" ?
-                          <Icon
-                            name="angleUpDown"
-                            size="xs"
-                          />
-                          : cl === "" ? null
-
-                            : cl === "angleDown"
-                              ? <Icon
-                                name="angleDown"
-                                size="xs"
-                              />
-
-                              : <Icon
-                                name="angleUp"
-                                size="xs"
-                              />
-                        : null
+                      cl === "default" ?
+                        <Icon
+                          name="angleUpDown"
+                          size="xs"
+                        />
+                        : cl === "" ? null
+
+                          : cl === "angleDown"
+                            ? <Icon
+                              name="angleDown"
+                              size="xs"
+                            />
+
+                            : <Icon
+                              name="angleUp"
+                              size="xs"
+                            />
+                      : null
                     }
                   </span>
 
@@ -89,14 +93,25 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
 
                   {item.viewIsFilter ? (
 
-                    <Input
-                      isInputFilter
-                      id={item.idInput}
-                      type={item.typeFilter}
-                      name={item.nameInput}
-                      onChange={onChangeInput}
-                      placeholder={item.placeholder}
-                    />) : null
+                    item.typeFilter === 'select' ?
+                      <DynamicSelect
+                        isInline
+                        onChange={onChangeSelect}
+                        optionsSelect={opSelect}
+                        placeholder={item.placeholder}
+                      />
+                      :
+                      <Input
+                        isInputFilter
+                        id={item.idInput}
+                        type={item.typeFilter}
+                        name={item.nameInput}
+                        onChange={onChangeInput}
+                        placeholder={item.placeholder}
+                      />
+                  )
+
+                    : null
                   }
 
                 </th>
@@ -116,6 +131,7 @@ ColumnTable.propTypes = {
   getStyles: PropTypes.func.isRequired,
   columnUppercase: PropTypes.bool,
   onChangeInput: PropTypes.func,
+  onChangeSelect: PropTypes.func,
 }
 
 ColumnTable.defaultProps = {
@@ -123,6 +139,7 @@ ColumnTable.defaultProps = {
   handleSorting: () => { },
   columnUppercase: false,
   onChangeInput: () => { },
+  onChangeSelect: () => { },
 }
 
 export default withStyles(styles)(ColumnTable)

package/molecules/ColumnTable/ColumnTable.module.css

@@ -2,6 +2,8 @@
   padding: 12px 15px;
   text-align: left;
   color: var(--color-font-base);
+  display: table-cell;
+  vertical-align: top;
 }
 
 .column-uppercase {

package/molecules/ColumnTable/constants.js

@@ -108,4 +108,10 @@ export const options = {
         },
     ],
 
+    opSelect: [
+        { value: 'chocolate', label: 'Chocolate' },
+        { value: 'strawberry', label: 'Strawberry' },
+        { value: 'vanilla', label: 'Vanilla' }
+    ]
+
 }

package/molecules/DatePicker/DatePicker.js

@@ -33,7 +33,7 @@ import {
 
 
 
-export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
+export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange }) => {
 
   const [isShowCalendar, setShowCalendar] = useState(false);
 
@@ -96,7 +96,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
           !isShowCalendar ?
             <div className={getStyles('date-picker-input')}>
               <div>
-                <Label>Desde</Label>
+                <Label>{sinceDateRange}</Label>
                 <Input
                   isInline
                   id="startDate"
@@ -108,7 +108,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
               </div>
 
               <div>
-                <Label>Hasta</Label>
+                <Label>{tillDateRange}</Label>
                 <Input
                   isInline
                   id="endDate"
@@ -224,13 +224,17 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
 DatePicker.propTypes = {
   getStyles: PropTypes.func.isRequired,
   isLayoutDate: PropTypes.oneOf(options.typeLayoutDate),
-  onChangeRange: PropTypes.func
+  onChangeRange: PropTypes.func,
+  sinceDateRange: PropTypes.string,
+  tillDateRange: PropTypes.string,
 }
 
 DatePicker.defaultProps = {
   getStyles: () => { },
   isLayoutDate: 'Calendar',
   onChangeRange: () => { },
+  sinceDateRange: 'Desde',
+  tillDateRange: 'Hasta',
 }
 
 export default withStyles(styles)(DatePicker)

package/molecules/DynamicSelect/DynamicSelect.js

@@ -89,7 +89,7 @@ export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placehol
 
 DynamicSelect.propTypes = {
   getStyles: PropTypes.func.isRequired,
-  defaultValue: PropTypes.string,
+  defaultValue: PropTypes.object,
   placeholder: PropTypes.string,
   isMulti: PropTypes.bool,
   isClearable: PropTypes.bool,
@@ -103,7 +103,6 @@ DynamicSelect.propTypes = {
 
 DynamicSelect.defaultProps = {
   getStyles: () => { },
-  defaultValue: '',
   placeholder: 'seleccionar',
   isMulti: false,
   isClearable: true,

package/molecules/DynamicSelect/DynamicSelect.stories.js

@@ -14,7 +14,7 @@ export default {
   component: DynamicSelect,
   args: {
     optionsSelect: options.optionsSelect,
-    defaultValue: '',
+    defaultValue: options.optionsSelect[0],
     placeholder: 'seleccionar',
     isMulti: false,
     isClearable: true,

package/molecules/FooterTable/FooterTable.js

@@ -4,30 +4,51 @@ import PropTypes from 'prop-types'
 import styles from './FooterTable.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
+import DynamicSelect from '../../molecules/DynamicSelect'
 
-export const FooterTable = ({ getStyles, range, setPage, page, slice }) => {
+
+export const FooterTable = ({ getStyles, range, setPage, setDataPage, page, slice, placeholderDinamicSelect, handleResultsForPage }) => {
   useEffect(() => {
     if (slice.length < 1 && page !== 1) {
       setPage(page - 1);
     }
   }, [slice, page, setPage]);
 
+
   return (
     <div className={getStyles('footer-table')}>
 
       <div className={styles.tableFooter}>
         {range.map((el, index) => (
-          <button
-            key={index}
-            className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
-              }`}
-            onClick={() => setPage(el)}
-          >
-            {el}
-          </button>
+
+          <>
+            <button
+              key={index}
+              className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
+                }`}
+              onClick={() => { setPage(el); setDataPage(el) }}
+
+              onChange={item => { handleSelectRange(item); onChangeRange(item); }}
+
+            >
+              {el}
+            </button>
+
+
+          </>
+
         ))}
       </div>
 
+      <DynamicSelect
+              isInline
+              onChange={handleResultsForPage}
+              optionsSelect={options.opResultsForPage}
+              placeholder={placeholderDinamicSelect}
+              isClearable={false}
+              defaultValue= { {value: 10, label: '10'} }
+            />
+
     </div>
 
 
@@ -37,11 +58,17 @@ export const FooterTable = ({ getStyles, range, setPage, page, slice }) => {
 FooterTable.propTypes = {
   // children: PropTypes.node.isRequired,
   getStyles: PropTypes.func.isRequired,
+  setDataPage: PropTypes.func,
+  placeholderDinamicSelect: PropTypes.string,
+  handleResultsForPage: PropTypes.func
   // type: PropTypes.oneOf(options.types),
 }
 
 FooterTable.defaultProps = {
   getStyles: () => { },
+  setDataPage: () => { },
+  handleResultsForPage: () => { },
+  placeholderDinamicSelect: 'resultados por pagina'
 }
 
 export default withStyles(styles)(FooterTable)

package/molecules/FooterTable/FooterTable.module.css

@@ -4,14 +4,14 @@
 
 .tableFooter {
   background-color: #f1f1f1;
-  padding: 8px 0px;
+  padding: 4px 0px;
   width: 100%;
   font-weight: 500;
   text-align: left;
   font-size: 16px;
   color: #2c3e50;
-  border-bottom-left-radius: 15px;
-  border-bottom-right-radius: 15px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -19,7 +19,7 @@
 
 .button {
   border: none;
-  padding: 7px 14px;
+  padding: 6px 12px;
   border-radius: 10px;
   cursor: pointer;
   margin-right: 4px;
@@ -28,7 +28,7 @@
 
 .activeButton {
   color: white;
-  background: #185adb;
+  background: #00A3FF;
 }
 
 .inactiveButton {

package/molecules/FooterTable/constants.js

@@ -1 +1,9 @@
-export const options = { types: [] }
+export const options =
+{
+    opResultsForPage: [
+        { value: 5, label: '5' },
+        { value: 10, label: '10' },
+        { value: 20, label: '20' },
+        { value: 50, label: '50' },
+    ]
+}

package/molecules/RowTable/RowTable.js

@@ -9,7 +9,17 @@ import Moment from 'react-moment'
 import Icon from '../../atoms/Icon'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
-export const RowTable = ({ getStyles, slice, columnsData }) => {
+export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onClickActionSendEmail, onClickActionDelete }) => {
+
+
+
+
+  // const handleEditStaff = (e, item) => {
+  //   console.log(item)
+  //   console.log(e)
+  // }
+
+
   return (
     <div className={getStyles('tbl-content')}>
       <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
@@ -22,28 +32,46 @@ export const RowTable = ({ getStyles, slice, columnsData }) => {
                   (
 
 
-                    itemTd.subAccessor === 'action' ?
+                    itemTd.subAccessor === 'action'
+
+                      ?
 
                       <td className={getStyles('td')} key={[itemTd.accessor]}>
 
                         <Icon
                           background="base"
                           name="settings"
-                          onClick={function noRefCheck() { }}
+                          onClick={(e) => { onClickActionEdit(e, item) }}
+                        />
+                        <Horizontal size="xs" />
+                        <Icon
+                          background="base"
+                          name="arrowUp"
+                          // onClick={(e) => onClickEdit(e, item)}
+                          onClick={e => { onClickActionSendEmail(e, item) }}
                         />
                         <Horizontal size="xs" />
                         <Icon
                           background="base"
                           name="trash"
-                          onClick={function noRefCheck() { }}
+                          // onClick={(e) => onClickEdit(e, item)}
+                          onClick={e => { onClickActionDelete(e, item) }}
                         />
-                      </td> :
+                      </td>
+
+                      :
+
+                      itemTd.subAccessor !== ''
+
+                        ?
 
-                      itemTd.subAccessor !== '' ?
+                        <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
 
-                        <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
+                        :
 
-                        itemTd.typeFilter === 'date' ?
+                        itemTd.typeFilter === 'date'
+
+                          ?
 
                           <td className={getStyles('td')} key={[itemTd.accessor]}>
                             <Moment format="DD/MM/YYYY hh:mm:ss">
@@ -51,19 +79,52 @@ export const RowTable = ({ getStyles, slice, columnsData }) => {
                             </Moment>
                           </td>
 
-                          : itemTd.typeFilter === 'number' ?
+                          :
 
-                            itemTd.subTypeFilter ?
+                          itemTd.typeFilter === 'select'
 
-                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
-                              :
-                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                            ?
+
+                            itemTd.optionsSelect.map((itemSelect) => (
+                              
+
+                              item[itemTd.accessor] === itemSelect.value ?
+
+                                <td className={getStyles('td')} key={[itemTd.accessor]}>
+                                  {itemSelect.label}
+                                </td>
+
+                                :
+
+                                null
+                            ))
 
-                            : itemTd.subTypeFilter ?
+                            :
+
+                            itemTd.typeFilter === 'number'
+
+                              ?
+
+                              itemTd.subTypeFilter
+
+                                ?
+
+                                itemTd.characterExtra === 'km' 
+                                  ?
+                                  <td className={getStyles('td')} key={[itemTd.accessor]}>{(item[itemTd.accessor]/1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                  : 
+                                  <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                :
+                                <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
-                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
                               :
-                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+
+                              itemTd.subTypeFilter
+
+                                ?
+                                <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} {itemTd.characterExtra}</td>
+                                :
+                                <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
                   ) : null
               ))}
@@ -79,10 +140,14 @@ export const RowTable = ({ getStyles, slice, columnsData }) => {
 RowTable.propTypes = {
   getStyles: PropTypes.func.isRequired,
   type: PropTypes.oneOf(options.types),
+  onClickActionEdit: PropTypes.func,
+  onClickActionSendEmail: PropTypes.func,
+  onClickActionDelete: PropTypes.func
 }
 
 RowTable.defaultProps = {
   getStyles: () => { },
+  onClickActionEdit: () => { },
 }
 
 export default withStyles(styles)(RowTable)

package/molecules/RowTable/constants.js

@@ -1,3 +1,9 @@
+export const optionsSelect = [
+	{ value: '', label: 'Todos' },
+	{ value: 1, label: 'Activo' },
+	{ value: -1, label: 'Dado de baja' }
+]
+
 export const options = { 
     
     bookings: [
@@ -5,7 +11,7 @@ export const options = {
             id: 346248956,
             idUser: 146280,
             idAuthorization: 817457,
-            status: 30,
+            status: 1,
             origin: {
                 addressField: "Cines Embajadores, Glorieta Sta. María de la Cabeza, 5, 28045 Madrid",
                 lat: 40.40068,
@@ -21,6 +27,7 @@ export const options = {
             paymentMethod: 50,
             entryChannel: 15,
             idSupplierFleet: 57,
+            distanceMeters: 22044,
             idSupplier: 57,
             distanceMeters: 10501,
             durationMinutes: 0,
@@ -69,7 +76,7 @@ export const options = {
             id: 346248955,
             idUser: 146280,
             idAuthorization: 817457,
-            status: 30,
+            status: 1,
             origin: {
                 addressField: "Estación de Chamartín, Madrid, España",
                 lat: 40.47237,
@@ -83,6 +90,7 @@ export const options = {
             timeBookingStartRealTimestamp: 1653559749000,
             asap: true,
             paymentMethod: 50,
+            distanceMeters: 22044,
             entryChannel: 15,
             idSupplierFleet: 57,
             idSupplier: 57,
@@ -133,7 +141,7 @@ export const options = {
             id: 346248954,
             idUser: 146280,
             idAuthorization: 817457,
-            status: 30,
+            status: -1,
             origin: {
                 addressField: "Cines Embajadores, Glorieta Sta. María de la Cabeza, 5, 28045 Madrid",
                 lat: 40.40068,
@@ -159,6 +167,7 @@ export const options = {
             idSupplierTaxi: "11",
             idSupplierService: "15826",
             cancelledWithCharge: false,
+            distanceMeters: 22044,
             priceCustomer: "23.00000",
             priceSupplier: "23.00000",
             phoneNumberSupplier: "676800672",
@@ -204,7 +213,7 @@ export const options = {
             title: 'Fecha',
             viewIsFilter: true,
             typeFilter: 'date',
-            subTypeFilter: false,
+            subTypeFilter: true,
             idInput: 'fecha',
             nameInput: 'Fecha',
             placeholder: 'Fecha'
@@ -259,7 +268,36 @@ export const options = {
             subTypeFilter: true,
             idInput: 'precio',
             nameInput: 'Precio',
-            placeholder: 'Precio'
+            placeholder: 'Precio',
+            characterExtra: '€'
+        },
+        {
+            accessor: 'distanceMeters',
+            subAccessor: '',
+            activeView: true,
+            idInput: 'distanceMeters',
+            nameInput: 'distanceMeters',
+            placeholder: 'Distancia (km)',
+            sortable: true,
+            subTypeFilter: false,
+            title: 'Distancia (km)',
+            typeFilter: 'number',
+            viewIsFilter: true,
+            characterExtra: 'km',
+        },
+        {
+            accessor: 'status',
+            subAccessor: '',
+            activeView: true,
+            idInput: 'status',
+            nameInput: 'Estado',
+            placeholder: 'Estado',
+            sortable: true,
+            subTypeFilter: false,
+            title: 'Estado',
+            typeFilter: 'select',
+            optionsSelect: optionsSelect,
+            viewIsFilter: true,
         },
         {
             activeView: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.3.8",
+  "version": "0.4.1",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",