-จัดการ flow ของ program ใหม่
All checks were successful
Build Docker Image / Preparing Dependecies (push) Successful in 5s
All checks were successful
Build Docker Image / Preparing Dependecies (push) Successful in 5s
This commit is contained in:
@@ -0,0 +1,646 @@
|
||||
:host {
|
||||
display: block;
|
||||
padding: 2rem clamp(1.25rem, 4vw, 3rem) 3rem;
|
||||
background: radial-gradient(120% 120% at 0% 0%, #f6f8ff 0%, #eef5ff 55%, #ffffff 100%);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard__hero {
|
||||
background: #0f172a;
|
||||
color: #f8fafc;
|
||||
padding: 2rem;
|
||||
border-radius: 28px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
|
||||
}
|
||||
|
||||
.hero__text h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: clamp(1.8rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
.hero__subtitle {
|
||||
margin: 0;
|
||||
color: rgba(248, 250, 252, 0.7);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(248, 250, 252, 0.8);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 0.65rem 1.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: linear-gradient(135deg, #22d3ee, #0ea5e9);
|
||||
color: #0f172a;
|
||||
box-shadow: 0 15px 30px rgba(14, 165, 233, 0.35);
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
background: rgba(248, 250, 252, 0.12);
|
||||
color: #f8fafc;
|
||||
border: 1px solid rgba(248, 250, 252, 0.2);
|
||||
}
|
||||
|
||||
.btn--compact {
|
||||
padding: 0.45rem 1.15rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: 3px solid rgba(14, 165, 233, 0.4);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dashboard__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.dashboard__periods {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.period-card {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
color: #f8fafc;
|
||||
border-radius: 22px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.4);
|
||||
}
|
||||
|
||||
.period-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(248, 250, 252, 0.75);
|
||||
}
|
||||
|
||||
.period-card__badge {
|
||||
padding: 0.2rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.period-card__badge--year { background: rgba(248, 250, 252, 0.14); }
|
||||
.period-card__badge--month { background: rgba(125, 211, 252, 0.25); }
|
||||
.period-card__badge--week { background: rgba(110, 231, 183, 0.2); }
|
||||
|
||||
.period-card__values {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(248, 250, 252, 0.65);
|
||||
}
|
||||
|
||||
.income,
|
||||
.expense,
|
||||
.net {
|
||||
margin: 0.1rem 0 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.income { color: #34d399; }
|
||||
.expense { color: #fbbf24; }
|
||||
.net { color: #38bdf8; }
|
||||
|
||||
.trend-chip {
|
||||
background: rgba(248, 250, 252, 0.12);
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.stat-card__icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 16px;
|
||||
flex-shrink: 0;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.accent-mint { background: linear-gradient(135deg, #a7f3d0, #34d399); }
|
||||
.accent-lavender { background: linear-gradient(135deg, #ddd6fe, #a78bfa); }
|
||||
.accent-amber { background: linear-gradient(135deg, #fde68a, #fbbf24); }
|
||||
.accent-teal { background: linear-gradient(135deg, #99f6e4, #14b8a6); }
|
||||
|
||||
.stat-card__label {
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.stat-card__value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.stat-card__trend {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.dashboard__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.panel--main {
|
||||
grid-column: span 2;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.panel--side {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.panel--main {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
|
||||
.panel__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel__header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.panel__header p {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ledger-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.quick-log__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.quick-log__form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.9rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.quick-log__form input,
|
||||
.quick-log__form textarea {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
padding: 0.75rem 1rem;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.quick-log__form input:focus,
|
||||
.quick-log__form textarea:focus {
|
||||
border-color: #0ea5e9;
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.quick-log__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.quick-log__toggle {
|
||||
display: inline-flex;
|
||||
gap: 0.4rem;
|
||||
background: #f1f5f9;
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 999px;
|
||||
padding: 0.4rem 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-btn.is-active {
|
||||
background: #0ea5e9;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.ledger-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.pie-panel__content {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 1fr) 1fr;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
box-shadow: inset 0 0 20px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.pie-chart__center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
.pie-chart__center p {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.pie-chart__center strong {
|
||||
font-size: 1.2rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.pie-legend {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.pie-legend__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pie-legend__label {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.pie-legend__value {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.ledger-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 0.8fr 1.2fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0.4rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.ledger-head {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.ledger-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.2rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pill--income {
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.pill--expense {
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.ledger-title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ledger-date {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.ledger-category {
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.ledger-amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ledger-note {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.trend-chart__bar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.trend-chart__value {
|
||||
width: 100%;
|
||||
border-radius: 16px 16px 6px 6px;
|
||||
background: linear-gradient(180deg, rgba(14, 165, 233, 0.8) 0%, rgba(56, 189, 248, 0.4) 100%);
|
||||
}
|
||||
|
||||
.trend-chart__label {
|
||||
font-size: 0.85rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.ratio-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.ratio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 18px;
|
||||
padding: 0.85rem 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ratio--positive {
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.ratio--neutral {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.ratio--warning {
|
||||
background: rgba(251, 191, 36, 0.15);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.alerts-panel .alert {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #f8fafc;
|
||||
border-radius: 18px;
|
||||
padding: 1rem 1.2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.alert__title {
|
||||
margin: 0 0 0.3rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.alert__detail {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.alert__tag {
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.task {
|
||||
background: #f8fafc;
|
||||
border-radius: 18px;
|
||||
padding: 1rem 1.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.task__title {
|
||||
margin: 0 0 0.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task__due {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.task__badge {
|
||||
padding: 0.35rem 0.8rem;
|
||||
border-radius: 12px;
|
||||
background: #e2e8f0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.is-credit {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.is-debit {
|
||||
color: #ef4444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.dashboard__hero,
|
||||
.panel {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.quick-log__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pie-panel__content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.ledger-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.ledger-row span:nth-child(3),
|
||||
.ledger-row span:nth-child(4) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-log__form select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
|
||||
background-position: right 0.5rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em 1.5em;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.ledger-table.is-scrollable {
|
||||
max-height: 25rem;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
<div class="w-full p-6">
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบทั้งหมด</div>
|
||||
<div class="text-3xl font-bold text-gray-800 mt-1">
|
||||
{{ totalBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบที่อนุมัติแล้ว</div>
|
||||
<div class="text-3xl font-bold text-green-600 mt-1">
|
||||
{{ approvedBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบคงเหลือ</div>
|
||||
<div
|
||||
class="text-3xl font-bold mt-1"
|
||||
[ngClass]="remainingBudget >= 0 ? 'text-blue-600' : 'text-red-600'"
|
||||
>
|
||||
{{ remainingBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Add Button -->
|
||||
<div class="mb-4">
|
||||
<button
|
||||
class=" rounded-3xl bg-green-600 hover:bg-green-700 text-white px-5 py-2.5 text-sm font-medium shadow-sm flex items-center gap-2 transition"
|
||||
>
|
||||
➕ เพิ่มโครงการใหม่
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto bg-white border border-gray-200 rounded-2xl shadow-sm">
|
||||
<table class="min-w-full text-left border-collapse">
|
||||
<thead class="bg-gray-100 border-b border-gray-200 text-gray-700 text-sm">
|
||||
<tr>
|
||||
<th class="py-3 px-4 font-semibold">ลำดับ</th>
|
||||
<th class="py-3 px-4 font-semibold">รหัสโครงการ</th>
|
||||
<th class="py-3 px-4 font-semibold">ชื่อโครงการ</th>
|
||||
<th class="py-3 px-4 font-semibold">ผู้รับผิดชอบ</th>
|
||||
<th class="py-3 px-4 font-semibold">งบที่ขออนุมัติ</th>
|
||||
<th class="py-3 px-4 font-semibold">หมวดงบ</th>
|
||||
<th class="py-3 px-4 font-semibold">จำนวนที่อนุมัติ</th>
|
||||
<th class="py-3 px-4 font-semibold text-center">สถานะ</th>
|
||||
<th class="py-3 px-4 font-semibold text-center">ดำเนินการ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
*ngFor="let p of projects; let i = index"
|
||||
class="border-b border-gray-100 hover:bg-blue-50/20 transition"
|
||||
>
|
||||
<td class="py-4 px-4 text-gray-700">{{ i + 1 }}</td>
|
||||
|
||||
<td class="py-4 px-4 font-medium text-gray-700">
|
||||
{{ p.code }}
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-gray-800 font-semibold leading-tight">
|
||||
{{ p.name }}
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-gray-700">
|
||||
{{ p.owner }}
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-blue-700 font-bold whitespace-nowrap">
|
||||
{{ p.budget | number:'1.0-0' }} บาท
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 w-64">
|
||||
<select
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl bg-white
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300
|
||||
text-sm transition"
|
||||
>
|
||||
<option value="">ไม่เลือก</option>
|
||||
|
||||
@for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
|
||||
<option [value]="item.dtlcod">
|
||||
{{ item.dtlnam }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 w-40">
|
||||
<input
|
||||
type="number"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl bg-white
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300
|
||||
text-sm transition"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-center">
|
||||
<span
|
||||
class="px-3 py-1.5 rounded-full text-xs font-semibold inline-flex items-center gap-1
|
||||
shadow-sm border"
|
||||
[ngClass]="{
|
||||
'bg-yellow-50 text-yellow-700 border-yellow-200': p.status === 'WAIT',
|
||||
'bg-green-50 text-green-700 border-green-200': p.status === 'APPROVED',
|
||||
'bg-red-50 text-red-700 border-red-200': p.status === 'REJECTED'
|
||||
}"
|
||||
>
|
||||
<ng-container *ngIf="p.status === 'APPROVED'">อนุมัติแล้ว</ng-container>
|
||||
<ng-container *ngIf="p.status === 'WAIT'">รออนุมัติ</ng-container>
|
||||
<ng-container *ngIf="p.status === 'REJECTED'">ไม่อนุมัติ</ng-container>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-center space-x-2 whitespace-nowrap">
|
||||
|
||||
<button
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-sm
|
||||
shadow-sm font-medium transition"
|
||||
(click)="openBudgetDetail(p)"
|
||||
>
|
||||
จัดการงบประมาณ
|
||||
</button>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination
|
||||
<div class="flex justify-end items-center gap-3 mt-5">
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-xl bg-white hover:bg-gray-100">
|
||||
1
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-xl bg-white hover:bg-gray-100">
|
||||
2
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,168 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
import { GeneralService } from '../../services/generalservice';
|
||||
import { IDropAct, IStateDrop, IStateResultResponse, IActData, IActSumData } from '../../interfaces/dashboard.interface'
|
||||
import { DashboardStateService } from '../../services/state/dashboard-state.service';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-manager',
|
||||
standalone: false,
|
||||
templateUrl: './main-manager.component.html',
|
||||
styleUrl: './main-manager.component.css'
|
||||
})
|
||||
export class MainManagerComponent implements OnInit {
|
||||
|
||||
mode: string = 'i';
|
||||
|
||||
totalBudget = 200000; // งบทั้งหมด
|
||||
approvedBudget = 65000; // งบที่อนุมัติแล้ว
|
||||
|
||||
|
||||
|
||||
get remainingBudget() {
|
||||
return this.totalBudget - this.approvedBudget;
|
||||
}
|
||||
|
||||
|
||||
|
||||
projects = [
|
||||
{ code: 'PRJ001', name: 'ระบบจัดการน้ำดื่ม', owner: 'นาย A', budget: 20000, status: 'WAIT' },
|
||||
{ code: 'PRJ002', name: 'ปรับปรุงอาคาร B', owner: 'นางสาว B', budget: 45000, status: 'WAIT' },
|
||||
{ code: 'PRJ003', name: 'ซื้อคอมพิวเตอร์', owner: 'นาย C', budget: 30000, status: 'APPROVED' }
|
||||
];
|
||||
|
||||
approveProject(p: any) {
|
||||
p.status = 'APPROVED';
|
||||
this.approvedBudget += p.budget;
|
||||
}
|
||||
|
||||
rejectProject(p: any) {
|
||||
p.status = 'REJECTED';
|
||||
}
|
||||
|
||||
openBudgetDetail(project: any) {
|
||||
this.router.navigate(['/main/manager/budget', project.code]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
budgetCategoriesDrop = {
|
||||
expense: [
|
||||
{ dtlcod: 'BDG001', dtlnam: 'เงินรายได้' },
|
||||
{ dtlcod: 'BDG002', dtlnam: 'งบดำเนินงาน ปวส.' },
|
||||
{ dtlcod: 'BDG003', dtlnam: 'โครงการส่งเสริมพัฒนาทักษะวิชาชีพทักษะพื้นฐาน' },
|
||||
{ dtlcod: 'BDG004', dtlnam: 'ค่ากิจกรรมพัฒนาคุณภาพผู้เรียน' },
|
||||
{ dtlcod: 'BDG005', dtlnam: 'อุดหนุนส่งเสริมและพัฒนาผู้เรียนองค์การวิชาชีพแห่งประเทศไทย (อวท.)' },
|
||||
{ dtlcod: 'BDG006', dtlnam: 'งบดำเนินงาน ระยะสั้น' },
|
||||
{ dtlcod: 'BDG007', dtlnam: 'โครงการบูรณาการการพัฒนาทักษะทางวิชาชีพกับการเสริมสร้างคุณลักษณะอันพึงประสงค์ (FIX IT)' },
|
||||
{ dtlcod: 'BDG008', dtlnam: 'โครงการพัฒนาทักษะและสมรรถนะวิชาชีพกำลังคน (Up-skill, Re-skill)' },
|
||||
{ dtlcod: 'BDG009', dtlnam: 'งบดำเนินงาน ปวช.' },
|
||||
{ dtlcod: 'BDG010', dtlnam: 'โครงการขยายและยกระดับการจัดอาชีวศึกษาระบบทวิภาคีคุณภาพสูง' },
|
||||
{ dtlcod: 'BDG011', dtlnam: 'ปวช.(สอจ)' },
|
||||
{ dtlcod: 'BDG012', dtlnam: 'ค่าจัดการเรียนการสอน' },
|
||||
{ dtlcod: 'BDG013', dtlnam: 'งบดำเนินงาน 170000' },
|
||||
{ dtlcod: 'BDG014', dtlnam: 'โครงการพัฒนาทักษะและศักยภาพภาพการจัดการเรียนการสอนอาชีวศึกษา' },
|
||||
{ dtlcod: 'BDG015', dtlnam: 'ศึกษาธิการ' },
|
||||
{ dtlcod: 'BDG016', dtlnam: 'Up-skill' },
|
||||
{ dtlcod: 'BDG017', dtlnam: 'ติดตามผู้สำเร็จ' },
|
||||
{ dtlcod: 'BDG018', dtlnam: 'ทวิภาคี' },
|
||||
{ dtlcod: 'BDG019', dtlnam: 'พันธุกรรม' },
|
||||
{ dtlcod: 'BDG020', dtlnam: 'ปวส(สาธารณูประโภค)' },
|
||||
{ dtlcod: 'BDG021', dtlnam: 'ปวส(ค่าสาธารณูปโภค)' },
|
||||
{ dtlcod: 'BDG022', dtlnam: 'งบดำเนินงาน (ค่าสาธารณูปโภค)' },
|
||||
{ dtlcod: 'BDG023', dtlnam: 'ค่าหนังสือเรียน' },
|
||||
{ dtlcod: 'BDG024', dtlnam: 'โครงการอาชีวะต้านยาเสพติด' },
|
||||
{ dtlcod: 'BDG025', dtlnam: 'ค่าตอบแทนพนักงานราชการ' },
|
||||
{ dtlcod: 'BDG026', dtlnam: 'ค่าอุปกรณ์การเรียน' },
|
||||
{ dtlcod: 'BDG027', dtlnam: 'โครงการยกระดับและพัฒนาขีดความสามารถด้านภาษาและทักษะดิจิทัลเพื่อพัฒนากำลังคนให้มีสมรรถนะสูง' },
|
||||
{ dtlcod: 'BDG028', dtlnam: 'โครงการอนุรักษ์พันธุกรรมพืชอันเนื่องมาจากพระราชดำริ' },
|
||||
{ dtlcod: 'BDG029', dtlnam: 'ปวช.(สอจ.)' },
|
||||
{ dtlcod: 'BDG030', dtlnam: 'โครงการพัฒนาศักยภาพผู้เรียนอาชีวศึกษาในการเป็นผู้ประกอบการ (บ่มเพาะ)' },
|
||||
{ dtlcod: 'BDG031', dtlnam: 'โครงการพัฒนาและยกระดับการติดตามผู้สำเร็จการศึกษาอาชีวศึกษา' },
|
||||
{ dtlcod: 'BDG032', dtlnam: 'โครงการเสริมสร้างคุณธรรม จริยธรรมและธรรมาภิบาลในสถานศึกษา' },
|
||||
{ dtlcod: 'BDG033', dtlnam: 'โครงการจัดการอาชีวศึกษาเพื่อสนองพระราชดำริ' },
|
||||
{ dtlcod: 'BDG034', dtlnam: 'เงินรายได้ ป.ตรี' },
|
||||
{ dtlcod: 'BDG035', dtlnam: 'งบดำเนินงาน 235200' }
|
||||
]
|
||||
};
|
||||
|
||||
// isModalOpen: boolean = false;
|
||||
// isSubmitting: boolean = false;
|
||||
// arrearsForm!: FormGroup;
|
||||
// saveFrm!: FormGroup;
|
||||
// myActData: IActData[] = [];
|
||||
// // myDropAct: IStateDrop[] = [];
|
||||
// myDropAct: IStateDrop = { income: [], expense: [] };
|
||||
// myActSumData: IActSumData = {
|
||||
// summary: {
|
||||
// totalIncome: '',
|
||||
// totalExpense: '',
|
||||
// netProfit: '',
|
||||
// profitRate: '',
|
||||
// adjustedProfitRate: '',
|
||||
// period: ''
|
||||
// },
|
||||
// pie: {
|
||||
// income: [],
|
||||
// expense: []
|
||||
// }
|
||||
// };
|
||||
// ActSumDataGradient: any
|
||||
|
||||
|
||||
// readonly ownerName = 'Nuttakit';
|
||||
|
||||
constructor(
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
this.setupFormControl();
|
||||
// this.dashboardStateService.getStateResult().subscribe(data => {
|
||||
// if (data) {
|
||||
// this.myDropAct = data;
|
||||
// }
|
||||
// });
|
||||
// // ผลลับท์ ของ รายการ
|
||||
// this.dashboardStateService.getStateAccountResult().subscribe(data => {
|
||||
// if (data) {
|
||||
// this.myActData = data;
|
||||
// }
|
||||
// });
|
||||
// // ผลลัพการ คำนวณ ของ ปัญชี ต่างๆ
|
||||
// this.dashboardStateService.getStateSumResult().subscribe(data => {
|
||||
// if (data) {
|
||||
// this.myActSumData = data;
|
||||
// this.ActSumDataGradient = this.buildExpenseGradient()
|
||||
// }
|
||||
// });
|
||||
}
|
||||
setupFormControl(){
|
||||
// this.arrearsForm = new FormGroup({
|
||||
// // email: new FormControl('',[Validators.required, Validators.email, Validators.maxLength(100)]),
|
||||
// amount: new FormControl('',[Validators.required, Validators.maxLength(20)]),
|
||||
// expdtm: new FormControl('',[Validators.required, Validators.maxLength(12)]),
|
||||
// note: new FormControl('',[Validators.maxLength(200)]),
|
||||
// reason: new FormControl('',[Validators.required, Validators.maxLength(200)])
|
||||
// });
|
||||
|
||||
// this.saveFrm = new FormGroup({
|
||||
// actacpdtm: new FormControl('',[Validators.required, Validators.maxLength(12)]),
|
||||
// actqty: new FormControl('',[Validators.required]),
|
||||
// actcat: new FormControl('',[Validators.required, Validators.maxLength(1)]),
|
||||
// actcmt: new FormControl('',[Validators.maxLength(200)])
|
||||
// });
|
||||
}
|
||||
|
||||
onSaveSubmit(){
|
||||
|
||||
}
|
||||
|
||||
onArrearsSubmit(){
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user