├── src ├── views │ ├── pages │ │ ├── Calendar.js │ │ ├── patients │ │ │ ├── app-patient.css │ │ │ ├── view-tabs │ │ │ │ ├── Cards │ │ │ │ │ └── StatsCard.js │ │ │ │ ├── PatientAssessments.js │ │ │ │ └── PatientProcedures.js │ │ │ └── add-steps │ │ │ │ ├── Contact.js │ │ │ │ ├── Physician.js │ │ │ │ ├── HealthInsurance.js │ │ │ │ └── Address.js │ │ ├── profile │ │ │ ├── BillingTabContent.js │ │ │ ├── Tabs.js │ │ │ └── index.js │ │ ├── cm │ │ │ └── CmCard.js │ │ ├── wound-notes │ │ │ └── sections │ │ │ │ └── WoundNotesImages.js │ │ ├── ComingSoon.js │ │ ├── Dashboard.js │ │ └── calendar │ │ │ └── SidebarLeft.js │ ├── SecondPage.js │ └── Home.js ├── @core │ ├── scss │ │ ├── react │ │ │ ├── reactstrap │ │ │ │ ├── _badge.scss │ │ │ │ ├── _accordion.scss │ │ │ │ ├── _switch.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _index.scss │ │ │ │ ├── _carousel.scss │ │ │ │ ├── _popover.scss │ │ │ │ ├── _toast.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _dropdown.scss │ │ │ │ └── _input.scss │ │ │ ├── pages │ │ │ │ ├── page-form-validation.scss │ │ │ │ ├── page-authentication.scss │ │ │ │ ├── modal-create-app.scss │ │ │ │ ├── page-profile.scss │ │ │ │ └── page-account-settings.scss │ │ │ ├── libs │ │ │ │ ├── flatpickr │ │ │ │ │ └── flatpickr.scss │ │ │ │ ├── shepherd-tour │ │ │ │ │ └── shepherd-tour.scss │ │ │ │ ├── drag-and-drop │ │ │ │ │ └── drag-and-drop.scss │ │ │ │ ├── file-uploader │ │ │ │ │ └── file-uploader.scss │ │ │ │ ├── react-hot-toasts │ │ │ │ │ └── react-hot-toasts.scss │ │ │ │ ├── charts │ │ │ │ │ └── apex-charts.scss │ │ │ │ ├── noui-slider │ │ │ │ │ └── noui-slider.scss │ │ │ │ └── swiper │ │ │ │ │ └── swiper.scss │ │ │ ├── _index.scss │ │ │ ├── apps │ │ │ │ ├── app-ecommerce.scss │ │ │ │ ├── app-invoice.scss │ │ │ │ ├── app-todo.scss │ │ │ │ ├── app-users.scss │ │ │ │ ├── app-email.scss │ │ │ │ └── app-calendar.scss │ │ │ └── app-loader.scss │ │ ├── base │ │ │ ├── bootstrap-extended │ │ │ │ ├── _carousel.scss │ │ │ │ ├── forms │ │ │ │ │ ├── _floating-labels.scss │ │ │ │ │ ├── _labels.scss │ │ │ │ │ ├── _form-control.scss │ │ │ │ │ └── _input-group.scss │ │ │ │ ├── _reboot.scss │ │ │ │ ├── _toast.scss │ │ │ │ ├── _code.scss │ │ │ │ ├── _functions.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── _type.scss │ │ │ │ ├── _progress.scss │ │ │ │ ├── mixins │ │ │ │ │ └── _navs.scss │ │ │ │ ├── _alert.scss │ │ │ │ ├── _popover.scss │ │ │ │ ├── _include.scss │ │ │ │ ├── _accordion.scss │ │ │ │ ├── _forms.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _badge.scss │ │ │ │ ├── _button-group.scss │ │ │ │ ├── _breadcrumb.scss │ │ │ │ └── _list-group.scss │ │ │ ├── core │ │ │ │ ├── mixins │ │ │ │ │ ├── hex2rgb.scss │ │ │ │ │ ├── alert.scss │ │ │ │ │ └── transitions.scss │ │ │ │ ├── colors │ │ │ │ │ └── palette-noui.scss │ │ │ │ └── layouts │ │ │ │ │ ├── _sidebar.scss │ │ │ │ │ └── _footer.scss │ │ │ ├── pages │ │ │ │ ├── modal-create-app.scss │ │ │ │ ├── page-coming-soon.scss │ │ │ │ ├── app-invoice-list.scss │ │ │ │ ├── ui-feather.scss │ │ │ │ ├── page-misc.scss │ │ │ │ ├── dashboard-ecommerce.scss │ │ │ │ ├── page-blog.scss │ │ │ │ ├── page-faq.scss │ │ │ │ └── page-knowledge-base.scss │ │ │ ├── bootstrap.scss │ │ │ ├── components │ │ │ │ ├── chart.scss │ │ │ │ ├── _include.scss │ │ │ │ ├── custom-options.scss │ │ │ │ ├── divider.scss │ │ │ │ └── _variables-dark.scss │ │ │ ├── plugins │ │ │ │ ├── extensions │ │ │ │ │ ├── ext-component-media-player.scss │ │ │ │ │ ├── ext-component-ratings.scss │ │ │ │ │ ├── ext-component-drag-drop.scss │ │ │ │ │ └── ext-component-tour.scss │ │ │ │ ├── forms │ │ │ │ │ └── form-validation.scss │ │ │ │ ├── maps │ │ │ │ │ └── map-leaflet.scss │ │ │ │ └── ui │ │ │ │ │ ├── _breakpoints.scss │ │ │ │ │ └── coming-soon.scss │ │ │ ├── colors.scss │ │ │ ├── components.scss │ │ │ ├── themes │ │ │ │ └── bordered-layout.scss │ │ │ └── bootstrap-extended.scss │ │ └── core.scss │ ├── assets │ │ └── fonts │ │ │ └── feather │ │ │ └── fonts │ │ │ ├── feather.eot │ │ │ ├── feather.ttf │ │ │ └── feather.woff │ ├── auth │ │ └── jwt │ │ │ ├── useJwt.js │ │ │ └── jwtDefaultConfig.js │ ├── layouts │ │ ├── components │ │ │ ├── navbar │ │ │ │ ├── NavbarUser.js │ │ │ │ └── index.js │ │ │ ├── menu │ │ │ │ ├── vertical-menu │ │ │ │ │ ├── VerticalNavMenuSectionHeader.js │ │ │ │ │ ├── VerticalNavMenuItems.js │ │ │ │ │ ├── VerticalNavMenuLink.js │ │ │ │ │ └── VerticalMenuHeader.js │ │ │ │ └── horizontal-menu │ │ │ │ │ ├── index.js │ │ │ │ │ ├── HorizontalNavMenuItems.js │ │ │ │ │ └── HorizontalNavMenuLink.js │ │ │ └── footer │ │ │ │ └── index.js │ │ └── BlankLayout.js │ └── components │ │ ├── spinner │ │ ├── Loading-spinner.js │ │ └── Fallback-spinner.js │ │ ├── routes │ │ ├── PublicRoute.js │ │ └── PrivateRoute.js │ │ ├── repeater │ │ └── index.js │ │ ├── ripple-button │ │ ├── ripple-button.scss │ │ └── index.js │ │ ├── ui-loader │ │ ├── ui-loader.scss │ │ └── index.js │ │ ├── extensions-header │ │ └── index.js │ │ ├── widgets │ │ └── stats │ │ │ ├── StatsVertical.js │ │ │ ├── TinyChartStats.js │ │ │ ├── StatsWithLineChart.js │ │ │ ├── StatsHorizontal.js │ │ │ ├── StatsWithAreaChart.js │ │ │ └── ChartOptions.js │ │ ├── scrolltop │ │ └── index.js │ │ ├── card-snippet │ │ └── index.js │ │ ├── avatar-group │ │ └── index.js │ │ └── statistics-card │ │ └── index.js ├── index.scss ├── assets │ ├── images │ │ ├── logo │ │ │ ├── logo.png │ │ │ └── logo-oem.png │ │ └── portrait │ │ │ └── small │ │ │ └── avatar-s-11.jpg │ └── scss │ │ ├── variables │ │ ├── _variables.scss │ │ └── _variables-components.scss │ │ ├── style-rtl.scss │ │ └── style.scss ├── api │ └── useApi.js ├── App.test.js ├── redux │ ├── rootReducer.js │ ├── store.js │ ├── authentication.js │ └── navbar.js ├── App.js ├── components │ ├── forms │ │ ├── MyCleave.js │ │ ├── ErrorMessaje.js │ │ ├── SwitchInput.js │ │ ├── SwitchControl.js │ │ └── DropDownLookup.js │ ├── alerts │ │ ├── Alert.js │ │ └── AlertUtils.js │ ├── spinner │ │ └── LoadingSpinner.js │ └── ui-loader │ │ ├── ui-loader.scss │ │ └── index.js ├── utility │ ├── context │ │ ├── Can.js │ │ └── ThemeColors.js │ └── hooks │ │ ├── useFooterType.js │ │ ├── useNavbarType.js │ │ ├── useNavbarColor.js │ │ ├── useRTL.js │ │ ├── useSkin.js │ │ ├── useOnClickOutside.js │ │ └── useLayout.js ├── layouts │ ├── VerticalLayout.js │ └── HorizontalLayout.js ├── router │ ├── routes │ │ ├── Authentication.js │ │ ├── Patients.js │ │ ├── Admin.js │ │ └── Common.js │ └── Router.js ├── navigation │ └── horizontal │ │ └── index.js ├── configs │ ├── i18n │ │ └── index.js │ └── themeConfig.js └── index.js ├── .env ├── .npmrc ├── read.me ├── favicon.ico ├── public └── manifest.json ├── .gitignore └── index.html /src/views/pages/Calendar.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | PORT=8081 -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | legacy-peer-deps = true -------------------------------------------------------------------------------- /read.me: -------------------------------------------------------------------------------- 1 | yup validations 2 | 3 | https://www.npmjs.com/package/yup -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperDev313/WoundChart/HEAD/favicon.ico -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | a.badge:hover { 2 | color: $white; 3 | } 4 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | @import '../node_modules/prismjs/themes/prism-tomorrow'; 2 | @import './assets/scss/app.scss'; 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperDev313/WoundChart/HEAD/src/assets/images/logo/logo.png -------------------------------------------------------------------------------- /src/@core/scss/react/pages/page-form-validation.scss: -------------------------------------------------------------------------------- 1 | .react-select { 2 | &.is-invalid { 3 | z-index: 3; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/images/logo/logo-oem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperDev313/WoundChart/HEAD/src/assets/images/logo/logo-oem.png -------------------------------------------------------------------------------- /src/@core/assets/fonts/feather/fonts/feather.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperDev313/WoundChart/HEAD/src/@core/assets/fonts/feather/fonts/feather.eot -------------------------------------------------------------------------------- /src/@core/assets/fonts/feather/fonts/feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperDev313/WoundChart/HEAD/src/@core/assets/fonts/feather/fonts/feather.ttf -------------------------------------------------------------------------------- /src/@core/assets/fonts/feather/fonts/feather.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperDev313/WoundChart/HEAD/src/@core/assets/fonts/feather/fonts/feather.woff -------------------------------------------------------------------------------- /src/assets/images/portrait/small/avatar-s-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperDev313/WoundChart/HEAD/src/assets/images/portrait/small/avatar-s-11.jpg -------------------------------------------------------------------------------- /src/@core/scss/react/libs/flatpickr/flatpickr.scss: -------------------------------------------------------------------------------- 1 | @import '~flatpickr/dist/flatpickr.css'; 2 | @import '../../../base/plugins/forms/pickers/form-flat-pickr'; 3 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_carousel.scss: -------------------------------------------------------------------------------- 1 | .carousel-dark .carousel-caption{ 2 | h1, h2, h3, h4, h5, h6{ 3 | color: $carousel-dark-caption-color; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/@core/scss/base/core/mixins/hex2rgb.scss: -------------------------------------------------------------------------------- 1 | @mixin bg-opacity($color, $opacity: 1) { 2 | background: $color; /* The Fallback */ 3 | background: rgba($color, $opacity); 4 | } 5 | -------------------------------------------------------------------------------- /src/@core/scss/base/core/mixins/alert.scss: -------------------------------------------------------------------------------- 1 | // For alert's heading box-shadow 2 | 3 | @mixin alert-heading-bs($color) { 4 | box-shadow: rgba($color, 0.4) 0px 6px 15px -7px; 5 | } 6 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/forms/_floating-labels.scss: -------------------------------------------------------------------------------- 1 | .form-floating > .form-control:focus ~ label { 2 | color: $primary; 3 | } 4 | .form-floating > label { 5 | opacity: 0.65; 6 | } 7 | -------------------------------------------------------------------------------- /src/@core/scss/react/pages/page-authentication.scss: -------------------------------------------------------------------------------- 1 | @import '../../base/pages/authentication.scss'; 2 | 3 | .auth-wrapper .auth-footer-btn .btn { 4 | padding: 0.555rem 0.6rem !important; 5 | } 6 | -------------------------------------------------------------------------------- /src/api/useApi.js: -------------------------------------------------------------------------------- 1 | import useJwt from '@src/@core/auth/jwt/useJwt' 2 | import apiConfig from '../configs/apiConfig' 3 | import axios from "axios"; 4 | 5 | axios.defaults.baseURL = apiConfig.baseUrl; 6 | 7 | const { jwt } = useJwt({}) 8 | 9 | export default jwt; -------------------------------------------------------------------------------- /src/@core/scss/react/_index.scss: -------------------------------------------------------------------------------- 1 | // Base Extended (General styles which are not added 'base styles') 2 | @import 'base-extended'; 3 | 4 | @import 'dark-layout'; 5 | 6 | @import 'rtl'; 7 | 8 | @import 'reactstrap/index'; 9 | 10 | @import 'app-loader'; 11 | -------------------------------------------------------------------------------- /src/@core/scss/react/pages/modal-create-app.scss: -------------------------------------------------------------------------------- 1 | @import '../../base/pages/modal-create-app.scss'; 2 | 3 | .bs-stepper.create-app-wizard { 4 | .bs-stepper-header .step .step-trigger { 5 | padding-top: 0.75rem; 6 | padding-bottom: 0.75rem; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import App from "./App"; 3 | 4 | it("renders without crashing", () => { 5 | const div = document.createElement("div"); 6 | ReactDOM.render(, div); 7 | ReactDOM.unmountComponentAtNode(div); 8 | }); 9 | -------------------------------------------------------------------------------- /src/views/pages/patients/app-patient.css: -------------------------------------------------------------------------------- 1 | .patient-padding { 2 | padding-left: 2.5rem; 3 | padding-right: 2.5rem; 4 | } 5 | 6 | .custom-link { 7 | text-decoration: none; 8 | color: inherit; /* Keep the original text color */ 9 | cursor: pointer; 10 | } 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_accordion.scss: -------------------------------------------------------------------------------- 1 | .accordion .accordion-header .accordion-button { 2 | font-weight: 500; 3 | font-size: 1.1rem; 4 | line-height: 1.45; 5 | } 6 | 7 | // Dark Layout 8 | .accordion .accordion-body { 9 | color: $theme-dark-body-color; 10 | } 11 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_reboot.scss: -------------------------------------------------------------------------------- 1 | a { 2 | &:focus { 3 | outline: none; 4 | } 5 | } 6 | 7 | a:not([href]) { 8 | color: inherit; 9 | text-decoration: none; 10 | 11 | &:hover { 12 | color: inherit; 13 | text-decoration: none; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/redux/rootReducer.js: -------------------------------------------------------------------------------- 1 | // ** Reducers Imports 2 | import layout from "./layout"; 3 | import navbar from "./navbar"; 4 | import auth from './authentication' 5 | 6 | const rootReducer = { 7 | auth, 8 | navbar, 9 | layout 10 | }; 11 | 12 | export default rootReducer; 13 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_toast.scss: -------------------------------------------------------------------------------- 1 | // Toasts 2 | 3 | .toast { 4 | &.show { 5 | z-index: 1030; 6 | } 7 | .btn-close:focus { 8 | box-shadow: none; 9 | } 10 | } 11 | 12 | @media (max-width: 420.98px) { 13 | .toast { 14 | width: auto; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from "react" 2 | 3 | // ** Router Import 4 | import Router from "./router/Router" 5 | 6 | const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_switch.scss: -------------------------------------------------------------------------------- 1 | // Switch 2 | // ======================================================================= 3 | 4 | .form-switch .form-check-label { 5 | .switch-icon-left, 6 | .switch-icon-right { 7 | transform: translate(0px, 1px) !important; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/@core/auth/jwt/useJwt.js: -------------------------------------------------------------------------------- 1 | // ** JWT Service Import 2 | import JwtService from "./jwtService"; 3 | 4 | // ** Export Service as useJwt 5 | export default function useJwt(jwtOverrideConfig) { 6 | const jwt = new JwtService(jwtOverrideConfig); 7 | 8 | return { 9 | jwt, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | &[class*='btn-gradient'], 3 | &[class*='btn-relief'] { 4 | &:first-child:active { 5 | color: $white; 6 | } 7 | } 8 | &[class*='btn-flat']:active { 9 | color: 'inherit'; 10 | border-color: transparent; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/@core/scss/react/apps/app-ecommerce.scss: -------------------------------------------------------------------------------- 1 | @import '../../base/pages/app-ecommerce'; 2 | 3 | .ecommerce-shop-pagination { 4 | .page-link { 5 | transition: all 0.05s ease-in-out; 6 | } 7 | } 8 | 9 | .product-checkout { 10 | .rc-input-number-handler-wrap { 11 | left: -0.35rem; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/scss/variables/_variables.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // ? TIP: It is recommended to use this file for overriding bootstrap variables. 3 | // ================================================================================================ 4 | -------------------------------------------------------------------------------- /src/@core/layouts/components/navbar/NavbarUser.js: -------------------------------------------------------------------------------- 1 | // ** Dropdowns Imports 2 | import UserDropdown from "./UserDropdown"; 3 | 4 | const NavbarUser = () => { 5 | return ( 6 | 9 | ); 10 | }; 11 | export default NavbarUser; 12 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_index.scss: -------------------------------------------------------------------------------- 1 | @import '../../base/bootstrap-extended/include'; 2 | 3 | @import 'input'; 4 | @import 'toast'; 5 | @import 'badge'; 6 | @import 'switch'; 7 | @import 'buttons'; 8 | @import 'popover'; 9 | @import 'dropdown'; 10 | @import 'carousel'; 11 | @import 'accordion'; 12 | @import 'pagination'; 13 | -------------------------------------------------------------------------------- /src/@core/scss/react/libs/shepherd-tour/shepherd-tour.scss: -------------------------------------------------------------------------------- 1 | @import '../../../base/plugins/extensions/ext-component-tour.scss'; 2 | 3 | .shepherd-element { 4 | .shepherd-content { 5 | .shepherd-button { 6 | background: inherit; 7 | color: $primary; 8 | border-radius: $btn-border-radius; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_carousel.scss: -------------------------------------------------------------------------------- 1 | // Component App Collapse 2 | // ======================================================================== 3 | 4 | html[dir='rtl'] { 5 | .carousel { 6 | .carousel-control-next-icon, 7 | .carousel-control-prev-icon { 8 | transform: rotate(180deg); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/assets/scss/variables/_variables-components.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // ? TIP: It is recommended to use this file for overriding component variables. 3 | // ================================================================================================ 4 | -------------------------------------------------------------------------------- /src/@core/scss/react/libs/drag-and-drop/drag-and-drop.scss: -------------------------------------------------------------------------------- 1 | @import '../../../base/bootstrap-extended/include'; 2 | @import '../../../base/components/include'; 3 | @import '../../../base/plugins/extensions/ext-component-drag-drop.scss'; 4 | 5 | // RTL 6 | html[dir='rtl'] { 7 | .sortable-row { 8 | flex-direction: row-reverse; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_popover.scss: -------------------------------------------------------------------------------- 1 | .popover { 2 | &[data-popper-placement='right'] { 3 | .arrow { 4 | left: -7px; 5 | } 6 | } 7 | &[data-popper-placement='left'] { 8 | .arrow { 9 | right: -7px; 10 | } 11 | } 12 | &[data-popper-placement='bottom'] { 13 | .arrow { 14 | top: -7px; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/@core/scss/base/pages/modal-create-app.scss: -------------------------------------------------------------------------------- 1 | // --- create app start----- // 2 | .create-app-wizard { 3 | &.vertical { 4 | .avatar { 5 | &.avatar-tag { 6 | min-height: 48px; 7 | min-width: 48px; 8 | img { 9 | border-radius: 0; 10 | } 11 | } 12 | } 13 | } 14 | } 15 | // --- create app end----- // 16 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_code.scss: -------------------------------------------------------------------------------- 1 | // Inline code 2 | code { 3 | padding: 0.1rem 0.4rem; 4 | font-size: 90%; 5 | color: $code-color; 6 | background-color: $kbd-bg; 7 | @include border-radius(calc($border-radius/2)); 8 | } 9 | pre { 10 | background-color: #f7f7f9; 11 | code { 12 | background-color: transparent !important; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_functions.scss: -------------------------------------------------------------------------------- 1 | @function str-replace($string, $search, $replace: '') { 2 | $index: str-index($string, $search); 3 | 4 | @if $index { 5 | @return str-slice($string, 1, $index - 1) + $replace + 6 | str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 7 | } 8 | 9 | @return $string; 10 | } 11 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/redux/store.js: -------------------------------------------------------------------------------- 1 | // ** Redux Imports 2 | import rootReducer from "./rootReducer"; 3 | import { configureStore } from "@reduxjs/toolkit"; 4 | 5 | const store = configureStore({ 6 | reducer: rootReducer, 7 | middleware: (getDefaultMiddleware) => { 8 | return getDefaultMiddleware({ 9 | serializableCheck: false, 10 | }); 11 | }, 12 | }); 13 | 14 | export { store }; 15 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // 4 | 5 | // For use with horizontal and inline forms, when you need the label (or legend) 6 | // text to align with the form controls. 7 | .col-form-label, 8 | .col-form-label-lg, 9 | .col-form-label-sm { 10 | @include font-size($form-label-font-size); // Override the `` default 11 | align-self: center; 12 | } 13 | -------------------------------------------------------------------------------- /src/@core/scss/core.scss: -------------------------------------------------------------------------------- 1 | @import './base/bootstrap.scss'; 2 | @import './base/bootstrap-extended.scss'; 3 | @import './base/colors.scss'; 4 | @import './base/components.scss'; 5 | 6 | // Themes 7 | @import './base/themes/dark-layout.scss'; 8 | @import './base/themes/bordered-layout.scss'; 9 | @import './base/themes/semi-dark-layout.scss'; 10 | // @import './base/custom-rtl.scss'; 11 | 12 | // React Specific 13 | @import 'react/index'; 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuSectionHeader.js: -------------------------------------------------------------------------------- 1 | // ** Third Party Components 2 | import { MoreHorizontal } from "react-feather"; 3 | 4 | const VerticalNavMenuSectionHeader = ({ item }) => { 5 | return ( 6 |
  • 7 | {item.header} 8 | 9 |
    • 10 | ); 11 | }; 12 | 13 | export default VerticalNavMenuSectionHeader; 14 | -------------------------------------------------------------------------------- /src/components/forms/MyCleave.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useImperativeHandle, forwardRef } from "react"; 2 | import Cleave from "cleave.js/react"; 3 | 4 | function MyCleave(props, ref) { 5 | const cleaveRef = useRef(); 6 | useImperativeHandle(ref, () => ({ 7 | focus: () => { 8 | //console.log(`fake focus`); 9 | } 10 | })); 11 | return ( 12 | 13 | ); 14 | } 15 | 16 | export default forwardRef(MyCleave); -------------------------------------------------------------------------------- /src/utility/context/Can.js: -------------------------------------------------------------------------------- 1 | // ** Imports createContext function 2 | import { createContext } from "react"; 3 | 4 | // ** Imports createContextualCan function 5 | import { createContextualCan } from "@casl/react"; 6 | 7 | // ** Create Context 8 | export const AbilityContext = createContext({ 9 | can: () => true, // Replace with your actual implementation 10 | }); 11 | 12 | // ** Init Can Context 13 | export const Can = createContextualCan(AbilityContext.Consumer); 14 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_toast.scss: -------------------------------------------------------------------------------- 1 | // Component Toast 2 | // ======================================================================== 3 | 4 | .dark-layout { 5 | .card { 6 | .toast { 7 | background-color: rgba($color: $theme-dark-body-bg, $alpha: 0.85); 8 | .toast-header { 9 | background-color: $theme-dark-body-bg; 10 | 11 | .close { 12 | color: $theme-dark-body-color; 13 | } 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/layouts/VerticalLayout.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Outlet } from "react-router-dom"; 3 | 4 | // ** Core Layout Import 5 | import Layout from "@layouts/VerticalLayout"; 6 | 7 | // ** Menu Items Array 8 | import navigation from "@src/navigation/vertical"; 9 | 10 | const VerticalLayout = (props) => { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default VerticalLayout; 19 | -------------------------------------------------------------------------------- /src/utility/hooks/useFooterType.js: -------------------------------------------------------------------------------- 1 | // ** Store Imports 2 | import { handleFooterType } from "@store/layout"; 3 | import { useDispatch, useSelector } from "react-redux"; 4 | 5 | export const useFooterType = () => { 6 | // ** Hooks 7 | const dispatch = useDispatch(); 8 | const store = useSelector((state) => state.layout); 9 | 10 | const setFooterType = (type) => { 11 | dispatch(handleFooterType(type)); 12 | }; 13 | 14 | return { setFooterType, footerType: store.footerType }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/utility/hooks/useNavbarType.js: -------------------------------------------------------------------------------- 1 | // ** Store Imports 2 | import { handleNavbarType } from "@store/layout"; 3 | import { useDispatch, useSelector } from "react-redux"; 4 | 5 | export const useNavbarType = () => { 6 | // ** Hooks 7 | const dispatch = useDispatch(); 8 | const store = useSelector((state) => state.layout); 9 | 10 | const setNavbarType = (type) => { 11 | dispatch(handleNavbarType(type)); 12 | }; 13 | 14 | return { navbarType: store.navbarType, setNavbarType }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/@core/layouts/components/menu/horizontal-menu/index.js: -------------------------------------------------------------------------------- 1 | // ** Horizontal Menu Components 2 | import HorizontalNavMenuItems from "./HorizontalNavMenuItems"; 3 | 4 | const HorizontalMenu = ({ menuData }) => { 5 | return ( 6 |
    7 | 10 |
    11 | ); 12 | }; 13 | 14 | export default HorizontalMenu; 15 | -------------------------------------------------------------------------------- /src/@core/scss/react/apps/app-invoice.scss: -------------------------------------------------------------------------------- 1 | // App Invoice 2 | // ======================================================================== 3 | 4 | @import '../../base/pages/app-invoice.scss'; 5 | 6 | .invoice-list-dataTable { 7 | svg:focus { 8 | outline: 0; 9 | } 10 | header { 11 | padding-left: 1.5rem; 12 | } 13 | } 14 | 15 | @media (max-width: 482px) { 16 | .invoice-list-dataTable { 17 | header .actions-right { 18 | select { 19 | margin-top: 1rem; 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/@core/scss/react/libs/file-uploader/file-uploader.scss: -------------------------------------------------------------------------------- 1 | @import '../../../base/bootstrap-extended/include'; 2 | @import '../../../base/components/include'; 3 | 4 | .dropzone { 5 | display: flex; 6 | cursor: pointer; 7 | min-height: 300px; 8 | align-items: 'center'; 9 | justify-content: center; 10 | background-color: $body-bg; 11 | border: 1px dashed $primary; 12 | border-radius: $border-radius; 13 | } 14 | 15 | .dark-layout { 16 | .dropzone { 17 | background-color: $theme-dark-body-bg; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/@core/scss/react/apps/app-todo.scss: -------------------------------------------------------------------------------- 1 | // App Todo 2 | // ======================================================================== 3 | 4 | @import '../../base/pages/app-todo.scss'; 5 | 6 | .todo-application { 7 | .todo-task-list { 8 | .todo-item { 9 | &:not(:hover) { 10 | transition: none !important; 11 | } 12 | 13 | &[draggable='true'] { 14 | box-shadow: 0 0 10px 0 rgba(24, 28, 33, 0.25); 15 | } 16 | } 17 | } 18 | } 19 | 20 | .sidebar-todo-modal { 21 | .react-select { 22 | z-index: 2; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/@core/components/spinner/Loading-spinner.js: -------------------------------------------------------------------------------- 1 | import classnames from "classnames"; 2 | 3 | const ComponentSpinner = ({ className }) => { 4 | return ( 5 |
    10 |
    11 |
    12 |
    13 |
    14 |
    15 |
    16 | ); 17 | }; 18 | 19 | export default ComponentSpinner; 20 | -------------------------------------------------------------------------------- /src/utility/hooks/useNavbarColor.js: -------------------------------------------------------------------------------- 1 | // ** Store Imports 2 | import { handleNavbarColor } from "@store/layout"; 3 | import { useDispatch, useSelector } from "react-redux"; 4 | 5 | export const useNavbarColor = () => { 6 | // ** Hooks 7 | const dispatch = useDispatch(); 8 | const store = useSelector((state) => state.layout); 9 | 10 | // ** Return a wrapped version of useState's setter function 11 | const setNavbarColor = (value) => { 12 | dispatch(handleNavbarColor(value)); 13 | }; 14 | 15 | return { navbarColor: store.navbarColor, setNavbarColor }; 16 | }; 17 | -------------------------------------------------------------------------------- /src/@core/scss/react/apps/app-users.scss: -------------------------------------------------------------------------------- 1 | @import '../../base/bootstrap-extended/include'; 2 | @import '../../base/components/include'; 3 | 4 | // Users App 5 | // ======================================================================== 6 | 7 | // User View: Project list table in Account tab 8 | .user-view-account-projects { 9 | border-bottom-left-radius: $border-radius; 10 | border-bottom-right-radius: $border-radius; 11 | } 12 | 13 | .app-user-list { 14 | @media (max-width: 647px) { 15 | .table-header-actions { 16 | margin-top: 1rem; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /dist 14 | /demo-* 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | .docz 28 | .eslintcache 29 | .vscode 30 | 31 | src/configs/apiConfig.js 32 | src/configs/apiConfig.js 33 | src/configs/apiConfig.js 34 | -------------------------------------------------------------------------------- /src/@core/auth/jwt/jwtDefaultConfig.js: -------------------------------------------------------------------------------- 1 | // ** Auth Endpoints 2 | export default { 3 | loginEndpoint: "/account/signin", 4 | registerEndpoint: "/account/signup", 5 | refreshEndpoint: "/jwt/refresh-token", 6 | logoutEndpoint: "/jwt/logout", 7 | 8 | // ** This will be prefixed in authorization header with token 9 | // ? e.g. Authorization: Bearer 10 | tokenType: "Bearer", 11 | 12 | // ** Value of this property will be used as key to store JWT token in storage 13 | storageTokenKeyName: "dev_accessToken", 14 | storageRefreshTokenKeyName: "dev_refreshToken", 15 | }; 16 | -------------------------------------------------------------------------------- /src/assets/scss/style-rtl.scss: -------------------------------------------------------------------------------- 1 | /*================================================================================ 2 | Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 3 | Version: 2.0 4 | Author: PIXINVENT 5 | Author URL: http://www.themeforest.net/user/pixinvent 6 | ================================================================================ 7 | 8 | NOTE: 9 | ------ 10 | PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS. 11 | WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS. */ 12 | -------------------------------------------------------------------------------- /src/views/pages/profile/BillingTabContent.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Fragment } from 'react' 3 | 4 | // ** Demo Components 5 | import PaymentMethods from './PaymentMethods' 6 | import BillingAddress from './BillingAddress' 7 | import BillingHistory from './BillingHistory' 8 | import BillingCurrentPlan from './BillingCurrentPlan' 9 | 10 | const BillingTabContent = () => { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export default BillingTabContent 22 | -------------------------------------------------------------------------------- /src/components/alerts/Alert.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Alert } from "reactstrap"; 3 | import PropTypes from "prop-types"; 4 | 5 | const WarningAlert = ({ variant, message, isOpen, toggle }) => { 6 | return
    ; 7 | }; 8 | 9 | WarningAlert.propTypes = { 10 | variant: PropTypes.string.isRequired, 11 | message: PropTypes.string.isRequired, 12 | isOpen: PropTypes.bool.isRequired, 13 | toggle: PropTypes.func.isRequired 14 | }; 15 | 16 | export default WarningAlert; 17 | -------------------------------------------------------------------------------- /src/components/forms/ErrorMessaje.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AlertCircle } from 'react-feather' 3 | import { Alert } from 'reactstrap' 4 | 5 | const ErrorMessaje = ({ message }) => { 6 | return <> 7 | {message && ( 8 | 9 |
    10 | {' '} 11 | 12 | {message} 13 | 14 |
    15 |     16 | )} 17 | 18 | } 19 | 20 | export default ErrorMessaje; -------------------------------------------------------------------------------- /src/@core/components/spinner/Fallback-spinner.js: -------------------------------------------------------------------------------- 1 | // ** Logo 2 | import logo from "@src/assets/images/logo/logo.png"; 3 | 4 | const SpinnerComponent = () => { 5 | return ( 6 |
    7 | logo 8 |
    9 |
    10 |
    11 |
    12 |
    13 |
    14 | ); 15 | }; 16 | 17 | 18 | export default SpinnerComponent; 19 | -------------------------------------------------------------------------------- /src/@core/scss/react/libs/react-hot-toasts/react-hot-toasts.scss: -------------------------------------------------------------------------------- 1 | @import '../../../base/bootstrap-extended/include'; 2 | @import '../../../base/components/include'; 3 | @import '../../../base/core/colors/palette-variables'; 4 | 5 | .react-hot-toast { 6 | font-size: 1rem; 7 | color: $body-color; 8 | letter-spacing: 0.14px; 9 | box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%); 10 | border-radius: $border-radius; 11 | } 12 | 13 | // Dark Layout 14 | .dark-layout { 15 | .react-hot-toast { 16 | color: $theme-dark-body-color; 17 | background: $theme-dark-card-bg; 18 | box-shadow: 0px 8px 16px -4px rgb(19 17 32 / 65%); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_mixins.scss: -------------------------------------------------------------------------------- 1 | // =============================================================================================== 2 | // File Name: mixins.scss 3 | // Description: Extended mixins file with new mixins features. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | // Components 11 | @import 'mixins/_navs'; 12 | -------------------------------------------------------------------------------- /src/@core/components/routes/PublicRoute.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Suspense } from "react"; 3 | import { Navigate } from "react-router-dom"; 4 | 5 | // ** Utils 6 | import { getUserData, getHomeRouteForLoggedInUser } from "@utils"; 7 | 8 | const PublicRoute = ({ children, route }) => { 9 | if (route) { 10 | const user = getUserData(); 11 | 12 | const restrictedRoute = route.meta && route.meta.restricted; 13 | 14 | if (user && restrictedRoute) { 15 | return ; 16 | } 17 | } 18 | 19 | return {children}; 20 | }; 21 | 22 | export default PublicRoute; 23 | -------------------------------------------------------------------------------- /src/@core/layouts/components/footer/index.js: -------------------------------------------------------------------------------- 1 | // ** Icons Import 2 | import { Heart } from "react-feather"; 3 | 4 | const Footer = () => { 5 | return ( 6 |

    7 | 8 | COPYRIGHT ©{new Date().getFullYear()}  9 | 14 | WoundCharts 15 | 16 | , All rights Reserved 17 | 18 | 19 |

    20 | ); 21 | }; 22 | 23 | export default Footer; 24 | -------------------------------------------------------------------------------- /src/router/routes/Authentication.js: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | 3 | const Login = lazy(() => import("../../views/Login")); 4 | const ForgotPassword = lazy(() => import("../../views/ForgotPassword")); 5 | 6 | 7 | const AuthenticationRoutes = [ 8 | { 9 | path: "/login", 10 | element: , 11 | meta: { 12 | layout: "blank", 13 | publicRoute: true, 14 | restricted: true, 15 | }, 16 | }, 17 | { 18 | path: "/forgot-password", 19 | element: , 20 | meta: { 21 | layout: 'blank', 22 | publicRoute: true, 23 | restricted: true 24 | }, 25 | }, 26 | 27 | ]; 28 | 29 | export default AuthenticationRoutes; -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: bootstrap.scss 3 | // Description: Include bootstrap core from node_modules 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | @import 'bootstrap-extended/include'; // Bootstrap includes 11 | @import 'bootstrap/scss/bootstrap'; // Bootstrap core 12 | -------------------------------------------------------------------------------- /src/@core/scss/react/libs/charts/apex-charts.scss: -------------------------------------------------------------------------------- 1 | @import '../../../base/plugins/charts/chart-apex.scss'; 2 | 3 | .apex-charts-heatmap { 4 | .apexcharts-legend-text { 5 | margin-top: 0.5rem; 6 | } 7 | } 8 | 9 | .apexcharts-canvas .apexcharts-legend-series .apexcharts-legend-text { 10 | margin-left: -10px; 11 | } 12 | 13 | .dark-layout { 14 | .apexcharts-gridlines-vertical line { 15 | stroke: $theme-dark-border-color; 16 | } 17 | } 18 | 19 | [dir='rtl'] { 20 | .apexcharts-canvas { 21 | .apexcharts-yaxis text { 22 | text-anchor: end; 23 | } 24 | .apexcharts-legend-series { 25 | .apexcharts-legend-text { 26 | margin-right: 10px; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/views/SecondPage.js: -------------------------------------------------------------------------------- 1 | import { Card, CardHeader, CardBody, CardTitle, CardText } from "reactstrap"; 2 | 3 | const SecondPage = () => { 4 | return ( 5 | 6 | 7 | Create Awesome 🙌 8 | 9 | 10 | This is your second page. 11 | 12 | Chocolate sesame snaps pie carrot cake pastry pie lollipop muffin. 13 | Carrot cake dragée chupa chups jujubes. Macaroon liquorice cookie 14 | wafer tart marzipan bonbon. Gingerbread jelly-o dragée chocolate. 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default SecondPage; 22 | -------------------------------------------------------------------------------- /src/layouts/HorizontalLayout.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Outlet } from "react-router-dom"; 3 | 4 | // ** Core Layout Import 5 | // !Do not remove the Layout import 6 | import Layout from "@layouts/HorizontalLayout"; 7 | 8 | // ** Menu Items Array 9 | import navigation from "@src/navigation/horizontal"; 10 | 11 | const HorizontalLayout = (props) => { 12 | // const [menuData, setMenuData] = useState([]) 13 | 14 | // ** For ServerSide navigation 15 | // useEffect(() => { 16 | // axios.get(URL).then(response => setMenuData(response.data)) 17 | // }, []) 18 | 19 | return ( 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default HorizontalLayout; 27 | -------------------------------------------------------------------------------- /src/@core/components/repeater/index.js: -------------------------------------------------------------------------------- 1 | // ** Third Party Components 2 | import PropTypes from "prop-types"; 3 | 4 | const Repeater = (props) => { 5 | // ** Props 6 | const { count, tag, children, ...rest } = props; 7 | 8 | // ** Custom Tag 9 | const Tag = tag; 10 | 11 | // ** Default Items 12 | const items = []; 13 | 14 | // ** Loop passed count times and push it in items Array 15 | for (let i = 0; i < count; i++) { 16 | items.push(children(i)); 17 | } 18 | 19 | return {items}; 20 | }; 21 | 22 | // ** PropTypes 23 | Repeater.propTypes = { 24 | count: PropTypes.number.isRequired, 25 | tag: PropTypes.string.isRequired, 26 | }; 27 | 28 | // ** Default Props 29 | Repeater.defaultProps = { 30 | tag: "div", 31 | }; 32 | 33 | export default Repeater; 34 | -------------------------------------------------------------------------------- /src/@core/scss/react/pages/page-profile.scss: -------------------------------------------------------------------------------- 1 | // Profile 2 | // ======================================================================= 3 | @import '../../base/bootstrap-extended/include'; 4 | @import '../../base/pages/page-profile'; 5 | 6 | #user-profile { 7 | .profile-load-more { 8 | position: relative; 9 | overflow: hidden; 10 | .ui-loader { 11 | position: unset; 12 | .overlay { 13 | left: 0; 14 | } 15 | .loader { 16 | top: 50%; 17 | } 18 | .spinner-border { 19 | width: 20px; 20 | height: 20px; 21 | } 22 | } 23 | } 24 | } 25 | 26 | @include media-breakpoint-up(md) { 27 | // navbar tabs pills 28 | .profile-header-nav { 29 | .profile-tabs { 30 | margin-left: 11.1rem; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/@core/scss/base/components/chart.scss: -------------------------------------------------------------------------------- 1 | // Apex chart Scss 2 | 3 | .apexcharts-canvas { 4 | // Tooltip Color 5 | .apexcharts-tooltip { 6 | color: $body-color !important; 7 | &.apexcharts-theme-dark { 8 | color: $white !important; 9 | } 10 | } 11 | // Toolbar Download Option Color 12 | .apexcharts-toolbar { 13 | .apexcharts-menu { 14 | .apexcharts-menu-item { 15 | color: $body-color; 16 | } 17 | } 18 | } 19 | 20 | // Text font family 21 | .apexcharts-text, 22 | .apexcharts-datalabel { 23 | font-family: $font-family-base !important; 24 | } 25 | } 26 | 27 | // apex charts tooltip 28 | .apexcharts-xaxistooltip { 29 | color: $body-color !important; 30 | } 31 | 32 | // Toolbar Z-index 33 | .apexcharts-toolbar { 34 | z-index: 10; 35 | } 36 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/forms/_form-control.scss: -------------------------------------------------------------------------------- 1 | .form-control { 2 | &::placeholder { 3 | transition: all 0.2s ease; 4 | } 5 | 6 | &:focus { 7 | &::placeholder { 8 | transform: translate(5px); 9 | transition: all 0.2s ease; 10 | } 11 | &:valid, 12 | &.is-valid { 13 | box-shadow: $input-focus-box-shadow; 14 | } 15 | } 16 | } 17 | 18 | .form-control-plaintext { 19 | &:focus { 20 | outline: none; 21 | } 22 | } 23 | 24 | // Text area line height 25 | textarea { 26 | &.form-control { 27 | line-height: 1.6rem; 28 | padding: 0.8rem 1rem !important; 29 | } 30 | 31 | &.form-control-sm { 32 | padding: 0.4rem 0.857rem !important; 33 | } 34 | 35 | &.form-control-lg { 36 | padding: 1rem 1.143rem !important; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/spinner/LoadingSpinner.js: -------------------------------------------------------------------------------- 1 | import classnames from 'classnames' 2 | import { CardText } from "reactstrap"; 3 | 4 | const LoadingSpinner = ({ className }) => { 5 | return ( 6 |
    11 |
    12 |
    13 |
    14 |
    15 |
    16 |
    17 | ) 18 | } 19 | 20 | export const DefaultLoader = () => { 21 | return ( 22 | <> 23 | 24 | Please Wait... 25 | 26 | ); 27 | }; 28 | 29 | export default LoadingSpinner 30 | -------------------------------------------------------------------------------- /src/views/pages/patients/view-tabs/Cards/StatsCard.js: -------------------------------------------------------------------------------- 1 | // ** Third Party Components 2 | import classnames from 'classnames' 3 | import { Calendar, MapPin, Box, DollarSign } from 'react-feather' 4 | 5 | // ** Custom Components 6 | import Avatar from '@components/avatar' 7 | 8 | // ** Reactstrap Imports 9 | import { Card, CardHeader, CardTitle, CardBody, CardText, Row, Col } from 'reactstrap' 10 | 11 | const StatsCard = ({ title, subtitle, icon= }) => { 12 | 13 | return ( 14 |
    15 | 16 |
    17 |
    {title}
    18 | {subtitle} 19 |
    20 |
    21 | ) 22 | } 23 | 24 | export default StatsCard 25 | -------------------------------------------------------------------------------- /src/@core/scss/base/pages/page-coming-soon.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: coming-soon.scss 3 | // Description: Coming Soon pages custom scss 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | /*========== Coming Soon Background Image =========*/ 11 | 12 | .clockCard { 13 | float: left; 14 | } 15 | 16 | .getting-started { 17 | font-size: 3rem; 18 | } 19 | .lead { 20 | font-size: 1rem; 21 | } 22 | -------------------------------------------------------------------------------- /src/@core/scss/react/libs/noui-slider/noui-slider.scss: -------------------------------------------------------------------------------- 1 | @import '~nouislider/dist/nouislider.css'; 2 | @import '../../../base/plugins/extensions/ext-component-sliders.scss'; 3 | @import '../../../base/core/colors/palette-noui'; 4 | 5 | .noUi-vertical .noUi-origin { 6 | top: 0; 7 | } 8 | 9 | .noUi-horizontal { 10 | .noUi-origin { 11 | .noUi-handle { 12 | right: -10px; 13 | } 14 | } 15 | } 16 | 17 | html[dir='rtl'] .noUi-horizontal { 18 | .noUi-origin { 19 | left: auto !important; 20 | right: 0 !important; 21 | .noUi-handle { 22 | right: unset; 23 | left: -0.5rem; 24 | } 25 | } 26 | .noUi-connects { 27 | .noUi-connect { 28 | left: -0.5rem; 29 | transform-origin: 0; 30 | } 31 | } 32 | .noUi-value-horizontal { 33 | transform: translate(-50%, 50%); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/@core/scss/base/plugins/extensions/ext-component-media-player.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: ext-component-media-player.scss 3 | // Description: Media Player SCSS. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | // to remove outline on focus 11 | .audio-player { 12 | &:focus { 13 | outline: 0; 14 | } 15 | } 16 | .plyr__controls { 17 | justify-content: flex-start; 18 | } 19 | .plyr__progress { 20 | flex-grow: 1; 21 | } 22 | -------------------------------------------------------------------------------- /src/assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | /*================================================================================ 2 | Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 3 | Version: 2.0 4 | Author: PIXINVENT 5 | Author URL: http://www.themeforest.net/user/pixinvent 6 | ================================================================================ 7 | 8 | NOTE: 9 | ------ 10 | PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS. 11 | WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS. */ 12 | 13 | .rdtOpen { 14 | .rdtPicker { 15 | position: absolute; 16 | top: -273px; 17 | } 18 | } 19 | 20 | .select__multi-value .select__multi-value__label, 21 | .react-select__multi-value .select__multi-value__label { 22 | color: black !important; 23 | } 24 | -------------------------------------------------------------------------------- /src/@core/scss/base/components/_include.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: include.scss 3 | // Description: Common components file to includ all theme specific custom components. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | // Overrides user variable 11 | @import 'scss/variables/_variables-components'; // Component custom variable override (for user purpose) 12 | @import 'variables'; // Component variable 13 | @import 'variables-dark'; // Dark variable 14 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_type.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: type.scss 3 | // Description: Type pages custom scss 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | // text heading color 11 | .text-body-heading { 12 | color: $headings-color; 13 | &:hover { 14 | color: inherit !important; 15 | } 16 | } 17 | // text body hover color if have link 18 | .text-body { 19 | &[href]:hover { 20 | color: $link-hover-color !important; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/@core/components/ripple-button/ripple-button.scss: -------------------------------------------------------------------------------- 1 | // Component: Ripple Button 2 | // ======================================================================== 3 | 4 | @import '../../scss/base/bootstrap-extended/include'; 5 | @import '../../scss/base/components/include'; 6 | 7 | .waves-effect { 8 | position: relative; 9 | overflow: hidden; 10 | .waves-ripple { 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | opacity: 0; 16 | width: 0; 17 | height: 0; 18 | border-radius: 50%; 19 | background: rgba($color: $white, $alpha: 0.2); 20 | animation: ripple-effect 0.7s ease; 21 | } 22 | } 23 | 24 | @keyframes ripple-effect { 25 | 0% { 26 | opacity: 0; 27 | } 28 | 25% { 29 | opacity: 1; 30 | } 31 | 100% { 32 | width: 200%; 33 | padding-bottom: 200%; 34 | opacity: 0; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/utility/hooks/useRTL.js: -------------------------------------------------------------------------------- 1 | //** React Imports 2 | import { useEffect } from "react"; 3 | 4 | // ** Store & Actions 5 | import { handleRTL } from "@store/layout"; 6 | import { useDispatch, useSelector } from "react-redux"; 7 | 8 | export const useRTL = () => { 9 | // ** Store Vars 10 | const dispatch = useDispatch(); 11 | const isRtl = useSelector((state) => state.layout.isRTL); 12 | 13 | // ** Return a wrapped version of useState's setter function 14 | const setValue = (value) => { 15 | dispatch(handleRTL(value)); 16 | }; 17 | 18 | useEffect(() => { 19 | // ** Get HTML Tag 20 | const element = document.getElementsByTagName("html")[0]; 21 | 22 | // ** If isRTL then add attr dir='rtl' with HTML else attr dir='ltr' 23 | if (isRtl) { 24 | element.setAttribute("dir", "rtl"); 25 | } else { 26 | element.setAttribute("dir", "ltr"); 27 | } 28 | }, [isRtl]); 29 | 30 | return [isRtl, setValue]; 31 | }; 32 | -------------------------------------------------------------------------------- /src/@core/scss/base/pages/app-invoice-list.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: app-invoice-list.scss 3 | // Description: Invoice Layout page layouts SCSS. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy HTML Admin Template 6 | // Version: 1.0 7 | // Author: PIXINVENT 8 | // Author URL: http://www.themeforest.net/user/pixinvent 9 | // ================================================================================================ 10 | 11 | @import '../bootstrap-extended/include'; // Bootstrap includes 12 | @import '../components/include'; // Components includes 13 | 14 | .invoice-list-wrapper { 15 | @media (max-width: 470px) { 16 | .invoice_status { 17 | margin-top: 1rem; 18 | width: 100%; 19 | select { 20 | margin-left: 0 !important; 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_progress.scss: -------------------------------------------------------------------------------- 1 | /*========================================================================================= 2 | File Name: progress.scss 3 | Description: Extended bootstrap progress bar scss. 4 | ---------------------------------------------------------------------------------------- 5 | Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | Author: PIXINVENT 7 | Author URL: http://www.themeforest.net/user/pixinvent 8 | ---------------------------------------------------------------------------------------- 9 | ==========================================================================================*/ 10 | 11 | .progress { 12 | // border radius to set for stacked bars 13 | .progress-bar + .progress-bar:not(:last-child) { 14 | border-radius: 0; 15 | } 16 | .progress-bar:last-child { 17 | border-top-right-radius: $progress-border-radius; 18 | border-bottom-right-radius: $progress-border-radius; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/@core/components/ui-loader/ui-loader.scss: -------------------------------------------------------------------------------- 1 | // Component: UI Loader 2 | // ======================================================================== 3 | 4 | // ** Base Styles Imports 5 | @import '../../scss/base/bootstrap-extended/include'; 6 | @import '../../scss/base/components/include'; 7 | 8 | .ui-loader { 9 | position: relative; 10 | 11 | &.show { 12 | // background-color: rgba($color: $black, $alpha: 0.3); 13 | .overlay { 14 | content: ''; 15 | position: absolute; 16 | width: 100%; 17 | height: 100%; 18 | top: 0; 19 | background-color: rgba($color: $black, $alpha: 0.3); 20 | } 21 | 22 | > :first-child, 23 | code { 24 | background-color: initial; 25 | } 26 | } 27 | 28 | .loader { 29 | top: 50%; 30 | left: 50%; 31 | display: flex; 32 | position: absolute; 33 | align-items: center; 34 | flex-direction: column; 35 | justify-content: center; 36 | transform: translate(-50%, -50%); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/ui-loader/ui-loader.scss: -------------------------------------------------------------------------------- 1 | // Component: UI Loader 2 | // ======================================================================== 3 | 4 | // ** Base Styles Imports 5 | //@import '../../scss/base/bootstrap-extended/include'; 6 | //@import '../../scss/base/components/include'; 7 | 8 | .ui-loader { 9 | position: relative; 10 | 11 | &.show { 12 | // background-color: rgba($color: $black, $alpha: 0.3); 13 | .overlay { 14 | content: ''; 15 | position: absolute; 16 | width: 100%; 17 | height: 100%; 18 | top: 0; 19 | // background-color: rgba($color: $black, $alpha: 0.3); 20 | } 21 | 22 | > :first-child, 23 | code { 24 | background-color: initial; 25 | } 26 | } 27 | 28 | .loader { 29 | top: 50%; 30 | left: 50%; 31 | display: flex; 32 | position: absolute; 33 | align-items: center; 34 | flex-direction: column; 35 | justify-content: center; 36 | transform: translate(-50%, -50%); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/navigation/horizontal/index.js: -------------------------------------------------------------------------------- 1 | import { Mail, Users, Box, Thermometer, MapPin, Home } from "react-feather"; 2 | import { IoMedkit } from "react-icons/io5"; 3 | 4 | export default [ 5 | { 6 | id: "home", 7 | title: "Home", 8 | icon: , 9 | navLink: "/", 10 | }, 11 | { 12 | id: "patientsPage", 13 | title: "Patients", 14 | icon: , 15 | navLink: "/patients", 16 | }, 17 | { 18 | id: "productsPage", 19 | title: "Products", 20 | icon: , 21 | navLink: "/products", 22 | }, 23 | { 24 | id: "diagnosesPage", 25 | title: "Diagnoses", 26 | icon: , 27 | navLink: "/diagnoses", 28 | }, 29 | { 30 | id: "locationsPage", 31 | title: "Locations", 32 | icon: , 33 | navLink: "/locations", 34 | }, 35 | 36 | { 37 | id: "lookupsPage", 38 | title: "Lookups", 39 | icon: , 40 | navLink: "/lookups", 41 | }, 42 | ]; 43 | -------------------------------------------------------------------------------- /src/@core/components/extensions-header/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import Proptypes from "prop-types"; 3 | 4 | // ** Reactstrap Imports 5 | import { Row, Col } from "reactstrap"; 6 | 7 | const ExtensionsHeader = (props) => { 8 | return ( 9 | 10 | 11 |

    15 | {props.title} 16 |

    17 | {props.link ? ( 18 | 19 | {props.subTitle} 20 | 21 | ) : ( 22 |

    {props.subTitle}

    23 | )} 24 | 25 |     26 | ); 27 | }; 28 | export default ExtensionsHeader; 29 | 30 | // ** PropTypes 31 | ExtensionsHeader.propTypes = { 32 | link: Proptypes.string, 33 | title: Proptypes.string.isRequired, 34 | subTitle: Proptypes.string.isRequired, 35 | }; 36 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Component Pagination 2 | // ======================================================================== 3 | .pagination { 4 | &.react-paginate { 5 | .page-link { 6 | transition: all 0.05s ease-in-out; 7 | } 8 | 9 | .page-item.prev, 10 | .page-item.next { 11 | a.page-link:before, 12 | a.page-link:after { 13 | height: 16.83px; 14 | margin-top: 1px; 15 | } 16 | } 17 | &.pagination-sm { 18 | .page-item.prev, 19 | .page-item.next { 20 | a.page-link:before, 21 | a.page-link:after { 22 | height: 14.5px; 23 | } 24 | } 25 | } 26 | &.pagination-lg { 27 | .page-item.prev, 28 | .page-item.next { 29 | a.page-link:before, 30 | a.page-link:after { 31 | height: 19.5px; 32 | } 33 | } 34 | } 35 | } 36 | 37 | &.no-navigation { 38 | li:first-of-type, 39 | li:last-of-type { 40 | display: none; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/@core/scss/react/pages/page-account-settings.scss: -------------------------------------------------------------------------------- 1 | // Account Settings 2 | // ======================================================================== 3 | 4 | .account-settings-tab { 5 | box-shadow: none; 6 | .nav-item { 7 | .nav-link.active { 8 | background-color: transparent !important; 9 | transform: translateY(0) !important; 10 | &:after { 11 | left: auto !important; 12 | top: 1.2rem !important; 13 | right: -1.5rem !important; 14 | } 15 | } 16 | } 17 | } 18 | 19 | .account-setting-wrapper { 20 | .account-settings-tab { 21 | .nav-item { 22 | .nav-link { 23 | &.active { 24 | &:after { 25 | top: 100% !important; 26 | left: 0 !important; 27 | } 28 | } 29 | } 30 | } 31 | } 32 | } 33 | 34 | @media (max-width: 576px) { 35 | .account-settings-tab { 36 | .nav-item { 37 | .nav-link.active { 38 | &:after { 39 | display: none; 40 | } 41 | } 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/@core/layouts/components/menu/horizontal-menu/HorizontalNavMenuItems.js: -------------------------------------------------------------------------------- 1 | // ** Menu Components Imports 2 | import HorizontalNavMenuLink from "./HorizontalNavMenuLink"; 3 | import HorizontalNavMenuGroup from "./HorizontalNavMenuGroup"; 4 | import { resolveHorizontalNavMenuItemComponent as resolveNavItemComponent } from "@layouts/utils"; 5 | 6 | const HorizontalNavMenuItems = (props) => { 7 | // ** Components Object 8 | const Components = { 9 | HorizontalNavMenuGroup, 10 | HorizontalNavMenuLink, 11 | }; 12 | 13 | // ** Render Nav Items 14 | const RenderNavItems = props.items.map((item, index) => { 15 | const TagName = Components[resolveNavItemComponent(item)]; 16 | if (item.children) { 17 | return ( 18 | canViewMenuGroup(item) && ( 19 | 20 | ) 21 | ); 22 | } 23 | return ; 24 | }); 25 | 26 | return RenderNavItems; 27 | }; 28 | 29 | export default HorizontalNavMenuItems; 30 | -------------------------------------------------------------------------------- /src/@core/scss/base/pages/ui-feather.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap-extended/include'; // Bootstrap includes 2 | 3 | .icon-search-wrapper { 4 | max-width: 300px; 5 | 6 | .feather-search { 7 | height: 1.15rem; 8 | width: 1.15rem; 9 | } 10 | } 11 | #icons-container { 12 | .icon-card { 13 | width: 128px; 14 | } 15 | } 16 | 17 | // Active Card 18 | .icon-card { 19 | border: 1px solid transparent; 20 | &.active { 21 | border-color: $primary; 22 | i, 23 | svg { 24 | color: $primary; 25 | } 26 | } 27 | } 28 | 29 | @media (max-width: 1024px) { 30 | #icons-container { 31 | .icon-card { 32 | width: 126px; 33 | } 34 | } 35 | } 36 | 37 | @media (max-width: 768px) { 38 | #icons-container { 39 | .icon-card { 40 | width: 131px; 41 | } 42 | } 43 | } 44 | 45 | @media (max-width: 414px) { 46 | #icons-container { 47 | .icon-card { 48 | width: 110px; 49 | } 50 | } 51 | } 52 | 53 | @media (max-width: 375px) { 54 | #icons-container { 55 | .icon-card { 56 | width: 150px; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/@core/layouts/BlankLayout.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Outlet } from "react-router-dom"; 3 | import { useEffect, useState } from "react"; 4 | 5 | // ** Custom Hooks 6 | import { useSkin } from "@hooks/useSkin"; 7 | 8 | // ** Third Party Components 9 | import classnames from "classnames"; 10 | 11 | const BlankLayout = () => { 12 | // ** States 13 | const [isMounted, setIsMounted] = useState(false); 14 | 15 | // ** Hooks 16 | const { skin } = useSkin(); 17 | 18 | useEffect(() => { 19 | setIsMounted(true); 20 | return () => setIsMounted(false); 21 | }, []); 22 | 23 | if (!isMounted) { 24 | return null; 25 | } 26 | 27 | return ( 28 |
    33 |
    34 |
    35 |
    36 | 37 |
    38 |
    39 |
    40 |
    41 | ); 42 | }; 43 | 44 | export default BlankLayout; 45 | -------------------------------------------------------------------------------- /src/@core/scss/base/core/mixins/transitions.scss: -------------------------------------------------------------------------------- 1 | @mixin transition($transition) { 2 | -moz-transition: $transition; 3 | -o-transition: $transition; 4 | -webkit-transition: $transition; 5 | transition: $transition; 6 | } 7 | @mixin transition-property($property) { 8 | -moz-transition-property: $property; 9 | -o-transition-property: $property; 10 | -webkit-transition-property: $property; 11 | transition-property: $property; 12 | } 13 | @mixin transition-duration($duration) { 14 | -moz-transition-property: $duration; 15 | -o-transition-property: $duration; 16 | -webkit-transition-property: $duration; 17 | transition-property: $duration; 18 | } 19 | @mixin transition-timing-function($timing) { 20 | -moz-transition-timing-function: $timing; 21 | -o-transition-timing-function: $timing; 22 | -webkit-transition-timing-function: $timing; 23 | transition-timing-function: $timing; 24 | } 25 | @mixin transition-delay($delay) { 26 | -moz-transition-delay: $delay; 27 | -o-transition-delay: $delay; 28 | -webkit-transition-delay: $delay; 29 | transition-delay: $delay; 30 | } 31 | -------------------------------------------------------------------------------- /src/@core/components/widgets/stats/StatsVertical.js: -------------------------------------------------------------------------------- 1 | // ** Third Party Components 2 | import PropTypes from "prop-types"; 3 | 4 | // ** Reactstrap Imports 5 | import { Card, CardBody } from "reactstrap"; 6 | 7 | const StatsVertical = ({ icon, color, stats, statTitle, className }) => { 8 | return ( 9 | 10 | 11 |
    16 |
    {icon}
    17 |
    18 |

    {stats}

    19 |

    {statTitle}

    20 |     21 |     22 | ); 23 | }; 24 | 25 | export default StatsVertical; 26 | 27 | // ** PropTypes 28 | StatsVertical.propTypes = { 29 | className: PropTypes.string, 30 | icon: PropTypes.element.isRequired, 31 | color: PropTypes.string.isRequired, 32 | stats: PropTypes.string.isRequired, 33 | statTitle: PropTypes.string.isRequired, 34 | }; 35 | -------------------------------------------------------------------------------- /src/@core/components/widgets/stats/TinyChartStats.js: -------------------------------------------------------------------------------- 1 | // ** Third Party Components 2 | import PropTypes from "prop-types"; 3 | import Chart from "react-apexcharts"; 4 | 5 | // ** Reactstrap Imports 6 | import { Card, CardBody } from "reactstrap"; 7 | 8 | const TinyChartStats = (props) => { 9 | // ** Props 10 | const { title, stats, options, series, type, height } = props; 11 | 12 | return ( 13 | 14 | 15 |
    {title}
    16 |

    {stats}

    17 | 18 |     19 |     20 | ); 21 | }; 22 | 23 | export default TinyChartStats; 24 | 25 | // ** PropTypes 26 | TinyChartStats.propTypes = { 27 | type: PropTypes.string.isRequired, 28 | title: PropTypes.string.isRequired, 29 | stats: PropTypes.string.isRequired, 30 | series: PropTypes.array.isRequired, 31 | options: PropTypes.object.isRequired, 32 | }; 33 | 34 | // ** Default Props 35 | TinyChartStats.defaultProps = { 36 | height: 100, 37 | }; 38 | -------------------------------------------------------------------------------- /src/@core/scss/base/colors.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: colors.scss 3 | // Description: Common color file to include color paletter and colors file, its qiore good to 4 | // have all color classes in a separate file as it's quite heavy. 5 | // ---------------------------------------------------------------------------------------------- 6 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 7 | // Author: PIXINVENT 8 | // Author URL: http://www.themeforest.net/user/pixinvent 9 | // ================================================================================================ 10 | 11 | // Core 12 | // ------------------------------ 13 | 14 | // Import variables and mixins 15 | @import 'bootstrap/scss/mixins/gradients'; 16 | @import 'core/mixins/hex2rgb'; 17 | 18 | //box shadow for alert's heading 19 | @import 'core/mixins/alert'; 20 | 21 | // Color system, always load last 22 | // ------------------------------ 23 | @import 'core/colors/palette'; 24 | @import 'core/colors/palette-gradient.scss'; 25 | 26 | -------------------------------------------------------------------------------- /src/utility/hooks/useSkin.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { useEffect } from "react"; 3 | 4 | // ** Store Imports 5 | import { handleSkin } from "@store/layout"; 6 | import { useDispatch, useSelector } from "react-redux"; 7 | 8 | export const useSkin = () => { 9 | // ** Hooks 10 | const dispatch = useDispatch(); 11 | const store = useSelector((state) => state.layout); 12 | 13 | const setSkin = (type) => { 14 | dispatch(handleSkin(type)); 15 | }; 16 | 17 | useEffect(() => { 18 | // ** Get Body Tag 19 | const element = window.document.body; 20 | 21 | // ** Define classnames for skins 22 | const classNames = { 23 | dark: "dark-layout", 24 | bordered: "bordered-layout", 25 | "semi-dark": "semi-dark-layout", 26 | }; 27 | 28 | // ** Remove all classes from Body on mount 29 | element.classList.remove(...element.classList); 30 | 31 | // ** If skin is not light add skin class 32 | if (store.skin !== "light") { 33 | element.classList.add(classNames[store.skin]); 34 | } 35 | }, [store.skin]); 36 | 37 | return { skin: store.skin, setSkin }; 38 | }; 39 | -------------------------------------------------------------------------------- /src/@core/scss/react/apps/app-email.scss: -------------------------------------------------------------------------------- 1 | // App Email 2 | // ======================================================================== 3 | 4 | @import '../../base/pages/app-email.scss'; 5 | 6 | // For editor height 7 | .email-application { 8 | #message-editor .rdw-editor-main { 9 | min-height: 17.9rem; 10 | } 11 | } 12 | 13 | // Dark Layout 14 | .dark-layout { 15 | .email-application { 16 | .email-app-menu { 17 | .list-group-item { 18 | &.list-group-item-action:not(.active):not(:active) { 19 | border-color: transparent; 20 | } 21 | &:not(.active):not(:active):focus { 22 | background-color: transparent; 23 | } 24 | } 25 | } 26 | } 27 | } 28 | 29 | html[dir='rtl'] { 30 | .email-application { 31 | .email-app-details .email-detail-header { 32 | .email-header-left .go-back svg, 33 | .email-header-right .email-prev svg, 34 | .email-header-right .email-next svg { 35 | transform: rotate(180deg); 36 | } 37 | } 38 | 39 | .toggle-cc.me-1 { 40 | margin-right: 1rem; 41 | margin-left: 0 !important; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/configs/i18n/index.js: -------------------------------------------------------------------------------- 1 | // ** I18n Imports 2 | import i18n from 'i18next' 3 | import Backend from 'i18next-http-backend' 4 | import { initReactI18next } from 'react-i18next' 5 | import LanguageDetector from 'i18next-browser-languagedetector' 6 | 7 | // ** Languages Imports 8 | const en = new URL('../../assets/data/locales/en.json', import.meta.url).href 9 | const es = new URL('../../assets/data/locales/es.json', import.meta.url).href 10 | 11 | const languages = { 12 | en, 13 | es 14 | } 15 | 16 | i18n 17 | 18 | // Enables the i18next backend 19 | .use(Backend) 20 | 21 | // Enable automatic language detection 22 | .use(LanguageDetector) 23 | 24 | // Enables the hook initialization module 25 | .use(initReactI18next) 26 | .init({ 27 | lng: 'en', 28 | backend: { 29 | /* translation file path */ 30 | loadPath: lng => languages[lng] 31 | }, 32 | fallbackLng: 'en', 33 | debug: false, 34 | keySeparator: false, 35 | react: { 36 | useSuspense: false 37 | }, 38 | interpolation: { 39 | escapeValue: false, 40 | formatSeparator: ',' 41 | } 42 | }) 43 | 44 | export default i18n 45 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/mixins/_navs.scss: -------------------------------------------------------------------------------- 1 | // Justified nav links 2 | // ------------------------- 3 | 4 | @mixin nav-justified { 5 | width: 100%; 6 | 7 | .nav-item { 8 | float: none; 9 | } 10 | 11 | .nav-link { 12 | text-align: center; 13 | margin-bottom: 5px; 14 | } 15 | 16 | > .dropdown .dropdown-menu { 17 | top: auto; 18 | left: auto; 19 | } 20 | 21 | @include media-breakpoint-up(sm) { 22 | .nav-item { 23 | display: block; 24 | width: 1%; 25 | } 26 | .nav-link { 27 | margin-bottom: 0; 28 | } 29 | } 30 | } 31 | 32 | // Move borders to anchors instead of bottom of list 33 | // 34 | // Mixin for adding on top the shared `.nav-justified` styles for our tabs 35 | @mixin nav-tabs-justified { 36 | .nav-link { 37 | // Override margin from .nav-tabs 38 | margin-right: 0; 39 | border-radius: $border-radius; 40 | } 41 | 42 | @include media-breakpoint-up(sm) { 43 | .nav-link.active, 44 | .nav-link.active:hover, 45 | .nav-link.active:focus { 46 | border-bottom-color: transparent; //$nav-tabs-justified-active-link-border-color; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/configs/themeConfig.js: -------------------------------------------------------------------------------- 1 | // Logo Import 2 | import logo from "@src/assets/images/logo/logo.png"; 3 | 4 | // You can customize the template with the help of this file 5 | 6 | //Template config options 7 | const themeConfig = { 8 | app: { 9 | appName: "WoundCharts", 10 | appLogoImage: logo, 11 | }, 12 | layout: { 13 | isRTL: false, 14 | skin: "light", // light, dark, bordered, semi-dark 15 | type: "vertical", // vertical, horizontal 16 | contentWidth: "full", // full, boxed 17 | menu: { 18 | isHidden: false, 19 | isCollapsed: false, 20 | }, 21 | navbar: { 22 | // ? For horizontal menu, navbar type will work for navMenu type 23 | type: "floating", // static , sticky , floating, hidden 24 | backgroundColor: "white", // BS color options [primary, success, etc] 25 | }, 26 | footer: { 27 | type: "static", // static, sticky, hidden 28 | }, 29 | customizer: false, 30 | scrollTop: true, // Enable scroll to top button 31 | toastPosition: "top-right", // top-left, top-center, top-right, bottom-left, bottom-center, bottom-right 32 | }, 33 | }; 34 | 35 | export default themeConfig; 36 | -------------------------------------------------------------------------------- /src/@core/scss/base/plugins/forms/form-validation.scss: -------------------------------------------------------------------------------- 1 | @import '../../bootstrap-extended/include'; // Bootstrap includes 2 | @import '../../components/include'; // Components includes 3 | 4 | form { 5 | span.error { 6 | width: 100%; 7 | font-size: 0.857rem; 8 | } 9 | .error:not(input) { 10 | color: $danger; 11 | } 12 | input.error, 13 | input.error:focus { 14 | border-color: $danger !important; 15 | } 16 | textarea.error { 17 | border-color: $danger !important; 18 | } 19 | .select2.error { 20 | + .select2-container--classic .select2-selection--single, 21 | + .select2-container--default .select2-selection--single, 22 | + .select2-container--classic .select2-selection--multiple, 23 | + .select2-container--default .select2-selection--multiple { 24 | border-color: $danger !important; 25 | } 26 | } 27 | } 28 | .was-validated .form-select:invalid:not([multiple]):not([size]), 29 | .was-validated .form-select:invalid:not([multiple])[size='1'], 30 | .form-select.is-invalid:not([multiple]):not([size]), 31 | .form-select.is-invalid:not([multiple])[size='1'] { 32 | background-position: right 1rem center, center right 2.5rem; 33 | } 34 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_alert.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | 3 | .alert { 4 | font-weight: 500; 5 | padding: 0; 6 | // close 7 | &.alert-dismissible { 8 | .btn-close { 9 | padding: 1rem $alert-padding-x; 10 | background-color: transparent !important; 11 | box-shadow: none !important; 12 | } 13 | .alert-body { 14 | padding: $alert-padding-y ($alert-padding-x * 2) $alert-padding-y $alert-padding-x; 15 | } 16 | } 17 | .btn-close:focus { 18 | outline: 0; 19 | } 20 | 21 | .alert-link:hover { 22 | text-decoration: underline; 23 | } 24 | 25 | // For Alert Content 26 | p { 27 | font-weight: 500; 28 | padding: 2px 0; 29 | margin-bottom: 0; 30 | vertical-align: middle; 31 | } 32 | 33 | // For alert heading 34 | .alert-heading { 35 | font-weight: 600; 36 | font-size: $font-size-base; 37 | padding: $alert-padding-y $alert-padding-x; 38 | margin-bottom: 0; 39 | } 40 | .alert-body { 41 | padding: $alert-padding-y $alert-padding-x; 42 | } 43 | 44 | // For dark alert 45 | &.alert-dark { 46 | .alert-heading { 47 | @include alert-heading-bs($dark); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/@core/scss/base/core/colors/palette-noui.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: pallette-noui.scss 3 | // Description: noui color system styles 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | // Color palettes 11 | @import 'palette-variables'; 12 | 13 | @each $color_name, $color in $colors { 14 | @each $color_type, $color_value in $color { 15 | @if $color_type == 'base' { 16 | .slider-#{$color_name} { 17 | background-color: rgba($color_value, 0.12); 18 | .noUi-connect { 19 | background: $color_value !important; 20 | } 21 | &.noUi-connect { 22 | background: $color_value !important; 23 | } 24 | .noUi-handle { 25 | border-color: $color_value !important; 26 | } 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_popover.scss: -------------------------------------------------------------------------------- 1 | // Popovers 2 | 3 | .popover { 4 | box-shadow: $popover-box-shadow; 5 | // popover header style 6 | .popover-header { 7 | @include font-size(1.07rem); 8 | border: 1px solid $popover-header-bg; 9 | } 10 | // popover body style 11 | .popover-body { 12 | border: 1px solid $popover-border-color; 13 | border-top-color: $popover-bg; 14 | border-bottom-left-radius: $popover-border-radius; 15 | border-bottom-right-radius: $popover-border-radius; 16 | } 17 | // popover bottom arrow color like header 18 | &.bs-popover-bottom { 19 | .popover-arrow:after { 20 | border-bottom-color: $popover-header-bg; 21 | } 22 | } 23 | } 24 | // To set arrow border as we have added border to popover-body and popover-header 25 | .bs-popover-top { 26 | > .popover-arrow { 27 | &::after { 28 | bottom: $popover-border-width + 1px; 29 | } 30 | } 31 | } 32 | .bs-popover-end { 33 | > .popover-arrow { 34 | &::after { 35 | left: $popover-border-width + 1px; 36 | } 37 | } 38 | } 39 | .bs-popover-start { 40 | > .popover-arrow { 41 | &::after { 42 | right: $popover-border-width + 1px; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_include.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: include.scss 3 | // Description: Common components file to include all theme specific custom components. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | // Variables 11 | // ------------------------------ 12 | 13 | // Functions 14 | @import 'bootstrap/scss/functions'; // Bootstrap core function 15 | @import 'functions'; // Bootstrap extended function 16 | 17 | // Variables 18 | @import 'scss/variables/variables'; // Bootstrap custom variable override (for user purpose) 19 | @import 'variables'; // Bootstrap extended variable override 20 | @import 'bootstrap/scss/variables'; // Bootstrap core variable 21 | 22 | // Mixins 23 | @import 'bootstrap/scss/mixins'; // Bootstrap core mixins 24 | @import 'mixins'; // Bootstrap extended mixins 25 | -------------------------------------------------------------------------------- /src/@core/scss/base/plugins/extensions/ext-component-ratings.scss: -------------------------------------------------------------------------------- 1 | @import '../../bootstrap-extended/include'; // Bootstrap includes 2 | @import '../../components/include'; // Components includes 3 | 4 | .jq-ry-container:not(.multi-color-ratings) { 5 | .jq-ry-normal-group { 6 | i, 7 | svg { 8 | fill: $gray-100; 9 | } 10 | } 11 | .jq-ry-rated-group { 12 | i, 13 | svg { 14 | fill: $warning; 15 | } 16 | } 17 | } 18 | 19 | // Dark Layout 20 | .dark-layout { 21 | .jq-ry-container:not(.multi-color-ratings) { 22 | .jq-ry-normal-group { 23 | i, 24 | svg { 25 | fill: $theme-dark-text-muted-color; 26 | } 27 | } 28 | } 29 | } 30 | 31 | // RTL 32 | [data-textdirection='rtl'] { 33 | .jq-ry-container:not(.multi-color-ratings) { 34 | .jq-ry-normal-group { 35 | i, 36 | svg { 37 | fill: $warning; 38 | } 39 | } 40 | .jq-ry-rated-group { 41 | i, 42 | svg { 43 | fill: $gray-100; 44 | } 45 | } 46 | } 47 | .dark-layout { 48 | .jq-ry-container:not(.multi-color-ratings) { 49 | .jq-ry-rated-group { 50 | i, 51 | svg { 52 | fill: $theme-dark-text-muted-color; 53 | } 54 | } 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/components/forms/SwitchInput.js: -------------------------------------------------------------------------------- 1 | // SwitchControl.js 2 | 3 | import React from 'react'; 4 | import { Input, Label } from 'reactstrap'; 5 | import { Check, X } from 'react-feather' 6 | 7 | const SwitchInput = ({ name, label, checked, onChange }) => { 8 | return ( 9 |
    10 |
    11 | 14 |
    15 | 22 | 23 |
    24 |
    25 |
    26 | ); 27 | }; 28 | 29 | const CustomLabel = ({ htmlFor }) => { 30 | return ( 31 | 39 | ) 40 | } 41 | 42 | export default SwitchInput; 43 | -------------------------------------------------------------------------------- /src/utility/hooks/useOnClickOutside.js: -------------------------------------------------------------------------------- 1 | //** React Imports 2 | import { useEffect } from "react"; 3 | 4 | export const useOnClickOutside = (ref, handler) => { 5 | useEffect( 6 | () => { 7 | const listener = (event) => { 8 | // ** Do nothing if clicking ref's element or descendent elements 9 | if (!ref.current || ref.current.contains(event.target)) { 10 | return; 11 | } 12 | 13 | // ** Call passed function on click outside 14 | handler(event); 15 | }; 16 | 17 | document.addEventListener("mousedown", listener); 18 | document.addEventListener("touchstart", listener); 19 | 20 | return () => { 21 | document.removeEventListener("mousedown", listener); 22 | document.removeEventListener("touchstart", listener); 23 | }; 24 | }, 25 | // ** Add ref and handler to effect dependencies 26 | // ** It's worth noting that because passed in handler is a new ... 27 | // ** ... function on every render that will cause this effect ... 28 | // ** ... callback/cleanup to run every render. It's not a big deal ... 29 | // ** ... but to optimize you can wrap handler in useCallback before ... 30 | // ** ... passing it into this hook. 31 | [ref, handler] 32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /src/@core/scss/base/plugins/maps/map-leaflet.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: leaflet.scss 3 | // Description: Leaflet map custom scss 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | .leaflet-map { 11 | height: 400px; 12 | z-index: 1; 13 | } 14 | 15 | html[data-textdirection='rtl'] { 16 | .leaflet-map { 17 | .leaflet-control-container { 18 | .leaflet-left { 19 | left: 0; 20 | right: unset; 21 | .leaflet-control-zoom, 22 | .leaflet-control-layers { 23 | margin-right: 0; 24 | margin-left: 10px; 25 | } 26 | } 27 | .leaflet-right { 28 | right: 0; 29 | left: unset; 30 | .leaflet-control-zoom, 31 | .leaflet-control-layers { 32 | margin-right: 10px; 33 | margin-left: 0px; 34 | } 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Component Dropdown 2 | // ======================================================================== 3 | 4 | .dropdown-menu[data-popper-placement]:not([data-popper-placement^='top-']) { 5 | top: 0.5rem !important; 6 | margin: unset !important; 7 | } 8 | 9 | .dropdown-menu[data-popper-placement^='top-'] { 10 | bottom: 0.5rem !important; 11 | margin: unset !important; 12 | } 13 | 14 | // Navbar Dropdowns 15 | .dropdown-notification, 16 | .dropdown-cart { 17 | .dropdown-menu { 18 | left: inherit !important; 19 | } 20 | } 21 | 22 | .dropdown-language { 23 | .country-flag { 24 | height: 18px !important; 25 | width: 18px !important; 26 | } 27 | 28 | .dropdown-menu { 29 | left: auto !important; 30 | } 31 | } 32 | 33 | .dropdown-user { 34 | .dropdown-menu { 35 | left: auto !important; 36 | right: 0; 37 | } 38 | } 39 | 40 | // Global 41 | .dropdown-menu { 42 | .dropdown-item:focus { 43 | outline: 0; 44 | } 45 | } 46 | 47 | // Dropdown Icon 48 | .dropdown-icon-wrapper { 49 | .dropdown-toggle:after { 50 | display: none; 51 | } 52 | .dropdown-menu { 53 | min-width: auto; 54 | .dropdown-item { 55 | padding: 0.5rem 1.1rem; 56 | cursor: pointer; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/views/pages/cm/CmCard.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useState, useEffect } from "react"; 2 | // ** Reactstrap Imports 3 | import { Button, Form, Input, Row, Col, Card } from 'reactstrap'; 4 | 5 | // ** Custom Hooks 6 | import { useSkin } from '@hooks/useSkin'; 7 | 8 | // ** Illustrations Imports 9 | import illustrationsLight from '@src/assets/images/pages/coming-soon.svg'; 10 | import illustrationsDark from '@src/assets/images/pages/coming-soon-dark.svg'; 11 | import Breadcrumbs from "@components/breadcrumbs"; 12 | import CmSearch from "./CmSearch"; 13 | import { FaUserCheck, FaUser, FaUserClock, FaHospitalUser, FaPersonWalkingArrowLoopLeft, FaPersonWalking } from "react-icons/fa6"; 14 | import { Woman } from 'healthicons-react/dist/filled' 15 | 16 | // ** Styles 17 | import '@styles/base/pages/page-misc.scss'; 18 | import "@styles/react/libs/tables/react-dataTable-component.scss"; 19 | 20 | const CmCard = () => { 21 | // ** Hooks 22 | const { skin } = useSkin(); 23 | const source = skin === 'dark' ? illustrationsDark : illustrationsLight; 24 | 25 | return ( 26 | <> 27 | 28 | 29 | 30 | ) 31 | 32 | } 33 | 34 | export default CmCard; -------------------------------------------------------------------------------- /src/@core/scss/base/pages/page-misc.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: page-misc.scss 3 | // Description: Coming Soon pages custom scss 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | $misc-inner-max-width: 750px; 11 | 12 | .misc-wrapper { 13 | display: flex; 14 | flex-basis: 100%; 15 | min-height: 100vh; 16 | width: 100%; 17 | align-items: center; 18 | justify-content: center; 19 | 20 | .misc-inner { 21 | position: relative; 22 | max-width: $misc-inner-max-width; 23 | } 24 | 25 | .brand-logo { 26 | display: flex; 27 | justify-content: center; 28 | position: absolute; 29 | top: 2rem; 30 | left: 2rem; 31 | margin: 0; 32 | .brand-text { 33 | font-weight: 600; 34 | } 35 | } 36 | } 37 | 38 | @media (max-height: 625px) { 39 | .misc-wrapper { 40 | .misc-inner { 41 | margin-top: 4rem; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/@core/components/scrolltop/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { useEffect, useState } from "react"; 3 | 4 | // ** Third Party Components 5 | import Proptypes from "prop-types"; 6 | 7 | const ScrollTop = (props) => { 8 | // ** Props 9 | const { showOffset, scrollBehaviour, children, ...rest } = props; 10 | 11 | // ** State 12 | const [visible, setVisible] = useState(false); 13 | 14 | useEffect(() => { 15 | if (window) { 16 | window.addEventListener("scroll", () => { 17 | if (window.pageYOffset >= showOffset) { 18 | setVisible(true); 19 | } else { 20 | setVisible(false); 21 | } 22 | }); 23 | } 24 | }, []); 25 | 26 | const handleScrollToTop = () => { 27 | window.scroll({ top: 0, behavior: scrollBehaviour }); 28 | }; 29 | 30 | return ( 31 | visible && ( 32 |
    33 | {children} 34 |
    35 | ) 36 | ); 37 | }; 38 | 39 | export default ScrollTop; 40 | 41 | // ** PropTypes 42 | ScrollTop.propTypes = { 43 | showOffset: Proptypes.number, 44 | children: Proptypes.any.isRequired, 45 | scrollBehaviour: Proptypes.oneOf(["smooth", "instant", "auto"]), 46 | }; 47 | 48 | ScrollTop.defaultProps = { 49 | scrollBehaviour: "smooth", 50 | }; 51 | -------------------------------------------------------------------------------- /src/@core/scss/base/plugins/extensions/ext-component-drag-drop.scss: -------------------------------------------------------------------------------- 1 | @import '../../bootstrap-extended/include'; // Bootstrap includes 2 | @import '../../components/include'; // Components includes 3 | 4 | // draggable cursor - grab 5 | .draggable { 6 | cursor: grab; 7 | .gu-unselectable & { 8 | cursor: grabbing; 9 | } 10 | } 11 | 12 | // For Multi List 13 | #multiple-list-group-a, 14 | #multiple-list-group-b { 15 | min-height: 5.714rem; 16 | } 17 | 18 | // For Handle 19 | #dd-with-handle { 20 | .list-group { 21 | min-height: 5.714rem; 22 | .handle { 23 | padding: 0 5px; 24 | margin-right: 5px; 25 | background-color: rgba($black, 0.1); 26 | cursor: move; 27 | font-size: 1.2rem; 28 | } 29 | } 30 | } 31 | .gu-mirror { 32 | .card { 33 | margin: 0 1rem; 34 | } 35 | .handle { 36 | padding: 0 5px; 37 | margin-right: 5px; 38 | background-color: rgba($black, 0.1); 39 | cursor: move; 40 | font-size: 1.2rem; 41 | } 42 | } 43 | 44 | // Dak Layout 45 | .dark-layout { 46 | // Drag & drop moving element 47 | .gu-mirror { 48 | color: $theme-dark-body-color; 49 | &:not(.badge):not([class*='col-']) { 50 | background-color: $theme-dark-card-bg; 51 | border-color: $theme-dark-border-color; 52 | box-shadow: $theme-dark-box-shadow; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/views/pages/wound-notes/sections/WoundNotesImages.js: -------------------------------------------------------------------------------- 1 | 2 | // ** React Imports 3 | import React, { Fragment, useState, setState } from 'react' 4 | import toast from "react-hot-toast"; 5 | import useApi from "../../../../api/useApi"; 6 | import FileUploaderMultiple from '../../../../components/upload-files/FileUploaderMultiple'; 7 | 8 | // ** Third Party Imports 9 | import { 10 | Row, 11 | Col, 12 | Card, 13 | Button, 14 | CardBody, 15 | CardTitle, 16 | CardHeader, 17 | CardImg, 18 | CardFooter, 19 | CardText 20 | } from 'reactstrap' 21 | import { showAlertError, showDeleteDialog } from "../../../../components/alerts/AlertUtils"; 22 | 23 | import FileUploader from '../../../../components/upload-files/FileUploader'; 24 | 25 | const WoundNotesImages = ({ formData }) => { 26 | 27 | const accept = {"image/*": [".png", ".jpg", ".jpeg", ".gif"]} 28 | 29 | return ( 30 | <> 31 | 32 | 33 | WOUND NOTES IMAGES 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | export default WoundNotesImages; -------------------------------------------------------------------------------- /src/components/forms/SwitchControl.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useImperativeHandle, forwardRef } from "react"; 2 | import { useForm, Controller, useWatch } from "react-hook-form"; 3 | import { Check, X } from 'react-feather' 4 | 5 | import { 6 | Input, Label, Col 7 | } from 'reactstrap' 8 | 9 | const SwitchControl = ({ control, onValueChange, name, label, sm=5, justify=false }) => { 10 | 11 | return ( 12 | <> 13 | 14 | {label} 15 | 16 | 19 |
    20 | ( 25 |
    26 | 27 |
    28 | )} 29 | /> 30 |
    31 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default SwitchControl -------------------------------------------------------------------------------- /src/components/ui-loader/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Fragment } from 'react' 3 | 4 | // ** Third Party Components 5 | import Proptypes from 'prop-types' 6 | import classnames from 'classnames' 7 | 8 | // ** Reactstrap Imports 9 | import { Spinner } from 'reactstrap' 10 | 11 | // ** Styles 12 | import './ui-loader.scss' 13 | 14 | const UILoader = props => { 15 | const { children, blocking, loader, className, tag, overlayColor } = props 16 | 17 | const Tag = tag 18 | 19 | return ( 20 | 21 | {children} 22 | {blocking ? ( 23 | <> 24 |
    29 |
    {loader}
    30 | 31 | ) : null} 32 |     33 | ) 34 | } 35 | 36 | export default UILoader 37 | 38 | UILoader.defaultProps = { 39 | tag: 'div', 40 | blocking: false, 41 | loader: 42 | } 43 | 44 | UILoader.propTypes = { 45 | tag: Proptypes.string, 46 | loader: Proptypes.any, 47 | className: Proptypes.string, 48 | overlayColor: Proptypes.string, 49 | blocking: Proptypes.bool.isRequired 50 | } 51 | -------------------------------------------------------------------------------- /src/views/pages/patients/view-tabs/PatientAssessments.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { useEffect, useState } from "react"; 3 | import { 4 | CardText, 5 | Card, 6 | } from "reactstrap"; 7 | import UILoader from "../../../../components/ui-loader"; 8 | import LoadingSpinner from "../../../../components/spinner/LoadingSpinner"; 9 | import SocCard from "./Cards/SocCard"; 10 | import LeaCard from "../../lea/LeaCard"; 11 | import AbiCard from "../../abi/AbiCard"; 12 | import BradenScaleCard from "../../braden_scale/BradenScaleCard"; 13 | import MnaCard from "../../mna/MnaCard"; 14 | 15 | const PatientAssessments = ({ patientId }) => { 16 | const [loading, setLoading] = useState(false); 17 | 18 | const Loader = () => { 19 | return ( 20 | <> 21 | 22 | Please Wait... 23 | 24 | ); 25 | }; 26 | 27 | return ( 28 | <> 29 | }> 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | 45 | export default PatientAssessments; -------------------------------------------------------------------------------- /src/views/pages/ComingSoon.js: -------------------------------------------------------------------------------- 1 | // ** Reactstrap Imports 2 | import { Button, Form, Input, Row, Col } from 'reactstrap'; 3 | 4 | // ** Custom Hooks 5 | import { useSkin } from '@hooks/useSkin'; 6 | 7 | // ** Illustrations Imports 8 | import illustrationsLight from '@src/assets/images/pages/coming-soon.svg'; 9 | import illustrationsDark from '@src/assets/images/pages/coming-soon-dark.svg'; 10 | 11 | // ** Styles 12 | import '@styles/base/pages/page-misc.scss'; 13 | 14 | const ComingSoonPage = () => { 15 | // ** Hooks 16 | const { skin } = useSkin(); 17 | 18 | const source = skin === 'dark' ? illustrationsDark : illustrationsLight; 19 | 20 | return ( 21 |
    22 | 23 | 24 | {/* SVG content for your logo */} 25 | 26 |

    Vuexy

    27 |     28 |
    29 |
    30 |

    Coming Soon 🚧

    31 |

    We're working hard to bring you something awesome. Stay tuned!

    32 | Coming soon page 33 |
    34 |
    35 |
    36 | ); 37 | }; 38 | 39 | export default ComingSoonPage; 40 | -------------------------------------------------------------------------------- /src/router/routes/Patients.js: -------------------------------------------------------------------------------- 1 | import { lazy } from 'react' 2 | 3 | const PatientsSearch = lazy(() => import('../../views/pages/patients/PatientsSearch')) 4 | const PatientAddWizard = lazy(() => import('../../views/pages/patients/PatientAddWizard')) 5 | const PatientAdd = lazy(() => import('../../views/pages/patients/PatientAdd')) 6 | const PatientView = lazy(() => import('../../views/pages/patients/PatientView')) 7 | const WoundNoteView = lazy(() => import('../../views/pages/wound-notes/WoundNoteView')) 8 | const SOCView = lazy(() => import('../../views/pages/socs/SOCView')) 9 | 10 | const PatientRoutes = [ 11 | { 12 | path: '/patients', 13 | element: , 14 | }, 15 | { 16 | path: '/new-patient', 17 | element: , 18 | }, 19 | { 20 | path: '/patients/add/:id', 21 | element: , 22 | }, 23 | { 24 | path: '/patients/:id', 25 | element: , 26 | }, 27 | { 28 | path: '/patients/:id/wound-notes/:woundNoteId/view', 29 | element: , 30 | }, 31 | { 32 | path: '/patients/:id/wound-notes', 33 | element: , 34 | }, 35 | { 36 | path: '/patients/:id/wound-notes/:woundNoteId', 37 | element: , 38 | }, 39 | { 40 | path: '/patients/:id/socs/:socId', 41 | element: , 42 | }, 43 | ] 44 | 45 | export default PatientRoutes 46 | -------------------------------------------------------------------------------- /src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuItems.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { AbilityContext } from "@src/utility/context/Can"; 3 | 4 | // ** Vertical Menu Components 5 | import VerticalNavMenuLink from "./VerticalNavMenuLink"; 6 | import VerticalNavMenuGroup from "./VerticalNavMenuGroup"; 7 | import VerticalNavMenuSectionHeader from "./VerticalNavMenuSectionHeader"; 8 | 9 | // ** Utils 10 | import { resolveVerticalNavMenuItemComponent as resolveNavItemComponent, canViewMenuGroup } from "@layouts/utils"; 11 | 12 | const VerticalMenuNavItems = (props) => { 13 | 14 | // const ability = useContext(AbilityContext); 15 | // console.log(ability); 16 | // ** Components Object 17 | const Components = { 18 | VerticalNavMenuLink, 19 | VerticalNavMenuGroup, 20 | VerticalNavMenuSectionHeader, 21 | }; 22 | 23 | // ** Render Nav Menu Items 24 | const RenderNavItems = props.items.map((item, index) => { 25 | const TagName = Components[resolveNavItemComponent(item)]; 26 | if (item.children) { 27 | return ( 28 | canViewMenuGroup(item) && ( 29 | 30 | ) 31 | ); 32 | } 33 | return ; 34 | }); 35 | 36 | return RenderNavItems; 37 | }; 38 | 39 | export default VerticalMenuNavItems; 40 | -------------------------------------------------------------------------------- /src/@core/scss/base/components/custom-options.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================================= 2 | // File Name: custom-options.scss 3 | // Description: custom checkbox and radion button style. 4 | // ---------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ========================================================================================== 9 | 10 | // Component: custom options 11 | // ======================================================================== 12 | 13 | .custom-options-checkable { 14 | .custom-option-item { 15 | width: 100%; 16 | cursor: pointer; 17 | border-radius: 0.42rem; 18 | color: $secondary; 19 | background-color: $custom-options-bg-color; 20 | border: 1px solid $border-color; 21 | .custom-option-item-title { 22 | color: $secondary; 23 | } 24 | } 25 | } 26 | 27 | .custom-option-item-check { 28 | position: absolute; 29 | clip: rect(0, 0, 0, 0); 30 | 31 | &:checked { 32 | + .custom-option-item { 33 | color: $primary; 34 | background-color: rgba($primary, 0.12); 35 | border-color: $primary; 36 | .custom-option-item-title { 37 | color: $primary; 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/utility/hooks/useLayout.js: -------------------------------------------------------------------------------- 1 | //** React Imports 2 | import { useEffect } from "react"; 3 | 4 | // ** Store Imports 5 | import { useDispatch, useSelector } from "react-redux"; 6 | import { handleLayout, handleLastLayout } from "@store/layout"; 7 | 8 | export const useLayout = () => { 9 | // ** Hooks 10 | const dispatch = useDispatch(); 11 | const store = useSelector((state) => state.layout); 12 | 13 | const setLayout = (value) => { 14 | dispatch(handleLayout(value)); 15 | }; 16 | 17 | const setLastLayout = (value) => { 18 | dispatch(handleLastLayout(value)); 19 | }; 20 | 21 | if (window) { 22 | const breakpoint = 1200; 23 | 24 | useEffect(() => { 25 | if (window.innerWidth < breakpoint) { 26 | setLayout("vertical"); 27 | } 28 | 29 | window.addEventListener("resize", () => { 30 | if ( 31 | window.innerWidth <= breakpoint && 32 | store.lastLayout !== "vertical" && 33 | store.layout !== "vertical" 34 | ) { 35 | setLayout("vertical"); 36 | } 37 | if ( 38 | window.innerWidth >= breakpoint && 39 | store.lastLayout !== store.layout 40 | ) { 41 | setLayout(store.lastLayout); 42 | } 43 | }); 44 | }, [store.layout]); 45 | } 46 | 47 | return { 48 | layout: store.layout, 49 | setLayout, 50 | lastLayout: store.lastLayout, 51 | setLastLayout, 52 | }; 53 | }; 54 | -------------------------------------------------------------------------------- /src/@core/components/routes/PrivateRoute.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Navigate } from "react-router-dom"; 3 | import { useContext, Suspense } from "react"; 4 | 5 | // ** Context Imports 6 | import { AbilityContext } from "@src/utility/context/Can"; 7 | 8 | // ** Spinner Import 9 | import Spinner from "../spinner/Loading-spinner"; 10 | 11 | const PrivateRoute = ({ children, route }) => { 12 | // ** Hooks & Vars 13 | const ability = useContext(AbilityContext); 14 | const user = JSON.parse(localStorage.getItem("userData")); 15 | 16 | if (route) { 17 | let action = null; 18 | let resource = null; 19 | let restrictedRoute = false; 20 | 21 | if (route.meta) { 22 | action = route.meta.action; 23 | resource = route.meta.resource; 24 | restrictedRoute = route.meta.restricted; 25 | } 26 | if (!user) { 27 | return ; 28 | } 29 | if (user && restrictedRoute) { 30 | return ; 31 | } 32 | if (user && restrictedRoute && user.role === "client") { 33 | return ; 34 | } 35 | // if (user && !ability.can(action || "read", resource)) { 36 | // return ; 37 | // } 38 | 39 | } 40 | 41 | return ( 42 | }> 43 | {children} 44 | 45 | ); 46 | }; 47 | 48 | export default PrivateRoute; 49 | -------------------------------------------------------------------------------- /src/router/routes/Admin.js: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | 3 | const ProductSearch = lazy(() => 4 | import("../../views/pages/products/ProductSearch") 5 | ); 6 | const MedicinesSearch = lazy(() => 7 | import("../../views/pages/medicines/MedicinesSearch") 8 | ); 9 | const DiagnosisSearch = lazy(() => 10 | import("../../views/pages/diagnosis/DiagnosisSearch") 11 | ); 12 | const LocationsSearch = lazy(() => 13 | import("../../views/pages/locations/LocationsSearch") 14 | ); 15 | const LookupsSearch = lazy(() => 16 | import("../../views/pages/lookups/LookupsSearch") 17 | ); 18 | const ClinicsSearch = lazy(() => 19 | import("../../views/pages/clinics/ClinicsSearch") 20 | ); 21 | 22 | const UsersSearch = lazy(() => 23 | import("../../views/pages/users/UsersSearch") 24 | ); 25 | 26 | const AdminRoutes = [ 27 | { 28 | path: "/products", 29 | element: , 30 | }, 31 | 32 | { 33 | path: "/diagnoses", 34 | element: , 35 | }, 36 | 37 | { 38 | path: "/locations", 39 | element: , 40 | }, 41 | 42 | { 43 | path: "/medicines", 44 | element: , 45 | }, 46 | 47 | { 48 | path: "/lookups", 49 | element: , 50 | }, 51 | 52 | { 53 | path: "/clinics", 54 | element: , 55 | }, 56 | { 57 | path: "/users", 58 | element: , 59 | }, 60 | ]; 61 | 62 | export default AdminRoutes; 63 | -------------------------------------------------------------------------------- /src/@core/components/ui-loader/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Fragment } from "react"; 3 | 4 | // ** Third Party Components 5 | import Proptypes from "prop-types"; 6 | import classnames from "classnames"; 7 | 8 | // ** Reactstrap Imports 9 | import { Spinner } from "reactstrap"; 10 | 11 | // ** Styles 12 | import "./ui-loader.scss"; 13 | 14 | const UILoader = (props) => { 15 | const { children, blocking, loader, className, tag, overlayColor } = props; 16 | 17 | const Tag = tag; 18 | 19 | return ( 20 | 26 | {children} 27 | {blocking ? ( 28 | 29 |
    36 |
    {loader}
    37 |     38 | ) : null} 39 |     40 | ); 41 | }; 42 | 43 | export default UILoader; 44 | 45 | UILoader.defaultProps = { 46 | tag: "div", 47 | blocking: false, 48 | loader: , 49 | }; 50 | 51 | UILoader.propTypes = { 52 | tag: Proptypes.string, 53 | loader: Proptypes.any, 54 | className: Proptypes.string, 55 | overlayColor: Proptypes.string, 56 | blocking: Proptypes.bool.isRequired, 57 | }; 58 | -------------------------------------------------------------------------------- /src/components/forms/DropDownLookup.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | // ** Third Party Components 3 | import { Input } from "reactstrap"; 4 | 5 | const DropDownLookup = (value, data, onValueChange) => { 6 | const [options, setOptions] = useState(data); 7 | const [id, setId] = useState(value); 8 | 9 | console.log('data', data) 10 | 11 | 12 | const handleOnChange = (val) => { 13 | onValueChange(val); 14 | setId(val); 15 | }; 16 | 17 | React.useEffect(() => { 18 | var items = [ 19 | { 20 | label: "", 21 | value: "", 22 | }, 23 | ]; 24 | 25 | 26 | try{ 27 | if (data) { 28 | data.map((r) => { 29 | const option = { 30 | text: r.description ?? r.name, 31 | value: r.id, 32 | selected: r.id === value, 33 | }; 34 | items.push(option); 35 | 36 | return option; 37 | }); 38 | setOptions(items); 39 | } 40 | } 41 | catch(e){} 42 | 43 | 44 | //onValueChange(value); 45 | }, [options]); 46 | 47 | return ( 48 | <> 49 | handleOnChange(e.target.value)} 53 | > 54 | { options.map && options.map((item, index) => ( 55 | 58 | ))} 59 | 60 | 61 | ); 62 | }; 63 | 64 | export default DropDownLookup; 65 | -------------------------------------------------------------------------------- /src/@core/scss/react/apps/app-calendar.scss: -------------------------------------------------------------------------------- 1 | // App Calendar 2 | // ======================================================================== 3 | @import '../../base/pages/app-calendar.scss'; 4 | 5 | .event-sidebar { 6 | .badge:empty { 7 | display: inline-block; 8 | } 9 | .react-select { 10 | z-index: 2; 11 | } 12 | } 13 | 14 | html[dir='rtl'] { 15 | .fc { 16 | // &.fc-direction-rtl { 17 | // direction: rtl; 18 | // text-align: right; 19 | // } 20 | .fc-header-toolbar { 21 | .fc-prev-button, 22 | .fc-next-button { 23 | transform: translate3d(0px, 2px, 0px) rotate(180deg) !important; 24 | } 25 | } 26 | .fc-toolbar .fc-button-group { 27 | .fc-dayGridMonth-button:first-child { 28 | border-top-left-radius: $border-radius !important; 29 | border-bottom-left-radius: $border-radius !important; 30 | border-top-right-radius: 0 !important; 31 | border-bottom-right-radius: 0 !important; 32 | } 33 | .fc-listMonth-button:last-child { 34 | border-top-right-radius: $border-radius !important; 35 | border-bottom-right-radius: $border-radius !important; 36 | border-top-left-radius: 0 !important; 37 | border-bottom-left-radius: 0 !important; 38 | } 39 | } 40 | .fc-daygrid-event-harness-abs { 41 | right: auto !important; 42 | left: auto !important; 43 | } 44 | 45 | .fc-popover { 46 | margin-right: 6.2rem; 47 | } 48 | .fc-daygrid-day-bottom { 49 | text-align: right; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_accordion.scss: -------------------------------------------------------------------------------- 1 | // Basic accordion 2 | .accordion { 3 | [data-bs-toggle='collapse'] { 4 | font-weight: 500; 5 | font-size: 1.1rem; 6 | line-height: $line-height-base; 7 | } 8 | .accordion-item { 9 | margin-bottom: 0; 10 | &:last-of-type { 11 | margin-bottom: 0; 12 | } 13 | &:not(:last-of-type) { 14 | border-bottom: 1px solid $border-color; 15 | } 16 | } 17 | .accordion-body { 18 | padding-top: 0.42rem; 19 | } 20 | } 21 | 22 | // accordion without icon 23 | .accordion { 24 | &.accordion-without-arrow { 25 | .accordion-button::after { 26 | background-image: none !important; 27 | } 28 | } 29 | } 30 | 31 | // For Accordion with border 32 | .accordion-border { 33 | .accordion-item { 34 | border: 1px solid $border-color; 35 | border-radius: $card-border-radius; 36 | &:not(:last-of-type) { 37 | border-bottom: 0; 38 | border-bottom-right-radius: 0; 39 | border-bottom-left-radius: 0; 40 | } 41 | &:not(:first-of-type) { 42 | border-top-left-radius: 0; 43 | border-top-right-radius: 0; 44 | } 45 | } 46 | } 47 | 48 | // For Accordion with margin 49 | .accordion-margin { 50 | .accordion-item { 51 | margin-top: 0.71rem; 52 | margin-bottom: 0.71rem; 53 | box-shadow: 0 2px 15px 0 rgba($black, 0.05) !important; 54 | border-radius: $border-radius; 55 | border-bottom: 0 solid transparent !important; 56 | } 57 | } 58 | 59 | .card.accordion-item { 60 | .accordion-button { 61 | border-radius: $border-radius; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_forms.scss: -------------------------------------------------------------------------------- 1 | // placeholder specific scss 2 | @import 'forms/labels'; 3 | @import 'forms/form-control'; 4 | @import 'forms/input-group'; 5 | @import 'forms/form-check'; 6 | @import 'forms/floating-labels'; 7 | 8 | // Custom third party form plugin scss 9 | 10 | /* Textarea with Counter */ 11 | .textarea-counter-value { 12 | background-color: $primary; 13 | color: $white; 14 | padding: 1px 6px; 15 | font-size: 0.6rem; 16 | border-radius: 0 0 5px 5px; 17 | margin-right: 1rem; 18 | } 19 | 20 | // Number Input style 21 | .btn.disabled-max-min, 22 | .btn.disabled-max-min:focus, 23 | .btn.disabled-max-min:active { 24 | background-color: rgba($black, 0.5) !important; 25 | cursor: default; 26 | } 27 | 28 | // disabled number input 29 | .bootstrap-touchspin, 30 | .bootstrap-touchspin { 31 | &.disabled-touchspin { 32 | .bootstrap-touchspin-down, 33 | .bootstrap-touchspin-up { 34 | border-color: transparent !important; 35 | } 36 | } 37 | } 38 | 39 | /* Number Type Input Box Scss for - Remove arrow on hover */ 40 | input[type='number']::-webkit-inner-spin-button, 41 | input[type='number']::-webkit-outer-spin-button { 42 | -webkit-appearance: none; 43 | } 44 | 45 | // Date & Time Picker - Form Control Bg color 46 | .picker__input { 47 | &.form-control { 48 | background-color: $white; 49 | } 50 | } 51 | 52 | // Autofill style 53 | input:-webkit-autofill, 54 | textarea:-webkit-autofill, 55 | select:-webkit-autofill { 56 | -webkit-box-shadow: 0 0 0 1000px $white inset !important; 57 | -webkit-text-fill-color: $body-color !important; 58 | } 59 | -------------------------------------------------------------------------------- /src/@core/layouts/components/navbar/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Fragment } from "react"; 3 | 4 | // ** Custom Components 5 | import NavbarUser from "./NavbarUser"; 6 | 7 | // ** Third Party Components 8 | import { Sun, Moon, Menu } from "react-feather"; 9 | 10 | // ** Reactstrap Imports 11 | import { NavItem, NavLink } from "reactstrap"; 12 | 13 | const ThemeNavbar = (props) => { 14 | // ** Props 15 | const { skin, setSkin, setMenuVisibility } = props; 16 | 17 | // ** Function to toggle Theme (Light/Dark) 18 | const ThemeToggler = () => { 19 | if (skin === "dark") { 20 | return setSkin("light")} />; 21 | } else { 22 | return setSkin("dark")} />; 23 | } 24 | }; 25 | 26 | return ( 27 | 28 |
    29 |
      30 | 31 | setMenuVisibility(true)} 34 | > 35 | 36 | 37 | 38 |
    39 | 40 | 41 | 42 | 43 | 44 |
    45 | 46 |     47 | ); 48 | }; 49 | 50 | export default ThemeNavbar; 51 | -------------------------------------------------------------------------------- /src/@core/scss/react/reactstrap/_input.scss: -------------------------------------------------------------------------------- 1 | // Component Input 2 | // ======================================================================== 3 | 4 | .form-control[readonly] { 5 | opacity: 0.5; 6 | } 7 | 8 | .is-invalid { 9 | border-color: $danger !important; 10 | } 11 | 12 | select.form-control[multiple] { 13 | background-image: none !important; 14 | } 15 | 16 | .input-group { 17 | .form-control.is-invalid ~ .input-group-append .input-group-text { 18 | border-color: $danger; 19 | } 20 | &.is-invalid { 21 | .form-control, 22 | .input-group-append .input-group-text, 23 | .input-group-prepend .input-group-text { 24 | border-color: $danger !important; 25 | } 26 | } 27 | 28 | & > .dropdown:nth-last-child(n + 3), 29 | & > .dropdown:first-child { 30 | .dropdown-toggle { 31 | border-top-right-radius: 0; 32 | border-bottom-right-radius: 0; 33 | } 34 | } 35 | 36 | & > .dropdown:not(:first-child) { 37 | .dropdown-toggle { 38 | border-top-left-radius: 0; 39 | border-bottom-left-radius: 0; 40 | } 41 | } 42 | } 43 | 44 | // ** Input type File style overriding 45 | /*! rtl:begin:ignore */ 46 | .form-control::-webkit-file-upload-button { 47 | margin-inline-end: 0.75rem !important; 48 | border-inline-end-width: 1px !important; 49 | } 50 | /*! rtl:end:ignore */ 51 | 52 | // ** Label styling of Checkbox, Radio and Switch 53 | .form-check-label.form-label { 54 | margin-bottom: 0; 55 | color: $body-color; 56 | font-size: $font-size-base; 57 | } 58 | .dark-layout { 59 | .form-check-label.form-label { 60 | color: $theme-dark-label-color; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/router/routes/Common.js: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | 3 | const Dashboard = lazy(() => import("../../views/pages/Dashboard")); 4 | 5 | const ComingSoonPage = lazy(() => import("../../views/pages/ComingSoon")); 6 | 7 | const StatsCard = lazy(() => import("../../views/pages/stats/StatsCard")); 8 | 9 | const CmCard = lazy(() => import("../../views/pages/cm/CmCard")); 10 | 11 | const Calendar = lazy(() => import("../../views/pages/calendar/index")); 12 | 13 | const Profile = lazy(() => import("../../views/pages/profile/index")); 14 | 15 | const DocumentList = lazy(() => import("../../views/pages/document/DocumentList")); 16 | 17 | const MessageSearch = lazy(() => import("../../views/pages/messages/MessagesSearch")); 18 | 19 | const AgreementCard = lazy(() => import("../../views/pages/patients/view-tabs/AgreementCard")) 20 | 21 | const CommonRoutes = [ 22 | { 23 | path: "/home", 24 | element: , 25 | }, 26 | { 27 | path: "/coming-soon", 28 | element: , 29 | }, 30 | { 31 | path: "/calendar", 32 | element: , 33 | }, 34 | { 35 | path: "/stats", 36 | element: , 37 | }, 38 | { 39 | path: "/cm", 40 | element: , 41 | }, 42 | { 43 | path: "/document-list", 44 | element: 45 | }, 46 | 47 | { 48 | path: "/agreement", 49 | element: 50 | }, 51 | 52 | { 53 | path: "/profile", 54 | element: 55 | }, 56 | 57 | { 58 | path: "/messages", 59 | element: 60 | } 61 | 62 | ]; 63 | 64 | export default CommonRoutes; 65 | -------------------------------------------------------------------------------- /src/@core/scss/base/plugins/ui/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // config 2 | $debug: false; 3 | 4 | // declare breakpoints 5 | $usn-x-small: 0px; 6 | $usn-small: 544px; 7 | $usn-medium: 768px; 8 | $usn-large: 992px; 9 | $usn-x-large: 1200px; 10 | 11 | // create sass list to pass media query data 12 | // if a breakpoint name changes, remember to 13 | // update it in the list below as well 14 | $mq-sync: xs $usn-x-small, sm $usn-small, md $usn-medium, lg $usn-large, xl $usn-x-large; 15 | 16 | // build each media query for js ingestion 17 | @each $mq in $mq-sync { 18 | @media screen and (min-width: nth($mq, 2)) { 19 | head { 20 | font-family: '#{nth($mq, 1)} #{nth($mq, 2)}'; 21 | } 22 | body:after { 23 | content: '#{nth($mq, 1)} - min-width: #{nth($mq, 2)}'; 24 | } 25 | } 26 | } 27 | 28 | head { 29 | // set clear on head to show Unison is set up correctly 30 | clear: both; 31 | // store hash of all breakpoints 32 | title { 33 | font-family: '#{$mq-sync}'; 34 | } 35 | } 36 | 37 | // debug styles to see breakpoint info 38 | body:after { 39 | display: none; 40 | } 41 | 42 | @if $debug == true { 43 | body:after { 44 | display: block; 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | background-color: #000; 50 | background-color: rgba($black, 0.8); 51 | text-align: center; 52 | color: #fff; 53 | padding: 10px; 54 | z-index: 1000; 55 | font-size: 12px; 56 | font-family: sans-serif; 57 | } 58 | } 59 | 60 | // hide elements for conditional loading 61 | // only used for responsive comments plugin 62 | *[data-usn-if] { 63 | display: none; 64 | } 65 | -------------------------------------------------------------------------------- /src/@core/scss/base/plugins/ui/coming-soon.scss: -------------------------------------------------------------------------------- 1 | // config 2 | $debug: false; 3 | 4 | // declare breakpoints 5 | $usn-x-small: 0px; 6 | $usn-small: 544px; 7 | $usn-medium: 768px; 8 | $usn-large: 992px; 9 | $usn-x-large: 1200px; 10 | 11 | // create sass list to pass media query data 12 | // if a breakpoint name changes, remember to 13 | // update it in the list below as well 14 | $mq-sync: xs $usn-x-small, sm $usn-small, md $usn-medium, lg $usn-large, xl $usn-x-large; 15 | 16 | // build each media query for js ingestion 17 | @each $mq in $mq-sync { 18 | @media screen and (min-width: nth($mq, 2)) { 19 | head { 20 | font-family: '#{nth($mq, 1)} #{nth($mq, 2)}'; 21 | } 22 | body:after { 23 | content: '#{nth($mq, 1)} - min-width: #{nth($mq, 2)}'; 24 | } 25 | } 26 | } 27 | 28 | head { 29 | // set clear on head to show Unison is set up correctly 30 | clear: both; 31 | // store hash of all breakpoints 32 | title { 33 | font-family: '#{$mq-sync}'; 34 | } 35 | } 36 | 37 | // debug styles to see breakpoint info 38 | body:after { 39 | display: none; 40 | } 41 | 42 | @if $debug == true { 43 | body:after { 44 | display: block; 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | background-color: #000; 50 | background-color: rgba($black, 0.8); 51 | text-align: center; 52 | color: #fff; 53 | padding: 10px; 54 | z-index: 1000; 55 | font-size: 12px; 56 | font-family: sans-serif; 57 | } 58 | } 59 | 60 | // hide elements for conditional loading 61 | // only used for responsive comments plugin 62 | *[data-usn-if] { 63 | display: none; 64 | } 65 | -------------------------------------------------------------------------------- /src/views/pages/profile/Tabs.js: -------------------------------------------------------------------------------- 1 | // ** Reactstrap Imports 2 | import { Nav, NavItem, NavLink } from 'reactstrap' 3 | 4 | // ** Icons Imports 5 | import { User, Lock, Bookmark, Link, Bell } from 'react-feather' 6 | 7 | const Tabs = ({ activeTab, toggleTab }) => { 8 | return ( 9 | 41 | ) 42 | } 43 | 44 | export default Tabs 45 | -------------------------------------------------------------------------------- /src/redux/authentication.js: -------------------------------------------------------------------------------- 1 | // ** Redux Imports 2 | import { createSlice } from '@reduxjs/toolkit' 3 | 4 | // ** UseJWT import to get config 5 | import useApi from "../api/useApi"; 6 | 7 | const config = useApi.jwtConfig 8 | 9 | const initialUser = () => { 10 | const item = window.localStorage.getItem('userData') 11 | //** Parse stored json or if none return initialValue 12 | return item ? JSON.parse(item) : {} 13 | } 14 | 15 | export const authSlice = createSlice({ 16 | name: 'authentication', 17 | initialState: { 18 | userData: initialUser() 19 | }, 20 | reducers: { 21 | handleLogin: (state, action) => { 22 | state.userData = action.payload 23 | state[config.storageTokenKeyName] = config.storageTokenKeyName 24 | state[config.storageRefreshTokenKeyName] = config.storageRefreshTokenKeyName 25 | localStorage.setItem('userData', JSON.stringify(action.payload)) 26 | localStorage.setItem(config.storageTokenKeyName, action.payload.accessToken) 27 | localStorage.setItem(config.storageRefreshTokenKeyName, action.payload.refreshToken) 28 | }, 29 | handleLogout: state => { 30 | state.userData = {} 31 | state[config.storageTokenKeyName] = null 32 | state[config.storageRefreshTokenKeyName] = null 33 | // ** Remove user, accessToken & refreshToken from localStorage 34 | localStorage.removeItem('userData') 35 | localStorage.removeItem(config.storageTokenKeyName) 36 | localStorage.removeItem(config.storageRefreshTokenKeyName) 37 | } 38 | } 39 | }) 40 | 41 | export const { handleLogin, handleLogout } = authSlice.actions 42 | 43 | export default authSlice.reducer 44 | -------------------------------------------------------------------------------- /src/@core/components/card-snippet/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Fragment, useState } from "react"; 3 | 4 | // ** Third Party Components 5 | import PropTypes from "prop-types"; 6 | import { Code } from "react-feather"; 7 | 8 | // ** Reactstrap Imports 9 | import { Card, CardHeader, CardBody, CardTitle, Collapse } from "reactstrap"; 10 | 11 | const CardSnippet = (props) => { 12 | // ** Props 13 | const { title, children, noBody, code, iconCode } = props; 14 | 15 | // ** State 16 | const [isOpen, setIsOpen] = useState(false); 17 | 18 | // ** If user passes custom icon then render that else render default icon 19 | const IconCode = iconCode ? iconCode : ; 20 | 21 | // ** To toggle collapse 22 | const toggle = () => setIsOpen(!isOpen); 23 | 24 | // ** If user passes noBody then return else return 25 | const Wrapper = noBody ? Fragment : CardBody; 26 | 27 | return ( 28 | 29 | 30 | {title} 31 |
    32 | {IconCode} 33 |
    34 |     35 | {children} 36 | 37 | {code} 38 | 39 |     40 | ); 41 | }; 42 | 43 | export default CardSnippet; 44 | 45 | // ** PropTypes 46 | CardSnippet.propTypes = { 47 | code: PropTypes.node, 48 | noBody: PropTypes.bool, 49 | children: PropTypes.any, 50 | iconCode: PropTypes.node, 51 | className: PropTypes.string, 52 | title: PropTypes.string.isRequired, 53 | }; 54 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_buttons.scss: -------------------------------------------------------------------------------- 1 | // var for box shadow of gradient buttons 2 | // Buttons 3 | .btn { 4 | box-shadow: none; 5 | font-weight: 500; 6 | 7 | // gradient button on hover transition 8 | &[class*='bg-gradient-'] { 9 | transition: all 0.2s ease; 10 | &:hover { 11 | transform: translateY(-2px); 12 | } 13 | } 14 | 15 | // Icon button padding 16 | &.btn-icon { 17 | padding: 0.715rem 0.736rem; 18 | } 19 | &.btn-sm { 20 | &.btn-icon { 21 | padding: 0.5rem; 22 | line-height: 0.5; 23 | } 24 | } 25 | &.btn-lg { 26 | &.btn-icon { 27 | padding: 1rem; 28 | line-height: 0.75; 29 | } 30 | } 31 | 32 | &:focus, 33 | &.focus, 34 | &:active, 35 | &.active { 36 | outline: none; 37 | box-shadow: none; 38 | } 39 | 40 | &:not(:disabled):not(.disabled):active:focus, 41 | &:not(:disabled):not(.disabled).active:focus { 42 | box-shadow: none !important; 43 | } 44 | 45 | // feather icons inside btn 46 | .feather { 47 | vertical-align: bottom; 48 | } 49 | } 50 | .btn-check { 51 | &:checked, 52 | &:active { 53 | + [class*='btn-'] { 54 | outline: none; 55 | box-shadow: none; 56 | } 57 | } 58 | } 59 | // For Waves Input Padding 60 | .btn.waves-input-wrapper { 61 | padding: 0; 62 | } 63 | 64 | .btn-pinned { 65 | position: absolute; 66 | top: 1.2rem; 67 | right: 0.7rem; 68 | } 69 | 70 | @include media-breakpoint-down(md) { 71 | .btn-sm-block { 72 | display: block; 73 | width: 100%; 74 | } 75 | } 76 | 77 | // Remove cursor-pointer from button if button is disabled 78 | // * setting it to inherit will auto adept cursor 79 | .waves-effect { 80 | cursor: inherit; 81 | } 82 | -------------------------------------------------------------------------------- /src/@core/scss/react/libs/swiper/swiper.scss: -------------------------------------------------------------------------------- 1 | @import '~swiper/swiper-bundle.css'; 2 | @import '../../../base/plugins/extensions/ext-component-swiper.scss'; 3 | 4 | /* cube effect */ 5 | .swiper-cube { 6 | width: 300px; 7 | left: 50%; 8 | margin-left: -150px; 9 | margin-top: -12px; 10 | } 11 | 12 | /* swiper coverflow */ 13 | .swiper-coverflow { 14 | .swiper-slide { 15 | width: 300px; 16 | } 17 | } 18 | 19 | /* swiper virtual */ 20 | .swiper-virtual { 21 | height: 300px; 22 | 23 | .swiper-slide { 24 | font-size: $h3-font-size; 25 | background-color: $body-bg; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | } 30 | } 31 | 32 | .dark-layout { 33 | .swiper-virtual { 34 | .swiper-slide { 35 | background-color: $theme-dark-body-bg; 36 | } 37 | } 38 | } 39 | 40 | html[dir='rtl'] { 41 | .swiper { 42 | .swiper-button-next, 43 | .swiper-button-prev { 44 | transform: rotate(180deg); 45 | &:after { 46 | content: ''; 47 | } 48 | } 49 | .swiper-button-next { 50 | left: 10px !important; 51 | right: auto !important; 52 | } 53 | .swiper-button-prev { 54 | left: auto !important; 55 | right: 10px !important; 56 | } 57 | 58 | .swiper-pagination-progressbar { 59 | transform: translate3d(0, 0, 0) rotate(180deg); 60 | } 61 | 62 | &.swiper-cube .swiper-slide { 63 | transform-origin: 100% 100% !important; 64 | } 65 | } 66 | } 67 | 68 | // html[dir='rtl'] { 69 | // .swiper-container-cube .swiper-slide { 70 | 71 | // } 72 | // .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { 73 | // transform-origin: left top; 74 | // } 75 | // } 76 | -------------------------------------------------------------------------------- /src/views/Home.js: -------------------------------------------------------------------------------- 1 | import { 2 | Card, 3 | CardHeader, 4 | CardBody, 5 | CardTitle, 6 | CardText, 7 | CardLink, 8 | } from "reactstrap"; 9 | 10 | const Home = () => { 11 | return ( 12 |
    13 | 14 | 15 | Kick start your project 🚀 16 | 17 | 18 | All the best for your new project. 19 | 20 | Please make sure to read our 21 | 25 | Template Documentation 26 | 27 | to understand where to go from here and how to use our template. 28 | 29 | 30 | 31 | 32 | 33 | 34 | Want to integrate JWT? 🔒 35 | 36 | 37 | 38 | We carefully crafted JWT flow so you can implement JWT with ease and 39 | with minimum efforts. 40 | 41 | 42 | Please read our 43 | 47 | JWT Documentation 48 | 49 | to get more out of JWT authentication. 50 | 51 | 52 | 53 |
    54 | ); 55 | }; 56 | 57 | export default Home; 58 | -------------------------------------------------------------------------------- /src/router/Router.js: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | 3 | // ** Router imports 4 | import { useRoutes, Navigate } from "react-router-dom"; 5 | 6 | // ** Layouts 7 | import BlankLayout from "@layouts/BlankLayout"; 8 | 9 | // ** GetRoutes 10 | import { getRoutes } from "./routes"; 11 | 12 | // ** Hooks Imports 13 | import { useLayout } from "@hooks/useLayout"; 14 | 15 | // ** Utils 16 | import { getUserData, getHomeRouteForLoggedInUser } from '../utility/Utils' 17 | 18 | const Login = lazy(() => import("../views/Login")); 19 | const NotAuthorized = lazy(() => import("../views/pages/misc/NotAuthorized")); 20 | const Error = lazy(() => import("../views/pages/misc/Error")); 21 | 22 | 23 | const Router = () => { 24 | // ** Hooks 25 | const { layout } = useLayout(); 26 | 27 | const allRoutes = getRoutes(layout); 28 | const getHomeRoute = () => { 29 | const user = getUserData() 30 | if (user) { 31 | return getHomeRouteForLoggedInUser(user.role) 32 | } else { 33 | return '/login' 34 | } 35 | } 36 | 37 | const routes = useRoutes([ 38 | { 39 | path: "/", 40 | index: true, 41 | element: 42 | }, 43 | { 44 | path: "/login", 45 | element: , 46 | children: [{ path: "/login", element: }], 47 | }, 48 | { 49 | path: "/misc/not-authorized", 50 | element: , 51 | children: [{ path: "/misc/not-authorized", element: }], 52 | }, 53 | { 54 | path: "*", 55 | element: , 56 | children: [{ path: "*", element: }], 57 | }, 58 | ...allRoutes, 59 | ]); 60 | 61 | return routes; 62 | }; 63 | 64 | export default Router; 65 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_badge.scss: -------------------------------------------------------------------------------- 1 | // Badge 2 | 3 | .badge { 4 | &[class*='bg-'] { 5 | [class*='icon-'] { 6 | line-height: 1; 7 | } 8 | 9 | a { 10 | color: $white; 11 | } 12 | 13 | // badge dropdown alignment 14 | .dropdown-toggle, 15 | &.dropdown-toggle { 16 | span, 17 | i, 18 | svg { 19 | vertical-align: text-top; 20 | } 21 | i, 22 | svg { 23 | padding-left: 0.2rem; 24 | } 25 | &::after { 26 | position: relative; 27 | top: 0; 28 | left: 0; 29 | font-size: 1rem; 30 | } 31 | } 32 | .dropdown-menu { 33 | a { 34 | color: $dropdown-color; 35 | } 36 | } 37 | } 38 | 39 | i, 40 | svg { 41 | height: 12px; 42 | width: 11px; 43 | font-size: 12px; 44 | stroke-width: 3; 45 | vertical-align: top; 46 | } 47 | 48 | // square badge 49 | &.badge-square { 50 | border-radius: 0; 51 | } 52 | 53 | // badge-up 54 | // to align badge over any element 55 | &.badge-up { 56 | position: absolute; 57 | top: -11px; 58 | right: -9px; 59 | min-width: 1.429rem; 60 | min-height: 1.429rem; 61 | display: flex; 62 | align-items: center; 63 | justify-content: center; 64 | font-size: 0.786rem; 65 | line-height: 0.786; 66 | padding-left: 0.25rem; 67 | padding-right: 0.25rem; 68 | &.badge-sm { 69 | top: -0.5rem; 70 | right: -0.5rem; 71 | } 72 | } 73 | } 74 | 75 | // For fullscreen search 76 | .badge-icon { 77 | i, 78 | svg { 79 | font-size: 100%; 80 | margin-right: 5px; 81 | } 82 | } 83 | 84 | // badge dropup pointer 85 | .dropup { 86 | .badge { 87 | cursor: pointer; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/@core/components/widgets/stats/StatsWithLineChart.js: -------------------------------------------------------------------------------- 1 | // ** Custom Components 2 | import Avatar from "@components/avatar"; 3 | 4 | // ** Third Party Components 5 | import PropTypes from "prop-types"; 6 | import Chart from "react-apexcharts"; 7 | 8 | // ** Reactstrap Imports 9 | import { Card, CardHeader, CardText } from "reactstrap"; 10 | 11 | // ** Default Options 12 | import { lineChartOptions } from "./ChartOptions"; 13 | 14 | const StatsWithLineChart = ({ 15 | icon, 16 | color, 17 | stats, 18 | statTitle, 19 | series, 20 | options, 21 | type, 22 | height, 23 | ...rest 24 | }) => { 25 | return ( 26 | 27 | 28 |
    29 |

    {stats}

    30 | {statTitle} 31 |
    32 | 37 |     38 | 44 |     45 | ); 46 | }; 47 | 48 | export default StatsWithLineChart; 49 | 50 | // ** PropTypes 51 | StatsWithLineChart.propTypes = { 52 | type: PropTypes.string, 53 | height: PropTypes.string, 54 | options: PropTypes.object, 55 | icon: PropTypes.element.isRequired, 56 | color: PropTypes.string.isRequired, 57 | stats: PropTypes.string.isRequired, 58 | series: PropTypes.array.isRequired, 59 | statTitle: PropTypes.string.isRequired, 60 | }; 61 | 62 | // ** Default Props 63 | StatsWithLineChart.defaultProps = { 64 | options: lineChartOptions, 65 | color: "primary", 66 | }; 67 | -------------------------------------------------------------------------------- /src/@core/scss/base/pages/dashboard-ecommerce.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: ecommerce.scss 3 | // Description: SCC file for ecommerce. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | @import '../bootstrap-extended/include'; // Bootstrap includes 11 | @import '../components/include'; // Components includes 12 | 13 | // Statistics Card 14 | .card-statistics { 15 | .statistics-body { 16 | padding: 2rem 2.4rem !important; 17 | } 18 | 19 | @include media-breakpoint-down(lg) { 20 | .card-header, 21 | .statistics-body { 22 | padding: 1.5rem !important; 23 | } 24 | } 25 | } 26 | 27 | // Company Table Card 28 | .card-company-table { 29 | thead th { 30 | border: 0; 31 | } 32 | td { 33 | padding-top: 0.75rem; 34 | padding-bottom: 0.75rem; 35 | 36 | .avatar { 37 | background-color: $body-bg; 38 | margin-right: 2rem; 39 | 40 | img { 41 | border-radius: 0; 42 | } 43 | } 44 | } 45 | } 46 | 47 | // Browser State Card 48 | .card-browser-states { 49 | .browser-states { 50 | &:first-child { 51 | margin-top: 0; 52 | } 53 | &:not(:first-child) { 54 | margin-top: 1.7rem; 55 | } 56 | } 57 | } 58 | 59 | // Transaction Card 60 | .card-transaction { 61 | .transaction-item { 62 | &:not(:last-child) { 63 | margin-bottom: 1.5rem; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/@core/scss/base/components.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: components.scss 3 | // Description: Common components file to includ all theme specific custom components. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | @import 'bootstrap-extended/include'; // Bootstrap includes 11 | @import 'components/include'; // Components includes 12 | 13 | @import 'core/mixins/transitions'; // Template custom mixins 14 | 15 | // Core 16 | // ------------------------------ 17 | // layouts 18 | @import 'core/layouts/content'; 19 | @import 'core/layouts/sidebar'; 20 | @import 'core/layouts/footer'; 21 | // menu 22 | @import 'core/menu/navigation'; 23 | 24 | // Components 25 | // ------------------------------ 26 | @import 'components/avatar'; 27 | @import 'components/search'; 28 | // @import 'components/chart'; 29 | @import 'components/bootstrap-social'; 30 | @import 'components/demo'; //! Plugins demo styles, remove in real project 31 | @import 'components/customizer'; //! Customizer demo, remove in real project 32 | @import 'components/divider'; 33 | @import 'components/timeline'; 34 | @import 'components/custom-options'; 35 | 36 | // Plugins 37 | // ------------------------------ 38 | @import 'plugins/ui/breakpoints'; 39 | @import 'plugins/forms/select2/select2'; 40 | @import 'plugins/tables/datatables'; 41 | @import 'plugins/forms/form-number-input'; // ? globally required for cart dropdown 42 | -------------------------------------------------------------------------------- /src/views/pages/patients/add-steps/Contact.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import React, { Fragment, useState } from 'react' 3 | 4 | // ** Utils 5 | import { isObjEmpty } from '@utils' 6 | import classnames from 'classnames' 7 | 8 | // ** Third Party Components 9 | import { ArrowLeft, ArrowRight } from 'react-feather' 10 | // ** Utils 11 | import EditContact from '../../../../components/edits/patients/EditContact' 12 | 13 | // ** Reactstrap Imports 14 | import { Button } from 'reactstrap' 15 | 16 | const Contact = ({ stepper, callBack }) => { 17 | const [doNext, setDoNext] = useState(false) 18 | 19 | const saveCallback = (data, isValid) => { 20 | if (isValid) { 21 | callBack(data) 22 | stepper.next() 23 | } 24 | setDoNext(false) 25 | } 26 | 27 | return ( 28 | 29 |
    30 |
    Health Insurance
    31 | Enter the Patient Health Insurance Details. 32 |
    33 | 34 | 35 | 36 |
    37 | 41 | 45 |
    46 |     47 | ) 48 | } 49 | 50 | export default Contact 51 | -------------------------------------------------------------------------------- /src/utility/context/ThemeColors.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { useEffect, useState, createContext } from "react"; 3 | 4 | // ** Create Context 5 | const ThemeColors = createContext(); 6 | 7 | const ThemeContext = ({ children }) => { 8 | // ** State 9 | const [colors, setColors] = useState({}); 10 | 11 | //** ComponentDidMount 12 | useEffect(() => { 13 | if (window !== "undefined") { 14 | //** Get variable value 15 | const getHex = (color) => 16 | window.getComputedStyle(document.body).getPropertyValue(color).trim(); 17 | 18 | //** Colors obj 19 | const obj = { 20 | primary: { 21 | light: getHex("--bs-primary").concat("1a"), 22 | main: getHex("--bs-primary"), 23 | }, 24 | secondary: { 25 | light: getHex("--bs-secondary").concat("1a"), 26 | main: getHex("--bs-secondary"), 27 | }, 28 | success: { 29 | light: getHex("--bs-success").concat("1a"), 30 | main: getHex("--bs-success"), 31 | }, 32 | danger: { 33 | light: getHex("--bs-danger").concat("1a"), 34 | main: getHex("--bs-danger"), 35 | }, 36 | warning: { 37 | light: getHex("--bs-warning").concat("1a"), 38 | main: getHex("--bs-warning"), 39 | }, 40 | info: { 41 | light: getHex("--bs-info").concat("1a"), 42 | main: getHex("--bs-info"), 43 | }, 44 | dark: { 45 | light: getHex("--bs-dark").concat("1a"), 46 | main: getHex("--bs-dark"), 47 | }, 48 | }; 49 | 50 | setColors({ ...obj }); 51 | } 52 | }, []); 53 | 54 | return ( 55 | {children} 56 | ); 57 | }; 58 | 59 | export { ThemeColors, ThemeContext }; 60 | -------------------------------------------------------------------------------- /src/views/pages/patients/add-steps/Physician.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import React, { Fragment, useState } from 'react' 3 | 4 | // ** Utils 5 | import { isObjEmpty } from '@utils' 6 | import classnames from 'classnames' 7 | 8 | // ** Third Party Components 9 | import { ArrowLeft, ArrowRight } from 'react-feather' 10 | // ** Utils 11 | import EditPhysician from '../../../../components/edits/patients/EditPhysician' 12 | 13 | // ** Reactstrap Imports 14 | import { Button } from 'reactstrap' 15 | 16 | const Physician = ({ stepper, callBack }) => { 17 | const [doNext, setDoNext] = useState(false) 18 | 19 | const saveCallback = (data, isValid) => { 20 | if (isValid) { 21 | callBack(data) 22 | stepper.next() 23 | } 24 | setDoNext(false) 25 | } 26 | 27 | return ( 28 | 29 |
    30 |
    Primary Care Physician
    31 | Enter the Patient Primary Care Physician Details. 32 |
    33 | 34 | 35 | 36 |
    37 | 41 | 45 |
    46 |     47 | ) 48 | } 49 | 50 | export default Physician 51 | -------------------------------------------------------------------------------- /src/views/pages/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // ** Reactstrap Imports 3 | import { Row, Col } from "reactstrap"; 4 | 5 | import Breadcrumbs from "@components/breadcrumbs"; 6 | // ** Icons Imports 7 | import { Users, Activity, Calendar, AlertOctagon } from "react-feather"; 8 | 9 | // ** Custom Components 10 | import StatsHorizontal from "@components/widgets/stats/StatsHorizontal"; 11 | import PatientView from "./patients/view-tabs/PatientView"; 12 | 13 | // ** Styles 14 | import "@styles/react/libs/react-select/_react-select.scss"; 15 | import "@styles/react/libs/tables/react-dataTable-component.scss"; 16 | import "@styles/base/pages/page-misc.scss"; 17 | 18 | const Dashboard = () => { 19 | return ( 20 | <> 21 | 22 | 23 | } 25 | color="primary" 26 | stats="21" 27 | statTitle="Active Patients" 28 | /> 29 | 30 | 31 | } 33 | color="success" 34 | stats="15" 35 | statTitle="Appointments today" 36 | /> 37 | 38 | 39 | } 41 | color="danger" 42 | stats="19" 43 | statTitle="Notes Entered Today" 44 | /> 45 | 46 | 47 | } 49 | color="warning" 50 | stats="5" 51 | statTitle="Unsigned Users" 52 | /> 53 | 54 | 55 | 56 | 57 | ); 58 | }; 59 | export default Dashboard; 60 | -------------------------------------------------------------------------------- /src/views/pages/patients/add-steps/HealthInsurance.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import React, { Fragment, useState } from 'react' 3 | 4 | // ** Utils 5 | import { isObjEmpty } from '@utils' 6 | import classnames from 'classnames' 7 | 8 | // ** Third Party Components 9 | import { ArrowLeft, ArrowRight } from 'react-feather' 10 | // ** Utils 11 | import EditHealthInsurance from '../../../../components/edits/patients/EditHealthInsurance' 12 | 13 | // ** Reactstrap Imports 14 | import { Button } from 'reactstrap' 15 | 16 | const HealthInsurance = ({ stepper, callBack }) => { 17 | const [doNext, setDoNext] = useState(false) 18 | 19 | const saveCallback = (data, isValid) => { 20 | if (isValid) { 21 | callBack(data) 22 | stepper.next() 23 | } 24 | setDoNext(false) 25 | } 26 | 27 | return ( 28 | 29 |
    30 |
    Health Insurance
    31 | Enter the Patient Health Insurance Details. 32 |
    33 | 34 | 35 | 36 |
    37 | 41 | 45 |
    46 |     47 | ) 48 | } 49 | 50 | export default HealthInsurance 51 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | 26 | WoundCharts 27 | 28 | 29 |
    30 | 31 | 32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/@core/scss/base/core/layouts/_sidebar.scss: -------------------------------------------------------------------------------- 1 | /*========================================================================================= 2 | File Name: sidebar.scss 3 | Description: content sidebar specific scss. 4 | ---------------------------------------------------------------------------------------- 5 | Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | Author: PIXINVENT 7 | Author URL: http://www.themeforest.net/user/pixinvent 8 | ==========================================================================================*/ 9 | 10 | // Sidebar base 11 | // ------------------------------ 12 | 13 | // Base 14 | .sidebar { 15 | position: relative; 16 | width: 100%; 17 | height: 100%; 18 | 19 | // For desktop only 20 | @include media-breakpoint-up(lg) { 21 | vertical-align: top; 22 | } 23 | } 24 | .sidebar-fixed { 25 | position: fixed; 26 | height: 100%; 27 | overflow: scroll; 28 | } 29 | 30 | .sidenav-overlay { 31 | position: fixed; 32 | top: 0; 33 | left: 0; 34 | right: 0; 35 | height: 120vh; 36 | background-color: rgba($black, 0.5); 37 | z-index: 997; 38 | display: block; 39 | visibility: hidden; 40 | opacity: 0; 41 | transition: all 0.5s ease; 42 | &.show { 43 | opacity: 1; 44 | visibility: visible; 45 | transition: all 0.5s ease; 46 | } 47 | } 48 | 49 | .drag-target { 50 | height: 100%; 51 | width: 40px; 52 | position: fixed; 53 | top: 0; 54 | left: -10px; 55 | z-index: 1036; 56 | } 57 | 58 | .sidebar-detached { 59 | .sidebar { 60 | width: $sidebar-width; 61 | } 62 | } 63 | 64 | @include media-breakpoint-up(lg) { 65 | .sidebar-left { 66 | float: left; 67 | } 68 | .sidebar-right { 69 | float: right; 70 | } 71 | } 72 | 73 | @include media-breakpoint-down(lg) { 74 | .sidebar-detached { 75 | .sidebar { 76 | width: 100%; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/views/pages/calendar/SidebarLeft.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Fragment, useState } from 'react' 3 | 4 | // ** Reactstrap Imports 5 | import { Card, CardBody, Button, Input, Label } from 'reactstrap' 6 | 7 | import AddAppointment from './AddAppointment' 8 | // ** illustration import 9 | import illustration from '@src/assets/images/pages/calendar-illustration.png' 10 | 11 | const SidebarLeft = props => { 12 | // ** Props 13 | const { handleAddEventSidebar, toggleSidebar } = props 14 | const [editOpen, setEditOpen] = useState(false); 15 | const [reload, setReload] = useState(false); 16 | const [recordId, setRecordId] = useState(0); 17 | 18 | // ** Function to handle Add Event Click 19 | const handleAddEventClick = () => { 20 | toggleSidebar(false) 21 | handleAddEventSidebar() 22 | } 23 | 24 | const doTogglePopup = () => { 25 | setEditOpen(!editOpen); 26 | if (editOpen) { 27 | setRecordId(0); 28 | } 29 | }; 30 | 31 | const doHandleSaveAndClosePopup = (rowId) => { 32 | setReload(!reload); 33 | doTogglePopup(); 34 | 35 | } 36 | 37 | const doEditRecord = (e, rowId) => { 38 | e.preventDefault(); 39 | setEditOpen(!editOpen); 40 | setRecordId(rowId); 41 | 42 | } 43 | 44 | return ( 45 | 46 | 47 | 48 | 51 | 52 | 53 | 59 | 60 | ) 61 | } 62 | 63 | export default SidebarLeft 64 | -------------------------------------------------------------------------------- /src/@core/scss/base/pages/page-blog.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: blog.scss 3 | // Description: blog related pages layouts SCSS. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | @import '../bootstrap-extended/include'; // Bootstrap includes 11 | @import '../components/include'; // Components includes 12 | 13 | // blog list 14 | .blog-list-wrapper { 15 | // Truncate blog titles with 2 lines 16 | .blog-title-truncate { 17 | display: -webkit-box; 18 | -webkit-line-clamp: 2; 19 | -webkit-box-orient: vertical; 20 | overflow: hidden; 21 | } 22 | 23 | // Truncate blog content with 3 lines 24 | .blog-content-truncate { 25 | display: -webkit-box; 26 | -webkit-line-clamp: 3; 27 | -webkit-box-orient: vertical; 28 | overflow: hidden; 29 | } 30 | } 31 | 32 | // Blog Detail 33 | .blog-detail-wrapper { 34 | .blog-detail-share .dropdown-menu { 35 | min-width: auto; 36 | } 37 | } 38 | 39 | // Blog Sidebar 40 | .blog-sidebar { 41 | .blog-recent-posts { 42 | img { 43 | object-fit: cover; 44 | } 45 | // below scss is written because recent blog posts' titles are links to other pages 46 | .text-body-heading:hover { 47 | color: $link-hover-color !important; 48 | } 49 | } 50 | 51 | .blog-recent-post-title, 52 | .blog-category-title { 53 | line-height: 23px; 54 | letter-spacing: 0; 55 | } 56 | } 57 | 58 | // Blog Edit 59 | .blog-edit-wrapper { 60 | .border { 61 | border-color: $input-border-color !important; 62 | } 63 | } -------------------------------------------------------------------------------- /src/@core/components/widgets/stats/StatsHorizontal.js: -------------------------------------------------------------------------------- 1 | // ** Third Party Components 2 | import PropTypes from "prop-types"; 3 | import classnames from "classnames"; 4 | 5 | // ** Reactstrap Imports 6 | import { Card, CardBody } from "reactstrap"; 7 | 8 | const StatsHorizontal = ({ 9 | icon, 10 | color, 11 | stats, 12 | renderStats, 13 | statTitle, 14 | className, 15 | statsMargin, 16 | }) => { 17 | return ( 18 | 19 | 20 |
    25 |
    {icon}
    26 |
    27 |
    28 |
    29 | {renderStats ? ( 30 | renderStats 31 | ) : ( 32 |

    38 | {stats} 39 |

    40 | )} 41 | 42 |

    {statTitle}

    43 |
    44 |
    45 |     46 |     47 | ); 48 | }; 49 | 50 | export default StatsHorizontal; 51 | 52 | // ** PropTypes 53 | StatsHorizontal.propTypes = { 54 | stats: PropTypes.string, 55 | renderStats: PropTypes.any, 56 | className: PropTypes.string, 57 | icon: PropTypes.element.isRequired, 58 | color: PropTypes.string.isRequired, 59 | statTitle: PropTypes.string.isRequired, 60 | statsMargin: PropTypes.oneOf([ 61 | "mb-0", 62 | "mb-25", 63 | "mb-50", 64 | "mb-75", 65 | "mb-1", 66 | "mb-2", 67 | "mb-3", 68 | "mb-4", 69 | "mb-5", 70 | ]), 71 | }; 72 | -------------------------------------------------------------------------------- /src/@core/components/widgets/stats/StatsWithAreaChart.js: -------------------------------------------------------------------------------- 1 | // ** Custom Components 2 | import Avatar from "@components/avatar"; 3 | 4 | // ** Third Party Components 5 | import PropTypes from "prop-types"; 6 | import classnames from "classnames"; 7 | import Chart from "react-apexcharts"; 8 | 9 | // ** Reactstrap Imports 10 | import { Card, CardBody } from "reactstrap"; 11 | 12 | // ** Default Options 13 | import { areaChartOptions } from "./ChartOptions"; 14 | 15 | const StatsWithAreaChart = (props) => { 16 | // ** Props 17 | const { 18 | icon, 19 | color, 20 | stats, 21 | statTitle, 22 | series, 23 | options, 24 | type, 25 | height, 26 | className, 27 | ...rest 28 | } = props; 29 | return ( 30 | 31 | 36 | 41 |

    {stats}

    42 |

    {statTitle}

    43 |     44 | 50 |     51 | ); 52 | }; 53 | 54 | export default StatsWithAreaChart; 55 | 56 | // ** PropTypes 57 | StatsWithAreaChart.propTypes = { 58 | type: PropTypes.string, 59 | height: PropTypes.string, 60 | options: PropTypes.object, 61 | className: PropTypes.string, 62 | icon: PropTypes.element.isRequired, 63 | color: PropTypes.string.isRequired, 64 | stats: PropTypes.string.isRequired, 65 | series: PropTypes.array.isRequired, 66 | statTitle: PropTypes.string.isRequired, 67 | }; 68 | 69 | // ** Default Props 70 | StatsWithAreaChart.defaultProps = { 71 | color: "primary", 72 | options: areaChartOptions, 73 | }; 74 | -------------------------------------------------------------------------------- /src/@core/scss/base/pages/page-faq.scss: -------------------------------------------------------------------------------- 1 | // =============================================================================================== 2 | // File Name: page-faq.scss 3 | // Description: FAQ Page Content SCSS 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | @import '../bootstrap-extended/include'; // Bootstrap includes 11 | @import '../components/include'; // Components includes 12 | 13 | // faq search section 14 | .faq-search { 15 | background-size: cover; 16 | background-color: rgba($primary, 0.12) !important; 17 | .faq-search-input { 18 | .input-group { 19 | // remove input group box shadow on inside focus 20 | &:focus-within { 21 | box-shadow: none; 22 | } 23 | } 24 | } 25 | } 26 | 27 | // Contact cards 28 | .faq-contact { 29 | .faq-contact-card { 30 | background-color: rgba($gray-100, 0.12); 31 | } 32 | } 33 | 34 | // make jumbotron card body padding 35 | @include media-breakpoint-up(lg) { 36 | .faq-search { 37 | .card-body { 38 | padding: 8rem !important; 39 | } 40 | } 41 | } 42 | 43 | // make jumbotron card body padding 44 | @include media-breakpoint-only(md) { 45 | .faq-search { 46 | .card-body { 47 | padding: 6rem !important; 48 | } 49 | } 50 | } 51 | 52 | @include media-breakpoint-up(md) { 53 | // faq search input width fixed for medium up screen 54 | .faq-search { 55 | .faq-search-input { 56 | .input-group { 57 | width: 576px; 58 | margin: 0 auto; 59 | } 60 | } 61 | } 62 | // faq navigation fix the navigation section so that vector image not move as per collapse 63 | .faq-navigation { 64 | height: 550px; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/@core/scss/base/themes/bordered-layout.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: bordered-layout.scss 3 | // Description: SCSS file for Bordered layout. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | @import '../bootstrap-extended/include'; // Bootstrap includes 11 | @import '../components/include'; // Components includes 12 | 13 | .bordered-layout { 14 | .header-navbar { 15 | box-shadow: none; 16 | border: 1px solid $border-color; 17 | &.floating-nav { 18 | border: 1px solid $border-color; 19 | } 20 | &.fixed-top { 21 | border-bottom: 1px solid $border-color; 22 | background: $body-bg; 23 | box-shadow: none !important; 24 | } 25 | } 26 | .main-menu { 27 | border-right: 1px solid $border-color; 28 | box-shadow: none; 29 | &.menu-light .navigation > li { 30 | &.open:not(.menu-item-closing), 31 | &.sidebar-group-active { 32 | > a { 33 | background: darken($white, 7%); 34 | } 35 | } 36 | } 37 | } 38 | .dropdown-menu { 39 | border: 1px solid $border-color !important; 40 | box-shadow: none; 41 | } 42 | .main-menu .navigation, 43 | .main-menu { 44 | background: $body-bg; 45 | } 46 | .card, 47 | .bs-stepper:not(.wizard-modern):not(.checkout-tab-steps), 48 | .bs-stepper.wizard-modern .bs-stepper-content { 49 | border: 1px solid $border-color; 50 | box-shadow: none; 51 | } 52 | 53 | .footer { 54 | box-shadow: none !important; 55 | } 56 | .footer-fixed { 57 | .footer { 58 | border-top: 1px solid $border-color; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/forms/_input-group.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | // input group !important for overriding the dark style 6 | .input-group { 7 | &:not(.bootstrap-touchspin):focus-within { 8 | box-shadow: $input-focus-box-shadow; 9 | border-radius: $input-border-radius; 10 | .form-control, 11 | .input-group-text { 12 | border-color: $primary; 13 | box-shadow: none; 14 | 15 | &.is-valid { 16 | border-color: $success; 17 | } 18 | 19 | &.is-invalid { 20 | border-color: $danger; 21 | } 22 | } 23 | } 24 | &.is-valid { 25 | .input-group-text { 26 | border-color: $success !important; 27 | } 28 | &:not(.bootstrap-touchspin):focus-within { 29 | .input-group-text { 30 | border-color: $success; 31 | } 32 | } 33 | } 34 | &.is-invalid { 35 | .input-group-text { 36 | border-color: $danger !important; 37 | } 38 | &:not(.bootstrap-touchspin):focus-within { 39 | .input-group-text { 40 | border-color: $danger; 41 | } 42 | } 43 | } 44 | 45 | &.disabled { 46 | .input-group-text { 47 | background-color: $input-disabled-bg; 48 | } 49 | } 50 | 51 | &.round { 52 | .form-control, 53 | .input-group-text, 54 | &:focus-within { 55 | @include border-radius(1.5rem); 56 | } 57 | } 58 | &.square { 59 | .form-control, 60 | .input-group-text, 61 | &:focus-within { 62 | @include border-radius(0); 63 | } 64 | } 65 | } 66 | 67 | .input-group-text { 68 | @include transition($input-transition); 69 | } 70 | 71 | // input group merge 72 | .input-group-merge { 73 | .form-control { 74 | &:not(:first-child) { 75 | padding-left: 0; 76 | border-left: 0; 77 | } 78 | 79 | &:not(:last-child) { 80 | padding-right: 0; 81 | border-right: 0; 82 | } 83 | 84 | &.is-valid { 85 | .input-group-text { 86 | border-color: $success; 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: bootstrap-extended.scss 3 | // Description: List of modified Bootstrap files. This is an actual copy of bootstrap.scss 4 | // excluding files that have not been modified. 5 | // ---------------------------------------------------------------------------------------------- 6 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 7 | // Author: PIXINVENT 8 | // Author URL: http://www.themeforest.net/user/pixinvent 9 | // ================================================================================================ 10 | 11 | @import 'bootstrap-extended/include'; // Bootstrap includes 12 | @import 'components/include'; // Components includes 13 | 14 | // Custom template mixins 15 | @import 'core/mixins/alert'; // Template custom mixins 16 | 17 | // Core CSS 18 | @import 'bootstrap-extended/reboot'; 19 | @import 'bootstrap-extended/helper'; 20 | @import 'bootstrap-extended/type'; 21 | @import 'bootstrap-extended/code'; 22 | @import 'bootstrap-extended/tables'; 23 | @import 'bootstrap-extended/forms'; 24 | @import 'bootstrap-extended/buttons'; 25 | @import 'bootstrap-extended/button-group'; 26 | 27 | // Components 28 | @import 'bootstrap-extended/dropdown'; 29 | @import 'bootstrap-extended/navbar'; 30 | @import 'bootstrap-extended/card'; 31 | @import 'bootstrap-extended/carousel'; 32 | @import 'bootstrap-extended/breadcrumb'; 33 | @import 'bootstrap-extended/badge'; 34 | @import 'bootstrap-extended/nav'; 35 | @import 'bootstrap-extended/alert'; 36 | @import 'bootstrap-extended/progress'; 37 | @import 'bootstrap-extended/list-group'; 38 | @import 'bootstrap-extended/toast'; 39 | @import 'bootstrap-extended/accordion'; 40 | @import 'bootstrap-extended/pagination'; 41 | 42 | // Components w/ JavaScript 43 | @import 'bootstrap-extended/modal'; 44 | @import 'bootstrap-extended/popover'; 45 | 46 | // Utility classes 47 | @import 'bootstrap-extended/utilities'; 48 | -------------------------------------------------------------------------------- /src/@core/scss/base/core/layouts/_footer.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: Footer.scss 3 | // Description: * Main footer styles. 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | // Stick footer to the bottom of the page 10 | footer { 11 | &.footer { 12 | padding: 0.8rem $content-padding; 13 | min-height: $footer-height; 14 | transition: 300ms ease all; 15 | // heart icon scss 16 | span { 17 | i, 18 | svg { 19 | height: 1.51rem; 20 | width: 1.51rem; 21 | font-size: 1.51rem; 22 | margin-left: 0.5rem; 23 | color: $danger; 24 | } 25 | } 26 | .scroll-top { 27 | padding: 0.81rem 0.83rem; 28 | } 29 | } 30 | //shadow & border options 31 | &.footer-shadow { 32 | box-shadow: $box-shadow; 33 | } 34 | &.footer-border { 35 | border-top: 1px solid $border-color; 36 | } 37 | } 38 | // Fixed Footer 39 | .footer-fixed { 40 | footer { 41 | position: fixed !important; 42 | z-index: 1030; 43 | right: 0; 44 | left: 0; 45 | bottom: 0; 46 | // Footer Light 47 | &.footer-light { 48 | background: $white; 49 | box-shadow: $box-shadow; 50 | } 51 | // Footer Dark 52 | &.footer-dark { 53 | background: $gray-600; 54 | color: $white; 55 | } 56 | } 57 | } 58 | //! Fix: If footer is hidden add padding fix to avail card margin bottom 59 | .footer-hidden { 60 | .app-content { 61 | padding-bottom: 0.1px !important; 62 | } 63 | } 64 | // scroll to Top Footer Button 65 | .scroll-top { 66 | position: fixed; 67 | bottom: 5%; 68 | right: 30px; 69 | display: none; 70 | z-index: 99; 71 | } 72 | -------------------------------------------------------------------------------- /src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { NavLink } from "react-router-dom"; 3 | 4 | // ** Third Party Components 5 | import classnames from "classnames"; 6 | import { useTranslation } from "react-i18next"; 7 | 8 | // ** Reactstrap Imports 9 | import { Badge } from "reactstrap"; 10 | 11 | const VerticalNavMenuLink = ({ item, activeItem }) => { 12 | // ** Conditional Link Tag, if item has newTab or externalLink props use tag else use NavLink 13 | const LinkTag = item.externalLink ? "a" : NavLink; 14 | 15 | // ** Hooks 16 | const { t } = useTranslation(); 17 | 18 | return ( 19 |
  • 26 | { 37 | if (isActive && !item.disabled) { 38 | return "d-flex align-items-center active"; 39 | } 40 | }, 41 | })} 42 | onClick={(e) => { 43 | if ( 44 | item.navLink.length === 0 || 45 | item.navLink === "#" || 46 | item.disabled === true 47 | ) { 48 | e.preventDefault(); 49 | } 50 | }} 51 | > 52 | {item.icon} 53 | {t(item.title)} 54 | 55 | {item.badge && item.badgeText ? ( 56 | 57 | {item.badgeText} 58 | 59 | ) : null} 60 | 61 |
    • 62 | ); 63 | }; 64 | 65 | export default VerticalNavMenuLink; 66 | -------------------------------------------------------------------------------- /src/views/pages/patients/add-steps/Address.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import React, { Fragment, useState } from "react"; 3 | 4 | // ** Utils 5 | import { isObjEmpty } from "@utils"; 6 | import classnames from "classnames"; 7 | 8 | // ** Third Party Components 9 | import { ArrowLeft, ArrowRight } from "react-feather"; 10 | // ** Utils 11 | import EditAddress from "../../../../components/edits/patients/EditAddress"; 12 | 13 | // ** Reactstrap Imports 14 | import { 15 | Button, 16 | } from "reactstrap"; 17 | 18 | const Address = ({ stepper, formData, callBack }) => { 19 | const [doNext, setDoNext] = useState(false); 20 | 21 | const saveCallback = (data, isValid) => { 22 | if (isValid){ 23 | callBack(data) 24 | stepper.next(); 25 | } 26 | setDoNext(false) 27 | } 28 | 29 | 30 | return ( 31 | 32 | {stepper && 33 |
    34 |
    Address
    35 | Enter the Patient Address Details. 36 |
    37 | } 38 | 39 | 40 |
    41 | 56 | 63 |
    64 |     65 | ); 66 | }; 67 | 68 | export default Address; 69 | -------------------------------------------------------------------------------- /src/@core/scss/react/app-loader.scss: -------------------------------------------------------------------------------- 1 | .fallback-spinner { 2 | height: 100%; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | 7 | &.app-loader { 8 | height: 100vh; 9 | flex-direction: column; 10 | .loading { 11 | margin-top: 1rem; 12 | } 13 | } 14 | &.content-loader { 15 | top: 50%; 16 | left: 50%; 17 | width: 100%; 18 | margin-top: -2rem; 19 | height: calc(100vh - 10rem); 20 | } 21 | 22 | .loading { 23 | width: 55px; 24 | height: 55px; 25 | border-radius: 50%; 26 | border: 3px solid transparent; 27 | -webkit-box-sizing: border-box; 28 | box-sizing: border-box; 29 | 30 | .effect-1, 31 | .effect-2, 32 | .effect-3 { 33 | width: 55px; 34 | height: 55px; 35 | border-radius: 50%; 36 | border: 3px solid transparent; 37 | border-left: 3px solid rgba(121, 97, 249, 1); 38 | -webkit-box-sizing: border-box; 39 | box-sizing: border-box; 40 | } 41 | 42 | .effect-1 { 43 | position: absolute; 44 | animation: rotate 1s ease infinite; 45 | } 46 | .effect-2 { 47 | position: absolute; 48 | animation: rotateOpacity 1s ease infinite 0.1s; 49 | } 50 | .effect-3 { 51 | -webkit-animation: rotateOpacity 1s ease infinite 0.2s; 52 | animation: rotateOpacity 1s ease infinite 0.2s; 53 | } 54 | 55 | .loading .effects { 56 | transition: all 0.3s ease; 57 | } 58 | } 59 | } 60 | // .fallback-logo { 61 | // position: absolute; 62 | // left: calc(50% - 45px); 63 | // top: 40%; 64 | // } 65 | 66 | @keyframes rotate { 67 | 0% { 68 | -webkit-transform: rotate(0deg); 69 | transform: rotate(0deg); 70 | } 71 | 100% { 72 | -webkit-transform: rotate(1turn); 73 | transform: rotate(1turn); 74 | } 75 | } 76 | @keyframes rotateOpacity { 77 | 0% { 78 | -webkit-transform: rotate(0deg); 79 | transform: rotate(0deg); 80 | opacity: 0.1; 81 | } 82 | 100% { 83 | -webkit-transform: rotate(1turn); 84 | transform: rotate(1turn); 85 | opacity: 1; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/@core/components/ripple-button/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { useState, useEffect } from "react"; 3 | 4 | // ** Third Party Components 5 | import classnames from "classnames"; 6 | 7 | // ** Reactstrap Imports 8 | import { Button } from "reactstrap"; 9 | 10 | // ** Styles 11 | import "./ripple-button.scss"; 12 | 13 | const RippleButton = ({ className, children, onClick, ...rest }) => { 14 | // ** States 15 | const [mounted, setMounted] = useState(false); 16 | const [isRippling, setIsRippling] = useState(false); 17 | const [coords, setCoords] = useState({ x: -1, y: -1 }); 18 | 19 | // ** Toggle mounted on mount & unmount 20 | useEffect(() => { 21 | setMounted(true); 22 | return () => setMounted(false); 23 | }, []); 24 | 25 | // ** Check for coords and set ripple 26 | useEffect(() => { 27 | if (mounted) { 28 | if (coords.x !== -1 && coords.y !== -1) { 29 | setIsRippling(true); 30 | setTimeout(() => setIsRippling(false), 500); 31 | } else { 32 | setIsRippling(false); 33 | } 34 | } 35 | }, [coords]); 36 | 37 | // ** Reset Coords on ripple end 38 | useEffect(() => { 39 | if (mounted) { 40 | if (!isRippling) setCoords({ x: -1, y: -1 }); 41 | } 42 | }, [isRippling]); 43 | 44 | return ( 45 | 69 | ); 70 | }; 71 | 72 | // ** PropTypes 73 | RippleButton.propTypes = { 74 | ...Button.propTypes, 75 | }; 76 | 77 | Button.Ripple = RippleButton; 78 | -------------------------------------------------------------------------------- /src/views/pages/profile/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Fragment, useState, useEffect } from 'react' 3 | 4 | // ** Third Party Components 5 | import axios from 'axios' 6 | 7 | // ** Reactstrap Imports 8 | import { Row, Col, TabContent, TabPane } from 'reactstrap' 9 | 10 | // ** Demo Components 11 | import Tabs from './Tabs' 12 | import Breadcrumbs from '@components/breadcrumbs' 13 | import AccountTabContent from './AccountTabContent' 14 | import SecurityTabContent from './SecurityTabContent' 15 | 16 | // ** Styles 17 | import '@styles/react/libs/flatpickr/flatpickr.scss' 18 | import '@styles/react/pages/page-account-settings.scss' 19 | 20 | const Profile = () => { 21 | // ** States 22 | const [activeTab, setActiveTab] = useState('1') 23 | const [data, setData] = useState(null) 24 | 25 | const toggleTab = tab => { 26 | setActiveTab(tab) 27 | } 28 | 29 | useEffect(() => { 30 | axios.get('/account-setting/data').then(response => setData(response.data)) 31 | }, []) 32 | 33 | return ( 34 | 35 | 36 | {data !== null ? ( 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | {/* 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | */} 57 | 58 | 59 | 60 | ) : null} 61 | 62 | ) 63 | } 64 | 65 | export default Profile 66 | -------------------------------------------------------------------------------- /src/redux/navbar.js: -------------------------------------------------------------------------------- 1 | // ** Redux Imports 2 | import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; 3 | 4 | // ** Axios Imports 5 | import axios from "axios"; 6 | 7 | export const getBookmarks = createAsyncThunk( 8 | "layout/getBookmarks", 9 | async () => { 10 | const response = await axios.get("/api/bookmarks/data"); 11 | return { 12 | data: response.data.suggestions, 13 | bookmarks: response.data.bookmarks, 14 | }; 15 | } 16 | ); 17 | 18 | export const updateBookmarked = createAsyncThunk( 19 | "layout/updateBookmarked", 20 | async (id) => { 21 | await axios.post("/api/bookmarks/update", { id }); 22 | return id; 23 | } 24 | ); 25 | 26 | export const layoutSlice = createSlice({ 27 | name: "layout", 28 | initialState: { 29 | query: "", 30 | bookmarks: [], 31 | suggestions: [], 32 | }, 33 | reducers: { 34 | handleSearchQuery: (state, action) => { 35 | state.query = action.payload; 36 | }, 37 | }, 38 | extraReducers: (builder) => { 39 | builder 40 | .addCase(getBookmarks.fulfilled, (state, action) => { 41 | state.suggestions = action.payload.data; 42 | state.bookmarks = action.payload.bookmarks; 43 | }) 44 | .addCase(updateBookmarked.fulfilled, (state, action) => { 45 | let objectToUpdate; 46 | 47 | // ** find & update object 48 | state.suggestions.find((item) => { 49 | if (item.id === action.payload) { 50 | item.isBookmarked = !item.isBookmarked; 51 | objectToUpdate = item; 52 | } 53 | }); 54 | 55 | // ** Get index to add or remove bookmark from array 56 | const bookmarkIndex = state.bookmarks.findIndex( 57 | (x) => x.id === action.payload 58 | ); 59 | 60 | if (bookmarkIndex === -1) { 61 | state.bookmarks.push(objectToUpdate); 62 | } else { 63 | state.bookmarks.splice(bookmarkIndex, 1); 64 | } 65 | }); 66 | }, 67 | }); 68 | 69 | export const { handleSearchQuery } = layoutSlice.actions; 70 | 71 | export default layoutSlice.reducer; 72 | -------------------------------------------------------------------------------- /src/@core/components/widgets/stats/ChartOptions.js: -------------------------------------------------------------------------------- 1 | // ** Area Chart Common Options 2 | export const areaChartOptions = { 3 | chart: { 4 | toolbar: { 5 | show: false, 6 | }, 7 | sparkline: { 8 | enabled: true, 9 | }, 10 | }, 11 | grid: { 12 | show: false, 13 | }, 14 | colors: ["#7367F0"], 15 | dataLabels: { 16 | enabled: false, 17 | }, 18 | stroke: { 19 | curve: "smooth", 20 | width: 2.5, 21 | }, 22 | fill: { 23 | type: "gradient", 24 | gradient: { 25 | shadeIntensity: 0.9, 26 | opacityFrom: 0.7, 27 | opacityTo: 0.5, 28 | stops: [0, 80, 100], 29 | }, 30 | }, 31 | xaxis: { 32 | labels: { 33 | show: false, 34 | }, 35 | axisBorder: { 36 | show: false, 37 | }, 38 | }, 39 | yaxis: { 40 | labels: { 41 | show: false, 42 | }, 43 | }, 44 | tooltip: { 45 | x: { show: false }, 46 | }, 47 | }; 48 | 49 | // ** Line Chart Common Options 50 | export const lineChartOptions = { 51 | chart: { 52 | toolbar: { 53 | show: false, 54 | }, 55 | sparkline: { 56 | enabled: true, 57 | }, 58 | dropShadow: { 59 | enabled: true, 60 | top: 5, 61 | left: 0, 62 | blur: 4, 63 | opacity: 0.1, 64 | }, 65 | }, 66 | grid: { 67 | show: false, 68 | }, 69 | colors: ["#7367F0"], 70 | dataLabels: { 71 | enabled: false, 72 | }, 73 | stroke: { 74 | curve: "smooth", 75 | width: 5, 76 | }, 77 | fill: { 78 | type: "gradient", 79 | gradient: { 80 | shadeIntensity: 1, 81 | gradientToColors: ["#A9A2F6"], 82 | opacityFrom: 1, 83 | opacityTo: 1, 84 | stops: [0, 100, 100, 100], 85 | }, 86 | }, 87 | 88 | xaxis: { 89 | labels: { 90 | show: false, 91 | }, 92 | axisBorder: { 93 | show: false, 94 | }, 95 | }, 96 | yaxis: { 97 | labels: { 98 | show: false, 99 | }, 100 | }, 101 | tooltip: { 102 | x: { show: false }, 103 | }, 104 | }; 105 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_button-group.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Split button dropdowns 3 | // 4 | 5 | .dropdown-toggle-split { 6 | padding-right: calc($btn-padding-x / 1.9); 7 | padding-left: calc($btn-padding-x / 1.9); 8 | } 9 | 10 | .btn-lg + .dropdown-toggle-split, 11 | .btn-group-lg > .btn + .dropdown-toggle-split { 12 | padding-right: calc($input-btn-padding-x-lg / 1.75); 13 | padding-left: calc($input-btn-padding-x-lg / 1.75); 14 | } 15 | 16 | .btn-sm + .dropdown-toggle-split, 17 | .btn-group-sm > .btn + .dropdown-toggle-split { 18 | padding-right: calc($input-btn-padding-x-sm / 1.9); 19 | padding-left: calc($input-btn-padding-x-sm / 1.9); 20 | } 21 | 22 | // button group border 23 | .btn-group { 24 | [class*='btn-']:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']) { 25 | border-left-color: rgba($black, 0.08) !important; 26 | border-right-color: rgba($black, 0.08) !important; 27 | } 28 | } 29 | 30 | // remove first btn group border left 31 | .btn-group 32 | > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):first-child, 33 | .btn-group 34 | > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):first-of-type { 35 | border-left-color: transparent !important; 36 | } 37 | 38 | // remove last btn group border right 39 | .btn-group 40 | > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):last-child, 41 | .btn-group 42 | > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):last-of-type { 43 | border-right-color: transparent !important; 44 | } 45 | 46 | // toggle button 47 | .btn-group-toggle { 48 | [class*='btn-outline-'] { 49 | &:not(:last-child) { 50 | border-right-width: 0 !important; 51 | } 52 | } 53 | :not([class*='btn-outline-']) { 54 | &.active, 55 | &:active { 56 | box-shadow: inset $box-shadow; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/@core/scss/base/plugins/extensions/ext-component-tour.scss: -------------------------------------------------------------------------------- 1 | @import '../../bootstrap-extended/include'; // Bootstrap includes 2 | @import '../../components/include'; // Components includes 3 | 4 | .shepherd-element { 5 | border-radius: $border-radius; 6 | width: 350px; 7 | &[data-popper-placement='bottom'] { 8 | margin-top: 1rem !important; 9 | .shepherd-arrow:before { 10 | background-color: $primary !important; 11 | } 12 | } 13 | &[data-popper-placement='top'] { 14 | margin-bottom: 1rem !important; 15 | } 16 | &[data-popper-placement='left'] { 17 | margin-right: 1rem !important; 18 | } 19 | &[data-popper-placement='right'] { 20 | margin-left: 1rem !important; 21 | } 22 | 23 | .shepherd-content { 24 | border-radius: $border-radius; 25 | // header 26 | .shepherd-header { 27 | background-color: $primary; 28 | padding: 0.38rem 1.2rem; 29 | border-radius: $border-radius $border-radius 0 0; 30 | .shepherd-title { 31 | color: $white; 32 | font-weight: 500; 33 | font-size: 1.1rem; 34 | } 35 | .shepherd-cancel-icon { 36 | color: $white; 37 | font-size: 1.7rem; 38 | 39 | &:focus { 40 | outline: none; 41 | } 42 | } 43 | } 44 | 45 | // body or text 46 | .shepherd-text { 47 | color: $body-color; 48 | padding: 0.8rem 1.2rem; 49 | } 50 | 51 | // footer 52 | .shepherd-footer { 53 | padding: 0 1.2rem 1rem; 54 | justify-content: space-between; 55 | .shepherd-button { 56 | padding: 0.5rem 1.3rem; 57 | } 58 | } 59 | } 60 | @include media-breakpoint-down(sm) { 61 | width: 300px; 62 | } 63 | } 64 | 65 | // Dark layout 66 | .dark-layout { 67 | .shepherd-element { 68 | background-color: $theme-dark-card-bg; 69 | &:not([data-popper-placement='bottom']) { 70 | .shepherd-arrow:before { 71 | background-color: $theme-dark-card-bg; 72 | } 73 | } 74 | .shepherd-content { 75 | .shepherd-text { 76 | color: $theme-dark-body-color; 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/@core/scss/base/pages/page-knowledge-base.scss: -------------------------------------------------------------------------------- 1 | // =============================================================================================== 2 | // File Name: knowledge-base.scss 3 | // Description: Knowledge Base Page Content SCSS 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | @import '../bootstrap-extended/include'; // Bootstrap includes 11 | @import '../components/include'; // Components includes 12 | 13 | $svg-bg: #fcfcfc; 14 | 15 | // Knowledge-base jumbotron scss 16 | .knowledge-base-bg { 17 | background-size: cover; 18 | background-color: rgba($primary, 0.12) !important; 19 | 20 | // knowledge base search 21 | .kb-search-input { 22 | .input-group { 23 | // remove input group box shadow on inside focus 24 | &:focus-within { 25 | box-shadow: none; 26 | } 27 | } 28 | } 29 | } 30 | 31 | // 32 | .kb-search-content-info { 33 | .kb-search-content { 34 | .card-img-top { 35 | background-color: $svg-bg; 36 | } 37 | } 38 | .no-result { 39 | &.no-items { 40 | display: none; 41 | } 42 | } 43 | } 44 | // knowledge base title 45 | .kb-title { 46 | display: flex; 47 | align-items: center; 48 | } 49 | 50 | //search input width fixed for medium up screen 51 | @include media-breakpoint-up(md) { 52 | .knowledge-base-bg { 53 | .kb-search-input { 54 | .input-group { 55 | width: 576px; 56 | margin: 0 auto; 57 | } 58 | } 59 | } 60 | } 61 | 62 | // make jumbotron card body padding 63 | @include media-breakpoint-up(lg) { 64 | .knowledge-base-bg { 65 | .card-body { 66 | padding: 8rem; 67 | } 68 | } 69 | } 70 | // make jumbotron card body padding 71 | @include media-breakpoint-only(md) { 72 | .knowledge-base-bg { 73 | .card-body { 74 | padding: 6rem; 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | &:not([class*='breadcrumb-']) { 3 | .breadcrumb-item + .breadcrumb-item { 4 | &:before { 5 | content: ' '; 6 | background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $body-color), '#', '%23')); 7 | background-repeat: no-repeat; 8 | background-position: center; 9 | color: $body-color; 10 | margin-right: $breadcrumb-item-padding-x; 11 | background-size: 14px; 12 | } 13 | } 14 | } 15 | .breadcrumb-item + .breadcrumb-item { 16 | &:before { 17 | height: 20px; 18 | } 19 | } 20 | } 21 | 22 | /* Component Specific */ 23 | .breadcrumb-slash { 24 | &.breadcrumb { 25 | .breadcrumb-item + .breadcrumb-item:before { 26 | content: '/'; 27 | } 28 | } 29 | } 30 | .breadcrumb-dots { 31 | &.breadcrumb { 32 | .breadcrumb-item + .breadcrumb-item:before { 33 | content: '.'; 34 | position: relative; 35 | top: -4px; 36 | } 37 | } 38 | } 39 | .breadcrumb-dashes { 40 | &.breadcrumb { 41 | .breadcrumb-item + .breadcrumb-item:before { 42 | content: '-'; 43 | } 44 | } 45 | } 46 | .breadcrumb-pipes { 47 | &.breadcrumb { 48 | .breadcrumb-item + .breadcrumb-item:before { 49 | content: '|'; 50 | } 51 | } 52 | } 53 | .breadcrumb-chevron { 54 | &.breadcrumb { 55 | .breadcrumb-item + .breadcrumb-item:before { 56 | content: ' '; 57 | background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $body-color), '#', '%23')); 58 | background-repeat: no-repeat; 59 | background-position: center; 60 | color: $body-color; 61 | margin-right: $breadcrumb-item-padding-x; 62 | background-size: 14px; 63 | } 64 | } 65 | } 66 | // padding left for header area breadcrumbs 67 | .content-header .breadcrumb { 68 | padding-left: 1rem; 69 | } 70 | 71 | @media (max-width: 648px) { 72 | .content-header .breadcrumb { 73 | display: none; 74 | } 75 | .breadcrumbs-top { 76 | .content-header-title { 77 | display: contents !important; 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/components/alerts/AlertUtils.js: -------------------------------------------------------------------------------- 1 | import Swal from "sweetalert2"; 2 | import withReactContent from "sweetalert2-react-content"; 3 | 4 | import toast from "react-hot-toast"; 5 | import Avatar from "@components/avatar"; 6 | import { Check, X } from "react-feather"; 7 | 8 | const MySwal = withReactContent(Swal); 9 | 10 | export const showAlertError = (message) => { 11 | return MySwal.fire({ 12 | title: "Error!", 13 | text: message, 14 | icon: "error", 15 | customClass: { 16 | confirmButton: "btn btn-primary", 17 | }, 18 | buttonsStyling: false, 19 | }); 20 | }; 21 | 22 | 23 | export const showDeleteDialog = deleteCallback => { 24 | return MySwal.fire({ 25 | title: 'Delete Record', 26 | text: 'Are you sure you would like to delete this record?', 27 | icon: 'warning', 28 | showCancelButton: true, 29 | confirmButtonText: 'Yes, delete it!', 30 | customClass: { 31 | confirmButton: 'btn btn-primary', 32 | cancelButton: 'btn btn-danger ms-1' 33 | }, 34 | buttonsStyling: false 35 | }).then(function (result) { 36 | if (result.value) { 37 | if (deleteCallback){ 38 | deleteCallback(); 39 | } 40 | // MySwal.fire({ 41 | // icon: 'success', 42 | // title: 'Deleted!', 43 | // text: 'The record has been deleted.', 44 | // customClass: { 45 | // confirmButton: 'btn btn-success' 46 | // } 47 | // }) 48 | } else if (result.dismiss === MySwal.DismissReason.cancel) { 49 | 50 | } 51 | }) 52 | } 53 | 54 | export const ToastContent = ({ t, message }) => { 55 | return ( 56 |
    57 |
    58 | } /> 59 |
    60 |
    61 |
    62 | toast.dismiss(t.id)} 66 | /> 67 |
    68 | {message} 69 |
    70 |
    71 | ); 72 | }; 73 | -------------------------------------------------------------------------------- /src/@core/components/avatar-group/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Fragment } from "react"; 3 | 4 | // ** Third Party Components 5 | import Proptypes from "prop-types"; 6 | import classnames from "classnames"; 7 | 8 | // ** Reactstrap Imports 9 | import { UncontrolledTooltip } from "reactstrap"; 10 | 11 | // ** Custom Components Imports 12 | import Avatar from "@components/avatar"; 13 | 14 | const AvatarGroup = (props) => { 15 | // ** Props 16 | const { data, tag, className } = props; 17 | 18 | // ** Conditional Tag 19 | const Tag = tag ? tag : "div"; 20 | 21 | // ** Render Data 22 | const renderData = () => { 23 | return data.map((item, i) => { 24 | const ItemTag = item.tag ? item.tag : "div"; 25 | return ( 26 | 27 | {item.title ? ( 28 | 32 | {item.title} 33 | 34 | ) : null} 35 | {!item.meta ? ( 36 | 46 | ) : null} 47 | {item.meta ? ( 48 | 49 | {item.meta} 50 | 51 | ) : null} 52 | 53 | ); 54 | }); 55 | }; 56 | 57 | return ( 58 | 63 | {renderData()} 64 | 65 | ); 66 | }; 67 | 68 | export default AvatarGroup; 69 | 70 | // ** PropTypes 71 | AvatarGroup.propTypes = { 72 | data: Proptypes.array.isRequired, 73 | tag: Proptypes.oneOfType([Proptypes.func, Proptypes.string]), 74 | }; 75 | -------------------------------------------------------------------------------- /src/@core/scss/base/components/divider.scss: -------------------------------------------------------------------------------- 1 | // Divider 2 | 3 | .divider { 4 | display: block; 5 | text-align: center; 6 | overflow: hidden; 7 | white-space: nowrap; 8 | margin: 1rem 0; 9 | 10 | // divider text display prop 11 | 12 | .divider-text { 13 | position: relative; 14 | display: inline-block; 15 | font-size: 0.9375rem; 16 | padding: 0 1rem; 17 | 18 | // divider icon font size 19 | 20 | i, 21 | svg { 22 | height: 1rem; 23 | width: 1rem; 24 | font-size: 1rem; 25 | } 26 | 27 | // divider border 28 | 29 | &:before, 30 | &:after { 31 | content: ''; 32 | position: absolute; 33 | top: 50%; 34 | width: 9999px; 35 | border-top: 1px solid $border-color; 36 | } 37 | 38 | // divider spacing 39 | &:before { 40 | right: 100%; 41 | } 42 | 43 | &:after { 44 | left: 100%; 45 | } 46 | } 47 | 48 | // divider positions config 49 | 50 | &.divider-start { 51 | .divider-text { 52 | float: left; 53 | padding-left: 0; 54 | &:before { 55 | display: none; 56 | } 57 | } 58 | } 59 | &.divider-start-center { 60 | .divider-text { 61 | left: -25%; 62 | } 63 | } 64 | 65 | &.divider-end { 66 | .divider-text { 67 | float: right; 68 | padding-right: 0; 69 | &:after { 70 | display: none; 71 | } 72 | } 73 | } 74 | &.divider-end-center { 75 | .divider-text { 76 | right: -25%; 77 | } 78 | } 79 | 80 | // divider styles 81 | 82 | &.divider-dotted { 83 | .divider-text { 84 | &:before, 85 | &:after { 86 | border-style: dotted; 87 | border-width: 1px; 88 | border-top-width: 0; 89 | border-color: $border-color; 90 | } 91 | } 92 | } 93 | &.divider-dashed { 94 | .divider-text { 95 | &:before, 96 | &:after { 97 | border-style: dashed; 98 | border-width: 1px; 99 | border-top-width: 0; 100 | border-color: $border-color; 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/@core/layouts/components/menu/horizontal-menu/HorizontalNavMenuLink.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { NavLink } from "react-router-dom"; 3 | 4 | // ** Third Party Components 5 | import classnames from "classnames"; 6 | import { useTranslation } from "react-i18next"; 7 | 8 | const HorizontalNavMenuLink = ({ item, isChild, setMenuOpen }) => { 9 | // ** Conditional Link Tag, if item has newTab or externalLink props use     tag else use NavLink 10 | const LinkTag = item.externalLink ? "a" : NavLink; 11 | 12 | // ** Hooks 13 | const { t } = useTranslation(); 14 | 15 | const handleClick = () => { 16 | if (setMenuOpen) { 17 | setMenuOpen(false); 18 | } 19 | }; 20 | 21 | return ( 22 |
  • 28 | { 42 | const commonClass = "d-flex align-items-center"; 43 | if (isActive && !item.disabled && item.navLink !== "#") { 44 | if (isChild) { 45 | return `${commonClass} dropdown-item active`; 46 | } else { 47 | return `${commonClass} nav-link active`; 48 | } 49 | } else { 50 | if (isChild) { 51 | return `${commonClass} dropdown-item`; 52 | } else { 53 | return `${commonClass} nav-link`; 54 | } 55 | } 56 | }, 57 | })} 58 | /*eslint-enable */ 59 | > 60 | {item.icon} 61 | {t(item.title)} 62 | 63 |
    • 64 | ); 65 | }; 66 | 67 | export default HorizontalNavMenuLink; 68 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { Suspense, lazy } from "react"; 3 | import { createRoot } from "react-dom/client"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | 6 | // ** Redux Imports 7 | import { store } from "./redux/store"; 8 | import { Provider } from "react-redux"; 9 | 10 | // ** ThemeColors Context 11 | 12 | import { ThemeContext } from "./utility/context/ThemeColors"; 13 | 14 | // ** ThemeConfig 15 | import themeConfig from "./configs/themeConfig"; 16 | 17 | // ** Toast 18 | import { Toaster } from "react-hot-toast"; 19 | 20 | // ** i18n 21 | import './configs/i18n' 22 | 23 | // ** Spinner (Splash Screen) 24 | import Spinner from "./@core/components/spinner/Fallback-spinner"; 25 | 26 | // ** Ripple Button 27 | import "./@core/components/ripple-button"; 28 | 29 | // ** PrismJS 30 | import "prismjs"; 31 | import "prismjs/themes/prism-tomorrow.css"; 32 | import "prismjs/components/prism-jsx.min"; 33 | 34 | // ** React Perfect Scrollbar 35 | import "react-perfect-scrollbar/dist/css/styles.css"; 36 | 37 | // ** React Hot Toast Styles 38 | import "@styles/react/libs/react-hot-toasts/react-hot-toasts.scss"; 39 | 40 | // ** Core styles 41 | import "./@core/assets/fonts/feather/iconfont.css"; 42 | import "./@core/scss/core.scss"; 43 | import "./assets/scss/style.scss"; 44 | 45 | // ** Service Worker 46 | import * as serviceWorker from "./serviceWorker"; 47 | 48 | // ** Lazy load app 49 | const LazyApp = lazy(() => import("./App")); 50 | 51 | const container = document.getElementById("root"); 52 | const root = createRoot(container); 53 | 54 | root.render( 55 | 56 | 57 | }> 58 | 59 | 60 | 64 | 65 | 66 | 67 | 68 | ); 69 | 70 | // If you want your app to work offline and load faster, you can change 71 | // unregister() to register() below. Note this comes with some pitfalls. 72 | // Learn more about service workers: https://bit.ly/CRA-PWA 73 | serviceWorker.unregister(); 74 | -------------------------------------------------------------------------------- /src/@core/scss/base/bootstrap-extended/_list-group.scss: -------------------------------------------------------------------------------- 1 | /* =============================================================================================== 2 | File Name: list-group.scss 3 | Description: Contain list item, list group related extended SCSS. 4 | ---------------------------------------------------------------------------------------------- 5 | Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | Author: PIXINVENT 7 | Author URL: http://www.themeforest.net/user/pixinvent 8 | ================================================================================================*/ 9 | 10 | // Inline list style with pipeline separator 11 | 12 | ul.list-inline { 13 | li { 14 | display: inline-block; 15 | } 16 | // used in search page 17 | &.list-inline-pipe { 18 | > li + li:before { 19 | content: ' | '; 20 | padding-right: 2px; 21 | } 22 | } 23 | } 24 | 25 | // bootstrap list group 26 | .list-group { 27 | .list-group-item { 28 | line-height: 1.5; 29 | i, 30 | svg { 31 | position: relative; 32 | } 33 | } 34 | .list-group-item-action { 35 | &:focus { 36 | outline: 0; 37 | } 38 | &.active, 39 | &:active{ 40 | h1,h2,h3,h4,h5,h6{ 41 | color: $white; 42 | } 43 | } 44 | small { 45 | color: $text-muted !important; 46 | } 47 | } 48 | 49 | // List group with circle for pages like knowledge base 50 | &.list-group-circle { 51 | border: none; 52 | .list-group-item { 53 | border: none; 54 | position: relative; 55 | padding-left: 1.5rem; 56 | &:after { 57 | content: ' '; 58 | background-image: url(str-replace(str-replace($circle, 'currentColor', $body-color), '#', '%23')); 59 | background-repeat: no-repeat; 60 | background-position: center; 61 | color: $body-color; 62 | background-size: 10px; 63 | position: absolute; 64 | height: 10px; 65 | width: 10px; 66 | top: 1.15rem; 67 | left: 0; 68 | } 69 | &:hover { 70 | background-color: transparent; 71 | } 72 | } 73 | } 74 | } 75 | 76 | // for drag and drop border radius on selected 77 | .list-group-item.gu-mirror { 78 | border-radius: 0; 79 | } 80 | -------------------------------------------------------------------------------- /src/@core/layouts/components/menu/vertical-menu/VerticalMenuHeader.js: -------------------------------------------------------------------------------- 1 | // ** React Imports 2 | import { useEffect } from 'react' 3 | import { NavLink } from 'react-router-dom' 4 | 5 | // ** Icons Imports 6 | import { Disc, X, Circle } from 'react-feather' 7 | 8 | // ** Config 9 | import themeConfig from '@configs/themeConfig' 10 | 11 | // ** Utils 12 | import { getUserData, getHomeRouteForLoggedInUser } from '@utils' 13 | 14 | const VerticalMenuHeader = (props) => { 15 | // ** Props 16 | const { menuCollapsed, setMenuCollapsed, setMenuVisibility, setGroupOpen, menuHover } = props 17 | 18 | // ** Vars 19 | const user = getUserData() 20 | 21 | // ** Reset open group 22 | useEffect(() => { 23 | if (!menuHover && menuCollapsed) setGroupOpen([]) 24 | }, [menuHover, menuCollapsed]) 25 | 26 | // ** Menu toggler component 27 | const Toggler = () => { 28 | if (!menuCollapsed) { 29 | return ( 30 | setMenuCollapsed(true)} 35 | /> 36 | ) 37 | } else { 38 | return ( 39 | setMenuCollapsed(false)} 44 | /> 45 | ) 46 | } 47 | } 48 | 49 | return ( 50 |
    51 |
      52 |
    • 53 | 54 |

      55 | {themeConfig.app.appName} 56 |

      57 |       58 |
      • 59 |
    • 60 |
      61 | 62 | setMenuVisibility(false)} className='toggle-icon icon-x d-block d-xl-none' size={20} /> 63 |
      64 |
      • 65 |
    66 |
    67 | ) 68 | } 69 | 70 | export default VerticalMenuHeader 71 | -------------------------------------------------------------------------------- /src/views/pages/patients/view-tabs/PatientProcedures.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { useEffect, useState } from "react"; 3 | import { 4 | CardText, 5 | Card, 6 | } from "reactstrap"; 7 | import UILoader from "../../../../components/ui-loader"; 8 | import LoadingSpinner from "../../../../components/spinner/LoadingSpinner"; 9 | import VitalSignsCard from "../../vital_signs/VitalSignsCard"; 10 | import ProgressNoteCard from "../../progress_note/ProgressNoteCard"; 11 | import ProceduresCard from "../../procedures/ProceduresCard"; 12 | import PatientReferralCard from "../../referrals/PatientReferralCard"; 13 | import PatientTransferCard from "../../transfers/PatientTransferCard"; 14 | import PatientConsultNoteCard from "../../consult_notes/PatientConsultNoteCard"; 15 | import PatientPhysicianOrderCard from "../../physician_orders/PatientPhysicianOrderCard"; 16 | import PatientPrescriptionCard from "../../prescriptions/PatientPrescriptionCard"; 17 | import PatientAppointmentCard from "../../patient_appointments/PatientAppointmentCard"; 18 | import IctCard from "../../ict/IctCard"; 19 | 20 | const PatientProcedures = ({ patientId }) => { 21 | const [loading, setLoading] = useState(false); 22 | 23 | const Loader = () => { 24 | return ( 25 | <> 26 | 27 | Please Wait... 28 | 29 | ); 30 | }; 31 | 32 | return ( 33 | <> 34 | }> 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | ); 59 | } 60 | 61 | export default PatientProcedures; -------------------------------------------------------------------------------- /src/@core/components/statistics-card/index.js: -------------------------------------------------------------------------------- 1 | // ** Third Party Components 2 | import Proptypes from "prop-types"; 3 | import classnames from "classnames"; 4 | import Chart from "react-apexcharts"; 5 | 6 | // ** Reactstrap Imports 7 | import { Card, CardBody } from "reactstrap"; 8 | 9 | const StatisticsCards = (props) => { 10 | // ** Props 11 | const { 12 | className, 13 | hideChart, 14 | iconRight, 15 | iconBg, 16 | icon, 17 | stat, 18 | statTitle, 19 | options, 20 | series, 21 | type, 22 | height, 23 | } = props; 24 | 25 | return ( 26 | 27 | 39 |
    40 |
    45 |
    {icon}
    46 |
    47 |
    48 |
    49 |

    {stat}

    50 |

    {statTitle}

    51 |
    52 |     53 | {!hideChart && ( 54 | 60 | )} 61 |     62 | ); 63 | }; 64 | export default StatisticsCards; 65 | 66 | // ** PropTypes 67 | StatisticsCards.propTypes = { 68 | type: Proptypes.string, 69 | series: Proptypes.array, 70 | height: Proptypes.string, 71 | iconBg: Proptypes.string, 72 | options: Proptypes.object, 73 | hideChart: Proptypes.bool, 74 | iconRight: Proptypes.bool, 75 | className: Proptypes.string, 76 | icon: Proptypes.node.isRequired, 77 | stat: Proptypes.string.isRequired, 78 | statTitle: Proptypes.string.isRequired, 79 | }; 80 | -------------------------------------------------------------------------------- /src/@core/scss/base/components/_variables-dark.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // File Name: variables-dark.scss 3 | // Description: Custom dark theme variables 4 | // ---------------------------------------------------------------------------------------------- 5 | // Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template 6 | // Author: PIXINVENT 7 | // Author URL: http://www.themeforest.net/user/pixinvent 8 | // ================================================================================================ 9 | 10 | // ================================================================================================ 11 | // WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE. 12 | // THIS FILE WILL GET OVERWRITTEN WITH EACH VUEXY HTML TEMPLATE RELEASE. 13 | // TIP: 14 | // We suggest you to use this (assets/scss/variables/_variables-components.scss) file for overriding components variables. 15 | // ================================================================================================ 16 | 17 | //Body 18 | $theme-dark-body-bg: #161d31 !default; 19 | $theme-dark-body-color: #b4b7bd !default; 20 | $theme-dark-border-color: #3b4253 !default; 21 | $theme-dark-custom-control-border-color: #44405e !default; 22 | 23 | //Typography 24 | $theme-dark-headings-color: #d0d2d6 !default; 25 | $theme-dark-label-color: #d0d2d6 !default; 26 | $theme-dark-text-muted-color: #676d7d !default; 27 | 28 | //Card 29 | $theme-dark-card-bg: #283046 !default; 30 | $theme-dark-box-shadow: 0 4px 24px 0 rgba($black, 0.24); 31 | 32 | //Input 33 | $theme-dark-input-bg: #283046 !default; 34 | $theme-dark-input-placeholder-color: #676d7d !default; 35 | $theme-dark-input-border-color: #404656 !default; 36 | $theme-dark-input-disabled-bg: #24233a !default; 37 | $theme-dark-input-disabled-border-color: #444b60 !default; 38 | 39 | // Switch 40 | $theme-dark-switch-bg: #545a6a; 41 | $theme-dark-switch-bg-disabled: #1b2337; 42 | 43 | //Table 44 | $theme-dark-table-bg: #283046 !default; 45 | $theme-dark-table-header-bg: #343d55 !default; 46 | $theme-dark-table-row-bg: #283046 !default; 47 | $theme-dark-table-hover-bg: #242b3d !default; 48 | $theme-dark-table-striped-bg: #242b3d !default; 49 | 50 | $theme-dark-modal-header-bg: #161d31 !default; 51 | $theme-dark-pagination-bg: #242b3d !default; 52 | $theme-dark-chart-bg: #384056 !default; 53 | $theme-dark-widget-bg: #384056 !default; 54 | --------------------------------------------------------------------------------