Organization - Email templates

src/@seed/api/postoffice/index.ts

@@ -0,0 +1,2 @@
+export * from './postoffice.service'
+export * from './postoffice.types'

src/@seed/api/postoffice/postoffice.service.ts

@@ -0,0 +1,33 @@
+import { HttpClient } from '@angular/common/http'
+import { inject, Injectable } from '@angular/core'
+import { BehaviorSubject, map } from 'rxjs'
+import { OrganizationService } from '@seed/api/organization'
+import type { EmailTemplate, ListTemplatesResponse } from './postoffice.types'
+
+@Injectable({ providedIn: 'root' })
+export class PostofficeService {
+  private _httpClient = inject(HttpClient)
+  private _organizationService = inject(OrganizationService)
+  private _templates = new BehaviorSubject<EmailTemplate[]>([])
+
+  templates$ = this._templates.asObservable()
+
+  get(): void {
+    // fetch current organization
+    this._organizationService.currentOrganization$.subscribe(({ org_id }) => {
+      const url = `/api/v3/cycles/?organization_id=${org_id}`
+      // fetch templates
+      this._httpClient
+        .get<ListTemplatesResponse>(url)
+        .pipe(map((response) => response.templates))
+        .subscribe({
+          next: (templates) => {
+            this._templates.next(templates)
+          },
+          error: (error) => {
+            console.error('Error fetching templates:', error)
+          },
+        })
+    })
+  }
+}

src/@seed/api/postoffice/postoffice.types.ts

@@ -0,0 +1,13 @@
+export type EmailTemplate = {
+  id: number;
+  name: string;
+  description: string;
+  subject: string;
+  content: string;
+  html_content: string;
+}
+
+export type ListTemplatesResponse = {
+  status: string;
+  cycles: EmailTemplate[];
+}

src/app/modules/organizations/organizations-cycles/organizations-cycles.component.html

@@ -3,7 +3,10 @@
     class="bg-card flex flex-0 flex-col border-b p-6 sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-8 dark:bg-transparent"
   >
     <div class="min-w-0 flex-1">
-      <h2 class="truncate text-3xl font-extrabold capitalize leading-7 tracking-tight sm:leading-10 md:text-4xl">Cycles</h2>
+      <h2 class="truncate text-2xl font-extrabold capitalize leading-7 tracking-tight sm:leading-10 md:text-2xl">
+        <mat-icon class="icon-size-4" svgIcon="fa-solid:calendar-days"></mat-icon>
+        Cycles
+      </h2>
     </div>
     <!-- Actions -->
     <div class="mt-6 flex shrink-0 items-center sm:ml-4 sm:mt-0">

src/app/modules/organizations/organizations-email-templates/organizations-email-templates.component.html

@@ -1 +1,58 @@
-<div class="prose">Email Templates Content</div>
+<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
+  <div
+    class="bg-card flex flex-0 flex-col border-b p-6 sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-8 dark:bg-transparent"
+  >
+    <div class="min-w-0 flex-1">
+      <h2 class="truncate text-2xl font-extrabold capitalize leading-7 tracking-tight sm:leading-10 md:text-2xl">
+        <mat-icon class="icon-size-4" svgIcon="fa-solid:envelope"></mat-icon>
+        {{ t('Email Templates') }}
+      </h2>
+    </div>
+  </div>
+  <!-- Cycles Table -->
+  <div class="flex-auto pt-4 sm:pt-6">
+    <div class="mx-auto w-full max-w-screen-xl">
+      <div class="grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
+        <div class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl p-6 shadow sm:col-span-2 md:col-span-4">
+          <div class="mx-6 overflow-x-auto">
+            <table class="mat-elevation-z8 w-full bg-transparent" mat-table matSort [dataSource]="emailsDataSource" [trackBy]="trackByFn">
+              <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef>ID</th>
+                <td mat-cell *matCellDef="let cycle">{{ cycle.id }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef>Name</th>
+                <td mat-cell *matCellDef="let cycle">{{ cycle.name }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="start">
+                <th mat-header-cell *matHeaderCellDef>From Date</th>
+                <td mat-cell *matCellDef="let cycle">{{ cycle.start }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="end">
+                <th mat-header-cell *matHeaderCellDef>To Date</th>
+                <td mat-cell *matCellDef="let cycle">{{ cycle.end }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef class="select-none">Actions</th>
+                <td mat-cell *matCellDef="let transaction">
+                  <span class="whitespace-nowrap pr-6 font-medium">Actions here</span>
+                </td>
+              </ng-container>
+
+              <thead>
+                <tr mat-header-row *matHeaderRowDef="cyclesColumns"></tr>
+              </thead>
+              <tbody>
+                <tr mat-row *matRowDef="let row; columns: cyclesColumns"></tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/organizations/organizations-email-templates/organizations-email-templates.component.ts

@@ -1,9 +1,14 @@
 import type { OnInit } from '@angular/core'
 import { Component } from '@angular/core'
-
+import { MatButtonModule } from '@angular/material/button'
+import { MatDialogModule, MatDialog } from '@angular/material/dialog'
+import { MatIconModule } from '@angular/material/icon'
+import { MatTableDataSource, MatTableModule } from '@angular/material/table'
+import { SharedImports } from '@seed/directives'
 @Component({
   selector: 'seed-organizations-email-templates',
   templateUrl: './organizations-email-templates.component.html',
+  imports: [MatButtonModule, MatDialogModule, MatIconModule, MatTableModule, CommonModule, SharedImports],
 })
 export class OrganizationsEmailTemplatesComponent implements OnInit {
   ngOnInit(): void {