*add menu page fix

* datable components fix

src/@core/components/datatable/index.js

@@ -20,7 +20,7 @@ const DataTableServerSide = ({cardTitle, allData, total, getData, serverSideColu
 
   // ** States
   const [currentPage, setCurrentPage] = useState(1)
-  const [rowsPerPage, setRowsPerPage] = useState(7)
+  const [rowsPerPage, setRowsPerPage] = useState(10)
   const [searchValue, setSearchValue] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
 
@@ -77,7 +77,7 @@ const DataTableServerSide = ({cardTitle, allData, total, getData, serverSideColu
 
   // ** Custom Pagination
   const CustomPagination = () => {
-    const count = Number((total / rowsPerPage).toFixed(0))
+    const count = Number((total / rowsPerPage).toFixed(0)) + 1
     return (
       <ReactPaginate
         previousLabel={''}

src/@core/components/datatable/tableHeader.js

@@ -21,7 +21,7 @@ const CustomHeader = ({ linkAddButton, handlePerPage, rowsPerPage, handleFilter,
                   backgroundPosition: 'calc(100% - 3px) 11px, calc(100% - 20px) 13px, 100% 0'
                 }}
               >
-                <option value='10'>10</option>
+                <option value='10' defaultValue>10</option>
                 <option value='25'>25</option>
                 <option value='50'>50</option>
               </CustomInput>

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

@@ -63,7 +63,13 @@ const Tables = () => {
                         display: '',
                         pagetypeid: '',
                         order: '0',
-                        menu_page_layouts: []
+                        menu_page_layouts: [
+                          {
+                            order: 1,
+                            layout_id:null,
+                            playlists: []
+                          }
+                        ]
                         }}
                     onSubmitHandler={onSubmitHandler}
                     />

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

@@ -139,7 +139,7 @@ const handleError = (text) => {
   useEffect(() => {
     if (!settingStore.allDataPagetypes || settingStore.allDataPagetypes.length < 1) {
           dispatch(getData_pagetypes({
-            start: 1,
+            start: 0,
             length: 1000,
             q: null
         }))
@@ -160,7 +160,7 @@ const handleError = (text) => {
   useEffect(() => {
     if (!screensStore.allDataLayoutMenus || screensStore.allDataLayoutMenus.length < 1) {
           dispatch(getData_layoutmenus({
-            start: 1,
+            start: 0,
             length: 1000,
             q: null
         }))
@@ -334,7 +334,7 @@ return (
             <Nav pills>
               
                 {dataElement && dataElement.menu_page_layouts.map((block, index) => {
-                  return  <NavItem>
+                  return  <NavItem key={index}>
                             <NavLink key={index}
                               active={activeTab === index} 
                               onClick={() => toggle(index)}
@@ -356,7 +356,7 @@ return (
                activeTab={activeTab}
               >
                 {!!dataElement && dataElement.menu_page_layouts.map((block, index) => {
-                  return <TabPane tabId={index}>
+                  return <TabPane tabId={index} key={index}>
                         <TabLayoutPlaylist block={block} selectedDataElement={dataElement} setElementData={setElementData} />
                       </TabPane>
                     }

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

@@ -140,7 +140,7 @@ const ManagePlaylist = ({dataElement, selectedDataElement, handleChange}) => {
 
     return <div className="card">
         <div className="card-header">
-            <h4 className="card-title">playlist</h4>
+            <h4 className="card-title">Playlists</h4>
         </div>
         <div className="card-body">
             <Row>

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

@@ -67,7 +67,7 @@ const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
         <Col sm='12'>
            <div className="card">
              <div className="card-header">
-                <h4 className="card-title">ElementCard {dataElement && dataElement.id} </h4>
+                {/* <h4 className="card-title">ElementCard {dataElement && dataElement.id} </h4> */}
             </div>
                <div className="card-body">
                <Row>
@@ -99,6 +99,9 @@ const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
                                    
                             >
                             {!!layoutPlaylists ? layoutPlaylists.map(option => {
+                                if (dataElement.layout_id === null) {
+                                    dataElement.layout_id = option.id
+                                }
                             return  <option key={option.id} 
                               selected={option.id === dataElement.layout_id ? option.id : ''}
                               value={option.id}>{option.name}</option>

src/views/menupages/mainpages/module.js

@@ -5,9 +5,13 @@ const moduleSettings = {
     baseURL: '/menupages/mainpages',
     newElement: {
         slug: 0,
-        type: 0
+        type: 0,
+        menu_page_layouts: {
+            playlists: []
+        }
     },
     elementsOption: {
+        playlists: []
     }
 }