├── .gitattributes ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── assets │ ├── img │ │ ├── menu.png │ │ ├── menu2.png │ │ ├── profile.jpg │ │ ├── profile2.jpg │ │ ├── profile3.jpg │ │ └── profile4.jpg │ ├── fonts │ │ ├── line-awesome.eot │ │ ├── line-awesome.ttf │ │ ├── line-awesome.woff │ │ └── line-awesome.woff2 │ ├── sass │ │ ├── ready │ │ │ ├── _outlinefocus.scss │ │ │ ├── _plugins.scss │ │ │ ├── components │ │ │ │ ├── _modals.scss │ │ │ │ ├── _navsearch.scss │ │ │ │ ├── _sliders.scss │ │ │ │ ├── _alerts.scss │ │ │ │ ├── _badges.scss │ │ │ │ ├── _maps.scss │ │ │ │ ├── _charts.scss │ │ │ │ ├── _navbars.scss │ │ │ │ ├── _navpills.scss │ │ │ │ ├── _paginations.scss │ │ │ │ ├── _dropdowns.scss │ │ │ │ ├── _tables.scss │ │ │ │ ├── _cards.scss │ │ │ │ ├── _buttons.scss │ │ │ │ └── _inputs.scss │ │ │ ├── _background.scss │ │ │ ├── _components.scss │ │ │ ├── _variables.scss │ │ │ ├── plugins │ │ │ │ ├── _toggle.scss │ │ │ │ ├── _jqueryui.scss │ │ │ │ └── _chartist.scss │ │ │ ├── _typography.scss │ │ │ ├── _responsive.scss │ │ │ └── _layouts.scss │ │ └── ready.scss │ ├── js │ │ ├── plugin │ │ │ ├── jquery-mapael │ │ │ │ └── maps │ │ │ │ │ └── README.txt │ │ │ ├── bootstrap-toggle │ │ │ │ └── bootstrap-toggle.min.js │ │ │ ├── chart-circle │ │ │ │ └── circles.min.js │ │ │ ├── chartist │ │ │ │ └── plugin │ │ │ │ │ └── chartist-plugin-tooltip.min.js │ │ │ ├── bootstrap-notify │ │ │ │ └── bootstrap-notify.min.js │ │ │ └── jquery-scrollbar │ │ │ │ └── jquery.scrollbar.min.js │ │ ├── ready.min.js │ │ ├── ready.js │ │ └── demo.js │ └── css │ │ └── demo.css ├── manifest.json └── index.html ├── src ├── setupTests.js ├── App.test.js ├── index.css ├── reportWebVitals.js ├── hooks │ └── useScript.js ├── index.js ├── firebase.js ├── App.css ├── components │ ├── layouts │ │ ├── AdminFooter.js │ │ ├── AdminSideBar.js │ │ └── AdminHeader.js │ ├── AddType.js │ ├── AddCategory.js │ ├── UpdateType.js │ ├── UpdateCategory.js │ ├── AdminLogin.js │ ├── MedicineTypes.js │ ├── MedicineCategory.js │ ├── AdminRegister.js │ ├── Inventory.js │ ├── AdminProfile.js │ ├── AddMedicine.js │ └── UpdateMedicine.js ├── App.js └── logo.svg ├── .gitignore ├── package.json └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | *.scss linguist-detectable=false 2 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/assets/img/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/img/menu.png -------------------------------------------------------------------------------- /public/assets/img/menu2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/img/menu2.png -------------------------------------------------------------------------------- /public/assets/img/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/img/profile.jpg -------------------------------------------------------------------------------- /public/assets/img/profile2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/img/profile2.jpg -------------------------------------------------------------------------------- /public/assets/img/profile3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/img/profile3.jpg -------------------------------------------------------------------------------- /public/assets/img/profile4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/img/profile4.jpg -------------------------------------------------------------------------------- /public/assets/fonts/line-awesome.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/fonts/line-awesome.eot -------------------------------------------------------------------------------- /public/assets/fonts/line-awesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/fonts/line-awesome.ttf -------------------------------------------------------------------------------- /public/assets/fonts/line-awesome.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/fonts/line-awesome.woff -------------------------------------------------------------------------------- /public/assets/fonts/line-awesome.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhavyajustchill/medicare-react/HEAD/public/assets/fonts/line-awesome.woff2 -------------------------------------------------------------------------------- /public/assets/sass/ready/_outlinefocus.scss: -------------------------------------------------------------------------------- 1 | *:focus { 2 | outline: 0 !important; 3 | -webkit-box-shadow: none !important; 4 | box-shadow: none !important; 5 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/_plugins.scss: -------------------------------------------------------------------------------- 1 | @import "plugins/chartist"; 2 | @import "plugins/jqueryui"; 3 | @import "plugins/jqueryscrollbar"; 4 | @import "plugins/toggle"; -------------------------------------------------------------------------------- /public/assets/js/plugin/jquery-mapael/maps/README.txt: -------------------------------------------------------------------------------- 1 | Additional maps are stored in the repository neveldo/mapael-maps 2 | 3 | Full link: https://github.com/neveldo/mapael-maps 4 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_modals.scss: -------------------------------------------------------------------------------- 1 | /* Modal */ 2 | 3 | .modal { 4 | .bg-default .modal-title, .bg-primary .modal-title, .bg-info .modal-title, .bg-success .modal-title, .bg-warning .modal-title, .bg-danger .modal-title { 5 | color: $white-color !important; 6 | } 7 | } 8 | 9 | .modal-content { 10 | border-radius: .4rem !important; 11 | border: 0 !important; 12 | } -------------------------------------------------------------------------------- /.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 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /public/assets/sass/ready/_background.scss: -------------------------------------------------------------------------------- 1 | /* Background */ 2 | 3 | .bg-default { 4 | background: $default-color !important; 5 | } 6 | 7 | .bg-primary { 8 | background: $primary-color !important; 9 | } 10 | 11 | .bg-info { 12 | background: $info-color !important; 13 | } 14 | 15 | .bg-success { 16 | background: $success-color !important; 17 | } 18 | 19 | .bg-warning { 20 | background: $warning-color !important; 21 | } 22 | 23 | .bg-danger { 24 | background: $danger-color !important; 25 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/_components.scss: -------------------------------------------------------------------------------- 1 | @import "components/cards"; 2 | @import "components/inputs"; 3 | @import "components/tables"; 4 | @import "components/navbars"; 5 | @import "components/navsearch"; 6 | @import "components/badges"; 7 | @import "components/dropdowns"; 8 | @import "components/charts"; 9 | @import "components/alerts"; 10 | @import "components/buttons"; 11 | @import "components/navpills"; 12 | @import "components/paginations"; 13 | @import "components/sliders"; 14 | @import "components/modals"; 15 | @import "components/maps"; -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_navsearch.scss: -------------------------------------------------------------------------------- 1 | /* Nav Search */ 2 | 3 | .nav-search { 4 | .input-group { 5 | border: 1px solid #eee; 6 | background: #eee; 7 | border-radius: 50px; 8 | &:hover, &:focus { 9 | border: 1px solid #ddd; 10 | } 11 | } 12 | .form-control { 13 | border: 0; 14 | background: $transparent-bg; 15 | font-size: 14px; 16 | } 17 | .input-group-text { 18 | border: 0; 19 | background: $transparent-bg; 20 | } 21 | .search-icon { 22 | font-size: 21px; 23 | color: #666; 24 | } 25 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_sliders.scss: -------------------------------------------------------------------------------- 1 | /* Slider */ 2 | 3 | .slider-default .ui-slider-range { 4 | background: $default-color; 5 | } 6 | 7 | .slider-primary .ui-slider-range { 8 | background: $primary-color; 9 | } 10 | 11 | .slider-info .ui-slider-range { 12 | background: $info-color; 13 | } 14 | 15 | .slider-success .ui-slider-range { 16 | background: $success-color; 17 | } 18 | 19 | .slider-warning .ui-slider-range { 20 | background: $warning-color; 21 | } 22 | 23 | .slider-danger .ui-slider-range { 24 | background: $danger-color; 25 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/_variables.scss: -------------------------------------------------------------------------------- 1 | //## For each of Bootstrap's buttons, define text, background and border color. 2 | 3 | $body-text-color: #575962; 4 | $white-color: #ffffff; 5 | $black-color: #333333; 6 | $transparent-bg : transparent; 7 | $default-color : #607D8B; 8 | $primary-color : #1D62F0; 9 | $info-color : #23CCEF; 10 | $success-color : #59d05d; 11 | $warning-color : #fbad4c; 12 | $danger-color : #ff646d; 13 | 14 | $font-weight-light : lighter; 15 | $font-weight-normal : 400; 16 | $font-weight-mediumbold : 500; 17 | $font-weight-bold : 600; 18 | $font-weight-extrabold : 800; -------------------------------------------------------------------------------- /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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/hooks/useScript.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | 3 | const useScript = (url, integrity, async = true, crossOrigin = "anonymous") => { 4 | useEffect(() => { 5 | const script = document.createElement("script"); 6 | script.src = url; 7 | script.async = async; 8 | 9 | if (integrity) { 10 | script.integrity = integrity; 11 | } 12 | 13 | script.crossOrigin = crossOrigin; 14 | document.body.appendChild(script); 15 | 16 | return () => { 17 | document.body.removeChild(script); 18 | }; 19 | }, [url, integrity, async, crossOrigin]); 20 | }; 21 | 22 | export default useScript; 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { BrowserRouter } from "react-router-dom"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById("root")); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | 20 | -------------------------------------------------------------------------------- /src/firebase.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app"; 2 | import { getAuth } from "firebase/auth"; 3 | import { getFirestore } from "firebase/firestore"; 4 | 5 | const firebaseConfig = { 6 | apiKey: "AIzaSyCfgEgJXgFVCNvEtMrGwq1Cz4brF2CNC7g", 7 | authDomain: "medicare-react-f4673.firebaseapp.com", 8 | projectId: "medicare-react-f4673", 9 | storageBucket: "medicare-react-f4673.appspot.com", 10 | messagingSenderId: "655234591254", 11 | appId: "1:655234591254:web:b7538f00826bbe3d6ce337", 12 | measurementId: "G-89KF8GPSWY", 13 | }; 14 | 15 | const app = initializeApp(firebaseConfig); 16 | const db = getFirestore(app); 17 | const auth = getAuth(); 18 | 19 | export { app, auth, db }; 20 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/assets/js/ready.min.js: -------------------------------------------------------------------------------- 1 | $(function(){$('[data-toggle="tooltip"]').tooltip()}),jQuery(document).ready(function(){jQuery(".scrollbar-inner").scrollbar()}),$(document).ready(function(){var t=!1,o=!1,e=0,a=0 2 | t||($toggle=$(".sidenav-toggler"),$toggle.click(function(){1==e?($("html").removeClass("nav_open"),$toggle.removeClass("toggled"),e=0):($("html").addClass("nav_open"),$toggle.addClass("toggled"),e=1)}),t=!0),o||($topbar=$(".topbar-toggler"),$topbar.click(function(){1==a?($("html").removeClass("topbar_open"),$topbar.removeClass("toggled"),a=0):($("html").addClass("topbar_open"),$topbar.addClass("toggled"),a=1)}),o=!0),$('[data-select="checkbox"]').change(function(){$target=$(this).attr("data-target"),$($target).prop("checked",$(this).prop("checked"))})}) -------------------------------------------------------------------------------- /src/components/layouts/AdminFooter.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function AdminFooter() { 4 | return ( 5 | <> 6 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /public/assets/sass/ready.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Ready Bootstrap Dashboard (Bootstrap 4) 5 | ========================================================= 6 | 7 | * Product Page: http://www.themekita.com/ 8 | * Copyright 2018 Theme Kita (http://www.themekita.com/) 9 | * Licensed under MIT () 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | @import "ready/variables"; 17 | @import "ready/background"; 18 | @import "ready/outlinefocus"; 19 | @import "ready/typography"; 20 | 21 | //plugins 22 | @import "ready/plugins"; 23 | 24 | //layouts 25 | @import "ready/layouts"; 26 | 27 | //icons 28 | @import "ready/line-awesome"; 29 | 30 | //components 31 | @import "ready/components"; 32 | 33 | //responsive 34 | @import "ready/responsive"; 35 | 36 | 37 | -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_alerts.scss: -------------------------------------------------------------------------------- 1 | /* Alert */ 2 | 3 | .alert { 4 | border: 0px; 5 | color: $white-color; 6 | position: relative; 7 | padding-left: 65px; 8 | [data-notify="icon"] { 9 | font-size: 30px; 10 | display: block; 11 | left: 15px; 12 | position: absolute; 13 | top: 50%; 14 | margin-top: -15px; 15 | } 16 | [data-notify="title"] { 17 | display: block; 18 | font-weight: bold; 19 | } 20 | [data-notify="message"] { 21 | font-size: 14px; 22 | } 23 | .close { 24 | background: rgba(255, 255, 255, 0.8); 25 | width: 25px; 26 | height: 25px; 27 | line-height: 25px; 28 | top: auto !important; 29 | border-radius: 50%; 30 | } 31 | } 32 | 33 | .alert-primary { 34 | background-color: $primary-color; 35 | } 36 | 37 | .alert-info { 38 | background-color: $info-color; 39 | } 40 | 41 | .alert-success { 42 | background-color: $success-color; 43 | } 44 | 45 | .alert-warning { 46 | background-color: $warning-color; 47 | } 48 | 49 | .alert-danger { 50 | background-color: $danger-color; 51 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "medicare", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "firebase": "^9.21.0", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-error-overlay": "^6.0.11", 13 | "react-router-dom": "^6.10.0", 14 | "react-scripts": "5.0.1", 15 | "web-vitals": "^2.1.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_badges.scss: -------------------------------------------------------------------------------- 1 | /* Badge */ 2 | 3 | .badge { 4 | border-radius: 50px; 5 | margin-left: auto; 6 | line-height: 1; 7 | padding: 6px 10px; 8 | vertical-align: middle; 9 | font-weight: 700; 10 | font-size: 11px; 11 | } 12 | 13 | .badge-count { 14 | border: 1px solid #ddd; 15 | } 16 | 17 | .badge-default { 18 | background: $default-color; 19 | color: $white-color !important; 20 | } 21 | 22 | .badge-primary { 23 | background: $primary-color; 24 | } 25 | 26 | .badge-info { 27 | background: $info-color; 28 | } 29 | 30 | .badge-success { 31 | background-color: $success-color; 32 | } 33 | 34 | .badge-warning { 35 | background: $warning-color; 36 | color: $white-color !important; 37 | } 38 | 39 | .badge-danger { 40 | background-color: $danger-color; 41 | } 42 | 43 | .dropdown-menu { 44 | border: 1px solid rgba(120, 130, 140, 0.13); 45 | border-radius: 0; 46 | box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important; 47 | -webkit-box-shadow: 0 !important; 48 | -moz-box-shadow: 0 !important; 49 | padding-bottom: 8px; 50 | margin-top: 0; 51 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_maps.scss: -------------------------------------------------------------------------------- 1 | /* For all zoom buttons */ 2 | 3 | .mapael { 4 | .map { 5 | position: relative; 6 | } 7 | .zoomButton { 8 | background-color: #292929; 9 | border: 1px solid #292929; 10 | color: $white-color; 11 | width: 15px; 12 | height: 15px; 13 | line-height: 12px; 14 | text-align: center; 15 | border-radius: 3px; 16 | cursor: pointer; 17 | position: absolute; 18 | top: 0; 19 | font-weight: bold; 20 | left: 10px; 21 | -webkit-user-select: none; 22 | -khtml-user-select: none; 23 | -moz-user-select: none; 24 | -o-user-select: none; 25 | user-select: none; 26 | } 27 | .zoomReset { 28 | top: 10px; 29 | } 30 | .zoomIn { 31 | top: 30px; 32 | } 33 | .zoomOut { 34 | top: 50px; 35 | } 36 | .mapTooltip { 37 | position: absolute; 38 | background-color: #474c4b; 39 | moz-opacity: 0.70; 40 | opacity: 0.70; 41 | filter: alpha(opacity = 70); 42 | border-radius: 10px; 43 | padding: 10px; 44 | z-index: 1000; 45 | max-width: 200px; 46 | display: none; 47 | color: $white-color; 48 | } 49 | } -------------------------------------------------------------------------------- /public/assets/js/ready.js: -------------------------------------------------------------------------------- 1 | 2 | $(function () { 3 | $('[data-toggle="tooltip"]').tooltip() 4 | }); 5 | 6 | jQuery(document).ready(function(){ 7 | jQuery('.scrollbar-inner').scrollbar(); 8 | }); 9 | 10 | $(document).ready(function(){ 11 | 12 | var toggle_sidebar = false, 13 | toggle_topbar = false, 14 | nav_open = 0, 15 | topbar_open = 0; 16 | 17 | if(!toggle_sidebar) { 18 | $toggle = $('.sidenav-toggler'); 19 | 20 | $toggle.click(function() { 21 | if (nav_open == 1){ 22 | $('html').removeClass('nav_open'); 23 | $toggle.removeClass('toggled'); 24 | nav_open = 0; 25 | } else { 26 | $('html').addClass('nav_open'); 27 | $toggle.addClass('toggled'); 28 | nav_open = 1; 29 | } 30 | }); 31 | toggle_sidebar = true; 32 | } 33 | 34 | if(!toggle_topbar) { 35 | $topbar = $('.topbar-toggler'); 36 | 37 | $topbar.click(function(){ 38 | if (topbar_open == 1) { 39 | $('html').removeClass('topbar_open'); 40 | $topbar.removeClass('toggled'); 41 | topbar_open = 0; 42 | } else { 43 | $('html').addClass('topbar_open'); 44 | $topbar.addClass('toggled'); 45 | topbar_open = 1; 46 | } 47 | }); 48 | toggle_topbar = true; 49 | } 50 | 51 | //select all 52 | $('[data-select="checkbox"]').change(function(){ 53 | $target = $(this).attr('data-target'); 54 | $($target).prop('checked', $(this).prop("checked")); 55 | }) 56 | 57 | }); -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_charts.scss: -------------------------------------------------------------------------------- 1 | /* Chart */ 2 | 3 | .caret { 4 | display: inline-block; 5 | width: 0; 6 | height: 0; 7 | margin-left: .255em; 8 | vertical-align: .255em; 9 | content: ""; 10 | border-top: .3em solid; 11 | border-right: .3em solid $transparent-bg; 12 | border-bottom: 0; 13 | border-left: .3em solid $transparent-bg; 14 | } 15 | 16 | .chart { 17 | margin: 30px 0 30px; 18 | position: relative; 19 | } 20 | 21 | .ct-chart-pie .ct-label, .ct-chart-donut .ct-label { 22 | fill: $white-color !important; 23 | color: $white-color !important; 24 | } 25 | 26 | .chart-circle { 27 | display: flex; 28 | justify-content: center; 29 | .circles-text { 30 | font-size: 28px !important; 31 | } 32 | } 33 | 34 | .color-box { 35 | width: 15px; 36 | height: 15px; 37 | border-radius: 2px; 38 | display: inline-block; 39 | float: left; 40 | padding-top: 3px; 41 | margin: 2px 5px 0 0; 42 | } 43 | 44 | .chart-pie { 45 | display: block; 46 | position: relative; 47 | width: 100%; 48 | &:before { 49 | display: block; 50 | float: left; 51 | content: ""; 52 | width: 0; 53 | height: 0; 54 | padding-bottom: 75%; 55 | } 56 | &:after { 57 | content: ""; 58 | display: table; 59 | clear: both; 60 | } 61 | svg { 62 | display: block; 63 | position: absolute; 64 | top: 0; 65 | left: 0; 66 | width: 100%; 67 | height: 100%; 68 | } 69 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_navbars.scss: -------------------------------------------------------------------------------- 1 | /* Navbar */ 2 | 3 | .navbar .navbar-nav .nav-item .nav-link { 4 | display: inline-block; 5 | vertical-align: middle; 6 | color: #666; 7 | line-height: 55px; 8 | letter-spacing: 0.04em; 9 | padding: 0 20px 0 0; 10 | position: relative; 11 | font-size: 14px; 12 | font-weight: $font-weight-mediumbold; 13 | text-align: center; 14 | i { 15 | font-size: 22px; 16 | width: 30px; 17 | vertical-align: middle; 18 | } 19 | } 20 | 21 | .navbar-expand-lg .navbar-nav .dropdown-menu { 22 | left: auto; 23 | right: 0; 24 | } 25 | 26 | .dropdown-item { 27 | font-size: 14px; 28 | } 29 | 30 | .navbar .navbar-nav .notification { 31 | position: absolute; 32 | background-color: $danger-color; 33 | text-align: center; 34 | border-radius: 10px; 35 | min-width: 17px; 36 | height: 17px; 37 | font-size: 11px; 38 | color: $white-color; 39 | font-weight: bold; 40 | line-height: 17px; 41 | top: 11px; 42 | right: 12px; 43 | } 44 | 45 | .navbar-header { 46 | padding: 0px 15px; 47 | .dropdown-toggle { 48 | line-height: 55px; 49 | &::after { 50 | margin-left: 0; 51 | } 52 | } 53 | } 54 | 55 | .profile-pic { 56 | &:hover, &:focus { 57 | text-decoration: none; 58 | } 59 | } 60 | 61 | .navbar-header .dropdown-toggle::after { 62 | vertical-align: middle; 63 | color: #555; 64 | } 65 | 66 | .hidden-caret .dropdown-toggle::after { 67 | display: none !important; 68 | } 69 | 70 | .profile-pic { 71 | .img-circle { 72 | border-radius: 50%; 73 | } 74 | span { 75 | font-size: 14px; 76 | font-weight: $font-weight-bold; 77 | padding: 0 10px; 78 | color: #555; 79 | } 80 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_navpills.scss: -------------------------------------------------------------------------------- 1 | /* Nav Pill */ 2 | 3 | .nav-pills > li { 4 | &:first-child > a { 5 | border-radius: 4px 0 0 4px !important; 6 | } 7 | &:last-child > a { 8 | border-radius: 0 4px 4px 0 !important; 9 | } 10 | } 11 | 12 | .nav-link.disabled { 13 | color: #6c757d !important; 14 | } 15 | 16 | .nav-pills { 17 | > li > a { 18 | margin-left: -1px; 19 | border-radius: 0 !important; 20 | &.active { 21 | background: $primary-color; 22 | } 23 | border: 1px solid $primary-color; 24 | color: $primary-color; 25 | &:hover { 26 | background: #fafafa; 27 | } 28 | } 29 | &.nav-default > li > a { 30 | &.active { 31 | background: $default-color; 32 | } 33 | border: 1px solid $default-color; 34 | color: $default-color; 35 | } 36 | &.nav-primary > li > a { 37 | &.active { 38 | background: $primary-color; 39 | } 40 | border: 1px solid $primary-color; 41 | color: $primary-color; 42 | } 43 | &.nav-info > li > a { 44 | &.active { 45 | background: $info-color; 46 | } 47 | border: 1px solid $info-color; 48 | color: $info-color; 49 | } 50 | &.nav-success > li > a { 51 | &.active { 52 | background: $success-color; 53 | } 54 | border: 1px solid $success-color; 55 | color: $success-color; 56 | } 57 | &.nav-warning > li > a { 58 | &.active { 59 | background: $warning-color; 60 | } 61 | border: 1px solid $warning-color; 62 | color: $warning-color; 63 | } 64 | &.nav-danger > li > a { 65 | &.active { 66 | background: $danger-color; 67 | } 68 | border: 1px solid $danger-color; 69 | color: $danger-color; 70 | } 71 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_paginations.scss: -------------------------------------------------------------------------------- 1 | /* Pagination */ 2 | 3 | .pagination { 4 | > li { 5 | > a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span { 6 | border-radius: 100px !important; 7 | margin: 0 2px; 8 | color: #777777; 9 | border-color: #ddd; 10 | } 11 | } 12 | &.pg-primary > li.active { 13 | > a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span { 14 | background: $primary-color; 15 | border-color: $primary-color; 16 | color: $white-color; 17 | } 18 | } 19 | &.pg-info > li.active { 20 | > a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span { 21 | background: $info-color; 22 | border-color: $info-color; 23 | color: $white-color; 24 | } 25 | } 26 | &.pg-success > li.active { 27 | > a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span { 28 | background: $success-color; 29 | border-color: $success-color; 30 | color: $white-color; 31 | } 32 | } 33 | &.pg-warning > li.active { 34 | > a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span { 35 | background: $warning-color; 36 | border-color: $warning-color; 37 | color: $white-color; 38 | } 39 | } 40 | &.pg-danger > li.active { 41 | > a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span { 42 | background: $danger-color; 43 | border-color: $danger-color; 44 | color: $white-color; 45 | } 46 | } 47 | &.pg-default > li.active { 48 | > a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span { 49 | background: $default-color; 50 | border-color: $default-color; 51 | color: $white-color; 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 4 | import Dashboard from "./components/Dashboard"; 5 | import AdminLogin from "./components/AdminLogin"; 6 | import AdminRegister from "./components/AdminRegister"; 7 | import AdminProfile from "./components/AdminProfile"; 8 | import MedicineCategory from "./components/MedicineCategory"; 9 | import AddCategory from "./components/AddCategory"; 10 | import UpdateCategory from "./components/UpdateCategory"; 11 | import MedicineTypes from "./components/MedicineTypes"; 12 | import AddType from "./components/AddType"; 13 | import UpdateType from "./components/UpdateType"; 14 | import Inventory from "./components/Inventory"; 15 | import AddMedicine from "./components/AddMedicine"; 16 | import UpdateMedicine from "./components/UpdateMedicine"; 17 | 18 | function App() { 19 | return ( 20 | 21 | 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | } /> 27 | } /> 28 | } /> 29 | } /> 30 | } /> 31 | } /> 32 | } /> 33 | } /> 34 | } /> 35 | 36 | 37 | ); 38 | } 39 | 40 | export default App; 41 | 42 | -------------------------------------------------------------------------------- /public/assets/sass/ready/plugins/_toggle.scss: -------------------------------------------------------------------------------- 1 | .checkbox label .toggle, .checkbox-inline .toggle { 2 | margin-left: -20px; 3 | margin-right: 5px; 4 | } 5 | 6 | .toggle { 7 | position: relative; 8 | overflow: hidden; 9 | } 10 | 11 | .toggle-group, .toggle-off, .toggle-on { 12 | position: absolute; 13 | top: 0; 14 | bottom: 0; 15 | } 16 | 17 | .toggle input[type=checkbox] { 18 | display: none; 19 | } 20 | 21 | .toggle-group { 22 | width: 200%; 23 | left: 0; 24 | transition: left .35s; 25 | -webkit-transition: left .35s; 26 | -moz-user-select: none; 27 | -webkit-user-select: none; 28 | } 29 | 30 | .toggle.off .toggle-group { 31 | left: -100%; 32 | } 33 | 34 | .toggle-on { 35 | left: 0; 36 | right: 50%; 37 | margin: 0; 38 | border: 0; 39 | border-radius: 0; 40 | } 41 | 42 | .toggle-off { 43 | left: 50%; 44 | right: 0; 45 | margin: 0; 46 | border: 0; 47 | border-radius: 0; 48 | } 49 | 50 | .toggle-handle { 51 | position: relative; 52 | margin: 0 auto; 53 | padding-top: 0; 54 | padding-bottom: 0; 55 | height: 100%; 56 | width: 0; 57 | border-width: 0 1px; 58 | } 59 | 60 | .toggle.btn { 61 | min-width: 59px; 62 | min-height: 34px; 63 | } 64 | 65 | .toggle-on.btn { 66 | padding-right: 24px; 67 | } 68 | 69 | .toggle-off.btn { 70 | padding-left: 24px; 71 | } 72 | 73 | .toggle.btn-lg { 74 | min-width: 79px; 75 | min-height: 45px; 76 | } 77 | 78 | .toggle-on.btn-lg { 79 | padding-right: 31px; 80 | } 81 | 82 | .toggle-off.btn-lg { 83 | padding-left: 31px; 84 | } 85 | 86 | .toggle-handle.btn-lg { 87 | width: 40px; 88 | } 89 | 90 | .toggle.btn-sm { 91 | min-width: 50px; 92 | min-height: 30px; 93 | } 94 | 95 | .toggle-on.btn-sm { 96 | padding-right: 20px; 97 | } 98 | 99 | .toggle-off.btn-sm { 100 | padding-left: 20px; 101 | } 102 | 103 | .toggle.btn-xs { 104 | min-width: 35px; 105 | min-height: 22px; 106 | } 107 | 108 | .toggle-on.btn-xs { 109 | padding-right: 12px; 110 | } 111 | 112 | .toggle-off.btn-xs { 113 | padding-left: 12px; 114 | } -------------------------------------------------------------------------------- /public/assets/css/demo.css: -------------------------------------------------------------------------------- 1 | .update-pro{ 2 | margin: 15px 25px;} 3 | 4 | .update-pro button { 5 | padding: 13px 25px; 6 | background: #4d7cfe; 7 | color: #fff; 8 | border-radius: 3px; 9 | justify-content: center; 10 | width: 100%; 11 | border: 0; 12 | cursor: pointer; 13 | } 14 | 15 | .update-pro button:hover { 16 | background: #4d7cfe !important; 17 | color: #fff; 18 | transform: translateY(-2px); 19 | transition: all .2s linear; 20 | } 21 | 22 | .update-pro:hover button:before{ 23 | display: none; 24 | } 25 | 26 | .update-pro button p, .update-pro button i{ 27 | color: #fff !important; 28 | margin-bottom: 0px; 29 | } 30 | 31 | .update-pro button i{ 32 | margin-right: 5px !important; 33 | font-size: 23px; 34 | color: #C3C5CA; 35 | margin-right: 15px; 36 | width: 25px; 37 | text-align: center; 38 | vertical-align: middle; 39 | float: left; 40 | } 41 | 42 | .demo .btn, .demo .progress{ 43 | margin-bottom: 15px !important; 44 | } 45 | 46 | .demo .form-check-label, .demo .form-radio-label{ 47 | margin-right: 15px; 48 | } 49 | 50 | .demo #slider{ 51 | margin-bottom: 15px; 52 | } 53 | 54 | .table-typo tbody > tr > td{ 55 | border-color: #fafafa; 56 | } 57 | 58 | .table-typo tbody > tr > td:first-child{ 59 | min-width: 200px; 60 | vertical-align: bottom; 61 | } 62 | 63 | .table-typo tbody > tr > td:first-child p{ 64 | font-size: 14px; 65 | color: #333; 66 | } 67 | 68 | .demo-icon { 69 | display: flex; 70 | flex-direction: row; 71 | align-items: center; 72 | margin-bottom: 20px; 73 | padding: 10px; 74 | transition: all .2s; 75 | } 76 | 77 | .demo-icon:hover{ 78 | background-color: #f4f5f8; 79 | border-radius: 3px; 80 | } 81 | 82 | .demo-icon .icon-preview{ 83 | font-size: 1.8rem; 84 | margin-right: 10px; 85 | line-height: 1; 86 | color: #333439; 87 | } 88 | 89 | .demo-icon .icon-class{ 90 | font-weight: 300; 91 | font-size: 13px; 92 | color: #777; 93 | } 94 | 95 | .from-show-notify .form-control{ 96 | margin-bottom: 15px; 97 | } 98 | 99 | .from-show-notify label{ 100 | padding-top: 0.65rem; 101 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Typography */ 2 | 3 | body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, .alert, a, .td-name, td, button.close { 4 | -moz-osx-font-smoothing: grayscale; 5 | -webkit-font-smoothing: antialiased; 6 | font-family: 'nunito', sans-serif; 7 | } 8 | 9 | body { 10 | font-size: 14px; 11 | color: $body-text-color; 12 | } 13 | 14 | h1, .h1 { 15 | font-size: 59px; 16 | } 17 | 18 | h2, .h2 { 19 | font-size: 43px; 20 | } 21 | 22 | h3, .h3 { 23 | font-size: 35px; 24 | margin: 20px 0 10px; 25 | } 26 | 27 | h4, .h4 { 28 | font-size: 28px; 29 | line-height: 30px; 30 | } 31 | 32 | h5, .h5 { 33 | font-size: 25px; 34 | margin-bottom: 15px; 35 | } 36 | 37 | h6, .h6 { 38 | font-size: 18px; 39 | font-weight: $font-weight-bold; 40 | } 41 | 42 | p { 43 | font-size: 15px; 44 | line-height: 1.5; 45 | margin-bottom: .7rem; 46 | } 47 | 48 | h4.page-title { 49 | font-size: 22px; 50 | font-weight: $font-weight-bold; 51 | color: $black-color; 52 | line-height: 30px; 53 | margin-bottom: 20px; 54 | } 55 | 56 | .text-primary { 57 | color: $primary-color !important; 58 | &:hover { 59 | color: $primary-color !important; 60 | } 61 | } 62 | 63 | .text-info { 64 | color: $info-color !important; 65 | &:hover { 66 | color: $info-color !important; 67 | } 68 | } 69 | 70 | .text-success { 71 | color: $success-color !important; 72 | &:hover { 73 | color: $success-color !important; 74 | } 75 | } 76 | 77 | .text-warning { 78 | color: $warning-color !important; 79 | &:hover { 80 | color: $warning-color !important; 81 | } 82 | } 83 | 84 | .text-danger { 85 | color: $danger-color !important; 86 | &:hover { 87 | color: $danger-color !important; 88 | } 89 | } 90 | 91 | label { 92 | color: #3f4047 !important; 93 | font-size: 14px !important; 94 | } 95 | 96 | /* Font-weight */ 97 | 98 | .fw-light { 99 | font-weight: $font-weight-light !important; 100 | } 101 | 102 | .fw-normal { 103 | font-weight: $font-weight-normal !important; 104 | } 105 | 106 | .fw-mediumbold { 107 | font-weight: $font-weight-mediumbold !important; 108 | } 109 | 110 | .fw-bold { 111 | font-weight: $font-weight-bold !important; 112 | } 113 | 114 | .fw-extrabold { 115 | font-weight: $font-weight-extrabold !important; 116 | } -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/layouts/AdminSideBar.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | import { auth } from "../../firebase"; 4 | import { signOut } from "firebase/auth"; 5 | 6 | export default function AdminSideBar(props) { 7 | const [userName, setUserName] = useState(""); 8 | const navigate = useNavigate(); 9 | useEffect(() => { 10 | auth.onAuthStateChanged((user) => { 11 | if (user) { 12 | setUserName(user.displayName); 13 | } 14 | }); 15 | }, []); 16 | const handleLogout = () => { 17 | signOut(auth) 18 | .then(() => { 19 | navigate("/login", { replace: true }); 20 | }) 21 | .then((err) => { 22 | console.log(err); 23 | }); 24 | }; 25 | return ( 26 | <> 27 |
28 |
29 |
30 |
31 | 32 |
33 |
34 | 35 | 36 | {userName != "" ? userName : "Username"} 37 | Administrator 38 | 39 | 40 |
41 |
42 |
    43 |
  • 44 | 45 | 46 |

    Dashboard

    47 | 48 |
  • 49 |
  • 50 | 51 | 52 |

    Inventory

    53 | 54 |
  • 55 |
  • 56 | 57 | 58 |

    Medicine Catgories

    59 | 60 |
  • 61 |
  • 62 | 63 | 64 |

    Medicine Types

    65 | 66 |
  • 67 |
  • 68 | 69 | 70 |

    Profile

    71 | 72 |
  • 73 |
  • 74 | 75 | 76 |

    Logout

    77 | 78 |
  • 79 |
80 |
81 |
82 | 83 | ); 84 | } 85 | -------------------------------------------------------------------------------- /src/components/AddType.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useNavigate, Link } from "react-router-dom"; 3 | import AdminHeader from "./layouts/AdminHeader"; 4 | import AdminSideBar from "./layouts/AdminSideBar"; 5 | import AdminFooter from "./layouts/AdminFooter"; 6 | import { db } from "../firebase"; 7 | import { collection, addDoc } from "firebase/firestore"; 8 | 9 | export default function AddType() { 10 | const navigate = useNavigate(); 11 | const medTypesCollectionRef = collection(db, "medicine_types"); 12 | const [errorMsg, setErrorMsg] = useState(""); 13 | const [successMsg, setSuccessMsg] = useState(""); 14 | const [medTypeName, setMedTypeName] = useState(""); 15 | const handleAddType = async () => { 16 | if (medTypeName) { 17 | setErrorMsg(""); 18 | await addDoc(medTypesCollectionRef, { name: medTypeName }); 19 | setSuccessMsg("Medicine Type added successfully!"); 20 | setTimeout(() => { 21 | setSuccessMsg(""); 22 | navigate("/types"); 23 | }, 1000); 24 | } else { 25 | setErrorMsg("Medicine Type name required!"); 26 | } 27 | }; 28 | return ( 29 | <> 30 | 31 | 32 |
33 |
34 |
35 |

Create Type

36 |
37 |
38 |
39 |
40 |
41 | New Type Details 42 | 43 | Go BACK 44 | {" "} 45 |
46 |
47 |
48 |
49 | 50 | { 56 | setMedTypeName(event.target.value); 57 | }} 58 | placeholder="Enter Type Name" 59 | /> 60 |
61 |
62 |
63 |
{errorMsg}
64 |
{successMsg}
65 | 68 |
69 |
70 |
71 |
72 |
73 |
74 | 75 | 76 |
77 | 78 | ); 79 | } 80 | -------------------------------------------------------------------------------- /src/components/AddCategory.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { useNavigate, Link } from "react-router-dom"; 3 | import AdminHeader from "./layouts/AdminHeader"; 4 | import AdminSideBar from "./layouts/AdminSideBar"; 5 | import AdminFooter from "./layouts/AdminFooter"; 6 | import { db } from "../firebase"; 7 | import { collection, addDoc } from "firebase/firestore"; 8 | 9 | export default function AddCategory() { 10 | const navigate = useNavigate(); 11 | 12 | const categoryCollectionRef = collection(db, "medicine_categories"); 13 | const [errorMsg, setErrorMsg] = useState(""); 14 | const [successMsg, setSuccessMsg] = useState(""); 15 | const [catName, setCatName] = useState(""); 16 | const handleAddCategory = async () => { 17 | if (catName) { 18 | setErrorMsg(""); 19 | await addDoc(categoryCollectionRef, { name: catName }); 20 | setSuccessMsg("Category added successfully!"); 21 | setTimeout(() => { 22 | setSuccessMsg(""); 23 | navigate("/categories"); 24 | }, 1000); 25 | } else { 26 | setErrorMsg("Category name required!"); 27 | } 28 | }; 29 | return ( 30 | <> 31 | 32 | 33 |
34 |
35 |
36 |

Create Category

37 |
38 |
39 |
40 |
41 |
42 | New Category Details 43 | 44 | Go BACK 45 | {" "} 46 |
47 |
48 |
49 |
50 | 51 | { 57 | setCatName(event.target.value); 58 | }} 59 | placeholder="Enter Category Name" 60 | /> 61 |
62 |
63 |
64 |
{errorMsg}
65 |
{successMsg}
66 | 69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 | 77 |
78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /src/components/UpdateType.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useNavigate, Link } from "react-router-dom"; 3 | import AdminHeader from "./layouts/AdminHeader"; 4 | import AdminSideBar from "./layouts/AdminSideBar"; 5 | import AdminFooter from "./layouts/AdminFooter"; 6 | import { db } from "../firebase"; 7 | import { collection, doc, updateDoc } from "firebase/firestore"; 8 | 9 | export default function UpdateType() { 10 | const navigate = useNavigate(); 11 | const medTypesCollectionRef = collection(db, "medicine_types"); 12 | const [medType, setMedType] = useState(JSON.parse(localStorage.getItem("medtype_obj"))); 13 | 14 | const [errorMsg, setErrorMsg] = useState(""); 15 | const [successMsg, setSuccessMsg] = useState(""); 16 | const handleUpdateMedType = async () => { 17 | if (medType.name) { 18 | const categoryDoc = doc(medTypesCollectionRef, medType.id); 19 | await updateDoc(categoryDoc, medType); 20 | setErrorMsg(""); 21 | setSuccessMsg("Medicine Type updated Successfully!"); 22 | setTimeout(() => { 23 | setSuccessMsg(""); 24 | navigate("/types"); 25 | }, 1000); 26 | } else { 27 | setErrorMsg("Medicine Type name cannot be Empty!"); 28 | } 29 | }; 30 | return ( 31 | <> 32 | 33 | 34 |
35 |
36 |
37 |

Change Medicine Type

38 |
39 |
40 |
41 |
42 |
43 | Edit Type Details 44 | 45 | Go BACK 46 | {" "} 47 |
48 |
49 |
50 |
51 | 52 | 58 | setMedType((prev) => ({ ...prev, name: event.target.value })) 59 | } 60 | placeholder="Enter Type Name" 61 | /> 62 |
63 |
64 |
65 |
{errorMsg}
66 |
{successMsg}
67 | 70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 |
79 | 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /src/components/UpdateCategory.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useNavigate, Link } from "react-router-dom"; 3 | import AdminHeader from "./layouts/AdminHeader"; 4 | import AdminSideBar from "./layouts/AdminSideBar"; 5 | import AdminFooter from "./layouts/AdminFooter"; 6 | import { db } from "../firebase"; 7 | import { collection, doc, updateDoc } from "firebase/firestore"; 8 | 9 | export default function UpdateCategory() { 10 | const navigate = useNavigate(); 11 | const categoryCollectionRef = collection(db, "medicine_categories"); 12 | const [category, setCategory] = useState(JSON.parse(localStorage.getItem("category_obj"))); 13 | 14 | const [errorMsg, setErrorMsg] = useState(""); 15 | const [successMsg, setSuccessMsg] = useState(""); 16 | const handleUpdateCategory = async () => { 17 | if (category.name) { 18 | const categoryDoc = doc(categoryCollectionRef, category.id); 19 | await updateDoc(categoryDoc, category); 20 | setErrorMsg(""); 21 | setSuccessMsg("Category updated successfully!"); 22 | setTimeout(() => { 23 | setSuccessMsg(""); 24 | navigate("/categories"); 25 | }, 1000); 26 | } else { 27 | setErrorMsg("Category name cannot be Empty!"); 28 | } 29 | }; 30 | return ( 31 | <> 32 | 33 | 34 |
35 |
36 |
37 |

Change Category

38 |
39 |
40 |
41 |
42 |
43 | Edit Category Details 44 | 45 | Go BACK 46 | {" "} 47 |
48 |
49 |
50 |
51 | 52 | 58 | setCategory((prev) => ({ ...prev, name: event.target.value })) 59 | } 60 | placeholder="Enter Category Name" 61 | /> 62 |
63 |
64 |
65 |
{errorMsg}
66 |
{successMsg}
67 | 70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 |
79 | 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /src/components/AdminLogin.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | import { auth } from "../firebase"; 4 | import { signInWithEmailAndPassword } from "firebase/auth"; 5 | 6 | export default function AdminLogin() { 7 | const navigate = useNavigate(); 8 | useEffect(() => { 9 | auth.onAuthStateChanged((user) => { 10 | if (user) { 11 | navigate("/"); 12 | } 13 | }); 14 | }, []); 15 | const [values, setValues] = useState({ 16 | email: "", 17 | password: "", 18 | }); 19 | const [errorMsg, setErrorMsg] = useState(""); 20 | 21 | const handleSubmitButton = () => { 22 | if (values.email && values.password) { 23 | setErrorMsg(""); 24 | signInWithEmailAndPassword(auth, values.email, values.password) 25 | .then((response) => { 26 | const user = response.user; 27 | if (user) { 28 | navigate("/"); 29 | } 30 | }) 31 | .catch((err) => { 32 | setErrorMsg(err.message); 33 | }); 34 | } else { 35 | setErrorMsg("Please fill all the required fields!"); 36 | } 37 | }; 38 | 39 | return ( 40 | <> 41 |
42 |
43 |
44 |
45 |

MediCare

46 |

Welcome Back!

47 |
48 |
49 |
50 |
51 |
52 | 53 | { 56 | setValues((prev) => ({ ...prev, email: event.target.value })); 57 | }} 58 | className="form-control" 59 | id="exampleInputEmail1" 60 | aria-describedby="emailHelp" 61 | placeholder="Email Address" 62 | /> 63 |
64 |
65 | 66 | { 68 | setValues((prev) => ({ ...prev, password: event.target.value })); 69 | }} 70 | type="password" 71 | className="form-control" 72 | id="exampleInputPassword1" 73 | placeholder="Password" 74 | /> 75 |
76 |
{errorMsg}
77 |
78 | 85 |
86 |
87 | Don't have an account? Register here!
88 |
89 |
90 |
91 |
92 |
93 | 94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_dropdowns.scss: -------------------------------------------------------------------------------- 1 | /* Notification dropdown */ 2 | 3 | .dropdown-title { 4 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 5 | color: #263238; 6 | font-size: 15px; 7 | font-weight: $font-weight-extrabold; 8 | padding: 5px 20px 10px; 9 | text-align: center; 10 | } 11 | 12 | .notif-box { 13 | width: 280px; 14 | padding-bottom: 0px; 15 | .notif-center a { 16 | display: flex; 17 | border-bottom: 1px solid #eaeaea; 18 | color: #4d585f; 19 | &:hover { 20 | text-decoration: none; 21 | background: #fafafa; 22 | transition: all .2s; 23 | } 24 | .notif-icon { 25 | display: inline-flex; 26 | width: 40px; 27 | height: 40px; 28 | margin: 10px; 29 | align-items: center; 30 | justify-content: center; 31 | background: #eee; 32 | border-radius: 50%; 33 | } 34 | .notif-img { 35 | display: inline-flex; 36 | width: 40px; 37 | height: 40px; 38 | margin: 10px; 39 | align-items: center; 40 | justify-content: center; 41 | background: #eee; 42 | border-radius: 50%; 43 | img { 44 | width: 100%; 45 | height: 100%; 46 | border-radius: 50%; 47 | } 48 | } 49 | .notif-icon { 50 | &.notif-default, &.notif-primary, &.notif-info, &.notif-success, &.notif-warning, &.notif-danger { 51 | color: $white-color !important; 52 | } 53 | &.notif-default { 54 | background: $default-color !important; 55 | } 56 | &.notif-primary { 57 | background: $primary-color !important; 58 | } 59 | &.notif-info { 60 | background: $info-color !important; 61 | } 62 | &.notif-success { 63 | background: $success-color !important; 64 | } 65 | &.notif-warning { 66 | background: $warning-color !important; 67 | } 68 | &.notif-danger { 69 | background: $danger-color !important; 70 | } 71 | i { 72 | font-size: 21px; 73 | } 74 | } 75 | .notif-content { 76 | padding: 10px 15px 10px 0; 77 | .block { 78 | font-size: 14px; 79 | line-height: 20px; 80 | display: block; 81 | } 82 | .time { 83 | color: #7d8c95; 84 | font-size: 12px; 85 | } 86 | } 87 | } 88 | .see-all { 89 | display: flex; 90 | align-items: center; 91 | justify-content: space-between; 92 | padding: 10px 20px; 93 | color: #555; 94 | font-size: 15px; 95 | font-weight: $font-weight-normal; 96 | text-decoration: none; 97 | &:hover { 98 | display: flex; 99 | align-items: center; 100 | justify-content: space-between; 101 | padding: 10px 20px; 102 | color: #555; 103 | font-size: 15px; 104 | font-weight: $font-weight-normal; 105 | text-decoration: none; 106 | } 107 | i { 108 | float: right; 109 | } 110 | } 111 | } 112 | 113 | /* User Dropdown */ 114 | 115 | .dropdown-user { 116 | width: 280px; 117 | } 118 | 119 | .user-box { 120 | display: flex; 121 | padding: .25rem 1rem; 122 | .u-img { 123 | width: 80px; 124 | img { 125 | width: 100%; 126 | border-radius: 5px; 127 | } 128 | } 129 | .u-text { 130 | padding: 0 10px; 131 | h4 { 132 | margin-bottom: 0; 133 | font-size: 18px; 134 | } 135 | .text-muted { 136 | font-size: 13px; 137 | margin-bottom: 5px; 138 | } 139 | .btn { 140 | font-size: 12px; 141 | } 142 | } 143 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 25 | 26 | 29 | 30 | 31 | MediCare 32 | 40 | 41 | 42 | 43 |
44 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /src/components/layouts/AdminHeader.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | import { auth } from "../../firebase"; 4 | import { signOut } from "firebase/auth"; 5 | 6 | export default function AdminHeader(props) { 7 | const [userName, setUserName] = useState(""); 8 | const [emailAddress, setEmailAddress] = useState(""); 9 | const navigate = useNavigate(); 10 | useEffect(() => { 11 | auth.onAuthStateChanged((user) => { 12 | if (!user) { 13 | navigate("/login"); 14 | } else { 15 | setUserName(user.displayName); 16 | setEmailAddress(user.email); 17 | } 18 | }); 19 | }, []); 20 | const [showDropDown, setShowDropDown] = useState(false); 21 | const handleLogout = () => { 22 | signOut(auth) 23 | .then(() => { 24 | navigate("/login", { replace: true }); 25 | }) 26 | .then((err) => { 27 | console.log(err); 28 | }); 29 | }; 30 | return ( 31 | <> 32 |
33 |
34 | 35 | MediCare 36 | 37 | 47 | 50 |
51 | 93 |
94 | 95 | ); 96 | } 97 | -------------------------------------------------------------------------------- /public/assets/sass/ready/_responsive.scss: -------------------------------------------------------------------------------- 1 | /* Responsive */ 2 | @media screen and (max-width: 700px) { 3 | .row-card-no-pd { 4 | [class*=col-] .card:after { 5 | width: 0px !important; 6 | } 7 | .card { 8 | border-bottom-width: 1px; 9 | &:last-child { 10 | border-bottom-width: 0px; 11 | } 12 | } 13 | } 14 | } 15 | 16 | @media screen and (min-width: 992px) { 17 | .main-header .logo-header { 18 | line-height: 52px; 19 | } 20 | .sidebar { 21 | .scroll-element { 22 | opacity: 0; 23 | transition: all .2s; 24 | } 25 | &:hover .scroll-element { 26 | opacity: 1; 27 | } 28 | } 29 | } 30 | 31 | @media screen and (max-width: 991px) { 32 | .sidebar { 33 | position: fixed; 34 | left: 0 !important; 35 | right: 0; 36 | -webkit-transform: translate3d(-270px, 0, 0); 37 | -moz-transform: translate3d(-270px, 0, 0); 38 | -o-transform: translate3d(-270px, 0, 0); 39 | -ms-transform: translate3d(-270px, 0, 0); 40 | transform: translate3d(-270px, 0, 0) !important; 41 | transition: all .5s; 42 | } 43 | .nav_open .sidebar { 44 | -webkit-transform: translate3d(0px, 0, 0); 45 | -moz-transform: translate3d(0px, 0, 0); 46 | -o-transform: translate3d(0px, 0, 0); 47 | -ms-transform: translate3d(0px, 0, 0); 48 | transform: translate3d(0px, 0, 0) !important; 49 | } 50 | .sidebar .sidebar-wrapper { 51 | padding-top: 0px; 52 | } 53 | .nav_open { 54 | overflow: hidden !important; 55 | .main-panel, .main-header { 56 | -webkit-transform: translate3d(260px, 0, 0); 57 | -moz-transform: translate3d(260px, 0, 0); 58 | -o-transform: translate3d(260px, 0, 0); 59 | -ms-transform: translate3d(260px, 0, 0); 60 | transform: translate3d(260px, 0, 0) !important; 61 | } 62 | } 63 | .main-header { 64 | transition: all .5s; 65 | } 66 | .main-panel { 67 | width: 100%; 68 | transition: all .5s; 69 | .content { 70 | padding: 30px 10px; 71 | } 72 | } 73 | .main-header .logo-header { 74 | display: flex; 75 | width: 100% !important; 76 | text-align: left; 77 | position: relative; 78 | justify-content: center; 79 | .navbar-toggler { 80 | position: absolute; 81 | top: auto; 82 | height: 100%; 83 | left: 15px; 84 | opacity: 1; 85 | } 86 | .more { 87 | opacity: 1; 88 | position: absolute; 89 | right: 15px; 90 | color: #545454; 91 | cursor: pointer; 92 | } 93 | } 94 | .nav-search { 95 | width: 100%; 96 | margin-right: 0 !important; 97 | margin-top: 12px; 98 | } 99 | .navbar-header { 100 | border-top: 1px solid #eee; 101 | position: absolute; 102 | width: 100%; 103 | background: $white-color; 104 | transform: translate3d(0, -200px, 0) !important; 105 | transition: all .5s; 106 | } 107 | .topbar_open { 108 | .navbar-header { 109 | transform: translate3d(0, 54px, 0) !important; 110 | border-bottom: 1px solid #eee; 111 | } 112 | .main-panel { 113 | transform: translate3d(0, 125px, 0) !important; 114 | } 115 | } 116 | .nav_open.topbar_open .main-panel { 117 | transform: translate3d(260px, 125px, 0) !important; 118 | } 119 | .navbar-header .navbar-nav { 120 | width: 100%; 121 | flex-direction: row; 122 | justify-content: center; 123 | margin-left: 0px !important; 124 | margin-top: 10px; 125 | margin-bottom: 10px; 126 | position: relative; 127 | .dropdown { 128 | position: unset; 129 | } 130 | .dropdown-menu { 131 | position: absolute; 132 | left: 0; 133 | right: 0; 134 | margin: 0 auto; 135 | max-width: 280px; 136 | } 137 | } 138 | .profile-pic span { 139 | display: none; 140 | } 141 | } -------------------------------------------------------------------------------- /public/assets/sass/ready/components/_tables.scss: -------------------------------------------------------------------------------- 1 | /* Table */ 2 | 3 | .table { 4 | color: #555 !important; 5 | > { 6 | thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td { 7 | vertical-align: middle; 8 | } 9 | tbody > tr > { 10 | td, th { 11 | padding: 8px; 12 | } 13 | } 14 | tfoot > tr > { 15 | td, th { 16 | padding: 8px; 17 | } 18 | } 19 | } 20 | thead th { 21 | color: #554; 22 | border-bottom-width: 2px; 23 | } 24 | td, th { 25 | font-size: 14px; 26 | border-color: #ebedf2 !important; 27 | padding: 0.75rem !important; 28 | } 29 | } 30 | 31 | /* table full-width */ 32 | 33 | .table-full-width { 34 | margin-left: -15px; 35 | margin-right: -15px; 36 | } 37 | 38 | /* table bordered states */ 39 | 40 | .table-bordered-bd-default { 41 | td, th { 42 | border: 1px solid $default-color !important; 43 | } 44 | } 45 | 46 | .table-bordered-bd-primary { 47 | td, th { 48 | border: 1px solid $primary-color !important; 49 | } 50 | } 51 | 52 | .table-bordered-bd-info { 53 | td, th { 54 | border: 1px solid $info-color !important; 55 | } 56 | } 57 | 58 | .table-bordered-bd-success { 59 | td, th { 60 | border: 1px solid $success-color !important; 61 | } 62 | } 63 | 64 | .table-bordered-bd-warning { 65 | td, th { 66 | border: 1px solid $warning-color !important; 67 | } 68 | } 69 | 70 | .table-bordered-bd-danger { 71 | td, th { 72 | border: 1px solid $danger-color !important; 73 | } 74 | } 75 | 76 | .table-striped { 77 | td, th { 78 | border-top: 0 !important; 79 | border-bottom: 0 !important; 80 | } 81 | } 82 | 83 | /* table head background states*/ 84 | 85 | .table-head-bg-default { 86 | border: 1px solid $default-color !important; 87 | } 88 | 89 | .table-head-bg-primary { 90 | border: 1px solid $primary-color !important; 91 | } 92 | 93 | .table-head-bg-info { 94 | border: 1px solid $info-color !important; 95 | } 96 | 97 | .table-head-bg-success { 98 | border: 1px solid $success-color !important; 99 | } 100 | 101 | .table-head-bg-warning { 102 | border: 1px solid $warning-color !important; 103 | } 104 | 105 | .table-head-bg-danger { 106 | border: 1px solid $danger-color !important; 107 | } 108 | 109 | .table-head-bg-default thead th, .table-striped-bg-default tbody tr:nth-of-type(odd) { 110 | background: $default-color !important; 111 | color: $white-color !important; 112 | border: 0px !important; 113 | } 114 | 115 | .table-head-bg-primary thead th, .table-striped-bg-primary tbody tr:nth-of-type(odd) { 116 | background: $primary-color !important; 117 | color: $white-color !important; 118 | border: 0px !important; 119 | } 120 | 121 | .table-head-bg-info thead th, .table-striped-bg-info tbody tr:nth-of-type(odd) { 122 | background: $info-color !important; 123 | color: $white-color !important; 124 | border: 0px !important; 125 | } 126 | 127 | .table-head-bg-success thead th, .table-striped-bg-success tbody tr:nth-of-type(odd) { 128 | background: $success-color !important; 129 | color: $white-color !important; 130 | border: 0px !important; 131 | } 132 | 133 | .table-head-bg-warning thead th, .table-striped-bg-warning tbody tr:nth-of-type(odd) { 134 | background: $warning-color !important; 135 | color: $white-color !important; 136 | border: 0px !important; 137 | } 138 | 139 | .table-head-bg-danger thead th, .table-striped-bg-danger tbody tr:nth-of-type(odd) { 140 | background: $danger-color !important; 141 | color: $white-color !important; 142 | border: 0px !important; 143 | } 144 | 145 | /* table-responsive */ 146 | 147 | .table-responsive { 148 | display: block; 149 | width: 100%; 150 | overflow-x: auto; 151 | -webkit-overflow-scrolling: touch; 152 | -ms-overflow-style: -ms-autohiding-scrollbar; 153 | } -------------------------------------------------------------------------------- /public/assets/js/demo.js: -------------------------------------------------------------------------------- 1 | Circles.create({ 2 | id: "task-complete", 3 | radius: 75, 4 | value: 80, 5 | maxValue: 100, 6 | width: 8, 7 | text: function (value) { 8 | return value + "%"; 9 | }, 10 | colors: ["#eee", "#1D62F0"], 11 | duration: 400, 12 | wrpClass: "circles-wrp", 13 | textClass: "circles-text", 14 | styleWrapper: true, 15 | styleText: true, 16 | }); 17 | 18 | // $.notify({ 19 | // icon: 'la la-bell', 20 | // title: 'Bootstrap notify', 21 | // message: 'Turning standard Bootstrap alerts into "notify" like notifications', 22 | // },{ 23 | // type: 'success', 24 | // placement: { 25 | // from: "bottom", 26 | // align: "right" 27 | // }, 28 | // time: 1000, 29 | // }); 30 | 31 | // monthlyChart 32 | 33 | Chartist.Pie( 34 | "#monthlyChart", 35 | { 36 | labels: ["50%", "20%", "30%"], 37 | series: [50, 20, 30], 38 | }, 39 | { 40 | plugins: [Chartist.plugins.tooltip()], 41 | } 42 | ); 43 | 44 | // trafficChart 45 | var chart = new Chartist.Line( 46 | "#trafficChart", 47 | { 48 | labels: [1, 2, 3, 4, 5, 6, 7], 49 | series: [ 50 | [5, 9, 7, 8, 5, 3, 5], 51 | [6, 9, 5, 10, 2, 3, 7], 52 | [2, 7, 4, 10, 7, 6, 2], 53 | ], 54 | }, 55 | { 56 | plugins: [Chartist.plugins.tooltip()], 57 | low: 0, 58 | height: "245px", 59 | } 60 | ); 61 | 62 | // salesChart 63 | var dataSales = { 64 | labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 65 | series: [ 66 | [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8], 67 | [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4], 68 | ], 69 | }; 70 | 71 | var optionChartSales = { 72 | plugins: [Chartist.plugins.tooltip()], 73 | seriesBarDistance: 10, 74 | axisX: { 75 | showGrid: false, 76 | }, 77 | height: "245px", 78 | }; 79 | 80 | var responsiveChartSales = [ 81 | [ 82 | "screen and (max-width: 640px)", 83 | { 84 | seriesBarDistance: 5, 85 | axisX: { 86 | labelInterpolationFnc: function (value) { 87 | return value[0]; 88 | }, 89 | }, 90 | }, 91 | ], 92 | ]; 93 | 94 | Chartist.Bar("#salesChart", dataSales, optionChartSales, responsiveChartSales); 95 | 96 | $(".mapcontainer").mapael({ 97 | map: { 98 | name: "world_countries", 99 | zoom: { 100 | enabled: true, 101 | maxLevel: 10, 102 | }, 103 | defaultPlot: { 104 | attrs: { 105 | fill: "#004a9b", 106 | opacity: 0.6, 107 | }, 108 | }, 109 | defaultArea: { 110 | attrs: { 111 | fill: "#e4e4e4", 112 | stroke: "#fafafa", 113 | }, 114 | attrsHover: { 115 | fill: "#59d05d", 116 | }, 117 | text: { 118 | attrs: { 119 | fill: "#505444", 120 | }, 121 | attrsHover: { 122 | fill: "#000", 123 | }, 124 | }, 125 | }, 126 | }, 127 | areas: { 128 | // "department-56": { 129 | // text: {content: "Morbihan", attrs: {"font-size": 10}}, 130 | // tooltip: {content: "Morbihan
Bretagne"} 131 | // }, 132 | ID: { 133 | tooltip: { content: "Indonesia
Tempat Lahir Beta" }, 134 | attrs: { 135 | fill: "#59d05d", 136 | }, 137 | attrsHover: { 138 | fill: "#59d05d", 139 | }, 140 | }, 141 | RU: { 142 | tooltip: { content: "Russia" }, 143 | attrs: { 144 | fill: "#59d05d", 145 | }, 146 | attrsHover: { 147 | fill: "#59d05d", 148 | }, 149 | }, 150 | US: { 151 | tooltip: { content: "United State" }, 152 | attrs: { 153 | fill: "#59d05d", 154 | }, 155 | attrsHover: { 156 | fill: "#59d05d", 157 | }, 158 | }, 159 | AU: { 160 | tooltip: { content: "Australia" }, 161 | attrs: { 162 | fill: "#59d05d", 163 | }, 164 | attrsHover: { 165 | fill: "#59d05d", 166 | }, 167 | }, 168 | }, 169 | }); 170 | -------------------------------------------------------------------------------- /public/assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js: -------------------------------------------------------------------------------- 1 | /*! ======================================================================== 2 | * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 3 | * http://www.bootstraptoggle.com 4 | * ======================================================================== 5 | * Copyright 2014 Min Hur, The New York Times Company 6 | * Licensed under MIT 7 | * ======================================================================== */ 8 | +function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('