release: v5.4.0

.devcontainer/devcontainer.json

@@ -0,0 +1,17 @@
+{
+  "name": "CoreUI React Admin",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
+  "features": {},
+  "postCreateCommand": "npm install",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint"
+      ]
+    }
+  },
+  "workspaceFolder": "/workspace",
+  "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached",
+  "remoteUser": "node"
+}

.env

@@ -0,0 +1 @@
+// No API keys needed for OpenStreetMap integration

package.json

@@ -14,9 +14,10 @@
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
     "build": "vite build",
+    "dev": "vite",
     "lint": "eslint",
     "serve": "vite preview",
-    "start": "vite"
+    "start": "react-scripts start"
   },
   "dependencies": {
     "@coreui/chartjs": "^4.1.0",
@@ -27,12 +28,19 @@
     "@coreui/react-chartjs": "^3.0.0",
     "@coreui/utils": "^2.0.2",
     "@popperjs/core": "^2.11.8",
+    "@react-google-maps/api": "^2.20.6",
     "chart.js": "^4.4.7",
     "classnames": "^2.5.1",
     "core-js": "^3.40.0",
+    "googleapis": "^148.0.0",
+    "leaflet": "^1.9.4",
+    "openrouteservice-js": "^0.4.1",
+    "papaparse": "^5.5.2",
     "prop-types": "^15.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0",
+    "react-leaflet-cluster": "^2.1.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.5",
     "redux": "5.0.1",

src/App.js

@@ -1,10 +1,17 @@
 import React, { Suspense, useEffect } from 'react'
-import { HashRouter, Route, Routes } from 'react-router-dom'
+import { HashRouter, Route, Routes, Navigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
+import { AuthProvider } from './context/AuthContext'
+import { useAuth } from './context/AuthContext'
 
 import { CSpinner, useColorModes } from '@coreui/react'
 import './scss/style.scss'
 
+const PrivateRoute = ({ children }) => {
+  const { user } = useAuth();
+  return user ? children : <Navigate to="/login" />;
+};
+
 // We use those styles to show code examples, you should remove them in your application.
 import './scss/examples.scss'
 
@@ -17,7 +24,7 @@ const Register = React.lazy(() => import('./views/pages/register/Register'))
 const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
-const App = () => {
+const AppContent = () => {
   const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
   const storedTheme = useSelector((state) => state.theme)
 
@@ -43,17 +50,32 @@ const App = () => {
             <CSpinner color="primary" variant="grow" />
           </div>
         }
-      >
-        <Routes>
-          <Route exact path="/login" name="Login Page" element={<Login />} />
-          <Route exact path="/register" name="Register Page" element={<Register />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route path="*" name="Home" element={<DefaultLayout />} />
+      >          <Routes>
+            <Route exact path="/login" name="Login Page" element={<Login />} />
+            <Route exact path="/register" name="Register Page" element={<Register />} />
+            <Route exact path="/404" name="Page 404" element={<Page404 />} />
+            <Route exact path="/500" name="Page 500" element={<Page500 />} />
+            <Route
+              path="*"
+              name="Home"
+              element={
+                <PrivateRoute>
+                  <DefaultLayout />
+                </PrivateRoute>
+              }
+            />
         </Routes>
       </Suspense>
     </HashRouter>
   )
 }
 
+const App = () => {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  );
+};
+
 export default App

src/_nav.js

@@ -10,6 +10,10 @@ import {
   cilExternalLink,
   cilNotes,
   cilPencil,
+<<<<<<< HEAD
+=======
+  cilPeople,
+>>>>>>> 33b7218 (Initial commit)
   cilPuzzle,
   cilSpeedometer,
   cilStar,
@@ -28,6 +32,15 @@ const _nav = [
     },
   },
   {
+<<<<<<< HEAD
+=======
+    component: CNavItem,
+    name: 'Users',
+    to: '/users',
+    icon: <CIcon icon={cilPeople} customClassName="nav-icon" />,
+  },
+  {
+>>>>>>> 33b7218 (Initial commit)
     component: CNavTitle,
     name: 'Theme',
   },

src/components/ErrorBoundary.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import {
+  CAlert,
+  CCard,
+  CCardBody,
+  CCardHeader,
+} from '@coreui/react'
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null, errorInfo: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Error caught by ErrorBoundary:', error, errorInfo)
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <CCard className="mb-4">
+          <CCardHeader>
+            <h4>Something went wrong</h4>
+          </CCardHeader>
+          <CCardBody>
+            <CAlert color="danger">
+              <h4 className="alert-heading">Error Details</h4>
+              <p>{this.state.error && this.state.error.toString()}</p>
+              <hr />
+              <p className="mb-0">
+                Please try refreshing the page. If the problem persists, contact support.
+              </p>
+            </CAlert>
+            {process.env.NODE_ENV === 'development' && (
+              <details style={{ whiteSpace: 'pre-wrap' }}>
+                {this.state.errorInfo && this.state.errorInfo.componentStack}
+              </details>
+            )}
+          </CCardBody>
+        </CCard>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/components/header/AppHeaderDropdown.js

@@ -1,4 +1,8 @@
 import React from 'react'
+<<<<<<< HEAD
+=======
+import { useNavigate } from 'react-router-dom'
+>>>>>>> 33b7218 (Initial commit)
 import {
   CAvatar,
   CBadge,
@@ -9,6 +13,10 @@ import {
   CDropdownMenu,
   CDropdownToggle,
 } from '@coreui/react'
+<<<<<<< HEAD
+=======
+import { useAuth } from '../../context/AuthContext'
+>>>>>>> 33b7218 (Initial commit)
 import {
   cilBell,
   cilCreditCard,
@@ -25,6 +33,17 @@ import CIcon from '@coreui/icons-react'
 import avatar8 from './../../assets/images/avatars/8.jpg'
 
 const AppHeaderDropdown = () => {
+<<<<<<< HEAD
+=======
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+>>>>>>> 33b7218 (Initial commit)
   return (
     <CDropdown variant="nav-item">
       <CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
@@ -46,6 +65,7 @@ const AppHeaderDropdown = () => {
             42
           </CBadge>
         </CDropdownItem>
+<<<<<<< HEAD
         <CDropdownItem href="#">
           <CIcon icon={cilTask} className="me-2" />
           Tasks
@@ -59,6 +79,16 @@ const AppHeaderDropdown = () => {
           <CBadge color="warning" className="ms-2">
             42
           </CBadge>
+=======
+        <CDropdownItem>
+          <CIcon icon={cilUser} className="me-2" />
+          {user?.username || 'User'}
+        </CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem onClick={handleLogout}>
+          <CIcon icon={cilLockLocked} className="me-2" />
+          Logout
+>>>>>>> 33b7218 (Initial commit)
         </CDropdownItem>
         <CDropdownHeader className="bg-body-secondary fw-semibold my-2">Settings</CDropdownHeader>
         <CDropdownItem href="#">

src/context/AuthContext.js

@@ -0,0 +1,51 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const AuthContext = createContext(null);
+
+const ADMIN_USER = {
+  username: 'Admin',
+  password: 'admin123',
+  role: 'admin'
+};
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    // Check if user is stored in localStorage on load
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      setUser(JSON.parse(storedUser));
+    }
+  }, []);
+
+  const login = (username, password) => {
+    // For now, we'll just check against the hardcoded admin user
+    if (username === ADMIN_USER.username && password === ADMIN_USER.password) {
+      const userData = { username, role: ADMIN_USER.role };
+      setUser(userData);
+      localStorage.setItem('user', JSON.stringify(userData));
+      return true;
+    }
+    return false;
+  };
+
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem('user');
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

src/layout/DefaultLayout.js

@@ -1,7 +1,24 @@
+<<<<<<< HEAD
 import React from 'react'
 import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
 
 const DefaultLayout = () => {
+=======
+import React, { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
+import { useAuth } from '../context/AuthContext'
+
+const DefaultLayout = () => {
+  const { user } = useAuth()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!user) {
+      navigate('/login')
+    }
+  }, [user, navigate])
+>>>>>>> 33b7218 (Initial commit)
   return (
     <div>
       <AppSidebar />

src/routes.js

@@ -1,6 +1,10 @@
 import React from 'react'
 
 const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
+<<<<<<< HEAD
+=======
+const Users = React.lazy(() => import('./views/pages/users/Users'))
+>>>>>>> 33b7218 (Initial commit)
 const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
 const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
 
@@ -35,6 +39,10 @@ const Layout = React.lazy(() => import('./views/forms/layout/Layout'))
 const Range = React.lazy(() => import('./views/forms/range/Range'))
 const Select = React.lazy(() => import('./views/forms/select/Select'))
 const Validation = React.lazy(() => import('./views/forms/validation/Validation'))
+<<<<<<< HEAD
+=======
+const CustomerForm = React.lazy(() => import('./views/forms/CustomerForm'))
+>>>>>>> 33b7218 (Initial commit)
 
 const Charts = React.lazy(() => import('./views/charts/Charts'))
 
@@ -87,6 +95,10 @@ const routes = [
   { path: '/forms/floating-labels', name: 'Floating Labels', element: FloatingLabels },
   { path: '/forms/layout', name: 'Layout', element: Layout },
   { path: '/forms/validation', name: 'Validation', element: Validation },
+<<<<<<< HEAD
+=======
+  { path: '/customer-form', name: 'Customer Form', element: CustomerForm },
+>>>>>>> 33b7218 (Initial commit)
   { path: '/icons', exact: true, name: 'Icons', element: CoreUIIcons },
   { path: '/icons/coreui-icons', name: 'CoreUI Icons', element: CoreUIIcons },
   { path: '/icons/flags', name: 'Flags', element: Flags },
@@ -97,6 +109,10 @@ const routes = [
   { path: '/notifications/modals', name: 'Modals', element: Modals },
   { path: '/notifications/toasts', name: 'Toasts', element: Toasts },
   { path: '/widgets', name: 'Widgets', element: Widgets },
+<<<<<<< HEAD
+=======
+  { path: '/users', name: 'Users', element: Users },
+>>>>>>> 33b7218 (Initial commit)
 ]
 
 export default routes