imbric-theme 0.4.3 → 0.4.4

package/molecules/RowTable/RowTable.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import styles from './RowTable.module.css'
@@ -8,9 +8,27 @@ import withStyles from '../../hocs/withStyles'
 import Moment from 'react-moment'
 import Icon from '../../atoms/Icon'
 import Picture from '../../atoms/Picture'
+import Check from '../../atoms/Check'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
-export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onClickActionSendEmail, onClickActionDelete }) => {
+export const RowTable = ({
+  getStyles,
+  slice,
+  columnsData,
+  isClickRow,
+  onClickRow,
+  onClickActionUserView,
+  onClickActionListInvoice,
+  onClickActionListXLS,
+  onClickActionListCSV,
+  onClickActionListPDF,
+  onClickActionEdit,
+  onClickActionSendEmail,
+  onClickActionDelete,
+
+  isCheckedCheckbox,
+  onClickCheckbox,
+}) => {
 
 
 
@@ -21,137 +39,223 @@ export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onC
   // }
 
 
+  // const handleClick = () => () => {
+  //   // onClick()
+
+  //   isChecked ? setIsChecked(false) : setIsChecked(true)
+
+  // }
+
+
   return (
     <div className={getStyles('tbl-content')}>
       <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
         <tbody>
           {slice.map((item, index) => (
 
-            <tr key={index}>
+            <tr className={getStyles({ 'tr-content': isClickRow })} onClick={(e) => { onClickRow(e, item) }} key={index}>
+
               {columnsData.map((itemTd) => (
                 itemTd.activeView ?
                   (
 
-                    itemTd.isPicture
+
+                    itemTd.isCheckbox
 
                       ?
-                      <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor]}>
-                        <Picture
-                          src={item[itemTd.accessor]}
-                          width={50}
+                      <td 
+                        className={getStyles('td', 'tdacction')}
+                        key={[itemTd.accessor]}
+                        onClick={(e) => {
+                          onClickCheckbox(e, item)
+                          // isChecked ? setIsChecked(false) : setIsChecked(true)
+                        }}>
+
+                        <Check id={item[itemTd.accessor]} isChecked={isCheckedCheckbox}
+
                         />
                       </td>
                       :
 
-                      itemTd.subAccessor === 'action'
-
-                        ?
 
-                        <td className={getStyles('td')} key={[itemTd.accessor]}>
-
-                          {itemTd.viewEdit ?
-                            <>
-                              <Icon
-                                background="base"
-                                name="edit"
-                                onClick={(e) => { onClickActionEdit(e, item) }}
-                              />
-                              <Horizontal size="xs" />
-                            </>
-                            : null}
-
-                          {itemTd.viewEmailSend ?
-                            <>
-                              <Icon
-                                background="base"
-                                name="sendEmail"
-                                // onClick={(e) => onClickEdit(e, item)}
-                                onClick={e => { onClickActionSendEmail(e, item) }}
-                              />
-                              <Horizontal size="xs" />
-                            </>
-                            : null}
-
-                          {itemTd.viewTrash ?
-                            <>
-                              <Icon
-                                background="base"
-                                name="trash"
-                                // onClick={(e) => onClickEdit(e, item)}
-                                onClick={e => { onClickActionDelete(e, item) }}
-                              />
-                              <Horizontal size="xs" />
-                            </>
-                            : null}
+                      itemTd.isPicture
 
+                        ?
+                        <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor]}>
+                          <Picture
+                            src={item[itemTd.accessor]}
+                            width={50}
+                          />
                         </td>
-
                         :
 
-                        itemTd.subAccessor !== ''
+                        itemTd.subAccessor === 'action'
 
                           ?
 
-                          <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
+                          <td className={getStyles('td')} key={[itemTd.accessor]}>
+
+                            {itemTd.viewUserView ?
+                              <>
+                                <Icon
+                                  background="base"
+                                  name="userView"
+                                  onClick={(e) => { onClickActionUserView(e, item) }}
+                                />
+                                <Horizontal size="xs" />
+                              </>
+                              : null}
+
+
+                            {itemTd.viewListInvoice ?
+                              <>
+                                <Icon
+                                  background="base"
+                                  name="listInvoice"
+                                  onClick={(e) => { onClickActionListInvoice(e, item) }}
+                                />
+                                <Horizontal size="xs" />
+                              </>
+                              : null}
+
+                            {itemTd.viewListXLS ?
+                              <>
+                                <Icon
+                                  background="base"
+                                  name="listXLS"
+                                  onClick={(e) => { onClickActionListXLS(e, item) }}
+                                />
+                                <Horizontal size="xs" />
+                              </>
+                              : null}
+
+                            {itemTd.viewListCSV ?
+                              <>
+                                <Icon
+                                  background="base"
+                                  name="listCSV"
+                                  onClick={(e) => { onClickActionListCSV(e, item) }}
+                                />
+                                <Horizontal size="xs" />
+                              </>
+                              : null}
+
+                            {itemTd.viewListPDF ?
+                              <>
+                                <Icon
+                                  background="base"
+                                  name="listPDF"
+                                  onClick={(e) => { onClickActionListPDF(e, item) }}
+                                />
+                                <Horizontal size="xs" />
+                              </>
+                              : null}
+
+
+
+                            {itemTd.viewEdit ?
+                              <>
+                                <Icon
+                                  background="base"
+                                  name="edit"
+                                  onClick={(e) => { onClickActionEdit(e, item) }}
+                                />
+                                <Horizontal size="xs" />
+                              </>
+                              : null}
+
+                            {itemTd.viewEmailSend ?
+                              <>
+                                <Icon
+                                  background="base"
+                                  name="sendEmail"
+                                  // onClick={(e) => onClickEdit(e, item)}
+                                  onClick={e => { onClickActionSendEmail(e, item) }}
+                                />
+                                <Horizontal size="xs" />
+                              </>
+                              : null}
+
+                            {itemTd.viewTrash ?
+                              <>
+                                <Icon
+                                  background="base"
+                                  name="trash"
+                                  // onClick={(e) => onClickEdit(e, item)}
+                                  onClick={e => { onClickActionDelete(e, item) }}
+                                />
+                                <Horizontal size="xs" />
+                              </>
+                              : null}
+
+                          </td>
 
                           :
 
-                          itemTd.typeFilter === 'date'
+                          itemTd.subAccessor !== ''
 
                             ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>
-                              <Moment format="DD/MM/YYYY hh:mm:ss">
-                                {item[itemTd.accessor]}
-                              </Moment>
-                            </td>
+                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
 
                             :
 
-                            itemTd.typeFilter === 'select'
+                            itemTd.typeFilter === 'date'
 
                               ?
 
-                              itemTd.optionsSelect.map((itemSelect) => (
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>
+                                <Moment format="DD/MM/YYYY hh:mm:ss">
+                                  {item[itemTd.accessor]}
+                                </Moment>
+                              </td>
 
+                              :
 
-                                item[itemTd.accessor] === itemSelect.value ?
+                              itemTd.typeFilter === 'select'
 
-                                  <td className={getStyles('td')} key={[itemTd.accessor]}>
-                                    {itemSelect.label}
-                                  </td>
+                                ?
 
-                                  :
+                                itemTd.optionsSelect.map((itemSelect) => (
 
-                                  null
-                              ))
 
-                              :
+                                  item[itemTd.accessor] === itemSelect.value ?
 
-                              itemTd.typeFilter === 'number'
+                                    <td className={getStyles('td')} key={[itemTd.accessor]}>
+                                      {itemSelect.label}
+                                    </td>
 
-                                ?
+                                    :
+
+                                    null
+                                ))
+
+                                :
 
-                                itemTd.subTypeFilter
+                                itemTd.typeFilter === 'number'
 
                                   ?
 
-                                  itemTd.characterExtra === 'km'
+                                  itemTd.subTypeFilter
+
                                     ?
-                                    <td className={getStyles('td')} key={[itemTd.accessor]}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+
+                                    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].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]}</td>
 
-                                :
+                                  :
 
-                                itemTd.subTypeFilter
+                                  itemTd.subTypeFilter
 
-                                  ?
-                                  <td className={getStyles('td')} key={[itemTd.accessor]}>{Number(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]}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                    :
+                                    <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
                   ) : null
               ))}
@@ -167,14 +271,37 @@ export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onC
 RowTable.propTypes = {
   getStyles: PropTypes.func.isRequired,
   type: PropTypes.oneOf(options.types),
+  isClickRow: PropTypes.bool,
+  onClickRow: PropTypes.func,
+  onClickCheckbox: PropTypes.func,
+  onClickActionUserView: PropTypes.func,
+  onClickActionListInvoice: PropTypes.func,
+  onClickActionListXLS: PropTypes.func,
+  onClickActionListCSV: PropTypes.func,
+  onClickActionListPDF: PropTypes.func,
   onClickActionEdit: PropTypes.func,
   onClickActionSendEmail: PropTypes.func,
-  onClickActionDelete: PropTypes.func
+  onClickActionDelete: PropTypes.func,
+
+  isCheckedCheckbox: PropTypes.bool
 }
 
 RowTable.defaultProps = {
   getStyles: () => { },
+  isClickRow: false,
+  onClickRow: () => { },
+  onClickCheckbox: () => { },
+  onClickActionUserView: () => { },
+  onClickActionListInvoice: () => { },
+  onClickActionListXLS: () => { },
+  onClickActionListCSV: () => { },
+  onClickActionListPDF: () => { },
   onClickActionEdit: () => { },
+  onClickActionSendEmail: () => { },
+  onClickActionDelete: () => { },
+
+  isCheckedCheckbox: false
+
 }
 
 export default withStyles(styles)(RowTable)

package/molecules/RowTable/RowTable.module.css

@@ -25,4 +25,9 @@
   max-width: 80px;
   min-width: 80px;
   width: 80px;
+}
+
+.tr-content:hover {
+  background-color: #edf1fe;
+  cursor: pointer;
 }

package/molecules/RowTable/constants.js

@@ -72,6 +72,7 @@ export const options = {
             authorizationBreakValue6: "U0193271095",
             authorizationBreakValue7: "FACILITIES",
             iconUrl: "https://resources.callcenter.cab/img/travelprograms/imbric_taxi_satin.png",
+            idCheckbox: 'checkbox1'
         },
         {
             id: 346248955,
@@ -138,6 +139,7 @@ export const options = {
             authorizationBreakValue6: "U0193271095",
             authorizationBreakValue7: "FACILITIES",
             iconUrl: "https://resources.callcenter.cab/img/travelprograms/imbric_taxi_satin.png",
+            idCheckbox: 'checkbox2',
         },
         {
             id: 346248954,
@@ -204,6 +206,7 @@ export const options = {
             authorizationBreakValue6: "U0193271095",
             authorizationBreakValue7: "FACILITIES",
             iconUrl: "https://resources.callcenter.cab/img/travelprograms/imbric_taxi_satin.png",
+            idCheckbox: 'checkbox3'
         }
     ],
 
@@ -355,6 +358,34 @@ export const options = {
             nameInput: 'ID Proveedor',
             placeholder: 'ID Proveedor'
         },
+        {
+            activeView: true,
+            sortable: false,
+            accessor: 'idCheckbox',
+            subAccessor: '',
+            title: 'IdCheckbox',
+            viewIsFilter: false,
+            typeFilter: '',
+            subTypeFilter: false,
+            idInput: '',
+            nameInput: '',
+            placeholder: '',
+            isCheckbox: true,
+        },
+        // {
+        //     accessor: 'idCheckbox',
+        //     subAccessor: 'idCheckbox',
+        //     activeView: true,
+        //     idInput: 'idCheckbox',
+        //     nameInput: 'idCheckboxs',
+        //     placeholder: '',
+        //     sortable: false,
+        //     subTypeFilter: false,
+        //     title: '',
+        //     typeFilter: 'text',
+        //     viewIsFilter: false,
+        //     isCheckbox: true,
+        // },
         {
             accessor: 'action',
             subAccessor: 'action',
@@ -367,6 +398,11 @@ export const options = {
             title: '',
             typeFilter: 'text',
             viewIsFilter: false,
+            viewUserView: true,
+            viewListInvoice: true,
+            viewListXLS: true,
+            viewListCSV: true,
+            viewListPDF: true,
             viewEdit: true,
             viewTrash: true,
             viewEmailSend: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -59,7 +59,9 @@
     "react-moment": "1.1.2",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
+    "react-search-autocomplete": "7.2.2",
     "react-select": "5.3.2",
+    "react-spinners": "0.13.4",
     "sweetalert2": "11.4.14",
     "sweetalert2-react-content": "5.0.0",
     "yup": "0.32.11"

package/public/static/images/csv-svgrepo-com (1).svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+	<polygon points="8,11.2 8,9.6 4,9.6 3.2,9.6 3.2,10.4 3.2,16.8 3.2,17.6 4,17.6 8,17.6 8,16 4.8,16 4.8,11.2 	"/>
+	<path d="M20.8,21.6c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.6v2.4C1.6,22.9,2.7,24,4,24h16c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.6z"/>
+	<path d="M22.2,5l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6L17.1,0h-0.3H4C2.7,0,1.6,1.1,1.6,2.4V8h1.6V2.4C3.2,2,3.6,1.6,4,1.6h12.5l4.3,4.3V8
+		h1.6V5.6V5.3L22.2,5z"/>
+	<polygon points="9.6,16 9.6,17.6 13.6,17.6 14.4,17.6 14.4,16.8 14.4,13.6 14.4,12.8 13.6,12.8 11.2,12.8 11.2,11.2 14.4,11.2 
+		14.4,9.6 10.4,9.6 9.6,9.6 9.6,10.4 9.6,13.6 9.6,14.4 10.4,14.4 12.8,14.4 12.8,16 	"/>
+	<polygon points="16,9.6 16,15.2 16,15.5 16.2,15.8 16.8,15.2 16.8,15.2 16.2,15.8 17.8,17.4 18.4,17.9 19,17.4 20.6,15.8 
+		20.8,15.5 20.8,15.2 20.8,9.6 19.2,9.6 19.2,14.9 18.4,15.7 17.6,14.9 17.6,9.6 	"/>
+</g>
+</svg>

package/public/static/images/csv-svgrepo-com.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<polygon class="st0" points="3.2,9.3 1.9,10.5 3.2,10.5 "/>
+<rect x="4.1" y="20.8" class="st0" width="15.7" height="2"/>
+<path class="st0" d="M19.9,8.1V5.6h-3.9c-0.3,0-0.5-0.2-0.5-0.5V1.2H4.1v6.9v2.5h15.7V8.1z"/>
+<polygon class="st0" points="16.4,1.9 16.4,4.6 19.2,4.6 "/>
+<polygon class="st0" points="20.8,9.3 20.8,10.5 22.1,10.5 "/>
+<path class="st0" d="M3.6,11.5H1.2v8.4h21.6v-8.4h-2.5H3.6z M7.4,16.8c0.1,0.3,0.1,0.5,0.2,0.7c0.1,0.2,0.2,0.3,0.4,0.5
+	c0.2,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.3-0.2,0.4-0.4l0.6,0.7c-0.2,0.2-0.4,0.4-0.6,0.6S8.9,19,8.5,19
+	c-0.3,0-0.6-0.1-0.9-0.2s-0.5-0.4-0.7-0.6c-0.2-0.3-0.3-0.6-0.4-1c-0.1-0.4-0.2-0.8-0.2-1.2c0-0.5,0.1-0.9,0.2-1.2
+	c0.1-0.4,0.2-0.7,0.4-1c0.2-0.3,0.4-0.5,0.7-0.6c0.3-0.2,0.6-0.2,0.9-0.2c0.3,0,0.6,0.1,0.9,0.2c0.3,0.1,0.5,0.3,0.6,0.5l-0.6,0.7
+	c-0.2-0.3-0.5-0.5-0.9-0.5c-0.2,0-0.4,0.1-0.5,0.2c-0.2,0.1-0.3,0.3-0.4,0.5c-0.1,0.2-0.2,0.4-0.2,0.7c-0.1,0.3-0.1,0.5-0.1,0.8
+	C7.4,16.2,7.4,16.5,7.4,16.8z M11.7,15.1c0.2,0.1,0.3,0.3,0.6,0.4c0.1,0.1,0.3,0.2,0.4,0.3c0.2,0.1,0.3,0.2,0.4,0.3
+	c0.1,0.1,0.2,0.3,0.3,0.5s0.1,0.4,0.1,0.7c0,0.3,0,0.5-0.1,0.8c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.3,0.3-0.5,0.3
+	C12.3,19,12.1,19,11.9,19c-0.3,0-0.6-0.1-0.9-0.2c-0.3-0.1-0.5-0.3-0.7-0.5l0.5-0.7c0.1,0.2,0.3,0.3,0.5,0.4
+	c0.2,0.1,0.4,0.1,0.6,0.1c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.6c0-0.3-0.1-0.5-0.3-0.6c-0.2-0.2-0.4-0.3-0.6-0.4
+	c-0.2-0.1-0.3-0.2-0.5-0.3s-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.3,0-0.6,0.1-0.8
+	c0.1-0.2,0.2-0.4,0.4-0.5c0.2-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1c0.3,0,0.6,0,0.8,0.1c0.2,0.1,0.4,0.2,0.6,0.4l-0.6,0.7
+	c-0.2-0.3-0.5-0.4-0.8-0.4c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0.1-0.2,0.1c-0.1,0.1-0.1,0.2-0.2,0.3c0,0.1-0.1,0.2-0.1,0.4
+	C11.5,14.8,11.6,15,11.7,15.1z M16.5,18.9h-1.3L13.8,13h1.1l1,4.7h0l1-4.7H18L16.5,18.9z"/>
+<path d="M23.8,11c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0-0.1-0.1-0.1-0.1-0.1c0,0,0,0,0,0l-2.8-2.8V5.1c0,0,0,0,0,0c0,0,0-0.1,0-0.1
+	c0,0,0,0,0,0c0-0.1-0.1-0.1-0.1-0.1l-4.4-4.4c0,0-0.1-0.1-0.1-0.1c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0H3.6
+	c-0.3,0-0.5,0.2-0.5,0.5v7.2l-2.8,2.8c0,0,0,0,0,0c0,0-0.1,0.1-0.1,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0v9.3
+	c0,0.3,0.2,0.5,0.5,0.5h2.5v2.5c0,0.3,0.2,0.5,0.5,0.5h16.7c0.3,0,0.5-0.2,0.5-0.5v-2.5h2.5c0.3,0,0.5-0.2,0.5-0.5L23.8,11
+	C23.8,11,23.8,11,23.8,11z M20.8,9.3l1.3,1.3h-1.3V9.3z M16.4,1.9l2.7,2.7h-2.7V1.9z M4.1,8.1V1.2h11.3v3.9c0,0.3,0.2,0.5,0.5,0.5
+	h3.9v2.5v2.5H4.1V8.1z M3.2,9.3v1.3H1.9L3.2,9.3z M19.9,22.8H4.1v-2h15.7V22.8z M22.8,19.9H1.2v-8.4h2.5h16.7h2.5V19.9z"/>
+<path d="M11.7,13.9c0.1-0.1,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.3,0,0.6,0.1,0.8,0.4l0.6-0.7c-0.2-0.2-0.4-0.3-0.6-0.4
+	c-0.2-0.1-0.5-0.1-0.8-0.1c-0.2,0-0.4,0-0.6,0.1c-0.2,0.1-0.4,0.2-0.5,0.3c-0.2,0.1-0.3,0.3-0.4,0.5c-0.1,0.2-0.1,0.5-0.1,0.8
+	c0,0.2,0,0.5,0.1,0.6c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.2,0.2,0.4,0.3s0.3,0.2,0.5,0.3c0.3,0.1,0.5,0.3,0.6,0.4
+	c0.2,0.2,0.3,0.4,0.3,0.6c0,0.3-0.1,0.5-0.2,0.6c-0.1,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.3-0.2-0.5-0.4l-0.5,0.7
+	c0.2,0.2,0.4,0.4,0.7,0.5c0.3,0.1,0.6,0.2,0.9,0.2c0.2,0,0.4,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.3c0.2-0.2,0.3-0.3,0.4-0.6
+	c0.1-0.2,0.1-0.5,0.1-0.8c0-0.3,0-0.5-0.1-0.7s-0.2-0.3-0.3-0.5c-0.1-0.1-0.3-0.2-0.4-0.3c-0.2-0.1-0.3-0.2-0.4-0.3
+	c-0.2-0.1-0.4-0.3-0.6-0.4c-0.2-0.1-0.2-0.3-0.2-0.6c0-0.1,0-0.3,0.1-0.4C11.6,14.1,11.6,14,11.7,13.9z"/>
+<path d="M7.7,14.4C7.8,14.2,7.9,14,8,13.9c0.2-0.1,0.3-0.2,0.5-0.2c0.4,0,0.7,0.2,0.9,0.5l0.6-0.7c-0.2-0.2-0.4-0.4-0.6-0.5
+	c-0.3-0.1-0.6-0.2-0.9-0.2c-0.3,0-0.6,0.1-0.9,0.2c-0.3,0.2-0.5,0.4-0.7,0.6c-0.2,0.3-0.3,0.6-0.4,1c-0.1,0.4-0.2,0.8-0.2,1.2
+	c0,0.5,0.1,0.9,0.2,1.2c0.1,0.4,0.2,0.7,0.4,1c0.2,0.3,0.4,0.5,0.7,0.6S8.2,19,8.5,19c0.4,0,0.7-0.1,0.9-0.2s0.4-0.3,0.6-0.6
+	l-0.6-0.7c-0.1,0.1-0.2,0.3-0.4,0.4c-0.1,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.1-0.3-0.3-0.4-0.5
+	c-0.1-0.2-0.2-0.4-0.2-0.7c-0.1-0.3-0.1-0.5-0.1-0.8c0-0.3,0-0.6,0.1-0.8C7.5,14.8,7.6,14.6,7.7,14.4z"/>
+<polygon points="15.9,17.7 15.9,17.7 14.9,13 13.8,13 15.2,18.9 16.5,18.9 18,13 16.9,13 "/>
+</svg>

package/public/static/images/list-svgrepo-com.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M23.9,2.3H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h15c0,0,0.1,0,0.1-0.1L23.9,2.3C24,2.3,24,2.3,23.9,2.3z"/>
+		<circle cx="3.5" cy="12.5" r="1.9"/>
+		<circle cx="3.5" cy="20.8" r="1.9"/>
+		<path d="M9,6.3h7.1c0,0,0.1,0,0.1-0.1V4.9c0,0,0-0.1-0.1-0.1H9c0,0-0.1,0-0.1,0.1L9,6.3C8.9,6.3,9,6.3,9,6.3z"/>
+		<path d="M23.9,10.5H9c0,0-0.1,0-0.1,0.1V12C8.9,12,9,12,9,12h15c0,0,0.1,0,0.1-0.1L23.9,10.5C24,10.5,24,10.5,23.9,10.5z"/>
+		<path d="M9,14.6h7.1c0,0,0.1,0,0.1-0.1v-1.4c0,0,0-0.1-0.1-0.1H9c0,0-0.1,0-0.1,0.1L9,14.6C8.9,14.5,9,14.6,9,14.6z"/>
+		<path d="M23.9,18.7H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h15c0,0,0.1,0,0.1-0.1L23.9,18.7C24,18.8,24,18.7,23.9,18.7z"/>
+		<path d="M16.1,21.3H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h7.1c0,0,0.1,0,0.1-0.1L16.1,21.3C16.1,21.3,16.1,21.3,16.1,21.3z"
+			/>
+		<polygon points="2.6,4.3 1.4,3 0,4.3 1.3,5.6 2.6,7 4,5.6 7.1,2.6 5.7,1.2 		"/>
+	</g>
+</g>
+</svg>

package/public/static/images/pdf-svgrepo-com.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+	<path d="M4.8,14.4h0.8C7,14.4,8,13.3,8,12S7,9.6,5.6,9.6H4H3.3v0.8v3.2v4h1.6V14.4z M6.4,12c0,0.4-0.4,0.8-0.8,0.8H4.8v-1.6h0.8
+		C6.1,11.2,6.4,11.6,6.4,12z"/>
+	<path d="M20.7,21.5c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.7v2.4c0,1.3,1.1,2.4,2.4,2.4H20c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.5z"/>
+	<path d="M14.4,15.2V12c0-1.3-1.1-2.4-2.4-2.4h-1.6H9.6v0.8v6.4v0.8h0.8H12C13.3,17.6,14.4,16.5,14.4,15.2z M11.2,16v-4.8H12
+		c0.4,0,0.8,0.4,0.8,0.8v3.2c0,0.4-0.4,0.8-0.8,0.8H11.2z"/>
+	<polygon points="20.7,11.2 20.7,9.6 17.6,9.6 16.8,9.6 16,9.6 16,17.6 17.6,17.6 17.6,14.4 19.2,14.4 19.2,12.8 17.6,12.8 
+		17.6,11.2 	"/>
+	<path d="M22.1,5.1l-0.6,0.6l0,0L22.1,5.1l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6l-0.2-0.2h-0.3H4c-1.3,0-2.4,1.1-2.4,2.4V8h1.6V2.5
+		C3.3,2,3.6,1.7,4,1.7h12.4L20.7,6V8h1.6V5.6V5.3L22.1,5.1z"/>
+</g>
+</svg>

package/public/static/images/xls-svgrepo-com (1).svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+	<path d="M20.8,21.6c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.6v2.4C1.6,22.9,2.7,24,4,24h16c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.6z"/>
+	<polygon points="3.2,14.9 3.2,15.2 3.2,17.6 4.8,17.6 4.8,15.5 5.6,14.7 6.4,15.5 6.4,17.6 8,17.6 8,15.2 8,14.9 7.8,14.6 
+		6.7,13.6 7.8,12.6 8,12.3 8,12 8,9.6 6.4,9.6 6.4,11.7 5.6,12.5 4.8,11.7 4.8,9.6 3.2,9.6 3.2,12 3.2,12.3 3.4,12.6 4.5,13.6 
+		3.4,14.6 	"/>
+	<polygon points="16,16 16,17.6 20,17.6 20.8,17.6 20.8,16.8 20.8,13.6 20.8,12.8 20,12.8 17.6,12.8 17.6,11.2 20.8,11.2 20.8,9.6 
+		16.8,9.6 16,9.6 16,10.4 16,13.6 16,14.4 16.8,14.4 19.2,14.4 19.2,16 	"/>
+	<polygon points="9.6,9.6 9.6,16.8 9.6,17.6 10.4,17.6 14.4,17.6 14.4,16 11.2,16 11.2,9.6 	"/>
+	<path d="M22.2,5l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6L17.1,0h-0.3H4C2.7,0,1.6,1.1,1.6,2.4V8h1.6V2.4C3.2,2,3.6,1.6,4,1.6h12.5l4.3,4.3V8
+		h1.6V5.6V5.3L22.2,5z"/>
+</g>
+</svg>

package/public/static/images/xls-svgrepo-com.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M23.8,11c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0-0.1-0.1-0.1-0.1-0.1c0,0,0,0,0,0l-2.8-2.8V5.1c0,0,0,0,0,0c0,0,0-0.1,0-0.1
+			c0,0,0,0,0,0c0-0.1-0.1-0.1-0.1-0.1l-4.4-4.4c0,0-0.1-0.1-0.1-0.1c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0H3.6
+			c-0.3,0-0.5,0.2-0.5,0.5v7.2l-2.8,2.8c0,0,0,0,0,0c0,0-0.1,0.1-0.1,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0v9.3
+			c0,0.3,0.2,0.5,0.5,0.5h2.5v2.5c0,0.3,0.2,0.5,0.5,0.5h16.7c0.3,0,0.5-0.2,0.5-0.5v-2.5h2.5c0.3,0,0.5-0.2,0.5-0.5L23.8,11
+			C23.8,11,23.8,11,23.8,11z M22.1,10.5h-1.3V9.3L22.1,10.5z M19.2,4.6h-2.7V1.9L19.2,4.6z M4.1,1.2h11.3v3.9c0,0.3,0.2,0.5,0.5,0.5
+			h3.9v2.5v2.5H4.1V8.1V1.2z M3.2,9.3v1.3H1.9L3.2,9.3z M19.9,22.8H4.1v-2h15.7V22.8z M22.8,19.9H1.2v-8.4h2.5h16.7h2.5V19.9z"/>
+		<polygon points="12.2,13 11.2,13 11.2,18.9 13.8,18.9 13.8,18 12.2,18 		"/>
+		<path d="M15.4,13.9c0.1-0.1,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.3,0,0.6,0.1,0.8,0.4l0.6-0.7c-0.2-0.2-0.4-0.3-0.6-0.4
+			c-0.2-0.1-0.5-0.1-0.8-0.1c-0.2,0-0.4,0-0.6,0.1c-0.2,0.1-0.4,0.2-0.5,0.3c-0.2,0.1-0.3,0.3-0.4,0.5c-0.1,0.2-0.1,0.5-0.1,0.8
+			c0,0.2,0,0.5,0.1,0.6c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.2,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.5,0.3c0.3,0.1,0.5,0.3,0.6,0.4
+			c0.2,0.2,0.3,0.4,0.3,0.6c0,0.3-0.1,0.5-0.2,0.6c-0.1,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.3-0.2-0.5-0.4L14,18.4
+			c0.2,0.2,0.4,0.4,0.7,0.5C15,19,15.3,19,15.6,19c0.2,0,0.4,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.3c0.2-0.2,0.3-0.3,0.4-0.6
+			c0.1-0.2,0.1-0.5,0.1-0.8c0-0.3,0-0.5-0.1-0.7c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1-0.1-0.3-0.2-0.4-0.3c-0.2-0.1-0.3-0.2-0.4-0.3
+			c-0.2-0.1-0.4-0.3-0.6-0.4c-0.2-0.1-0.2-0.3-0.2-0.6c0-0.1,0-0.3,0.1-0.4C15.3,14.1,15.4,14,15.4,13.9z"/>
+		<polygon points="10.4,13 9.4,13 8.5,15 7.6,13 6.6,13 7.9,15.8 6.4,18.9 7.5,18.9 8.5,16.6 9.5,18.9 10.5,18.9 9,15.8 		"/>
+	</g>
+</g>
+</svg>

package/public/static/images/email-svgrepo-com.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<g>
-	<path d="M24,5.8h-8.2v1.5h6.7v1L12,14.7L1.5,8.3V7.3h6.6V5.8H0v16.9h24V5.8z M22.5,19.7l-5.2-6.5l5.2-3.2V19.7z M12,16.3
-		c0.1,0,0.3,0,0.4-0.1L16,14l5.7,7.1H2.3L8,14l3.6,2.2C11.7,16.3,11.9,16.3,12,16.3z M6.7,13.2l-5.2,6.5v-9.6L6.7,13.2z"/>
-	<polygon points="12.7,10.8 12.7,5.2 14.7,5.2 12,1.4 9.3,5.2 11.3,5.2 11.3,10.8 	"/>
-</g>
-</svg>