ีupgrade #1
425
package-lock.json
generated
425
package-lock.json
generated
@ -4965,6 +4965,21 @@
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-ppc64-gnu": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.2.tgz",
|
||||
"integrity": "sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.8.tgz",
|
||||
@ -4979,6 +4994,21 @@
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-musl": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.2.tgz",
|
||||
"integrity": "sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-s390x-gnu": {
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.8.tgz",
|
||||
@ -13825,6 +13855,401 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
|
||||
"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.4.4",
|
||||
"picomatch": "^4.0.2",
|
||||
"postcss": "^8.5.3",
|
||||
"rollup": "^4.34.9",
|
||||
"tinyglobby": "^0.2.13"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/vitejs/vite?sponsor=1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
|
||||
"jiti": ">=1.21.0",
|
||||
"less": "*",
|
||||
"lightningcss": "^1.21.0",
|
||||
"sass": "*",
|
||||
"sass-embedded": "*",
|
||||
"stylus": "*",
|
||||
"sugarss": "*",
|
||||
"terser": "^5.16.0",
|
||||
"tsx": "^4.8.1",
|
||||
"yaml": "^2.4.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/node": {
|
||||
"optional": true
|
||||
},
|
||||
"jiti": {
|
||||
"optional": true
|
||||
},
|
||||
"less": {
|
||||
"optional": true
|
||||
},
|
||||
"lightningcss": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass-embedded": {
|
||||
"optional": true
|
||||
},
|
||||
"stylus": {
|
||||
"optional": true
|
||||
},
|
||||
"sugarss": {
|
||||
"optional": true
|
||||
},
|
||||
"terser": {
|
||||
"optional": true
|
||||
},
|
||||
"tsx": {
|
||||
"optional": true
|
||||
},
|
||||
"yaml": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-android-arm-eabi": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.2.tgz",
|
||||
"integrity": "sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-android-arm64": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.2.tgz",
|
||||
"integrity": "sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-darwin-arm64": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.2.tgz",
|
||||
"integrity": "sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-darwin-x64": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.2.tgz",
|
||||
"integrity": "sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-freebsd-arm64": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.46.2.tgz",
|
||||
"integrity": "sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-freebsd-x64": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.2.tgz",
|
||||
"integrity": "sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-arm-gnueabihf": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.2.tgz",
|
||||
"integrity": "sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-arm-musleabihf": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.2.tgz",
|
||||
"integrity": "sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-arm64-gnu": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.2.tgz",
|
||||
"integrity": "sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-arm64-musl": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.2.tgz",
|
||||
"integrity": "sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-loongarch64-gnu": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.2.tgz",
|
||||
"integrity": "sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.2.tgz",
|
||||
"integrity": "sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-s390x-gnu": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.2.tgz",
|
||||
"integrity": "sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-x64-gnu": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.2.tgz",
|
||||
"integrity": "sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-linux-x64-musl": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.2.tgz",
|
||||
"integrity": "sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-win32-arm64-msvc": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.2.tgz",
|
||||
"integrity": "sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-win32-ia32-msvc": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.2.tgz",
|
||||
"integrity": "sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@rollup/rollup-win32-x64-msvc": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.2.tgz",
|
||||
"integrity": "sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite/node_modules/rollup": {
|
||||
"version": "4.46.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.2.tgz",
|
||||
"integrity": "sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.8"
|
||||
},
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0",
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rollup/rollup-android-arm-eabi": "4.46.2",
|
||||
"@rollup/rollup-android-arm64": "4.46.2",
|
||||
"@rollup/rollup-darwin-arm64": "4.46.2",
|
||||
"@rollup/rollup-darwin-x64": "4.46.2",
|
||||
"@rollup/rollup-freebsd-arm64": "4.46.2",
|
||||
"@rollup/rollup-freebsd-x64": "4.46.2",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.46.2",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.46.2",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.46.2",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.46.2",
|
||||
"@rollup/rollup-linux-loongarch64-gnu": "4.46.2",
|
||||
"@rollup/rollup-linux-ppc64-gnu": "4.46.2",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.46.2",
|
||||
"@rollup/rollup-linux-riscv64-musl": "4.46.2",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.46.2",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.46.2",
|
||||
"@rollup/rollup-linux-x64-musl": "4.46.2",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.46.2",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.46.2",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.46.2",
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/void-elements": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
|
||||
|
||||
@ -1,36 +1,47 @@
|
||||
/* Admin Container */
|
||||
.admin-container {
|
||||
padding: 24px;
|
||||
padding: 2rem !important;
|
||||
min-height: 100dvh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: var(--primary-red);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
color: var(--white);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
.header-subtitle {
|
||||
color: var(--light-gray);
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Statistics Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
gap: 10px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--medium-gray) !important;
|
||||
/* background: var(--medium-gray) !important; */
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
@ -86,8 +97,9 @@
|
||||
}
|
||||
|
||||
.stat-info h3 {
|
||||
color: var(--white);
|
||||
font-size: 28px;
|
||||
/* color: var(--white); */
|
||||
color: rgb(110, 110, 110);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@ -100,7 +112,7 @@
|
||||
|
||||
/* Tabs Card */
|
||||
.tabs-card {
|
||||
background: var(--medium-gray) !important;
|
||||
/* background: var(--medium-gray) !important; */
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
@ -121,9 +133,9 @@
|
||||
}
|
||||
|
||||
.tab-header h3 {
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
/* color: var(--white); */
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@ -169,6 +181,35 @@
|
||||
background-color: var(--primary-red) !important;
|
||||
}
|
||||
|
||||
th {
|
||||
white-space: nowrap;
|
||||
/* ไม่ให้ตัดบรรทัด */
|
||||
width: auto;
|
||||
/* ยืดตามเนื้อหา */
|
||||
background-color: #b00000 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
white-space: nowrap;
|
||||
/* ไม่ให้ตัดบรรทัด */
|
||||
width: auto;
|
||||
/* ยืดตามเนื้อหา */
|
||||
color: #000 !important;
|
||||
padding: 0.25rem 1rem !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* Table Card */
|
||||
.table-card {
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* User Table */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
@ -208,12 +249,15 @@
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
align-items: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.action-buttons button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
.action-buttons > button {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.action-buttons ::ng-deep .mat-mdc-icon-button {
|
||||
@ -256,9 +300,10 @@
|
||||
}
|
||||
|
||||
.setting-card ::ng-deep .mat-mdc-card-title {
|
||||
color: var(--white);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
/* color: var(--white); */
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #727272;
|
||||
}
|
||||
|
||||
.setting-card ::ng-deep .mat-mdc-card-subtitle {
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
<div class="admin-container">
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<mat-icon class="header-icon" aria-hidden="false">security</mat-icon>
|
||||
<h1>Admin Settings</h1>
|
||||
<p>Manage users, permissions, and system settings</p>
|
||||
</div>
|
||||
<p class="header-subtitle">Manage users, permissions, and system settings</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Statistics -->
|
||||
<div class="stats-grid">
|
||||
<mat-card class="stat-card">
|
||||
<mat-card class="stat-card border-card">
|
||||
<mat-card-content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon users">
|
||||
@ -22,7 +25,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="stat-card">
|
||||
<mat-card class="stat-card border-card">
|
||||
<mat-card-content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon active">
|
||||
@ -36,7 +39,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="stat-card">
|
||||
<mat-card class="stat-card border-card">
|
||||
<mat-card-content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon uptime">
|
||||
@ -50,7 +53,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="stat-card">
|
||||
<mat-card class="stat-card border-card">
|
||||
<mat-card-content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon backup">
|
||||
@ -66,14 +69,16 @@
|
||||
</div>
|
||||
|
||||
<!-- Admin Tabs -->
|
||||
<mat-card class="tabs-card">
|
||||
<mat-card class="tabs-card border-card">
|
||||
<mat-card-content>
|
||||
<mat-tab-group [selectedIndex]="selectedTabIndex">
|
||||
<mat-tab label="User Management">
|
||||
<div class="tab-content">
|
||||
<div class="tab-header">
|
||||
<div>
|
||||
<h3>User Management</h3>
|
||||
<p>Manage employee accounts and permissions</p>
|
||||
</div>
|
||||
<button mat-raised-button color="primary" (click)="createUser()">
|
||||
<mat-icon>person_add</mat-icon>
|
||||
Add User
|
||||
@ -158,12 +163,14 @@
|
||||
<mat-tab label="System Settings">
|
||||
<div class="tab-content">
|
||||
<div class="tab-header">
|
||||
<div>
|
||||
<h3>System Settings</h3>
|
||||
<p>Manage system configuration and maintenance</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-grid">
|
||||
<mat-card class="setting-card">
|
||||
<mat-card class="setting-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Data Export</mat-card-title>
|
||||
<mat-card-subtitle>Export master data and reports</mat-card-subtitle>
|
||||
@ -179,7 +186,7 @@
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="setting-card">
|
||||
<mat-card class="setting-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>System Backup</mat-card-title>
|
||||
<mat-card-subtitle>Create system backup</mat-card-subtitle>
|
||||
@ -195,7 +202,7 @@
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="setting-card">
|
||||
<mat-card class="setting-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>System Logs</mat-card-title>
|
||||
<mat-card-subtitle>View system activity logs</mat-card-subtitle>
|
||||
|
||||
@ -70,18 +70,22 @@
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
top: 5px;
|
||||
right: 4px;
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
border-radius: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 0.75rem;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -98,6 +102,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: -2px;
|
||||
}
|
||||
|
||||
/* Sidenav Container */
|
||||
@ -313,7 +321,8 @@
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar {
|
||||
width: 250px; /* Keep full width */
|
||||
width: 250px;
|
||||
/* Keep full width */
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@ -336,7 +345,8 @@
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px; /* Keep full width even on mobile */
|
||||
width: 250px;
|
||||
/* Keep full width even on mobile */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -515,3 +525,15 @@
|
||||
min-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 1rem;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -3,10 +3,7 @@
|
||||
<mat-toolbar class="top-navbar">
|
||||
<div class="navbar-left">
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button mat-icon-button
|
||||
class="mobile-menu-toggle"
|
||||
(click)="toggleSidebar()"
|
||||
[class.menu-open]="isSidebarOpen">
|
||||
<button mat-icon-button class="mobile-menu-toggle" (click)="toggleSidebar()" [class.menu-open]="isSidebarOpen">
|
||||
<!-- <i class="pi pi-bars"></i> -->
|
||||
</button>
|
||||
|
||||
@ -62,10 +59,7 @@
|
||||
<!-- Main Layout with Sidebar -->
|
||||
<mat-sidenav-container class="sidenav-container">
|
||||
<!-- Left Sidebar -->
|
||||
<mat-sidenav #sidenav
|
||||
[mode]="isMobile ? 'over' : 'side'"
|
||||
[opened]="!isMobile || isSidebarOpen"
|
||||
class="sidebar"
|
||||
<mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [opened]="!isMobile || isSidebarOpen" class="sidebar"
|
||||
(openedChange)="onSidebarToggle($event)">
|
||||
|
||||
<!-- Mobile Close Button -->
|
||||
@ -83,14 +77,14 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a mat-list-item
|
||||
*ngFor="let item of filteredMenuItems"
|
||||
[routerLink]="item.route"
|
||||
routerLinkActive="active-link"
|
||||
class="menu-item"
|
||||
(click)="onMenuItemClick()">
|
||||
<i class="pi {{item.icon}} menu-icon"></i>
|
||||
<span matListItemTitle>{{item.label}}</span>
|
||||
<a mat-list-item *ngFor="let item of filteredMenuItems" [routerLink]="item.route" routerLinkActive="active-link"
|
||||
class="menu-item menu-item-drawer" (click)="onMenuItemClick()">
|
||||
<span matListItemTitle>
|
||||
<span class="menu-content">
|
||||
<i class="pi {{ item.icon }} menu-icon"></i>
|
||||
<span class="menu-label">{{ item.label }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<mat-divider class="menu-divider"></mat-divider>
|
||||
@ -102,12 +96,12 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a mat-list-item routerLink="/admin" class="menu-item" (click)="onMenuItemClick()">
|
||||
<a mat-list-item routerLink="/admin" class="menu-item menu-item-drawer" routerLinkActive="active-link" (click)="onMenuItemClick()">
|
||||
<i class="pi pi-shield menu-icon"></i>
|
||||
<span matListItemTitle>Admin Setting</span>
|
||||
</a>
|
||||
|
||||
<a mat-list-item routerLink="/logout" class="menu-item" (click)="onMenuItemClick()">
|
||||
<a mat-list-item routerLink="/logout" class="menu-item menu-item-drawer" (click)="onMenuItemClick()">
|
||||
<i class="pi pi-sign-out menu-icon"></i>
|
||||
<span matListItemTitle>Logout</span>
|
||||
</a>
|
||||
@ -117,9 +111,7 @@
|
||||
<!-- Main Content Area -->
|
||||
<mat-sidenav-content class="main-content">
|
||||
<!-- Mobile Overlay -->
|
||||
<div class="mobile-overlay"
|
||||
*ngIf="isMobile && isSidebarOpen"
|
||||
(click)="closeSidebar()">
|
||||
<div class="mobile-overlay" *ngIf="isMobile && isSidebarOpen" (click)="closeSidebar()">
|
||||
</div>
|
||||
|
||||
<!-- Content Header -->
|
||||
|
||||
@ -1,36 +1,75 @@
|
||||
/* Asset List Container */
|
||||
.asset-list-container {
|
||||
padding: 24px;
|
||||
padding: 2rem !important;
|
||||
/* background-color: var(--dark-gray); */
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: var(--primary-red);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
color: var(--white);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
color: var(--light-gray);
|
||||
font-size: 16px;
|
||||
.header-title h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-title h1 {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
color: var(--light-gray);
|
||||
font-size: 14px;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Filter Card */
|
||||
.filter-card {
|
||||
background: var(--medium-gray) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-button.primary {
|
||||
background-color: var(--primary-red);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.action-button.secondary {
|
||||
background-color: transparent;
|
||||
color: #000 !important;
|
||||
border: 1px solid rgb(173, 173, 173) !important;
|
||||
}
|
||||
|
||||
.filter-card ::ng-deep .mat-mdc-card-content {
|
||||
padding: 24px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
@ -77,17 +116,46 @@
|
||||
color: var(--light-gray);
|
||||
}
|
||||
|
||||
.filter-row button {
|
||||
/* .filter-row button {
|
||||
height: 56px;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: var(--light-gray);
|
||||
} */
|
||||
|
||||
th {
|
||||
white-space: nowrap;
|
||||
/* ไม่ให้ตัดบรรทัด */
|
||||
width: auto;
|
||||
/* ยืดตามเนื้อหา */
|
||||
background-color: #b00000 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
white-space: nowrap;
|
||||
/* ไม่ให้ตัดบรรทัด */
|
||||
width: auto;
|
||||
/* ยืดตามเนื้อหา */
|
||||
color: #000 !important;
|
||||
padding: 0.25rem 1rem !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* Table Card */
|
||||
.table-card {
|
||||
background: var(--medium-gray) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.action-buttons > button {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.table-card ::ng-deep .mat-mdc-card-content {
|
||||
@ -214,6 +282,11 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@ -255,3 +328,9 @@
|
||||
color: var(--white) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
@ -1,16 +1,26 @@
|
||||
<div class="asset-list-container">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<mat-icon class="header-icon" aria-hidden="false">receipt_long</mat-icon>
|
||||
<h1>Asset List</h1>
|
||||
<p>View and manage all registered assets</p>
|
||||
</div>
|
||||
<p class="header-subtitle">View and manage all registered assets</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<mat-card class="filter-card">
|
||||
<mat-card class="filter-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
Filter Options
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle>Refine your search criteria</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="filterForm" class="filter-form">
|
||||
<div class="filter-row">
|
||||
<form [formGroup]="filterForm" class="filter-grid filter-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Search Assets</mat-label>
|
||||
<input matInput formControlName="search" placeholder="Search by asset ID, name, department, or location">
|
||||
@ -43,18 +53,26 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button mat-stroked-button type="button" (click)="clearFilters()">
|
||||
<mat-icon>clear</mat-icon>
|
||||
Clear
|
||||
<!-- Action Buttons -->
|
||||
<div class="filter-actions">
|
||||
<button mat-raised-button color="primary" (click)="applyFilter()" class="action-button primary">
|
||||
<mat-icon class="button-icon" aria-hidden="false">filter_list</mat-icon>
|
||||
Apply Filters
|
||||
</button>
|
||||
|
||||
<button mat-stroked-button type="button" (click)="clearFilters()" class="action-button secondary">
|
||||
<mat-icon class="button-icon" aria-hidden="false">clear</mat-icon>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Table -->
|
||||
<mat-card class="table-card">
|
||||
<mat-card class="table-card border-card">
|
||||
<mat-card-content>
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="asset-table">
|
||||
@ -130,8 +148,13 @@
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
<!-- <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> -->
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<!-- Paginator -->
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons
|
||||
class="custom-paginator" />
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -1,6 +1,8 @@
|
||||
/* Asset Registration Container */
|
||||
.asset-registration-container {
|
||||
padding: 24px;
|
||||
padding: 2rem !important;
|
||||
min-height: 100dvh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
@ -8,20 +10,38 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.header-content >.header-subtitle {
|
||||
color: var(--light-gray);
|
||||
font-size: 14px;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: var(--primary-red);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
color: var(--white);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
color: var(--light-gray);
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.header-actions button {
|
||||
@ -31,8 +51,8 @@
|
||||
|
||||
/* Tabs Card */
|
||||
.tabs-card {
|
||||
background: var(--medium-gray) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
/* background: var(--medium-gray) !important; */
|
||||
/* border: 1px solid rgba(255, 255, 255, 0.1); */
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -46,9 +66,10 @@
|
||||
}
|
||||
|
||||
.tab-header h3 {
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
/* color: var(--white); */
|
||||
color: rgb(97, 97, 97);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@ -89,11 +110,33 @@
|
||||
background-color: var(--primary-red) !important;
|
||||
}
|
||||
|
||||
th {
|
||||
white-space: nowrap;
|
||||
/* ไม่ให้ตัดบรรทัด */
|
||||
width: auto;
|
||||
/* ยืดตามเนื้อหา */
|
||||
background-color: #b00000 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
white-space: nowrap;
|
||||
/* ไม่ให้ตัดบรรทัด */
|
||||
width: auto;
|
||||
/* ยืดตามเนื้อหา */
|
||||
color: #000 !important;
|
||||
padding: 0.25rem 1rem !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* Table Card */
|
||||
.table-card {
|
||||
background: var(--medium-gray) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-card ::ng-deep .mat-mdc-card-content {
|
||||
@ -138,6 +181,19 @@
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
align-items: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.action-buttons > button {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.action-buttons > button > mat-icon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-buttons button {
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
<div class="asset-registration-container">
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<mat-icon class="header-icon" aria-hidden="false">build</mat-icon>
|
||||
<h1>Asset Registration</h1>
|
||||
<p>Manage asset registration and track registration status</p>
|
||||
</div>
|
||||
<p class="header-subtitle">Manage asset registration and track registration status</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button mat-raised-button color="primary" (click)="registerAsset()">
|
||||
@ -13,7 +16,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<mat-card class="tabs-card">
|
||||
<mat-card class="tabs-card border-card">
|
||||
<mat-card-content>
|
||||
<mat-tab-group (selectedTabChange)="onTabChange($event)" [selectedIndex]="selectedTabIndex">
|
||||
<mat-tab label="All">
|
||||
@ -53,7 +56,7 @@
|
||||
</mat-card>
|
||||
|
||||
<!-- Table -->
|
||||
<mat-card class="table-card">
|
||||
<mat-card class="table-card border-card">
|
||||
<mat-card-content>
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="asset-table">
|
||||
@ -131,9 +134,11 @@
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<!-- Paginator -->
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons class="custom-paginator" />
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -1,6 +1,17 @@
|
||||
/* Asset Transfer Container */
|
||||
.asset-transfer-container {
|
||||
padding: 24px;
|
||||
padding: 2rem !important;
|
||||
min-height: 100dvh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: var(--primary-red);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
@ -8,14 +19,24 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.header-content>.header-subtitle {
|
||||
color: var(--light-gray);
|
||||
font-size: 14px;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
color: var(--white);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
@ -29,11 +50,33 @@
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
th {
|
||||
white-space: nowrap;
|
||||
/* ไม่ให้ตัดบรรทัด */
|
||||
width: auto;
|
||||
/* ยืดตามเนื้อหา */
|
||||
background-color: #b00000 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
white-space: nowrap;
|
||||
/* ไม่ให้ตัดบรรทัด */
|
||||
width: auto;
|
||||
/* ยืดตามเนื้อหา */
|
||||
color: #000 !important;
|
||||
padding: 0.25rem 1rem !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* Table Card */
|
||||
.table-card {
|
||||
background: var(--medium-gray) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-card ::ng-deep .mat-mdc-card-content {
|
||||
@ -78,12 +121,15 @@
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
align-items: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.action-buttons button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
.action-buttons > button {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.action-buttons ::ng-deep .mat-mdc-icon-button {
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
<div class="asset-transfer-container">
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<mat-icon class="header-icon" aria-hidden="false">settings_applications</mat-icon>
|
||||
<h1>Asset Transfer</h1>
|
||||
<p>Manage asset transfers between departments</p>
|
||||
</div>
|
||||
<p class="header-subtitle">Manage asset transfers between departments</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button mat-raised-button color="primary" (click)="createTransferRequest()">
|
||||
@ -13,7 +16,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<mat-card class="table-card">
|
||||
<mat-card class="table-card border-card">
|
||||
<mat-card-content>
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="transfer-table">
|
||||
@ -75,13 +78,16 @@
|
||||
<th mat-header-cell *matHeaderCellDef> Actions </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="action-buttons">
|
||||
<button mat-icon-button color="primary" (click)="viewTransferDetails(element)" matTooltip="View Details">
|
||||
<button mat-icon-button color="primary" (click)="viewTransferDetails(element)"
|
||||
matTooltip="View Details">
|
||||
<mat-icon>visibility</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="accent" (click)="approveTransfer(element)" matTooltip="Approve Transfer" *ngIf="element.status === 'Pending'">
|
||||
<button mat-icon-button color="accent" (click)="approveTransfer(element)" matTooltip="Approve Transfer"
|
||||
*ngIf="element.status === 'Pending'">
|
||||
<mat-icon>check</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="warn" (click)="rejectTransfer(element)" matTooltip="Reject Transfer" *ngIf="element.status === 'Pending'">
|
||||
<button mat-icon-button color="warn" (click)="rejectTransfer(element)" matTooltip="Reject Transfer"
|
||||
*ngIf="element.status === 'Pending'">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
@ -92,8 +98,13 @@
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
<!-- <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> -->
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<!-- Paginator -->
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons
|
||||
class="custom-paginator" />
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -1,6 +1,6 @@
|
||||
/* Dashboard Container */
|
||||
.dashboard-container {
|
||||
padding: 0.5rem;
|
||||
padding: 2rem !important;
|
||||
/* background-color: var(--dark-gray); */
|
||||
min-height: 100vh;
|
||||
}
|
||||
@ -12,8 +12,6 @@
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@ -22,16 +20,19 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-title h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
/* color: var(--white); */
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
color: var(--light-gray);
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
@ -118,11 +119,11 @@
|
||||
background-color: var(--accent-green);
|
||||
}
|
||||
|
||||
.active-assets .stat-icon {
|
||||
.active-users .stat-icon {
|
||||
background-color: var(--yellow-orange);
|
||||
}
|
||||
|
||||
.pending-assets .stat-icon {
|
||||
.pending-tasks .stat-icon {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
@ -185,6 +186,13 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-icon > .mat-icon {
|
||||
/* width: 24px;
|
||||
height: 24px; */
|
||||
width: auto !important;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.activity-asset {
|
||||
background-color: var(--accent-green);
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<!-- <mat-icon class="header-icon" aria-hidden="false">dashboard</mat-icon> -->
|
||||
<mat-icon class="header-icon" aria-hidden="false">dashboard</mat-icon>
|
||||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
<p class="header-subtitle">Welcome back! Here's an overview of your asset management system.</p>
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<!-- Statistics Cards -->
|
||||
<div class="stats-grid">
|
||||
<mat-card class="stat-card total-assets">
|
||||
<mat-card class="stat-card total-assets border-stat-card">
|
||||
<mat-card-content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon">
|
||||
@ -27,7 +27,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="stat-card total-value">
|
||||
<mat-card class="stat-card total-value border-stat-card">
|
||||
<mat-card-content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon">
|
||||
@ -42,7 +42,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="stat-card active-users">
|
||||
<mat-card class="stat-card active-users border-stat-card">
|
||||
<mat-card-content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon">
|
||||
@ -57,7 +57,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="stat-card pending-tasks">
|
||||
<mat-card class="stat-card pending-tasks border-stat-card">
|
||||
<mat-card-content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon">
|
||||
@ -76,7 +76,7 @@
|
||||
<!-- Content Grid -->
|
||||
<div class="content-grid">
|
||||
<!-- Recent Activities -->
|
||||
<mat-card class="content-card activities-card">
|
||||
<mat-card class="content-card activities-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon class="card-icon" aria-hidden="false">timeline</mat-icon>
|
||||
@ -85,7 +85,7 @@
|
||||
<mat-card-subtitle>Latest asset management activities</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="activity-list">
|
||||
<div class="activity-list mt-10">
|
||||
<div class="activity-item" *ngFor="let activity of recentActivities">
|
||||
<div class="activity-icon" [ngClass]="'activity-' + activity.type">
|
||||
<mat-icon aria-hidden="false">{{ activity.icon }}</mat-icon>
|
||||
@ -103,7 +103,7 @@
|
||||
</mat-card>
|
||||
|
||||
<!-- Asset Categories -->
|
||||
<mat-card class="content-card categories-card">
|
||||
<mat-card class="content-card categories-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon class="card-icon" aria-hidden="false">pie_chart</mat-icon>
|
||||
@ -112,8 +112,8 @@
|
||||
<mat-card-subtitle>Distribution by category</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="category-list">
|
||||
<div class="category-item" *ngFor="let category of assetCategories">
|
||||
<div class="category-list mt-10">
|
||||
<div class="category-item mt-10" *ngFor="let category of assetCategories">
|
||||
<div class="category-info">
|
||||
<div class="category-header">
|
||||
<div class="category-color" [ngClass]="'color-' + category.color"></div>
|
||||
@ -135,7 +135,7 @@
|
||||
</mat-card>
|
||||
|
||||
<!-- Maintenance Alerts -->
|
||||
<mat-card class="content-card alerts-card">
|
||||
<mat-card class="content-card alerts-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon class="card-icon" aria-hidden="false">warning</mat-icon>
|
||||
@ -144,7 +144,7 @@
|
||||
<mat-card-subtitle>Upcoming maintenance schedules</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="alert-list">
|
||||
<div class="alert-list mt-10">
|
||||
<div class="alert-item" *ngFor="let alert of maintenanceAlerts">
|
||||
<div class="alert-priority" [ngClass]="'priority-' + alert.priority.toLowerCase()"></div>
|
||||
<div class="alert-content">
|
||||
@ -152,7 +152,7 @@
|
||||
<h4>{{ alert.assetName }}</h4>
|
||||
<mat-chip [ngClass]="'priority-' + alert.priority.toLowerCase()">{{ alert.priority }}</mat-chip>
|
||||
</div>
|
||||
<p class="alert-description">{{ alert.description }}</p>
|
||||
<!-- <p class="alert-description">{{ alert.description }}</p> -->
|
||||
<p class="alert-date">Due: {{ alert.dueDate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
/* Purchase Orders Container */
|
||||
.purchase-orders-container {
|
||||
padding: 0.5rem;
|
||||
background-color: var(--dark-gray);
|
||||
min-height: 100vh;
|
||||
padding: 2rem !important;
|
||||
min-height: 100dvh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@ -22,27 +19,35 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-title h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
color: var(--light-gray);
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Filter Card */
|
||||
.filter-card {
|
||||
background-color: var(--medium-gray);
|
||||
/* background-color: var(--medium-gray); */
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
padding: 10px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filter-card ::ng-deep .mat-mdc-card-content {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
@ -96,8 +101,8 @@
|
||||
|
||||
.action-button.secondary {
|
||||
background-color: transparent;
|
||||
color: var(--white);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #000 !important;
|
||||
border: 1px solid rgb(173, 173, 173) !important;
|
||||
}
|
||||
|
||||
.action-button.secondary:hover {
|
||||
@ -117,9 +122,22 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
white-space: nowrap; /* ไม่ให้ตัดบรรทัด */
|
||||
width: auto; /* ยืดตามเนื้อหา */
|
||||
background-color: #b00000 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
white-space: nowrap; /* ไม่ให้ตัดบรรทัด */
|
||||
width: auto; /* ยืดตามเนื้อหา */
|
||||
color: #000 !important;
|
||||
padding: 0.25rem 1rem !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* Table Card */
|
||||
.table-card {
|
||||
background-color: var(--medium-gray);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
@ -137,7 +155,7 @@
|
||||
.table-header {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
/* font-weight: 600; */
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
||||
@ -11,17 +11,17 @@
|
||||
</div>
|
||||
|
||||
<!-- Filter Card -->
|
||||
<mat-card class="filter-card">
|
||||
<mat-card class="filter-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon class="card-icon" aria-hidden="false">filter_list</mat-icon>
|
||||
Filter Options
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle>Refine your search criteria</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="filter-grid">
|
||||
<div class="filter-grid mt-10">
|
||||
<!-- Year Filter -->
|
||||
<form [formGroup]="filterForm" class="filter-grid">
|
||||
<mat-form-field appearance="outline" class="filter-field">
|
||||
<mat-label>
|
||||
<mat-icon class="field-icon" aria-hidden="false">calendar_today</mat-icon>
|
||||
@ -33,7 +33,7 @@
|
||||
<mat-option value="2023">2023</mat-option>
|
||||
<mat-option value="2022">2022</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon>
|
||||
<!-- <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon> -->
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Month Filter -->
|
||||
@ -57,7 +57,7 @@
|
||||
<mat-option value="11">November</mat-option>
|
||||
<mat-option value="12">December</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon>
|
||||
<!-- <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon> -->
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Category Filter -->
|
||||
@ -74,7 +74,7 @@
|
||||
<mat-option value="Expense">Expense</mat-option>
|
||||
<mat-option value="Consumable">Consumable</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon>
|
||||
<!-- <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon> -->
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Search Field -->
|
||||
@ -84,31 +84,24 @@
|
||||
Search
|
||||
</mat-label>
|
||||
<input matInput formControlName="search" placeholder="Search PO ID, Product...">
|
||||
<mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">search</mat-icon>
|
||||
<!-- <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">search</mat-icon> -->
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="filter-actions">
|
||||
<button mat-raised-button
|
||||
color="primary"
|
||||
(click)="applyFilter()"
|
||||
class="action-button primary">
|
||||
<button mat-raised-button color="primary" (click)="applyFilter()" class="action-button primary">
|
||||
<mat-icon class="button-icon" aria-hidden="false">filter_list</mat-icon>
|
||||
Apply Filters
|
||||
</button>
|
||||
|
||||
<button mat-stroked-button
|
||||
(click)="clearFilters()"
|
||||
class="action-button secondary">
|
||||
<button mat-stroked-button (click)="clearFilters()" class="action-button secondary">
|
||||
<mat-icon class="button-icon" aria-hidden="false">clear</mat-icon>
|
||||
Clear Filters
|
||||
</button>
|
||||
|
||||
<button mat-raised-button
|
||||
color="accent"
|
||||
(click)="exportToExcel()"
|
||||
class="action-button accent">
|
||||
<button mat-raised-button color="accent" (click)="exportToExcel()" class="action-button accent">
|
||||
<mat-icon class="button-icon" aria-hidden="false">download</mat-icon>
|
||||
Export Excel
|
||||
</button>
|
||||
@ -117,16 +110,16 @@
|
||||
</mat-card>
|
||||
|
||||
<!-- Table Card -->
|
||||
<mat-card class="table-card">
|
||||
<mat-card class="table-card border-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon class="card-icon" aria-hidden="false">table_chart</mat-icon>
|
||||
<!-- <mat-icon class="card-icon" aria-hidden="false">table_chart</mat-icon> -->
|
||||
Purchase Orders
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle>Total: {{ dataSource.data.length }} records</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="table-container">
|
||||
<div class="table-container border-card mt-10">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="purchase-table">
|
||||
<!-- Company Column -->
|
||||
<ng-container matColumnDef="company">
|
||||
@ -246,12 +239,10 @@
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="table-row"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Paginator -->
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]"
|
||||
showFirstLastButtons
|
||||
class="custom-paginator">
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<!-- Paginator -->
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons class="custom-paginator" />
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -1,13 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PINEPIM Asset Management</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -307,3 +307,73 @@ li {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-drawer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-item-drawer > .mdc-list-item__content {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.menu-item-drawer > .mdc-list-item__content > span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-item-drawer:hover:not(.active-link) > .mdc-list-item__content > span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-item-drawer:hover > .mdc-list-item__content > span, .menu-item-drawer:active > .mdc-list-item__content > span, .menu-item-drawer:focus > .mdc-list-item__content > span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.border-stat-card {
|
||||
border-left: 4px solid #c80000;
|
||||
border-right: 1px solid #E3E3E3 !important;
|
||||
border-bottom: 1px solid #E3E3E3 !important;
|
||||
border-top: 1px solid #E3E3E3 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.border-stat-card:hover {
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 50px, rgba(0, 0, 0, 0.1) 0px 3px 6px !important;
|
||||
}
|
||||
|
||||
.border-card {
|
||||
border: 1px solid #E3E3E3 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.mt-10{
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.mdc-text-field {
|
||||
border: 1px solid #E3E3E3 !important;
|
||||
}
|
||||
|
||||
.mat-icon{
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.mat-mdc-paginator, .mat-mdc-paginator-outer-container {
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
.mat-mdc-paginator-page-size {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.mat-mdc-paginator-range-actions > .mat-mdc-paginator-range-label {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.filter-card ::ng-deep .mat-mdc-card-content {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-label-container {
|
||||
border-bottom: 1px solid #ebebeb !important;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user