Changes saved

frontend/angular.json

@@ -55,7 +55,8 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/primeflex/primeflex.css"
             ]
           },
           "configurations": {
@@ -63,8 +64,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1MB",
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",

frontend/package-lock.json

@@ -16,6 +16,7 @@
         "@angular/forms": "^21.1.0",
         "@angular/platform-browser": "^21.1.0",
         "@angular/router": "^21.1.0",
+        "primeflex": "^4.0.0",
         "primeicons": "^7.0.0",
         "primeng": "^17.18.0",
         "quill": "^2.0.3",
@@ -6570,6 +6571,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/primeflex": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-4.0.0.tgz",
+      "integrity": "sha512-UOEZCRjR36+sm5bUpDhS1xbA068l9VC6y1aTNVqQPtXuKIdPTqAWHRUxj3mKAoPrQ9W373ooJJMgNVXfiaw04g==",
+      "license": "MIT"
+    },
     "node_modules/primeicons": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",

frontend/package.json

@@ -31,6 +31,7 @@
     "@angular/forms": "^21.1.0",
     "@angular/platform-browser": "^21.1.0",
     "@angular/router": "^21.1.0",
+    "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
     "primeng": "^17.18.0",
     "quill": "^2.0.3",

frontend/public/assets/fonts/poppins/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

frontend/src/app/admin-layout/admin-layout.component.ts

@@ -1,81 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MenuItem } from 'primeng/api';
-import { AuthService } from '../auth.service';
-
-// PrimeNG
-import { MenubarModule } from 'primeng/menubar';
-import { ButtonModule } from 'primeng/button';
+import { MenuComponent } from '../fragments/menu/menu.component';
 
 @Component({
   selector: 'app-admin-layout',
   standalone: true,
-  imports: [CommonModule, RouterModule, MenubarModule, ButtonModule],
+  imports: [CommonModule, RouterModule, MenuComponent],
   template: `
-    <div class="layout-wrapper">
-        <p-menubar [model]="items">
-            <ng-template pTemplate="end">
-                <button pButton label="Logout" icon="pi pi-power-off" class="p-button-text" (click)="logout()"></button>
-            </ng-template>
-        </p-menubar>
-        <div class="layout-content p-4">
+    <div>
+        <app-menu></app-menu>
+        <div class="dashboard-content">
             <router-outlet></router-outlet>
         </div>
     </div>
   `
 })
-export class AdminLayoutComponent implements OnInit {
-  items: MenuItem[] = [];
-
-  constructor(private auth: AuthService) {}
-
-  ngOnInit() {
-    this.items = [
-        {
-            label: 'Home',
-            icon: 'pi pi-home',
-            routerLink: '/'
-        },
-        {
-            label: 'OCR Module',
-            icon: 'pi pi-search',
-            items: [
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    routerLink: '/ocr'
-                },
-                {
-                    label: 'History',
-                    icon: 'pi pi-history'
-                }
-            ]
-
-        },
-        {
-            label: 'Mailbox',
-            icon: 'pi pi-envelope',
-            routerLink: '/mailbox'
-        },
-        {
-            label: 'Settings',
-            icon: 'pi pi-cog',
-            items: [
-                {
-                    label: 'Profile',
-                    icon: 'pi pi-user'
-                },
-                {
-                    label: 'Preferences',
-                    icon: 'pi pi-sliders-h'
-                }
-            ]
-        }
-    ];
-  }
-
-  logout() {
-    this.auth.logout();
-  }
+export class AdminLayoutComponent {
+  constructor() {}
 }

frontend/src/app/app-routing.module.ts

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { LoginComponent } from './login/login.component';
-import { AdminLayoutComponent } from './admin-layout/admin-layout.component';
-import { OcrComponent } from './ocr/ocr.component';
-import { AuthGuard } from './auth.guard';
-
-const routes: Routes = [
-  { path: 'login', component: LoginComponent },
-  { 
-    path: '', 
-    component: AdminLayoutComponent, 
-    canActivate: [AuthGuard],
-    children: [
-        { path: '', redirectTo: 'ocr', pathMatch: 'full' },
-        { path: 'ocr', component: OcrComponent }
-    ]
-  },
-  { path: '**', redirectTo: '' }
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

frontend/src/app/app.config.ts

@@ -1,7 +1,8 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { AuthInterceptor } from './interceptors/auth.interceptor';
 
 import { routes } from './app.routes';
 
@@ -10,6 +11,6 @@ export const appConfig: ApplicationConfig = {
     provideZoneChangeDetection({ eventCoalescing: true }), 
     provideRouter(routes),
     provideAnimationsAsync(),
-    provideHttpClient()
+    provideHttpClient(withInterceptors([AuthInterceptor]))
   ]
 };

frontend/src/app/app.routes.ts

@@ -3,18 +3,40 @@ import { LoginComponent } from './login/login.component';
 import { AdminLayoutComponent } from './admin-layout/admin-layout.component';
 import { OcrComponent } from './ocr/ocr.component';
 import { MailboxComponent } from './mailbox/mailbox.component';
-import { AuthGuard } from './auth.guard';
+
+import { AuthorizeComponent } from './pages/session/auth/authorize.component';
+import { AuthorizeGuard } from './interceptors/authorize.guard';
+import { ProfileComponent } from './pages/session/profile/profile.component';
+import { SubsidiaryComponent } from './pages/account/company/subsidiary/subsidiary.component';
+import { DepartmentComponent } from './pages/account/company/department/department.component';
+import { DesignationComponent } from './pages/account/company/desigation/designation.component';
+import { EmployeeComponent } from './pages/account/company/employee/employee.component';
+import { UserComponent } from './pages/account/user/user.component';
 
 export const routes: Routes = [
-    { path: 'login', component: LoginComponent },
+    { path: '', component: LoginComponent },
+    { path: 'authorize', component: AuthorizeComponent, canActivate: [AuthorizeGuard]},
     { 
-      path: '', 
+      path: 'dashboard', 
       component: AdminLayoutComponent, 
-      canActivate: [AuthGuard],
+      canActivate: [AuthorizeGuard],
+      canActivateChild: [AuthorizeGuard],
       children: [
           { path: '', redirectTo: 'ocr', pathMatch: 'full' },
           { path: 'ocr', component: OcrComponent },
-          { path: 'mailbox', component: MailboxComponent }
+          { path: 'mailbox', component: MailboxComponent },
+          { path: 'user',
+            canActivate: [AuthorizeGuard],
+            canActivateChild: [AuthorizeGuard],
+            children: [
+              { path: 'profile', component: ProfileComponent },
+              { path: 'subsidiaries', component: SubsidiaryComponent },
+              { path: 'departments', component: DepartmentComponent },
+              { path: 'designations', component: DesignationComponent },
+              { path: 'employees', component: EmployeeComponent },
+              { path: 'users', component: UserComponent }
+            ]
+          }
       ]
     },
     { path: '**', redirectTo: '' }

frontend/src/app/auth.guard.ts

@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { CanActivate, Router } from '@angular/router';
-import { AuthService } from './auth.service';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class AuthGuard implements CanActivate {
-  constructor(private authService: AuthService, private router: Router) {}
-
-  canActivate(): boolean {
-    if (this.authService.isLoggedIn()) {
-      return true;
-    } else {
-      this.router.navigate(['/login']);
-      return false;
-    }
-  }
-}

frontend/src/app/auth.service.ts

@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Router } from '@angular/router';
-import { Observable, of, tap } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class AuthService {
-  private apiUrl = '/ocrb/api';
-
-  constructor(private http: HttpClient, private router: Router) { }
-
-  login(username: string, password: string): Observable<any> {
-    return this.http.post(`${this.apiUrl}/login`, { username, password }).pipe(
-      tap((res: any) => {
-        if (res.token) {
-          localStorage.setItem('token', res.token);
-        }
-      })
-    );
-  }
-
-  logout() {
-    localStorage.removeItem('token');
-    this.router.navigate(['/login']);
-  }
-
-  isLoggedIn(): boolean {
-    return !!localStorage.getItem('token');
-  }
-}

frontend/src/app/fragments/menu/menu.component.html

@@ -0,0 +1,21 @@
+<div class="card m-0">
+  <p-menubar [model]="items" styleClass="text-sm">
+    <ng-template pTemplate="start">
+      <img src="assets/images/logo.png" class="w-3rem cursor-pointer" (click)="gotToDashboard()" pTooltip="Go to Dashboard" showDelay="500" tooltipPosition="bottom" />
+    </ng-template>
+    <ng-template pTemplate="end">
+      <div class="flex align-items-center justify-content-center gap-2">
+        <div class="flex flex-column line-height-1">
+          <span class="text-primary-700 font-medium">
+            {{ companyName }}
+          </span>
+          <span class="text-500 text-xs mt-1 text-right">
+            {{ name }} | {{ branchName }}
+          </span>
+        </div>
+        <p-menu #menu [model]="profileItems" [popup]="true" />
+        <p-button (click)="menu.toggle($event)" icon="pi pi-user" [rounded]="true" severity="info" />
+      </div>
+    </ng-template>
+  </p-menubar>
+</div>

frontend/src/app/fragments/menu/menu.component.ts

@@ -0,0 +1,114 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { MenubarModule } from 'primeng/menubar';
+import { HttpService } from '../../services/http.service';
+import { Request } from '../../models/request.model';
+import { AvatarModule } from 'primeng/avatar';
+import { MenuModule } from 'primeng/menu';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { SessionService } from '../../services/commons/session.service';
+import { EncryptionService } from '../../services/utilities/encryption.service';
+import { TooltipModule } from 'primeng/tooltip';
+import { environment } from '../../../environments/environment';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-menu',
+  standalone: true,
+  imports: [CommonModule, MenubarModule, AvatarModule, ButtonModule, MenuModule, InputTextModule, TooltipModule],
+  templateUrl: './menu.component.html'
+})
+export class MenuComponent implements OnInit {
+  items: MenuItem[] = [];
+  profileItems: MenuItem[] | undefined;
+  companyName: string = '';
+  branchName: string = '';
+  roleName: string = '';
+  name: string = '';
+  constructor(private router: Router, private http: HttpService, private session: SessionService, private enc: EncryptionService) { }
+  ngOnInit() {
+    if (typeof window !== 'undefined' && sessionStorage) {
+      let menuString = this.session.getItem("nav");
+      if (menuString) {
+        this.enc.decrypt(menuString).then(decrypted => {
+          if (decrypted) {
+            this.items = JSON.parse(decrypted).map((m: any) => this.mapMenu(m));
+            console.log(this.items);
+          }
+        });
+      }
+      // SessionService now returns parsed objects
+      const companies = this.session.getItem("companies");
+      const userDetails = this.session.getItem('userDetails');
+      
+      this.name = userDetails ? userDetails.displayName : '';
+      this.companyName = (companies && companies.length > 0) ? companies[0].companyName : '';
+      this.branchName = (companies && companies.length > 0) ? companies[0].branches[0].branchCode : '';
+      this.roleName = (companies && companies.length > 0) ? companies[0].branches[0].roles[0].groupName : '';
+    }
+    this.profileItems = [
+      {
+        label: this.roleName,
+        items: [
+          {
+            label: 'Details',
+            icon: 'pi pi-id-card',
+            command: () => {
+              this.router.navigateByUrl(`/dashboard/user/profile`);
+            }
+          },
+          {
+            label: 'Sign Out',
+            icon: 'pi pi-sign-out',
+            command: () => {
+              this.logout();
+            }
+          }
+        ]
+      }
+    ];
+  }
+
+
+  logout() {
+    const requestPayload: Request = {
+      data: '',
+      compressed: false
+    };
+    this.http.post(environment.authService + '/signout', requestPayload).subscribe({
+      next: () => {
+        sessionStorage.clear();
+        this.router.navigate(['/']);
+      },
+      error: (err) => {
+        console.error('Logout failed', err);
+      }
+    });
+  }
+
+  mapMenu(menu: any): MenuItem {
+    const hasChildren = Array.isArray(menu.items) && menu.items.length > 0;
+
+    return {
+      label: menu.label,
+      icon: menu.icon,
+      routerLink: !hasChildren && menu.route !== '#'
+        ? `/dashboard/user/${menu.route}`
+        : undefined,
+      command: !hasChildren && menu.route !== '#'
+        ? () => {
+          this.router.navigateByUrl(`/dashboard/user/${menu.route}`);
+        }
+        : undefined,
+      items: hasChildren
+        ? menu.items.map((c: any) => this.mapMenu(c))
+        : undefined
+    };
+  }
+
+  gotToDashboard() {
+    this.router.navigate(['/']);
+  }
+}

frontend/src/app/interceptors/auth.interceptor.ts

@@ -0,0 +1,139 @@
+import { SessionService } from './../services/commons/session.service';
+import {
+  HttpInterceptorFn,
+  HttpRequest,
+  HttpHandlerFn,
+  HttpEvent,
+  HttpResponse,
+  HttpErrorResponse,
+  HttpHeaders
+} from '@angular/common/http';
+import { Observable, tap, catchError, throwError, from, switchMap } from 'rxjs';
+import { EncryptionService } from '../services/utilities/encryption.service';
+import { inject } from '@angular/core';
+import { ResponseDto } from '../models/response.dto';
+
+export const AuthInterceptor: HttpInterceptorFn = (
+  req: HttpRequest<any>,
+  next: HttpHandlerFn
+): Observable<HttpEvent<any>> => {
+
+  const encryptionService = inject(EncryptionService);
+  const sessionService = inject(SessionService);
+
+  /* -----------------------------------------
+   * 1️⃣ Always attach Authorization header
+   * ----------------------------------------- */
+  // OCR uses sessionStorage for token now (migrated previously)
+  const token = sessionStorage.getItem('token'); 
+
+  let reqHeaders = req.headers.set('Content-Type', 'application/json');
+
+  if (token) {
+    reqHeaders = reqHeaders.set(
+      'Authorization',
+      `Bearer ${token}`
+    );
+  }
+
+  /* -----------------------------------------
+   * 2️⃣ Handle encrypted (compressed) requests
+   * ----------------------------------------- */
+  if (
+    req.body &&
+    typeof req.body === 'object' &&
+    req.body.compressed
+  ) {
+    return from(encryptionService.encrypt(req.body.data)).pipe(
+      switchMap(encryptedBody => {
+
+        const payload = {
+          scopes: req.body.scopes ?? [],
+          data: encryptedBody,
+          target: req.body.target ?? null,
+          compressed: true
+        };
+
+        const modifiedReq = req.clone({
+          body: payload,
+          headers: reqHeaders
+        });
+
+        // Use 'any' type for event to avoid strict type mismatch if ResponseDto structure varies
+        return next(modifiedReq).pipe(
+          tap((event: any) => handleResponse(event, sessionService, encryptionService)),
+          catchError((error: HttpErrorResponse) =>
+            throwError(() => error)
+          )
+        );
+      })
+    );
+  }
+
+  /* -----------------------------------------
+   * 3️⃣ Non-encrypted requests (GET included)
+   * ----------------------------------------- */
+  const modifiedReq = req.clone({
+    headers: reqHeaders
+  });
+
+  return next(modifiedReq).pipe(
+    tap((event: any) => handleResponse(event, sessionService, encryptionService)),
+    catchError((error: HttpErrorResponse) =>
+      throwError(() => error)
+    )
+  );
+};
+
+function handleResponse(
+  event: HttpEvent<any>,
+  sessionService: SessionService,
+  encryptionService: EncryptionService
+): void {
+
+  if (!(event instanceof HttpResponse) || !event.ok) {
+    return;
+  }
+
+  // Handle Authenticate Response
+  if (event.url?.endsWith('/authenticate')) {
+    const response = event.body as ResponseDto;
+    if (response?.data?.token) {
+        sessionStorage.setItem('token', response.data.token);
+    }
+    if (response?.data?.companies) {
+        sessionService.setItem('companies', response.data.companies);
+    }
+  }
+
+  // Handle Authorize Response
+  if (event.url?.endsWith('/authorize')) {
+    const response = event.body as ResponseDto;
+    // Clearing session might be too aggressive if we just logged in, but following source logic
+    // sessionService.clear(); 
+    
+    if (response?.data?.token) {
+        sessionStorage.setItem('token', response.data.token);
+    }
+    if (response?.data?.refreshToken) {
+        sessionService.setItem('refreshToken', response.data.refreshToken);
+    }
+    if (response?.data?.userDetails) {
+        sessionService.setItem('userDetails', response.data.userDetails);
+    }
+
+    if (response?.data?.data) {
+        encryptionService.encrypt(response.data.data)
+          .then(encryptedNav => {
+            sessionService.setItem('nav', encryptedNav);
+        });
+    }
+
+    if (response?.data?.companies) {
+      sessionService.setItem(
+        'companies',
+        response.data.companies
+      );
+    }
+  }
+}

frontend/src/app/interceptors/authorize.guard.ts

@@ -0,0 +1,40 @@
+import { Injectable, inject, PLATFORM_ID } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router';
+import { isPlatformBrowser } from '@angular/common';
+
+@Injectable({ providedIn: 'root' })
+export class AuthorizeGuard implements CanActivate, CanActivateChild {
+
+  private platformId = inject(PLATFORM_ID);
+  private router = inject(Router);
+
+  private checkAuth(): boolean {
+    if (!isPlatformBrowser(this.platformId)) {
+      return false;
+    }
+
+    const token = sessionStorage.getItem('token');
+
+    if (!token) {
+      sessionStorage.clear();
+      this.router.navigate(['/']);
+      return false;
+    }
+
+    return true;
+  }
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): boolean {
+    return this.checkAuth();
+  }
+
+  canActivateChild(
+    childRoute: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): boolean {
+    return this.checkAuth();
+  }
+}

frontend/src/app/login/login.component.css

@@ -0,0 +1,42 @@
+::ng-deep .p-password-input {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.login-page {
+  height: 99vh;
+}
+
+::ng-deep .p-card {
+  position: relative;
+  border-radius: 24px !important;
+  background: white;
+  padding: 1rem;
+  overflow: hidden;
+}
+
+/* Gradient border */
+::ng-deep .p-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 3px; /* border thickness */
+  border-radius: 24px;
+  filter: drop-shadow(0 0 12px rgba(91, 185, 138, 0.35));
+  background: linear-gradient(
+    180deg,
+    #5bb98a 0%,
+    rgba(91, 185, 138, 0.6) 40%,
+    rgba(91, 185, 138, 0.15) 70%,
+    transparent 100%
+  );
+
+  /* Mask trick = border only */
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+
+  pointer-events: none;
+}

frontend/src/app/login/login.component.html

@@ -0,0 +1,54 @@
+<div class="grid align-content-center justify-content-center login-page" style="height: 100vh; display: flex; align-items: center; justify-content: center;">
+  <div>
+    <form [formGroup]="loginForm" (ngSubmit)="onLogin()">
+      <p-card styleClass="login-card shadow-3 w-30rem">
+        <ng-template pTemplate="header">
+          <div class="flex flex-column align-items-center gap-3 w-full mt-3 text-center">
+            <img src="assets/images/logo.png" class="w-5rem" />
+            <span class="text-xl font-bold whitespace-nowrap">
+              User Login
+            </span>
+          </div>
+        </ng-template>
+        
+        <div class="mt-4">
+          <div class="p-inputgroup">
+            <span class="p-inputgroup-addon">
+                <i class="pi pi-user"></i>
+            </span>
+            <span class="p-float-label">
+              <input pInputText id="username" formControlName="username"/>
+              <label htmlFor="username">Username</label>
+            </span>
+          </div>
+        </div>
+
+        <div class="mt-4">
+            <div class="p-inputgroup">
+              <span class="p-inputgroup-addon">
+                <i class="pi pi-lock"></i>
+              </span>
+              <span class="p-float-label">
+                <p-password
+                  class="w-full"
+                  formControlName="password"
+                  [feedback]="false"
+                  [toggleMask]="true"
+                  [style]="{ width: '100%' }"
+                  inputId="password"
+                ></p-password>
+                <label htmlFor="password">Password</label>
+              </span>
+            </div>
+        </div>
+
+        <div class="mt-4 mb-2 text-right">
+          <button pButton label="Login" icon="pi pi-sign-in" [disabled]="!loginForm.valid"></button>
+        </div>
+        <div class="mt-4 mb-2" *ngIf="message">
+          <p-message severity="danger" [text]="message"></p-message>
+        </div>
+      </p-card>
+    </form>
+  </div>
+</div>

frontend/src/app/login/login.component.ts

@@ -1,77 +1,67 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule} from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { AuthService } from '../auth.service';
-import { Router } from '@angular/router';
-import { MessageService } from 'primeng/api';
-
-// PrimeNG Imports
-import { CardModule } from 'primeng/card';
-import { InputTextModule } from 'primeng/inputtext';
+import { Component } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
-import { ToastModule } from 'primeng/toast';
+import { InputTextModule } from 'primeng/inputtext';
+import { CardModule } from 'primeng/card';
+import { PasswordModule } from 'primeng/password';
+import { KeyFilterModule } from 'primeng/keyfilter';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule} from '@angular/forms';
+import { Request } from '../models/request.model';
+import { HttpService } from '../services/http.service';
+import { MessageModule } from 'primeng/message';
+import { Router } from '@angular/router';
+import { environment } from '../../environments/environment';
+import { BadgeModule } from "primeng/badge";
 
 @Component({
   selector: 'app-login',
+  templateUrl: './login.component.html',
   standalone: true,
+  styleUrl: './login.component.css',
   imports: [
     CommonModule, 
     FormsModule, 
+    ReactiveFormsModule,
     CardModule, 
-    InputTextModule, 
     ButtonModule, 
-    ToastModule
-  ],
-  providers: [MessageService],
-  template: `
-    <div class="login-container">
-      <p-card header="OCR Admin Login" [style]="{width: '360px'}" styleClass="p-card-shadow">
-        <div class="field mt-4">
-            <span class="p-float-label">
-                <input id="username" type="text" pInputText [(ngModel)]="username" class="w-full"> 
-                <label for="username">Username</label>
-            </span>
-        </div>
-        <div class="field mt-4">
-            <span class="p-float-label">
-                <input id="password" type="password" pInputText [(ngModel)]="password" class="w-full">
-                <label for="password">Password</label>
-            </span>
-        </div>
-        <div class="mt-4">
-            <p-button label="Sign In" icon="pi pi-user" styleClass="w-full" (onClick)="onLogin()"></p-button>
-        </div>
-      </p-card>
-      <p-toast></p-toast>
-    </div>
-  `,
-  styles: [`
-    .login-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        background: var(--surface-card);
-    }
-    .w-full { width: 100%; }
-    .mt-4 { margin-top: 1.5rem; }
-    /* PrimeNG handles the rest */
-  `]
+    InputTextModule, 
+    PasswordModule,
+    KeyFilterModule, 
+    MessageModule, 
+    BadgeModule
+  ]
 })
 export class LoginComponent {
-  username = '';
-  password = '';
+  loginForm: FormGroup;
+  message?: string;
 
-  constructor(private auth: AuthService, private router: Router, private messageService: MessageService) {}
-
-  onLogin() {
-    this.auth.login(this.username, this.password).subscribe({
-      next: () => {
-        this.router.navigate(['/']);
-      },
-      error: () => {
-        this.messageService.add({severity:'error', summary:'Error', detail:'Invalid Credentials'});
-      }
+  constructor(private fb: FormBuilder, private http: HttpService, private router: Router) {
+    this.loginForm = this.fb.group({
+      username: ['', Validators.required],
+      password: ['', Validators.required]
     });
   }
+
+  onLogin() {
+    this.message = '';
+    if (this.loginForm.valid) {
+      const requestPayload: Request = {
+        data: this.loginForm.value,
+        compressed: true,
+        target: 'models.auth.Login'
+      };
+      // Matching cygnus-ui endpoint structure
+      this.http.post<any>(`${environment.authService}/3z4mkell5g5aset/authenticate`, requestPayload).subscribe({
+        next: (response) => {
+          // Token is handled by AuthInterceptor now for 'authenticate' endpoint
+          // But we can double check or just navigate
+          this.router.navigate(['/authorize']);
+        },
+        error: (err) => {
+          this.message = err.message || 'Login Failed';
+        }
+      });
+    }
+  }
 }

frontend/src/app/models/account.model.ts

@@ -0,0 +1,91 @@
+export class SubsidiaryDTO {
+  id?: string;
+  companyId?: string;
+  companyName?: string;
+  code?: string;
+  name?: string;
+  officeNo?: string;
+  street?: string;
+  locality?: string;
+  cityId?: string;
+  stateId?: string;
+  cityName?: string;
+  stateName?: string;
+  pinCode?: string;
+  emailId?: string;
+  contactNo?: string;
+  contactPerson?: string;
+  panNo?: string;
+  cinNo?: string;
+  msmeNo?: string;
+  updatedAt?: Date;
+  updatedBy?: string;
+  updatedUser?: string;
+  active?: boolean;
+
+  constructor(init?: Partial<SubsidiaryDTO>) {
+    Object.assign(this, init);
+    if (init?.updatedAt) {
+      this.updatedAt = new Date(init.updatedAt);
+    }
+  }
+}
+
+export interface DepartmentDTO {
+  id: string;
+  companyId: string;
+  department: string;
+  parentDepartment?: string;
+  parentDepartmentName?: string;
+  createdUser: string;
+  updatedAt: string;
+  updatedUser: string;
+  active: boolean;
+}
+
+export interface DesignationDTO {
+  id: string;
+  companyId: string;
+  departmentId: string;
+  departmentName: string;
+  designation: string;
+  createdUser: string;
+  updatedAt: string;
+  updatedUser: string;
+  active: boolean;
+  hod: boolean;
+  payGrade?: string;
+}
+
+export interface EmployeeDTO {
+  id: string;
+  subsidiaryId: string;
+  departmentId: string;
+  designationId: string;
+  subsidiaryName: string;
+  department: string;
+  designation: string;
+  employeeId?: string;
+  joiningDate?: string;
+  fullName: string;
+  fatherName?: string;
+  gender?: string;
+  dob?: string;
+  residenceAddress?: string;
+  residenceCityId?: string;
+  residenceStateId?: string;
+  residenceCityName?: string;
+  residenceStateName?: string;
+  permanentAddress?: string;
+  permanentCityId?: string;
+  permanentStateId?: string;
+  permanentCityName?: string;
+  permanentStateName?: string;
+  contactNo: string;
+  alternateNo?: string;
+  emailId: string;
+  createdUser: string;
+  updatedAt: string;
+  updatedUser: string;
+  active: boolean;
+}

frontend/src/app/models/masters/masters.ts

@@ -0,0 +1,16 @@
+export interface CityDTO {
+  id?:string,
+  stateId?:string,
+  stateName?:string,
+  cityName?:string,
+  stateCode?:string,
+  gstCode?:string
+}
+
+export interface SearchDTO {
+  module?:string,
+  searchBy?:string,
+  searchValue?:string,
+  offset?:number,
+  limit?:number
+}

frontend/src/app/models/masters/member/memberlist.ts

@@ -0,0 +1,16 @@
+export interface MemberList {
+  id:string,
+  memberno:string,
+  membername:string,
+  fathername:string,
+  mobileno?:string,
+  membershipdate?:Date,
+  emailid?:string,
+  dob?:Date,
+  age?:number,
+  gender?:string,
+  status:string
+  isactive:boolean,
+  updatedat:Date,
+  updatedby:string
+}

frontend/src/app/models/request.model.ts

@@ -0,0 +1,6 @@
+export interface Request<T = any> {
+  scopes?: string[];
+  data: T;
+  target?: string;
+  compressed?: boolean;
+}

frontend/src/app/models/response.dto.ts

@@ -0,0 +1,6 @@
+export interface ResponseDto {
+  statuscode : number;
+  message?: string;
+  description?: string;
+  data?: any;
+}

frontend/src/app/models/session.model.ts

@@ -0,0 +1,35 @@
+export interface Company {
+  id?: string;
+  companyName?: string;
+  companyCode?: string;
+  branches?: Branch[];
+}
+
+export interface Branch {
+  id?: string;
+  branchName?: string;
+  branchCode?: string;
+  roles?: Role[];
+}
+
+export interface Role {
+  roleName?: string;
+  groupName?: string;
+  defaultRole?: boolean;
+}
+
+export interface UserProfile {
+  username?: string;
+  employeeId?: string;
+  joiningDate?: Date;
+  displayName?: string;
+  department?: string;
+  designation?: string;
+  name?: string;
+  fatherName?: string;
+  gender?: string;
+  dob?: Date;
+  contactNo?: string;
+  alternateContactNo?: string;
+  emailId?: string;
+}

frontend/src/app/models/user.model.ts

@@ -0,0 +1,29 @@
+export interface UserDTO {
+    id?: string;
+    loginId?: string;
+    loginPassword?: string;
+    displayName?: string;
+    fkEmployeeId?: string;
+    employeeId?: string;
+    employeeName?: string;
+    fatherName?: string;
+    department?: string;
+    designation?: string;
+    status?: string;
+    updatedAt?: string;
+    updatedUser?: string;
+    active?: boolean;
+    userRoles?: UserRoleDTO[];
+}
+
+export interface UserRoleDTO {
+    id?: string;
+    roleId?: string;
+    branchId?: string;
+    roleName?: string;
+    groupName?: string;
+    branchName?: string;
+    updatedAt?: string;
+    updatedUser?: string;
+    active?: boolean;
+}

frontend/src/app/pages/account/company/department/department.component.css

@@ -0,0 +1 @@
+

frontend/src/app/pages/account/company/department/department.component.html

@@ -0,0 +1,162 @@
+<div class="card">
+  <p-toast />
+  <p-toolbar class="mb-6">
+      <ng-template pTemplate="start">
+          <p-button label="New Department" icon="pi pi-plus" class="mr-2" (onClick)="openNew()" />
+      </ng-template>
+
+      <ng-template pTemplate="end">
+         <p-button label="Export" icon="pi pi-upload" severity="secondary" (onClick)="exportCSV()" styleClass="mx-2" />
+         <p-button label="Refresh" icon="pi pi-refresh" severity="info" (onClick)="loadAllDepartments()" />
+      </ng-template>
+  </p-toolbar>
+
+  <p-table
+      #dt
+      [value]="isLoading ? skeletonData : departments"
+      [rows]="5"
+      [columns]="cols"
+      [paginator]="true"
+      [globalFilterFields]="['department']"
+      [tableStyle]="{ 'min-width': '75rem' }"
+      [(selection)]="selectedDepartments"
+      [rowHover]="true"
+      dataKey="id"
+      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+      [showCurrentPageReport]="true"
+  >
+      <ng-template pTemplate="caption">
+          <div class="flex justify-content-between align-items-center">
+              <h4 class="m-0">Manage Departments</h4>
+              <span class="p-input-icon-left">
+                  <i class="pi pi-search"></i>
+                  <input pInputText type="text" (input)="dt.filterGlobal($any($event.target).value, 'contains')" placeholder="Search..." />
+              </span>
+          </div>
+      </ng-template>
+      <ng-template pTemplate="header">
+          <tr>
+              <th style="width: 3rem">#</th>
+              <th pSortableColumn="department">
+                  <div class="flex items-center gap-2">
+                      Department
+                      <p-sortIcon field="department" />
+                  </div>
+              </th>
+              <th pSortableColumn="parentDepartmentName" style="min-width: 10rem">
+                  <div class="flex items-center gap-2">
+                      Parent Department
+                      <p-sortIcon field="parentDepartmentName" />
+                  </div>
+              </th>
+              <th pSortableColumn="updatedAt" style="width: 13rem">
+                  <div class="flex items-center gap-2">
+                      Updated At
+                      <p-sortIcon field="updatedAt" />
+                  </div>
+              </th>
+              <th pSortableColumn="updatedUser" style="min-width: 12rem">
+                <div class="flex items-center gap-2">
+                    Updated By
+                    <p-sortIcon field="updatedUser" />
+                </div>
+              </th>
+              <th pSortableColumn="active" style="width: 4rem">
+                <div class="flex items-center gap-2">
+                    Status
+                    <p-sortIcon field="active" />
+                </div>
+              </th>
+            <th style="min-width: 8rem"></th>
+          </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-department let-rowIndex="rowIndex">
+          <tr *ngIf="!isLoading">
+              <td>{{ rowIndex + 1 }}</td>
+              <td>{{ department.department }}</td>
+              <td>
+                <span *ngIf="department.parentDepartmentName; else noParent">
+                  {{ department.parentDepartmentName }}
+                </span>
+
+                <ng-template #noParent>
+                  <em class="text-500 ">Not Available</em>
+                </ng-template>
+              </td>
+              <td>{{ department.updatedAt | date:'dd/MM/yyyy HH:mm:ss' }}</td>
+              <td>
+                <span *ngIf="department.updatedUser; else noUpdatedUser">
+                  {{ department.updatedUser }}
+                </span>
+
+                <ng-template #noUpdatedUser>
+                  <em class="text-500 ">Not Available</em>
+                </ng-template>
+              </td>
+              <td>
+                  <p-tag [value]="department.active ? 'Active' : 'Inactive'" [severity]="getSeverity(department.active)" />
+              </td>
+              <td>
+                  <p-button icon="pi pi-pencil" class="mr-2" [rounded]="true" [outlined]="true" (click)="editDepartment(department)" />
+                  <p-button [icon]="department.active ? 'pi pi-ban' : 'pi pi-check'" [severity]="department.active ? 'danger' : 'success'" [rounded]="true" [outlined]="true" (click)="toggleActive(department)" />
+              </td>
+          </tr>
+          <tr *ngIf="isLoading">
+              <td><p-skeleton width="2rem" height="1.5rem"></p-skeleton></td>
+              <td><p-skeleton width="10rem" height="1.5rem"></p-skeleton></td>
+              <td><p-skeleton width="8rem" height="1.5rem"></p-skeleton></td>
+              <td><p-skeleton width="10rem" height="1.5rem"></p-skeleton></td>
+              <td><p-skeleton width="8rem" height="1.5rem"></p-skeleton></td>
+              <td><p-skeleton width="4rem" height="1.5rem"></p-skeleton></td>
+              <td><p-skeleton width="2rem" height="1.5rem"></p-skeleton></td>
+          </tr>
+      </ng-template>
+  </p-table>
+
+  <p-dialog [(visible)]="departmentDialog" [style]="{'width': '50vw'}" [breakpoints]="{ '960px': '75vw', '640px': '90vw' }" header="Department Details" [modal]="true">
+      <ng-template pTemplate="content">
+        <form [formGroup]="departmentForm" (ngSubmit)="saveDepartment()" class="mt-2">
+          <div class="grid mt-0">
+            <div class="col-12">
+              <span class="p-float-label">
+                <input
+                  id="department"
+                  pInputText
+                  formControlName="department"
+                  fluid
+                  [class.p-invalid]="isFieldInvalid('department')"
+                  pTooltip="{{ getErrorMessage('department') }}"
+                  tooltipPosition="top"
+                  autofocus
+                />
+                <label for="department">Department Name <span class="text-red-500">*</span></label>
+              </span>
+            </div>
+            <div class="col-12">
+              <span class="p-float-label">
+                <p-dropdown
+                  id="parentDepartment"
+                  [options]="departmentOptions"
+                  formControlName="parentDepartment"
+                  optionLabel="label"
+                  optionValue="value"
+                  [filter]="true"
+                  filterBy="label"
+                  fluid
+                  appendTo="body"
+                />
+                <label for="parentDepartment">Parent Department</label>
+              </span>
+            </div>
+          </div>
+        </form>
+      </ng-template>
+
+      <ng-template pTemplate="footer">
+          <p-button label="Cancel" icon="pi pi-times" text (click)="hideDialog()" />
+          <p-button label="Save" icon="pi pi-check" (click)="saveDepartment()" />
+      </ng-template>
+  </p-dialog>
+
+  <p-confirmDialog [style]="{ width: '450px' }" />
+</div>