* init playlist

* manage menu playlist fix

src/redux/reducers/rootReducer.js

@@ -17,6 +17,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'
+import playlists from '@src/views/playlists/store/reducer'
 
 const rootReducer = combineReducers({
   auth,
@@ -32,7 +33,8 @@ const rootReducer = combineReducers({
   dataTables,
   screens,
   projectsettings,
-  menupages
+  menupages,
+  playlists
 })
 
 export default rootReducer

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

@@ -18,6 +18,7 @@ import TabLayoutPlaylist from './tablayoutplaylists'
 import {resetResults} from '../../store/actions'
 import { getData_pagetypes } from  '../../../settings/store/actions'
 import { getData_layoutmenus } from  '../../../screens/store/actions'
+import { getData_playlists } from  '../../../playlists/store/actions'
 
 
 import { useForm } from 'react-hook-form'
@@ -49,7 +50,9 @@ const SuccessProgressToast = () => (
 
 const ElementCard = ({ selectedElement, onSubmitHandler }) => {
   const store = useSelector(state => state.projectsettings)
-  const [PlatformName, setPlatformName] = useState('Web')
+  const [PlatformName, setPlatformName] = useState('Web'),
+  [projectPlaylists, setProjectPlaylists] = useState(null)
+
 
   const MySwal = withReactContent(Swal)
 
@@ -70,6 +73,7 @@ const handleError = (text) => {
      { register, errors, handleSubmit } = useForm(),
      settingStore = useSelector(state => state.projectsettings),
      screensStore = useSelector(state => state.screens),
+     playlistsStore = useSelector(state => state.playlists),
      [pagetypes, setPagetypes] = useState(null),
      [layoumenu, setLayoumenu] = useState(null),
      [activeTab, setActiveTab] = useState(0),
@@ -102,7 +106,8 @@ const handleError = (text) => {
           id: '<generated>',
           layout_id: null,
           order: 1,
-          page_id: dataElement.id
+          page_id: dataElement.id,
+          playlists: []
         })
         setElementData(newData)
         setActiveTab(newData.menu_page_layouts.length - 1)
@@ -139,6 +144,13 @@ const handleError = (text) => {
             q: null
         }))
         }
+    if (playlistsStore.allDataPlaylists === null || playlistsStore.allDataPlaylists.length < 1) {
+          dispatch(getData_playlists({
+              start: 0,
+              length: 1000,
+              q: ''
+          }))
+          }    
     }, [dispatch])
   useEffect(() => {
       setPagetypes(settingStore.allDataPagetypes)
@@ -158,7 +170,6 @@ const handleError = (text) => {
     setLayoumenu(screensStore.allDataLayoutMenus)
   }, [screensStore.allDataLayoutMenus])  
 
-
 return (
   <Fragment>
     <Form  
@@ -346,7 +357,7 @@ return (
               >
                 {!!dataElement && dataElement.menu_page_layouts.map((block, index) => {
                   return <TabPane tabId={index}>
-                        <TabLayoutPlaylist block={block} selectedDataElement={dataElement}  setElementData={setElementData} />
+                        <TabLayoutPlaylist block={block} selectedDataElement={dataElement} setElementData={setElementData} />
                       </TabPane>
                     }
                   )

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

@@ -6,7 +6,7 @@ import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
 import { useForm } from 'react-hook-form'
 import classnames from 'classnames'
 
-import { getData_menupagesplaylists, updatemenupages } from '../../store/actions'
+import { getData_playlists } from '../../../playlists/store/actions'
 import DataTableServerSide from '@components/datatable'
 import { element } from 'prop-types'
 
@@ -28,7 +28,7 @@ const serverSideColumns = [
    
 
 const ManagePlaylist = (dataElement) => { 
-    const store = useSelector(state => state.menupages),
+    const store = useSelector(state => state.playlists),
     [avaliablePlaylists, setavaliablePlaylists] = useState([]),
     [selectedPlaylists, setSelectedPlaylists] = useState([]),
     dispatch = useDispatch()
@@ -44,7 +44,7 @@ const ManagePlaylist = (dataElement) => {
         } 
     const getData_selectedPlaylists = (params) => {
         return (dispatch) => {
-            if (params.q === '') {
+            if (params.q === null || params.q === '') {
                 setSelectedPlaylists(dataElement.dataElement) 
                 return
             }
@@ -52,9 +52,43 @@ const ManagePlaylist = (dataElement) => {
             setSelectedPlaylists(newValue)
         }
     }    
+    const getData_avaliablePlaylists = (params) => {
+        return (dispatch) => {
+            const Ids = selectedPlaylists.map(elem => elem.id),
+            tabPlaylists =  store.allDataPlaylists.filter(element => !Ids.includes(element.id))
+            
+            if (params.q === null || params.q === '') {
+                setavaliablePlaylists(tabPlaylists) 
+                return
+            }
+           
+            const newValue = tabPlaylists.filter(element => element.title.includes(params.q))
+            setavaliablePlaylists(newValue)
+        }
+    }   
         
-    const  serverSideColumnsLeft = [
-            ...serverSideColumns,
+    useEffect(() => {
+        const Ids = selectedPlaylists.map(elem => elem.id)
+        const filtered = store.allDataPlaylists.filter(element => !Ids.includes(element.id))
+        setavaliablePlaylists(filtered)
+      }, [store.allDataPlaylists])    
+    useEffect(() => {
+       if (selectedPlaylists === null) return
+        const Ids = selectedPlaylists.map(elem => elem.id) 
+        const filtered = store.allDataPlaylists.filter(element => !Ids.includes(element.id))
+        setavaliablePlaylists(filtered)
+      }, [selectedPlaylists])
+
+    useEffect(() => {
+          if (dataElement !== null  && dataElement.dataElement !== null) {
+             setSelectedPlaylists(dataElement.dataElement)   
+          } 
+
+    }, [dataElement])
+
+
+      const  serverSideColumnsLeft = [
+        ...serverSideColumns,
             {
             name: 'Action',
             selector: 'Action',
@@ -74,44 +108,27 @@ const ManagePlaylist = (dataElement) => {
                 )
             }
         ]        
-    const  serverSideColumnsRight = [
-        ...serverSideColumns,
-        {
-        name: 'Action',
-        selector: 'Action',
-        sortable: true,
-        minWidth: '25px',
-        cell: row => (
-            <div className='d-flex justify-content-left align-items-center'>
-                
-                <div className='d-flex flex-column'>
-                <Button className='user-name text-truncate mb-0'
-                    onClick={() => { handleAdd(row) }}
-                >
-                    <span className='font-weight-bold'>Add</span>
-                </Button>
+        const  serverSideColumnsRight = [
+            ...serverSideColumns,
+            {
+            name: 'Action',
+            selector: 'Action',
+            sortable: true,
+            minWidth: '25px',
+            cell: row => (
+                <div className='d-flex justify-content-left align-items-center'>
+                    
+                    <div className='d-flex flex-column'>
+                    <Button className='user-name text-truncate mb-0'
+                        onClick={() => { handleAdd(row) }}
+                    >
+                        <span className='font-weight-bold'>Add</span>
+                    </Button>
+                    </div>
                 </div>
-            </div>
-            )
-        }
-    ]   
-        
-    useEffect(() => {
-        const Ids = selectedPlaylists.map(elem => elem.id)
-        const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id))
-        setavaliablePlaylists(filtered)
-      }, [store.allDataMenuPages])    
-    useEffect(() => {
-        const Ids = selectedPlaylists.map(elem => elem.id)
-        const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id))
-        setavaliablePlaylists(filtered)
-      }, [selectedPlaylists])
-
-      useEffect(() => {
-          if (dataElement !== null  && dataElement.dataElement !== null) {
-             setSelectedPlaylists(dataElement.dataElement)   
-          } 
-      }, [dataElement])
+                )
+            }
+        ]   
 
     return <div className="card">
         <div className="card-header">
@@ -120,23 +137,23 @@ const ManagePlaylist = (dataElement) => {
         <div className="card-body">
             <Row>
                 <Col sm='6'>
-                    <DataTableServerSide 
+                   {selectedPlaylists && <DataTableServerSide 
                         cardTitle='Content'
                         allData={selectedPlaylists}
                         getData={getData_selectedPlaylists} 
                         serverSideColumns={serverSideColumnsLeft}
                         // linkAddButton={`/add`} 
                         total={selectedPlaylists.length}
-                    />
+                    /> }
                 </Col>
                 <Col sm='6'>
                     <DataTableServerSide 
                         cardTitle='List to add'
                         allData={avaliablePlaylists}
-                        getData={getData_menupagesplaylists} 
+                        getData={getData_avaliablePlaylists} 
                         serverSideColumns={serverSideColumnsRight}
                         // linkAddButton={`/add`} 
-                        total={store.totalMenuPages}
+                        total={store.totalPlaylists}
                     />
 
                 </Col>

src/views/playlists/projectplaylists/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({ 
+                idproject: values.idproject,
+                system_name: values.system_name,
+                last_seen: values.last_seen,
+                layout_page_id: values.layout_page_id,
+                type: values.type,
+                display: values.display,
+                pagetypeid: values.pagetypeid,
+                order: values.order,
+                menu_page_layouts: values.menu_page_layouts
+            })
+            )
+          
+        }
+
+  return (
+    <Fragment>
+       <Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' 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>',
+                        idproject: '2',
+                        system_name: '',
+                        last_seen: '',
+                        layout_page_id: '',
+                        type: '',
+                        display: '',
+                        pagetypeid: '',
+                        order: '0',
+                        menu_page_layouts: []
+                        }}
+                    onSubmitHandler={onSubmitHandler}
+                    />
+               </div>
+           </div>
+        
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}
+
+export default Tables

src/views/playlists/projectplaylists/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'
+
+import TabLayoutPlaylist from './tablayoutplaylists'
+
+
+// ** Store & Actions
+import {resetResults} from '../../store/actions'
+import { getData_pagetypes } from  '../../../settings/store/actions'
+import { getData_layoutmenus } from  '../../../screens/store/actions'
+
+
+import { useForm } from 'react-hook-form'
+import classnames from 'classnames'
+
+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'
+
+// ** Styles
+import '@styles/react/apps/app-users.scss'
+
+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 = ({ selectedElement, 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  [dataElement, setElementData] = useState(null),
+     { register, errors, handleSubmit } = useForm(),
+     settingStore = useSelector(state => state.projectsettings),
+     screensStore = useSelector(state => state.screens),
+     [pagetypes, setPagetypes] = useState(null),
+     [layoumenu, setLayoumenu] = useState(null),
+     [activeTab, setActiveTab] = useState(0),
+     //
+     toggle = tab => setActiveTab(tab),
+     dispatch = useDispatch(),
+     notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
+     onSubmit = values => {
+      if (isObjEmpty(errors)) {
+        const submitElement = {
+          ...dataElement,
+          idproject: values.idproject,
+          system_name: values.system_name,
+          last_seen: values.last_seen,
+          layout_page_id: values.layout_page_id,
+          type: values.type,
+          display: values.display,
+          pagetypeid: values.pagetypeid,
+          order: values.order
+        }
+        onSubmitHandler(submitElement)
+    
+        }
+      },
+     handleAddBlock = () => {
+        if (!dataElement) return
+
+        const newData  = dataElement
+        newData.menu_page_layouts.push({
+          id: '<generated>',
+          layout_id: null,
+          order: 1,
+          page_id: dataElement.id
+        })
+        setElementData(newData)
+        setActiveTab(newData.menu_page_layouts.length - 1)
+       console.log(newData)
+        } 
+
+
+  useEffect(() => {
+    if (selectedElement !== null || (selectedElement !== null && dataElement !== null && selectedElement.id !== dataElement.id)) {
+      return setElementData(selectedElement) 
+    }
+  }, [selectedElement])
+
+  useEffect(() => { 
+    if (store.errorMsg !== '') {
+      handleError(store.errorMsg)
+      dispatch(resetResults())
+    }
+  }, [store.errorMsg]) 
+
+  useEffect(() => { 
+    if (store.saveSucces) {
+      notifySuccessProgress()
+      dispatch(resetResults())
+    }
+  }, [store.saveSucces]) 
+
+// populate page types
+  useEffect(() => {
+    if (!settingStore.allDataPagetypes || settingStore.allDataPagetypes.length < 1) {
+          dispatch(getData_pagetypes({
+            start: 1,
+            length: 1000,
+            q: null
+        }))
+        }
+    }, [dispatch])
+  useEffect(() => {
+      setPagetypes(settingStore.allDataPagetypes)
+  }, [settingStore.allDataPagetypes])  
+
+  // populate layout menus
+  useEffect(() => {
+    if (!screensStore.allDataLayoutMenus || screensStore.allDataLayoutMenus.length < 1) {
+          dispatch(getData_layoutmenus({
+            start: 1,
+            length: 1000,
+            q: null
+        }))
+        }
+    }, [dispatch])
+  useEffect(() => {
+    setLayoumenu(screensStore.allDataLayoutMenus)
+  }, [screensStore.allDataLayoutMenus])  
+
+
+return (
+  <Fragment>
+    <Form  
+     onSubmit={handleSubmit(onSubmit)}
+    >
+    <Row>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='id'>ID</Label>
+          <Input 
+            readOnly={true} 
+            type='text' 
+            name='id' 
+            id='id'   
+            placeholder='id' 
+            defaultValue={dataElement && dataElement.id}  
+            />
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='name'>Project ID</Label>
+          <Input
+            readOnly={true}  
+            type='text' 
+            name='idproject'
+            id='idproject'
+            innerRef={register({ required: true })} 
+            placeholder='idproject' 
+            defaultValue={dataElement && dataElement.idproject} 
+            className={classnames({ 'is-invalid': errors['idproject'] })}
+            />
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='system_name'>System name</Label>
+          <Input 
+            type='text' 
+            name='system_name'
+            id='system_name'
+            innerRef={register({ required: true })} 
+            placeholder='system_name' 
+            defaultValue={dataElement && dataElement.system_name}
+            className={classnames({ 'is-invalid': errors['system_name'] })}
+            />
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='layout_page_id'>Layout page</Label>
+          <Input 
+            type='select' 
+            name='layout_page_id'
+            id='layout_page_id'
+            innerRef={register({ required: true })} 
+            placeholder='layout_page_id' 
+            defaultValue={dataElement && dataElement.layout_page_id}
+            className={classnames({ 'is-invalid': errors['layout_page_id'] })}
+            >
+              {!!layoumenu ? layoumenu.map(option => {
+              return  <option key={option.id} 
+                selected={option.id === dataElement.layout_page_id ? option.id : ''}
+                value={option.id}>{option.name}</option>
+          }) : <option>Loading</option> }
+        </Input>
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='type'>type</Label>
+          <Input 
+            type='select' 
+            name='type'
+            id='type'
+            innerRef={register({ required: true })} 
+            placeholder='type' 
+            defaultValue={dataElement && dataElement.type}
+            className={classnames({ 'is-invalid': errors['type'] })}
+            >
+              <option value='master'>Master</option>
+              <option value='child'>Child</option>
+          </Input>    
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='display'>display</Label>
+          <Input 
+            type='select' 
+            name='display'
+            id='display'
+            innerRef={register({ required: true })} 
+            placeholder='display' 
+            defaultValue={dataElement && dataElement.display}
+            className={classnames({ 'is-invalid': errors['display'] })}
+            >
+              <option value='icon_text'>Icon Text</option>
+              <option value='icon'>Icon</option>
+              <option value='text'>Text</option>
+          </Input>
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='pagetypeid'>Page Type</Label>
+          <Input 
+            type='select' 
+            name='pagetypeid'
+            id='pagetypeid'
+            innerRef={register({ required: true })} 
+            placeholder='pagetypeid' 
+            defaultValue={dataElement && dataElement.pagetypeid}
+            className={classnames({ 'is-invalid': errors['pagetypeid'] })}
+            >
+            {!!pagetypes ? pagetypes.map(option => {
+               
+                return  <option key={option.id} 
+                  selected={option.id === dataElement.pagetypeid}
+                  value={option.id}>{option.type}</option>
+            }) : <option>Loading</option> }
+          </Input>
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='order'>order</Label>
+          <Input 
+            type='text' 
+            name='order'
+            id='order'
+            innerRef={register({ required: true })} 
+            placeholder='order' 
+            defaultValue={dataElement && dataElement.order}
+            className={classnames({ 'is-invalid': errors['order'] })}
+            />
+        </FormGroup>
+      </Col>
+      <Col md='4' sm='12'>
+        <FormGroup>
+          <Label for='last_seen'>last_seen</Label>
+          <Input 
+            readOnly={true}
+            type='text' 
+            name='last_seen'
+            id='last_seen'
+            innerRef={register({ required: false })} 
+            placeholder='last_seen' 
+            defaultValue={dataElement && dataElement.last_seen}
+            className={classnames({ 'is-invalid': errors['last_seen'] })}
+            />
+        </FormGroup>
+      </Col>
+    </Row>
+
+    <Row className='app-user-edit'>
+      <Col sm='12'>
+        <Card>
+          <CardBody className='pt-2'>
+         
+            <h4 className="card-title">Blocks</h4>
+            <Nav pills>
+              
+                {dataElement && dataElement.menu_page_layouts.map((block, index) => {
+                  return  <NavItem>
+                            <NavLink key={index}
+                              active={activeTab === index} 
+                              onClick={() => toggle(index)}
+                              >
+                              <span className='align-middle d-none d-sm-block'>Blocks {index + 1}</span>
+                            </NavLink>
+                      </NavItem>
+                   })}
+              <NavItem>
+                  <NavLink  
+                    className='btn-primary' 
+                    onClick={() => handleAddBlock()}
+                    >
+                   <span className='align-middle d-none d-sm-block'>+ add New </span>
+                  </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent 
+               activeTab={activeTab}
+              >
+                {!!dataElement && dataElement.menu_page_layouts.map((block, index) => {
+                  return <TabPane tabId={index}>
+                        <TabLayoutPlaylist block={block} selectedDataElement={dataElement}  setElementData={setElementData} />
+                      </TabPane>
+                    }
+                  )
+                }
+                <TabPane tabId={dataElement ? dataElement.menu_page_layouts.length : 0}>
+                  <div 
+                  // selectedUser={store.selectedUser} 
+                    >
+                       
+                      </div>
+                </TabPane>
+            </TabContent>  
+          </CardBody>  
+        </Card>     
+      </Col>
+    </Row>
+
+    <Row className='app-user-edit'>
+      <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(selectedElement.id))} >
+          Reset
+        </Button.Ripple> */}
+      </Col>
+    </Row>
+  </Form>
+  </Fragment>
+)
+
+}
+
+export default ElementCard
\ No newline at end of file

src/views/playlists/projectplaylists/card/manageplaylist.js

+import { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+// ** Third Party Components
+import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
+import { useForm } from 'react-hook-form'
+import classnames from 'classnames'
+
+import { getData_menupagesplaylists, updatemenupages } from '../../store/actions'
+import DataTableServerSide from '@components/datatable'
+import { element } from 'prop-types'
+
+// ** Table Server Side Column
+const serverSideColumns = [
+    {
+      name: 'ID',
+      selector: 'id',
+      sortable: true,
+      minWidth: '25px'
+    },
+    {
+      name: 'Title',
+      selector: 'title',
+      sortable: true,
+      minWidth: '225px'
+    }
+  ]
+   
+
+const ManagePlaylist = (dataElement) => { 
+    const store = useSelector(state => state.menupages),
+    [avaliablePlaylists, setavaliablePlaylists] = useState([]),
+    [selectedPlaylists, setSelectedPlaylists] = useState([]),
+    dispatch = useDispatch()
+
+
+    const handleAdd = (value) => {
+        const newValue = selectedPlaylists.concat(value)
+        setSelectedPlaylists(newValue)
+          }
+    const handleRemove = (value) => {
+        const newValue = selectedPlaylists.filter(element => element.id !== value.id)
+        setSelectedPlaylists(newValue)
+        } 
+    const getData_selectedPlaylists = (params) => {
+        return (dispatch) => {
+            if (params.q === '') {
+                setSelectedPlaylists(dataElement.dataElement) 
+                return
+            }
+            const newValue = dataElement.dataElement.filter(element => element.title.includes(params.q))
+            setSelectedPlaylists(newValue)
+        }
+    }    
+        
+    const  serverSideColumnsLeft = [
+            ...serverSideColumns,
+            {
+            name: 'Action',
+            selector: 'Action',
+            sortable: true,
+            minWidth: '25px',
+            cell: row => (
+                <div className='d-flex justify-content-left align-items-center'>
+                    
+                    <div className='d-flex flex-column'>
+                    <Button className='user-name text-truncate mb-0'
+                        onClick={() => { handleRemove(row) }}
+                    >
+                        <span className='font-weight-bold'>Remove</span>
+                    </Button>
+                    </div>
+                </div>
+                )
+            }
+        ]        
+    const  serverSideColumnsRight = [
+        ...serverSideColumns,
+        {
+        name: 'Action',
+        selector: 'Action',
+        sortable: true,
+        minWidth: '25px',
+        cell: row => (
+            <div className='d-flex justify-content-left align-items-center'>
+                
+                <div className='d-flex flex-column'>
+                <Button className='user-name text-truncate mb-0'
+                    onClick={() => { handleAdd(row) }}
+                >
+                    <span className='font-weight-bold'>Add</span>
+                </Button>
+                </div>
+            </div>
+            )
+        }
+    ]   
+        
+    useEffect(() => {
+        const Ids = selectedPlaylists.map(elem => elem.id)
+        const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id))
+        setavaliablePlaylists(filtered)
+      }, [store.allDataMenuPages])    
+    useEffect(() => {
+        const Ids = selectedPlaylists.map(elem => elem.id)
+        const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id))
+        setavaliablePlaylists(filtered)
+      }, [selectedPlaylists])
+
+      useEffect(() => {
+          if (dataElement !== null  && dataElement.dataElement !== null) {
+             setSelectedPlaylists(dataElement.dataElement)   
+          } 
+      }, [dataElement])
+
+    return <div className="card">
+        <div className="card-header">
+            <h4 className="card-title">playlist</h4>
+        </div>
+        <div className="card-body">
+            <Row>
+                <Col sm='6'>
+                    <DataTableServerSide 
+                        cardTitle='Content'
+                        allData={selectedPlaylists}
+                        getData={getData_selectedPlaylists} 
+                        serverSideColumns={serverSideColumnsLeft}
+                        // linkAddButton={`/add`} 
+                        total={selectedPlaylists.length}
+                    />
+                </Col>
+                <Col sm='6'>
+                    <DataTableServerSide 
+                        cardTitle='List to add'
+                        allData={avaliablePlaylists}
+                        getData={getData_menupagesplaylists} 
+                        serverSideColumns={serverSideColumnsRight}
+                        // linkAddButton={`/add`} 
+                        total={store.totalMenuPages}
+                    />
+
+                </Col>
+            </Row>
+        </div>
+    </div>  
+}
+
+export default ManagePlaylist
\ No newline at end of file

src/views/playlists/projectplaylists/card/tablayoutplaylists.js

+
+import { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+// ** Third Party Components
+import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
+import { useForm } from 'react-hook-form'
+import classnames from 'classnames'
+
+import { getData_layoutPlaylists } from '../../../screens/store/actions'
+import { DivideCircle } from 'react-feather'
+// import { Button } from 'bootstrap'
+import ManagePlaylist from './manageplaylist'
+
+const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
+    const [dataElement, setDataElement] = useState(null),
+        [layoutPlaylists, setLayoutPlaylists] = useState(null),
+        dispatch = useDispatch(),
+        screensStore = useSelector(state => state.screens),
+        { register, errors, handleSubmit } = useForm()
+
+    const handleDetailChange = (value, field) => {
+        const newData = selectedDataElement.menu_page_layouts.map((mpagelayout) => {
+                if (mpagelayout.id === block.id) {
+                    mpagelayout[field] = value
+                }
+            })
+        setElementData(
+            {
+                ...selectedDataElement
+            })
+        }
+
+    useEffect(() => {
+        if (block !== null || (block !== null && dataElement !== null && block.id !== dataElement.id)) {
+          return setDataElement(block) 
+        }
+      }, [block])
+ // populate layout playlist
+  useEffect(() => {
+    if (!screensStore.allDataLayoutPlaylists || screensStore.allDataLayoutPlaylists.length < 1) {
+          dispatch(getData_layoutPlaylists({
+            start: 1,
+            length: 1000,
+            q: null
+        }))
+        }
+    }, [dispatch])
+    useEffect(() => {
+        setLayoutPlaylists(screensStore.allDataLayoutPlaylists)
+      }, [screensStore.allDataLayoutPlaylists])    
+
+    return (
+        <Col sm='12'>
+           <div className="card">
+             <div className="card-header">
+                <h4 className="card-title">ElementCard {dataElement && dataElement.id} </h4>
+            </div>
+               <div className="card-body">
+               <Row>
+                    <Col md='4' sm='12'>
+                        <FormGroup>
+                        <Label for='id'>ID</Label>
+                        <Input 
+                            readOnly={true} 
+                            type='text' 
+                            name='id' 
+                            id='id'   
+                            placeholder='id' 
+                            defaultValue={dataElement && dataElement.id}  
+                            />
+                        </FormGroup>
+                    </Col>
+                    <Col md='4' sm='12'>
+                        <FormGroup>
+                        <Label for='layout_id'>Layout</Label>
+                        <Input 
+                            type='select' 
+                            name='layout_id' 
+                            id='layout_id'   
+                            placeholder='layout_id' 
+                            innerRef={register({ required: true })} 
+                            defaultValue={dataElement && dataElement.layout_id} 
+                            className={classnames({ 'is-invalid': errors['layout_id'] })} 
+                            onChange={(e) => handleDetailChange(e.target.value, 'layout_id')}
+                                   
+                            >
+                            {!!layoutPlaylists ? layoutPlaylists.map(option => {
+                            return  <option key={option.id} 
+                              selected={option.id === dataElement.layout_id ? option.id : ''}
+                              value={option.id}>{option.name}</option>
+                        }) : <option>Loading</option> }
+                      </Input>
+                        </FormGroup>
+                    </Col>
+                    <Col md='4' sm='12'>
+                        <FormGroup>
+                        <Label for='order'>order</Label>
+                        <Input 
+                            type='text' 
+                            name='order' 
+                            order='order'   
+                            placeholder='order' 
+                            innerRef={register({ required: true })} 
+                            defaultValue={dataElement && dataElement.order}
+                            className={classnames({ 'is-invalid': errors['order'] })}  
+                            onChange={(e) => handleDetailChange(e.target.value, 'order')}
+                            />
+                        </FormGroup>
+                    </Col>
+                </Row>
+               </div>
+            </div>
+
+            <ManagePlaylist dataElement={dataElement && dataElement.playlists}  />  
+
+          </Col>  
+             
+    )
+}
+
+export default TabLayoutPlaylist
\ No newline at end of file

src/views/playlists/projectplaylists/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/playlists/projectplaylists/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='Pages' breadCrumbParent='Pages' 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/playlists/projectplaylists/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 => {
+      console.log(values)
+      dispatch(
+          updatemenupages({
+              ...dataElement,
+              idproject: values.idproject,
+              system_name: values.system_name,
+              last_seen: values.last_seen,
+              layout_page_id: values.layout_page_id,
+              type: values.type,
+              display: values.display,
+              pagetypeid: values.pagetypeid,
+              order: values.order
+          })
+        )
+      
+      }
+
+    // ** 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/playlists/projectplaylists/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/playlists/projectplaylists/module.js

+const moduleSettings = {
+    mainTitle: 'Playlists',
+    mainTitleSingle: 'Playlist',
+    apiBaseURL: '/api/playlists',
+    baseURL: '/playlists/projectplaylists',
+    newElement: {
+        slug: 0,
+        type: 0
+    },
+    elementsOption: {
+    }
+}
+
+export default moduleSettings
\ No newline at end of file

src/views/playlists/projectplaylists/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/playlists/store/actions/index.js

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

src/views/playlists/store/actions/playlists.js

+import axios from 'axios'
+import {setSaveSatus, setErrorMsg} from '../../../../redux/actions/api'
+import moduleSettings  from '../../projectplaylists/module'
+
+
+// ** Get table Data ///api/datatables/data
+
+
+const _getData_playlists = params => {
+
+    return async dispatch => {
+      await axios.get(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, {params}
+      ).then(response => {
+        dispatch({
+          type: 'GET_DATA_PLAYLISTS', 
+          allData: response.data.data,
+          // datalayoumenus: response.data.invoices,
+          totalPages: response.data.recordsTotal, 
+          params: response.data.params
+        })
+      })
+    }
+  }
+export const getData_playlists = params => {
+    const newparams = {
+      ...params,
+      idproject: 2
+      }
+      return _getData_playlists(newparams)
+  }  
+
+  export const addplaylist = params => {
+    return (dispatch, getState) => {
+      axios
+        .post(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, params)
+        .then(response => {
+          dispatch({
+            type: 'ADD_PLAYLIST',
+            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 getplaylist = 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_PLAYLIST',
+            data: response.data.data
+          })
+        })
+        .catch(err => console.log(err))
+    }
+  }  
+
+  export const cleanplaylist = id => {
+    return async dispatch => {
+      dispatch({
+        type: 'GET_PLAYLISTS',
+        data: null
+      })
+    }
+  }
+  
+  export const updateplaylist = params => {
+    return (dispatch, getState) => {
+      axios
+        .put(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${params.id}`, params)
+        .then(response => {
+          dispatch({
+            type: 'UPDATE_PLAYLISTS',
+            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/playlists/store/reducer/index.js

+// ** Initial State
+const initialState = {
+    saveSucces: false,
+    errorMsg: '',
+    data: [],
+    total: 1,
+    params: {},
+    allData: [],
+  
+    dataPlaylists: [],
+    totalPlaylists: 1,
+    paramsPlaylists: {},
+    allDataPlaylists: [],
+    selectedPlaylist: null
+
+}
+
+const playlists = (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_PLAYLISTS':
+        return {
+          ...state,
+          allDataPlaylists: action.allData,
+          dataPlaylists: action.data,
+          totalPlaylists: action.totalPages, 
+          paramsPlaylists: action.params
+        }
+      case 'ADD_PLAYLISTS':
+          return { ...state } 
+          case 'GET_PROJECT':
+            return { ...state,  
+              selectedPlaylist : action.data
+            }
+      case 'GET_MENUPLAYLIST':
+        return { ...state,  
+          selectedPlaylist : action.data
+        }
+    
+      case 'UPDATE_MENUPLAYLIST':
+        return { ...state } 
+        
+      case 'ADD_MENUPLAYLIST':
+        return { ...state }        
+
+        // default
+      default:
+            return state
+        
+      }
+    
+}
+
+export default playlists