adding layout menus

src/navigation/global/screens.js

+import { Package, Briefcase, HardDrive, Globe, Flag } from 'react-feather'
+
+export default [
+  {
+    id: 'screens',
+    title: 'Screens',
+    icon: <Package />,
+    children: [
+      {
+        id: 'layoutmenusDash',
+        title: 'layout menus',
+        icon: <Briefcase />,
+        navLink: '/screens/layoutmenus'
+      }
+    ]
+  }
+]
\ No newline at end of file

src/navigation/horizontal/index.js

@@ -8,10 +8,12 @@ import formsAndTables from './forms-tables'
 import chartsAndMaps from './charts-maps'
 
 import settings from './settings'
+import screens from '../global/screens'
 
 // ** Merge & Export
 export default [
     // ...dashboards,
+    ...screens,
     ...settings
     // ...apps,
     // ...uiElements,

src/navigation/vertical/index.js

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

src/redux/reducers/rootReducer.js

@@ -15,6 +15,8 @@ import ecommerce from '@src/views/apps/ecommerce/store/reducer'
 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'
+
 
 const rootReducer = combineReducers({
   auth,
@@ -28,6 +30,7 @@ const rootReducer = combineReducers({
   calendar,
   ecommerce,
   dataTables,
+  screens,
   projectsettings
 })
 

src/router/routes/index.js

@@ -10,6 +10,7 @@ import ExtensionsRoutes from './Extensions'
 import PageLayoutsRoutes from './PageLayouts'
 
 import SettingsRoutes from './Settings'
+import ScreensRoutes from './screens'
 
 // ** Document title
 const TemplateTitle = '%s - Vuexy React Admin Template'
@@ -29,6 +30,7 @@ const Routes = [
   ...TablesRoutes,
   ...ChartMapsRoutes,
 
+  ...ScreensRoutes,
   ...SettingsRoutes
 ]
 

src/router/routes/screens.js

+import { lazy } from 'react'
+import { Redirect } from 'react-router-dom'
+
+const ScreensRoutes = [
+  // 
+
+  {
+    path: '/screens/layoutmenus/edit',
+    exact: true,
+    component: () => <Redirect to='/screens/layoutmenus/edit/1' />
+  },
+  {
+    path: '/screens/layoutmenus/add',
+    component: lazy(() => import('../../views/screens/layoutmenus/add')),
+    meta: {
+      navLink: '/screens/layoutmenus/add'
+    }
+  },
+  {
+    path: '/screens/layoutmenus',
+    component: lazy(() => import('../../views/screens/layoutmenus'))
+  }
+  
+]
+
+export default ScreensRoutes
\ No newline at end of file

src/views/screens/layoutmenus/add/index.js

+// ** React Imports
+import { Fragment } from 'react'
+import { Link } from 'react-router-dom'
+
+// ** Store & Actions
+import { addlayoutmenu } from '../../store/actions'
+import { useDispatch } from 'react-redux'
+
+// ** Custom Components
+import Breadcrumbs from '@components/breadcrumbs'
+
+// ** Third Party Components
+import { Row, Col } from 'reactstrap'
+
+
+// ** Tables
+import ElementCard from '../card'
+// ** Styles
+import '@styles/react/libs/tables/react-dataTable-component.scss'
+
+const Tables = () => {
+    const dispatch = useDispatch()
+    const onSubmitHandler = values => {
+            dispatch(
+              addlayoutmenu({
+                id: values.id,
+                name: values.name
+            })
+            )
+          
+        }
+
+  return (
+    <Fragment>
+       <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive='Layout menus' />
+      <Row>
+        <Col sm='12'>
+          <Link to="/screens/layoutmenus">Back to layout menus</Link>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm='12'>
+           <div class="card">
+             <div class="card-header">
+                <h4 class="card-title">New layout menu</h4>
+               </div>
+               <div class="card-body">
+                  <ElementCard selectedProject={{
+                    id: '<generate>',
+                    name: '',
+                    slug: ''
+                        }}
+                    onSubmitHandler={onSubmitHandler}
+                    />
+               </div>
+           </div>
+        
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}
+
+export default Tables

src/views/screens/layoutmenus/card/index.js

+// ** React Imports
+import { useState, useEffect, Fragment } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { toast } from 'react-toastify'
+import Avatar from '@components/avatar'
+
+import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, CardHeader, CardTitle, CardText } from 'reactstrap'
+import { isObjEmpty } from '@utils'
+
+import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
+
+
+// ** Store & Actions
+import {  updateProject, resetResults, getPlatform  } from '../../store/actions'
+
+import { useForm } from 'react-hook-form'
+import classnames from 'classnames'
+
+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'
+
+
+const SuccessProgressToast = () => (
+  <Fragment>
+    <div className='toastify-header'>
+      <div className='title-wrapper'>
+        <Avatar size='sm' color='success' icon={<Check size={12} />} />
+        <h6 className='toast-title'>Saved !</h6>
+      </div>
+      <small className='text-muted'></small>
+    </div>
+    <div className='toastify-body'>
+      <span role='img' aria-label='toast-text'>
+        👋 Good job.
+      </span>
+    </div>
+  </Fragment>
+)
+
+
+const ElementCard = ({ selectedProject, onSubmitHandler }) => {
+  const store = useSelector(state => state.projectsettings)
+  const [PlatformName, setPlatformName] = useState('Web')
+
+  const MySwal = withReactContent(Swal)
+
+  
+const handleError = (text) => {
+  return MySwal.fire({
+    title: 'Error!',
+    text,
+    icon: 'error',
+    customClass: {
+      confirmButton: 'btn btn-primary'
+    },
+    buttonsStyling: false
+  })
+}
+
+  const  [dataProject, setProjectData] = useState(null),
+     { register, errors, handleSubmit } = useForm(),
+      dispatch = useDispatch(),
+     notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
+      onSubmit = values => {
+      if (isObjEmpty(errors)) { 
+          onSubmitHandler({
+            id: null,
+            name :PlatformName
+          })
+        }
+      }
+
+
+  useEffect(() => {
+    if (selectedProject !== null || (selectedProject !== null && dataProject !== null && selectedProject.id !== dataProject.id)) {
+      return setProjectData(selectedProject) 
+    }
+  }, [selectedProject])
+
+  useEffect(() => { 
+    if (store.errorMsg !== '') {
+      handleError(store.errorMsg)
+      dispatch(resetResults())
+    }
+  }, [store.errorMsg]) 
+
+  useEffect(() => { 
+    if (store.saveSucces) {
+      notifySuccessProgress()
+      dispatch(resetResults())
+    }
+  }, [store.saveSucces]) 
+
+
+return (
+  <Fragment>
+    <Form  
+     onSubmit={handleSubmit(onSubmit)}
+    >
+    <Row>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='email'>ID</Label>
+          <Input 
+            readOnly={true} 
+            type='text' 
+            name='id' 
+            id='id' 
+            innerRef={register({ required: true })}
+            placeholder='id' 
+            defaultValue={dataProject && dataProject.id}  
+            />
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='name'>Name</Label>
+          <Input 
+            type='text' 
+            name='name'
+            id='name'
+            innerRef={register({ required: true })} 
+            placeholder='Name' 
+            defaultValue={dataProject && dataProject.name} 
+            className={classnames({ 'is-invalid': errors['name'] })}
+            />
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='slug'>Slug</Label>
+          <Input 
+            type='text' 
+            name='slug'
+            id='slug'
+            innerRef={register({ required: true })} 
+            placeholder='Slug' 
+            defaultValue={dataProject && dataProject.slug}
+            className={classnames({ 'is-invalid': errors['slug'] })}
+            />
+        </FormGroup>
+      </Col>
+      {/* <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='email'>Email</Label>
+          <Input disabled='disabled' type='text' id='email' placeholder='Email' defaultValue={ProjectData && ProjectData.email} />
+        </FormGroup>
+      </Col> */}
+      {/* <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='name'>Name</Label>
+          <Input type='select' name='name' id='name' defaultValue={dataProject && dataProject.name} onChange={e => setPlatformName(e.target.value)}>
+            <option value='Web'>Web</option>
+            <option value='iOS Phone'>iOS Phone</option>
+            <option value='iOS Tablet'>iOS Tablet</option>
+            <option value='Android Phone'>Android Phone</option>
+            <option value='Android Tablet'>Android Tablet</option>
+          </Input>
+        </FormGroup>
+      </Col>  */}
+
+    
+      <Col className='d-flex flex-sm-row flex-column mt-2' sm='12'>
+        <Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='submit' color='primary'>
+          Save Changes
+        </Button.Ripple>
+        {/* <Button.Ripple color='secondary' outline  onClick={() => dispatch(getPlatform(selectedProject.id))} >
+          Reset
+        </Button.Ripple> */}
+      </Col>
+    </Row>
+  </Form>
+  </Fragment>
+)
+
+}
+
+export default ElementCard
\ No newline at end of file

src/views/screens/layoutmenus/data.js

+// ** Custom Components
+import Avatar from '@components/avatar'
+
+// ** 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: 'Name',
+    selector: 'name',
+    sortable: true,
+    minWidth: '225px'
+  },
+  {
+    name: 'Slug',
+    selector: 'slug',
+    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/screens/layoutmenus/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 ProjectsEdit from './main'
+// ** Styles
+import '@styles/react/libs/tables/react-dataTable-component.scss'
+
+const Tables = () => {
+  return (
+    <Fragment>
+       <Breadcrumbs breadCrumbTitle='Settings' breadCrumbParent='Settings' breadCrumbActive='Platforms' />
+      <Row>
+        <Col sm='12'>
+          <Link to="/settings/platforms">Back to Platforms</Link>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm='12'>
+           <div class="card">
+             <div class="card-header">
+                <h4 class="card-title">Platform</h4>
+               </div>
+               <div class="card-body">
+                  <ProjectsEdit />
+               </div>
+           </div>
+        
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}
+
+export default Tables

src/views/screens/layoutmenus/edit/main.js

+import { useState, useEffect, Fragment } from 'react'
+import { useParams, Link } from 'react-router-dom'
+ 
+// ** Store & Actions
+import { getProject, updateProject } from '../../store/actions'
+import { useSelector, useDispatch } from 'react-redux'
+
+
+import { Alert } from 'reactstrap'
+
+import  ElementCard from '../card'
+
+const ProjectsEdit = () => {
+    // ** States & Vars
+    const store = useSelector(state => state.projectsettings),
+      [dataProject, setProjectData] = useState(null),
+      dispatch = useDispatch(),
+      { id } = useParams()
+
+    const onSubmitHandler = values => {
+      dispatch(
+          updateProject({
+              id: values.id,
+              app_name: values.app_name,
+              customer_name: values.customer_name
+          })
+        )
+      
+      }
+
+    // ** Function to get user on mount
+    useEffect(() => {
+      dispatch(getProject(id))
+    }, [dispatch])
+
+
+          // ** Update user image on mount or change
+  useEffect(() => {
+    if (store.selectedProject !== null || (store.selectedProject !== null && dataProject !== null && store.selectedProject.id !== dataProject.id)) {
+      return setProjectData(store.selectedProject) 
+    }
+  }, [store.selectedProject])
+
+   
+  return store.selectedProject !== null && store.selectedProject !== undefined  ? (
+    <ElementCard 
+      selectedProject={store.selectedProject} 
+      onSubmitHandler={onSubmitHandler} 
+    /> 
+  ) : (
+    <Alert color='info'>
+      <h4 className='alert-heading'>Loading Project</h4>
+      <div className='alert-body'>
+        If Project with id: {id} doesn't exist. Check list of all Projects: <Link to='/settings/projects'>Projects List</Link>
+      </div>
+
+    </Alert>
+  )
+  }
+export default ProjectsEdit

src/views/screens/layoutmenus/edit/plataform.js

+import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert } from 'reactstrap'
+
+import { Lock, Edit, Trash2 } from 'react-feather'
+
+
+const ProjectPlatform = ({dataElement}) => {
+ console.log(dataElement)
+return (
+    <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>Platforms</th> 
+            <th>Locked</th> 
+            <th>Menu start status</th>
+            <th>Min version</th>
+            <th>Menu orientation</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+            <td>IOS</td>
+            <td>
+                <CustomInput type='checkbox' id='admin-1' label='' defaultChecked />
+            </td>
+            
+            </tr>
+            <tr>
+            <td>Android</td>
+            <td>
+                <CustomInput type='checkbox' id='staff-1' label='' />
+            </td>
+            
+            </tr>
+            <tr>
+            <td>Android Tv</td>
+            <td>
+                <CustomInput type='checkbox' id='author-1' label='' defaultChecked />
+            </td>
+            
+            </tr>
+            <tr>
+            <td>Roku</td>
+            <td>
+                <CustomInput type='checkbox' id='contributor-1' label='' />
+            </td>
+            </tr>
+            <tr>
+            <td>STV</td>
+            <td>
+                <CustomInput type='checkbox' id='user-1' label='' />
+            </td>
+            </tr>
+        </tbody>
+        </Table>
+    </div>
+    )
+}
+export default ProjectPlatform

src/views/screens/layoutmenus/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'
+
+const Tables = () => {
+  return (
+    <Fragment>
+      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive='Layout Menus' />
+      <Row>
+        <Col sm='12'>
+          <DataTable />
+        </Col>
+      </Row>
+        </Fragment>
+  )
+  }
+
+export default Tables

src/views/screens/layoutmenus/table.js

+import { Fragment, useState, useEffect, memo } from 'react'
+
+// ** Table Columns
+import { serverSideColumns } from './data'
+// ** Store & Actions
+import { getData_layoutmenus } from '../store/actions'
+import { useSelector, useDispatch } from 'react-redux'
+
+import DataTableServerSide from '@components/datatable'
+
+const DataTable = () => {
+    // ** Store Vars
+    const dispatch = useDispatch()
+    const store = useSelector(state => state.screens)
+
+    return (
+        <DataTableServerSide 
+            cardTitle='Layout Menus'
+            allData={store.allDataLayoutMenus}
+            getData={getData_layoutmenus} 
+            serverSideColumns={serverSideColumns}
+            linkAddButton='/screens/layoutmenus/add'
+            total={store.totalLayoutMenus}
+         />
+
+    )
+  
+}
+
+export default memo(DataTable)

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

+import axios from 'axios'
+
+
+export const resetResults = id => {
+    return async dispatch => {
+      dispatch({
+        type: 'RESET_RESULTS',
+        saveSucces: false,
+        errorMsg: ''
+      })
+    }
+  }
+
+// ** Get table Data ///api/datatables/data
+export const getData_layoutmenus = params => {
+    console.log(params)
+    return async dispatch => { 
+      await axios.get(`${process.env.REACT_APP_API}/api/layoutmenus`, {params}
+      ).then(response => {
+        dispatch({
+          type: 'GET_DATA_LAYOUT_MENUS', 
+          allData: response.data.data,
+          // datalayoumenus: response.data.invoices,
+          totalPages: response.data.recordsTotal, 
+          params: response.data.params
+        })
+      })
+    }
+  }
+
+  export const addlayoutmenu = layoumenu => {
+    return (dispatch, getState) => {
+      axios
+        .post(`${process.env.REACT_APP_API}/api/layoutmenus`, layoumenu)
+        .then(response => {
+          dispatch({
+            type: 'ADD_LAYOUTMENU',
+            layoumenu
+          })
+        })
+        .then(() => {
+          dispatch(setSaveSatus(true))
+          // dispatch(getlayoumenu(layoumenu.id))
+          // dispatch(getData_layoumenus())
+        })
+        .catch(err => { 
+          dispatch(setErrorMsg(err.response.data.message))
+          console.log(err.response.data)
+        })
+    }
+  }  
+  
\ No newline at end of file

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

+// ** Initial State
+const initialState = {
+    saveSucces: false,
+    errorMsg: '',
+    data: [],
+    total: 1,
+    params: {},
+    allData: [],
+  
+    dataLayoutMenus: [],
+    totalLayoutMenus: 1,
+    paramsLayoutMenus: {},
+    allDataLayoutMenus: [],
+    selectedLayoutMenu: null
+}
+
+const screens = (state = initialState, action) => {
+    switch (action.type) {
+      case 'GET_DATA':
+        return {
+          ...state,
+          allData: action.allData,
+          data: action.data,
+          total: action.totalPages,
+          params: action.params
+        }
+  
+      case 'SAVE_STATUS':
+          return {
+            ...state,
+            saveSucces: action.status
+        }  
+      case 'SAVE_ERROR':
+          return {
+            ...state,
+            errorMsg: action.errorMsg
+        }
+      case  'RESET_RESULTS':
+        return {
+          ...state,
+          saveSucces: false,
+          errorMsg: ''
+        }
+  
+      case 'GET_DATA_LAYOUT_MENUS':
+        
+        return {
+          ...state,
+          allDataLayoutMenus: action.allData,
+          dataLayoutMenus: action.data,
+          totalLayoutMenus: action.totalPages, 
+          paramsLayoutMenus: action.params
+        }
+       case 'ADD_LAYOUTMENU':
+            return { ...state } 
+
+      default:
+            return state
+        
+      }
+    
+}
+
+export default screens