@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/settings/settings-page.tsx

@@ -1,35 +1,57 @@
-import { autoUpdatePeersCore, Devices, getUserContext, IDevice, packagesRootDir, reloadPackagesOnPageRefresh, rpcServerCalls, thisDeviceId, TrustLevel, Users } from "@peers-app/peers-sdk";
-import React, { useEffect, useRef, useState } from 'react';
-import { Input } from '../../components/input';
-import { Tooltip } from '../../components/tooltip';
-import { Tabs } from '../../components/tabs';
-import * as globals from '../../globals';
-import { useObservable, useObservableState, usePromise } from '../../hooks';
-import { ColorModeDropdown } from './color-mode-dropdown';
-import { VoiceSettings } from './voice-settings';
+import {
+  autoUpdatePeersCore,
+  Devices,
+  getUserContext,
+  type IDevice,
+  packagesRootDir,
+  reloadPackagesOnPageRefresh,
+  rpcServerCalls,
+  TrustLevel,
+  thisDeviceId,
+  Users,
+} from "@peers-app/peers-sdk";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { Input } from "../../components/input";
+import { Tabs } from "../../components/tabs";
+import { Tooltip } from "../../components/tooltip";
+import * as globals from "../../globals";
+import { useObservable, useObservableState, usePromise } from "../../hooks";
+import { ColorModeDropdown } from "./color-mode-dropdown";
+import { VoiceSettings } from "./voice-settings";
+
+/** Electron file picker attaches a filesystem path on `File`. */
+type FileWithElectronPath = File & { path?: string };
+
+type PeersHostWindow = Window & {
+  electronAPI?: unknown;
+  ReactNativeWebView?: unknown;
+};
 
 export const SettingsPage: React.FC = () => {
   return (
-    <div className='container-fluid'>
-      <Tabs tabs={[
-        {
-          name: 'User',
-          content: <UserSettingsTab />,
-          active: true,
-        },
-        {
-          name: 'Appearance',
-          content: <AppearanceSettingsTab />,
-        },
-        {
-          name: 'Voice',
-          content: <VoiceSettings />,
-        },
-        {
-          name: 'Advanced',
-          content: <AdvancedSettingsTab />,
-        },
-      ]} />
+    <div className="container-fluid">
+      <Tabs
+        tabs={[
+          {
+            name: "User",
+            content: <UserSettingsTab />,
+            active: true,
+          },
+          {
+            name: "Appearance",
+            content: <AppearanceSettingsTab />,
+          },
+          {
+            name: "Voice",
+            content: <VoiceSettings />,
+          },
+          {
+            name: "Advanced",
+            content: <AdvancedSettingsTab />,
+          },
+        ]}
+      />
     </div>
   );
 };
@@ -62,14 +84,15 @@ const AdvancedSettingsTab: React.FC = () => {
       <ResetDeviceSyncInfos />
       <DeleteLocalDatabase />
       <ImportOldPeersData />
+      <ResetChangeTracking />
     </>
   );
 };
 
 const ProfileSection: React.FC = () => {
   const [deviceId] = useObservable(thisDeviceId);
-  const deviceName = useObservableState<string>('');
-  const savedDeviceName = useObservableState<string>('');
+  const deviceName = useObservableState<string>("");
+  const savedDeviceName = useObservableState<string>("");
 
   const me = usePromise(async () => {
     const userContext = await getUserContext();
@@ -83,14 +106,14 @@ const ProfileSection: React.FC = () => {
       try {
         const userContext = await getUserContext();
         const device = await Devices(userContext.userDataContext).get(deviceId);
-        deviceName(device?.name || '');
-        savedDeviceName(device?.name || '');
+        deviceName(device?.name || "");
+        savedDeviceName(device?.name || "");
       } catch (err) {
-        console.error('Error loading device name:', err);
+        console.error("Error loading device name:", err);
       }
     };
     loadDevice();
-  }, [deviceId]);
+  }, [deviceId, deviceName, savedDeviceName]);
 
   const handleSave = async () => {
     try {
@@ -105,7 +128,7 @@ const ProfileSection: React.FC = () => {
       if (deviceId && deviceName() !== savedDeviceName()) {
         const userContext = await getUserContext();
         const devicesTable = Devices(userContext.userDataContext);
-        const device: IDevice = await devicesTable.get(deviceId) || {
+        const device: IDevice = (await devicesTable.get(deviceId)) || {
           deviceId,
           userId: userContext.userId,
           firstSeen: new Date(),
@@ -117,8 +140,8 @@ const ProfileSection: React.FC = () => {
         savedDeviceName(deviceName());
       }
     } catch (err) {
-      console.error('Error saving profile:', err);
-      alert('Failed to save: ' + (err as Error).message);
+      console.error("Error saving profile:", err);
+      alert(`Failed to save: ${(err as Error).message}`);
     }
   };
 
@@ -136,22 +159,14 @@ const ProfileSection: React.FC = () => {
     <>
       <div className="d-flex align-items-center mb-3">
         <h5 className="mb-0 me-auto">Settings</h5>
-        <button
-          className="btn btn-primary btn-sm"
-          onClick={handleSave}
-          disabled={!hasChanges}
-        >
+        <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={!hasChanges}>
           Save
         </button>
       </div>
 
       <div className="mb-3">
         <small className="form-label">Display Name:</small>
-        <Input
-          value={me.qs.name}
-          className="form-control"
-          placeholder="Enter your name"
-        />
+        <Input value={me.qs.name} className="form-control" placeholder="Enter your name" />
       </div>
 
       <div className="mb-3">
@@ -159,11 +174,7 @@ const ProfileSection: React.FC = () => {
           Device Name:
           <Tooltip markdownContent="Give this device a friendly name to identify it in your network." />
         </small>
-        <Input
-          value={deviceName}
-          className="form-control"
-          placeholder="e.g., My Laptop"
-        />
+        <Input value={deviceName} className="form-control" placeholder="e.g., My Laptop" />
       </div>
 
       <div className="mb-3">
@@ -171,11 +182,7 @@ const ProfileSection: React.FC = () => {
           User ID:
           <Tooltip markdownContent="This uniquely identifies you to all other users." />
         </small>
-        <Input
-          value={me.userId}
-          className="form-control"
-          disabled
-        />
+        <Input value={me.userId} className="form-control" disabled />
       </div>
 
       <div className="row">
@@ -184,22 +191,14 @@ const ProfileSection: React.FC = () => {
             Public Key:
             <Tooltip markdownContent="This is your public key that other users will use to verify your signatures." />
           </small>
-          <Input
-            value={me.publicKey}
-            className="form-control form-control-sm"
-            disabled
-          />
+          <Input value={me.publicKey} className="form-control form-control-sm" disabled />
         </div>
         <div className="col-md-6 mb-3">
           <small className="form-label">
             Public Box Key:
             <Tooltip markdownContent="This is the public key that other users can use to encrypt data so that only you can open it." />
           </small>
-          <Input
-            value={me.publicBoxKey}
-            className="form-control form-control-sm"
-            disabled
-          />
+          <Input value={me.publicBoxKey} className="form-control form-control-sm" disabled />
         </div>
       </div>
 
@@ -208,11 +207,7 @@ const ProfileSection: React.FC = () => {
           Device ID:
           <Tooltip markdownContent="This uniquely identifies this device on Peers networks." />
         </small>
-        <Input
-          value={deviceId || ''}
-          className="form-control form-control-sm"
-          disabled
-        />
+        <Input value={deviceId || ""} className="form-control form-control-sm" disabled />
       </div>
     </>
   );
@@ -220,17 +215,12 @@ const ProfileSection: React.FC = () => {
 
 const PackagesRootDirectory: React.FC = () => {
   return (
-    <div className='mt-3'>
+    <div className="mt-3">
       <small>
         Packages Directory:
-        <Tooltip
-          markdownContent={`Changing this will not effect existing packages.`}
-        />
+        <Tooltip markdownContent={`Changing this will not effect existing packages.`} />
       </small>
-      <Input
-        value={packagesRootDir}
-        className='form-control'
-      />
+      <Input value={packagesRootDir} className="form-control" />
     </div>
   );
 };
@@ -255,7 +245,7 @@ const ReloadPackagesOnPageRefresh: React.FC = () => {
       />
     </div>
   );
-}
+};
 
 const AutoUpdatePeersCore: React.FC = () => {
   useObservable(autoUpdatePeersCore);
@@ -277,19 +267,19 @@ const AutoUpdatePeersCore: React.FC = () => {
       />
     </div>
   );
-}
+};
 
 const ResetDeviceSyncInfos: React.FC = () => {
   return (
-    <div className='mt-3'>
+    <div className="mt-3">
       <button
-        className='btn btn-secondary btn-sm ms-2'
+        className="btn btn-secondary btn-sm ms-2"
         onClick={async () => {
           try {
             await rpcServerCalls.resetAllDeviceSyncInfo();
-            alert('All device sync info has been reset.  Syncing in progress...');
+            alert("All device sync info has been reset.  Syncing in progress...");
           } catch (err) {
-            console.error('Error while resetting all device sync info', err);
+            console.error("Error while resetting all device sync info", err);
           }
         }}
       >
@@ -297,25 +287,25 @@ const ResetDeviceSyncInfos: React.FC = () => {
       </button>
     </div>
   );
-}
+};
 
 const DeleteLocalDatabase: React.FC = () => {
   return (
-    <div className='mt-3'>
+    <div className="mt-3">
       <button
-        className='btn btn-danger btn-sm ms-2'
+        className="btn btn-danger btn-sm ms-2"
         onClick={async () => {
           const confirmed = confirm(
-            'Are you sure you want to delete the local database for the current group? ' +
-            'This will remove all local data. You will need to restart the app and re-sync from other devices.'
+            "Are you sure you want to delete the local database for the current group? " +
+              "This will remove all local data. You will need to restart the app and re-sync from other devices.",
           );
           if (!confirmed) return;
           try {
             await rpcServerCalls.deleteLocalDatabase();
-            alert('Local database has been deleted. Please restart the app.');
+            alert("Local database has been deleted. Please restart the app.");
           } catch (err) {
-            console.error('Error while deleting local database', err);
-            alert('Failed to delete local database: ' + (err as Error).message);
+            console.error("Error while deleting local database", err);
+            alert(`Failed to delete local database: ${(err as Error).message}`);
           }
         }}
       >
@@ -323,9 +313,46 @@ const DeleteLocalDatabase: React.FC = () => {
       </button>
     </div>
   );
-}
+};
 
-const IMPORT_TOOL_ID = '00mh0wlipkdbeaw8imptsk001';
+const ResetChangeTracking: React.FC = () => {
+  const [busy, setBusy] = useState(false);
+  return (
+    <div className="mt-4 pt-3 border-top">
+      <h6 className="mb-2">Change tracking</h6>
+      <small className="text-muted d-block mb-2">
+        Clears all change history for the current group and rebuilds it from your current database
+        rows. Device sync cursors are cleared; a full resync with peers may follow. Use when
+        debugging sync issues.
+      </small>
+      <button
+        className="btn btn-warning btn-sm"
+        disabled={busy}
+        onClick={async () => {
+          const confirmed = window.confirm(
+            "Reset Change Tracking will clear all change history and rebuild it from scratch. This may take a while. Continue?",
+          );
+          if (!confirmed) return;
+          setBusy(true);
+          try {
+            await rpcServerCalls.resetChangeTracking();
+            await rpcServerCalls.flushDatabases();
+            alert("Change tracking reset successfully.");
+          } catch (err) {
+            console.error("Error while resetting change tracking", err);
+            alert(`Failed to reset change tracking: ${(err as Error).message || String(err)}`);
+          } finally {
+            setBusy(false);
+          }
+        }}
+      >
+        {busy ? "Resetting…" : "Reset Change Tracking"}
+      </button>
+    </div>
+  );
+};
+
+const IMPORT_TOOL_ID = "00mh0wlipkdbeaw8imptsk001";
 
 interface IDryRunResult {
   totalRecords: number;
@@ -334,7 +361,7 @@ interface IDryRunResult {
   groups: {
     groupId: string;
     groupName: string;
-    context: 'personal' | 'home';
+    context: "personal" | "home";
     taskCount: number;
     activeCount: number;
     doneCount: number;
@@ -362,33 +389,33 @@ interface IDryRunResult {
 
 const ImportOldPeersData: React.FC = () => {
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [filePath, setFilePath] = useState<string>('');
-  const [fileName, setFileName] = useState<string>('');
+  const [filePath, setFilePath] = useState<string>("");
+  const [_fileName, setFileName] = useState<string>("");
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState<IDryRunResult | null>(null);
-  const [error, setError] = useState<string>('');
+  const [error, setError] = useState<string>("");
 
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
     // Electron exposes .path on File objects
-    const path = (file as any).path as string | undefined;
+    const path = (file as FileWithElectronPath).path;
     if (path) {
       setFilePath(path);
       setFileName(file.name);
     } else {
       setFileName(file.name);
-      setFilePath('');
-      setError('File path not available. This feature requires the Electron desktop app.');
+      setFilePath("");
+      setError("File path not available. This feature requires the Electron desktop app.");
     }
     setResult(null);
-    setError('');
+    setError("");
   };
 
   const handleDryRun = async () => {
     if (!filePath) return;
     setLoading(true);
-    setError('');
+    setError("");
     setResult(null);
     try {
       const response = await rpcServerCalls.runTool(IMPORT_TOOL_ID, {
@@ -398,10 +425,10 @@ const ImportOldPeersData: React.FC = () => {
       if (response?.result) {
         setResult(response.result);
       } else {
-        setError('Unexpected response from import tool');
+        setError("Unexpected response from import tool");
       }
     } catch (err) {
-      setError((err as Error).message || 'Failed to run dry run');
+      setError((err as Error).message || "Failed to run dry run");
     } finally {
       setLoading(false);
     }
@@ -428,13 +455,11 @@ const ImportOldPeersData: React.FC = () => {
           onClick={handleDryRun}
           disabled={!filePath || loading}
         >
-          {loading ? 'Analyzing...' : 'Dry Run'}
+          {loading ? "Analyzing..." : "Dry Run"}
         </button>
       </div>
 
-      {error && (
-        <div className="alert alert-danger py-1 px-2 small mt-2">{error}</div>
-      )}
+      {error && <div className="alert alert-danger py-1 px-2 small mt-2">{error}</div>}
 
       {result && <DryRunResults result={result} />}
     </div>
@@ -448,56 +473,100 @@ const DryRunResults: React.FC<{ result: IDryRunResult }> = ({ result }) => {
   return (
     <div className="mt-2">
       <div className="alert alert-info py-2 px-3 small">
-        <strong>Summary:</strong> {result.totalTasks.toLocaleString()} tasks
-        and {result.totalLogEntries.toLocaleString()} log entries
-        across {result.groups.length} groups
-        ({result.totalRecords.toLocaleString()} total records in file)
+        <strong>Summary:</strong> {result.totalTasks.toLocaleString()} tasks and{" "}
+        {result.totalLogEntries.toLocaleString()} log entries across {result.groups.length} groups (
+        {result.totalRecords.toLocaleString()} total records in file)
       </div>
 
       {result.warnings.length > 0 && (
         <div className="alert alert-warning py-2 px-3 small">
           <strong>Warnings:</strong>
           <ul className="mb-0 ps-3">
-            {result.warnings.map((w, i) => <li key={i}>{w}</li>)}
+            {result.warnings.map((w, i) => (
+              <li key={i}>{w}</li>
+            ))}
           </ul>
         </div>
       )}
 
       <details className="mb-2">
-        <summary className="small fw-bold" style={{ cursor: 'pointer' }}>
+        <summary className="small fw-bold" style={{ cursor: "pointer" }}>
           Status Mapping
         </summary>
         <table className="table table-sm small mt-1">
-          <thead><tr><th>Mapping</th><th className="text-end">Count</th></tr></thead>
+          <thead>
+            <tr>
+              <th>Mapping</th>
+              <th className="text-end">Count</th>
+            </tr>
+          </thead>
           <tbody>
-            <tr><td>In-Progress → Done</td><td className="text-end">{sm.inProgressToDone.toLocaleString()}</td></tr>
-            <tr><td>In-Progress → In-Progress</td><td className="text-end">{sm.inProgressKeep.toLocaleString()}</td></tr>
-            <tr><td>Queued → Done</td><td className="text-end">{sm.queuedToDone.toLocaleString()}</td></tr>
-            <tr><td>Queued → Queued</td><td className="text-end">{sm.queuedKeep.toLocaleString()}</td></tr>
-            <tr><td>Backlog → Done</td><td className="text-end">{sm.backlogToDone.toLocaleString()}</td></tr>
-            <tr><td>Backlog → Backlog</td><td className="text-end">{sm.backlogKeep.toLocaleString()}</td></tr>
-            <tr><td>No status → Done</td><td className="text-end">{sm.noStatusToDone.toLocaleString()}</td></tr>
-            <tr><td>No status → Backlog</td><td className="text-end">{sm.noStatusToBacklog.toLocaleString()}</td></tr>
+            <tr>
+              <td>In-Progress → Done</td>
+              <td className="text-end">{sm.inProgressToDone.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>In-Progress → In-Progress</td>
+              <td className="text-end">{sm.inProgressKeep.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>Queued → Done</td>
+              <td className="text-end">{sm.queuedToDone.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>Queued → Queued</td>
+              <td className="text-end">{sm.queuedKeep.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>Backlog → Done</td>
+              <td className="text-end">{sm.backlogToDone.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>Backlog → Backlog</td>
+              <td className="text-end">{sm.backlogKeep.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>No status → Done</td>
+              <td className="text-end">{sm.noStatusToDone.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>No status → Backlog</td>
+              <td className="text-end">{sm.noStatusToBacklog.toLocaleString()}</td>
+            </tr>
           </tbody>
         </table>
       </details>
 
       <details className="mb-2">
-        <summary className="small fw-bold" style={{ cursor: 'pointer' }}>
+        <summary className="small fw-bold" style={{ cursor: "pointer" }}>
           User Mapping
         </summary>
         <table className="table table-sm small mt-1">
-          <thead><tr><th>User</th><th className="text-end">Tasks</th></tr></thead>
+          <thead>
+            <tr>
+              <th>User</th>
+              <th className="text-end">Tasks</th>
+            </tr>
+          </thead>
           <tbody>
-            <tr><td>Mark</td><td className="text-end">{um.mark.toLocaleString()}</td></tr>
-            <tr><td>Blair</td><td className="text-end">{um.blair.toLocaleString()}</td></tr>
-            <tr><td>Other → Mark</td><td className="text-end">{um.other.toLocaleString()}</td></tr>
+            <tr>
+              <td>Mark</td>
+              <td className="text-end">{um.mark.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>Blair</td>
+              <td className="text-end">{um.blair.toLocaleString()}</td>
+            </tr>
+            <tr>
+              <td>Other → Mark</td>
+              <td className="text-end">{um.other.toLocaleString()}</td>
+            </tr>
           </tbody>
         </table>
       </details>
 
       <details open className="mb-2">
-        <summary className="small fw-bold" style={{ cursor: 'pointer' }}>
+        <summary className="small fw-bold" style={{ cursor: "pointer" }}>
           Groups ({result.groups.length})
         </summary>
         <table className="table table-sm small mt-1">
@@ -512,10 +581,14 @@ const DryRunResults: React.FC<{ result: IDryRunResult }> = ({ result }) => {
             </tr>
           </thead>
           <tbody>
-            {result.groups.map(g => (
+            {result.groups.map((g) => (
               <tr key={g.groupId}>
                 <td>{g.groupName}</td>
-                <td><span className={`badge bg-${g.context === 'home' ? 'success' : 'secondary'}`}>{g.context}</span></td>
+                <td>
+                  <span className={`badge bg-${g.context === "home" ? "success" : "secondary"}`}>
+                    {g.context}
+                  </span>
+                </td>
                 <td className="text-end">{g.taskCount.toLocaleString()}</td>
                 <td className="text-end">{g.activeCount.toLocaleString()}</td>
                 <td className="text-end">{g.doneCount.toLocaleString()}</td>
@@ -529,9 +602,10 @@ const DryRunResults: React.FC<{ result: IDryRunResult }> = ({ result }) => {
   );
 };
 
-const showLogoutInSettings = typeof window !== 'undefined'
-  && !(window as any).electronAPI
-  && !(window as any).ReactNativeWebView;
+const showLogoutInSettings =
+  typeof window !== "undefined" &&
+  !(window as PeersHostWindow).electronAPI &&
+  !(window as PeersHostWindow).ReactNativeWebView;
 
 const LogoutSection: React.FC = () => {
   if (!showLogoutInSettings) return null;
@@ -541,8 +615,8 @@ const LogoutSection: React.FC = () => {
         className="btn btn-outline-danger btn-sm"
         onClick={async () => {
           const confirmed = confirm(
-            'Are you sure you want to logout? This will clear your credentials from this browser. ' +
-            'Make sure you have your User ID and Secret Key saved securely, or you will lose access to your account.'
+            "Are you sure you want to logout? This will clear your credentials from this browser. " +
+              "Make sure you have your User ID and Secret Key saved securely, or you will lose access to your account.",
           );
           if (!confirmed) return;
           await rpcServerCalls.logout();
@@ -552,4 +626,4 @@ const LogoutSection: React.FC = () => {
       </button>
     </div>
   );
-}
+};

package/src/screens/settings/voice-settings-agent.tsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Assistants, IAssistant, userVar, deviceVar } from '@peers-app/peers-sdk';
+import { Assistants, type IAssistant, userVar } from "@peers-app/peers-sdk";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
 
-const VOICE_HUB_AGENT_ASSISTANT_ID = '00mh0wlipkdbeaw8vhagent01';
+const VOICE_HUB_AGENT_ASSISTANT_ID = "00mh0wlipkdbeaw8vhagent01";
 
 // Must match the pvar names in peers-core/src/data/voice-agent-config.ts and
 // peers-electron/src/server/voice/voice-agent-config.ts — pvar instances are
 // singletons keyed by name+scope so all three share the same underlying value.
-const voiceAgentAssistantIdPvar = userVar<string | undefined>(
-  'voice:agentAssistantId',
-  { defaultValue: VOICE_HUB_AGENT_ASSISTANT_ID },
-);
+const voiceAgentAssistantIdPvar = userVar<string | undefined>("voice:agentAssistantId", {
+  defaultValue: VOICE_HUB_AGENT_ASSISTANT_ID,
+});
 
 export const VoiceSettingsAgent: React.FC = () => {
   const [assistants, setAssistants] = useState<IAssistant[]>([]);
@@ -49,12 +49,13 @@ export const VoiceSettingsAgent: React.FC = () => {
         <select
           className="form-select form-select-sm"
           value={selectedId}
-          onChange={e => setSelectedId(e.target.value)}
+          onChange={(e) => setSelectedId(e.target.value)}
           disabled={saving}
         >
-          {assistants.map(a => (
+          {assistants.map((a) => (
             <option key={a.assistantId} value={a.assistantId}>
-              {a.name}{a.assistantId === VOICE_HUB_AGENT_ASSISTANT_ID ? ' (default)' : ''}
+              {a.name}
+              {a.assistantId === VOICE_HUB_AGENT_ASSISTANT_ID ? " (default)" : ""}
             </option>
           ))}
         </select>
@@ -62,9 +63,9 @@ export const VoiceSettingsAgent: React.FC = () => {
           className="btn btn-sm btn-primary"
           onClick={handleSave}
           disabled={saving}
-          style={{ whiteSpace: 'nowrap' }}
+          style={{ whiteSpace: "nowrap" }}
         >
-          {saving ? 'Saving…' : saved ? 'Saved!' : 'Save'}
+          {saving ? "Saving…" : saved ? "Saved!" : "Save"}
         </button>
       </div>
     </div>