feat: add start and end dates

apps/frontend/src/app/components/manga/manga-list.component.ts

@@ -71,6 +71,26 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
             </select>
           </div>
 
+          <div class="form-group">
+            <label for="dateStarted">Date Started</label>
+            <input
+              type="date"
+              id="dateStarted"
+              [(ngModel)]="newManga.dateStarted"
+              name="dateStarted"
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="dateFinished">Date Finished</label>
+            <input
+              type="date"
+              id="dateFinished"
+              [(ngModel)]="newManga.dateFinished"
+              name="dateFinished"
+            >
+          </div>
+
           <div class="form-group">
             <label for="rating">Rating (1-10)</label>
             <input
@@ -201,6 +221,26 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
             </select>
           </div>
 
+          <div class="form-group">
+            <label for="edit-dateStarted">Date Started</label>
+            <input
+              type="date"
+              id="edit-dateStarted"
+              [(ngModel)]="editManga.dateStarted"
+              name="dateStarted"
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="edit-dateFinished">Date Finished</label>
+            <input
+              type="date"
+              id="edit-dateFinished"
+              [(ngModel)]="editManga.dateFinished"
+              name="dateFinished"
+            >
+          </div>
+
           <div class="form-group">
             <label for="edit-rating">Rating (1-10)</label>
             <input
@@ -501,6 +541,18 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
                   </div>
                 }
 
+                @if (manga.dateStarted) {
+                  <p class="date-started">
+                    Started: {{ formatDate(manga.dateStarted) }}
+                  </p>
+                }
+
+                @if (manga.dateFinished) {
+                  <p class="date-finished">
+                    Finished: {{ formatDate(manga.dateFinished) }}
+                  </p>
+                }
+
                 @if (authService.isAdmin()) {
                   <div class="actions">
                     <button (click)="startEdit(manga)" class="btn btn-secondary btn-sm">
@@ -857,6 +909,13 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
       margin: 0.5rem 0;
     }
 
+    .date-started,
+    .date-finished {
+      font-size: 0.85rem;
+      color: #4b5563;
+      margin-top: 0.5rem;
+    }
+
     .actions {
       margin-top: 1rem;
     }
@@ -1260,10 +1319,12 @@ export class MangaListComponent implements OnInit {
 
   totalFilteredManga = computed(() => this.filteredManga().length);
 
-  newManga: Partial<CreateMangaDto> = {
+  newManga: Partial<CreateMangaDto> & { dateStarted?: Date; dateFinished?: Date } = {
     title: '',
     author: '',
     status: MangaStatus.wantToRead,
+    dateStarted: undefined,
+    dateFinished: undefined,
     rating: undefined,
     notes: '',
     tags: [],
@@ -1355,6 +1416,8 @@ export class MangaListComponent implements OnInit {
       title: '',
       author: '',
       status: MangaStatus.wantToRead,
+      dateStarted: undefined,
+      dateFinished: undefined,
       rating: undefined,
       notes: '',
       coverImage: undefined,
@@ -1420,6 +1483,8 @@ export class MangaListComponent implements OnInit {
       title: this.newManga.title,
       author: this.newManga.author,
       status: this.newManga.status,
+      dateStarted: this.newManga.dateStarted ? new Date(this.newManga.dateStarted) : undefined,
+      dateFinished: this.newManga.dateFinished ? new Date(this.newManga.dateFinished) : undefined,
       rating: this.newManga.rating,
       notes: this.newManga.notes,
       coverImage: this.newManga.coverImage,
@@ -1447,6 +1512,8 @@ export class MangaListComponent implements OnInit {
       title: manga.title,
       author: manga.author,
       status: manga.status,
+      dateStarted: manga.dateStarted,
+      dateFinished: manga.dateFinished,
       rating: manga.rating,
       notes: manga.notes,
       coverImage: manga.coverImage,
@@ -1475,7 +1542,13 @@ export class MangaListComponent implements OnInit {
     const manga = this.editingManga();
     if (!manga || !this.editManga.title || !this.editManga.author || !this.editManga.status) return;
 
-    this.mangaService.updateManga(manga.id, this.editManga).subscribe(() => {
+    const updateData = {
+      ...this.editManga,
+      dateStarted: this.editManga.dateStarted ? new Date(this.editManga.dateStarted) : undefined,
+      dateFinished: this.editManga.dateFinished ? new Date(this.editManga.dateFinished) : undefined,
+    };
+
+    this.mangaService.updateManga(manga.id, updateData).subscribe(() => {
       this.loadManga();
       this.cancelEdit();
     });
@@ -1670,7 +1743,7 @@ export class MangaListComponent implements OnInit {
 
     try {
       await this.suggestionService.createSuggestion({
-        entityType: SuggestionEntity.MANGA,
+        entityType: SuggestionEntity.manga,
         title: this.suggestedManga.title,
         author: this.suggestedManga.author,
         notes: this.suggestedManga.notes,