Ft/datacapture/validation

.gitignore

@@ -8,6 +8,7 @@
 
 # Node
 /node_modules
+/node_modulesxxx
 npm-debug.log
 yarn-error.log
 

package.json

@@ -11,44 +11,45 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^19.0.0",
-        "@angular/common": "^19.0.0",
-        "@angular/compiler": "^19.0.0",
-        "@angular/core": "^19.0.0",
-        "@angular/forms": "^19.0.0",
-        "@angular/platform-browser": "^19.0.0",
-        "@angular/platform-browser-dynamic": "^19.0.0",
-        "@angular/router": "^19.0.0",
+        "@angular/animations": "19.0.5",
+        "@angular/common": "19.0.5",
+        "@angular/compiler": "19.0.5",
+        "@angular/core": "19.0.5",
+        "@angular/fire": "^19.0.0",
+        "@angular/forms": "19.0.5",
+        "@angular/platform-browser": "19.0.5",
+        "@angular/platform-browser-dynamic": "19.0.5",
+        "@angular/router": "19.0.5",
         "@primeng/themes": "^19.0.5",
         "chart.js": "4.4.2",
         "primeclt": "^0.1.5",
         "primeicons": "^7.0.0",
         "primeng": "^19.0.8",
         "rxjs": "~7.8.0",
-        "tailwindcss-primeui": "^0.5.1",
-        "tslib": "^2.3.0",
+        "tailwindcss-primeui": "0.5.1",
+        "tslib": "2.3.0",
         "zone.js": "~0.15.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^19.0.6",
-        "@angular/cli": "^19.0.6",
-        "@angular/compiler-cli": "^19.0.0",
+        "@angular-devkit/build-angular": "19.0.6",
+        "@angular/cli": "19.0.6",
+        "@angular/compiler-cli": "19.0.0",
         "@types/jasmine": "~5.1.0",
-        "autoprefixer": "^10.4.20",
-        "eslint": "^9.14.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-import": "^2.31.0",
-        "eslint-plugin-prefer-arrow": "^1.2.3",
-        "eslint-plugin-prettier": "^4.2.1",
+        "autoprefixer": "10.4.20",
+        "eslint": "9.14.0",
+        "eslint-config-prettier": "9.1.0",
+        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-prefer-arrow": "1.2.3",
+        "eslint-plugin-prettier": "4.2.1",
         "jasmine-core": "~5.4.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
-        "postcss": "^8.4.49",
-        "prettier": "^3.0.0",
-        "tailwindcss": "^3.4.17",
+        "postcss": "8.4.49",
+        "prettier": "3.0.0",
+        "tailwindcss": "3.4.17",
         "typescript": "~5.6.2"
     }
 }

src/app.config.ts

@@ -5,12 +5,23 @@ import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScroll
 import Aura from '@primeng/themes/aura';
 import { providePrimeNG } from 'primeng/config';
 import { appRoutes } from './app.routes';
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { provideFirestore, getFirestore } from '@angular/fire/firestore';
 
 export const appConfig: ApplicationConfig = {
     providers: [
         provideRouter(appRoutes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()),
         provideHttpClient(withFetch()),
         provideAnimationsAsync(),
-        providePrimeNG({ theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } } })
+        providePrimeNG({ theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } } }),
+        provideFirebaseApp(() => initializeApp({
+            apiKey: "AIzaSyCp1ieMWDtGU2PhOBApy3p5O6gxgBTzcIo",
+            authDomain: "celebration-ledger.firebaseapp.com",
+            projectId: "celebration-ledger",
+            storageBucket: "celebration-ledger.firebasestorage.app",
+            messagingSenderId: "487837077137",
+            appId: "1:487837077137:web:8cd470e6bd0a3832da7930"
+         })),
+        provideFirestore(() => getFirestore()),
     ]
 };

src/app.routes.ts

@@ -4,6 +4,9 @@ import { Dashboard } from './app/pages/dashboard/dashboard';
 import { Documentation } from './app/pages/documentation/documentation';
 import { Landing } from './app/pages/landing/landing';
 import { Notfound } from './app/pages/notfound/notfound';
+import { LedgerComponent } from './app/pages/ledger/ledger.component';
+import { ProvincesComponent } from './app/pages/provinces/provinces.component';
+import { FocComponent } from './app/pages/foc/foc.component';
 
 export const appRoutes: Routes = [
     {
@@ -13,6 +16,9 @@ export const appRoutes: Routes = [
             { path: '', component: Dashboard },
             { path: 'uikit', loadChildren: () => import('./app/pages/uikit/uikit.routes') },
             { path: 'documentation', component: Documentation },
+            { path: 'ledger', component: LedgerComponent },
+            { path: 'provinces', component: ProvincesComponent },
+            { path: 'foc', component: FocComponent },
             { path: 'pages', loadChildren: () => import('./app/pages/pages.routes') }
         ]
     },

src/app/layout/component/app.menu.ts

@@ -24,6 +24,14 @@ export class AppMenu {
                 label: 'Home',
                 items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['/'] }]
             },
+            {
+                label: 'Financials',
+                items: [
+                    { label: 'Ledger', icon: 'pi pi-fw pi-home', routerLink: ['/ledger'] },
+                    { label: 'Provinces', icon: 'pi pi-fw pi-home', routerLink: ['/provinces'] },
+                    { label: 'FOCs', icon: 'pi pi-fw pi-home', routerLink: ['/foc'] }
+                ]
+            },
             {
                 label: 'UI Components',
                 items: [

src/app/pages/crud/crud.ts

@@ -19,6 +19,7 @@ import { InputIconModule } from 'primeng/inputicon';
 import { IconFieldModule } from 'primeng/iconfield';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { Product, ProductService } from '../service/product.service';
+import { LedgerComponent } from '../ledger/ledger.component';
 
 interface Column {
     field: string;
@@ -52,7 +53,7 @@ interface ExportColumn {
         TagModule,
         InputIconModule,
         IconFieldModule,
-        ConfirmDialogModule
+        ConfirmDialogModule, LedgerComponent
     ],
     template: `
         <p-toolbar styleClass="mb-6">
@@ -66,6 +67,7 @@ interface ExportColumn {
             </ng-template>
         </p-toolbar>
 
+        <app-ledger></app-ledger>
         <p-table
             #dt
             [value]="products()"

src/app/pages/empty/run.js

@@ -0,0 +1,17 @@
+let obj = {
+      "ProductCategory": "LDS2.ELE.CEN.GOV",
+      "ProductDescription": "Something",
+      "AssetLiabilityType": "Asset",
+      "Portfolio": "portfolio I",
+      "CreditRiskCategory": "Central Gov't",
+      "IndustryType": "5. Loans to governments & statutory bodies",
+      "InstitutionDescription": "4. Central Government",
+      "ProductGroup": "GOVERNMENT",
+      "AdvanceCategory": "Drecreasing Loans",
+      "SectorDescription": "electricity, gas, water and energy",
+      "MaximumTerm": 0,
+      "Country": "MW"
+    }
+
+  console.log(Object.keys(obj));
+

src/app/pages/foc/foc.component.html

@@ -0,0 +1 @@
+<p>foc works!</p>

src/app/pages/foc/foc.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FocComponent } from './foc.component';
+
+describe('FocComponent', () => {
+  let component: FocComponent;
+  let fixture: ComponentFixture<FocComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FocComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FocComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/foc/foc.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-foc',
+  imports: [],
+  templateUrl: './foc.component.html',
+  styleUrl: './foc.component.scss'
+})
+export class FocComponent {
+
+}

src/app/pages/ledger/ledger.component.html

@@ -0,0 +1,112 @@
+<div class="flex flex-col">
+    <div class="card">
+        <div class="font-semibold text-xl mb-4">Filter Reports</div>
+        <p-toolbar>
+            <div class="flex flex-wrap items-start gap-6">
+                <div class="field">
+                    <label for="firstname1" class="sr-only">FOC</label>
+                    <p-listbox [(ngModel)]="focValue" [options]="focValues" optionLabel="name" [filter]="true" />
+                </div>
+                <div class="field">
+                    <label for="lastname1" class="sr-only">Date</label>
+                    <input type="date" pInputText id="reportDate"  required autofocus fluid />
+                </div>
+                <p-button label="Filter" [fluid]="false" (onClick)="getFilteredData()"></p-button>
+            </div>
+        </p-toolbar>
+    </div>
+</div>
+<div style="width:100%; height:40px;"></div>
+
+<div class="card">
+    <p-toolbar styleClass="mb-6">
+        <ng-template #start>
+            <p-button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" (onClick)="openNew()" />
+            <!-- <p-button severity="secondary" label="Delete" icon="pi pi-trash" outlined (onClick)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length" /> -->
+        </ng-template>
+
+        <ng-template #end>
+            <p-button label="Export" icon="pi pi-upload" severity="secondary"  />
+        </ng-template>
+    </p-toolbar>
+    <!-- <p-togglebutton  [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Balance'" offLabel="Balance" /> -->
+    <p-dialog [(visible)]="statDialog" [style]="{ width: '450px' }" header="Product Details" [modal]="true">
+        <ng-template #content>
+            <div class="flex flex-col gap-6">
+                <div>
+                    <label for="name" class="block font-bold mb-3">FOC</label>
+                    <input type="text" pInputText id="name" [(ngModel)]="focId" required autofocus fluid />
+                    <small class="text-red-500" *ngIf="submitted && !focId">Name is required.</small>
+                </div>
+                <div>
+                    <label for="name" class="block font-bold mb-3">Date</label>
+                    <input type="date" pInputText id="captureDate" [(ngModel)]="stat.captureDate" required autofocus fluid />
+                    <small class="text-red-500"  *ngIf="submitted && !stat.captureDate">Date is required.</small>
+                </div>
+                <div>
+                    <label for="province" class="block font-bold mb-3">Province</label>
+                    <input type="text" pInputText id="province" [(ngModel)]="stat.province" required autofocus fluid />
+                    <small class="text-red-500" *ngIf="submitted && !focId">Province is required.</small>
+                </div>
+
+                <div class="grid grid-cols-12 gap-4">
+
+                    <div class="col-span-6">
+                        <label for="quantity" class="block font-bold mb-3">Adults</label>
+                        <p-inputnumber id="quantity" [(ngModel)]="stat.attendanceAdults" fluid />
+                    </div>
+                    <div class="col-span-6">
+                        <label for="quantity" class="block font-bold mb-3">Children</label>
+                        <p-inputnumber id="quantity" [(ngModel)]="stat.attendanceChildren" fluid />
+                    </div>
+                </div>
+                <div class="grid grid-cols-12 gap-4">
+
+                    <div class="col-span-6">
+                        <label for="price" class="block font-bold mb-3">Tithes</label>
+                        <p-inputnumber id="price" [(ngModel)]="stat.tithe" mode="currency" currency="USD" locale="en-US" fluid />
+                    </div>
+                    <div class="col-span-6">
+                        <label for="price" class="block font-bold mb-3">Offering</label>
+                        <p-inputnumber id="price" [(ngModel)]="stat.offeringSeed" mode="currency" currency="USD" locale="en-US" fluid />
+                    </div>
+                </div>
+
+
+
+            </div>
+        </ng-template>
+
+        <ng-template #footer>
+            <p-button label="Cancel" icon="pi pi-times" text (click)="hideDialog()" />
+            <p-button label="Save" icon="pi pi-check" (click)="saveStat()" />
+        </ng-template>
+    </p-dialog>
+    <p-table [value]="stats" [scrollable]="true" scrollHeight="400px" styleClass="mt-4">
+        <ng-template #header>
+            <tr>
+                <th style="min-width:200px" pFrozenColumn class="font-bold">FOC</th>
+                <th style="min-width:100px" >Province</th>
+                <th style="min-width:100px" >Date</th>
+                <th style="min-width:100px; text-align:right">Adults</th>
+                <th style="min-width:200px; text-align:right">Children</th>
+                <th style="min-width:200px; text-align:right">Tithes</th>
+                <th style="min-width:200px; text-align:right">Offering</th>
+                <!-- <th style="min-width:200px">Other</th>  -->
+            </tr>
+        </ng-template>
+        <ng-template #body let-stat>
+            <tr>
+                <td pFrozenColumn class="font-bold">{{ stat.location }}</td>
+                <td>{{ stat.province }}</td>
+                <td>{{ stat.date }}</td>
+                <td style="min-width:100px" style="text-align:right">{{ stat.attendanceAdults }}</td>
+                <td style="min-width:100px" style="text-align:right">{{ stat.attendanceChildren }}</td>
+                <td style="text-align:right">{{ stat.tithe | currency }}</td>
+                <td style="text-align:right">{{ stat.offeringSeed | currency }}</td>
+                <!-- <td style="text-align:right">{{ stat.other }}</td>  -->
+
+            </tr>
+        </ng-template>
+    </p-table>
+</div>

src/app/pages/ledger/ledger.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LedgerComponent } from './ledger.component';
+
+describe('LedgerComponent', () => {
+  let component: LedgerComponent;
+  let fixture: ComponentFixture<LedgerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LedgerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LedgerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});