meyi-vault-client-dev 1.0.1

package/src/components/vault/entries-table.tsx

@@ -0,0 +1,283 @@
+import { useState, useMemo } from 'react'
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  useReactTable,
+  type SortingState,
+} from '@tanstack/react-table'
+import { 
+  Copy, 
+  Shield, 
+  Pencil, 
+  Trash2, 
+  Search, 
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  MoreHorizontal,
+  Globe
+} from 'lucide-react'
+import { toast } from 'sonner'
+import type { VaultEntry } from '@/services/api'
+import { PasswordCell } from './password-cell'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+
+interface EntriesTableProps {
+  entries: VaultEntry[]
+  isOwner?: boolean
+  onEdit: (entry: VaultEntry) => void
+  onDelete: (entry: VaultEntry) => void
+  onGrant: (entry: VaultEntry) => void
+}
+
+function ActionMenu({ 
+  entry, 
+  onEdit, 
+  onDelete, 
+  onGrant 
+}: { 
+  entry: VaultEntry; 
+  onEdit: (e: VaultEntry) => void; 
+  onDelete: (e: VaultEntry) => void; 
+  onGrant: (e: VaultEntry) => void; 
+}) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className='relative flex justify-end'>
+      <Button 
+        variant="ghost" 
+        size="icon" 
+        onClick={(e) => { e.stopPropagation(); setOpen(!open) }}
+        className='h-8 w-8'
+      >
+        <MoreHorizontal className='h-4 w-4' />
+      </Button>
+      
+      {open && (
+        <>
+          <div className='fixed inset-0 z-10' onClick={(e) => { e.stopPropagation(); setOpen(false) }} />
+          <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(); setOpen(false); onGrant(entry) }} 
+              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>Manage</span>
+            </button>
+            <button 
+              onClick={(e) => { e.stopPropagation(); setOpen(false); onEdit(entry) }} 
+              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>
+            <div className='h-px bg-border my-1' />
+            <button 
+              onClick={(e) => { e.stopPropagation(); setOpen(false); onDelete(entry) }} 
+              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>
+  )
+}
+
+export function EntriesTable({ entries, isOwner, onEdit, onDelete, onGrant }: EntriesTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [globalFilter, setGlobalFilter] = useState('')
+  const [domainFilter, setDomainFilter] = useState('')
+
+  const filteredEntries = useMemo(() => {
+    if (!domainFilter) return entries
+    return entries.filter(e => (e.domain || '').toLowerCase().includes(domainFilter.toLowerCase()))
+  }, [entries, domainFilter])
+
+  const columns = useMemo<ColumnDef<VaultEntry>[]>(
+    () => {
+      const cols: ColumnDef<VaultEntry>[] = [
+        {
+          accessorKey: 'domain',
+          header: () => <div className="font-semibold text-foreground px-4">Domain</div>,
+          cell: ({ row }) => (
+            <div className='flex items-center gap-2 text-xs text-muted-foreground px-4'>
+              <span className='truncate max-w-[180px]'>{row.original.domain || '—'}</span>
+            </div>
+          ),
+        },
+        {
+          accessorKey: 'username',
+          header: () => <div className="font-semibold text-foreground">Username</div>,
+          cell: ({ row }) => (
+            <div className='flex items-center gap-1.5 font-mono text-xs text-muted-foreground'>
+              <span className='truncate max-w-[150px]'>{row.original.username || '—'}</span>
+              {row.original.username && (
+                <button 
+                  onClick={(e) => { 
+                    e.stopPropagation();
+                    navigator.clipboard.writeText(row.original.username); 
+                    toast.success('Username copied') 
+                  }} 
+                  className='p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors'
+                  title='Copy username'
+                >
+                  <Copy className='h-3.5 w-3.5' />
+                </button>
+              )}
+            </div>
+          ),
+        },
+        {
+          accessorKey: 'password',
+          header: () => <div className="font-semibold text-foreground">Password</div>,
+          cell: ({ row }) => <PasswordCell password={row.original.password || ''} />,
+        },
+        {
+          accessorKey: 'alias',
+          header: ({ column }) => {
+            return (
+              <Button
+                variant="ghost"
+                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                className="-ml-4 h-8 font-semibold text-foreground"
+              >
+                Alias
+                {column.getIsSorted() === "asc" ? (
+                  <ArrowUp className="ml-2 h-4 w-4" />
+                ) : column.getIsSorted() === "desc" ? (
+                  <ArrowDown className="ml-2 h-4 w-4" />
+                ) : (
+                  <ArrowUpDown className="ml-2 h-4 w-4" />
+                )}
+              </Button>
+            )
+          },
+          cell: ({ row }) => (
+            <div className='flex items-center gap-2 font-medium '>
+              <span className='truncate max-w-[150px]'>{row.original.alias || '—'}</span>
+            </div>
+          ),
+        },
+      ]
+
+      if (isOwner) {
+        cols.push({
+          id: 'actions',
+          header: () => <div className="text-right font-semibold text-foreground pr-4">Actions</div>,
+          cell: ({ row }) => (
+            <ActionMenu 
+              entry={row.original} 
+              onEdit={onEdit} 
+              onDelete={onDelete} 
+              onGrant={onGrant} 
+            />
+          ),
+        })
+      }
+
+      return cols
+    },
+    [onEdit, onDelete, onGrant, isOwner]
+  )
+
+  const table = useReactTable({
+    data: filteredEntries,
+    columns,
+    state: {
+      sorting,
+      globalFilter,
+    },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  })
+
+  return (
+    <div className='space-y-4'>
+      <div className='flex items-center gap-4'>
+        <div className='relative flex-1 max-w-sm'>
+          <Search className='absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground' />
+          <Input
+            placeholder='Search entries...'
+            value={globalFilter ?? ''}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+            className='pl-9'
+          />
+        </div>
+        <div className='relative flex-1 max-w-[200px]'>
+          <Globe className='absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground' />
+          <Input
+            placeholder='Filter domain...'
+            value={domainFilter}
+            onChange={(e) => setDomainFilter(e.target.value)}
+            className='pl-9'
+          />
+        </div>
+      </div>
+
+      <div className='rounded-xl border bg-card'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center text-muted-foreground"
+                >
+                  No entries found.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

package/src/components/vault/password-cell.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { Copy, Check } from 'lucide-react'
+import { toast } from 'sonner'
+
+export function PasswordCell({ password }: { password: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const copy = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    navigator.clipboard.writeText(password)
+    setCopied(true); setTimeout(() => setCopied(false), 2000)
+    toast.success('Password copied')
+  }
+
+  return (
+    <span className='flex items-center gap-1'>
+      {password ? 
+      <>
+        <span className='font-mono text-sm'>••••••••</span>
+        <button onClick={copy} className='ml-1 text-muted-foreground hover:text-foreground'>
+          {copied ? <Check className='h-3.5 w-3.5 text-green-500' /> : <Copy className='h-3.5 w-3.5' />}
+        </button>
+      </> : '—'}
+    </span>
+  )
+}

package/src/context/VaultProvider.tsx

@@ -0,0 +1,49 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import type { AxiosInstance } from 'axios'
+import { setApiInstance } from '@/services/api'
+
+interface VaultContextValue {
+  /** Fetch all users for the grant picker — provided by host */
+  getUsers: () => Promise<Array<{ id: string; full_name: string; email: string; role: string }>>
+  /** Mount path prefix used by the host's router */
+  basePath: string
+}
+
+const VaultContext = createContext<VaultContextValue | null>(null)
+
+export interface VaultProviderProps {
+  /** Host's configured axios instance (shares auth headers + interceptors) */
+  api: AxiosInstance
+  /** Function to fetch all users — delegates to host's existing user service */
+  getUsers: VaultContextValue['getUsers']
+  /** Base path the host mounts vault routes at. Default: '/vault' */
+  basePath?: string
+  children: ReactNode
+}
+
+/**
+ * VaultProvider must wrap the vault UI.
+ * The host passes its own axios instance so vault-client shares
+ * auth, base URL, and token refresh — no duplicate auth code.
+ */
+export function VaultProvider({
+  api,
+  getUsers,
+  basePath = '/vault',
+  children,
+}: VaultProviderProps) {
+  // Register the host's axios instance with our API module
+  setApiInstance(api)
+
+  return (
+    <VaultContext.Provider value={{ getUsers, basePath }}>
+      {children}
+    </VaultContext.Provider>
+  )
+}
+
+export function useVaultContext() {
+  const ctx = useContext(VaultContext)
+  if (!ctx) throw new Error('useVaultContext must be used inside <VaultProvider>')
+  return ctx
+}

package/src/hooks/useVault.ts

@@ -0,0 +1,177 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { vaultApi, type ExpiresIn } from '@/services/api'
+
+// ── Query keys ────────────────────────────────────────────────────────────────
+export const vaultKeys = {
+  vaults:  () => ['vault', 'vaults'] as const,
+  entries: (vaultId: string) => ['vault', 'entries', vaultId] as const,
+  grants:  () => ['vault', 'grants'] as const,
+  stats:   () => ['vault', 'stats'] as const,
+  me:      () => ['vault', 'me'] as const,
+  audit:   (params: any) => ['vault', 'audit', params] as const,
+}
+
+// ── Auth / Me ─────────────────────────────────────────────────────────────────
+
+export function useMe() {
+  return useQuery({
+    queryKey: vaultKeys.me(),
+    queryFn: vaultApi.getMe,
+  })
+}
+
+// ── Vaults ────────────────────────────────────────────────────────────────────
+
+export function useVaults() {
+  return useQuery({
+    queryKey: vaultKeys.vaults(),
+    queryFn: vaultApi.listVaults,
+  })
+}
+
+export function useCreateVault() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (name: string) => vaultApi.createVault(name),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: vaultKeys.vaults() })
+      toast.success('Vault created')
+    },
+    onError: () => toast.error('Failed to create vault'),
+  })
+}
+
+export function useDeleteVault() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) => vaultApi.deleteVault(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: vaultKeys.vaults() })
+      toast.success('Vault deleted')
+    },
+    onError: () => toast.error('Failed to delete vault'),
+  })
+}
+
+export function useUpdateVault() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, name }: { id: string; name: string }) => vaultApi.updateVault(id, name),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: vaultKeys.vaults() })
+      toast.success('Vault updated')
+    },
+    onError: () => toast.error('Failed to update vault'),
+  })
+}
+
+// ── Entries ───────────────────────────────────────────────────────────────────
+
+export function useEntries(vaultId: string) {
+  return useQuery({
+    queryKey: vaultKeys.entries(vaultId),
+    queryFn: () => vaultApi.listEntries(vaultId),
+    enabled: !!vaultId,
+  })
+}
+
+export function useCreateEntry(vaultId: string) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (data: { alias?: string; username?: string; password?: string; domain?: string; notes?: string }) =>
+      vaultApi.createEntry(vaultId, data),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: vaultKeys.entries(vaultId) })
+      toast.success('Credential saved')
+    },
+    onError: (err: any) => {
+      const msg = err.response?.data?.error || 'Failed to save credential'
+      toast.error(msg)
+    },
+  })
+}
+
+export function useUpdateEntry(vaultId: string) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ entryId, data }: { entryId: string; data: any }) =>
+      vaultApi.updateEntry(vaultId, entryId, data),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: vaultKeys.entries(vaultId) })
+      toast.success('Credential updated')
+    },
+    onError: (err: any) => {
+      const msg = err.response?.data?.error || 'Failed to update credential'
+      toast.error(msg)
+    },
+  })
+}
+
+export function useDeleteEntry(vaultId: string) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (entryId: string) => vaultApi.deleteEntry(vaultId, entryId),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: vaultKeys.entries(vaultId) })
+      toast.success('Credential deleted')
+    },
+    onError: () => toast.error('Failed to delete credential'),
+  })
+}
+
+// ── Grants ────────────────────────────────────────────────────────────────────
+
+export function useGrants() {
+  return useQuery({
+    queryKey: vaultKeys.grants(),
+    queryFn: vaultApi.listGrants,
+  })
+}
+
+export function useCreateGrant() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (data: {
+      scope: 'vault' | 'entry'
+      scope_id: string
+      grantee_id: string
+      expires_in: ExpiresIn
+    }) => vaultApi.createGrant(data),
+    onSuccess: (_, _vars) => {
+      qc.invalidateQueries({ queryKey: vaultKeys.grants() })
+      toast.success('Access granted')
+    },
+    onError: () => toast.error('Failed to grant access'),
+  })
+}
+
+export function useRevokeGrant() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) => vaultApi.revokeGrant(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: vaultKeys.grants() })
+      toast.success('Access revoked')
+    },
+    onError: () => toast.error('Failed to revoke access'),
+  })
+}
+
+// ── Stats ─────────────────────────────────────────────────────────────────────
+
+export function useVaultStats() {
+  return useQuery({
+    queryKey: vaultKeys.stats(),
+    queryFn: vaultApi.stats,
+  })
+}
+
+// ── Audit ─────────────────────────────────────────────────────────────────────
+
+export function useAuditLogs(params: { page?: number; limit?: number; search?: string; module?: string, action?: string }) {
+  return useQuery({
+    queryKey: vaultKeys.audit(params),
+    queryFn: () => vaultApi.listAuditLogs(params),
+  })
+}

package/src/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * vault-client — main package entry point
+ * ─────────────────────────────────────────
+ * All public exports. Import what you need:
+ *
+ * Core integration (MeyiConnect pattern):
+ *   import { VaultProvider, VaultApp, vaultNavItems } from 'vault-client'
+ *   import 'vault-client/style.css'
+ *
+ * Individual pages (if you manage routing yourself):
+ *   import { VaultPage, EntriesPage } from 'vault-client'
+ *
+ * Hooks only (bring your own UI):
+ *   import { useVaults, useEntries, useCreateGrant } from 'vault-client'
+ *
+ * Types:
+ *   import type { Vault, VaultEntry, Grant } from 'vault-client'
+ */
+
+// ── Styles (emitted as dist/style.css) ────────────────────────────────────────
+import './style.css'
+
+// ── Provider — must wrap all vault UI ─────────────────────────────────────────
+export { VaultProvider } from './context/VaultProvider'
+export type { VaultProviderProps } from './context/VaultProvider'
+
+// ── Complete self-contained app ───────────────────────────────────────────────
+export { VaultApp } from './VaultApp'
+
+// ── Individual pages (host manages routing) ───────────────────────────────────
+export { VaultPage } from './pages/VaultPage'
+export { EntriesPage } from './pages/EntriesPage'
+
+// ── Dialogs (compose your own UI) ─────────────────────────────────────────────
+export {
+  VaultCreateDialog,
+  EntryFormDialog,
+  GrantAccessDialog,
+  ConfirmDialog,
+} from './components/dialogs'
+
+// ── React Query hooks (full control) ─────────────────────────────────────────
+export {
+  useVaults,
+  useCreateVault,
+  useUpdateVault,
+  useDeleteVault,
+  useEntries,
+  useCreateEntry,
+  useUpdateEntry,
+  useDeleteEntry,
+  useGrants,
+  useCreateGrant,
+  useRevokeGrant,
+  useVaultStats,
+  vaultKeys,
+} from './hooks/useVault'
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+export type {
+  Vault,
+  VaultEntry,
+  Grant,
+  ExpiresIn,
+} from './services/api'
+
+// ── Sidebar nav items for MeyiConnect sidebar-data.ts ────────────────────────
+// Usage: import { vaultNavItems } from 'vault-client'
+//        then spread into navGroups in sidebar-data.ts
+export const vaultNavItems = [
+  {
+    title: 'Vaults',
+    url: '/vault',
+    icon: 'FolderLock',
+    roles: ['admin', 'user'],
+    plugin: 'vault',
+  },
+  {
+    title: 'Audit',
+    url: '/vault/audit',
+    icon: 'ScrollText',
+    roles: ['admin'],
+    plugin: 'vault',
+  },
+] as const
+
+// ── Plugin metadata (used by MeyiConnect plugin registry) ────────────────────
+export const vaultPluginMeta = {
+  name: 'vault',
+  displayName: 'Password Vault',
+  description: 'Self-hosted AES-256-GCM encrypted team password manager',
+  version: '1.0.0',
+  icon: 'FolderLock',
+  author: 'Meyi Technologies',
+  requires: {
+    server: 'vault-server',
+    minServerVersion: '1.0.0',
+  },
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}