improve profile reactiveness and action page performance

src/app/module/user/data/datasource/user-local-repository.service.ts

@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { z } from 'zod';
+import { Dexie, EntityTable, liveQuery } from 'Dexie';
+
+const UserProfilePicture = z.object({
+  base64: z.string(),
+  id: z.number().optional(),
+})
+
+const UserTable = z.object({
+  ChunksBase64: z.number(),
+});
+
+export type UserProfilePicture = z.infer<typeof UserProfilePicture>
+
+// Database declaration (move this to its own module also)
+const session = new Dexie('session') as Dexie & {
+  profilePicture: EntityTable<UserProfilePicture, 'id'>;
+};
+
+session.version(1).stores({
+  profilePicture: '++id, base64'
+});
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserLocalRepositoryService {
+
+  constructor() { }
+
+
+  async addProfilePicture(data: UserProfilePicture) {
+    try {
+      await session.transaction('rw', session.profilePicture, async () => {
+      // Clear existing records from myTable
+      await session.profilePicture.clear();
+      await session.profilePicture.add(data);
+      });
+      console.log('Clear and add operations completed within transaction.');
+    } catch (error) {
+      console.error('Error performing transaction:', error, data);
+    }
+  }
+
+
+  getLiveProfilePicture() {
+    return  liveQuery(() =>
+      session.profilePicture.orderBy('id').reverse().first()
+    )
+  }
+}