teshin/pine-asset-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ีupgrade

Browse Source
This commit is contained in:
BANGJU 2025-08-08 17:37:33 +07:00
parent f77b6a647c
commit f07265ab20
17 changed files with 1168 additions and 366 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

425
package-lock.json generated
View File

@ -4965,6 +4965,21 @@
"linux" "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": { "node_modules/@rollup/rollup-linux-riscv64-gnu": {
"version": "4.34.8", "version": "4.34.8",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.8.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.8.tgz",
@ -4979,6 +4994,21 @@
"linux" "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": { "node_modules/@rollup/rollup-linux-s390x-gnu": {
"version": "4.34.8", "version": "4.34.8",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.8.tgz", "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": ">= 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": { "node_modules/void-elements": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",

93
src/app/admin/admin.component.css
View File

@ -1,36 +1,47 @@
/* Admin Container */ /* Admin Container */
.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 */
.page-header { .page-header {
margin-bottom: 24px; margin-bottom: 1rem;
padding: 5px 0;
} }
.header-content h1 { .header-content h1 {
color: var(--white); margin: 0;
font-size: 32px; font-weight: 600;
font-weight: 500; font-size: 1.375rem;
margin-bottom: 8px;
} }
.header-content p { .header-subtitle {
color: var(--light-gray); color: var(--light-gray);
font-size: 16px; font-size: 14px;
margin: 0; margin-top: 0.25rem;
} }
/* Statistics Grid */ /* Statistics Grid */
.stats-grid { .stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px; gap: 10px;
margin-bottom: 32px; margin-bottom: 32px;
} }
.stat-card { .stat-card {
background: var(--medium-gray) !important; /* background: var(--medium-gray) !important; */
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px; border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
@ -86,8 +97,9 @@
} }
.stat-info h3 { .stat-info h3 {
color: var(--white); /* color: var(--white); */
font-size: 28px; color: rgb(110, 110, 110);
font-size: 20px;
font-weight: 600; font-weight: 600;
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -100,7 +112,7 @@
/* Tabs Card */ /* Tabs Card */
.tabs-card { .tabs-card {
background: var(--medium-gray) !important; /* background: var(--medium-gray) !important; */
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px; border-radius: 12px;
} }
@ -121,9 +133,9 @@
} }
.tab-header h3 { .tab-header h3 {
color: var(--white); /* color: var(--white); */
font-size: 20px; font-size: 16px;
font-weight: 500; font-weight: 600;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -169,6 +181,35 @@
background-color: var(--primary-red) !important; 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 */ /* User Table */
.table-container { .table-container {
overflow-x: auto; overflow-x: auto;
@ -208,12 +249,15 @@
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: center; justify-content: center;
align-items: center !important;
padding: 0 !important;
} }
.action-buttons button { .action-buttons > button {
width: 32px; display: flex !important;
height: 32px; justify-content: center !important;
line-height: 32px; align-items: center !important;
padding: 0 !important;
} }
.action-buttons ::ng-deep .mat-mdc-icon-button { .action-buttons ::ng-deep .mat-mdc-icon-button {
@ -256,9 +300,10 @@
} }
.setting-card ::ng-deep .mat-mdc-card-title { .setting-card ::ng-deep .mat-mdc-card-title {
color: var(--white); /* color: var(--white); */
font-size: 18px; font-size: 16px;
font-weight: 500; font-weight: 600;
color: #727272;
} }
.setting-card ::ng-deep .mat-mdc-card-subtitle { .setting-card ::ng-deep .mat-mdc-card-subtitle {

25
src/app/admin/admin.component.html
View File

@ -1,14 +1,17 @@
<div class="admin-container"> <div class="admin-container">
<div class="page-header"> <div class="page-header">
<div class="header-content"> <div class="header-content">
<div class="header-title">
<mat-icon class="header-icon" aria-hidden="false">security</mat-icon>
<h1>Admin Settings</h1> <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>
</div> </div>
<!-- System Statistics --> <!-- System Statistics -->
<div class="stats-grid"> <div class="stats-grid">
<mat-card class="stat-card"> <mat-card class="stat-card border-card">
<mat-card-content> <mat-card-content>
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon users"> <div class="stat-icon users">
@ -22,7 +25,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="stat-card"> <mat-card class="stat-card border-card">
<mat-card-content> <mat-card-content>
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon active"> <div class="stat-icon active">
@ -36,7 +39,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="stat-card"> <mat-card class="stat-card border-card">
<mat-card-content> <mat-card-content>
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon uptime"> <div class="stat-icon uptime">
@ -50,7 +53,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="stat-card"> <mat-card class="stat-card border-card">
<mat-card-content> <mat-card-content>
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon backup"> <div class="stat-icon backup">
@ -66,14 +69,16 @@
</div> </div>
<!-- Admin Tabs --> <!-- Admin Tabs -->
<mat-card class="tabs-card"> <mat-card class="tabs-card border-card">
<mat-card-content> <mat-card-content>
<mat-tab-group [selectedIndex]="selectedTabIndex"> <mat-tab-group [selectedIndex]="selectedTabIndex">
<mat-tab label="User Management"> <mat-tab label="User Management">
<div class="tab-content"> <div class="tab-content">
<div class="tab-header"> <div class="tab-header">
<div>
<h3>User Management</h3> <h3>User Management</h3>
<p>Manage employee accounts and permissions</p> <p>Manage employee accounts and permissions</p>
</div>
<button mat-raised-button color="primary" (click)="createUser()"> <button mat-raised-button color="primary" (click)="createUser()">
<mat-icon>person_add</mat-icon> <mat-icon>person_add</mat-icon>
Add User Add User
@ -158,12 +163,14 @@
<mat-tab label="System Settings"> <mat-tab label="System Settings">
<div class="tab-content"> <div class="tab-content">
<div class="tab-header"> <div class="tab-header">
<div>
<h3>System Settings</h3> <h3>System Settings</h3>
<p>Manage system configuration and maintenance</p> <p>Manage system configuration and maintenance</p>
</div> </div>
</div>
<div class="settings-grid"> <div class="settings-grid">
<mat-card class="setting-card"> <mat-card class="setting-card border-card">
<mat-card-header> <mat-card-header>
<mat-card-title>Data Export</mat-card-title> <mat-card-title>Data Export</mat-card-title>
<mat-card-subtitle>Export master data and reports</mat-card-subtitle> <mat-card-subtitle>Export master data and reports</mat-card-subtitle>
@ -179,7 +186,7 @@
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>
<mat-card class="setting-card"> <mat-card class="setting-card border-card">
<mat-card-header> <mat-card-header>
<mat-card-title>System Backup</mat-card-title> <mat-card-title>System Backup</mat-card-title>
<mat-card-subtitle>Create system backup</mat-card-subtitle> <mat-card-subtitle>Create system backup</mat-card-subtitle>
@ -195,7 +202,7 @@
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>
<mat-card class="setting-card"> <mat-card class="setting-card border-card">
<mat-card-header> <mat-card-header>
<mat-card-title>System Logs</mat-card-title> <mat-card-title>System Logs</mat-card-title>
<mat-card-subtitle>View system activity logs</mat-card-subtitle> <mat-card-subtitle>View system activity logs</mat-card-subtitle>

36
src/app/app.component.css
View File

@ -70,18 +70,22 @@
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: flex;
justify-items: center;
align-items: center;
padding-left: 12px;
} }
.notification-badge { .notification-badge {
position: absolute; position: absolute;
top: -5px; top: 5px;
right: -5px; right: 4px;
background-color: var(--red); background-color: var(--red);
color: var(--white); color: var(--white);
border-radius: 50%; border-radius: 50%;
width: 18px; width: 15px;
height: 18px; height: 15px;
font-size: 0.75rem; font-size: 0.7rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -98,6 +102,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
padding-left: -2px;
} }
/* Sidenav Container */ /* Sidenav Container */
@ -313,7 +321,8 @@
/* Responsive Design */ /* Responsive Design */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.sidebar { .sidebar {
width: 250px; /* Keep full width */ width: 250px;
/* Keep full width */
} }
.main-content { .main-content {
@ -336,7 +345,8 @@
} }
.sidebar { .sidebar {
width: 250px; /* Keep full width even on mobile */ width: 250px;
/* Keep full width even on mobile */
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -515,3 +525,15 @@
min-height: 48px; min-height: 48px;
} }
} }
.menu-content {
display: flex;
align-items: center;
gap: 0.5rem;
}
.menu-icon {
font-size: 1rem;
width: 20px;
text-align: center;
}

32
src/app/app.component.html
View File

@ -3,10 +3,7 @@
<mat-toolbar class="top-navbar"> <mat-toolbar class="top-navbar">
<div class="navbar-left"> <div class="navbar-left">
<!-- Mobile Menu Toggle --> <!-- Mobile Menu Toggle -->
<button mat-icon-button <button mat-icon-button class="mobile-menu-toggle" (click)="toggleSidebar()" [class.menu-open]="isSidebarOpen">
class="mobile-menu-toggle"
(click)="toggleSidebar()"
[class.menu-open]="isSidebarOpen">
<!-- <i class="pi pi-bars"></i> --> <!-- <i class="pi pi-bars"></i> -->
</button> </button>
@ -62,10 +59,7 @@
<!-- Main Layout with Sidebar --> <!-- Main Layout with Sidebar -->
<mat-sidenav-container class="sidenav-container"> <mat-sidenav-container class="sidenav-container">
<!-- Left Sidebar --> <!-- Left Sidebar -->
<mat-sidenav #sidenav <mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [opened]="!isMobile || isSidebarOpen" class="sidebar"
[mode]="isMobile ? 'over' : 'side'"
[opened]="!isMobile || isSidebarOpen"
class="sidebar"
(openedChange)="onSidebarToggle($event)"> (openedChange)="onSidebarToggle($event)">
<!-- Mobile Close Button --> <!-- Mobile Close Button -->
@ -83,14 +77,14 @@
</span> </span>
</div> </div>
<a mat-list-item <a mat-list-item *ngFor="let item of filteredMenuItems" [routerLink]="item.route" routerLinkActive="active-link"
*ngFor="let item of filteredMenuItems" class="menu-item menu-item-drawer" (click)="onMenuItemClick()">
[routerLink]="item.route" <span matListItemTitle>
routerLinkActive="active-link" <span class="menu-content">
class="menu-item"
(click)="onMenuItemClick()">
<i class="pi {{ item.icon }} menu-icon"></i> <i class="pi {{ item.icon }} menu-icon"></i>
<span matListItemTitle>{{item.label}}</span> <span class="menu-label">{{ item.label }}</span>
</span>
</span>
</a> </a>
<mat-divider class="menu-divider"></mat-divider> <mat-divider class="menu-divider"></mat-divider>
@ -102,12 +96,12 @@
</span> </span>
</div> </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> <i class="pi pi-shield menu-icon"></i>
<span matListItemTitle>Admin Setting</span> <span matListItemTitle>Admin Setting</span>
</a> </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> <i class="pi pi-sign-out menu-icon"></i>
<span matListItemTitle>Logout</span> <span matListItemTitle>Logout</span>
</a> </a>
@ -117,9 +111,7 @@
<!-- Main Content Area --> <!-- Main Content Area -->
<mat-sidenav-content class="main-content"> <mat-sidenav-content class="main-content">
<!-- Mobile Overlay --> <!-- Mobile Overlay -->
<div class="mobile-overlay" <div class="mobile-overlay" *ngIf="isMobile && isSidebarOpen" (click)="closeSidebar()">
*ngIf="isMobile && isSidebarOpen"
(click)="closeSidebar()">
</div> </div>
<!-- Content Header --> <!-- Content Header -->

121
src/app/asset/list/asset-list.component.css
View File

@ -1,36 +1,75 @@
/* Asset List Container */ /* Asset List Container */
.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 */
.page-header { .page-header {
margin-bottom: 24px; margin-bottom: 1rem;
padding: 5px 0;
} }
.header-content h1 { .header-title 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; 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 */
.filter-card { .filter-card {
background: var(--medium-gray) !important; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1); padding: 10px;
border-radius: 12px; margin-bottom: 1rem;
margin-bottom: 24px; }
.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 { .filter-card ::ng-deep .mat-mdc-card-content {
padding: 24px; padding-top: 10px;
} }
.filter-form { .filter-form {
@ -77,17 +116,46 @@
color: var(--light-gray); color: var(--light-gray);
} }
.filter-row button { /* .filter-row button {
height: 56px; height: 56px;
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
color: var(--light-gray); 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 */
.table-card { .table-card {
background: var(--medium-gray) !important; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem;
border-radius: 12px; }
.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 { .table-card ::ng-deep .mat-mdc-card-content {
@ -214,6 +282,11 @@
gap: 12px; gap: 12px;
} }
.filter-actions {
flex-wrap: wrap;
gap: 0.375rem;
}
.table-container { .table-container {
overflow-x: auto; overflow-x: auto;
} }
@ -255,3 +328,9 @@
color: var(--white) !important; color: var(--white) !important;
font-size: 12px !important; font-size: 12px !important;
} }
.filter-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}

41
src/app/asset/list/asset-list.component.html
View File

@ -1,16 +1,26 @@
<div class="asset-list-container"> <div class="asset-list-container">
<!-- Page Header -->
<div class="page-header"> <div class="page-header">
<div class="header-content"> <div class="header-content">
<div class="header-title">
<mat-icon class="header-icon" aria-hidden="false">receipt_long</mat-icon>
<h1>Asset List</h1> <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>
</div> </div>
<!-- Filters --> <!-- 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> <mat-card-content>
<form [formGroup]="filterForm" class="filter-form">
<div class="filter-row"> <div class="filter-row">
<form [formGroup]="filterForm" class="filter-grid filter-row">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Search Assets</mat-label> <mat-label>Search Assets</mat-label>
<input matInput formControlName="search" placeholder="Search by asset ID, name, department, or location"> <input matInput formControlName="search" placeholder="Search by asset ID, name, department, or location">
@ -43,18 +53,26 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</form>
</div>
<button mat-stroked-button type="button" (click)="clearFilters()"> <!-- Action Buttons -->
<mat-icon>clear</mat-icon> <div class="filter-actions">
Clear <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> </button>
</div> </div>
</form>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<!-- Table --> <!-- Table -->
<mat-card class="table-card"> <mat-card class="table-card border-card">
<mat-card-content> <mat-card-content>
<div class="table-container"> <div class="table-container">
<table mat-table [dataSource]="dataSource" matSort class="asset-table"> <table mat-table [dataSource]="dataSource" matSort class="asset-table">
@ -130,8 +148,13 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> <!-- <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> -->
</div> </div>
</mat-card-content> </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> </mat-card>
</div> </div>

94
src/app/asset/registration/asset-registration.component.css
View File

@ -1,6 +1,8 @@
/* Asset Registration Container */ /* Asset Registration Container */
.asset-registration-container { .asset-registration-container {
padding: 24px; padding: 2rem !important;
min-height: 100dvh;
height: 100%;
} }
/* Page Header */ /* Page Header */
@ -8,20 +10,38 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 { .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; margin: 0;
font-weight: 600;
font-size: 1.375rem;
} }
.header-actions button { .header-actions button {
@ -31,8 +51,8 @@
/* Tabs Card */ /* Tabs Card */
.tabs-card { .tabs-card {
background: var(--medium-gray) !important; /* background: var(--medium-gray) !important; */
border: 1px solid rgba(255, 255, 255, 0.1); /* border: 1px solid rgba(255, 255, 255, 0.1); */
border-radius: 12px; border-radius: 12px;
margin-bottom: 24px; margin-bottom: 24px;
} }
@ -46,9 +66,10 @@
} }
.tab-header h3 { .tab-header h3 {
color: var(--white); /* color: var(--white); */
font-size: 20px; color: rgb(97, 97, 97);
font-weight: 500; font-size: 16px;
font-weight: 600;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -89,11 +110,33 @@
background-color: var(--primary-red) !important; 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 */
.table-card { .table-card {
background: var(--medium-gray) !important; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem;
border-radius: 12px; }
.table-container {
overflow-x: auto;
border-radius: 4px;
} }
.table-card ::ng-deep .mat-mdc-card-content { .table-card ::ng-deep .mat-mdc-card-content {
@ -138,6 +181,19 @@
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: center; 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 { .action-buttons button {

15
src/app/asset/registration/asset-registration.component.html
View File

@ -1,8 +1,11 @@
<div class="asset-registration-container"> <div class="asset-registration-container">
<div class="page-header"> <div class="page-header">
<div class="header-content"> <div class="header-content">
<div class="header-title">
<mat-icon class="header-icon" aria-hidden="false">build</mat-icon>
<h1>Asset Registration</h1> <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>
<div class="header-actions"> <div class="header-actions">
<button mat-raised-button color="primary" (click)="registerAsset()"> <button mat-raised-button color="primary" (click)="registerAsset()">
@ -13,7 +16,7 @@
</div> </div>
<!-- Tabs --> <!-- Tabs -->
<mat-card class="tabs-card"> <mat-card class="tabs-card border-card">
<mat-card-content> <mat-card-content>
<mat-tab-group (selectedTabChange)="onTabChange($event)" [selectedIndex]="selectedTabIndex"> <mat-tab-group (selectedTabChange)="onTabChange($event)" [selectedIndex]="selectedTabIndex">
<mat-tab label="All"> <mat-tab label="All">
@ -53,7 +56,7 @@
</mat-card> </mat-card>
<!-- Table --> <!-- Table -->
<mat-card class="table-card"> <mat-card class="table-card border-card">
<mat-card-content> <mat-card-content>
<div class="table-container"> <div class="table-container">
<table mat-table [dataSource]="dataSource" matSort class="asset-table"> <table mat-table [dataSource]="dataSource" matSort class="asset-table">
@ -131,9 +134,11 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</div> </div>
</mat-card-content> </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> </mat-card>
</div> </div>

72
src/app/asset/transfer/asset-transfer.component.css
View File

@ -1,6 +1,17 @@
/* Asset Transfer Container */ /* Asset Transfer Container */
.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 */ /* Page Header */
@ -8,14 +19,24 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 { .header-content h1 {
color: var(--white); margin: 0;
font-size: 32px; font-weight: 600;
font-weight: 500; font-size: 1.375rem;
margin-bottom: 8px;
} }
.header-content p { .header-content p {
@ -29,11 +50,33 @@
color: var(--white) !important; 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 */
.table-card { .table-card {
background: var(--medium-gray) !important; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem;
border-radius: 12px; }
.table-container {
overflow-x: auto;
border-radius: 4px;
} }
.table-card ::ng-deep .mat-mdc-card-content { .table-card ::ng-deep .mat-mdc-card-content {
@ -78,12 +121,15 @@
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: center; justify-content: center;
align-items: center !important;
padding: 0 !important;
} }
.action-buttons button { .action-buttons > button {
width: 32px; display: flex !important;
height: 32px; justify-content: center !important;
line-height: 32px; align-items: center !important;
padding: 0 !important;
} }
.action-buttons ::ng-deep .mat-mdc-icon-button { .action-buttons ::ng-deep .mat-mdc-icon-button {

23
src/app/asset/transfer/asset-transfer.component.html
View File

@ -1,8 +1,11 @@
<div class="asset-transfer-container"> <div class="asset-transfer-container">
<div class="page-header"> <div class="page-header">
<div class="header-content"> <div class="header-content">
<div class="header-title">
<mat-icon class="header-icon" aria-hidden="false">settings_applications</mat-icon>
<h1>Asset Transfer</h1> <h1>Asset Transfer</h1>
<p>Manage asset transfers between departments</p> </div>
<p class="header-subtitle">Manage asset transfers between departments</p>
</div> </div>
<div class="header-actions"> <div class="header-actions">
<button mat-raised-button color="primary" (click)="createTransferRequest()"> <button mat-raised-button color="primary" (click)="createTransferRequest()">
@ -13,7 +16,7 @@
</div> </div>
<!-- Table --> <!-- Table -->
<mat-card class="table-card"> <mat-card class="table-card border-card">
<mat-card-content> <mat-card-content>
<div class="table-container"> <div class="table-container">
<table mat-table [dataSource]="dataSource" matSort class="transfer-table"> <table mat-table [dataSource]="dataSource" matSort class="transfer-table">
@ -75,13 +78,16 @@
<th mat-header-cell *matHeaderCellDef> Actions </th> <th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<div class="action-buttons"> <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> <mat-icon>visibility</mat-icon>
</button> </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> <mat-icon>check</mat-icon>
</button> </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> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
@ -92,8 +98,13 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> <!-- <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> -->
</div> </div>
</mat-card-content> </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> </mat-card>
</div> </div>

22
src/app/dashboard/dashboard.component.css
View File

@ -1,6 +1,6 @@
/* Dashboard Container */ /* Dashboard Container */
.dashboard-container { .dashboard-container {
padding: 0.5rem; padding: 2rem !important;
/* background-color: var(--dark-gray); */ /* background-color: var(--dark-gray); */
min-height: 100vh; min-height: 100vh;
} }
@ -12,8 +12,6 @@
} }
.header-content { .header-content {
display: flex;
align-items: center;
gap: 0.75rem; gap: 0.75rem;
} }
@ -22,16 +20,19 @@
font-size: 1.5rem; font-size: 1.5rem;
} }
.header-title {
display: flex;
}
.header-title h1 { .header-title h1 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
/* color: var(--white); */
} }
.header-subtitle { .header-subtitle {
color: var(--light-gray); color: var(--light-gray);
font-size: 0.875rem; font-size: 14px;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
@ -118,11 +119,11 @@
background-color: var(--accent-green); background-color: var(--accent-green);
} }
.active-assets .stat-icon { .active-users .stat-icon {
background-color: var(--yellow-orange); background-color: var(--yellow-orange);
} }
.pending-assets .stat-icon { .pending-tasks .stat-icon {
background-color: var(--red); background-color: var(--red);
} }
@ -185,6 +186,13 @@
flex-shrink: 0; flex-shrink: 0;
} }
.activity-icon > .mat-icon {
/* width: 24px;
height: 24px; */
width: auto !important;
font-size: 1.3rem;
}
.activity-asset { .activity-asset {
background-color: var(--accent-green); background-color: var(--accent-green);
} }

26
src/app/dashboard/dashboard.component.html
View File

@ -3,7 +3,7 @@
<div class="page-header"> <div class="page-header">
<div class="header-content"> <div class="header-content">
<div class="header-title"> <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> <h1>Dashboard</h1>
</div> </div>
<p class="header-subtitle">Welcome back! Here's an overview of your asset management system.</p> <p class="header-subtitle">Welcome back! Here's an overview of your asset management system.</p>
@ -12,7 +12,7 @@
<!-- Statistics Cards --> <!-- Statistics Cards -->
<div class="stats-grid"> <div class="stats-grid">
<mat-card class="stat-card total-assets"> <mat-card class="stat-card total-assets border-stat-card">
<mat-card-content> <mat-card-content>
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon"> <div class="stat-icon">
@ -27,7 +27,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="stat-card total-value"> <mat-card class="stat-card total-value border-stat-card">
<mat-card-content> <mat-card-content>
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon"> <div class="stat-icon">
@ -42,7 +42,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="stat-card active-users"> <mat-card class="stat-card active-users border-stat-card">
<mat-card-content> <mat-card-content>
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon"> <div class="stat-icon">
@ -57,7 +57,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="stat-card pending-tasks"> <mat-card class="stat-card pending-tasks border-stat-card">
<mat-card-content> <mat-card-content>
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon"> <div class="stat-icon">
@ -76,7 +76,7 @@
<!-- Content Grid --> <!-- Content Grid -->
<div class="content-grid"> <div class="content-grid">
<!-- Recent Activities --> <!-- Recent Activities -->
<mat-card class="content-card activities-card"> <mat-card class="content-card activities-card border-card">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<mat-icon class="card-icon" aria-hidden="false">timeline</mat-icon> <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-subtitle>Latest asset management activities</mat-card-subtitle>
</mat-card-header> </mat-card-header>
<mat-card-content> <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-item" *ngFor="let activity of recentActivities">
<div class="activity-icon" [ngClass]="'activity-' + activity.type"> <div class="activity-icon" [ngClass]="'activity-' + activity.type">
<mat-icon aria-hidden="false">{{ activity.icon }}</mat-icon> <mat-icon aria-hidden="false">{{ activity.icon }}</mat-icon>
@ -103,7 +103,7 @@
</mat-card> </mat-card>
<!-- Asset Categories --> <!-- Asset Categories -->
<mat-card class="content-card categories-card"> <mat-card class="content-card categories-card border-card">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<mat-icon class="card-icon" aria-hidden="false">pie_chart</mat-icon> <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-subtitle>Distribution by category</mat-card-subtitle>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="category-list"> <div class="category-list mt-10">
<div class="category-item" *ngFor="let category of assetCategories"> <div class="category-item mt-10" *ngFor="let category of assetCategories">
<div class="category-info"> <div class="category-info">
<div class="category-header"> <div class="category-header">
<div class="category-color" [ngClass]="'color-' + category.color"></div> <div class="category-color" [ngClass]="'color-' + category.color"></div>
@ -135,7 +135,7 @@
</mat-card> </mat-card>
<!-- Maintenance Alerts --> <!-- Maintenance Alerts -->
<mat-card class="content-card alerts-card"> <mat-card class="content-card alerts-card border-card">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<mat-icon class="card-icon" aria-hidden="false">warning</mat-icon> <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-subtitle>Upcoming maintenance schedules</mat-card-subtitle>
</mat-card-header> </mat-card-header>
<mat-card-content> <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-item" *ngFor="let alert of maintenanceAlerts">
<div class="alert-priority" [ngClass]="'priority-' + alert.priority.toLowerCase()"></div> <div class="alert-priority" [ngClass]="'priority-' + alert.priority.toLowerCase()"></div>
<div class="alert-content"> <div class="alert-content">
@ -152,7 +152,7 @@
<h4>{{ alert.assetName }}</h4> <h4>{{ alert.assetName }}</h4>
<mat-chip [ngClass]="'priority-' + alert.priority.toLowerCase()">{{ alert.priority }}</mat-chip> <mat-chip [ngClass]="'priority-' + alert.priority.toLowerCase()">{{ alert.priority }}</mat-chip>
</div> </div>
<p class="alert-description">{{ alert.description }}</p> <!-- <p class="alert-description">{{ alert.description }}</p> -->
<p class="alert-date">Due: {{ alert.dueDate }}</p> <p class="alert-date">Due: {{ alert.dueDate }}</p>
</div> </div>
</div> </div>

50
src/app/purchase-orders/purchase-orders.component.css
View File

@ -1,19 +1,16 @@
/* Purchase Orders Container */
.purchase-orders-container { .purchase-orders-container {
padding: 0.5rem; padding: 2rem !important;
background-color: var(--dark-gray); min-height: 100dvh;
min-height: 100vh; height: 100%;
} }
/* Page Header */ /* Page Header */
.page-header { .page-header {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.75rem 0; padding: 5px 0;
} }
.header-content { .header-content {
display: flex;
align-items: center;
gap: 0.75rem; gap: 0.75rem;
} }
@ -22,27 +19,35 @@
font-size: 1.5rem; font-size: 1.5rem;
} }
.header-title { .header-title {
display: flex;
}
.header-title h1 {
margin: 0; margin: 0;
font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: var(--white); font-size: 1.375rem;
} }
.header-subtitle { .header-subtitle {
color: var(--light-gray); color: var(--light-gray);
font-size: 0.875rem; font-size: 14px;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
/* Filter Card */ /* Filter Card */
.filter-card { .filter-card {
background-color: var(--medium-gray); /* background-color: var(--medium-gray); */
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: 10px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.filter-card ::ng-deep .mat-mdc-card-content {
padding-top: 10px;
}
.filter-grid { .filter-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@ -96,8 +101,8 @@
.action-button.secondary { .action-button.secondary {
background-color: transparent; background-color: transparent;
color: var(--white); color: #000 !important;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgb(173, 173, 173) !important;
} }
.action-button.secondary:hover { .action-button.secondary:hover {
@ -117,9 +122,22 @@
font-size: 1rem; 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 */
.table-card { .table-card {
background-color: var(--medium-gray);
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: 1rem;
} }
@ -137,7 +155,7 @@
.table-header { .table-header {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
color: var(--white); color: var(--white);
font-weight: 600; /* font-weight: 600; */
font-size: 0.875rem; font-size: 0.875rem;
} }

45
src/app/purchase-orders/purchase-orders.component.html
View File

@ -11,17 +11,17 @@
</div> </div>
<!-- Filter Card --> <!-- Filter Card -->
<mat-card class="filter-card"> <mat-card class="filter-card border-card">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<mat-icon class="card-icon" aria-hidden="false">filter_list</mat-icon>
Filter Options Filter Options
</mat-card-title> </mat-card-title>
<mat-card-subtitle>Refine your search criteria</mat-card-subtitle> <mat-card-subtitle>Refine your search criteria</mat-card-subtitle>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="filter-grid"> <div class="filter-grid mt-10">
<!-- Year Filter --> <!-- Year Filter -->
<form [formGroup]="filterForm" class="filter-grid">
<mat-form-field appearance="outline" class="filter-field"> <mat-form-field appearance="outline" class="filter-field">
<mat-label> <mat-label>
<mat-icon class="field-icon" aria-hidden="false">calendar_today</mat-icon> <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="2023">2023</mat-option>
<mat-option value="2022">2022</mat-option> <mat-option value="2022">2022</mat-option>
</mat-select> </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> </mat-form-field>
<!-- Month Filter --> <!-- Month Filter -->
@ -57,7 +57,7 @@
<mat-option value="11">November</mat-option> <mat-option value="11">November</mat-option>
<mat-option value="12">December</mat-option> <mat-option value="12">December</mat-option>
</mat-select> </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> </mat-form-field>
<!-- Category Filter --> <!-- Category Filter -->
@ -74,7 +74,7 @@
<mat-option value="Expense">Expense</mat-option> <mat-option value="Expense">Expense</mat-option>
<mat-option value="Consumable">Consumable</mat-option> <mat-option value="Consumable">Consumable</mat-option>
</mat-select> </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> </mat-form-field>
<!-- Search Field --> <!-- Search Field -->
@ -84,31 +84,24 @@
Search Search
</mat-label> </mat-label>
<input matInput formControlName="search" placeholder="Search PO ID, Product..."> <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> </mat-form-field>
</form>
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="filter-actions"> <div class="filter-actions">
<button mat-raised-button <button mat-raised-button color="primary" (click)="applyFilter()" class="action-button primary">
color="primary"
(click)="applyFilter()"
class="action-button primary">
<mat-icon class="button-icon" aria-hidden="false">filter_list</mat-icon> <mat-icon class="button-icon" aria-hidden="false">filter_list</mat-icon>
Apply Filters Apply Filters
</button> </button>
<button mat-stroked-button <button mat-stroked-button (click)="clearFilters()" class="action-button secondary">
(click)="clearFilters()"
class="action-button secondary">
<mat-icon class="button-icon" aria-hidden="false">clear</mat-icon> <mat-icon class="button-icon" aria-hidden="false">clear</mat-icon>
Clear Filters Clear Filters
</button> </button>
<button mat-raised-button <button mat-raised-button color="accent" (click)="exportToExcel()" class="action-button accent">
color="accent"
(click)="exportToExcel()"
class="action-button accent">
<mat-icon class="button-icon" aria-hidden="false">download</mat-icon> <mat-icon class="button-icon" aria-hidden="false">download</mat-icon>
Export Excel Export Excel
</button> </button>
@ -117,16 +110,16 @@
</mat-card> </mat-card>
<!-- Table Card --> <!-- Table Card -->
<mat-card class="table-card"> <mat-card class="table-card border-card">
<mat-card-header> <mat-card-header>
<mat-card-title> <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 Purchase Orders
</mat-card-title> </mat-card-title>
<mat-card-subtitle>Total: {{ dataSource.data.length }} records</mat-card-subtitle> <mat-card-subtitle>Total: {{ dataSource.data.length }} records</mat-card-subtitle>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="table-container"> <div class="table-container border-card mt-10">
<table mat-table [dataSource]="dataSource" matSort class="purchase-table"> <table mat-table [dataSource]="dataSource" matSort class="purchase-table">
<!-- Company Column --> <!-- Company Column -->
<ng-container matColumnDef="company"> <ng-container matColumnDef="company">
@ -246,12 +239,10 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="table-row"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="table-row"></tr>
</table> </table>
</div> </div>
<!-- Paginator -->
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]"
showFirstLastButtons
class="custom-paginator">
</mat-paginator>
</mat-card-content> </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> </mat-card>
</div> </div>

4
src/index.html
View File

@ -1,13 +1,17 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>PINEPIM Asset Management</title> <title>PINEPIM Asset Management</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

70
src/styles.css
View File

@ -307,3 +307,73 @@ li {
display: none !important; 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;
}