+
+
diff --git a/client/src/app/features/auth/login/login.spec.ts b/client/src/app/features/auth/login/login.spec.ts
new file mode 100644
index 0000000..1ee4152
--- /dev/null
+++ b/client/src/app/features/auth/login/login.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Login } from './login';
+
+describe('Login', () => {
+ let component: Login;
+ let fixture: ComponentFixture
+
+
+
+
+
+ LIB
+
+ LIB
RIS
+ + Integrated Library Management System. +
+
+ SYSTEM v1.0 // 2026
+
+
+
+
+
+ LOGIN
+ + +
+
+
diff --git a/client/src/app/features/auth/register/register.ts b/client/src/app/features/auth/register/register.ts
new file mode 100644
index 0000000..67c74ef
--- /dev/null
+++ b/client/src/app/features/auth/register/register.ts
@@ -0,0 +1,49 @@
+import { Component, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { AuthService } from '../../../core/services/auth';
+import { ButtonComponent } from '../../../shared/components/button/button';
+
+@Component({
+ selector: 'app-register',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, RouterLink, ButtonComponent],
+ templateUrl: './register.html',
+ styleUrl: './register.css',
+})
+export class RegisterComponent {
+ private fb = inject(FormBuilder);
+ private authService = inject(AuthService);
+ private router = inject(Router);
+
+ loading = signal(false);
+ error = signal
+
+
+
+
+
+ CREATE
+
+ CREATE
ACCOUNT
+ + Join the Libris community and manage your personal collection. +
+
+ LIBRIS // v1.0
+
+
+
+
+
+ New Account
+ + +
+
diff --git a/client/src/app/features/books/book-catalog/book-catalog.spec.ts b/client/src/app/features/books/book-catalog/book-catalog.spec.ts
new file mode 100644
index 0000000..1f5691e
--- /dev/null
+++ b/client/src/app/features/books/book-catalog/book-catalog.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookCatalog } from './book-catalog';
+
+describe('BookCatalog', () => {
+ let component: BookCatalog;
+ let fixture: ComponentFixture
+
+
+
+ @if (showAddForm()) {
+
+ }
+
+
+
+
+ + {{ isLibrarian() ? 'Inventory Management' : 'Book Catalog' }} +
++ {{ isLibrarian() ? 'Manage the library collection and track physical stock.' : 'Browse and search the library\'s complete collection.' }} +
+
+
+ Add New Book
+
+ }
+
+
+
+
+
+
+ @if (isLibrarian()) {
+
+ @for (book of books(); track book.id) {
+
+
+ @if (loading()) {
+
+
+
+ } @empty {
+ @if (!loading()) {
+
+ @if (book.coverImageUrl) {
+ ![]()
+ } @else {
+
+
+
+ 📚
+ No Cover
+
+ }
+
+
+ View Details
+
+
+
+
+ {{ book.category }}
+
+
+ {{ book.availableCount > 0 ? 'Available' : 'Borrowed' }}
+
+
+
+
+
+
+ + {{ book.title }} +
+{{ book.author }}
+
+
+
+
+ Inventory
+ {{ book.availableCount }} / {{ book.totalCount }}
+
+ {{ book.isbn }}
+
+ ∅
+
+ }
+ }
+ No books found matching your search.
+
+
+
+ }
+
+
diff --git a/client/src/app/features/books/book-detail/book-detail.spec.ts b/client/src/app/features/books/book-detail/book-detail.spec.ts
new file mode 100644
index 0000000..65cdbaf
--- /dev/null
+++ b/client/src/app/features/books/book-detail/book-detail.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookDetail } from './book-detail';
+
+describe('BookDetail', () => {
+ let component: BookDetail;
+ let fixture: ComponentFixture
+ ← Back to Catalog
+
+ @if (book(); as b) {
+
+
+ @if (loading()) {
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ b.category }}
+
+
+ {{ b.title }}
+{{ b.author }}
+
+
+
+
+
+ Book Details
+-
+
- + ISBN + {{ b.isbn }} + +
- + ID + {{ b.id }} + +
- + Category + {{ b.category }} + +
+
+ Availability
+{{ b.availableCount }} / {{ b.totalCount }}
+ Copies currently available for checkout.
+
+
+
+
+ {{ checkoutLoading() ? 'Processing...' : 'Borrow Book' }}
+
+ } @else {
+
+ Reserve Book
+
+
+
+ Actions
+ + @if (isLibrarian()) { +
+
+ } @else if (isMember()) {
+ @if (b.availableCount > 0) {
+
+
+
+ Member Checkout
+ +
+
+ Find
+
+
+ @if (foundMember(); as m) {
+
+
+ {{ checkoutLoading() ? 'Processing...' : 'Complete Checkout' }}
+
+
+ }
+ {{ m.fullName }}
+ {{ m.membershipNumber }}
+
+
+
+
+
+
+ Add Copies
+
+
+ Get notified when a copy is returned.
+ } + } +
+
+ Notice
+All loans and returns are tracked in your library account history.
+
+
+
+ }
+
+
+
diff --git a/client/src/app/features/dashboard/dashboard.spec.ts b/client/src/app/features/dashboard/dashboard.spec.ts
new file mode 100644
index 0000000..2ce950a
--- /dev/null
+++ b/client/src/app/features/dashboard/dashboard.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Dashboard } from './dashboard';
+
+describe('Dashboard', () => {
+ let component: Dashboard;
+ let fixture: ComponentFixture
+
+
+
+
+
+ Library Management System
+
+ + {{ isLibrarian() ? 'System Dashboard' : 'My Library' }} +
++ {{ isLibrarian() + ? 'Manage your collection, track loans, and oversee member activities from one central hub.' + : 'Track your current loans, explore the catalog, and manage your reservations.' + }} +
+
+ @if (isLibrarian()) {
+ @if (summary(); as s) {
+
+
+
+
+
+ Total Collection
+ {{ s.totalBooks }}
+
+
+ Inventory Copies
+ {{ s.totalBookCopies }}
+
+
+ Active Loans
+ {{ s.activeLoans }}
+
+
+ } @else {
+ Overdue Books
+ {{ s.overdueLoans }}
+ Loading dashboard data...
+ }
+ } @else {
+
+
+
+ My Active Loans
+ {{ myLoans().length }}
+
+
+ Due Soon
+ 0
+
+
+ }
+ Pending Reservations
+ 0
+
+
+{{ isLibrarian() ? 'Recent Activities' : 'My Current Loans' }}
+
+
+
+
+
+ | Member | +Book | +Action | + } @else { +Book Title | +Due Date | +Status | + } +
|---|---|---|---|---|---|
| No recent activities found. | +|||||
|
+ {{ loan.bookInstance.book.title }}
+ {{ loan.bookInstance.book.author }}
+ |
+ {{ loan.dueDate | date:'mediumDate' }} | ++ + {{ loan.status }} + + | +|||
| You have no active loans. | +|||||
+
diff --git a/client/src/app/features/loans/loan-management/loan-management.ts b/client/src/app/features/loans/loan-management/loan-management.ts
new file mode 100644
index 0000000..ec14638
--- /dev/null
+++ b/client/src/app/features/loans/loan-management/loan-management.ts
@@ -0,0 +1,72 @@
+import { Component, inject, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoanService, Loan } from '../../../core/services/loan';
+import { ToastService } from '../../../core/services/toast';
+import { ButtonComponent } from '../../../shared/components/button/button';
+
+type LoanFilter = 'ALL' | 'ACTIVE' | 'OVERDUE' | 'RETURNED';
+
+@Component({
+ selector: 'app-loan-management',
+ standalone: true,
+ imports: [CommonModule, ButtonComponent],
+ templateUrl: './loan-management.html',
+ styleUrl: './loan-management.css',
+})
+export class LoanManagementComponent {
+ private loanService = inject(LoanService);
+ private toastService = inject(ToastService);
+
+ allLoans = signal
+
+
+
+ Loan Management
+Oversee all active, overdue, and completed loans across the system.
+
+ @for (f of filters; track f) {
+
+ }
+
+ {{ filteredLoans().length }} record{{ filteredLoans().length !== 1 ? 's' : '' }}
+
+
+
+
+ @if (confirmReturnId() !== null) {
+
+ Confirm return for loan #{{ confirmReturnId() }}?
+
+ }
+
+
+
+
+
+
+
+
+
+
+| Book | +Member | +Due Date | +Actions | +
|---|---|---|---|
|
+ {{ loan.bookInstance.book.title }}
+ Loan #{{ loan.id }}
+ |
+
+ {{ loan.member.fullName }}
+ {{ loan.member.membershipNumber }}
+ |
+
+
+ {{ loan.dueDate | date:'mediumDate' }}
+
+
+ {{ loan.status }}
+
+ |
+
+ @if (loan.status !== 'RETURNED') {
+ |
+
|
+ @if (loading()) {
+ Loading circulation data...
+ } @else {
+ No loans found for this filter.
+ }
+ |
+ |||
+
diff --git a/client/src/app/features/loans/my-loans/my-loans.spec.ts b/client/src/app/features/loans/my-loans/my-loans.spec.ts
new file mode 100644
index 0000000..6fc61db
--- /dev/null
+++ b/client/src/app/features/loans/my-loans/my-loans.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyLoans } from './my-loans';
+
+describe('MyLoans', () => {
+ let component: MyLoans;
+ let fixture: ComponentFixture
+
+
+ My Borrowing History
+View and track your current loans and borrowing history.
+
+
+
+
+
+
+ @if (loading()) {
+ | Book | +Loan Date | +Due Date | +Status | +
|---|---|---|---|
|
+ {{ loan.bookInstance.book.title }}
+ {{ loan.bookInstance.book.author }}
+ |
+ {{ loan.borrowedAt | date:'yyyy.MM.dd' }} | +{{ loan.dueDate | date:'yyyy.MM.dd' }} | ++ + {{ loan.status }} + + | +
| + You have no active loans. + | +|||
+
+
+ }
+
+
diff --git a/client/src/app/features/members/member-management/member-management.spec.ts b/client/src/app/features/members/member-management/member-management.spec.ts
new file mode 100644
index 0000000..e2fb45e
--- /dev/null
+++ b/client/src/app/features/members/member-management/member-management.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MemberManagement } from './member-management';
+
+describe('MemberManagement', () => {
+ let component: MemberManagement;
+ let fixture: ComponentFixture
+
+ {{ showAddForm() ? 'Cancel' : 'Add New Member' }}
+
+
+
+
+ @if (showAddForm()) {
+
+ }
+
+
+ @if (confirmDeleteId() !== null) {
+
+
+ Member Registry
+Manage library members and their access status.
+
+ Permanently remove member #{{ confirmDeleteId() }}?
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+ @if (loading()) {
+ | Member ID | +Full Name | +Contact Details | +Actions | +
|---|---|---|---|
| {{ member.membershipNumber }} | +
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+ |
+
| {{ member.membershipNumber }} | +{{ member.fullName }} | +
+ {{ member.email }}
+ {{ member.phoneNumber || '—' }}
+ |
+
+
+
+
+
+ |
+
| + No members found in the registry. + | +|||
+
+
+ }
+
+
diff --git a/client/src/app/features/reservations/my-reservations/my-reservations.ts b/client/src/app/features/reservations/my-reservations/my-reservations.ts
new file mode 100644
index 0000000..d77fa28
--- /dev/null
+++ b/client/src/app/features/reservations/my-reservations/my-reservations.ts
@@ -0,0 +1,56 @@
+import { Component, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReservationService, Reservation } from '../../../core/services/reservation';
+import { ToastService } from '../../../core/services/toast';
+import { ButtonComponent } from '../../../shared/components/button/button';
+
+@Component({
+ selector: 'app-my-reservations',
+ standalone: true,
+ imports: [CommonModule, ButtonComponent],
+ templateUrl: './my-reservations.html',
+})
+export class MyReservationsComponent {
+ private reservationService = inject(ReservationService);
+ private toastService = inject(ToastService);
+
+ reservations = signal
+
+
+
+ @if (confirmCancelId() !== null) {
+ My Reservations
+Books you've placed holds on. You'll be notified when they become available.
+
+ Cancel reservation #{{ confirmCancelId() }}?
+
+ }
+
+ @if (loading()) {
+
+
+
+
+
+
+
+ } @else if (reservations().length === 0) {
+
+ 📋
+
+ } @else {
+ You don't have any active reservations.
+Browse the catalog and reserve books that are currently on loan.
+
+
+
+
+
+ }
+| Book | +Reserved On | +Status | +Actions | +
|---|---|---|---|
|
+ {{ res.book.title }}
+ {{ res.book.author }}
+ |
+ + {{ res.reservationDate | date:'mediumDate' }} + | ++ + {{ res.status }} + + | +
+ @if (res.status === 'PENDING' || res.status === 'READY') {
+ |
+
+
diff --git a/client/src/app/layout/main-layout/main-layout.spec.ts b/client/src/app/layout/main-layout/main-layout.spec.ts
new file mode 100644
index 0000000..e19be68
--- /dev/null
+++ b/client/src/app/layout/main-layout/main-layout.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainLayout } from './main-layout';
+
+describe('MainLayout', () => {
+ let component: MainLayout;
+ let fixture: ComponentFixture
+
+
+
+
+
diff --git a/client/src/app/layout/sidebar/sidebar.spec.ts b/client/src/app/layout/sidebar/sidebar.spec.ts
new file mode 100644
index 0000000..2f291a9
--- /dev/null
+++ b/client/src/app/layout/sidebar/sidebar.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Sidebar } from './sidebar';
+
+describe('Sidebar', () => {
+ let component: Sidebar;
+ let fixture: ComponentFixture
+
+
+
+
+
+ Libris
+
+
+
+
+
+
+ Library Dashboard
+
+
+
+ {{ username() }}
+ {{ role() }}
+
+
+ {{ username()?.charAt(0)?.toUpperCase() }}
+
+