├── .gitignore ├── .vscode └── settings.json ├── Medical Store management.postman_collection.json ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── screenshots ├── add_company1.PNG ├── add_company_bank.PNG ├── add_medicine.png ├── bill.png ├── bill_generate2.PNG ├── company_account.PNG ├── customer_request.PNG ├── edit_company.png ├── edit_company1.PNG ├── employee-medicine.png ├── employee.png ├── home.png ├── home1.PNG ├── login1.PNG ├── login1_page.PNG ├── medical_home.PNG ├── update_medicine.png ├── view_company.PNG └── view_medicine.png └── src ├── components ├── AutoCompleteMedicine.js ├── MainComponent.js ├── Navbar.js ├── Overlay.js ├── PageLoader.js └── Sidebar.js ├── index.js ├── pages ├── BillGenerateComponent.js ├── CompanyAccountComponent.js ├── CompanyAddBankComponent.js ├── CompanyComponent.js ├── CompanyDetailsComponent.js ├── CompanyEditBankComponent.js ├── CustomerRequestComponent.js ├── EmployeeComponent.js ├── EmployeeDetailsComponent.js ├── HomeComponent.js ├── Login.js ├── LogoutComponent.js ├── MedicineAddComponent.js └── MedicineManageComponent.js └── utils ├── APIHandler.js ├── AuthHandler.js ├── Config.js ├── PrivateRoute.js ├── PrivateRouteNew.js ├── canvasjs.min.js └── canvasjs.react.js /.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 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.fontSize": 18, 4 | "window.zoomLevel": 1 5 | } 6 | -------------------------------------------------------------------------------- /Medical Store management.postman_collection.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "_postman_id": "843085f2-8640-4ba8-b717-d6e5ca11fee4", 4 | "name": "Medical Store management", 5 | "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json" 6 | }, 7 | "item": [ 8 | { 9 | "name": "http://127.0.0.1:8000/api/medicine/18", 10 | "request": { 11 | "method": "GET", 12 | "header": [ 13 | { 14 | "key": "Authorization", 15 | "value": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNTk1NzgyNTAzLCJqdGkiOiJlMDgxY2M5NzBhZmY0MGUwYjQwYjM1OWJjZDY1N2ZiYyIsInVzZXJfaWQiOjF9.geJu3Om9ZCLDP_0KAFt6G7QO4TYp1vfCl76I2RTMFvs", 16 | "type": "text" 17 | } 18 | ], 19 | "url": { 20 | "raw": "http://127.0.0.1:8000/api/medicine/18", 21 | "protocol": "http", 22 | "host": [ 23 | "127", 24 | "0", 25 | "0", 26 | "1" 27 | ], 28 | "port": "8000", 29 | "path": [ 30 | "api", 31 | "medicine", 32 | "18" 33 | ] 34 | }, 35 | "description": "Medicine Single " 36 | }, 37 | "response": [] 38 | }, 39 | { 40 | "name": "http://127.0.0.1:8000/api/gettoken/", 41 | "request": { 42 | "method": "POST", 43 | "header": [ 44 | { 45 | "key": "Content-Type", 46 | "value": "application/json", 47 | "type": "text" 48 | } 49 | ], 50 | "body": { 51 | "mode": "raw", 52 | "raw": "{\"username\":\"admin\",\"password\":\"admin\"}" 53 | }, 54 | "url": { 55 | "raw": "http://127.0.0.1:8000/api/gettoken/", 56 | "protocol": "http", 57 | "host": [ 58 | "127", 59 | "0", 60 | "0", 61 | "1" 62 | ], 63 | "port": "8000", 64 | "path": [ 65 | "api", 66 | "gettoken", 67 | "" 68 | ] 69 | } 70 | }, 71 | "response": [] 72 | }, 73 | { 74 | "name": "http://127.0.0.1:8000/api/medicine/", 75 | "request": { 76 | "method": "POST", 77 | "header": [ 78 | { 79 | "key": "Content-Type", 80 | "value": "application/json", 81 | "type": "text" 82 | }, 83 | { 84 | "key": "Authorization", 85 | "value": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNTk1NzgyNTAzLCJqdGkiOiJlMDgxY2M5NzBhZmY0MGUwYjQwYjM1OWJjZDY1N2ZiYyIsInVzZXJfaWQiOjF9.geJu3Om9ZCLDP_0KAFt6G7QO4TYp1vfCl76I2RTMFvs", 86 | "type": "text" 87 | } 88 | ], 89 | "body": { 90 | "mode": "raw", 91 | "raw": "{\"name\":\"ABC MEDICINE\",\"medical_typ\":\"Tablet\",\"buy_price\":\"200\",\"sell_price\":\"300\",\"c_gst\":\"10\",\"s_gst\":\"10\",\"batch_no\":\"12345\",\"shelf_no\":\"12345\",\"expire_date\":\"2020-10-10\",\"mfg_date\":\"2020-05-05\",\"company_id\":\"2\",\"description\":\"Test Medicine\",\"in_stock_total\":\"100\",\"qty_in_strip\":\"10\",\"medicine_details\":[{\"salt_name\":\"SALT 1\",\"salt_qty\":\"20\",\"salt_qty_type\":\"MG\",\"description\":\"Salt 1 Description\"},{\"salt_name\":\"SALT 2\",\"salt_qty\":\"30\",\"salt_qty_type\":\"MG\",\"description\":\"Salt 2 Description\"}]}" 92 | }, 93 | "url": { 94 | "raw": "http://127.0.0.1:8000/api/medicine/", 95 | "protocol": "http", 96 | "host": [ 97 | "127", 98 | "0", 99 | "0", 100 | "1" 101 | ], 102 | "port": "8000", 103 | "path": [ 104 | "api", 105 | "medicine", 106 | "" 107 | ] 108 | } 109 | }, 110 | "response": [] 111 | }, 112 | { 113 | "name": "http://127.0.0.1:8000/api/companyonly/", 114 | "request": { 115 | "method": "GET", 116 | "header": [ 117 | { 118 | "key": "Authorization", 119 | "value": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjAwODQxMTMxLCJqdGkiOiIxODU0Yzc0N2JiNWI0YTFiODFmZWQzMjhkMmFkNjhkYiIsInVzZXJfaWQiOjF9.I_WTz9OoTuN98uPVkGq57gFWDFDpf07qtoNIXaey3-I", 120 | "type": "text" 121 | } 122 | ], 123 | "url": { 124 | "raw": "http://127.0.0.1:8000/api/companyaccount/", 125 | "protocol": "http", 126 | "host": [ 127 | "127", 128 | "0", 129 | "0", 130 | "1" 131 | ], 132 | "port": "8000", 133 | "path": [ 134 | "api", 135 | "companyaccount", 136 | "" 137 | ] 138 | } 139 | }, 140 | "response": [] 141 | }, 142 | { 143 | "name": "http://127.0.0.1:8000/api/company/2/", 144 | "protocolProfileBehavior": { 145 | "disableBodyPruning": true 146 | }, 147 | "request": { 148 | "method": "GET", 149 | "header": [ 150 | { 151 | "key": "Authorization", 152 | "value": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNTk5NDY0Njk2LCJqdGkiOiI2OThjMzMwZDNiNzk0MjFlOWRmM2I0NzliODRkOTYwOSIsInVzZXJfaWQiOjF9.kkjo23lce4a8qWE_eicgUZb5gpzJEU-SMp8VFnE7nT4", 153 | "type": "text" 154 | } 155 | ], 156 | "body": { 157 | "mode": "urlencoded", 158 | "urlencoded": [] 159 | }, 160 | "url": { 161 | "raw": "http://127.0.0.1:8000/api/company/2/", 162 | "protocol": "http", 163 | "host": [ 164 | "127", 165 | "0", 166 | "0", 167 | "1" 168 | ], 169 | "port": "8000", 170 | "path": [ 171 | "api", 172 | "company", 173 | "2", 174 | "" 175 | ] 176 | } 177 | }, 178 | "response": [] 179 | }, 180 | { 181 | "name": "http://127.0.0.1:8000/api/companyaccount/", 182 | "request": { 183 | "method": "GET", 184 | "header": [ 185 | { 186 | "key": "Authorization", 187 | "value": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjAwODQxMTMxLCJqdGkiOiIxODU0Yzc0N2JiNWI0YTFiODFmZWQzMjhkMmFkNjhkYiIsInVzZXJfaWQiOjF9.I_WTz9OoTuN98uPVkGq57gFWDFDpf07qtoNIXaey3-I", 188 | "type": "text" 189 | } 190 | ], 191 | "url": { 192 | "raw": "http://127.0.0.1:8000/api/companyaccount/", 193 | "protocol": "http", 194 | "host": [ 195 | "127", 196 | "0", 197 | "0", 198 | "1" 199 | ], 200 | "port": "8000", 201 | "path": [ 202 | "api", 203 | "companyaccount", 204 | "" 205 | ] 206 | }, 207 | "description": "Make Request for Company Account Data" 208 | }, 209 | "response": [] 210 | }, 211 | { 212 | "name": "http://127.0.0.1:8000/api/employee_bankby_id/1", 213 | "request": { 214 | "method": "GET", 215 | "header": [ 216 | { 217 | "key": "Authorization", 218 | "value": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjAxNzg4NjIzLCJqdGkiOiJjNjBhMWYzM2Q2MjU0YWZlODZlNTZiN2EzNzIyZDBjYiIsInVzZXJfaWQiOjF9.zz0bTj6wmJa1e4iKelZNPQFB5haIF0AXuCjD_m3A3Mk", 219 | "type": "text" 220 | } 221 | ], 222 | "url": { 223 | "raw": "http://127.0.0.1:8000/api/employee_bankby_id/1", 224 | "protocol": "http", 225 | "host": [ 226 | "127", 227 | "0", 228 | "0", 229 | "1" 230 | ], 231 | "port": "8000", 232 | "path": [ 233 | "api", 234 | "employee_bankby_id", 235 | "1" 236 | ] 237 | } 238 | }, 239 | "response": [] 240 | }, 241 | { 242 | "name": "http://127.0.0.1:8000/api/employee_salaryby_id/2", 243 | "request": { 244 | "method": "GET", 245 | "header": [ 246 | { 247 | "key": "Authorization", 248 | "value": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjAxNzk5MTQyLCJqdGkiOiI0MDIyOTc4MTE5Yzg0MzA3OWRhYjhmMTRiZGE1NTBmOCIsInVzZXJfaWQiOjF9.l0rT9iW7nnf7H63ae_CSUWJu7ilzOOnfUs9CFFwnV4M", 249 | "type": "text" 250 | } 251 | ], 252 | "url": { 253 | "raw": "http://127.0.0.1:8000/api/employee_salaryby_id/2", 254 | "protocol": "http", 255 | "host": [ 256 | "127", 257 | "0", 258 | "0", 259 | "1" 260 | ], 261 | "port": "8000", 262 | "path": [ 263 | "api", 264 | "employee_salaryby_id", 265 | "2" 266 | ] 267 | } 268 | }, 269 | "response": [] 270 | } 271 | ] 272 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | 4 | ## Live Project LINK 5 | https://pacific-falls-18076.herokuapp.com/ 6 | 7 | ## Login DETAILS 8 | 
USername : admin
9 | 
Password : admin
10 | 11 | For Deploy React APP in HEROKU 12 | 13 | ## Signup in HEROKU 14 | 
https://dashboard.heroku.com/apps
15 | 16 | ## Install React JS 17 | 
npm install -g create-react-app
18 | 19 | ## Create React APP 20 | 
create-react-app my-app
21 | 22 | ## Switch to React Project Directory 23 | 
cd my-app
24 | 25 | ## Intialize Git 26 | 
git init
27 | 28 | 29 | ## Download Heroku Login 30 | 
https://devcenter.heroku.com/articles/heroku-cli#download-and-install
31 | 32 | ## Login To Heroku 33 | 
heroku login
34 | 35 | ## Create Project in Heroku 36 | 
heroku create -b https://github.com/mars/create-react-app-buildpack.git
37 | 38 | ## Add File in Git 39 | 
git add .
40 | 41 | ## Commit File in git 42 | 
git commit -m "react-create-app on Heroku"
43 | 44 | ## Push Project to Heroku 45 | 
git push heroku master
46 | 47 | ## Open Project in URL 48 | 
heroku open
49 | 50 | ## ============PROJECT DETAILS============================= 51 | 52 | 53 | ## Available Scripts 54 | 55 | Install Package by Running Command: 56 | 57 | ### `npm install` 58 | 59 | In the project directory, you can run: 60 | 61 | ### `npm start` 62 | 63 | ### For Server Side Django Project Follow This Link. 64 | 65 | Django Medical Store management System Server Side API 66 | 67 | ## Login Page Added. 68 | 69 | 70 | 71 | ## Dashboard Page Added. 72 | 73 | 74 | 75 | ## Add Company Page Added. 76 | 77 | 78 | 79 | ## View Company Page Added. 80 | 81 | 82 | 83 | ## Edit and Update Company Page Added . 84 | 85 | 86 | 87 | ## Add Company Bank Page Added . 88 | 89 | 90 | 91 | ## Edit Company Bank Page Added . 92 | 93 | 94 | 95 | ## Added Add Medicine Page 96 | 97 | 98 | 99 | ## Added Manage Medicine Page 100 | 101 | 102 | 103 | ## Added Update Medicine Details 104 | 105 | 106 | 107 | ## Added Company Transaction Account 108 | 109 | 110 | 111 | ## Added Employee Manage 112 | 113 | 114 | 115 | ## Added Employee Manage Complete Edit Employee | Manage Salary and Manage Bank 116 | 117 | 118 | 119 | ## Added Bill Generate Form 120 | 121 | 122 | 123 | ## Added Bill Generate Print 124 | 125 | 126 | 127 | ## Added Customer Request Page 128 | 129 | 130 | 131 | ## Added Homepage Part 1 132 | 133 | 134 | 135 | ## Added Homepage Part 2 Charts 136 | 137 | 138 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactmedicalstorefrontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "adminbsb-materialdesign": "^1.0.7", 10 | "axios": "^0.19.2", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-google-font-loader": "^1.1.0", 14 | "react-router-dom": "^5.2.0", 15 | "react-scripts": "3.4.1", 16 | "react-to-pdf": "0.0.13", 17 | "reactjs-localstorage": "^1.0.1" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": "react-app" 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /screenshots/add_company1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/add_company1.PNG -------------------------------------------------------------------------------- /screenshots/add_company_bank.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/add_company_bank.PNG -------------------------------------------------------------------------------- /screenshots/add_medicine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/add_medicine.png -------------------------------------------------------------------------------- /screenshots/bill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/bill.png -------------------------------------------------------------------------------- /screenshots/bill_generate2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/bill_generate2.PNG -------------------------------------------------------------------------------- /screenshots/company_account.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/company_account.PNG -------------------------------------------------------------------------------- /screenshots/customer_request.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/customer_request.PNG -------------------------------------------------------------------------------- /screenshots/edit_company.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/edit_company.png -------------------------------------------------------------------------------- /screenshots/edit_company1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/edit_company1.PNG -------------------------------------------------------------------------------- /screenshots/employee-medicine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/employee-medicine.png -------------------------------------------------------------------------------- /screenshots/employee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/employee.png -------------------------------------------------------------------------------- /screenshots/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/home.png -------------------------------------------------------------------------------- /screenshots/home1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/home1.PNG -------------------------------------------------------------------------------- /screenshots/login1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/login1.PNG -------------------------------------------------------------------------------- /screenshots/login1_page.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/login1_page.PNG -------------------------------------------------------------------------------- /screenshots/medical_home.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/medical_home.PNG -------------------------------------------------------------------------------- /screenshots/update_medicine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/update_medicine.png -------------------------------------------------------------------------------- /screenshots/view_company.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/view_company.PNG -------------------------------------------------------------------------------- /screenshots/view_medicine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackstarsj/DjangoMedicalStoreFrontEndInReactJS/04c05ca479ad6142c47deb92f39d44671d407c6a/screenshots/view_medicine.png -------------------------------------------------------------------------------- /src/components/AutoCompleteMedicine.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import APIHandler from "../utils/APIHandler"; 3 | 4 | class AutoCompleteMedicine extends React.Component { 5 | state = { 6 | onFocus: false, 7 | datalist: [], 8 | }; 9 | 10 | constructor(props) { 11 | super(props); 12 | this.loadDataMedicine = this.loadDataMedicine.bind(this); 13 | this.inputData = React.createRef(); 14 | } 15 | 16 | onFocusChange = () => { 17 | this.setState({ onFocus: true }); 18 | }; 19 | onBlurChange = () => { 20 | this.setState({ onFocus: false }); 21 | }; 22 | 23 | async loadDataMedicine(event) { 24 | var apiHandler = new APIHandler(); 25 | var dataresponse = await apiHandler.fetchMedicineByName(event.target.value); 26 | this.setState({ datalist: dataresponse.data }); 27 | } 28 | 29 | onShowItem = (item) => { 30 | console.log(item); 31 | this.inputData.current.value = item.name; 32 | this.props.showDataInInputs(this.props.itemPostion, item); 33 | this.onBlurChange(); 34 | }; 35 | 36 | render() { 37 | return ( 38 | 39 | 50 | {this.state.onFocus == true ? ( 51 |
52 | 75 |
76 | ) : ( 77 | "" 78 | )} 79 | 80 | ); 81 | } 82 | } 83 | 84 | export default AutoCompleteMedicine; 85 | -------------------------------------------------------------------------------- /src/components/MainComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Overlay from "./Overlay"; 3 | import PageLoader from "./PageLoader"; 4 | import Navbar from "./Navbar"; 5 | import Sidebar from "./Sidebar"; 6 | import GoogleFontLoader from "react-google-font-loader"; 7 | import "adminbsb-materialdesign/css/themes/all-themes.css"; 8 | 9 | class MainComponent extends React.Component { 10 | state = { 11 | bodyClass: "theme-red ls-closed", 12 | displayOverlay: "none", 13 | width: window.screen.width, 14 | }; 15 | onBarClick = () => { 16 | if (this.state.bodyClass == "theme-red ls-closed overlay-open") { 17 | this.setState({ bodyClass: "theme-red ls-closed" }); 18 | this.setState({ displayOverlay: "none" }); 19 | } else if (this.state.bodyClass == "theme-red ls-closed") { 20 | this.setState({ bodyClass: "theme-red ls-closed overlay-open" }); 21 | this.setState({ displayOverlay: "block" }); 22 | } 23 | }; 24 | 25 | onscreenresize = () => { 26 | console.log(window.screen.width); 27 | this.setState({ width: window.screen.width }); 28 | }; 29 | 30 | componentWillMount() { 31 | window.addEventListener("resize", this.onscreenresize); 32 | } 33 | 34 | componentWillUnmount() { 35 | window.removeEventListener("resize", this.onscreenresize); 36 | } 37 | 38 | componentDidMount() { 39 | var inputall = document.querySelectorAll("input"); 40 | inputall.forEach((input) => { 41 | input.addEventListener("focus", function () { 42 | this.parentNode.className = "form-line focused"; 43 | }); 44 | }); 45 | 46 | inputall.forEach((input) => { 47 | input.addEventListener("blur", function () { 48 | this.parentNode.className = "form-line"; 49 | }); 50 | }); 51 | } 52 | 53 | render() { 54 | console.log(this.props); 55 | if (this.state.width > 1150) { 56 | document.getElementById("root").className = "theme-red"; 57 | } else { 58 | document.getElementById("root").className = this.state.bodyClass; 59 | } 60 | 61 | var Page = this.props.page; 62 | 63 | return ( 64 | 65 | 74 | 81 | 82 | 83 | 84 | 85 | 86 | ); 87 | } 88 | } 89 | 90 | export default MainComponent; 91 | -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class Navbar extends React.Component { 4 | render() { 5 | return ( 6 | 16 | ); 17 | } 18 | } 19 | 20 | export default Navbar; 21 | -------------------------------------------------------------------------------- /src/components/Overlay.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class Overlay extends React.Component { 4 | render() { 5 | return ( 6 |
7 | ); 8 | } 9 | } 10 | 11 | export default Overlay; 12 | -------------------------------------------------------------------------------- /src/components/PageLoader.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class PageLoader extends React.Component { 4 | render() { 5 | return ( 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |

Please wait...

19 |
20 |
21 | ); 22 | } 23 | } 24 | 25 | export default PageLoader; 26 | -------------------------------------------------------------------------------- /src/components/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import usericon from "adminbsb-materialdesign/images/user.png"; 3 | import Config from "../utils/Config"; 4 | import { Link } from "react-router-dom"; 5 | 6 | class Sidebar extends React.Component { 7 | state = { 8 | defaultClass: "btn-group user-helper-dropdown", 9 | }; 10 | 11 | constructor(props) { 12 | super(props); 13 | this.divref = React.createRef(); 14 | this.divref2 = React.createRef(); 15 | } 16 | 17 | componentWillMount() { 18 | document.addEventListener("mousedown", this.handleMouseClick, false); 19 | } 20 | 21 | componentWillUnmount() { 22 | document.removeEventListener("mousedown", this.handleMouseClick, false); 23 | } 24 | 25 | handleMouseClick = (event) => { 26 | if ( 27 | event.target === this.divref.current || 28 | event.target === this.divref2.current 29 | ) { 30 | console.log("Click Element"); 31 | return; 32 | } else { 33 | console.log("Click Outside"); 34 | this.setState({ defaultClass: "btn-group user-helper-dropdown" }); 35 | } 36 | }; 37 | 38 | showLogoutMenu = () => { 39 | if (this.state.defaultClass == "btn-group user-helper-dropdown") { 40 | this.setState({ defaultClass: "btn-group user-helper-dropdown open" }); 41 | } else { 42 | this.setState({ defaultClass: "btn-group user-helper-dropdown" }); 43 | } 44 | }; 45 | 46 | render() { 47 | return ( 48 |
49 | 163 |
164 | ); 165 | } 166 | } 167 | 168 | export default Sidebar; 169 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 4 | import Login from "./pages/Login"; 5 | import MainComponent from "./components/MainComponent"; 6 | import { PrivateRoute } from "./utils/PrivateRoute"; 7 | import HomeComponent from "./pages/HomeComponent"; 8 | import CompanyComponent from "./pages/CompanyComponent"; 9 | import LogoutComponent from "./pages/LogoutComponent"; 10 | import { PrivateRouteNew } from "./utils/PrivateRouteNew"; 11 | import Config from "./utils/Config"; 12 | import CompanyDetailsComponent from "./pages/CompanyDetailsComponent"; 13 | import CompanyAddBankComponent from "./pages/CompanyAddBankComponent"; 14 | import CompanyEditBankComponent from "./pages/CompanyEditBankComponent"; 15 | import MedicineAddComponent from "./pages/MedicineAddComponent"; 16 | import MedicineManageComponent from "./pages/MedicineManageComponent"; 17 | import CompanyAccountComponent from "./pages/CompanyAccountComponent"; 18 | import EmployeeComponent from "./pages/EmployeeComponent"; 19 | import EmployeeDetailsComponent from "./pages/EmployeeDetailsComponent"; 20 | import BillGenerateComponent from "./pages/BillGenerateComponent"; 21 | import CustomerRequestComponent from "./pages/CustomerRequestComponent"; 22 | 23 | ReactDOM.render( 24 | 25 | 26 | 27 | 32 | 38 | 44 | 50 | 56 | 62 | 68 | 74 | 80 | 86 | 92 | 98 | 104 | 105 | , 106 | document.getElementById("root") 107 | ); 108 | -------------------------------------------------------------------------------- /src/pages/BillGenerateComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | import { Link } from "react-router-dom"; 5 | import AutoCompleteMedicine from "../components/AutoCompleteMedicine"; 6 | 7 | class BillGenerateComponent extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | this.formSubmit = this.formSubmit.bind(this); 11 | } 12 | state = { 13 | errorRes: false, 14 | errorMessage: "", 15 | btnMessage: 0, 16 | sendData: false, 17 | medicineDetails: [ 18 | { 19 | sr_no: 1, 20 | id: 0, 21 | medicine_name: "", 22 | qty: "", 23 | qty_type: "", 24 | unit_price: "", 25 | c_gst: "", 26 | s_gst: "", 27 | amount: "", 28 | }, 29 | ], 30 | currentSrno: 1, 31 | }; 32 | 33 | async formSubmit(event) { 34 | event.preventDefault(); 35 | console.log(this.state.medicineDetails); 36 | console.log(event.target.customer_name.value); 37 | console.log(event.target.address.value); 38 | console.log(event.target.phone.value); 39 | 40 | this.setState({ btnMessage: 1 }); 41 | 42 | var customer_name = event.target.customer_name.value; 43 | var address = event.target.address.value; 44 | var phone = event.target.phone.value; 45 | 46 | var apiHandler = new APIHandler(); 47 | var response = await apiHandler.generateBill( 48 | event.target.customer_name.value, 49 | event.target.address.value, 50 | event.target.phone.value, 51 | this.state.medicineDetails 52 | ); 53 | console.log(response); 54 | this.setState({ btnMessage: 0 }); 55 | this.setState({ errorRes: response.data.error }); 56 | this.setState({ errorMessage: response.data.message }); 57 | this.setState({ sendData: true }); 58 | 59 | this.billGeneratePrint( 60 | customer_name, 61 | address, 62 | phone, 63 | this.state.medicineDetails 64 | ); 65 | } 66 | 67 | billGeneratePrint(customer_name, address, phone, medicineDetails) { 68 | var billDetails = 69 | "
"; 70 | billDetails += ""; 71 | billDetails += ""; 72 | billDetails += ""; 75 | billDetails += ""; 76 | billDetails += ""; 77 | billDetails += ""; 80 | billDetails += ""; 83 | billDetails += ""; 86 | billDetails += ""; 87 | billDetails += ""; 88 | billDetails += ""; 91 | billDetails += ""; 94 | billDetails += ""; 97 | billDetails += ""; 100 | billDetails += ""; 103 | billDetails += ""; 106 | billDetails += ""; 109 | billDetails += ""; 110 | var totalamt = 0; 111 | 112 | for (var i = 0; i < medicineDetails.length; i++) { 113 | billDetails += ""; 114 | billDetails += ""; 117 | billDetails += ""; 120 | billDetails += ""; 123 | billDetails += ""; 126 | billDetails += ""; 129 | billDetails += ""; 133 | billDetails += ""; 136 | billDetails += ""; 137 | 138 | totalamt += parseInt(medicineDetails[i].amount); 139 | } 140 | 141 | billDetails += ""; 142 | billDetails += 143 | ""; 147 | billDetails += "
"; 73 | billDetails += "Bill For Customer"; 74 | billDetails += "
"; 78 | billDetails += "Name : " + customer_name; 79 | billDetails += ""; 81 | billDetails += "Address : " + address; 82 | billDetails += ""; 84 | billDetails += "Phone : " + phone; 85 | billDetails += "
"; 89 | billDetails += "SR NO ."; 90 | billDetails += ""; 92 | billDetails += "Name ."; 93 | billDetails += ""; 95 | billDetails += "QTY ."; 96 | billDetails += ""; 98 | billDetails += "QTY TYPE ."; 99 | billDetails += ""; 101 | billDetails += "UNIT PRICE ."; 102 | billDetails += ""; 104 | billDetails += "GST ."; 105 | billDetails += ""; 107 | billDetails += "AMOUNT ."; 108 | billDetails += "
"; 115 | billDetails += "" + medicineDetails[i].sr_no; 116 | billDetails += ""; 118 | billDetails += "" + medicineDetails[i].medicine_name; 119 | billDetails += ""; 121 | billDetails += "" + medicineDetails[i].qty; 122 | billDetails += ""; 124 | billDetails += "" + medicineDetails[i].qty_type; 125 | billDetails += ""; 127 | billDetails += "" + medicineDetails[i].unit_price; 128 | billDetails += ""; 130 | billDetails += 131 | "" + medicineDetails[i].c_gst + " " + medicineDetails[i].s_gst; 132 | billDetails += ""; 134 | billDetails += "" + medicineDetails[i].amount; 135 | billDetails += "
"; 144 | billDetails += "Total : " + totalamt; 145 | billDetails += ""; 146 | billDetails += "
"; 148 | billDetails += "
"; 149 | 150 | var mywindow = window.open( 151 | "", 152 | "Bill Print", 153 | "height=650&width=900&top=100&left=100" 154 | ); 155 | 156 | mywindow.document.write(billDetails); 157 | mywindow.print(); 158 | } 159 | 160 | AddMedicineDetails = () => { 161 | this.state.currentSrno = this.state.currentSrno + 1; 162 | var srno = this.state.currentSrno; 163 | this.state.medicineDetails.push({ 164 | sr_no: srno, 165 | medicine_name: "", 166 | qty: "", 167 | qty_type: "", 168 | unit_price: "", 169 | c_gst: "", 170 | s_gst: "", 171 | amount: "", 172 | }); 173 | this.setState({}); 174 | }; 175 | 176 | RemoveMedicineDetails = () => { 177 | this.state.currentSrno = this.state.currentSrno - 1; 178 | if (this.state.medicineDetails.length > 1) { 179 | this.state.medicineDetails.pop(); 180 | } 181 | this.setState({}); 182 | }; 183 | 184 | showDataInInputs = (index, item) => { 185 | console.log(index); 186 | console.log(item); 187 | this.state.medicineDetails[index].id = item.id; 188 | this.state.medicineDetails[index].qty = 1; 189 | this.state.medicineDetails[index].qty_type = "Pieces"; 190 | this.state.medicineDetails[index].unit_price = item.sell_price; 191 | this.state.medicineDetails[index].c_gst = item.c_gst; 192 | this.state.medicineDetails[index].s_gst = item.s_gst; 193 | this.state.medicineDetails[index].medicine_name = item.name; 194 | this.state.medicineDetails[index].amount = 195 | parseInt(item.sell_price) + parseInt(item.c_gst) + parseInt(item.s_gst); 196 | this.setState({}); 197 | }; 198 | 199 | qtyChangeUpdate = (event) => { 200 | var value = event.target.value; 201 | var index = event.target.dataset.index; 202 | 203 | this.state.medicineDetails[index].amount = 204 | (parseInt(this.state.medicineDetails[index].unit_price) + 205 | parseInt(this.state.medicineDetails[index].c_gst) + 206 | parseInt(this.state.medicineDetails[index].s_gst)) * 207 | value; 208 | this.state.medicineDetails[index].qty = value; 209 | this.setState({}); 210 | }; 211 | 212 | render() { 213 | return ( 214 |
215 |
216 |
217 |

Generate Bill

218 |
219 |
220 |
221 |
222 |
223 |

Generate Bill for Customers

224 |
225 |
226 |
227 |
228 |
229 | 230 |
231 |
232 | 239 |
240 |
241 |
242 |
243 | 244 |
245 |
246 | 253 |
254 |
255 |
256 |
257 |
258 |
259 | 260 |
261 |
262 | 269 |
270 |
271 |
272 |
273 | 274 |
275 |

Medicine Details

276 | {this.state.medicineDetails.map((item, index) => ( 277 |
278 |
279 | 280 |
281 |
282 | 290 |
291 |
292 |
293 |
294 | 297 |
298 |
299 | 303 |
304 |
305 |
306 |
307 | 308 |
309 |
310 | 320 |
321 |
322 |
323 |
324 | 325 |
326 |
327 | 335 |
336 |
337 |
338 |
339 | 340 |
341 |
342 | 350 |
351 |
352 |
353 |
354 | 355 |
356 |
357 | 365 |
366 |
367 |
368 |
369 | ))} 370 |
371 |
372 | 379 |
380 |
381 | 388 |
389 |
390 | 399 |
400 | {this.state.errorRes == false && 401 | this.state.sendData == true ? ( 402 |
403 | Success! {this.state.errorMessage}. 404 |
405 | ) : ( 406 | "" 407 | )} 408 | {this.state.errorRes == true && 409 | this.state.sendData == true ? ( 410 |
411 | Failed! 412 | {this.state.errorMessage}. 413 |
414 | ) : ( 415 | "" 416 | )} 417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 | ); 425 | } 426 | } 427 | 428 | export default BillGenerateComponent; 429 | -------------------------------------------------------------------------------- /src/pages/CompanyAccountComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | 5 | class CompanyAccountComponent extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.formSubmit = this.formSubmit.bind(this); 9 | } 10 | state = { 11 | errorRes: false, 12 | errorMessage: "", 13 | btnMessage: 0, 14 | sendData: false, 15 | companyAccountdata: [], 16 | dataLoaded: false, 17 | companylist: [], 18 | }; 19 | 20 | async formSubmit(event) { 21 | event.preventDefault(); 22 | this.setState({ btnMessage: 1 }); 23 | 24 | var apiHandler = new APIHandler(); 25 | var response = await apiHandler.saveCompanyTransactionData( 26 | event.target.company_id.value, 27 | event.target.transaction_type.value, 28 | event.target.transaction_amt.value, 29 | event.target.transaction_date.value, 30 | event.target.payment_mode.value 31 | ); 32 | console.log(response); 33 | this.setState({ btnMessage: 0 }); 34 | this.setState({ errorRes: response.data.error }); 35 | this.setState({ errorMessage: response.data.message }); 36 | this.setState({ sendData: true }); 37 | this.updateDataAgain(); 38 | } 39 | 40 | //This Method Work When Our Page is Ready 41 | componentDidMount() { 42 | this.fetchCompanyAccountData(); 43 | } 44 | 45 | async fetchCompanyAccountData() { 46 | var apihandler = new APIHandler(); 47 | var companydata = await apihandler.fetchCompanyOnly(); 48 | this.updateDataAgain(); 49 | this.setState({ companylist: companydata.data }); 50 | this.setState({ dataLoaded: true }); 51 | } 52 | 53 | async updateDataAgain() { 54 | var apihandler = new APIHandler(); 55 | var companyAccountdata = await apihandler.fetchAllCompanyAccount(); 56 | this.setState({ companyAccountdata: companyAccountdata.data.data }); 57 | } 58 | 59 | render() { 60 | return ( 61 |
62 |
63 |
64 |

MANAGE COMPANY ACCOUNT

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

Add Company Account Bill

71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 | 90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 | 105 |
106 |
107 |
108 |
109 | 110 |
111 |
112 | 119 |
120 |
121 |
122 |
123 |
124 |
125 | 126 |
127 |
128 | 135 |
136 |
137 |
138 |
139 | 140 |
141 |
142 | 149 |
150 |
151 |
152 |
153 |
154 | 163 |
164 | {this.state.errorRes == false && 165 | this.state.sendData == true ? ( 166 |
167 | Success! {this.state.errorMessage}. 168 |
169 | ) : ( 170 | "" 171 | )} 172 | {this.state.errorRes == true && 173 | this.state.sendData == true ? ( 174 |
175 | Failed! 176 | {this.state.errorMessage}. 177 |
178 | ) : ( 179 | "" 180 | )} 181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 | {this.state.dataLoaded == false ? ( 191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 | ) : ( 204 | "" 205 | )} 206 |

All Companies Account Transactions

207 |
208 |
209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | {this.state.companyAccountdata.map((companyaccount) => ( 224 | 225 | 226 | 227 | 228 | 233 | 234 | 235 | 236 | 239 | 240 | ))} 241 | 242 |
#IDCompany NameCompany IDTransaction TypeAmountDatePayment ModeAdded On
{companyaccount.id}{companyaccount.company.name}{companyaccount.company.id} 229 | {companyaccount.transaction_type == 1 230 | ? "Debit" 231 | : "Credit"} 232 | {companyaccount.transaction_amt}{companyaccount.transaction_date}{companyaccount.payment_mode} 237 | {new Date(companyaccount.added_on).toLocaleString()} 238 |
243 |
244 |
245 |
246 |
247 |
248 |
249 | ); 250 | } 251 | } 252 | 253 | export default CompanyAccountComponent; 254 | -------------------------------------------------------------------------------- /src/pages/CompanyAddBankComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | import { Link } from "react-router-dom"; 5 | 6 | class CompanyAddBankComponent extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.formSubmit = this.formSubmit.bind(this); 10 | } 11 | state = { 12 | errorRes: false, 13 | errorMessage: "", 14 | btnMessage: 0, 15 | sendData: false, 16 | }; 17 | 18 | async formSubmit(event) { 19 | event.preventDefault(); 20 | this.setState({ btnMessage: 1 }); 21 | 22 | var apiHandler = new APIHandler(); 23 | var response = await apiHandler.saveCompanyBankData( 24 | event.target.bank_account_no.value, 25 | event.target.ifsc_no.value, 26 | this.props.match.params.id 27 | ); 28 | console.log(response); 29 | this.setState({ btnMessage: 0 }); 30 | this.setState({ errorRes: response.data.error }); 31 | this.setState({ errorMessage: response.data.message }); 32 | this.setState({ sendData: true }); 33 | } 34 | 35 | render() { 36 | return ( 37 |
38 |
39 |
40 |

MANAGE COMPANY

41 |
42 |
43 |
44 |
45 |
46 |

Add Company Bank #{this.props.match.params.id}

47 |
48 |
49 |
50 | 51 |
52 |
53 | 60 |
61 |
62 | 63 |
64 |
65 | 72 |
73 |
74 | 75 |
76 | 85 |
86 | {this.state.errorRes == false && 87 | this.state.sendData == true ? ( 88 |
89 | Success! {this.state.errorMessage}. 90 | 94 | Back to Company Details 95 | 96 |
97 | ) : ( 98 | "" 99 | )} 100 | {this.state.errorRes == true && 101 | this.state.sendData == true ? ( 102 |
103 | Failed! 104 | {this.state.errorMessage}. 105 |
106 | ) : ( 107 | "" 108 | )} 109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 | ); 117 | } 118 | } 119 | 120 | export default CompanyAddBankComponent; 121 | -------------------------------------------------------------------------------- /src/pages/CompanyComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | 5 | class CompanyComponent extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.formSubmit = this.formSubmit.bind(this); 9 | } 10 | state = { 11 | errorRes: false, 12 | errorMessage: "", 13 | btnMessage: 0, 14 | sendData: false, 15 | companyDataList: [], 16 | dataLoaded: false, 17 | }; 18 | 19 | async formSubmit(event) { 20 | event.preventDefault(); 21 | this.setState({ btnMessage: 1 }); 22 | 23 | var apiHandler = new APIHandler(); 24 | var response = await apiHandler.saveCompanyData( 25 | event.target.name.value, 26 | event.target.license_no.value, 27 | event.target.address.value, 28 | event.target.contact_no.value, 29 | event.target.email.value, 30 | event.target.description.value 31 | ); 32 | console.log(response); 33 | this.setState({ btnMessage: 0 }); 34 | this.setState({ errorRes: response.data.error }); 35 | this.setState({ errorMessage: response.data.message }); 36 | this.setState({ sendData: true }); 37 | } 38 | 39 | //This Method Work When Our Page is Ready 40 | componentDidMount() { 41 | this.fetchCompanyData(); 42 | } 43 | 44 | async fetchCompanyData() { 45 | var apihandler = new APIHandler(); 46 | var companydata = await apihandler.fetchAllCompany(); 47 | console.log(companydata); 48 | this.setState({ companyDataList: companydata.data.data }); 49 | this.setState({ dataLoaded: true }); 50 | } 51 | 52 | viewCompanyDetails = (company_id) => { 53 | console.log(company_id); 54 | console.log(this.props); 55 | this.props.history.push("/companydetails/" + company_id); 56 | }; 57 | 58 | render() { 59 | return ( 60 |
61 |
62 |
63 |

MANAGE COMPANY

64 |
65 |
66 |
67 |
68 |
69 |

Add Company

70 |
71 |
72 |
73 | 74 |
75 |
76 | 83 |
84 |
85 | 86 |
87 |
88 | 95 |
96 |
97 | 98 |
99 |
100 | 107 |
108 |
109 | 110 |
111 |
112 | 119 |
120 |
121 | 122 |
123 |
124 | 131 |
132 |
133 | 134 |
135 |
136 | 143 |
144 |
145 |
146 | 155 |
156 | {this.state.errorRes == false && 157 | this.state.sendData == true ? ( 158 |
159 | Success! {this.state.errorMessage}. 160 |
161 | ) : ( 162 | "" 163 | )} 164 | {this.state.errorRes == true && 165 | this.state.sendData == true ? ( 166 |
167 | Failed! 168 | {this.state.errorMessage}. 169 |
170 | ) : ( 171 | "" 172 | )} 173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 | {this.state.dataLoaded == false ? ( 183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 | ) : ( 196 | "" 197 | )} 198 |

All Companies

199 |
200 |
201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | {this.state.companyDataList.map((company) => ( 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 236 | 237 | ))} 238 | 239 |
#IDNAMELicense NO.AddressContactEmailDescriptionAdded OnAction
{company.id}{company.name}{company.license_no}{company.address}{company.contact_no}{company.email}{company.description}{new Date(company.added_on).toLocaleString()} 227 | 235 |
240 |
241 |
242 |
243 |
244 |
245 |
246 | ); 247 | } 248 | } 249 | 250 | export default CompanyComponent; 251 | -------------------------------------------------------------------------------- /src/pages/CompanyDetailsComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | 5 | class CompanyDetailsComponent extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.formSubmit = this.formSubmit.bind(this); 9 | console.log(props.match.params.id); 10 | } 11 | state = { 12 | errorRes: false, 13 | errorMessage: "", 14 | btnMessage: 0, 15 | sendData: false, 16 | companyBank: [], 17 | name: "", 18 | license_no: "", 19 | address: "", 20 | contact_no: "", 21 | email: "", 22 | description: "", 23 | dataLoaded: false, 24 | }; 25 | 26 | async formSubmit(event) { 27 | event.preventDefault(); 28 | this.setState({ btnMessage: 1 }); 29 | 30 | var apiHandler = new APIHandler(); 31 | var response = await apiHandler.editCompanyData( 32 | event.target.name.value, 33 | event.target.license_no.value, 34 | event.target.address.value, 35 | event.target.contact_no.value, 36 | event.target.email.value, 37 | event.target.description.value, 38 | this.props.match.params.id 39 | ); 40 | console.log(response); 41 | this.setState({ btnMessage: 0 }); 42 | this.setState({ errorRes: response.data.error }); 43 | this.setState({ errorMessage: response.data.message }); 44 | this.setState({ sendData: true }); 45 | } 46 | 47 | //This Method Work When Our Page is Ready 48 | componentDidMount() { 49 | this.fetchCompanyData(); 50 | } 51 | 52 | async fetchCompanyData() { 53 | var apihandler = new APIHandler(); 54 | var companydata = await apihandler.fetchCompanyDetails( 55 | this.props.match.params.id 56 | ); 57 | console.log(companydata); 58 | this.setState({ companyBank: companydata.data.data.company_bank }); 59 | this.setState({ name: companydata.data.data.name }); 60 | this.setState({ license_no: companydata.data.data.license_no }); 61 | this.setState({ address: companydata.data.data.address }); 62 | this.setState({ contact_no: companydata.data.data.contact_no }); 63 | this.setState({ email: companydata.data.data.email }); 64 | this.setState({ description: companydata.data.data.description }); 65 | this.setState({ dataLoaded: true }); 66 | } 67 | 68 | viewCompanyDetails = (company_id) => { 69 | console.log(company_id); 70 | console.log(this.props); 71 | }; 72 | 73 | AddCompanyBank = () => { 74 | this.props.history.push("/addCompanyBank/" + this.props.match.params.id); 75 | }; 76 | 77 | EditCompanyBank = (company_bank_id) => { 78 | console.log(company_bank_id); 79 | this.props.history.push( 80 | "/editcompanybank/" + this.props.match.params.id + "/" + company_bank_id 81 | ); 82 | }; 83 | 84 | render() { 85 | return ( 86 |
87 |
88 |
89 |

MANAGE COMPANY

90 |
91 |
92 |
93 |
94 |
95 | {this.state.dataLoaded == false ? ( 96 |
97 |
98 | 106 |
107 |
108 | ) : ( 109 | "" 110 | )} 111 |

EDIT Company

112 |
113 |
114 |
115 | 116 |
117 |
118 | 126 |
127 |
128 | 129 |
130 |
131 | 139 |
140 |
141 | 142 |
143 |
144 | 152 |
153 |
154 | 155 |
156 |
157 | 165 |
166 |
167 | 168 |
169 |
170 | 178 |
179 |
180 | 181 |
182 |
183 | 191 |
192 |
193 |
194 | 203 |
204 | {this.state.errorRes == false && 205 | this.state.sendData == true ? ( 206 |
207 | Success! {this.state.errorMessage}. 208 |
209 | ) : ( 210 | "" 211 | )} 212 | {this.state.errorRes == true && 213 | this.state.sendData == true ? ( 214 |
215 | Failed! 216 | {this.state.errorMessage}. 217 |
218 | ) : ( 219 | "" 220 | )} 221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 | {this.state.dataLoaded == false ? ( 231 |
232 |
233 | 241 |
242 |
243 | ) : ( 244 | "" 245 | )} 246 |

Company Bank

247 |
248 | 254 |
255 |
256 |
257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | {this.state.companyBank.map((company) => ( 269 | 270 | 271 | 272 | 273 | 274 | 285 | 286 | 287 | ))} 288 | 289 |
#IDAccount No.IFSC CodeAdded OnAction
{company.id}{company.bank_account_no}{company.ifsc_no}{new Date(company.added_on).toLocaleString()} 275 | 281 | 284 | Test
290 |
291 |
292 |
293 |
294 |
295 |
296 | ); 297 | } 298 | } 299 | 300 | export default CompanyDetailsComponent; 301 | -------------------------------------------------------------------------------- /src/pages/CompanyEditBankComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | import { Link } from "react-router-dom"; 5 | 6 | class CompanyEditBankComponent extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.formSubmit = this.formSubmit.bind(this); 10 | } 11 | state = { 12 | errorRes: false, 13 | errorMessage: "", 14 | btnMessage: 0, 15 | sendData: false, 16 | ifsc_no: "", 17 | bank_account_no: "", 18 | }; 19 | 20 | async formSubmit(event) { 21 | event.preventDefault(); 22 | this.setState({ btnMessage: 1 }); 23 | 24 | var apiHandler = new APIHandler(); 25 | var response = await apiHandler.editCompanyBankData( 26 | event.target.bank_account_no.value, 27 | event.target.ifsc_no.value, 28 | this.props.match.params.company_id, 29 | this.props.match.params.id 30 | ); 31 | console.log(response); 32 | this.setState({ btnMessage: 0 }); 33 | this.setState({ errorRes: response.data.error }); 34 | this.setState({ errorMessage: response.data.message }); 35 | this.setState({ sendData: true }); 36 | } 37 | 38 | componentDidMount() { 39 | this.fetchCompanyBankData(); 40 | } 41 | 42 | async fetchCompanyBankData() { 43 | var apihandler = new APIHandler(); 44 | var companydata = await apihandler.fetchCompanyBankDetails( 45 | this.props.match.params.id 46 | ); 47 | console.log(companydata); 48 | this.setState({ bank_account_no: companydata.data.data.bank_account_no }); 49 | this.setState({ ifsc_no: companydata.data.data.ifsc_no }); 50 | this.setState({ dataLoaded: true }); 51 | } 52 | 53 | render() { 54 | return ( 55 |
56 |
57 |
58 |

MANAGE COMPANY

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

Edit Company Bank #{this.props.match.params.id}

65 |
66 |
67 |
68 | 69 |
70 |
71 | 79 |
80 |
81 | 82 |
83 |
84 | 92 |
93 |
94 | 95 |
96 | 105 |
106 | {this.state.errorRes == false && 107 | this.state.sendData == true ? ( 108 |
109 | Success! {this.state.errorMessage}. 110 | 117 | Back to Company Details 118 | 119 |
120 | ) : ( 121 | "" 122 | )} 123 | {this.state.errorRes == true && 124 | this.state.sendData == true ? ( 125 |
126 | Failed! 127 | {this.state.errorMessage}. 128 |
129 | ) : ( 130 | "" 131 | )} 132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 | ); 140 | } 141 | } 142 | 143 | export default CompanyEditBankComponent; 144 | -------------------------------------------------------------------------------- /src/pages/CustomerRequestComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | 5 | class CustomerRequestComponent extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.formSubmit = this.formSubmit.bind(this); 9 | this.completeCustomerRequestDetails = this.completeCustomerRequestDetails.bind( 10 | this 11 | ); 12 | this.formRef = React.createRef(); 13 | } 14 | state = { 15 | errorRes: false, 16 | errorMessage: "", 17 | btnMessage: 0, 18 | sendData: false, 19 | customerRequestDataList: [], 20 | dataLoaded: false, 21 | }; 22 | 23 | async formSubmit(event) { 24 | event.preventDefault(); 25 | this.setState({ btnMessage: 1 }); 26 | 27 | var apiHandler = new APIHandler(); 28 | var response = await apiHandler.saveCustomerRequestData( 29 | event.target.name.value, 30 | event.target.phone.value, 31 | event.target.medicine_details.value, 32 | event.target.prescription.files[0] 33 | ); 34 | console.log(response); 35 | this.setState({ btnMessage: 0 }); 36 | this.setState({ errorRes: response.data.error }); 37 | this.setState({ errorMessage: response.data.message }); 38 | this.setState({ sendData: true }); 39 | this.fetchCustomerRequestData(); 40 | this.formRef.current.reset(); 41 | } 42 | 43 | //This Method Work When Our Page is Ready 44 | componentDidMount() { 45 | this.fetchCustomerRequestData(); 46 | } 47 | 48 | async fetchCustomerRequestData() { 49 | var apihandler = new APIHandler(); 50 | var customerRequestData = await apihandler.fetchAllCustomerRequest(); 51 | console.log(customerRequestData); 52 | this.setState({ customerRequestDataList: customerRequestData.data.data }); 53 | this.setState({ dataLoaded: true }); 54 | } 55 | 56 | async completeCustomerRequestDetails( 57 | customer_id, 58 | name, 59 | phone, 60 | medicine_details 61 | ) { 62 | console.log(customer_id); 63 | var apihandler = new APIHandler(); 64 | var customerRequestData = await apihandler.updateCustomerRequest( 65 | customer_id, 66 | name, 67 | phone, 68 | medicine_details 69 | ); 70 | console.log(customerRequestData); 71 | this.fetchCustomerRequestData(); 72 | } 73 | 74 | render() { 75 | return ( 76 |
77 |
78 |
79 |

MANAGE CUSTOMER MEDICINE REQUEST

80 |
81 |
82 |
83 |
84 |
85 |

Add CUSTOMER REQUEST

86 |
87 |
88 |
89 | 90 |
91 |
92 | 99 |
100 |
101 | 102 |
103 |
104 | 111 |
112 |
113 | 114 |
115 |
116 | 123 |
124 |
125 | 126 |
127 |
128 | 134 |
135 |
136 |
137 | 146 |
147 | {this.state.errorRes == false && 148 | this.state.sendData == true ? ( 149 |
150 | Success! {this.state.errorMessage}. 151 |
152 | ) : ( 153 | "" 154 | )} 155 | {this.state.errorRes == true && 156 | this.state.sendData == true ? ( 157 |
158 | Failed! 159 | {this.state.errorMessage}. 160 |
161 | ) : ( 162 | "" 163 | )} 164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 | {this.state.dataLoaded == false ? ( 174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 | ) : ( 187 | "" 188 | )} 189 |

All Customer Medicine Request

190 |
191 |
192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | {this.state.customerRequestDataList.map( 207 | (CustomerRequest) => ( 208 | 209 | 210 | 211 | 212 | 213 | 223 | 228 | 233 | 254 | 255 | ) 256 | )} 257 | 258 |
#IDNAMEPhoneMedicine DetailsPRESCRIPTIONStatusAdded OnAction
{CustomerRequest.id}{CustomerRequest.customer_name}{CustomerRequest.phone}{CustomerRequest.medicine_details} 214 | {CustomerRequest.prescription == null ? ( 215 | "" 216 | ) : ( 217 | 221 | )} 222 | 224 | {CustomerRequest.status == 0 225 | ? "Pending" 226 | : "Completed"} 227 | 229 | {new Date( 230 | CustomerRequest.added_on 231 | ).toLocaleString()} 232 | 234 | {CustomerRequest.status == 0 ? ( 235 | 248 | ) : ( 249 | 252 | )} 253 |
259 |
260 |
261 |
262 |
263 |
264 |
265 | ); 266 | } 267 | } 268 | 269 | export default CustomerRequestComponent; 270 | -------------------------------------------------------------------------------- /src/pages/EmployeeComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | 5 | class EmployeeComponent extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.formSubmit = this.formSubmit.bind(this); 9 | } 10 | state = { 11 | errorRes: false, 12 | errorMessage: "", 13 | btnMessage: 0, 14 | sendData: false, 15 | employeeList: [], 16 | dataLoaded: false, 17 | }; 18 | 19 | async formSubmit(event) { 20 | event.preventDefault(); 21 | this.setState({ btnMessage: 1 }); 22 | 23 | var apiHandler = new APIHandler(); 24 | var response = await apiHandler.saveEmployeeData( 25 | event.target.name.value, 26 | event.target.joining_date.value, 27 | event.target.phone.value, 28 | event.target.address.value 29 | ); 30 | console.log(response); 31 | this.setState({ btnMessage: 0 }); 32 | this.setState({ errorRes: response.data.error }); 33 | this.setState({ errorMessage: response.data.message }); 34 | this.setState({ sendData: true }); 35 | this.updateDataAgain(); 36 | } 37 | 38 | //This Method Work When Our Page is Ready 39 | componentDidMount() { 40 | this.fetchEmployeeData(); 41 | } 42 | 43 | async fetchEmployeeData() { 44 | this.updateDataAgain(); 45 | } 46 | 47 | async updateDataAgain() { 48 | var apihandler = new APIHandler(); 49 | var employeeDataList = await apihandler.fetchEmployee(); 50 | this.setState({ employeeList: employeeDataList.data.data }); 51 | this.setState({ dataLoaded: true }); 52 | } 53 | 54 | ShowEmpDetails = (eid) => { 55 | this.props.history.push("/employeedetails/" + eid); 56 | }; 57 | 58 | render() { 59 | return ( 60 |
61 |
62 |
63 |

MANAGE Employee

64 |
65 |
66 |
67 |
68 |
69 |

Add Employee

70 |
71 |
72 |
73 |
74 |
75 | 76 |
77 |
78 | 85 |
86 |
87 |
88 |
89 | 90 |
91 |
92 | 99 |
100 |
101 |
102 |
103 |
104 |
105 | 106 |
107 |
108 | 115 |
116 |
117 |
118 |
119 | 120 |
121 |
122 | 129 |
130 |
131 |
132 |
133 |
134 | 143 |
144 | {this.state.errorRes == false && 145 | this.state.sendData == true ? ( 146 |
147 | Success! {this.state.errorMessage}. 148 |
149 | ) : ( 150 | "" 151 | )} 152 | {this.state.errorRes == true && 153 | this.state.sendData == true ? ( 154 |
155 | Failed! 156 | {this.state.errorMessage}. 157 |
158 | ) : ( 159 | "" 160 | )} 161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 | {this.state.dataLoaded == false ? ( 171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 | ) : ( 184 | "" 185 | )} 186 |

All Employee Data

187 |
188 |
189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | {this.state.employeeList.map((employee) => ( 203 | 204 | 205 | 206 | 207 | 208 | 209 | 212 | 220 | 221 | ))} 222 | 223 |
#IDNameJoining DatePhoneAddressAdded OnAction
{employee.id}{employee.name}{employee.joining_date}{employee.phone}{employee.address} 210 | {new Date(employee.added_on).toLocaleString()} 211 | 213 | 219 |
224 |
225 |
226 |
227 |
228 |
229 |
230 | ); 231 | } 232 | } 233 | 234 | export default EmployeeComponent; 235 | -------------------------------------------------------------------------------- /src/pages/EmployeeDetailsComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | 5 | class EmployeeDetailsComponent extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.formSubmit = this.formSubmit.bind(this); 9 | this.formSubmitSalary = this.formSubmitSalary.bind(this); 10 | this.formSubmitBank = this.formSubmitBank.bind(this); 11 | } 12 | state = { 13 | errorRes: false, 14 | errorResSalary: false, 15 | errorResBank: false, 16 | errorMessage: "", 17 | errorMessageSalary: "", 18 | errorMessageBank: "", 19 | btnMessage: 0, 20 | btnMessageSalary: 0, 21 | btnMessageBank: 0, 22 | sendData: false, 23 | sendDataSalary: false, 24 | sendDataBank: false, 25 | employeeList: [], 26 | dataLoaded: false, 27 | address: "", 28 | name: "", 29 | phone: "", 30 | joining_date: "", 31 | employeeSalaryList: [], 32 | employeebankList: [], 33 | }; 34 | 35 | async formSubmit(event) { 36 | event.preventDefault(); 37 | this.setState({ btnMessage: 1 }); 38 | 39 | var apiHandler = new APIHandler(); 40 | var response = await apiHandler.editEmployeeData( 41 | event.target.name.value, 42 | event.target.joining_date.value, 43 | event.target.phone.value, 44 | event.target.address.value, 45 | this.props.match.params.id 46 | ); 47 | console.log(response); 48 | this.setState({ btnMessage: 0 }); 49 | this.setState({ errorRes: response.data.error }); 50 | this.setState({ errorMessage: response.data.message }); 51 | this.setState({ sendData: true }); 52 | this.updateDataAgain(); 53 | } 54 | 55 | //This Method Work When Our Page is Ready 56 | componentDidMount() { 57 | this.fetchEmployeeDataByID(); 58 | } 59 | 60 | async fetchEmployeeDataByID() { 61 | this.updateDataAgain(); 62 | } 63 | 64 | async formSubmitSalary(event) { 65 | event.preventDefault(); 66 | this.setState({ btnMessageSalary: 1 }); 67 | 68 | var apiHandler = new APIHandler(); 69 | var response = await apiHandler.AddEmployeeSalaryData( 70 | event.target.salary_date.value, 71 | event.target.salary_amount.value, 72 | this.props.match.params.id 73 | ); 74 | console.log(response); 75 | this.setState({ btnMessageSalary: 0 }); 76 | this.setState({ errorResSalary: response.data.error }); 77 | this.setState({ errorMessageSalary: response.data.message }); 78 | this.setState({ sendDataSalary: true }); 79 | this.updateDataAgain(); 80 | } 81 | 82 | async updateDataAgain() { 83 | var apihandler = new APIHandler(); 84 | var employeeData = await apihandler.fetchEmployeeById( 85 | this.props.match.params.id 86 | ); 87 | 88 | var employeeSalary = await apihandler.fetchSalaryEmployee( 89 | this.props.match.params.id 90 | ); 91 | 92 | var employeeBank = await apihandler.fetchBankEmployee( 93 | this.props.match.params.id 94 | ); 95 | 96 | console.log(employeeSalary); 97 | this.setState({ name: employeeData.data.data.name }); 98 | this.setState({ phone: employeeData.data.data.phone }); 99 | this.setState({ joining_date: employeeData.data.data.joining_date }); 100 | this.setState({ address: employeeData.data.data.address }); 101 | this.setState({ employeeSalaryList: employeeSalary.data }); 102 | this.setState({ employeebankList: employeeBank.data }); 103 | //this.setState({ employeeList: employeeDataList.data.data }); 104 | this.setState({ dataLoaded: true }); 105 | } 106 | 107 | async formSubmitBank(event) { 108 | event.preventDefault(); 109 | this.setState({ btnMessageBank: 1 }); 110 | 111 | var apiHandler = new APIHandler(); 112 | var response = await apiHandler.AddEmployeeBankData( 113 | event.target.bank_account_no.value, 114 | event.target.ifsc_no.value, 115 | this.props.match.params.id 116 | ); 117 | console.log(response); 118 | this.setState({ btnMessageBank: 0 }); 119 | this.setState({ errorResBank: response.data.error }); 120 | this.setState({ errorMessageBank: response.data.message }); 121 | this.setState({ sendDataBank: true }); 122 | this.updateDataAgain(); 123 | } 124 | 125 | render() { 126 | return ( 127 |
128 |
129 |
130 |

Edit Employee #{this.props.match.params.id}

131 |
132 |
133 |
134 |
135 |
136 |

Edit Employee

137 |
138 |
139 |
140 |
141 |
142 | 143 |
144 |
145 | 153 |
154 |
155 |
156 |
157 | 158 |
159 |
160 | 168 |
169 |
170 |
171 |
172 |
173 |
174 | 175 |
176 |
177 | 185 |
186 |
187 |
188 |
189 | 190 |
191 |
192 | 200 |
201 |
202 |
203 |
204 |
205 | 214 |
215 | {this.state.errorRes == false && 216 | this.state.sendData == true ? ( 217 |
218 | Success! {this.state.errorMessage}. 219 |
220 | ) : ( 221 | "" 222 | )} 223 | {this.state.errorRes == true && 224 | this.state.sendData == true ? ( 225 |
226 | Failed! 227 | {this.state.errorMessage}. 228 |
229 | ) : ( 230 | "" 231 | )} 232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |

ADD Employee Salary

242 |
243 |
244 |
245 |
246 |
247 | 248 |
249 |
250 | 257 |
258 |
259 |
260 |
261 | 262 |
263 |
264 | 271 |
272 |
273 |
274 |
275 | 284 |
285 | {this.state.errorResSalary == false && 286 | this.state.sendDataSalary == true ? ( 287 |
288 | Success!{" "} 289 | {this.state.errorMessageSalary}. 290 |
291 | ) : ( 292 | "" 293 | )} 294 | {this.state.errorResSalary == true && 295 | this.state.sendDataSalary == true ? ( 296 |
297 | Failed! 298 | {this.state.errorMessageSalary}. 299 |
300 | ) : ( 301 | "" 302 | )} 303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 | {this.state.dataLoaded == false ? ( 313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 | ) : ( 326 | "" 327 | )} 328 |

Employee Salary

329 |
330 |
331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | {this.state.employeeSalaryList.map((salary) => ( 342 | 343 | 344 | 345 | 346 | 347 | 348 | ))} 349 | 350 |
#IDSalary DateSalary AmountAdded On
{salary.id}{salary.salary_date}{salary.salary_amount}{new Date(salary.added_on).toLocaleString()}
351 |
352 |
353 |
354 |
355 | 356 |
357 |
358 |
359 |
360 |

ADD Employee Bank

361 |
362 |
363 |
364 |
365 |
366 | 367 |
368 |
369 | 376 |
377 |
378 |
379 |
380 | 381 |
382 |
383 | 390 |
391 |
392 |
393 |
394 | 403 |
404 | {this.state.errorResBank == false && 405 | this.state.sendDataBank == true ? ( 406 |
407 | Success! {this.state.errorMessageBank}. 408 |
409 | ) : ( 410 | "" 411 | )} 412 | {this.state.errorResBank == true && 413 | this.state.sendDataBank == true ? ( 414 |
415 | Failed! 416 | {this.state.errorMessageBank}. 417 |
418 | ) : ( 419 | "" 420 | )} 421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 | {this.state.dataLoaded == false ? ( 431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 | ) : ( 444 | "" 445 | )} 446 |

Employee Bank

447 |
448 |
449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | {this.state.employeebankList.map((bankdetails) => ( 460 | 461 | 462 | 463 | 464 | 467 | 468 | ))} 469 | 470 |
#IDAccount NoIFSC CodeAdded On
{bankdetails.id}{bankdetails.bank_account_no}{bankdetails.ifsc_no} 465 | {new Date(bankdetails.added_on).toLocaleString()} 466 |
471 |
472 |
473 |
474 |
475 |
476 |
477 | ); 478 | } 479 | } 480 | 481 | export default EmployeeDetailsComponent; 482 | -------------------------------------------------------------------------------- /src/pages/HomeComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import APIHandler from "../utils/APIHandler"; 3 | import CanvasJSReact from "../utils/canvasjs.react"; 4 | var CanvasJS = CanvasJSReact.CanvasJS; 5 | var CanvasJSChart = CanvasJSReact.CanvasJSChart; 6 | 7 | class HomeComponent extends React.Component { 8 | //This Method Work When Our Page is Ready 9 | constructor(props) { 10 | super(props); 11 | this.chart = React.createRef(); 12 | } 13 | 14 | state = { 15 | customer_request: 0, 16 | bill_count: 0, 17 | medicine_count: 0, 18 | company_count: 0, 19 | employee_count: 0, 20 | profit_total: 0, 21 | sell_total: 0, 22 | request_pending: 0, 23 | request_completed: 0, 24 | profit_amt_today: 0, 25 | sell_amt_today: 0, 26 | medicine_expire_serializer_data: 0, 27 | dataPoints: [], 28 | profitChartOption: {}, 29 | sellChartOption: {}, 30 | }; 31 | 32 | componentDidMount() { 33 | this.fetchHomePage(); 34 | } 35 | 36 | async fetchHomePage() { 37 | var apihandler = new APIHandler(); 38 | var homedata = await apihandler.fetchHomePage(); 39 | console.log(homedata); 40 | this.setState({ customer_request: homedata.data.customer_request }); 41 | this.setState({ bill_count: homedata.data.bill_count }); 42 | this.setState({ medicine_count: homedata.data.medicine_count }); 43 | this.setState({ company_count: homedata.data.company_count }); 44 | this.setState({ employee_count: homedata.data.employee_count }); 45 | this.setState({ profit_total: homedata.data.profit_total }); 46 | this.setState({ sell_total: homedata.data.sell_total }); 47 | this.setState({ request_pending: homedata.data.request_pending }); 48 | this.setState({ request_completed: homedata.data.request_completed }); 49 | this.setState({ sell_amt_today: homedata.data.sell_amt_today }); 50 | this.setState({ profit_amt_today: homedata.data.profit_amt_today }); 51 | this.setState({ 52 | medicine_expire_serializer_data: 53 | homedata.data.medicine_expire_serializer_data, 54 | }); 55 | 56 | var profitdatalist = []; 57 | for (var i = 0; i < homedata.data.profit_chart.length; i++) { 58 | profitdatalist.push({ 59 | x: new Date(homedata.data.profit_chart[i].date), 60 | y: homedata.data.profit_chart[i].amt, 61 | }); 62 | } 63 | var selldatalist = []; 64 | for (var i = 0; i < homedata.data.sell_chart.length; i++) { 65 | selldatalist.push({ 66 | x: new Date(homedata.data.sell_chart[i].date), 67 | y: homedata.data.sell_chart[i].amt, 68 | }); 69 | } 70 | 71 | this.state.profitChartOption = { 72 | animationEnabled: true, 73 | title: { 74 | text: "Total Profit Chart of Medicine", 75 | }, 76 | axisX: { 77 | valueFormatString: "DD MMMM YYYY", 78 | }, 79 | axisY: { 80 | title: "Profit ", 81 | prefix: "$", 82 | }, 83 | data: [ 84 | { 85 | yValueFormatString: "$#,###", 86 | xValueFormatString: "DD MMMM YYYY", 87 | type: "spline", 88 | dataPoints: profitdatalist, 89 | }, 90 | ], 91 | }; 92 | this.state.sellChartOption = { 93 | animationEnabled: true, 94 | title: { 95 | text: "Total Sell Chart of Medicine", 96 | }, 97 | axisX: { 98 | valueFormatString: "DD MMMM YYYY", 99 | }, 100 | axisY: { 101 | title: "Sales ", 102 | prefix: "$", 103 | }, 104 | data: [ 105 | { 106 | yValueFormatString: "$#,###", 107 | xValueFormatString: "DD MMMM YYYY", 108 | type: "spline", 109 | dataPoints: selldatalist, 110 | }, 111 | ], 112 | }; 113 | this.setState({}); 114 | } 115 | 116 | render() { 117 | return ( 118 |
119 |
120 |
121 |

DASHBOARD

122 |
123 | 124 |
125 |
126 |
127 |
128 | bookmark 129 |
130 |
131 |
TOTAL REQUEST
132 |
139 | {this.state.customer_request} 140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 | bookmark 148 |
149 |
150 |
TOTAL SALES
151 |
158 | {this.state.bill_count} 159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 | bookmark 167 |
168 |
169 |
TOTAL MEDICINES
170 |
177 | {this.state.medicine_count} 178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 | bookmark 186 |
187 |
188 |
TOTAL COMPANY
189 |
196 | {this.state.company_count} 197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 | bookmark 207 |
208 |
209 |
TOTAL EMPLOYEE
210 |
217 | {this.state.employee_count} 218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 | bookmark 226 |
227 |
228 |
TOTAL PROFIT
229 |
236 | {this.state.profit_total} 237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 | bookmark 245 |
246 |
247 |
TOTAL SALES AMOUNT
248 |
255 | {this.state.sell_total} 256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 | bookmark 264 |
265 |
266 |
MEDICINE EXPIRE IN WEEK
267 |
274 | {this.state.medicine_expire_serializer_data} 275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 | bookmark 285 |
286 |
287 |
COMPLETED REQUEST
288 |
295 | {this.state.request_completed} 296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 | bookmark 304 |
305 |
306 |
PENDING REQUEST
307 |
314 | {this.state.request_pending} 315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 | bookmark 323 |
324 |
325 |
TODAY SALES AMOUNT
326 |
333 | {this.state.sell_amt_today} 334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 | bookmark 342 |
343 |
344 |
TODAY SALES PROFIT
345 |
352 | {this.state.profit_amt_today} 353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |

Profit Chart

363 |
364 |
365 | this.chart = ref} */ 368 | /> 369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |

Sell Chart

378 |
379 |
380 | this.chart = ref} */ 383 | /> 384 |
385 |
386 |
387 |
388 |
389 |
390 | ); 391 | } 392 | } 393 | 394 | export default HomeComponent; 395 | -------------------------------------------------------------------------------- /src/pages/Login.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import GoogleFontLoader from "react-google-font-loader"; 3 | import "adminbsb-materialdesign/plugins/bootstrap/css/bootstrap.css"; 4 | import "adminbsb-materialdesign/plugins/node-waves/waves.css"; 5 | import "adminbsb-materialdesign/plugins/animate-css/animate.css"; 6 | import "adminbsb-materialdesign/css/style.css"; 7 | import AuthHandler from "../utils/AuthHandler"; 8 | import { reactLocalStorage } from "reactjs-localstorage"; 9 | import { Redirect } from "react-router-dom"; 10 | import Config from "../utils/Config"; 11 | 12 | class Login extends React.Component { 13 | state = { 14 | username: "", 15 | password: "", 16 | btnDisabled: true, 17 | loginStatus: 0, 18 | }; 19 | saveInputs = (event) => { 20 | var key = event.target.name; 21 | this.setState({ [key]: event.target.value }); 22 | if (this.state.username != "" && this.state.password != "") { 23 | this.setState({ btnDisabled: false }); 24 | } else { 25 | this.setState({ btnDisabled: true }); 26 | } 27 | }; 28 | 29 | formSubmit = (event) => { 30 | event.preventDefault(); 31 | console.log(this.state); 32 | this.setState({ loginStatus: 1 }); 33 | AuthHandler.login( 34 | this.state.username, 35 | this.state.password, 36 | this.handleAjaxResponse 37 | ); 38 | }; 39 | 40 | handleAjaxResponse = (data) => { 41 | console.log(data); 42 | if (data.error) { 43 | this.setState({ loginStatus: 4 }); 44 | } else { 45 | this.setState({ loginStatus: 3 }); 46 | window.location = Config.homeUrl; 47 | } 48 | }; 49 | 50 | getMessages = () => { 51 | if (this.state.loginStatus === 0) { 52 | return ""; 53 | } else if (this.state.loginStatus === 1) { 54 | return ( 55 |
56 | Logging in! Please Wait... 57 |
58 | ); 59 | } else if (this.state.loginStatus === 3) { 60 | return ( 61 |
62 | Login Successfull! 63 |
64 | ); 65 | } else if (this.state.loginStatus === 4) { 66 | return ( 67 |
68 | Invalid Login Details 69 |
70 | ); 71 | } 72 | }; 73 | 74 | render() { 75 | if (AuthHandler.loggedIn()) { 76 | return ; 77 | } 78 | document.body.className = "login-page"; 79 | 80 | return ( 81 | 82 | 91 | 98 |
99 | 102 |
103 |
104 |
105 |
Sign in
106 |
107 | 108 | person 109 | 110 |
111 | 120 |
121 |
122 |
123 | 124 | lock 125 | 126 |
127 | 135 |
136 |
137 |
138 |
139 | 145 | 146 |
147 |
148 | 155 |
156 |
157 |
158 |
159 | Register Now! 160 |
161 |
162 | Forgot Password? 163 |
164 |
{this.getMessages()}
165 |
166 |
167 |
168 |
169 |
170 | 171 | ); 172 | } 173 | } 174 | 175 | export default Login; 176 | -------------------------------------------------------------------------------- /src/pages/LogoutComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Redirect } from "react-router-dom"; 3 | import AuthHandler from "../utils/AuthHandler"; 4 | 5 | class LogoutComponent extends React.Component { 6 | render() { 7 | AuthHandler.logoutUser(); 8 | return ; 9 | } 10 | } 11 | export default LogoutComponent; 12 | -------------------------------------------------------------------------------- /src/pages/MedicineAddComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | import { Link } from "react-router-dom"; 5 | 6 | class MedicineAddComponent extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.formSubmit = this.formSubmit.bind(this); 10 | } 11 | state = { 12 | errorRes: false, 13 | errorMessage: "", 14 | btnMessage: 0, 15 | sendData: false, 16 | companylist: [], 17 | medicinedetails: [ 18 | { salt_name: "", salt_qty: "", salt_qty_type: "", description: "" }, 19 | ], 20 | }; 21 | 22 | async formSubmit(event) { 23 | event.preventDefault(); 24 | this.setState({ btnMessage: 1 }); 25 | 26 | var apiHandler = new APIHandler(); 27 | var response = await apiHandler.saveMedicineData( 28 | event.target.name.value, 29 | event.target.medical_typ.value, 30 | event.target.buy_price.value, 31 | event.target.sell_price.value, 32 | event.target.c_gst.value, 33 | event.target.s_gst.value, 34 | event.target.batch_no.value, 35 | event.target.shelf_no.value, 36 | event.target.expire_date.value, 37 | event.target.mfg_date.value, 38 | event.target.company_id.value, 39 | event.target.description1.value, 40 | event.target.in_stock_total.value, 41 | event.target.qty_in_strip.value, 42 | this.state.medicinedetails 43 | ); 44 | console.log(response); 45 | this.setState({ btnMessage: 0 }); 46 | this.setState({ errorRes: response.data.error }); 47 | this.setState({ errorMessage: response.data.message }); 48 | this.setState({ sendData: true }); 49 | } 50 | 51 | componentDidMount() { 52 | this.LoadCompany(); 53 | } 54 | 55 | async LoadCompany() { 56 | var apihandler = new APIHandler(); 57 | var companydata = await apihandler.fetchCompanyOnly(); 58 | this.setState({ companylist: companydata.data }); 59 | } 60 | 61 | RemoveItems = () => { 62 | if (this.state.medicinedetails.length != 1) { 63 | this.state.medicinedetails.pop(this.state.medicinedetails.length - 1); 64 | } 65 | this.setState({}); 66 | }; 67 | 68 | handleInput = (event) => { 69 | var keyname = event.target.name; 70 | var value = event.target.value; 71 | var index = event.target.getAttribute("data-index"); 72 | this.state.medicinedetails[index][keyname] = value; 73 | this.setState({}); 74 | console.log(this.state.medicinedetails); 75 | }; 76 | 77 | AddItem = () => { 78 | var item = { 79 | salt_name: "", 80 | salt_qty: "", 81 | salt_qty_type: "", 82 | description: "", 83 | }; 84 | 85 | this.state.medicinedetails.push(item); 86 | this.setState({}); 87 | }; 88 | 89 | render() { 90 | return ( 91 |
92 |
93 |
94 |

ADD Medicine

95 |
96 |
97 |
98 |
99 |
100 |

Add Medicine

101 |
102 |
103 |
104 | 105 |
106 |
107 | 114 |
115 |
116 | 117 |
118 |
119 | 126 |
127 |
128 | 129 |
130 |
131 | 138 |
139 |
140 | 141 |
142 |
143 | 150 |
151 |
152 | 153 |
154 |
155 | 162 |
163 |
164 | 165 |
166 |
167 | 174 |
175 |
176 | 177 |
178 |
179 | 186 |
187 |
188 | 189 |
190 |
191 | 198 |
199 |
200 | 201 |
202 |
203 | 210 |
211 |
212 | 213 |
214 |
215 | 222 |
223 |
224 | 225 |
226 |
227 | 234 |
235 |
236 | 237 |
238 |
239 | 246 |
247 |
248 | 249 |
250 |
251 | 258 |
259 |
260 | 261 |
262 | 273 |
274 |
275 |
276 | 283 |
284 |
285 | 292 |
293 |
294 | {this.state.medicinedetails.map((item, index) => ( 295 |
296 |
297 | 298 |
299 | 308 |
309 |
310 |
311 | 312 |
313 | 322 |
323 |
324 |
325 | 326 |
327 | 336 |
337 |
338 |
339 | 340 |
341 | 350 |
351 |
352 |
353 | ))} 354 | 363 |
364 | {this.state.errorRes == false && 365 | this.state.sendData == true ? ( 366 |
367 | Success! {this.state.errorMessage}. 368 |
369 | ) : ( 370 | "" 371 | )} 372 | {this.state.errorRes == true && 373 | this.state.sendData == true ? ( 374 |
375 | Failed! 376 | {this.state.errorMessage}. 377 |
378 | ) : ( 379 | "" 380 | )} 381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 | ); 389 | } 390 | } 391 | 392 | export default MedicineAddComponent; 393 | -------------------------------------------------------------------------------- /src/pages/MedicineManageComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AuthHandler from "../utils/AuthHandler"; 3 | import APIHandler from "../utils/APIHandler"; 4 | import { Link } from "react-router-dom"; 5 | 6 | class MedicineManageComponent extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.formSubmit = this.formSubmit.bind(this); 10 | } 11 | state = { 12 | errorRes: false, 13 | errorMessage: "", 14 | btnMessage: 0, 15 | sendData: false, 16 | companylist: [], 17 | medicinedetails: [], 18 | medicineDataList: [], 19 | dataLoaded: false, 20 | name: "", 21 | medical_typ: "", 22 | buy_price: "", 23 | sell_price: "", 24 | c_gst: "", 25 | s_gst: "", 26 | batch_no: "", 27 | shelf_no: "", 28 | expire_date: "", 29 | mfg_date: "", 30 | company_id: "", 31 | description1: "", 32 | in_stock_total: "", 33 | qty_in_strip: "", 34 | total_salt_list: 0, 35 | medicine_id: 0, 36 | }; 37 | 38 | async formSubmit(event) { 39 | event.preventDefault(); 40 | this.setState({ btnMessage: 1 }); 41 | var apiHandler = new APIHandler(); 42 | var response = await apiHandler.editMedicineData( 43 | event.target.name.value, 44 | event.target.medical_typ.value, 45 | event.target.buy_price.value, 46 | event.target.sell_price.value, 47 | event.target.c_gst.value, 48 | event.target.s_gst.value, 49 | event.target.batch_no.value, 50 | event.target.shelf_no.value, 51 | event.target.expire_date.value, 52 | event.target.mfg_date.value, 53 | event.target.company_id.value, 54 | event.target.description1.value, 55 | event.target.in_stock_total.value, 56 | event.target.qty_in_strip.value, 57 | this.state.medicinedetails, 58 | this.state.medicine_id 59 | ); 60 | console.log(response); 61 | this.setState({ btnMessage: 0 }); 62 | this.setState({ errorRes: response.data.error }); 63 | this.setState({ errorMessage: response.data.message }); 64 | this.setState({ sendData: true }); 65 | } 66 | 67 | componentDidMount() { 68 | this.LoadInitialData(); 69 | } 70 | 71 | async LoadInitialData() { 72 | var apihandler = new APIHandler(); 73 | var companydata = await apihandler.fetchCompanyOnly(); 74 | var medicinedata = await apihandler.fetchAllMedicine(); 75 | this.setState({ companylist: companydata.data }); 76 | this.setState({ medicineDataList: medicinedata.data.data }); 77 | this.setState({ dataLoaded: true }); 78 | } 79 | 80 | RemoveItems = () => { 81 | if (this.state.medicinedetails.length != this.state.total_salt_list) { 82 | this.state.medicinedetails.pop(this.state.medicinedetails.length - 1); 83 | } 84 | this.setState({}); 85 | }; 86 | 87 | handleInput = (event) => { 88 | var keyname = event.target.name; 89 | var value = event.target.value; 90 | var index = event.target.getAttribute("data-index"); 91 | this.state.medicinedetails[index][keyname] = value; 92 | this.setState({}); 93 | console.log(this.state.medicinedetails); 94 | }; 95 | 96 | AddItem = () => { 97 | var item = { 98 | salt_name: "", 99 | salt_qty: "", 100 | salt_qty_type: "", 101 | description: "", 102 | id: 0, 103 | }; 104 | 105 | this.state.medicinedetails.push(item); 106 | this.setState({}); 107 | }; 108 | 109 | viewmedicineDetails = (index) => { 110 | console.log(this.state.medicineDataList[index]); 111 | this.setState({ medicine_id: this.state.medicineDataList[index].id }); 112 | this.setState({ name: this.state.medicineDataList[index].name }); 113 | this.setState({ 114 | medical_typ: this.state.medicineDataList[index].medical_typ, 115 | }); 116 | this.setState({ buy_price: this.state.medicineDataList[index].buy_price }); 117 | this.setState({ 118 | sell_price: this.state.medicineDataList[index].sell_price, 119 | }); 120 | this.setState({ c_gst: this.state.medicineDataList[index].c_gst }); 121 | this.setState({ s_gst: this.state.medicineDataList[index].s_gst }); 122 | this.setState({ batch_no: this.state.medicineDataList[index].batch_no }); 123 | this.setState({ shelf_no: this.state.medicineDataList[index].shelf_no }); 124 | this.setState({ 125 | expire_date: this.state.medicineDataList[index].expire_date, 126 | }); 127 | this.setState({ mfg_date: this.state.medicineDataList[index].mfg_date }); 128 | this.setState({ 129 | company_id: this.state.medicineDataList[index].company_id, 130 | }); 131 | this.setState({ 132 | description1: this.state.medicineDataList[index].description, 133 | }); 134 | this.setState({ 135 | in_stock_total: this.state.medicineDataList[index].in_stock_total, 136 | }); 137 | this.setState({ 138 | qty_in_strip: this.state.medicineDataList[index].qty_in_strip, 139 | }); 140 | this.setState({ 141 | total_salt_list: this.state.medicineDataList[index].medicine_details 142 | .length, 143 | }); 144 | this.setState({ 145 | medicinedetails: this.state.medicineDataList[index].medicine_details, 146 | }); 147 | }; 148 | 149 | render() { 150 | return ( 151 |
152 |
153 |
154 |

Manage Medicine

155 |
156 | 157 |
158 |
159 |
160 |
161 | {this.state.dataLoaded == false ? ( 162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 | ) : ( 175 | "" 176 | )} 177 |

All Medicine

178 |
179 |
180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | {this.state.medicineDataList.map((medicine, index) => ( 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 215 | 223 | 224 | ))} 225 | 226 |
#IDNAMEMedical TypeBuy PriceSell PriceBatch NoShelf NoExpire DateMfg DateIn StockCompanyAdded OnAction
{medicine.id}{medicine.name}{medicine.medical_typ}{medicine.buy_price}{medicine.sell_price}{medicine.batch_no}{medicine.shelf_no}{medicine.expire_date}{medicine.mfg_date}{medicine.in_stock_total}{medicine.company.name} 213 | {new Date(medicine.added_on).toLocaleString()} 214 | 216 | 222 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |

Manage Medicine

236 |
237 |
238 |
239 | 240 |
241 |
242 | 250 |
251 |
252 | 253 |
254 |
255 | 263 |
264 |
265 | 266 |
267 |
268 | 276 |
277 |
278 | 279 |
280 |
281 | 289 |
290 |
291 | 292 |
293 |
294 | 302 |
303 |
304 | 305 |
306 |
307 | 315 |
316 |
317 | 318 |
319 |
320 | 328 |
329 |
330 | 331 |
332 |
333 | 341 |
342 |
343 | 344 |
345 |
346 | 354 |
355 |
356 | 357 |
358 |
359 | 367 |
368 |
369 | 370 |
371 |
372 | 380 |
381 |
382 | 383 |
384 |
385 | 393 |
394 |
395 | 396 |
397 |
398 | 406 |
407 |
408 | 409 |
410 | 427 |
428 |
429 |
430 | 437 |
438 |
439 | 446 |
447 |
448 | {this.state.medicinedetails.map((item, index) => ( 449 |
450 |
451 | 452 |
453 | 463 |
464 |
465 |
466 | 467 |
468 | 478 |
479 |
480 |
481 | 482 |
483 | 493 |
494 |
495 |
496 | 497 |
498 | 508 |
509 |
510 |
511 | ))} 512 | 521 |
522 | {this.state.errorRes == false && 523 | this.state.sendData == true ? ( 524 |
525 | Success! {this.state.errorMessage}. 526 |
527 | ) : ( 528 | "" 529 | )} 530 | {this.state.errorRes == true && 531 | this.state.sendData == true ? ( 532 |
533 | Failed! 534 | {this.state.errorMessage}. 535 |
536 | ) : ( 537 | "" 538 | )} 539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 | ); 547 | } 548 | } 549 | 550 | export default MedicineManageComponent; 551 | -------------------------------------------------------------------------------- /src/utils/APIHandler.js: -------------------------------------------------------------------------------- 1 | import { reactLocalStorage } from "reactjs-localstorage"; 2 | 3 | const { default: AuthHandler } = require("./AuthHandler"); 4 | const { default: Axios } = require("axios"); 5 | const { default: Config } = require("./Config"); 6 | 7 | class APIHandler { 8 | async checkLogin() { 9 | if (AuthHandler.checkTokenExpiry()) { 10 | try { 11 | var response = await Axios.post(Config.refreshApiUrl, { 12 | refresh: AuthHandler.getRefreshToken(), 13 | }); 14 | 15 | reactLocalStorage.set("token", response.data.access); 16 | } catch (error) { 17 | console.log(error); 18 | 19 | //Not Using Valid Token for Refresh then Logout the User 20 | AuthHandler.logoutUser(); 21 | window.location = "/"; 22 | } 23 | } 24 | } 25 | 26 | async saveCompanyData( 27 | name, 28 | license_no, 29 | address, 30 | contact_no, 31 | email, 32 | description 33 | ) { 34 | await this.checkLogin(); 35 | //Wait Until Token Get Updated 36 | 37 | var response = await Axios.post( 38 | Config.companyApiUrl, 39 | { 40 | name: name, 41 | license_no: license_no, 42 | address: address, 43 | contact_no: contact_no, 44 | email: email, 45 | description: description, 46 | }, 47 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 48 | ); 49 | 50 | return response; 51 | } 52 | 53 | async fetchAllCompany() { 54 | await this.checkLogin(); 55 | 56 | var response = await Axios.get(Config.companyApiUrl, { 57 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 58 | }); 59 | 60 | return response; 61 | } 62 | 63 | async fetchHomePage() { 64 | await this.checkLogin(); 65 | 66 | var response = await Axios.get(Config.homeApiUrl, { 67 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 68 | }); 69 | 70 | return response; 71 | } 72 | 73 | async fetchAllCustomerRequest() { 74 | await this.checkLogin(); 75 | 76 | var response = await Axios.get(Config.customerRequestApiUrl, { 77 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 78 | }); 79 | 80 | return response; 81 | } 82 | 83 | async fetchAllCompanyAccount() { 84 | await this.checkLogin(); 85 | 86 | var response = await Axios.get(Config.companyAccountApiUrl, { 87 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 88 | }); 89 | 90 | return response; 91 | } 92 | 93 | async fetchCompanyDetails(id) { 94 | await this.checkLogin(); 95 | 96 | var response = await Axios.get(Config.companyApiUrl + "" + id + "/", { 97 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 98 | }); 99 | 100 | return response; 101 | } 102 | 103 | async fetchMedicineByName(name) { 104 | if (name != "") { 105 | await this.checkLogin(); 106 | 107 | var response = await Axios.get(Config.medicineNameApiUrl + "" + name, { 108 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 109 | }); 110 | 111 | return response; 112 | } else { 113 | return { data: [] }; 114 | } 115 | } 116 | 117 | async editCompanyData( 118 | name, 119 | license_no, 120 | address, 121 | contact_no, 122 | email, 123 | description, 124 | id 125 | ) { 126 | await this.checkLogin(); 127 | //Wait Until Token Get Updated 128 | 129 | var response = await Axios.put( 130 | Config.companyApiUrl + "" + id + "/", 131 | { 132 | name: name, 133 | license_no: license_no, 134 | address: address, 135 | contact_no: contact_no, 136 | email: email, 137 | description: description, 138 | }, 139 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 140 | ); 141 | 142 | return response; 143 | } 144 | 145 | async saveCompanyBankData(bank_account_no, ifsc_no, company_id) { 146 | await this.checkLogin(); 147 | //Wait Until Token Get Updated 148 | 149 | var response = await Axios.post( 150 | Config.companyBankApiUrl, 151 | { 152 | bank_account_no: bank_account_no, 153 | ifsc_no: ifsc_no, 154 | company_id: company_id, 155 | }, 156 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 157 | ); 158 | 159 | return response; 160 | } 161 | 162 | async saveCustomerRequestData(name, phone, medicine_details, prescription) { 163 | await this.checkLogin(); 164 | //Wait Until Token Get Updated 165 | var formData = new FormData(); 166 | formData.append("customer_name", name); 167 | formData.append("phone", phone); 168 | formData.append("medicine_details", medicine_details); 169 | formData.append("prescription", prescription); 170 | 171 | var response = await Axios.post(Config.customerRequestApiUrl, formData, { 172 | headers: { 173 | Authorization: "Bearer " + AuthHandler.getLoginToken(), 174 | "Content-Type": "multipart/form-data", 175 | }, 176 | }); 177 | 178 | return response; 179 | } 180 | 181 | async updateCustomerRequest(customer_id, name, phone, medicine_details) { 182 | await this.checkLogin(); 183 | //Wait Until Token Get Updated 184 | 185 | var response = await Axios.put( 186 | Config.customerRequestApiUrl + "" + customer_id + "/", 187 | { 188 | customer_name: name, 189 | phone: phone, 190 | medicine_details: medicine_details, 191 | status: 1, 192 | }, 193 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 194 | ); 195 | return response; 196 | } 197 | 198 | async fetchCompanyBankDetails(id) { 199 | await this.checkLogin(); 200 | 201 | var response = await Axios.get(Config.companyBankApiUrl + "" + id + "/", { 202 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 203 | }); 204 | 205 | return response; 206 | } 207 | 208 | async generateBill(name, address, phone, medicineDetails) { 209 | await this.checkLogin(); 210 | 211 | var response = await Axios.post( 212 | Config.generateBillApiUrl, 213 | { 214 | name: name, 215 | address: address, 216 | contact: phone, 217 | medicine_details: medicineDetails, 218 | }, 219 | { 220 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 221 | } 222 | ); 223 | 224 | return response; 225 | } 226 | 227 | async editCompanyBankData(bank_account_no, ifsc_no, company_id, id) { 228 | await this.checkLogin(); 229 | //Wait Until Token Get Updated 230 | 231 | var response = await Axios.put( 232 | Config.companyBankApiUrl + "" + id + "/", 233 | { 234 | bank_account_no: bank_account_no, 235 | ifsc_no: ifsc_no, 236 | company_id: company_id, 237 | }, 238 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 239 | ); 240 | 241 | return response; 242 | } 243 | 244 | async fetchCompanyOnly() { 245 | await this.checkLogin(); 246 | 247 | var response = await Axios.get(Config.companyOnly, { 248 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 249 | }); 250 | 251 | return response; 252 | } 253 | 254 | async saveMedicineData( 255 | name, 256 | medical_typ, 257 | buy_price, 258 | sell_price, 259 | c_gst, 260 | s_gst, 261 | batch_no, 262 | shelf_no, 263 | expire_date, 264 | mfg_date, 265 | company_id, 266 | description, 267 | in_stock_total, 268 | qty_in_strip, 269 | medicinedetails 270 | ) { 271 | await this.checkLogin(); 272 | //Wait Until Token Get Updated 273 | 274 | var response = await Axios.post( 275 | Config.medicineApiUrl, 276 | { 277 | name: name, 278 | medical_typ: medical_typ, 279 | buy_price: buy_price, 280 | sell_price: sell_price, 281 | c_gst: c_gst, 282 | s_gst: s_gst, 283 | batch_no: batch_no, 284 | shelf_no: shelf_no, 285 | expire_date: expire_date, 286 | mfg_date: mfg_date, 287 | company_id: company_id, 288 | description: description, 289 | in_stock_total: in_stock_total, 290 | qty_in_strip: qty_in_strip, 291 | medicine_details: medicinedetails, 292 | }, 293 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 294 | ); 295 | 296 | return response; 297 | } 298 | 299 | async fetchAllMedicine() { 300 | await this.checkLogin(); 301 | 302 | var response = await Axios.get(Config.medicineApiUrl, { 303 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 304 | }); 305 | 306 | return response; 307 | } 308 | 309 | async editMedicineData( 310 | name, 311 | medical_typ, 312 | buy_price, 313 | sell_price, 314 | c_gst, 315 | s_gst, 316 | batch_no, 317 | shelf_no, 318 | expire_date, 319 | mfg_date, 320 | company_id, 321 | description, 322 | in_stock_total, 323 | qty_in_strip, 324 | medicinedetails, 325 | id 326 | ) { 327 | await this.checkLogin(); 328 | //Wait Until Token Get Updated 329 | 330 | var response = await Axios.put( 331 | Config.medicineApiUrl + "" + id + "/", 332 | { 333 | name: name, 334 | medical_typ: medical_typ, 335 | buy_price: buy_price, 336 | sell_price: sell_price, 337 | c_gst: c_gst, 338 | s_gst: s_gst, 339 | batch_no: batch_no, 340 | shelf_no: shelf_no, 341 | expire_date: expire_date, 342 | mfg_date: mfg_date, 343 | company_id: company_id, 344 | description: description, 345 | in_stock_total: in_stock_total, 346 | qty_in_strip: qty_in_strip, 347 | medicine_details: medicinedetails, 348 | }, 349 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 350 | ); 351 | 352 | return response; 353 | } 354 | 355 | async saveCompanyTransactionData( 356 | company_id, 357 | transaction_type, 358 | transaction_amt, 359 | transaction_date, 360 | payment_mode 361 | ) { 362 | await this.checkLogin(); 363 | //Wait Until Token Get Updated 364 | 365 | var response = await Axios.post( 366 | Config.companyAccountApiUrl, 367 | { 368 | company_id: company_id, 369 | transaction_type: transaction_type, 370 | transaction_amt: transaction_amt, 371 | transaction_date: transaction_date, 372 | payment_mode: payment_mode, 373 | }, 374 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 375 | ); 376 | 377 | return response; 378 | } 379 | 380 | async fetchEmployee() { 381 | await this.checkLogin(); 382 | 383 | var response = await Axios.get(Config.employeeApiURL, { 384 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 385 | }); 386 | 387 | return response; 388 | } 389 | 390 | async saveEmployeeData(name, joining_date, phone, address) { 391 | await this.checkLogin(); 392 | //Wait Until Token Get Updated 393 | 394 | var response = await Axios.post( 395 | Config.employeeApiURL, 396 | { 397 | name: name, 398 | joining_date: joining_date, 399 | phone: phone, 400 | address: address, 401 | }, 402 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 403 | ); 404 | 405 | return response; 406 | } 407 | 408 | async fetchEmployeeById(id) { 409 | await this.checkLogin(); 410 | 411 | var response = await Axios.get(Config.employeeApiURL + "" + id + "/", { 412 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 413 | }); 414 | 415 | return response; 416 | } 417 | 418 | async editEmployeeData(name, joining_date, phone, address, id) { 419 | await this.checkLogin(); 420 | //Wait Until Token Get Updated 421 | 422 | var response = await Axios.put( 423 | Config.employeeApiURL + "" + id + "/", 424 | { 425 | name: name, 426 | joining_date: joining_date, 427 | phone: phone, 428 | address: address, 429 | }, 430 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 431 | ); 432 | 433 | return response; 434 | } 435 | 436 | async fetchSalaryEmployee(id) { 437 | await this.checkLogin(); 438 | 439 | var response = await Axios.get(Config.employeeSalaryByIdApiUrl + "" + id, { 440 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 441 | }); 442 | 443 | return response; 444 | } 445 | 446 | async fetchBankEmployee(id) { 447 | await this.checkLogin(); 448 | 449 | var response = await Axios.get(Config.employeeBankApiUrlBYID + "" + id, { 450 | headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() }, 451 | }); 452 | 453 | return response; 454 | } 455 | 456 | async AddEmployeeSalaryData(salary_date, salary_amount, employee_id) { 457 | await this.checkLogin(); 458 | //Wait Until Token Get Updated 459 | 460 | var response = await Axios.post( 461 | Config.employeeSalaryApiUrl, 462 | { 463 | salary_date: salary_date, 464 | salary_amount: salary_amount, 465 | employee_id: employee_id, 466 | }, 467 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 468 | ); 469 | 470 | return response; 471 | } 472 | 473 | async AddEmployeeBankData(bank_account_no, ifsc_no, employee_id) { 474 | await this.checkLogin(); 475 | //Wait Until Token Get Updated 476 | 477 | var response = await Axios.post( 478 | Config.employeeBankApiUrl, 479 | { 480 | bank_account_no: bank_account_no, 481 | ifsc_no: ifsc_no, 482 | employee_id: employee_id, 483 | }, 484 | { headers: { Authorization: "Bearer " + AuthHandler.getLoginToken() } } 485 | ); 486 | 487 | return response; 488 | } 489 | } 490 | 491 | export default APIHandler; 492 | -------------------------------------------------------------------------------- /src/utils/AuthHandler.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import Config from "./Config"; 3 | import { reactLocalStorage } from "reactjs-localstorage"; 4 | 5 | class AuthHandler { 6 | static login(username, password, callback) { 7 | axios 8 | .post(Config.loginUrl, { username: username, password: password }) 9 | .then(function (response) { 10 | if (response.status === 200) { 11 | reactLocalStorage.set("token", response.data.access); 12 | reactLocalStorage.set("refresh", response.data.refresh); 13 | callback({ error: false, message: "Login Successfull..." }); 14 | } 15 | }) 16 | .catch(function (error) { 17 | callback({ 18 | error: true, 19 | message: "Error During Login Invalid Login Details..", 20 | }); 21 | }); 22 | } 23 | 24 | static loggedIn() { 25 | if (reactLocalStorage.get("token") && reactLocalStorage.get("refresh")) { 26 | return true; 27 | } else { 28 | return false; 29 | } 30 | } 31 | 32 | static getLoginToken() { 33 | return reactLocalStorage.get("token"); 34 | } 35 | 36 | static getRefreshToken() { 37 | return reactLocalStorage.get("refresh"); 38 | } 39 | 40 | static logoutUser() { 41 | reactLocalStorage.remove("token"); 42 | reactLocalStorage.remove("refresh"); 43 | } 44 | 45 | static checkTokenExpiry() { 46 | var expire = false; 47 | var token = this.getLoginToken(); 48 | var tokenArray = token.split("."); 49 | var jwt = JSON.parse(atob(tokenArray[1])); 50 | if (jwt && jwt.exp && Number.isFinite(jwt.exp)) { 51 | expire = jwt.exp * 1000; 52 | } else { 53 | expire = false; 54 | } 55 | 56 | if (!expire) { 57 | return false; 58 | } 59 | 60 | return Date.now() > expire; 61 | } 62 | } 63 | 64 | export default AuthHandler; 65 | -------------------------------------------------------------------------------- /src/utils/Config.js: -------------------------------------------------------------------------------- 1 | class Config { 2 | //BASE_URL = "https://medicalstoreapi.herokuapp.com/"; 3 | //FOR LIVE URL 4 | // static loginUrl = "https://medicalstoreapi.herokuapp.com/api/gettoken/"; 5 | // static refreshApiUrl = 6 | // "https://medicalstoreapi.herokuapp.com/api/resfresh_token/"; 7 | // static companyApiUrl = "https://medicalstoreapi.herokuapp.com/api/company/"; 8 | // static homeApiUrl = "https://medicalstoreapi.herokuapp.com/api/home_api/"; 9 | // static customerRequestApiUrl = 10 | // "https://medicalstoreapi.herokuapp.com/api/customer_request/"; 11 | // static medicineNameApiUrl = 12 | // "https://medicalstoreapi.herokuapp.com/api/medicinebyname/"; 13 | // static companyBankApiUrl = 14 | // "https://medicalstoreapi.herokuapp.com/api/companybank/"; 15 | // static generateBillApiUrl = 16 | // "https://medicalstoreapi.herokuapp.com/api/generate_bill_api/"; 17 | // static companyAccountApiUrl = 18 | // "https://medicalstoreapi.herokuapp.com/api/companyaccount/"; 19 | // static companyOnly = "https://medicalstoreapi.herokuapp.com/api/companyonly/"; 20 | // static employeeApiURL = "https://medicalstoreapi.herokuapp.com/api/employee/"; 21 | // static medicineApiUrl = "https://medicalstoreapi.herokuapp.com/api/medicine/"; 22 | // static employeeBankApiUrl = 23 | // "https://medicalstoreapi.herokuapp.com/api/employee_all_bank/"; 24 | // static employeeBankApiUrlBYID = 25 | // "https://medicalstoreapi.herokuapp.com/api/employee_bankby_id/"; 26 | // static employeeSalaryApiUrl = 27 | // "https://medicalstoreapi.herokuapp.com/api/employee_all_salary/"; 28 | // static employeeSalaryByIdApiUrl = 29 | // "https://medicalstoreapi.herokuapp.com/api/employee_salaryby_id/"; 30 | 31 | //FOR TEST URL 32 | static loginUrl = "http://127.0.0.1:8000/api/gettoken/"; 33 | static refreshApiUrl = "http://127.0.0.1:8000/api/resfresh_token/"; 34 | static companyApiUrl = "http://127.0.0.1:8000/api/company/"; 35 | static homeApiUrl = "http://127.0.0.1:8000/api/home_api/"; 36 | static customerRequestApiUrl = "http://127.0.0.1:8000/api/customer_request/"; 37 | static medicineNameApiUrl = "http://127.0.0.1:8000/api/medicinebyname/"; 38 | static companyBankApiUrl = "http://127.0.0.1:8000/api/companybank/"; 39 | static generateBillApiUrl = "http://127.0.0.1:8000/api/generate_bill_api/"; 40 | static companyAccountApiUrl = "http://127.0.0.1:8000/api/companyaccount/"; 41 | static companyOnly = "http://127.0.0.1:8000/api/companyonly/"; 42 | static employeeApiURL = "http://127.0.0.1:8000/api/employee/"; 43 | static medicineApiUrl = "http://127.0.0.1:8000/api/medicine/"; 44 | static employeeBankApiUrl = "http://127.0.0.1:8000/api/employee_all_bank/"; 45 | static employeeBankApiUrlBYID = 46 | "http://127.0.0.1:8000/api/employee_bankby_id/"; 47 | static employeeSalaryApiUrl = 48 | "http://127.0.0.1:8000/api/employee_all_salary/"; 49 | static employeeSalaryByIdApiUrl = 50 | "http://127.0.0.1:8000/api/employee_salaryby_id/"; 51 | static homeUrl = "/home"; 52 | static logoutPageUrl = "/logout"; 53 | 54 | static sidebarItem = [ 55 | { index: "0", title: "Home", url: "/home", icons: "home" }, 56 | { index: "1", title: "Company", url: "/company", icons: "assessment" }, 57 | { 58 | index: "2", 59 | title: "Add Medicine", 60 | url: "/addMedicine", 61 | icons: "assessment", 62 | }, 63 | { 64 | index: "3", 65 | title: "Manage Medicine", 66 | url: "/manageMedicine", 67 | icons: "assessment", 68 | }, 69 | { 70 | index: "4", 71 | title: "Manage Company Account", 72 | url: "/manageCompanyAccount", 73 | icons: "assessment", 74 | }, 75 | { 76 | index: "5", 77 | title: "Manage Employee", 78 | url: "/employeeManage", 79 | icons: "assessment", 80 | }, 81 | { 82 | index: "6", 83 | title: "Generate Bill", 84 | url: "/generateBill", 85 | icons: "assessment", 86 | }, 87 | { 88 | index: "7", 89 | title: "Customer Request", 90 | url: "/customerRequest", 91 | icons: "assessment", 92 | }, 93 | ]; 94 | } 95 | 96 | export default Config; 97 | -------------------------------------------------------------------------------- /src/utils/PrivateRoute.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Route, Redirect } from "react-router-dom"; 3 | import AuthHandler from "./AuthHandler"; 4 | 5 | export var PrivateRoute = ({ component: Component, ...rest }) => { 6 | console.log({ ...rest }); 7 | console.log(rest); 8 | 9 | return ( 10 | 13 | AuthHandler.loggedIn() ? : 14 | } 15 | /> 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /src/utils/PrivateRouteNew.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Route, Redirect } from "react-router-dom"; 3 | import AuthHandler from "./AuthHandler"; 4 | import MainComponent from "../components/MainComponent"; 5 | 6 | export var PrivateRouteNew = ({ page, activepage, ...rest }) => { 7 | return ( 8 | 11 | AuthHandler.loggedIn() ? ( 12 | 13 | ) : ( 14 | 15 | ) 16 | } 17 | /> 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /src/utils/canvasjs.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var CanvasJS = require('./canvasjs.min'); 3 | CanvasJS = CanvasJS.Chart ? CanvasJS : window.CanvasJS; 4 | 5 | class CanvasJSChart extends React.Component { 6 | static _cjsContainerId = 0 7 | constructor(props) { 8 | super(props); 9 | this.options = props.options ? props.options : {}; 10 | this.containerProps = props.containerProps ? props.containerProps : {width: "100%", position: "relative"}; 11 | this.containerProps.height = props.containerProps && props.containerProps.height ? props.containerProps.height : this.options.height ? this.options.height + "px" : "400px"; 12 | this.chartContainerId = "canvasjs-react-chart-container-" + CanvasJSChart._cjsContainerId++; 13 | } 14 | componentDidMount() { 15 | //Create Chart and Render 16 | this.chart = new CanvasJS.Chart(this.chartContainerId, this.options); 17 | this.chart.render(); 18 | 19 | if(this.props.onRef) 20 | this.props.onRef(this.chart); 21 | } 22 | shouldComponentUpdate(nextProps, nextState){ 23 | //Check if Chart-options has changed and determine if component has to be updated 24 | return !(nextProps.options === this.options); 25 | } 26 | componentDidUpdate() { 27 | //Update Chart Options & Render 28 | this.chart.options = this.props.options; 29 | this.chart.render(); 30 | } 31 | componentWillUnmount() { 32 | //Destroy chart and remove reference 33 | this.chart.destroy(); 34 | if(this.props.onRef) 35 | this.props.onRef(undefined); 36 | } 37 | render() { 38 | //return React.createElement('div', { id: this.chartContainerId, style: this.containerProps }); 39 | return
40 | } 41 | } 42 | 43 | var CanvasJSReact = { 44 | CanvasJSChart: CanvasJSChart, 45 | CanvasJS: CanvasJS 46 | }; 47 | 48 | export default CanvasJSReact; --------------------------------------------------------------------------------