feat: KYC-First Onboarding

# Conflicts:
#	infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
#	infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
#	infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte

Author: Bekiboo

infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte

@@ -85,7 +85,13 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
                     class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium"
                 >
                     {#if userData}
-                        {userData.isFake ? "DEMO ID" : "VERIFIED ID"}
+                        {#if userData.assuranceLevel === "KYC_VERIFIED"}
+                            VERIFIED ID
+                        {:else if userData.isFake}
+                            DEMO ID
+                        {:else}
+                            UNVERIFIED
+                        {/if}
                     {/if}
                 </p>
                 {#if viewBtn}
@@ -97,7 +103,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
                     />
                 {/if}
             {:else if variant === "eVault"}
-                <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
+                <h3 class="text-black-300 text-3xl font-semibold mb-1 z-1">
                     {state.progressWidth} Used
                 </h3>
             {/if}
@@ -111,7 +117,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
             {:else if variant === "ePassport"}
                 <div class="flex gap-2 flex-col">
                     {#if userData}
-                        {#each Object.entries(userData).filter(([f, v]) => f !== "isFake") as [fieldName, value]}
+                        {#each Object.entries(userData).filter(([f, v]) => f !== "isFake" && f !== "assuranceLevel") as [fieldName, value]}
                             <div class="flex justify-between">
                                 <p class="text-gray capitalize">{fieldName}</p>
                                 <p class=" font-medium text-white">{value}</p>
@@ -122,8 +128,8 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
             {:else if variant === "eVault"}
                 <div>
                     <div class="flex justify-between mb-1">
-                        <p class="z-[1]">{usedStorage}GB Used</p>
-                        <p class="z-[1]">{totalStorage}GB total storage</p>
+                        <p class="z-1">{usedStorage}GB Used</p>
+                        <p class="z-1">{totalStorage}GB total storage</p>
                     </div>
                     <div
                         class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400"

infrastructure/eid-wallet/src/lib/global/controllers/evault.ts

@@ -57,6 +57,7 @@ export class VaultController {
     #walletSdkAdapter: import("wallet-sdk").CryptoAdapter | null = null;
     #profileCreationStatus: "idle" | "loading" | "success" | "failed" = "idle";
     #notificationService: NotificationService;
+    #demoMode = false;
 
     constructor(
         store: Store,
@@ -71,6 +72,21 @@ export class VaultController {
         this.#notificationService = NotificationService.getInstance();
     }
 
+    /**
+     * Enable/disable demo mode
+     * When enabled, skips network operations (sync, notifications, profile creation)
+     */
+    set demoMode(value: boolean) {
+        this.#demoMode = value;
+        if (value) {
+            console.log("🎭 VaultController: Demo mode enabled - skipping network operations");
+        }
+    }
+
+    get demoMode() {
+        return this.#demoMode;
+    }
+
     /**
      * Get the current profile creation status
      */
@@ -397,6 +413,13 @@ export class VaultController {
         else if (vault?.ename) {
             this.#store.set("vault", vault);
 
+            // Skip network operations in demo mode
+            if (this.#demoMode) {
+                console.log("🎭 Demo mode: Skipping network operations for vault", vault.ename);
+                this.profileCreationStatus = "success";
+                return;
+            }
+
             // Register device for notifications
             this.registerDeviceForNotifications(vault.ename);
 
@@ -468,6 +491,97 @@ export class VaultController {
         return this.#endpoint;
     }
 
+    /**
+     * Create a binding document in the eVault
+     * TODO: Implement when backend endpoint is ready
+     * 
+     * @param type - Type of binding document (PHYSICAL_ID, PASSPHRASE, PHOTOGRAPH, FRIEND)
+     * @param data - Binding document data
+     * @param signature - Signature or JWT proving authenticity
+     */
+    async createBindingDocument(
+        type: string,
+        data: Record<string, unknown>,
+        signature: string
+    ): Promise<void> {
+        console.log("TODO: Create binding document", {
+            type,
+            data,
+            signature: signature.substring(0, 50) + "...",
+        });
+
+        // Emit audit event
+        this.emitAuditEvent("BINDING_DOCUMENT_CREATED", {
+            type,
+            timestamp: new Date().toISOString(),
+        });
+
+        // TODO: Call GraphQL mutation when backend is ready
+        // const CREATE_BINDING_DOC = `
+        //   mutation CreateBindingDocument($input: BindingDocumentInput!) {
+        //     createBindingDocument(input: $input) {
+        //       id
+        //       type
+        //       status
+        //     }
+        //   }
+        // `;
+    }
+
+    /**
+     * Request ePassport certificate from Remote CA
+     * TODO: Implement when CA endpoint is ready
+     * 
+     * @param ename - User's eName
+     * @param publicKey - User's public key
+     */
+    async requestEPassport(ename: string, publicKey: string): Promise<string> {
+        console.log("TODO: Request ePassport from CA", {
+            ename,
+            publicKey: publicKey.substring(0, 50) + "...",
+        });
+
+        // Emit audit event
+        this.emitAuditEvent("EPASSPORT_REQUESTED", {
+            ename,
+            timestamp: new Date().toISOString(),
+        });
+
+        // TODO: Call CA endpoint when ready
+        // const response = await axios.post(
+        //     new URL("/ca/issue-epassport", PUBLIC_REGISTRY_URL).toString(),
+        //     { ename, publicKey }
+        // );
+        // return response.data.certificate;
+
+        return "TODO_EPASSPORT_CERTIFICATE";
+    }
+
+    /**
+     * Emit an audit event
+     * These events are logged for compliance and debugging
+     * 
+     * @param eventType - Type of audit event
+     * @param data - Event data
+     */
+    emitAuditEvent(eventType: string, data: Record<string, unknown>): void {
+        const auditEvent = {
+            type: eventType,
+            timestamp: new Date().toISOString(),
+            ...data,
+        };
+
+        console.log("AUDIT:", auditEvent);
+
+        // TODO: Send to backend audit log when endpoint is ready
+        // Store locally for now
+        const existingEvents = JSON.parse(
+            localStorage.getItem("auditEvents") || "[]"
+        );
+        existingEvents.push(auditEvent);
+        localStorage.setItem("auditEvents", JSON.stringify(existingEvents));
+    }
+
     async clear() {
         await this.#store.delete("vault");
     }

infrastructure/eid-wallet/src/lib/global/controllers/user.ts

@@ -1,5 +1,15 @@
 import type { Store } from "@tauri-apps/plugin-store";
 
+/**
+ * User assurance levels - determines what identity bindings exist
+ */
+export enum AssuranceLevel {
+    /** Baseline identity only - no KYC completed */
+    UNVERIFIED = "UNVERIFIED",
+    /** KYC completed - Physical ID binding exists */
+    KYC_VERIFIED = "KYC_VERIFIED",
+}
+
 /**
  * @author SoSweetHam <soham@auvo.io>
  * @version 0.0.1-alpha/Stub
@@ -10,6 +20,7 @@ import type { Store } from "@tauri-apps/plugin-store";
  *
  * Uses the following namespaces in the store:
  * - `user` - The user state
+ * - `assuranceLevel` - The user's current assurance level (UNVERIFIED | KYC_VERIFIED)
  *
  * @memberof GlobalState
  * You should not use this class directly, it is intended for use through the GlobalState.
@@ -144,9 +155,40 @@ export class UserController {
             });
     }
 
+    /**
+     * Sets the user's assurance level (UNVERIFIED | KYC_VERIFIED)
+     */
+    set assuranceLevel(level: Promise<AssuranceLevel | undefined> | AssuranceLevel | undefined) {
+        if (level instanceof Promise) {
+            level.then((resolved) => {
+                this.#store.set("assuranceLevel", resolved);
+            }).catch((error) => {
+                console.error("Failed to set assurance level:", error);
+            });
+        } else {
+            this.#store.set("assuranceLevel", level);
+        }
+    }
+
+    /**
+     * Gets the user's assurance level, defaults to UNVERIFIED
+     */
+    get assuranceLevel() {
+        return this.#store
+            .get<AssuranceLevel>("assuranceLevel")
+            .then((level) => {
+                return level ?? AssuranceLevel.UNVERIFIED;
+            })
+            .catch((error) => {
+                console.error("Failed to get assurance level:", error);
+                return AssuranceLevel.UNVERIFIED;
+            });
+    }
+
     async clear() {
         await this.#store.delete("user");
         await this.#store.delete("fake");
         await this.#store.delete("doc");
+        await this.#store.delete("assuranceLevel");
     }
 }

infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+import { goto } from "$app/navigation";
 import { AppNav, IdentityCard } from "$lib/fragments";
 import type { GlobalState } from "$lib/global";
+import { AssuranceLevel } from "$lib/global/controllers/user";
+import { ButtonAction } from "$lib/ui";
 import { getContext, onMount } from "svelte";
 
 const globalState = getContext<() => GlobalState>("globalState")();
@@ -9,14 +12,31 @@ function shareEPassport() {
     alert("EPassport Code shared!");
 }
 
-let userData: Record<string, string | boolean | undefined>;
-let docData: Record<string, unknown> = {};
+let userData: Record<string, string | boolean | undefined> = $state({});
+let docData: Record<string, unknown> = $state({});
+let assuranceLevel = $state<AssuranceLevel>(AssuranceLevel.UNVERIFIED);
+
+/**
+ * Navigate to KYC verification
+ * This allows UNVERIFIED users to upgrade their identity from ePassport page
+ */
+async function handleVerifyIdentity() {
+    console.log("Navigating to KYC verification from ePassport page");
+    globalState.vaultController.emitAuditEvent("KYC_UPGRADE_INITIATED", {
+        source: "epassport_page",
+        timestamp: new Date().toISOString(),
+    });
+    await goto("/verify");
+}
 
 onMount(async () => {
     const userInfo = await globalState.userController.user;
     const isFake = await globalState.userController.isFake;
     docData = (await globalState.userController.document) ?? {};
     userData = { ...userInfo, isFake };
+    assuranceLevel =
+        (await globalState.userController.assuranceLevel) ??
+        AssuranceLevel.UNVERIFIED;
     console.log("loggg", userData);
 });
 </script>
@@ -27,7 +47,46 @@ onMount(async () => {
     {#if userData}
         <IdentityCard variant="ePassport" {userData} class="shadow-lg" />
     {/if}
-    {#if docData}
+
+    <!-- Verify Identity CTA for UNVERIFIED users -->
+    {#if assuranceLevel === AssuranceLevel.UNVERIFIED}
+        <div
+            class="mt-4 p-4 bg-linear-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 border border-blue-200 dark:border-blue-800 rounded-xl"
+        >
+            <div class="flex items-center gap-3 mb-3">
+                <div
+                    class="w-10 h-10 rounded-full bg-linear-to-br from-blue-500 to-purple-600 flex items-center justify-center"
+                >
+                    <svg
+                        class="w-5 h-5 text-white"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                        />
+                    </svg>
+                </div>
+                <div>
+                    <p class="font-semibold text-gray-900 dark:text-white">
+                        Verify Your Identity
+                    </p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">
+                        Complete KYC to unlock all features
+                    </p>
+                </div>
+            </div>
+            <ButtonAction callback={handleVerifyIdentity} class="w-full">
+                Start Verification
+            </ButtonAction>
+        </div>
+    {/if}
+
+    {#if docData && Object.keys(docData).length > 0}
         <div
             class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2"
         >