asset avaliability UI

src/views/assets/projectassets/card/avaliability.js

+import { Fragment, useEffect, useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import {getProject} from '../../../settings/store/actions'
+
+import { Card, CardBody, Row, Col, CardHeader, CardTitle, Label, Input, FormGroup, CardText, Button } from 'reactstrap'
+
+import { selectThemeColors } from '@utils'
+
+import Flatpickr from 'react-flatpickr' 
+import Select, { components } from 'react-select'
+import { platform } from 'chart.js'
+
+const PlanAvaliability =  ({dataElement, AvaChange}) => {
+    const [pickerstartdate, setPickerstartdate] = useState(Date.parse(dataElement.startdate)),
+    [pickerenddate, setPickerenddate] = useState(Date.parse(dataElement.enddate)),
+    [plataforms, setPlatforms] = useState([]),
+    [geolocations, setGeolocations] = useState([]),
+    [avaliaPlataforms, setAvaliaPlatforms] = useState([]),
+    [permitGeo, setPermitGeo] = useState([]),
+    [denytGeo, setDenyGeo] = useState([]),
+    store = useSelector(state => state.projectsettings)
+
+    useEffect(() => {
+        if (!store.selectedProject) return
+        console.log(store.selectedProject)
+        const platforms = store.selectedProject.platforms.map(elm => {
+          return {
+            value: elm.id,
+            label: elm.name
+          }
+        })
+        setPlatforms(platforms)
+        const geo = store.selectedProject.geolocations.map(elm => {
+            return {
+                value: elm.id,
+                label: elm.name
+              }  
+        })
+        setGeolocations(geo)
+      }, [store.selectedProject])
+
+
+    useEffect(() => {
+      if (!dataElement) return
+       const  selected = dataElement.plataforms.map(elm => {
+        return {
+            value: elm.id,
+            label: elm.name
+          }
+       })   
+       setAvaliaPlatforms(selected)
+       const geoPermit = dataElement.geolocations.map(elm => {
+        return  elm.pivot.action === "permit" ?  {
+            value: elm.id,
+            label: elm.name
+          }  : null
+       })
+       setPermitGeo(geoPermit)
+       const geoDeny = dataElement.geolocations.map(elm => {
+        return  elm.pivot.action === "deny" ?  {
+            value: elm.id,
+            label: elm.name
+          }  : null
+       })
+       setDenyGeo(geoDeny)
+
+
+    }, [dataElement])
+
+    return <Fragment>
+    <Row>
+        <Col md='12' sm='12'>
+             <CardTitle tag="h5"> Avaliability id:{dataElement.id}</CardTitle>
+        </Col>
+    </Row>
+    <Row>   
+        <Col md='4' sm='12'>
+            <FormGroup>
+            <Label for='startdate'>Start date</Label>
+            <Flatpickr
+                value={pickerstartdate}
+                // data-enable-time
+    
+                id={`startdate-picker${dataElement.id}`}
+                className='form-control'
+                onChange={date => setPickerstartdate(date)}
+                options={{
+                    enableTime: true,
+                    dateFormat: 'Y-m-d H:i',
+                    time_24hr: true
+                }}
+            />
+            </FormGroup>
+        </Col>
+        <Col md='8' sm='12'>
+            <Label for='plataforms'>Plataforms</Label>
+            <Select
+                isClearable={false}
+                theme={selectThemeColors}
+                value={avaliaPlataforms}
+                isMulti
+                name={`platforms${dataElement.id}`}
+                 options={plataforms}
+                // onChange={genreSubOnChange}
+                className='react-select'
+                classNamePrefix='select'
+            /> 
+        </Col>
+  
+        </Row>
+
+        <Row>
+        <Col md='4' sm='12'>
+            <FormGroup>
+            <Label for='enddate'>End date</Label>
+            <Flatpickr
+                value={pickerenddate}
+                // data-enable-time
+    
+                id={`enddate-picker${dataElement.id}`}
+                className='form-control'
+                onChange={date => setPickerenddate(date)}
+                options={{
+                    enableTime: true,
+                    dateFormat: 'Y-m-d H:i',
+                    time_24hr: true
+                }}
+            />
+            </FormGroup>
+        </Col> 
+      
+        <Col md='4' sm='12'>
+            <Label for='locationspermit'>Locations Permit</Label>
+            <Select
+                isClearable={false}
+                theme={selectThemeColors}
+                value={permitGeo}
+                isMulti
+                name={`platforms${dataElement.id}`}
+                options={geolocations}
+                // onChange={genreSubOnChange}
+                className='react-select'
+                classNamePrefix='select'
+            /> 
+        </Col>
+        <Col md='4' sm='12'>
+            <Label for='locationDeny'>Locations Deny</Label>
+            <Select
+                isClearable={false}
+                theme={selectThemeColors}
+                value={denytGeo}
+                isMulti
+                name={`platforms${dataElement.id}`}
+                options={geolocations}
+                // onChange={genreSubOnChange}
+                className='react-select'
+                classNamePrefix='select'
+            /> 
+        </Col>
+         
+    </Row>    
+    <div className=".divider"></div>
+    </Fragment>  
+}
+
+const AvaliabilityBlock = ({dataElement, handleAvailiabilityChange}) => {
+    return  <Row>
+        <Col sm='12'>
+            <Card>  
+                <CardBody className='pt-2'> 
+                { dataElement !== null &&  dataElement.map(elm => {
+                        return  <PlanAvaliability 
+                                key={elm.id}
+                                dataElement={elm}
+                            />
+                        })
+                    }
+                    <Col sm="12" className="text-center">
+                        <Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='button' color='primary'>
+                             new
+                        </Button.Ripple>
+                    </Col>
+                </CardBody>
+            </Card>
+        </Col> 
+    </Row>           
+
+}
+
+export default AvaliabilityBlock
\ No newline at end of file

src/views/assets/projectassets/card/index.js

@@ -26,9 +26,12 @@ import Swal from 'sweetalert2'
 import withReactContent from 'sweetalert2-react-content'
 
 import TextualBlock from './textual'
+import AvaliabilityBlock from './avaliability'
 
 // ** Styles
 import '@styles/react/apps/app-users.scss'
+import '@styles/react/libs/flatpickr/flatpickr.scss'
+
 
 const SuccessProgressToast = () => (
   <Fragment>
@@ -387,7 +390,7 @@ return (
             <Nav pills>
                 <NavItem>
                       <NavLink
-                        active={true} 
+                        active={activeTab === 0} 
                         onClick={() => toggle(0)}
                         >
                         <span className='align-middle d-none d-sm-block'>Textual</span>
@@ -396,7 +399,7 @@ return (
                
                 <NavItem>
                       <NavLink
-                        active={false} 
+                        active={activeTab === 1} 
                         onClick={() => toggle(1)}
                         >
                         <span className='align-middle d-none d-sm-block'>Imagery</span>
@@ -405,7 +408,7 @@ return (
 
                 <NavItem>
                       <NavLink
-                        active={false} 
+                        active={activeTab === 2} 
                         onClick={() => toggle(2)}
                         >
                         <span className='align-middle d-none d-sm-block'>Avaliability</span>
@@ -423,6 +426,17 @@ return (
                     handleTextualChange={handleTextualChange}
                     />
                 </TabPane>
+    
+                <TabPane tabId={1}>
+                   soon... 
+                </TabPane>
+       
+                <TabPane tabId={2}>
+                  <AvaliabilityBlock 
+                    dataElement={dataElement && dataElement.availability}
+                  //  handleTextualChange={handleTextualChange}
+                    />
+                </TabPane>
             </TabContent>  
           </CardBody>  
         </Card>