diff --git a/package-lock.json b/package-lock.json index 5d5c58b..91115fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "date-fns": "^4.1.0", "devtools-detect": "^4.0.2", "exceljs": "^4.3.0", + "file-saver": "^2.0.5", "google-maps-react": "^2.0.6", "highcharts": "^11.4.3", "highcharts-react-official": "^3.2.1", @@ -547,7 +548,6 @@ "version": "16.14.0", "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -596,7 +596,6 @@ "version": "7.28.6", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz", "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==", - "peer": true, "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", @@ -647,6 +646,7 @@ "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz", "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==", "license": "MIT", + "peer": true, "dependencies": { "@babel/types": "^7.27.3" }, @@ -781,6 +781,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.28.6.tgz", "integrity": "sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, @@ -796,6 +797,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.28.0.tgz", "integrity": "sha512-D6Eujc2zMxKjfa4Zxl4GHMsmhKKZ9VpcqIchJLvwTxad9zWIYulwYItBovpDOoNLISpcZSXoDJ5gaGbQUDqViA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, @@ -811,6 +813,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.28.6.tgz", "integrity": "sha512-61bxqhiRfAACulXSLd/GxqmAedUSrRZIu/cbaT18T1CetkTmtDN15it7i80ru4DVqRK1WMxQhXs+Lf9kajm5Ow==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-module-imports": "^7.28.6", @@ -830,6 +833,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.27.1.tgz", "integrity": "sha512-ykDdF5yI4f1WrAolLqeF3hmYU12j9ntLQl/AOG1HAS21jxyg1Q0/J/tpREuYLfatGdGmXp/3yS0ZA76kOlVq9Q==", "license": "MIT", + "peer": true, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.27.1" }, @@ -875,6 +879,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.27.1.tgz", "integrity": "sha512-JfuinvDOsD9FVMTHpzA/pBLisxpv1aSf+OIV8lgH3MuWrks19R27e6a6DipIg4aX1Zm9Wpb04p8wljfKrVSnPA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1" @@ -990,7 +995,6 @@ "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.1.0.tgz", "integrity": "sha512-UfMBMWc1v7J+14AhH03QmeNwV3HZx3qnOWhpwnHfzALEwAwlV/itQOQqcasMQYhOHWL0tiymc5ByaLTn7KKQxw==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -1010,7 +1014,6 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz", "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==", - "peer": true, "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", @@ -1141,7 +1144,6 @@ "version": "11.14.0", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -1187,7 +1189,6 @@ "version": "11.14.1", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -2009,7 +2010,6 @@ "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz", "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==", "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.", - "peer": true, "dependencies": { "@babel/runtime": "^7.4.4", "@material-ui/styles": "^4.11.5", @@ -2046,7 +2046,6 @@ "version": "4.11.3", "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz", "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==", - "peer": true, "dependencies": { "@babel/runtime": "^7.4.4" }, @@ -3017,7 +3016,6 @@ "version": "16.14.0", "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -3087,7 +3085,6 @@ "version": "5.90.20", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.20.tgz", "integrity": "sha512-vXBxa+qeyveVO7OA0jX1z+DeyCA4JKnThKv411jd5SORpBKgkcVnYKCiBgECvADvniBX7tobwBmg01qq9JmMJw==", - "peer": true, "dependencies": { "@tanstack/query-core": "5.90.20" }, @@ -3356,7 +3353,6 @@ "version": "18.3.27", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz", "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==", - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -3367,7 +3363,6 @@ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", "devOptional": true, - "peer": true, "peerDependencies": { "@types/react": "^18.0.0" } @@ -3504,7 +3499,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3534,6 +3528,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", "integrity": "sha512-Ajr4IcMXq/2QmMkEmSvxqfLN5zGmJ92gHXAeOXq1OekoH2rfDNsgdDoL2f7QaRCy7G/E6TpxBVdRuNraMztGHw==", "license": "MIT", + "peer": true, "dependencies": { "co": "^4.6.0", "fast-deep-equal": "^1.0.0", @@ -3584,7 +3579,8 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", "integrity": "sha512-fueX787WZKCV0Is4/T2cyAdM4+x1S3MXXOAhavE1ys/W42SHAPacLTQhucja22QBYrfGw50M2sRiXPtTGv9Ymw==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/align-text": { "version": "0.1.4", @@ -3677,7 +3673,6 @@ "version": "5.29.3", "resolved": "https://registry.npmjs.org/antd/-/antd-5.29.3.tgz", "integrity": "sha512-3DdbGCa9tWAJGcCJ6rzR8EJFsv2CtyEbkVabZE14pfgUHfCicWCj0/QzQVLDYg8CPfQk9BH7fHCoTXHTy7MP/A==", - "peer": true, "dependencies": { "@ant-design/colors": "^7.2.1", "@ant-design/cssinjs": "^1.23.0", @@ -4055,7 +4050,6 @@ "version": "1.13.3", "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.3.tgz", "integrity": "sha512-ERT8kdX7DZjtUm7IitEyV7InTHAF42iJuMArIiDIV5YtPanJkgw4hw5Dyg9fh0mihdWNn1GKaeIWErfe56UQ1g==", - "peer": true, "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.4", @@ -4344,7 +4338,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -4725,6 +4718,7 @@ "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==", "license": "MIT", + "peer": true, "engines": { "iojs": ">= 1.0.0", "node": ">= 0.12.0" @@ -5248,7 +5242,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/kossnocorp" @@ -5257,8 +5250,7 @@ "node_modules/dayjs": { "version": "1.11.19", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz", - "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==", - "peer": true + "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==" }, "node_modules/debounce-fn": { "version": "6.0.0", @@ -5901,7 +5893,6 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -6612,6 +6603,12 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-saver": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", + "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==", + "license": "MIT" + }, "node_modules/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", @@ -7200,8 +7197,7 @@ "node_modules/highcharts": { "version": "11.4.8", "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.4.8.tgz", - "integrity": "sha512-5Tke9LuzZszC4osaFisxLIcw7xgNGz4Sy3Jc9pRMV+ydm6sYqsPYdU8ELOgpzGNrbrRNDRBtveoR5xS3SzneEA==", - "peer": true + "integrity": "sha512-5Tke9LuzZszC4osaFisxLIcw7xgNGz4Sy3Jc9pRMV+ydm6sYqsPYdU8ELOgpzGNrbrRNDRBtveoR5xS3SzneEA==" }, "node_modules/highcharts-react-official": { "version": "3.2.3", @@ -8026,7 +8022,6 @@ "resolved": "https://registry.npmjs.org/javascript-obfuscator/-/javascript-obfuscator-4.2.2.tgz", "integrity": "sha512-+7oXAUnFCA6vS0omIGHcWpSr67dUBIF7FKGYSXyzxShSLqM6LBgdugWKFl0XrYtGWyJMGfQR5F4LL85iCefkRA==", "dev": true, - "peer": true, "dependencies": { "@javascript-obfuscator/escodegen": "2.3.1", "@javascript-obfuscator/estraverse": "5.4.0", @@ -8327,7 +8322,8 @@ "version": "0.3.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", "integrity": "sha512-4JD/Ivzg7PoW8NzdrBSr3UFwC9mHgvI7Z6z3QGBsSHgKaRTUDmyZAAKJo2UbG1kUVfS9WS8bi36N49U1xw43DA==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/json-schema-typed": { "version": "8.0.2", @@ -9007,7 +9003,6 @@ "version": "2.30.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", - "peer": true, "engines": { "node": "*" } @@ -9722,7 +9717,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "peer": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -10495,7 +10489,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -10656,7 +10649,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -10726,8 +10718,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "peer": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-qr-code": { "version": "2.0.18", @@ -10745,7 +10736,6 @@ "version": "8.1.3", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz", "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==", - "peer": true, "dependencies": { "@babel/runtime": "^7.12.1", "@types/hoist-non-react-statics": "^3.3.1", @@ -11026,7 +11016,6 @@ "version": "4.2.1", "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", - "peer": true, "dependencies": { "@babel/runtime": "^7.9.2" } @@ -11043,8 +11032,7 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz", "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==", - "dev": true, - "peer": true + "dev": true }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", @@ -11408,7 +11396,6 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz", "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==", "dev": true, - "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -12849,7 +12836,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.14.tgz", "integrity": "sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==", "dev": true, - "peer": true, "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", diff --git a/src/Components/Skeleton/BillingTableSkeleton.jsx b/src/Components/Skeleton/BillingTableSkeleton.jsx index d25fa46..bfb4b12 100644 --- a/src/Components/Skeleton/BillingTableSkeleton.jsx +++ b/src/Components/Skeleton/BillingTableSkeleton.jsx @@ -1,46 +1,55 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import './BillingTableSkeleton.scss'; const BillingTableSkeleton = () => { + const [rowCount, setRowCount] = useState(window.innerWidth < 768 ? 1 : 6); + + useEffect(() => { + const handleResize = () => { + setRowCount(window.innerWidth < 768 ? 2 : 6); + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + const rows = Array(rowCount).fill(0); + + const Row = () => ( +
+
+
+
+
+
+
+ ); + return (
-
-
-
-
-
+ {Array(5) + .fill(0) + .map((_, i) => ( +
+ ))}
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
+ {rows.map((_, i) => ( + + ))}
-
-
+ {[1, 2].map((i) => ( +
+ ))}
+
diff --git a/src/Components/Skeleton/BillingTableSkeleton.scss b/src/Components/Skeleton/BillingTableSkeleton.scss index 7d932c8..89eb467 100644 --- a/src/Components/Skeleton/BillingTableSkeleton.scss +++ b/src/Components/Skeleton/BillingTableSkeleton.scss @@ -13,12 +13,28 @@ animation: shimmer 1.4s infinite; border-radius: 4px; } +.skeletonHeader { + background: linear-gradient(90deg, #f3f3f3 25%, #f3f3f3 37%, #f3f3f3 63%); + background-size: 1000px 100%; + animation: shimmer 1.4s infinite; + border-radius: 4px; +} .billing-skeleton { background: #fff; - max-width: 420px; + max-width: 420px; border-radius: 8px; overflow: hidden; + width: 340px; + height: 80vh; + position: relative; + margin-top: 1rem; + @media (max-width: 768px) { + max-width: 100%; + width: 95vw; + height: 150px; + margin-top: 0; + } } .billing-header { @@ -26,14 +42,20 @@ grid-template-columns: 40px 1fr 50px 60px 30px; gap: 8px; padding: 10px; - background: #dde3e6; + background: #e6e9eb; + @media (max-width: 768px) { + display: none; + } } .billing-row { display: grid; grid-template-columns: 40px 1fr 50px 60px 30px; gap: 8px; - padding: 10px; + padding: 7px 10px; + @media (max-width: 768px) { + display: none; + } } .billing-bottom { @@ -41,6 +63,9 @@ gap: 10px; padding: 10px; border-top: 1px solid #ddd; + position: absolute; + bottom: 0; + width: 100%; } .billing-left, @@ -54,5 +79,5 @@ } .billing-total { - height: 48px; + height: 38px; } diff --git a/src/Components/Skeleton/CardSkeleton.jsx b/src/Components/Skeleton/CardSkeleton.jsx index defc91d..18e1bfb 100644 --- a/src/Components/Skeleton/CardSkeleton.jsx +++ b/src/Components/Skeleton/CardSkeleton.jsx @@ -1,27 +1,34 @@ import React from 'react'; import './CardSkeleton.scss'; import NavbarSkeleton from './NavbarSkeleton'; +import BillingTableSkeleton from './BillingTableSkeleton'; const CardSkeleton = ({ count = 15 }) => { return ( <>
-
- {Array.from({ length: count }).map((_, index) => ( -
-
-
-
-
+
+
+ {Array.from({ length: count }).map((_, index) => ( +
+
+
+
+
+
-
- ))} + ))} +
+ +
+ +
); diff --git a/src/Components/Skeleton/CardSkeleton.scss b/src/Components/Skeleton/CardSkeleton.scss index 3660e96..d8fe91d 100644 --- a/src/Components/Skeleton/CardSkeleton.scss +++ b/src/Components/Skeleton/CardSkeleton.scss @@ -19,7 +19,14 @@ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 1rem; - width: 100%; + width: 80%; + overflow: hidden; + height: 40vh; + @media (max-width: 768px) { + width: 100%; + margin-top: 0; + height: 70vh; + } } .card-skeleton { @@ -47,3 +54,16 @@ height: 14px; width: 90%; } +.salesSkelton { + display: flex; + align-items: flex-start; + width: 100%; + gap: 1rem; + height: 100%; + padding: 10px; + @media (max-width: 768px) { + flex-direction: column; + height: 80vh; + justify-content: space-between; + } +} diff --git a/src/Components/Skeleton/NavbarSkeleton.scss b/src/Components/Skeleton/NavbarSkeleton.scss index 5faac41..ce7e149 100644 --- a/src/Components/Skeleton/NavbarSkeleton.scss +++ b/src/Components/Skeleton/NavbarSkeleton.scss @@ -1,15 +1,14 @@ @keyframes shimmer { - 0% { background-position: -500px 0; } - 100% { background-position: 500px 0; } + 0% { + background-position: -500px 0; + } + 100% { + background-position: 500px 0; + } } .skeleton { - background: linear-gradient( - 90deg, - #e0e0e0 25%, - #f0f0f0 37%, - #e0e0e0 63% - ); + background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 37%, #e0e0e0 63%); background-size: 1000px 100%; animation: shimmer 1.4s infinite; border-radius: 6px; @@ -23,6 +22,7 @@ padding: 10px 16px; background: #fff; border-bottom: 1px solid #ddd; + border-radius: 6px; } /* LEFT */ @@ -82,4 +82,11 @@ width: 36px; height: 36px; border-radius: 8px; -} \ No newline at end of file +} + +@media (max-width: 768px) { + .skeleton .navbar-search, + .nav-icons { + display: none; + } +} diff --git a/src/Pages/BookingScreen/Components/PrintMainPage/SalesPrintSize.jsx b/src/Pages/BookingScreen/Components/PrintMainPage/SalesPrintSize.jsx index 5e4a320..15bfe85 100644 --- a/src/Pages/BookingScreen/Components/PrintMainPage/SalesPrintSize.jsx +++ b/src/Pages/BookingScreen/Components/PrintMainPage/SalesPrintSize.jsx @@ -401,7 +401,7 @@ const SalesPrintSize = ({ onSettingsChange, closeModel }) => {

Print : {selectedTemplate?.StyleName}

-
+
{
{ Select Print Mode

-
+
0 ? () => Print() : (() => { })} + onClick={LedgerData?.length > 0 ? () => Print() : () => {}} className={ LedgerData?.length > 0 ? 'ItemWiseReport-printerIcon' : 'ItemWiseReport-printerIcon-disabled' } /> - 0 ? "Export as Excel" : "No data to Export"} placement="top"> -
0 ? 'pointer' : 'not-allowed', opacity: LedgerData?.length > 0 ? 1 : 0.5 }}> + 0 + ? 'Export as Excel' + : 'No data to Export' + } + placement="top" + > +
0 ? 'pointer' : 'not-allowed', + opacity: LedgerData?.length > 0 ? 1 : 0.5, + }} + > Excel Export 0 ? () => exportToExcel() : (() => { })} + onClick={ + LedgerData?.length > 0 + ? () => exportToExcel() + : () => {} + } />
@@ -896,10 +927,10 @@ const LedgerReport = () => { style={ row.TypeName === 'OB' ? { - color: 'red', - fontWeight: 500, - fontSize: '15px', - } + color: 'red', + fontWeight: 500, + fontSize: '15px', + } : { color: 'black' } } > diff --git a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss index 2b902ef..b100c2a 100644 --- a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss +++ b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss @@ -13,6 +13,18 @@ width: 32px !important; height: 32px !important; } + .ant-form-item { + margin-bottom: 0 !important; + } + .Combosearch .ant-select.ant-select-in-form-item { + width: unset !important; + } + .Combosearch { + height: unset !important; + } + @media (max-width: 500px) { + padding: 0rem 10px; + } } .BSBillingNav2div2 { diff --git a/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarDragItems.scss b/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarDragItems.scss index ff9866a..f661693 100644 --- a/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarDragItems.scss +++ b/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarDragItems.scss @@ -9,7 +9,7 @@ button { padding: 6px 14px; - font-family: 'Poppins'; + font-family: "Poppins"; border: none; outline: none; border-radius: 5px; @@ -35,7 +35,7 @@ width: 100%; justify-content: space-between; align-items: center; - font-family: 'Poppins'; + font-family: "Poppins"; h3 { font-weight: 500; @@ -76,6 +76,7 @@ left: 0; top: 9rem; width: 100vw !important; + right: 0; padding: 1rem 1rem !important; } @@ -84,7 +85,7 @@ } .AddFavItemListCont { - height: 50vh; + height: 34vh; padding-bottom: 4rem; } }