chore: update db columns and add seed data

apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.html

@@ -1,51 +1,61 @@
 <div class="page-content">
-  <div style="display: flex; align-items: center;">
-    <h2 style="flex: 1;">Translations</h2>
+  <div style="display: flex; align-items: center">
+    <h2 style="flex: 1">Translations</h2>
     <button mat-raised-button color="primary" routerLink="/translations/new">Add New Translation</button>
   </div>
   @if(service.translations){
   <table mat-table [dataSource]="service.translations">
-
-    <!-- 'en' Column -->
-    <ng-container matColumnDef="en" clickable >
-      <th mat-header-cell *matHeaderCellDef> en </th>
-      <td mat-cell *matCellDef="let element"> {{ element.en }} </td>
+    <!-- 'tool' Column -->
+    <ng-container matColumnDef="tool" clickable>
+      <th mat-header-cell *matHeaderCellDef>Tool</th>
+      <td mat-cell *matCellDef="let element">{{ element.tool }}</td>
     </ng-container>
 
-     <!-- 'mw_ny' Column -->
-     <ng-container matColumnDef="mw_ny">
-      <th mat-header-cell *matHeaderCellDef> mw_ny </th>
-      <td mat-cell *matCellDef="let element"> {{ element.mw_ny }} </td>
+    <!-- 'context' Column -->
+    <ng-container matColumnDef="context" clickable>
+      <th mat-header-cell *matHeaderCellDef>Context</th>
+      <td mat-cell *matCellDef="let element">{{ element.context }}</td>
     </ng-container>
 
-     <!-- 'sw' Column -->
-     <ng-container matColumnDef="sw">
-      <th mat-header-cell *matHeaderCellDef> sw </th>
-      <td mat-cell *matCellDef="let element"> {{ element.sw }} </td>
+    <!-- 'en' Column -->
+    <ng-container matColumnDef="en" clickable>
+      <th mat-header-cell *matHeaderCellDef>en</th>
+      <td mat-cell *matCellDef="let element">{{ element.en }}</td>
     </ng-container>
 
-    <!-- 'tg' Column -->
-    <ng-container matColumnDef="tg">
-      <th mat-header-cell *matHeaderCellDef> tg </th>
-      <td mat-cell *matCellDef="let element"> {{ element.tg }} </td>
+    <!-- 'mw_ny' Column -->
+    <ng-container matColumnDef="mw_ny">
+      <th mat-header-cell *matHeaderCellDef>mw_ny</th>
+      <td mat-cell *matCellDef="let element">{{ element.mw_ny }}</td>
     </ng-container>
 
     <!-- 'zm_ny' Column -->
     <ng-container matColumnDef="zm_ny">
-      <th mat-header-cell *matHeaderCellDef> zm_ny </th>
-      <td mat-cell *matCellDef="let element"> {{ element.zm_ny }} </td>
+      <th mat-header-cell *matHeaderCellDef>zm_ny</th>
+      <td mat-cell *matCellDef="let element">{{ element.zm_ny }}</td>
+    </ng-container>
+
+    <!-- 'ke_sw' Column -->
+    <ng-container matColumnDef="sw">
+      <th mat-header-cell *matHeaderCellDef>ke_sw</th>
+      <td mat-cell *matCellDef="let element">{{ element.ke_sw }}</td>
+    </ng-container>
+
+    <!-- 'tg' Column -->
+    <ng-container matColumnDef="tg">
+      <th mat-header-cell *matHeaderCellDef>tj_tg</th>
+      <td mat-cell *matCellDef="let element">{{ element.tj_tg }}</td>
     </ng-container>
 
     <!-- 'created_at' Column -->
     <ng-container matColumnDef="created_at">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
-      <td mat-cell *matCellDef="let element">  {{ element.created_at | date: 'mediumDate' }} </td>
+      <th mat-header-cell *matHeaderCellDef>Date</th>
+      <td mat-cell *matCellDef="let element">{{ element.created_at | date: 'mediumDate' }}</td>
     </ng-container>
 
     <!-- Table Rows -->
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"(click)="goToRecord(row)" ></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="goToRecord(row)"></tr>
   </table>
-}
-
+  }
 </div>

apps/picsa-apps/dashboard/src/app/modules/translations/pages/home/translations.page.ts

@@ -17,19 +17,18 @@ export type ITranslationRow = Database['public']['Tables']['translations']['Row'
   styleUrls: ['./translations.page.scss'],
 })
 export class TranslationsPageComponent implements OnInit {
-  displayedColumns: string[] = [ 'en', 'mw_ny', 'sw', 'tg', 'zm_ny','created_at'];
- 
+  displayedColumns: string[] = ['tool', 'context', 'en', 'mw_ny', 'zm_ny', 'sw', 'tg', 'created_at'];
+
   constructor(public service: TranslationDashboardService, private router: Router) {}
   ngOnInit(): void {
     this.service.ready();
     this.refreshTranslations();
   }
 
-  goToRecord(row:ITranslationRow){
+  goToRecord(row: ITranslationRow) {
     this.router.navigate([`/translations`, row.id]);
   }
 
-
   refreshTranslations() {
     this.service.listTranslations().catch((error) => {
       console.error('Error fetching translations:', error);