all complete

package.json

@@ -1,7 +1,17 @@
 {
-  "name": "cmp",
+  "name": "@coreui/coreui-free-react-admin-template",
-  "description": "Cmp project",
+  "version": "4.1.1",
-  "author": "pawan",
+  "description": "CoreUI Free React Admin Template",
+  "homepage": ".",
+  "bugs": {
+    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
+  },
+  "license": "MIT",
+  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
     "dev": "react-scripts start",
     "build": "react-scripts build",
@@ -21,16 +31,16 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^3.0.0",
-    "@coreui/coreui": "^4.2.0",
+    "@coreui/coreui": "^4.1.0",
     "@coreui/icons": "^2.1.0",
     "@coreui/icons-react": "^2.0.0",
-    "@coreui/react": "^4.3.0",
+    "@coreui/react": "^4.1.0",
     "@coreui/react-chartjs": "^2.0.0",
     "@coreui/utils": "^1.3.1",
     "@reduxjs/toolkit": "^1.8.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
     "axios": "^0.25.0",
-    "bootstrap": "^5.2.0",
+    "bootstrap": "^5.1.3",
     "chart.js": "^3.6.0",
     "classnames": "^2.3.1",
     "core-js": "^3.19.1",
@@ -47,6 +57,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-spinners": "^0.11.0",
+    "react-time-picker": "^4.5.0",
     "redux": "4.1.2",
     "serve": "^13.0.2",
     "simplebar-react": "^2.3.6",

src/index.js

@@ -11,7 +11,7 @@ import axios from 'axios'
 
 const setupAxios = () => {
   axios.defaults.baseURL = 'https://cms-api-dashboard.herokuapp.com/';
-  //axios.defaults.baseURL = 'http://localhost:5000'
+  // axios.defaults.baseURL = 'http://localhost:5000'
   axios.defaults.headers = {
     'Cache-Control': 'no-cache,no-store',
     'Pragma': 'no-cache',

src/scss/style.scss

@@ -1,21 +1,19 @@
-// If you want to override variables do it here
 @import "variables";
 
 $enable-ltr: true;
 $enable-rtl: true;
 
 
-@import '@coreui/coreui/dist/css/coreui.min.css';
+// @import '@coreui/coreui/dist/css/coreui.min.css';
-@import 'bootstrap/dist/css/bootstrap.min.css';
+// @import 'bootstrap/dist/css/bootstrap.min.css';
 // Import CoreUI for React components library
-//@import "@coreui/coreui/scss/coreui";
+@import "@coreui/coreui/scss/coreui";
 // Import Chart.js custom tooltips styles
-//@import "@coreui/chartjs/scss/coreui-chartjs";
+@import "@coreui/chartjs/scss/coreui-chartjs";
-@import "@coreui/chartjs";
+//@import "@coreui/chartjs";
 
- @import "layout";
+@import "layout";
- @import "example";
+@import "example";
 
 // If you want to add custom CSS you can put it here.
-@import "custom";
+@import "custom";
-

src/views/Events/AddEvent.js

@@ -20,7 +20,7 @@ import {
     CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
-import { cilPencil, cilSettings, cilLockLocked, cilUser, cilBell, cilLocationPin, cilAudioDescription } from '@coreui/icons'
+import { cilPencil, cilSettings, cilLockLocked, cilUser, cilBell, cilLocationPin, cilAudioDescription, cilCalendar, cilWatch, cilAlarm } from '@coreui/icons'
 const AddEvent = () => {
     const token = isAutheticated();
     let history = useHistory();
@@ -28,12 +28,12 @@ const AddEvent = () => {
     const [title, setTitle] = useState("");
     const [description, setDescription] = useState("");
     const [location, setLocation] = useState("");
+    const [date, setDate] = useState(new Date());
+    const [time, setTime] = useState('');
 
     const [loading, setLoading] = useState(false);
-
-
     const handleSubmit = async () => {
-        if (!(title && description && image && location)) {
+        if (!(title && description && image && location && time && date)) {
             alert("Please fill All required field ");
             return;
         }
@@ -42,6 +42,8 @@ const AddEvent = () => {
         myForm.set("title", title);
         myForm.set("description", description);
         myForm.set("location", location);
+        myForm.set("date", date)
+        myForm.set("time", time)
         myForm.set("image", image);
         setLoading({ loading: true });
         // console.log(image)
@@ -117,6 +119,32 @@ const AddEvent = () => {
                                                         value={description}
                                                         placeholder="Description (maximum 250 characters)" />
                                                 </CInputGroup>
+                                                <CInputGroup className="mb-3">
+                                                    <CInputGroupText>
+                                                        {/* Date* */}
+                                                        <CIcon icon={cilCalendar} />
+                                                    </CInputGroupText>
+                                                    {/* <DatePicker selected={startDate} /> */}
+
+                                                    <CFormInput type="date"
+                                                        required
+                                                        onChange={(e) => setDate(e.target.value)}
+                                                        value={date}
+                                                        placeholder="Event Date" />
+                                                </CInputGroup>
+                                                <CInputGroup className="mb-3">
+
+                                                    <CInputGroupText>
+                                                        {/* Time* */}
+                                                        <CIcon icon={cilAlarm} />
+                                                    </CInputGroupText>
+                                                    <CFormInput type="time"
+                                                        startDate
+                                                        required
+                                                        onChange={(e) => setTime(e.target.value)}
+                                                        value={time}
+                                                        placeholder="Event Time" />
+                                                </CInputGroup>
                                                 <CInputGroup className="mb-3">
                                                     <CInputGroupText>
                                                         <CIcon icon={cilLocationPin} />

src/views/Events/AllRegisterUser.js

@@ -20,7 +20,7 @@ const AllRegisterUser = () => {
                 },
             }
         );
-        console.log(res.data)
+        // console.log(res.data)
         setRegisterUser(res.data.user)
 
 

src/views/Events/EditEvent.js

@@ -21,7 +21,7 @@ import {
     CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
-import { cilPencil, cilSettings, cilLockLocked, cilUser, cilBell, cilLocationPin, cilAudioDescription } from '@coreui/icons'
+import { cilPencil, cilSettings, cilLockLocked, cilUser, cilBell, cilLocationPin, cilAudioDescription, cilCalendar, cilAlarm } from '@coreui/icons'
 const EditEvent = () => {
     const { id } = useParams();
     // console.log(id)
@@ -31,6 +31,8 @@ const EditEvent = () => {
     const [title, setTitle] = useState("");
     const [description, setDescription] = useState("");
     const [location, setLocation] = useState("");
+    const [date, setDate] = useState(new Date());
+    const [time, setTime] = useState('');
     const [loading, setLoading] = useState(false);
 
     //fetch one image
@@ -43,12 +45,14 @@ const EditEvent = () => {
         // console.log(res.data)
         setTitle(res.data.Event.title)
         setDescription(res.data.Event.description)
+        setDate(res.data.Event.date)
+        setTime(res.data.Event.time)
         setLocation(res.data.Event.location)
 
     }, [id]);
 
     const handleSubmit = async () => {
-        if (!(title && description && image && location)) {
+        if (!(title && description && image && location && time && date)) {
             alert("Please fill All required field ");
             return;
         }
@@ -56,6 +60,8 @@ const EditEvent = () => {
 
         myForm.set("title", title);
         myForm.set("description", description);
+        myForm.set("date", date)
+        myForm.set("time", time)
         myForm.set("location", location);
         myForm.set("image", image);
         setLoading({ loading: true });
@@ -132,6 +138,32 @@ const EditEvent = () => {
                                                         value={description}
                                                         placeholder="Description (maximum 250 characters)" />
                                                 </CInputGroup>
+                                                <CInputGroup className="mb-3">
+                                                    <CInputGroupText>
+                                                        {/* Date* */}
+                                                        <CIcon icon={cilCalendar} />
+                                                    </CInputGroupText>
+                                                    {/* <DatePicker selected={startDate} /> */}
+
+                                                    <CFormInput type="date"
+                                                        required
+                                                        onChange={(e) => setDate(e.target.value)}
+                                                        value={date}
+                                                        placeholder="Event Date" />
+                                                </CInputGroup>
+                                                <CInputGroup className="mb-3">
+
+                                                    <CInputGroupText>
+                                                        {/* Time* */}
+                                                        <CIcon icon={cilAlarm} />
+                                                    </CInputGroupText>
+                                                    <CFormInput type="time"
+                                                        startDate
+                                                        required
+                                                        onChange={(e) => setTime(e.target.value)}
+                                                        value={time}
+                                                        placeholder=" Event time" />
+                                                </CInputGroup>
                                                 <CInputGroup className="mb-3">
                                                     <CInputGroupText>
                                                         <CIcon icon={cilLocationPin} />

src/views/Events/Event.js

@@ -21,7 +21,7 @@ function Event() {
                 },
             }
         );
-        // console.log(res.data)
+        console.log(res.data)
         setEvent(res.data.Event)
 
 
@@ -41,7 +41,7 @@ function Event() {
                 Authorization: `Bearer ${token}`,
             },
         });
-        console.log(res)
+        // console.log(res)
         if (res.data.success == true) {
             swal("success!", "Event Deleted Successfully!", "success");
             window.location.reload();
@@ -98,6 +98,8 @@ function Event() {
                                                 <tr>
                                                     <th>Title</th>
                                                     <th>Image</th>
+                                                    <th>Event Date</th>
+                                                    <th>Event Time</th>
                                                     <th>Location</th>
                                                     <th>Added On</th>
                                                     <th>Attended By</th>

src/views/Events/RegisterUser.js

@@ -17,7 +17,7 @@ const RegisterUser = ({ item, handleDelete, formatAMPM }) => {
                 },
             }
         );
-        console.log(res.data)
+        // console.log(res.data)
         setTotalRegisterUser(res.data.totalUserRegister)
 
 
@@ -32,6 +32,8 @@ const RegisterUser = ({ item, handleDelete, formatAMPM }) => {
                 <td>{item?.title}</td>
                 <td>
                     <img src={`${item?.image.url}`} width="50" alt="" /></td>
+                <td>{new Date(`${item?.date}`).toDateString()}</td>
+                <td>{item?.time}</td>
                 <td>{item?.location}</td>
                 <td>
                     {/* {item?.addedOn} */}

src/views/Events/ViewEvent.js

@@ -89,6 +89,8 @@ function ViewEvent() {
                                                     <img src={`${event.image?.url}`} width="50" alt="" />
                                                 </td></tr>
                                                 <tr><th>Description</th><td>{event?.description}</td></tr>
+                                                <tr><th>Event Date</th><td>{new Date(`${event?.date}`).toDateString()}</td></tr>
+                                                <tr><th>Event Time</th><td>{event?.time}</td></tr>
                                                 <tr><th>Location</th><td>{event?.location}</td></tr>
                                                 <tr><th>Added On</th><td>
                                                     {new Date(`${event?.addedOn}`).toDateString()}<span> , {`${formatAMPM(event?.addedOn)}`}</span>