adding menupages (incomplete)

src/navigation/global/pages.js

+import { Package, Briefcase, HardDrive, Globe, Flag } from 'react-feather'
+
+export default [
+  {
+    id: 'Pages',
+    title: 'Pages',
+    icon: <Package />,
+    children: [
+      {
+        id: 'menuspagesDash',
+        title: 'Menus pages',
+        icon: <Briefcase />,
+        navLink: '/menupages/mainpages'
+      }
+    ]
+  }
+]
\ No newline at end of file

src/navigation/horizontal/index.js

 // ** Navigation sections imports
 import apps from './apps'
-import pages from './pages'
+// import templatepages from './templatepages'
 import others from './others'
 import dashboards from './dashboards'
 import uiElements from './ui-elements'
@@ -9,11 +9,13 @@ import chartsAndMaps from './charts-maps'
 
 import settings from './settings'
 import screens from '../global/screens'
+import menupages from '../global/pages'
 
 // ** Merge & Export
 export default [
     // ...dashboards,
     ...screens,
+    ...menupages,
     ...settings
     // ...apps,
     // ...uiElements,

src/navigation/horizontal/settings.js

@@ -14,13 +14,13 @@ export default [
       },
       {
         id: 'platformsDash',
-        title: 'platforms',
+        title: 'Platforms',
         icon: <HardDrive />,
         navLink: '/settings/platforms'
       },
       {
         id: 'pagetypesDash',
-        title: 'pagetypes',
+        title: 'Page types',
         icon: <HardDrive />,
         navLink: '/settings/pagetypes'
       }

src/navigation/vertical/index.js

 // ** Navigation sections imports
 import apps from './apps'
-import pages from './pages'
+// import templatepages from './templatepages'
 import forms from './forms'
 import tables from './tables'
 import others from './others'
@@ -10,12 +10,14 @@ import chartsAndMaps from './charts-maps'
 
 import settings from './settings'
 import screens  from '../global/screens'
+import pages  from '../global/pages'
 
 
 // ** Merge & Export
 export default [
     // ...dashboards,
     ...screens,
+    ...pages,
     ...settings
     // ...apps,
     // ...pages,

src/redux/reducers/rootReducer.js

@@ -16,7 +16,7 @@ import dataTables from '@src/views/tables/data-tables/store/reducer'
 
 import projectsettings from '@src/views/settings/store/reducer'
 import screens from '@src/views/screens/store/reducer'
-
+import menupages from '@src/views/menupages/store/reducer'
 
 const rootReducer = combineReducers({
   auth,
@@ -31,7 +31,8 @@ const rootReducer = combineReducers({
   ecommerce,
   dataTables,
   screens,
-  projectsettings
+  projectsettings,
+  menupages
 })
 
 export default rootReducer

src/router/routes/index.js

@@ -11,6 +11,7 @@ import PageLayoutsRoutes from './PageLayouts'
 
 import SettingsRoutes from './Settings'
 import ScreensRoutes from './screens'
+import MenuPagesRoutes from './menupages'
 
 // ** Document title
 const TemplateTitle = '%s - Vuexy React Admin Template'
@@ -31,6 +32,7 @@ const Routes = [
   ...ChartMapsRoutes,
 
   ...ScreensRoutes,
+  ...MenuPagesRoutes,
   ...SettingsRoutes
 ]
 

src/router/routes/menupages.js

+import { lazy } from 'react'
+import { Redirect } from 'react-router-dom'
+
+const MenuPagesRoutes = [
+  // settingss
+
+  {
+    path: '/menupages/mainpages/edit',
+    exact: true,
+    component: () => <Redirect to='/menupages/mainpages/edit/1' />
+  },
+  {
+    path: '/menupages/mainpages/edit/:id',
+    component: lazy(() => import('../../views/menupages/mainpages/edit')),
+    meta: {
+      navLink: '/menupages/mainpages/edit'
+    }
+  },
+  {
+    path: '/menupages/mainpages/add',
+    component: lazy(() => import('../../views/menupages/mainpages/add')),
+    meta: {
+      navLink: '/menupages/mainpages/add'
+    }
+  },
+  {
+    path: '/menupages/mainpages',
+    component: lazy(() => import('../../views/menupages/mainpages'))
+  }
+ 
+]
+
+export default MenuPagesRoutes

src/views/menupages/mainpages/add/index.js

+// ** React Imports
+import { Fragment } from 'react'
+import { Link } from 'react-router-dom'
+
+// ** Store & Actions
+import { addmenupages } from '../../store/actions'
+import { useDispatch } from 'react-redux'
+
+// ** Custom Components
+import Breadcrumbs from '@components/breadcrumbs'
+
+// ** Third Party Components
+import { Row, Col } from 'reactstrap'
+
+// module settings
+import moduleSettings from '../module'
+// ** Tables
+import ElementCard from '../card'
+// ** Styles
+import '@styles/react/libs/tables/react-dataTable-component.scss'
+
+const Tables = () => {
+    const dispatch = useDispatch()
+    const onSubmitHandler = values => {
+            dispatch(
+              addmenupages({ 
+                name: values.name,
+                slug: values.slug,
+                view_all: values.view_all,
+                search: values.search,
+                seasons_carousel: values.seasons_carousel,
+                episodes_carousel: values.episodes_carousel,
+                related_movies: values.related_movies,
+                related_series: values.related_series,
+                player_related: values.player_related,
+                live_TV: values.live_TV,
+                my_stuff: values.my_stuff,
+                pages: values.pages,
+                platforms:  values.platforms
+            })
+            )
+          
+        }
+
+  return (
+    <Fragment>
+       <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
+      <Row>
+        <Col sm='12'>
+          <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm='12'>
+           <div className="card">
+             <div className="card-header">
+                <h4 className="card-title">New {moduleSettings.mainTitleSingle}</h4>
+               </div>
+               <div className="card-body">
+                  <ElementCard selectedElement={{
+                        id: '<generate>',
+                        name: '',
+                        slug: '',
+                        platforms: []
+                        }}
+                    onSubmitHandler={onSubmitHandler}
+                    />
+               </div>
+           </div>
+        
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}
+
+export default Tables

src/views/menupages/mainpages/card/plataform.js

+import { Fragment, useState, useEffect, useRef, memo } from 'react'
+import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, UncontrolledButtonDropdown } from 'reactstrap'
+
+// ** Store & Actions
+import { useDispatch } from 'react-redux'
+// ** Store & Actions
+import { getData_platforms } from  '../../../settings/store/actions'
+
+import { Lock, Edit, Trash2 } from 'react-feather'
+import { useForm } from 'react-hook-form'
+import classnames from 'classnames'
+import { circle } from 'leaflet'
+
+import moduleSettings from '../module'
+
+const ElementPlatform = ({dataElement, setElement, store}) => {
+    const dispatch = useDispatch(),
+        { register, errors, handleSubmit } = useForm()
+    const [plataforms, setPlataforms] = useState(null),
+    [selectedOption, setSelectedOption] = useState(null),
+    platformsIDs = [0]
+    
+
+    // console.log(dataElement)
+    // console.log(store)
+
+    // ** Function to get user on mount
+    useEffect(() => {
+        if (!store.allDataPlatforms || store.allDataPlatforms.length < 1) {
+              dispatch(getData_platforms({
+                start: 1,
+                length: 1000,
+                q: null
+            }))
+            }
+        }, [dispatch])
+
+    useEffect(() => {
+        setPlataforms(store.allDataPlatforms)
+        
+    }, [store.allDataPlatforms])
+
+    const handleGridChange = (value, index, field) => {
+        // console.log([value, index, field])
+
+        const newData = dataElement.platforms.map((platform, i) => {
+
+            if (i === index) platform.pivot[field] = value
+            // if (i === index) {   
+            //     if (field === 'type') platform.pivot.type = value      
+            //      if (field === 'slug') platform.pivot.slug = value
+                
+            // }
+
+        })
+        setElement(
+            {
+              ...dataElement
+            })
+    }
+
+return !!dataElement ?  (
+    <div clssName='permissions border mt-1'>   
+        <h6 className='py-1 mx-1 mb-0 font-medium-2'>
+        <Lock size={18} className='mr-25' />
+        <span className='align-middle'>Platforms</span>
+        </h6>
+         
+        <Table borderless striped responsive>
+        <thead className='thead-light'>
+            <tr>
+                <th>plataform</th>
+                
+                {
+                    Object.keys(moduleSettings.newElement).map(name => {
+                        return (
+                            <th>{name.split('_').join(' ')}</th>
+                        )
+                    })
+                }
+            </tr>
+        </thead>
+
+        <tbody>
+                {
+                !!dataElement && !!dataElement.platforms && dataElement.platforms.map((platform, index) => {
+                     const plataformsOptions = platform.pivot,
+                     locked = plataformsOptions.locked
+                     platformsIDs.push(`${platform.id}`)
+                    return (
+                        <tr  key={platform.id}>
+                            <td>{platform.name}</td>
+                            {
+                    Object.keys(moduleSettings.newElement).map(name => {
+                        return (
+                                <td >
+                                    <Input 
+                                        type={moduleSettings.elementsOption[name] ? 'select' : 'text'} 
+                                        name={name} 
+                                        id={name}
+                                        innerRef={register({ required: true })} 
+                                        placeholder='0' 
+                                        defaultValue={plataformsOptions && plataformsOptions[name]} 
+                                        className={classnames({ 'is-invalid': errors[{name}] })}
+                                        onChange={(e) => handleGridChange(e.target.value, index, name)}
+                                        >
+                                            {moduleSettings.elementsOption[name] ? moduleSettings.elementsOption[name].map((name, key) => {
+                                                return (
+                                                    <option key={key} name={name}>{name}</option>
+                                                )
+                                            }) : <span></span> }
+                                    </Input>         
+                                </td>
+                                )
+                            })
+                        }
+                         
+                            
+                        </tr>  
+                    )
+                })   
+                }
+        </tbody>
+        </Table>
+        
+        <Col md='12' sm='12'>
+            <br />
+        </Col>
+        <Row>
+       
+        <Col md='4' sm='4'>
+        <FormGroup>
+          <Label for='addoption'>Add Platforms</Label>
+          <Input type='select'  name='addoption' id='addoption' onChange={(e) => setSelectedOption(e.target.value)}>>
+            <option></option>
+            {!!plataforms && plataforms.map(option => {
+               
+                return  <option key={option.id} value={`${option.id}.${option.name}`}>{option.name}</option>
+            })}
+          </Input>
+          </FormGroup>
+      </Col>
+      <Col md='3' sm='4'>
+        <FormGroup>
+         <Label for='addoptionbutton'>&nbsp;</Label>
+         <Button.Ripple color='secondary' name="addoptionbutton" outline asyncOptions={e => console.log(e.getOptions)
+         } onClick={() => {
+             if (!selectedOption) return
+             const plataform = selectedOption.split('.')
+             if (platformsIDs.indexOf(plataform[0]) > 0) return
+             const elementAdded =   dataElement.platforms.push({ 
+                name:plataform[1],
+                id: plataform[0],
+                key: plataform[0],
+                pivot: moduleSettings.newElement
+               })
+             setElement(
+                 {
+                    ...dataElement,
+                    elementAdded
+                 }
+       
+             )
+
+         }} >
+          add
+        </Button.Ripple>
+        </FormGroup>
+      </Col>
+      
+      </Row> 
+    </div>
+    ) : (
+        <Fragment>
+
+        </Fragment>
+    )
+}
+export default ElementPlatform

src/views/menupages/mainpages/data.js

+// ** React Imports
+import { Link } from 'react-router-dom'
+
+// import { cleanLayoutMenu } from '../store/actions'
+import { store } from '@store/storeConfig/store'
+
+// ** Custom Components
+import Avatar from '@components/avatar'
+// module settings
+import moduleSettings from './module'
+
+// ** Third Party Components
+import axios from 'axios'
+import { MoreVertical, Edit, FileText, Archive, Trash } from 'react-feather'
+import { Badge, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'
+
+// ** Vars
+const states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary']
+
+const status = {
+  1: { title: 'Current', color: 'light-primary' },
+  2: { title: 'Professional', color: 'light-success' },
+  3: { title: 'Rejected', color: 'light-danger' },
+  4: { title: 'Resigned', color: 'light-warning' },
+  5: { title: 'Applied', color: 'light-info' }
+}
+
+export let data
+
+// ** Get initial Data
+axios.get('/api/datatables/initial-data').then(response => {
+  data = response.data
+})
+
+// ** Table Zero Config Column
+export const basicColumns = [
+  {
+    name: 'ID',
+    selector: 'id',
+    sortable: true,
+    maxWidth: '100px'
+  },
+  {
+    name: 'Name',
+    selector: 'name',
+    sortable: true,
+    minWidth: '225px'
+  },
+  {
+    name: 'Email',
+    selector: 'email',
+    sortable: true,
+    minWidth: '310px'
+  },
+  {
+    name: 'Position',
+    selector: 'post',
+    sortable: true,
+    minWidth: '250px'
+  },
+  {
+    name: 'Age',
+    selector: 'age',
+    sortable: true,
+    minWidth: '100px'
+  },
+  {
+    name: 'Salary',
+    selector: 'salary',
+    sortable: true,
+    minWidth: '175px'
+  }
+]
+
+// ** Expandable table component
+const ExpandableTable = ({ data }) => {
+  return (
+    <div className='expandable-content p-2'>
+      <p>
+        <span className='font-weight-bold'>City:</span> {data.city}
+      </p>
+      <p>
+        <span className='font-weight-bold'>Experience:</span> {data.experience}
+      </p>
+      <p className='m-0'>
+        <span className='font-weight-bold'>Post:</span> {data.post}
+      </p>
+    </div>
+  )
+}
+
+// ** Table Common Column
+export const columns = [
+  {
+    name: 'Name',
+    selector: 'name',
+    sortable: true,
+    minWidth: '250px',
+    cell: row => (
+      <div className='d-flex align-items-center'>
+        {row.avatar === '' ? (
+          <Avatar color={`light-${states[row.status]}`} content={row.full_name} initials />
+        ) : (
+          <Avatar img={require(`@src/assets/images/portrait/small/avatar-s-${row.avatar}`).default} />
+        )}
+        <div className='user-info text-truncate ml-1'>
+          <span className='d-block font-weight-bold text-truncate'>{row.full_name}</span>
+          <small>{row.post}</small>
+        </div>
+      </div>
+    )
+  },
+  {
+    name: 'Status',
+    selector: 'status',
+    sortable: true,
+    minWidth: '150px',
+    cell: row => {
+      return (
+        <Badge color={status[row.status].color} pill>
+          {status[row.status].title}
+        </Badge>
+      )
+    }
+  },
+  {
+    name: 'Actions',
+    allowOverflow: true,
+    cell: row => {
+      return (
+        <div className='d-flex'>
+          <UncontrolledDropdown>
+            <DropdownToggle className='pr-1' tag='span'>
+              <MoreVertical size={15} />
+            </DropdownToggle>
+            <DropdownMenu right>
+              <DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
+                <FileText size={15} />
+                <span className='align-middle ml-50'>Details</span>
+              </DropdownItem>
+              <DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
+                <Archive size={15} />
+                <span className='align-middle ml-50'>Archive</span>
+              </DropdownItem>
+              <DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
+                <Trash size={15} />
+                <span className='align-middle ml-50'>Delete</span>
+              </DropdownItem>
+            </DropdownMenu>
+          </UncontrolledDropdown>
+          <Edit size={15} />
+        </div>
+      )
+    }
+  }
+]
+
+// ** Table Intl Column
+export const multiLingColumns = [
+  {
+    name: 'Name',
+    selector: 'name',
+    sortable: true,
+    minWidth: '200px'
+  },
+  {
+    name: 'Status',
+    selector: 'status',
+    sortable: true,
+    minWidth: '150px',
+    cell: row => {
+      return (
+        <Badge color={status[row.status].color} pill>
+          {status[row.status].title}
+        </Badge>
+      )
+    }
+  },
+  {
+    name: 'Actions',
+    allowOverflow: true,
+    cell: row => {
+      return (
+        <div className='d-flex'>
+          <UncontrolledDropdown>
+            <DropdownToggle className='pr-1' tag='span'>
+              <MoreVertical size={15} />
+            </DropdownToggle>
+            <DropdownMenu right>
+              <DropdownItem>
+                <FileText size={15} />
+                <span className='align-middle ml-50'>Details</span>
+              </DropdownItem>
+              <DropdownItem>
+                <Archive size={15} />
+                <span className='align-middle ml-50'>Archive</span>
+              </DropdownItem>
+              <DropdownItem>
+                <Trash size={15} />
+                <span className='align-middle ml-50'>Delete</span>
+              </DropdownItem>
+            </DropdownMenu>
+          </UncontrolledDropdown>
+          <Edit size={15} />
+        </div>
+      )
+    }
+  }
+]
+
+// ** Table Server Side Column
+export const serverSideColumns = [
+  {
+    name: 'ID',
+    selector: 'id',
+    sortable: true,
+    minWidth: '25px'
+  },
+  {
+    name: 'System name',
+    selector: 'system_name',
+    sortable: true,
+    minWidth: '225px',
+    cell: row => (
+      <div className='d-flex justify-content-left align-items-center'>
+        
+        <div className='d-flex flex-column'>
+          <Link
+            to={`${moduleSettings.baseURL}/edit/${row.id}`}
+            className='user-name text-truncate mb-0'
+            // onClick={() => store.dispatch(cleanLayoutMenu(row.id))}
+          >
+            <span className='font-weight-bold'>{row.system_name}</span>
+          </Link>
+          <small className='text-truncate text-muted mb-0'>edit</small>
+        </div>
+      </div>
+    )
+  },
+  {
+    name: 'Order',
+    selector: 'order',
+    sortable: true,
+    minWidth: '225px'
+  }
+  
+]
+
+// ** Table Adv Search Column
+export const advSearchColumns = [
+  {
+    name: 'Name',
+    selector: 'full_name',
+    sortable: true,
+    minWidth: '200px'
+  },
+  {
+    name: 'Email',
+    selector: 'email',
+    sortable: true,
+    minWidth: '250px'
+  },
+  {
+    name: 'Post',
+    selector: 'post',
+    sortable: true,
+    minWidth: '250px'
+  },
+  {
+    name: 'City',
+    selector: 'city',
+    sortable: true,
+    minWidth: '150px'
+  },
+  {
+    name: 'Date',
+    selector: 'start_date',
+    sortable: true,
+    minWidth: '150px'
+  },
+
+  {
+    name: 'Salary',
+    selector: 'salary',
+    sortable: true,
+    minWidth: '100px'
+  }
+]
+
+export default ExpandableTable

src/views/menupages/mainpages/edit/index.js

+// ** React Imports
+import { Fragment } from 'react'
+import { Link } from 'react-router-dom'
+
+// ** Custom Components
+import Breadcrumbs from '@components/breadcrumbs'
+
+// ** Third Party Components
+import { Row, Col } from 'reactstrap'
+
+// ** Tables
+import ElementEdit from './main'
+// ** Styles
+import '@styles/react/libs/tables/react-dataTable-component.scss'
+// module settings
+import moduleSettings from '../module'
+
+const Tables = () => {
+  return (
+    <Fragment>
+      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
+      <Row>
+        <Col sm='12'>
+          <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm='12'>
+           <div className="card">
+             <div className="card-header">
+                <h4 className="card-title">{moduleSettings.mainTitleSingle}</h4>
+               </div>
+               <div className="card-body">
+                  <ElementEdit />
+               </div>
+           </div>
+        
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}
+
+export default Tables

src/views/menupages/mainpages/edit/main.js

+import { useState, useEffect, Fragment } from 'react'
+import { useParams, Link } from 'react-router-dom'
+ 
+// ** Store & Actions
+import { getmenupages, updatemenupages } from '../../store/actions'
+import { useSelector, useDispatch } from 'react-redux'
+
+
+import { Alert } from 'reactstrap'
+
+import  ElementCard from '../card'
+// module settings
+import moduleSettings from '../module'
+
+
+const ElementEdit = () => {
+    // ** States & Vars
+    const store = useSelector(state => state.menupages),
+      [dataElement, setElementData] = useState(null),
+      dispatch = useDispatch(),
+      { id } = useParams()
+
+    const onSubmitHandler = values => {
+      dispatch(
+          updatemenupages({
+              ...dataElement,
+              id: values.id,
+              name: values.name,
+              slug: values.slug,
+              platforms: values.platforms,
+              view_all: values.view_all,
+              search: values.search,
+              seasons_carousel: values.seasons_carousel,
+              episodes_carousel: values.episodes_carousel,
+              related_movies: values.related_movies,
+              related_series: values.related_series,
+              player_related: values.player_related,
+              live_TV: values.live_TV,
+              my_stuff: values.my_stuff,
+              pages: values.pages
+          })
+        )
+      
+      }
+
+    // ** Function to get user on mount
+    useEffect(() => {
+      dispatch(getmenupages(id))
+    }, [dispatch])
+
+
+          // ** Update user image on mount or change
+  useEffect(() => {
+    if (store.selectedMenuPage !== null || (store.selectedMenuPage !== null && dataElement !== null && store.selectedMenuPage.id !== dataElement.id)) {
+      return setElementData(store.selectedMenuPage) 
+    }
+  }, [store.selectedMenuPage])
+
+   
+  return store.selectedMenuPage !== null && store.selectedMenuPage !== undefined  ? (
+    <ElementCard 
+      selectedElement={store.selectedMenuPage} 
+      onSubmitHandler={onSubmitHandler} 
+    /> 
+  ) : (
+    <Alert color='info'>
+      <h4 className='alert-heading'>Loading {moduleSettings.mainTitleSingle}</h4>
+      <div className='alert-body'>
+        If {moduleSettings.mainTitleSingle} with id: {id} doesn't exist. Check list of all {moduleSettings.mainTitle}: <Link to={moduleSettings.baseURL}>{moduleSettings.mainTitle} List</Link>
+      </div>
+
+    </Alert>
+  )
+  }
+export default ElementEdit

src/views/menupages/mainpages/index.js

+// ** React Imports
+import { Fragment } from 'react'
+
+// ** Custom Components
+import Breadcrumbs from '@components/breadcrumbs'
+
+// ** Third Party Components
+import { Row, Col } from 'reactstrap'
+
+// ** Tables
+import DataTable from './table'
+// ** Styles
+import '@styles/react/libs/tables/react-dataTable-component.scss'
+// module settings
+import moduleSettings from './module'
+
+const Tables = () => {
+  return (
+    <Fragment>
+      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
+      <Row>
+        <Col sm='12'>
+          <DataTable />
+        </Col>
+      </Row>
+        </Fragment>
+  )
+  }
+
+export default Tables

src/views/menupages/mainpages/module.js

+const moduleSettings = {
+    mainTitle: 'Menus Pages',
+    mainTitleSingle: 'Menu Page',
+    apiBaseURL: '/api/menupages',
+    baseURL: '/menupages/mainpages',
+    newElement: {
+        slug: 0,
+        type: 0
+    },
+    elementsOption: {
+    }
+}
+
+export default moduleSettings
\ No newline at end of file

src/views/menupages/mainpages/table.js

+import { Fragment, useState, useEffect, memo } from 'react'
+
+// ** Table Columns
+import { serverSideColumns } from './data'
+// ** Store & Actions
+import { getData_menupages } from '../store/actions'
+import { useSelector, useDispatch } from 'react-redux'
+
+import DataTableServerSide from '@components/datatable'
+// module settings
+import moduleSettings from './module'
+const DataTable = () => {
+    // ** Store Vars
+    const dispatch = useDispatch()
+    const store = useSelector(state => state.menupages)
+
+    return (
+        <DataTableServerSide 
+            cardTitle={moduleSettings.mainTitle}
+            allData={store.allDataMenuPages}
+            getData={getData_menupages} 
+            serverSideColumns={serverSideColumns}
+            linkAddButton={`${moduleSettings.baseURL}/add`} 
+            total={store.totalMenuPages}
+         />
+
+    )
+  
+}
+
+export default memo(DataTable)

src/views/menupages/store/actions/index.js

+export * from './pages'
+
+
+export const resetResults = id => {
+  return async dispatch => {
+  dispatch({
+      type: 'RESET_RESULTS',
+      saveSucces: false,
+      errorMsg: ''
+  })
+  }
+}
\ No newline at end of file

src/views/menupages/store/actions/pages.js

+import axios from 'axios'
+import {setSaveSatus, setErrorMsg} from '../../../../redux/actions/api'
+import moduleSettings  from '../../mainpages/module'
+
+
+// ** Get table Data ///api/datatables/data
+
+
+const _getData_menupages = params => {
+
+    return async dispatch => {
+      await axios.get(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, {params}
+      ).then(response => {
+        dispatch({
+          type: 'GET_DATA_MENUPAGES', 
+          allData: response.data.data,
+          // datalayoumenus: response.data.invoices,
+          totalPages: response.data.recordsTotal, 
+          params: response.data.params
+        })
+      })
+    }
+  }
+export const getData_menupages = params => {
+    const newparams = {
+      ...params,
+      idproject: 2
+      }
+      return _getData_menupages(newparams)
+  }  
+
+  export const addmenupages = params => {
+    return (dispatch, getState) => {
+      const newparam = addProject(params)
+      console.log(newparams)
+      axios
+        .post(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, newparams)
+        .then(response => {
+          dispatch({
+            type: 'ADD_MENUPAGE',
+            params: newparams
+          })
+        })
+        .then(() => {
+          dispatch(setSaveSatus(true))
+          // dispatch(getlayoumenu(layoumenu.id))
+          // dispatch(getData_layoumenus())
+        })
+        .catch(err => { 
+          const errosMsg = !err.response ? 'error' : err.response.data.message
+          console.log(errosMsg)
+          dispatch(setErrorMsg(errosMsg))
+          
+        })
+    }
+  }  
+
+  export const getmenupages = id => {
+    return async dispatch => {
+      await axios
+        .get(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${id}`)
+        .then(response => {
+          // console.log('leu')
+          //  console.log(response)
+          dispatch({
+            type: 'GET_MENUPAGE',
+            data: response.data.data
+          })
+        })
+        .catch(err => console.log(err))
+    }
+  }  
+
+  export const cleanmenupages = id => {
+    return async dispatch => {
+      dispatch({
+        type: 'GET_MENUPAGES',
+        data: null
+      })
+    }
+  }
+  
+  export const updatemenupages = params => {
+    return (dispatch, getState) => {
+      axios
+        .put(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${params.id}`, params)
+        .then(response => {
+          dispatch({
+            type: 'UPDATE_MENUPAGES',
+            params
+          })
+        })
+        .then(() => {
+          dispatch(setSaveSatus(true))
+        })
+        .catch(err => { 
+          const errosMsg = !err.response ? 'error' : err.response.data.message
+          console.log(errosMsg)
+          dispatch(setErrorMsg(errosMsg))
+        })
+    }
+  }
\ No newline at end of file

src/views/menupages/store/reducer/index.js

+// ** Initial State
+const initialState = {
+    saveSucces: false,
+    errorMsg: '',
+    data: [],
+    total: 1,
+    params: {},
+    allData: [],
+  
+    dataMenuPages: [],
+    totalMenuPages: 1,
+    paramsMenuPages: {},
+    allDataMenuPages: [],
+    selectedMenuPage: null
+
+}
+
+const menupages = (state = initialState, action) => {
+    switch (action.type) {
+
+      case 'SAVE_STATUS':
+          return {
+            ...state,
+            saveSucces: action.status
+        }  
+      case 'SAVE_ERROR':
+          return {
+            ...state,
+            errorMsg: action.errorMsg
+        }
+      case  'RESET_RESULTS':
+        return {
+          ...state,
+          saveSucces: false,
+          errorMsg: ''
+        }
+  // layout menus
+      case 'GET_DATA_MENUPAGES':
+        return {
+          ...state,
+          allDataMenuPages: action.allData,
+          dataMenuPages: action.data,
+          totalMenuPages: action.totalPages, 
+          paramsMenuPages: action.params
+        }
+      case 'ADD_MENUPAGES':
+          return { ...state } 
+          case 'GET_PROJECT':
+            return { ...state,  
+              selectedMenuPage : action.data
+            }
+      case 'GET_MENUPAGE':
+        return { ...state,  
+          selectedMenuPage : action.data
+        }
+    
+      case 'UPDATE_MENUPAGE':
+        return { ...state } 
+        
+      case 'ADD_MENUPAGE':
+        return { ...state }        
+
+        // default
+      default:
+            return state
+        
+      }
+    
+}
+
+export default menupages