meyi-vault-client-dev 1.0.1

package/src/pages/VaultPage.tsx

@@ -0,0 +1,184 @@
+import { useState } from 'react'
+import { FolderLock, MoreHorizontal, Plus, Shield, Trash2, Pencil, ScrollText, ChevronRight } from 'lucide-react'
+import { useVaults, useDeleteVault, useMe } from '@/hooks/useVault'
+import { VaultCreateDialog, GrantAccessDialog, ConfirmDialog } from '@/components/dialogs'
+import type { Vault } from '@/services/api'
+
+interface VaultPageProps {
+  onNavigate: (to: 'entries' | 'audit', vaultId?: string) => void
+}
+
+export function VaultPage({ onNavigate }: VaultPageProps) {
+  const { data: me } = useMe()
+  const { data: vaults = [], isLoading } = useVaults()
+  const deleteVault = useDeleteVault()
+  const [createOpen, setCreateOpen] = useState(false)
+  const [editTarget, setEditTarget] = useState<Vault | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<Vault | null>(null)
+  const [grantTarget, setGrantTarget] = useState<Vault | null>(null)
+  const [menuOpen, setMenuOpen] = useState<string | null>(null)
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    await deleteVault.mutateAsync(deleteTarget.id)
+    setDeleteTarget(null)
+  }
+
+  const isAdmin = me?.role === 'admin'
+
+  return (
+    <div className='flex flex-col h-full bg-background'>
+      {/* Header */}
+      <header className='flex items-center justify-between px-6 py-4 border-b border-border'>
+        <div className='flex items-center gap-3'>
+          <div className='rounded-xl bg-primary/10 p-2.5'>
+            <Shield className='h-6 w-6 text-primary' />
+          </div>
+          <div>
+            <h1 className='text-2xl font-bold tracking-tight text-foreground'>Vaults</h1>
+            <p className='text-sm text-muted-foreground'>Securely manage and share your encrypted credentials.</p>
+          </div>
+        </div>
+        <div className='flex items-center gap-2'>
+          {isAdmin && (
+            <button
+              onClick={() => onNavigate('audit')}
+              className='inline-flex items-center gap-2 rounded-lg border border-input bg-background px-4 py-2 text-sm font-semibold text-foreground shadow-sm hover:bg-muted transition-all'
+            >
+              <ScrollText className='h-4 w-4' />
+              <span>Audit Log</span>
+            </button>
+          )}
+          <button
+            onClick={() => { setEditTarget(null); setCreateOpen(true) }}
+            className='inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 transition-all hover:scale-[1.02] active:scale-[0.98]'
+          >
+            <Plus className='h-4 w-4' /> 
+            <span>New Vault</span>
+          </button>
+        </div>
+      </header>
+
+      {/* Content */}
+      <main className='flex-1 overflow-y-auto p-6'>
+        {isLoading ? (
+          <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'>
+            {[1, 2, 3].map((i) => (
+              <div key={i} className='h-40 rounded-xl border bg-muted/20 animate-pulse' />
+            ))}
+          </div>
+        ) : vaults.length === 0 ? (
+          <div className='flex flex-col items-center justify-center p-6 py-12 text-center max-w-sm mx-auto mt-8'>
+            <div className='mb-4 rounded-full bg-muted p-4 border border-primary/10'>
+              <FolderLock className='h-8 w-8 text-muted-foreground' />
+            </div>
+            <h2 className='text-lg font-bold tracking-tight mb-1'>No vaults found</h2>
+            <p className='text-muted-foreground mb-6 text-sm leading-relaxed'>
+              Create your first vault to start storing encrypted credentials for your projects and teams.
+            </p>
+          </div>
+        ) : (
+          <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+            {vaults.map((vault) => (
+              <div
+                key={vault.id}
+                className='group relative rounded-xl border bg-card p-4 cursor-pointer hover:shadow-md hover:border-primary/50 transition-all'
+                onClick={() => onNavigate('entries', vault.id)}
+              >
+                <div className='flex items-start justify-between mb-4'>
+                  <div className='rounded-lg bg-primary/10 p-2.5 transition-colors group-hover:bg-primary/20'>
+                    <FolderLock className='h-5 w-5 text-primary' />
+                  </div>
+                  {vault.is_owner && (
+                    <div className='relative'> 
+                      <button
+                        onClick={(e) => { e.stopPropagation(); setMenuOpen(menuOpen === vault.id ? null : vault.id) }}
+                        className='h-8 w-8 flex items-center justify-center rounded-md hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity'
+                      >
+                        <MoreHorizontal className='h-4 w-4' />
+                      </button>
+                      {menuOpen === vault.id && (
+                        <>
+                          <div className='fixed inset-0 z-10' onClick={(e) => { e.stopPropagation(); setMenuOpen(null) }} />
+                          <div className='absolute right-0 top-9 z-20 w-40 rounded-lg border bg-popover shadow-lg py-1.5 overflow-hidden animate-in fade-in zoom-in-95 duration-100'>
+                            <button
+                              onClick={(e) => { 
+                                e.stopPropagation(); 
+                                setMenuOpen(null); 
+                                setEditTarget(vault);
+                                setCreateOpen(true);
+                              }}
+                              className='w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted text-left transition-colors'
+                            >
+                              <Pencil className='h-4 w-4 text-muted-foreground' /> 
+                              <span>Edit</span>
+                            </button>
+                            <button
+                              onClick={(e) => { e.stopPropagation(); setMenuOpen(null); setGrantTarget(vault) }}
+                              className='w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted text-left transition-colors'
+                            >
+                              <Shield className='h-4 w-4 text-muted-foreground' /> 
+                              <span>Access</span>
+                            </button>
+                            <div className='h-px bg-border my-1' />
+                            <button
+                              onClick={(e) => { e.stopPropagation(); setMenuOpen(null); setDeleteTarget(vault) }}
+                              className='w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted text-left text-destructive transition-colors'
+                            >
+                              <Trash2 className='h-4 w-4' /> 
+                              <span>Delete</span>
+                            </button>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                <div className='space-y-1'>
+                  <p className='font-bold text-lg text-foreground truncate'>{vault.name}</p>
+                  <p className='text-xs text-muted-foreground font-medium'>
+                    {vault.is_owner ? 'Owner' : 'Shared with you'}
+                  </p>
+                </div>
+
+                <div className='flex items-center justify-between mt-6 pt-4 border-t'>
+                  <span className='text-[10px] tracking-wider  text-muted-foreground'>
+                    Created {new Date(vault.created_at).toLocaleDateString()}
+                  </span>
+                  <div className='rounded-full p-1 group-hover:bg-primary/10 transition-colors'>
+                    <ChevronRight className='h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors' />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </main>
+
+      <VaultCreateDialog 
+        open={createOpen} 
+        onOpenChange={setCreateOpen} 
+        editVault={editTarget || undefined}
+      />
+
+      <GrantAccessDialog
+        open={!!grantTarget}
+        onOpenChange={(o) => { if (!o) setGrantTarget(null) }}
+        scope='vault'
+        scopeId={grantTarget?.id || ''}
+        scopeLabel={grantTarget?.name || ''}
+      />
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={(o) => { if (!o) setDeleteTarget(null) }}
+        title='Delete Vault'
+        description={`Are you sure you want to delete "${deleteTarget?.name}"? This will permanently delete all credentials within this vault.`}
+        onConfirm={handleDelete}
+        loading={deleteVault.isPending}
+      />
+    </div>
+  )
+}
+

package/src/pages/meyi-connect-password.code-workspace

@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "../../../../meyi-connect-password"
+		},
+		{
+			"path": "../../.."
+		}
+	],
+	"settings": {}
+}

package/src/services/api.ts

@@ -0,0 +1,139 @@
+/**
+ * API client for vault-client.
+ *
+ * The host (MeyiConnect) injects its configured axios instance via
+ * VaultProvider so we share the same base URL, auth interceptors,
+ * and token refresh logic — no duplicate auth code.
+ */
+
+import type { AxiosInstance } from 'axios'
+
+let _api: AxiosInstance | null = null
+
+export function setApiInstance(instance: AxiosInstance) {
+  _api = instance
+}
+
+function getApi(): AxiosInstance {
+  if (!_api) throw new Error('[vault-client] No API instance. Wrap your app in <VaultProvider api={...} />')
+  return _api
+}
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface Vault {
+  id: string
+  name: string
+  owner_id: string
+  created_at: string
+  is_owner: boolean
+}
+
+export interface VaultEntry {
+  id: string
+  vault_id: string
+  domain: string
+  alias: string
+  username: string
+  password?: string | null
+  notes: string
+  created_at: string
+  updated_at: string
+}
+
+export interface Grant {
+  id: string
+  scope: 'vault' | 'entry'
+  scope_id: string
+  grantee_id: string
+  granted_by_id: string
+  expires_at: string | null
+  revoked_at: string | null
+  created_at: string
+}
+
+export interface AuditLog {
+  id: string
+  actor_id: string
+  actor_name: string
+  actor_email: string
+  action: string
+  module: string
+  item_id: string
+  item_label: string
+  meta: any
+  created_at: string
+}
+
+export interface AuditResponse {
+  logs: AuditLog[]
+  total: number
+  page: number
+  limit: number
+  total_pages: number
+}
+
+export type ExpiresIn = '1h' | '8h' | '24h' | '7d' | '30d' | null
+
+// ── API functions ─────────────────────────────────────────────────────────────
+
+export const vaultApi = {
+  // Vaults
+  listVaults: () =>
+    getApi().get<{ vaults: Vault[] }>('/vault/vaults').then((r) => r.data.vaults),
+
+  createVault: (name: string) =>
+    getApi().post<{ vault: Vault }>('/vault/vaults', { name }).then((r) => r.data.vault),
+
+  updateVault: (id: string, name: string) =>
+    getApi().put<{ vault: Vault }>(`/vault/vaults/${id}`, { name }).then((r) => r.data.vault),
+
+  deleteVault: (id: string) =>
+    getApi().delete(`/vault/vaults/${id}`),
+
+  // Entries
+  listEntries: (vaultId: string) =>
+    getApi()
+      .get<{ entries: VaultEntry[] }>(`/vault/vaults/${vaultId}/entries`)
+      .then((r) => r.data.entries),
+
+  createEntry: (vaultId: string, data: { alias?: string; username?: string; password?: string; domain?: string; notes?: string }) =>
+    getApi()
+      .post<{ entry: VaultEntry }>(`/vault/vaults/${vaultId}/entries`, data)
+      .then((r) => r.data.entry),
+
+  updateEntry: (vaultId: string, entryId: string, data: Partial<VaultEntry>) =>
+    getApi()
+      .put<{ entry: VaultEntry }>(`/vault/vaults/${vaultId}/entries/${entryId}`, data)
+      .then((r) => r.data.entry),
+
+  deleteEntry: (vaultId: string, entryId: string) =>
+    getApi().delete(`/vault/vaults/${vaultId}/entries/${entryId}`),
+
+  // Grants
+  createGrant: (data: { scope: 'vault' | 'entry'; scope_id: string; grantee_id: string; expires_in: ExpiresIn }) =>
+    getApi().post<{ grant: Grant }>('/vault/grants', data).then((r) => r.data.grant),
+
+  listGrants: () =>
+    getApi().get<{ grants: Grant[] }>('/vault/grants').then((r) => r.data.grants),
+
+  revokeGrant: (id: string) =>
+    getApi().delete(`/vault/grants/${id}`),
+
+  // Stats & User
+  stats: () =>
+    getApi()
+      .get<{ vault_count: number; active_grants: number; entry_count: number }>('/vault/stats')
+      .then((r) => r.data),
+
+  getMe: () =>
+    getApi()
+      .get<{ user: { id: string; full_name: string; email: string; role: string } }>('/vault/stats/me')
+      .then((r) => r.data.user),
+
+  // Audit Logs
+  listAuditLogs: (params: { page?: number; limit?: number; search?: string; module?: string }) =>
+    getApi()
+      .get<AuditResponse>('/vault/audit', { params })
+      .then((r) => r.data),
+}

package/src/style.css

@@ -0,0 +1,5 @@
+/* vault-client styles
+   Styles are provided by the host (MeyiConnect) via Tailwind CSS.
+   This file is intentionally minimal — it exists so vault-client/style.css
+   resolves correctly when imported by the host application.
+*/