diff --git a/package-lock.json b/package-lock.json
index 79f7ee8..907712b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,15 @@
"name": "common-cents-web",
"version": "0.0.0",
"dependencies": {
+ "@angular/cdk": "~21.1.4",
"@angular/common": "^21.1.0",
"@angular/compiler": "^21.1.0",
"@angular/core": "^21.1.0",
"@angular/forms": "^21.1.0",
+ "@angular/material": "~21.1.4",
"@angular/platform-browser": "^21.1.0",
"@angular/router": "^21.1.0",
+ "@js-temporal/polyfill": "^0.5.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0"
},
@@ -21,6 +24,7 @@
"@angular/build": "^21.1.3",
"@angular/cli": "^21.1.3",
"@angular/compiler-cli": "^21.1.0",
+ "@angular/material": "^21.1.4",
"jsdom": "^27.1.0",
"typescript": "~5.9.2",
"vitest": "^4.0.8"
@@ -422,6 +426,22 @@
}
}
},
+ "node_modules/@angular/cdk": {
+ "version": "21.1.4",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.1.4.tgz",
+ "integrity": "sha512-PElA4Ww4TIa3+B/ND+fm8ZPDKONTIqc9a/s0qNxhcAD9IpDqjaBVi/fyg+ZWBtS+x0DQgJtKeCsSZ6sr2aFQaQ==",
+ "license": "MIT",
+ "dependencies": {
+ "parse5": "^8.0.0",
+ "tslib": "^2.3.0"
+ },
+ "peerDependencies": {
+ "@angular/common": "^21.0.0 || ^22.0.0",
+ "@angular/core": "^21.0.0 || ^22.0.0",
+ "@angular/platform-browser": "^21.0.0 || ^22.0.0",
+ "rxjs": "^6.5.3 || ^7.4.0"
+ }
+ },
"node_modules/@angular/cli": {
"version": "21.1.3",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.1.3.tgz",
@@ -563,6 +583,24 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
+ "node_modules/@angular/material": {
+ "version": "21.1.4",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-21.1.4.tgz",
+ "integrity": "sha512-Vte+4os5JexhtaPk7Duk5bIC+zU5SYF7ZHUnpmAJxW0u4D4C9lpTVepm2bfMVV2AxHjHVAnW+/anINIS401UsA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.3.0"
+ },
+ "peerDependencies": {
+ "@angular/cdk": "21.1.4",
+ "@angular/common": "^21.0.0 || ^22.0.0",
+ "@angular/core": "^21.0.0 || ^22.0.0",
+ "@angular/forms": "^21.0.0 || ^22.0.0",
+ "@angular/platform-browser": "^21.0.0 || ^22.0.0",
+ "rxjs": "^6.5.3 || ^7.4.0"
+ }
+ },
"node_modules/@angular/platform-browser": {
"version": "21.1.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.3.tgz",
@@ -2036,6 +2074,18 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "node_modules/@js-temporal/polyfill": {
+ "version": "0.5.1",
+ "resolved": "https://registry.npmjs.org/@js-temporal/polyfill/-/polyfill-0.5.1.tgz",
+ "integrity": "sha512-hloP58zRVCRSpgDxmqCWJNlizAlUgJFqG2ypq79DCvyv9tHjRYMDOcPFjzfl/A1/YxDvRCZz8wvZvmapQnKwFQ==",
+ "license": "ISC",
+ "dependencies": {
+ "jsbi": "^4.3.0"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/@listr2/prompt-adapter-inquirer": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-3.0.5.tgz",
@@ -5854,6 +5904,12 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/jsbi": {
+ "version": "4.3.2",
+ "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-4.3.2.tgz",
+ "integrity": "sha512-9fqMSQbhJykSeii05nxKl4m6Eqn2P6rOlYiS+C5Dr/HPIU/7yZxu5qzbs40tgaFORiw2Amd0mirjxatXYMkIew==",
+ "license": "Apache-2.0"
+ },
"node_modules/jsdom": {
"version": "27.4.0",
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz",
@@ -6845,7 +6901,6 @@
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
"integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"entities": "^6.0.0"
@@ -6899,7 +6954,6 @@
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
- "dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
diff --git a/package.json b/package.json
index 6c41d2b..419698f 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,15 @@
"private": true,
"packageManager": "npm@10.9.2",
"dependencies": {
+ "@angular/cdk": "~21.1.4",
"@angular/common": "^21.1.0",
"@angular/compiler": "^21.1.0",
"@angular/core": "^21.1.0",
"@angular/forms": "^21.1.0",
+ "@angular/material": "~21.1.4",
"@angular/platform-browser": "^21.1.0",
"@angular/router": "^21.1.0",
+ "@js-temporal/polyfill": "^0.5.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0"
},
@@ -36,8 +39,9 @@
"@angular/build": "^21.1.3",
"@angular/cli": "^21.1.3",
"@angular/compiler-cli": "^21.1.0",
+ "@angular/material": "^21.1.4",
"jsdom": "^27.1.0",
"typescript": "~5.9.2",
"vitest": "^4.0.8"
}
-}
\ No newline at end of file
+}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index cb1270e..e60fc79 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,6 +1,5 @@
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
-
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a24f70e..5a89bba 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,14 +1,14 @@
import { Routes } from '@angular/router';
-import { Expenses } from './pages/expenses/expenses';
-import { Home } from './pages/home/home';
+import { ExpensePage } from './pages/expenses/expense-page.component';
+import { HomePage } from './pages/home/home-page.component';
export const routes: Routes = [
{
path: '',
- component: Home
+ component: HomePage
},
{
path: 'expenses',
- component: Expenses
+ component: ExpensePage
}
];
diff --git a/src/app/app.scss b/src/app/app.scss
index a31827e..79354d0 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -1,3 +1,7 @@
+.app-content {
+ padding: 0.5rem;
+}
+
h1 {
font-size: 3.125rem;
line-height: 100%;
diff --git a/src/app/components/expense-list/expense-list.component.html b/src/app/components/expense-list/expense-list.component.html
new file mode 100644
index 0000000..18a7201
--- /dev/null
+++ b/src/app/components/expense-list/expense-list.component.html
@@ -0,0 +1,6 @@
+
+
Expenses
+ @for (expense of expenses(); track expense.id) {
+
+ }
+
+
+ Date
+
+
+
+
+
+
+ Cents
+
+
+
+
+ Category
+
+
+ @for (category of categories(); track category.id) {
+ {{ category.name }}
+ }
+
+
+
+
+ Merchant
+
+
+ @for (merchant of merchants(); track merchant.id) {
+ {{ merchant.name }}
+ }
+
+
+
+
+ Note
+
+
+
+
+ Tags
+
+ @for (tag of tags(); track tag.id) {
+ {{ tag.name }}
+ }
+
+
+
diff --git a/src/app/components/expense/expense-form/expense-form.component.scss b/src/app/components/expense/expense-form/expense-form.component.scss
new file mode 100644
index 0000000..2e8b1c2
--- /dev/null
+++ b/src/app/components/expense/expense-form/expense-form.component.scss
@@ -0,0 +1,20 @@
+.expense-form-container {
+ display: grid;
+
+ mat-form-field {
+ width: 100%;
+ }
+}
+
+@media (min-width: 550px) {
+ .expense-form-container {
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ }
+}
+
+@media (min-width: 800px) {
+ .expense-form-container {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+}
diff --git a/src/app/components/expense/expense-form/expense-form.component.ts b/src/app/components/expense/expense-form/expense-form.component.ts
new file mode 100644
index 0000000..ceca49c
--- /dev/null
+++ b/src/app/components/expense/expense-form/expense-form.component.ts
@@ -0,0 +1,124 @@
+import { Component, computed, effect, input, OnInit, output, signal } from '@angular/core';
+import { min, required, disabled, form, FormField, Schema, schema } from '@angular/forms/signals';
+import { Expense } from '../../../services/expense.service';
+import { Category, CategoryService } from '../../../services/category.service';
+import { Merchant, MerchantService } from '../../../services/merchant.service';
+import { Tag, TagService } from '../../../services/tag.service';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { provideNativeDateAdapter } from '@angular/material/core';
+
+export interface ExpenseForm {
+ date: Date;
+ cents: number;
+ category: Category;
+ merchant: Merchant;
+ note: string;
+ tags: Tag[];
+}
+
+@Component({
+ selector: 'app-expense-form',
+ imports: [MatAutocompleteModule, MatDatepickerModule, MatInputModule, MatSelectModule, FormField],
+ providers: [provideNativeDateAdapter()],
+ templateUrl: './expense-form.component.html',
+ styleUrl: './expense-form.component.scss'
+})
+export class ExpenseFormComponent implements OnInit {
+ public expense = input();
+ public disabled = input(false);
+ public valid = output();
+ public dirty = output()
+ public value = output();
+
+ private lastDate = signal(undefined);
+ private formValid = computed(() => this.form().valid() && this.form().dirty());
+ private formDirty = computed(() => this.form().dirty() || this.form().touched());
+ private formData = signal(this.buildForm(this.expense()));
+ private formModel = signal(this.formData());
+
+ protected categories = computed(() => this.categoryService.categories());
+ protected merchants = computed(() => this.merchantService.merchants());
+ protected tags = computed(() => this.tagService.tags());
+ protected form = form(this.formModel, this.buildFormOptions());
+
+ constructor(private readonly categoryService: CategoryService,
+ private readonly merchantService: MerchantService,
+ private readonly tagService: TagService) {
+ effect(() => {
+ const valid = this.formValid();
+ const dirty = this.formDirty();
+ const value = this.form().value();
+
+ this.valid.emit(valid);
+ this.dirty.emit(dirty);
+ this.value.emit(value);
+ this.lastDate.set(value.date);
+ });
+ }
+
+ public ngOnInit(): void {
+ this.initialize();
+ }
+
+ public reset(clearDate = false): void {
+ if (clearDate) {
+ this.lastDate.set(undefined);
+ }
+ this.initialize();
+ }
+
+ public refresh(expense: Expense): void {
+ this.initialize();
+ this.formData.set(this.buildForm(expense));
+ this.formModel.set(this.formData());
+ this.form().reset(this.formModel());
+ }
+
+ public autocompleteDisplay(value: Merchant | Category) {
+ return value?.name ?? null;
+ }
+
+ private initialize(): void {
+ this.formData.set(this.buildForm(this.expense()));
+ this.formModel.set(this.formData());
+ this.form().reset(this.formModel());
+ }
+
+ private buildForm(expense?: Expense): ExpenseForm {
+ let formData = { date: this.lastDate() ?? '', cents: NaN, category: {}, merchant: {}, note: '', tags: [] } as unknown as ExpenseForm
+ if (expense) {
+ const date = expense.date.toString().split('-');
+ const day = Number(date[2]);
+ const month = Number(date[1]) - 1;
+ const year = Number(date[0]);
+ formData = {
+ date: new Date(year, month, day),
+ cents: expense.cents,
+ category: expense.category,
+ merchant: expense.merchant ?? {},
+ note: expense.note ?? '',
+ tags: expense.tags ?? []
+ } as ExpenseForm;
+ }
+
+ return formData;
+ }
+
+ private buildFormOptions(): Schema {
+ return schema((schema) => {
+ required(schema.date);
+ required(schema.cents);
+ required(schema.category);
+ min(schema.cents, 1);
+ disabled(schema.date, () => this.disabled());
+ disabled(schema.cents, () => this.disabled());
+ disabled(schema.category, () => this.disabled());
+ disabled(schema.merchant, () => this.disabled());
+ disabled(schema.note, () => this.disabled());
+ disabled(schema.tags, () => this.disabled());
+ });
+ }
+}
diff --git a/src/app/components/expense/expense.component.html b/src/app/components/expense/expense.component.html
new file mode 100644
index 0000000..d24ce3a
--- /dev/null
+++ b/src/app/components/expense/expense.component.html
@@ -0,0 +1,30 @@
+
diff --git a/src/app/components/expense/expense.component.scss b/src/app/components/expense/expense.component.scss
new file mode 100644
index 0000000..8a9e4cf
--- /dev/null
+++ b/src/app/components/expense/expense.component.scss
@@ -0,0 +1,22 @@
+.expense-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ mat-card {
+ max-width: 800px;
+ width: 100%;
+ }
+}
+
+mat-card-header {
+ padding-bottom: 1rem;
+
+ .expense-header {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+}
diff --git a/src/app/components/expense/expense.component.ts b/src/app/components/expense/expense.component.ts
new file mode 100644
index 0000000..51cbdda
--- /dev/null
+++ b/src/app/components/expense/expense.component.ts
@@ -0,0 +1,109 @@
+import { Component, model, signal, viewChild } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { CreateExpense, Expense, ExpenseService, UpdateExpense } from '../../services/expense.service';
+import { MatIcon } from '@angular/material/icon';
+import { ExpenseForm, ExpenseFormComponent } from './expense-form/expense-form.component';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { Temporal } from '@js-temporal/polyfill';
+import { SnackBarService } from '../../services/snack-bar';
+
+@Component({
+ selector: 'app-expense',
+ imports: [MatCardModule, MatButtonModule, MatIcon, ExpenseFormComponent, DatePipe, CurrencyPipe],
+ providers: [],
+ templateUrl: './expense.component.html',
+ styleUrl: './expense.component.scss'
+})
+export class ExpenseComponent {
+ private form = viewChild(ExpenseFormComponent);
+
+ public editingExpense = signal(false);
+ public savingExpense = signal(false);
+
+ public expense = model();
+ public formValid = model(false);
+ public formDirty = model(false);
+ public formData = model();
+
+ public constructor(private readonly expenseService: ExpenseService,
+ private readonly snackBar: SnackBarService) { }
+
+ public editClick(): void {
+ this.editingExpense.set(true);
+ }
+
+ public async addClick(): Promise {
+ const form = this.formData()!;
+ const postExpense: CreateExpense = {
+ date: this.dateToPlainDate(form.date),
+ cents: form.cents,
+ categoryId: form.category.id,
+ note: !!form.note ? form.note : undefined,
+ merchantId: !!form.merchant ? form.merchant.id : undefined,
+ tagIds: form.tags.map(tag => tag.id)
+ };
+ this.savingExpense.set(true);
+ const snackId = this.snackBar.staticBar('Tracking new expense...');
+ try {
+ await this.expenseService.postExpense(postExpense);
+ this.resetForm();
+ this.snackBar.dismiss(snackId);
+ this.snackBar.autoBar('Expense tracked!');
+ }
+ catch (error) {
+ this.snackBar.dismiss(snackId);
+ this.snackBar.dismissableBar('Error: '); // TODO
+ }
+ finally {
+ this.savingExpense.set(false);
+ }
+ }
+
+ public resetAddClick(): void {
+ this.resetForm(true);
+ }
+
+ public async updateClick(): Promise {
+ const form = this.formData()!;
+ const putExpense: UpdateExpense = {
+ id: this.expense()!.id,
+ date: this.dateToPlainDate(form.date),
+ cents: form.cents,
+ categoryId: form.category.id,
+ note: !!form.note ? form.note : undefined,
+ merchantId: !!form.merchant ? form.merchant.id : undefined,
+ tagIds: form.tags.map(tag => tag.id)
+ };
+ this.savingExpense.set(true);
+ const snackId = this.snackBar.staticBar('Updating expense...');
+ try {
+ const expense = await this.expenseService.updateExpense(putExpense);
+ this.expense.set(expense);
+ this.form()?.refresh(expense);
+ this.editingExpense.set(false);
+ this.snackBar.dismiss(snackId);
+ this.snackBar.autoBar('Expense updated!');
+ }
+ catch (error) {
+ this.snackBar.dismiss(snackId);
+ this.snackBar.dismissableBar('Error: '); // TODO
+ }
+ finally {
+ this.savingExpense.set(false);
+ }
+ }
+
+ public cancelUpdateClick(): void {
+ this.resetForm();
+ }
+
+ private resetForm(clearDate = false): void {
+ this.form()?.reset(clearDate);
+ this.editingExpense.set(false);
+ }
+
+ private dateToPlainDate(date: Date): Temporal.PlainDate {
+ return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+ }
+}
diff --git a/src/app/pages/expenses/expenses.html b/src/app/pages/expenses/expense-page.component.html
similarity index 77%
rename from src/app/pages/expenses/expenses.html
rename to src/app/pages/expenses/expense-page.component.html
index 477a0ef..2add09d 100644
--- a/src/app/pages/expenses/expenses.html
+++ b/src/app/pages/expenses/expense-page.component.html
@@ -1,3 +1,4 @@
diff --git a/src/app/pages/expenses/expense-page.component.scss b/src/app/pages/expenses/expense-page.component.scss
new file mode 100644
index 0000000..b35508b
--- /dev/null
+++ b/src/app/pages/expenses/expense-page.component.scss
@@ -0,0 +1,5 @@
+.expenses-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
diff --git a/src/app/pages/expenses/expense-page.component.ts b/src/app/pages/expenses/expense-page.component.ts
new file mode 100644
index 0000000..18f24e0
--- /dev/null
+++ b/src/app/pages/expenses/expense-page.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { ExpenseListComponent } from '../../components/expense-list/expense-list.component';
+import { ExpenseComponent } from '../../components/expense/expense.component';
+
+@Component({
+ selector: 'app-expenses',
+ imports: [
+ ExpenseListComponent,
+ ExpenseComponent
+ ],
+ templateUrl: './expense-page.component.html',
+ styleUrl: './expense-page.component.scss'
+})
+export class ExpensePage { }
diff --git a/src/app/pages/expenses/expenses.scss b/src/app/pages/expenses/expenses.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/pages/expenses/expenses.ts b/src/app/pages/expenses/expenses.ts
deleted file mode 100644
index 1fefb3e..0000000
--- a/src/app/pages/expenses/expenses.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { ExpenseList } from '../../components/expense-list/expense-list';
-
-@Component({
- selector: 'app-expenses',
- imports: [
- ExpenseList
- ],
- templateUrl: './expenses.html',
- styleUrl: './expenses.scss'
-})
-export class Expenses { }
diff --git a/src/app/pages/home/home.html b/src/app/pages/home/home-page.component.html
similarity index 58%
rename from src/app/pages/home/home.html
rename to src/app/pages/home/home-page.component.html
index e74d430..94c5c02 100644
--- a/src/app/pages/home/home.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,7 +1,7 @@
diff --git a/src/app/components/expense-list/expense-list.scss b/src/app/pages/home/home-page.component.scss
similarity index 100%
rename from src/app/components/expense-list/expense-list.scss
rename to src/app/pages/home/home-page.component.scss
diff --git a/src/app/pages/home/home.ts b/src/app/pages/home/home-page.component.ts
similarity index 59%
rename from src/app/pages/home/home.ts
rename to src/app/pages/home/home-page.component.ts
index 7c1a5e2..724172f 100644
--- a/src/app/pages/home/home.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -6,7 +6,7 @@ import { RouterLink } from '@angular/router';
imports: [
RouterLink
],
- templateUrl: './home.html',
- styleUrl: './home.scss',
+ templateUrl: './home-page.component.html',
+ styleUrl: './home-page.component.scss',
})
-export class Home { }
+export class HomePage { }
diff --git a/src/app/pages/home/home.scss b/src/app/pages/home/home.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/services/category.service.ts b/src/app/services/category.service.ts
new file mode 100644
index 0000000..9c2da93
--- /dev/null
+++ b/src/app/services/category.service.ts
@@ -0,0 +1,24 @@
+import { Injectable, signal } from '@angular/core';
+import { HttpService } from './http.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class CategoryService {
+ private internalCategories = signal([]);
+ public readonly categories = this.internalCategories.asReadonly();
+ public readonly categoryPath = 'http://localhost:3000/common-cents/categories';
+
+ public constructor(private readonly http: HttpService) {
+ void this.fetchCategories();
+ }
+
+ public async fetchCategories(): Promise {
+ this.internalCategories.set(await this.http.get(this.categoryPath));
+ }
+}
+
+export interface Category {
+ id: string;
+ name: string;
+}
diff --git a/src/app/services/expense.service.ts b/src/app/services/expense.service.ts
new file mode 100644
index 0000000..243c53b
--- /dev/null
+++ b/src/app/services/expense.service.ts
@@ -0,0 +1,57 @@
+import { Injectable, signal } from '@angular/core';
+import { Category } from './category.service';
+import { Merchant } from './merchant.service';
+import { Tag } from './tag.service';
+import { HttpService } from './http.service';
+import { Temporal } from '@js-temporal/polyfill';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ExpenseService {
+ private internalExpenses = signal([]);
+ public readonly expenses = this.internalExpenses.asReadonly();
+ public readonly expensePath = 'http://localhost:3000/common-cents/expenses'; // TODO: refactor
+
+ public constructor(private readonly http: HttpService) {
+ void this.fetchExpenses();
+ }
+
+ public async fetchExpenses(): Promise {
+ this.internalExpenses.set(await this.http.get(this.expensePath));
+ }
+
+ public async postExpense(createExpense: CreateExpense): Promise {
+ const createdExpense = await this.http.post(this.expensePath, createExpense);
+ await this.fetchExpenses();
+
+ return createdExpense;
+ }
+
+ public async updateExpense(updateExpense: UpdateExpense): Promise {
+ return await this.http.put(this.expensePath, updateExpense);
+ }
+}
+
+export interface Expense {
+ id: string;
+ date: Date;
+ cents: number;
+ category: Category;
+ note?: string;
+ merchant?: Merchant;
+ tags: Tag[];
+}
+
+export interface CreateExpense {
+ date: Temporal.PlainDate;
+ cents: number;
+ categoryId: string;
+ note?: string;
+ merchantId?: string;
+ tagIds?: string[];
+}
+
+export interface UpdateExpense extends CreateExpense {
+ id: string;
+}
diff --git a/src/app/services/expenses.ts b/src/app/services/expenses.ts
deleted file mode 100644
index 5c51b87..0000000
--- a/src/app/services/expenses.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
- providedIn: 'root',
-})
-export class Expenses {
- public static readonly BASE_URL = 'http://localhost:3000/common-cents/expenses';
-
- public async getExpenses(): Promise {
- console.log('getExpenses called');
- }
-}
diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts
new file mode 100644
index 0000000..4ec3f04
--- /dev/null
+++ b/src/app/services/http.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class HttpService {
+ public constructor(private httpClient: HttpClient) { }
+
+ public async get(url: string): Promise {
+ return this.request(url, 'get');
+ }
+
+ public async post(url: string, body?: any): Promise {
+ return this.request(url, 'post', body);
+ }
+
+ public async put(url: string, body?: any): Promise {
+ return this.request(url, 'put', body);
+ }
+
+ public async delete(url: string): Promise {
+ return this.request(url, 'delete');
+ }
+
+ private async request(url: string, method: 'get' | 'post' | 'put' | 'delete', body?: any): Promise {
+ const headers = { 'Accept': 'application/json', 'Content-Type': 'application/json' };
+ switch (method) {
+ case 'post':
+ return firstValueFrom(this.httpClient.post(url, body, { headers }));
+ case 'put':
+ return firstValueFrom(this.httpClient.put(url, body, { headers }));
+ case 'delete':
+ return firstValueFrom(this.httpClient.delete(url, { headers }));
+ default:
+ return firstValueFrom(this.httpClient.get(url, { headers }));
+ }
+ }
+}
diff --git a/src/app/services/merchant.service.ts b/src/app/services/merchant.service.ts
new file mode 100644
index 0000000..8cca35b
--- /dev/null
+++ b/src/app/services/merchant.service.ts
@@ -0,0 +1,24 @@
+import { Injectable, signal } from '@angular/core';
+import { HttpService } from './http.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class MerchantService {
+ private internalMerchants = signal([]);
+ public readonly merchants = this.internalMerchants.asReadonly();
+ public readonly merchantPath = 'http://localhost:3000/common-cents/merchants';
+
+ public constructor(private readonly http: HttpService) {
+ void this.fetchMerchants();
+ }
+
+ public async fetchMerchants(): Promise {
+ this.internalMerchants.set(await this.http.get(this.merchantPath));
+ }
+}
+
+export interface Merchant {
+ id: string;
+ name: string;
+}
diff --git a/src/app/services/snack-bar.ts b/src/app/services/snack-bar.ts
new file mode 100644
index 0000000..56f66fe
--- /dev/null
+++ b/src/app/services/snack-bar.ts
@@ -0,0 +1,44 @@
+import { Injectable, signal } from '@angular/core';
+import { MatSnackBar, MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
+
+interface SnackBar {
+ id: string;
+ ref: MatSnackBarRef;
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class SnackBarService {
+ protected TIMEOUT = 3000;
+
+ private snackBars = signal([]);
+
+ public constructor(private snackBar: MatSnackBar) { }
+
+ public autoBar(msg: string, milliseconds = this.TIMEOUT): void {
+ const timeout = milliseconds ?? this.TIMEOUT;
+ this.snackBar.open(msg, undefined, { duration: timeout });
+ }
+ public dismissableBar(msg: string, dismissMsg = 'Dismiss'): void {
+ this.snackBar.open(msg, dismissMsg);
+ }
+
+ public staticBar(msg: string): string {
+ const snackBar: SnackBar = {
+ id: crypto.randomUUID().toString(),
+ ref: this.snackBar.open(msg)
+ };
+ this.snackBars.update((bars) => [...bars, snackBar]);
+
+ return snackBar.id;
+ }
+
+ public dismiss(id: string): void {
+ const snackBar = this.snackBars().find((snackBar) => snackBar.id === id);
+ if (snackBar) {
+ snackBar.ref.dismiss();
+ this.snackBars.update((bars) => bars.filter((bar) => bar.id !== snackBar.id));
+ }
+ }
+}
diff --git a/src/app/services/tag.service.ts b/src/app/services/tag.service.ts
new file mode 100644
index 0000000..06a373b
--- /dev/null
+++ b/src/app/services/tag.service.ts
@@ -0,0 +1,24 @@
+import { Injectable, signal } from '@angular/core';
+import { HttpService } from './http.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class TagService {
+ private internalTags = signal([]);
+ public readonly tags = this.internalTags.asReadonly();
+ public readonly tagPath = 'http://localhost:3000/common-cents/tags';
+
+ public constructor(private readonly http: HttpService) {
+ void this.fetchTags();
+ }
+
+ public async fetchTags(): Promise {
+ this.internalTags.set(await this.http.get(this.tagPath));
+ }
+}
+
+export interface Tag {
+ id: string;
+ name: string;
+}
diff --git a/src/index.html b/src/index.html
index 81d82d7..1da5b0f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,10 @@
+
+
+
+
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..ac47f6e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,38 @@
+
+// Include theming for Angular Material with `mat.theme()`.
+// This Sass mixin will define CSS variables that are used for styling Angular Material
+// components according to the Material 3 design spec.
+// Learn more about theming and how to use it for your application's
+// custom components at https://material.angular.dev/guide/theming
+@use '@angular/material' as mat;
+
+html {
+ height: 100%;
+ @include mat.theme((
+ color: (
+ primary: mat.$cyan-palette,
+ tertiary: mat.$orange-palette,
+ ),
+ typography: Roboto,
+ density: 0
+ ));
+}
+
+body {
+ // Default the application to a light color theme. This can be changed to
+ // `dark` to enable the dark color theme, or to `light dark` to defer to the
+ // user's system settings.
+ color-scheme: light dark;
+
+ // Set a default background, font and text colors for the application using
+ // Angular Material's system-level CSS variables. Learn more about these
+ // variables at https://material.angular.dev/guide/system-variables
+ background-color: var(--mat-sys-surface);
+ color: var(--mat-sys-on-surface);
+ font: var(--mat-sys-body-medium);
+
+ // Reset the user agent margin.
+ margin: 0;
+ height: 100%;
+}
/* You can add global styles to this file, and also import other style files */