meyi-vault-client-dev 1.0.1

package/README.md

@@ -0,0 +1,157 @@
+# vault-client
+
+> Self-hosted AES-256-GCM encrypted password manager — React UI plugin for MeyiConnect
+
+## Installation
+
+```bash
+npm install vault-client
+```
+
+## MeyiConnect integration (3 steps)
+
+### Step 1 — Add the route file
+
+Copy to `frontend/src/routes/_authenticated/vault/$.tsx`:
+
+```tsx
+import { createFileRoute } from "@tanstack/react-router";
+import { VaultApp, VaultProvider } from "vault-client";
+import "vault-client/style.css";
+import api from "@/services/api";
+import { users } from "@/services/users";
+
+function VaultRoute() {
+  return (
+    <VaultProvider
+      api={api}
+      getUsers={() => users.getAll().then((r) => r.data ?? r)}
+    >
+      <VaultApp />
+    </VaultProvider>
+  );
+}
+
+export const Route = createFileRoute("/_authenticated/vault/$")({
+  component: VaultRoute,
+});
+```
+
+### Step 2 — Add to sidebar
+
+In `frontend/src/components/layout/data/sidebar-data.ts`:
+
+```ts
+import { vaultNavItems } from 'vault-client'
+import { FolderLock } from 'lucide-react'
+
+// Add inside navGroups array:
+{
+  title: 'Vault',
+  items: vaultNavItems.map(item => ({ ...item, icon: FolderLock })),
+},
+```
+
+### Step 3 — Done
+
+TanStack Router auto-discovers the new route file. Run `npm run dev` and
+"Vaults" appears in the sidebar.
+
+---
+
+## Standalone usage (any React app)
+
+```tsx
+import { VaultProvider, VaultApp } from "vault-client";
+import "vault-client/style.css";
+import axios from "axios";
+
+const api = axios.create({ baseURL: "https://your-api.example.com" });
+
+function App() {
+  return (
+    <VaultProvider
+      api={api}
+      getUsers={async () => {
+        const res = await api.get("/api/v1/users");
+        return res.data.users;
+      }}
+    >
+      <VaultApp />
+    </VaultProvider>
+  );
+}
+```
+
+---
+
+## Composable exports
+
+You can use individual pieces instead of the full `VaultApp`:
+
+### Pages (you manage routing)
+
+```tsx
+import { VaultPage, GroupsPage, EntriesPage } from 'vault-client'
+
+// VaultPage — lists all vaults
+<VaultPage onNavigate={(to, vaultId) => router.push(`/vault/${vaultId}`)} />
+
+// GroupsPage — lists domain groups inside a vault
+<GroupsPage vaultId={vaultId} vaultName="Production" onNavigate={...} />
+
+// EntriesPage — lists encrypted credentials inside a group
+<EntriesPage vaultId={vaultId} groupId={groupId} onNavigate={...} />
+```
+
+### Hooks (bring your own UI)
+
+```tsx
+import { useVaults, useEntries, useCreateGrant } from "vault-client";
+
+function MyCustomVaultUI() {
+  const { data: vaults } = useVaults();
+  const { data: entries } = useEntries(groupId);
+  const createGrant = useCreateGrant();
+
+  // build your own UI
+}
+```
+
+### Dialogs
+
+```tsx
+import { EntryFormDialog, GrantAccessDialog } from 'vault-client'
+
+<EntryFormDialog
+  open={open}
+  onOpenChange={setOpen}
+  groupId={groupId}
+/>
+
+<GrantAccessDialog
+  open={open}
+  onOpenChange={setOpen}
+  scope="vault"
+  scopeId={vaultId}
+  scopeLabel="Production"
+/>
+```
+
+---
+
+## VaultProvider props
+
+| Prop       | Type                    | Required | Default  | Description                                    |
+| ---------- | ----------------------- | -------- | -------- | ---------------------------------------------- |
+| `api`      | `AxiosInstance`         | ✅       | —        | Host's axios instance (shares auth + base URL) |
+| `getUsers` | `() => Promise<User[]>` | ✅       | —        | Fetches users for grant picker                 |
+| `basePath` | `string`                | —        | `/vault` | Base path for internal navigation              |
+
+---
+
+## What the package does NOT include
+
+- **Auth** — uses the host's axios instance and req.user from the server
+- **Toast provider** — uses `sonner` which must be mounted by the host
+- **shadcn components** — uses inline primitives; compatible with any Tailwind setup

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "meyi-vault-client-dev",
+  "version": "1.0.1",
+  "description": "Self-hosted encrypted password manager — React UI plugin for MeyiConnect",
+  "type": "module",
+  "main": "src/index.tsx",
+  "exports": {
+    ".": {
+      "import": "./dist/vault-client.js",
+      "require": "./dist/vault-client.cjs",
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.tsx"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "password-manager",
+    "vault",
+    "meyiconnect",
+    "plugin",
+    "react"
+  ],
+  "author": "Meyi Technologies",
+  "license": "MIT",
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.x",
+    "@tanstack/react-router": "^1.x",
+    "react": "^18.x || ^19.x",
+    "react-dom": "^18.x || ^19.x",
+    "sonner": "^1.x || ^2.x"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tanstack/react-table": "^8.21.3",
+    "axios": "^1.7.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.469.0",
+    "react-day-picker": "^9.11.1",
+    "react-hook-form": "^7.52.0",
+    "tailwind-merge": "^2.5.4",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.3.0"
+  }
+}

package/src/VaultApp.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react'
+import { useVaults } from '@/hooks/useVault'
+import { VaultPage } from '@/pages/VaultPage'
+import { EntriesPage } from '@/pages/EntriesPage'
+import { AuditPage } from '@/pages/AuditPage'
+import { useVaultContext } from '@/context/VaultProvider'
+
+/**
+ * VaultApp — the complete self-contained vault UI.
+ * Now uses real URL-based navigation for better UX and breadcrumb support.
+ */
+export function VaultApp({ path: externalPath }: { path?: string } = {}) {
+  const { basePath } = useVaultContext()
+  const [path, setPath] = useState(externalPath || window.location.pathname)
+
+  // Sync with external path prop if provided (e.g. from host router)
+  useEffect(() => {
+    if (externalPath) setPath(externalPath)
+  }, [externalPath])
+
+  // Sync state with browser navigation
+  useEffect(() => {
+    const handlePopState = () => setPath(window.location.pathname)
+    window.addEventListener('popstate', handlePopState)
+    return () => window.removeEventListener('popstate', handlePopState)
+  }, [])
+
+  const navigate = (to: string) => {
+    // Ensure 'to' starts with a slash
+    const target = to.startsWith('/') ? to : `/${to}`
+    // Only prepend basePath if the target doesn't already start with it
+    const newPath = target.startsWith(basePath) ? target : `${basePath}${target}`
+    
+    window.history.pushState({}, '', newPath)
+    setPath(newPath)
+  }
+
+  const { data: vaults = [] } = useVaults()
+
+  // Parse current route relative to basePath
+  const relativePath = path.startsWith(basePath) 
+    ? path.slice(basePath.length).replace(/\/$/, '') || '/'
+    : '/'
+
+  // Route: /vault (Root)
+  if (relativePath === '/' || relativePath === '') {
+    return (
+      <VaultPage
+        onNavigate={(to, vaultId) => {
+          if (to === 'audit') navigate('/audit')
+          else if (vaultId) navigate(`/${vaultId}`)
+        }}
+      />
+    )
+  }
+
+  // Route: /audit
+  if (relativePath === '/audit') {
+    return (
+      <AuditPage />
+    )
+  }
+
+  // Route: /vault/:vaultId
+  const vaultMatch = relativePath.match(/^\/([^/]+)$/)
+  if (vaultMatch) {
+    const [, vaultId] = vaultMatch
+    const vault = vaults.find(v => v.id === vaultId)
+    return (
+      <EntriesPage
+        vaultId={vaultId}
+        isOwner={!!vault?.is_owner}
+        onNavigate={(to) => {
+          if (to === 'vaults') navigate('/')
+        }}
+      />
+    )
+  }
+
+  // Fallback to root
+  return <VaultPage onNavigate={(_to, vaultId) => navigate(`/${vaultId}`)} />
+}

package/src/components/datetime-picker.tsx

@@ -0,0 +1,262 @@
+// components/datetime-picker.tsx
+import { useEffect, useState } from 'react'
+import { Calendar as CalendarIcon, Clock } from 'lucide-react'
+import { format } from 'date-fns'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+interface DateTimePickerProps {
+  value?: Date
+  onChange: (date: Date | undefined) => void
+  disabled?: boolean
+  className?: string
+  placeholder?: string
+  minDate?: Date
+}
+
+export function DateTimePicker({
+  value,
+  onChange,
+  disabled,
+  className,
+  placeholder = 'Pick a date and time',
+  minDate,
+}: DateTimePickerProps) {
+  const [open, setOpen] = useState(false)
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(value)
+  const [selectedTime, setSelectedTime] = useState<{
+    hour: string
+    minute: string
+    period: 'AM' | 'PM'
+  }>({
+    hour: '12',
+    minute: '00',
+    period: 'AM',
+  })
+
+  useEffect(() => {
+    if (value) {
+      setSelectedDate(value)
+      const hours = value.getHours()
+      const minutes = value.getMinutes()
+      
+      setSelectedTime({
+        hour: hours > 12 ? String(hours - 12).padStart(2, '0') : hours === 0 ? '12' : String(hours).padStart(2, '0'),
+        minute: String(minutes).padStart(2, '0'),
+        period: hours >= 12 ? 'PM' : 'AM',
+      })
+    }
+  }, [value])
+
+  const hours = Array.from({ length: 12 }, (_, i) =>
+    String(i + 1).padStart(2, '0')
+  )
+  const minutes = Array.from({ length: 60 }, (_, i) =>
+    String(i).padStart(2, '0')
+  )
+
+  const handleDateSelect = (date: Date | undefined) => {
+    setSelectedDate(date)
+  }
+
+  const isDateDisabled = (date: Date) => {
+    if (!minDate) return false
+    const compareDate = new Date(date)
+    const compareMinDate = new Date(minDate)
+    compareDate.setHours(0, 0, 0, 0)
+    compareMinDate.setHours(0, 0, 0, 0)
+    return compareDate < compareMinDate
+  }
+
+  const handleTimeChange = (
+    type: 'hour' | 'minute' | 'period',
+    newValue: string
+  ) => {
+    setSelectedTime((prev) => ({
+      ...prev,
+      [type]: newValue,
+    }))
+  }
+
+  const handleApply = () => {
+    if (selectedDate) {
+      const newDate = new Date(selectedDate)
+      let hour = parseInt(selectedTime.hour)
+      
+      if (selectedTime.period === 'PM' && hour !== 12) {
+        hour += 12
+      } else if (selectedTime.period === 'AM' && hour === 12) {
+        hour = 0
+      }
+      
+      newDate.setHours(hour)
+      newDate.setMinutes(parseInt(selectedTime.minute))
+      newDate.setSeconds(0)
+      newDate.setMilliseconds(0)
+      
+      onChange(newDate)
+      setOpen(false)
+    }
+  }
+
+  const handleClear = () => {
+    setSelectedDate(undefined)
+    onChange(undefined)
+    setSelectedTime({
+      hour: '12',
+      minute: '00',
+      period: 'AM',
+    })
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={disabled}
+          className={cn(
+            'w-full justify-start text-left font-normal h-11',
+            !value && 'text-muted-foreground',
+            className
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {value ? (
+            format(value, 'PPP p')
+          ) : (
+            <span>{placeholder}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start" side="bottom" sideOffset={8}>
+        <div className="flex flex-col md:flex-row overflow-hidden rounded-md border shadow-xl bg-card">
+          {/* Calendar Section */}
+          <div className="border-r bg-card">
+            <Calendar
+              mode="single"
+              selected={selectedDate}
+              onSelect={handleDateSelect}
+              initialFocus
+              disabled={isDateDisabled}
+            />
+          </div>
+
+          {/* Time Section */}
+          <div className="flex flex-col p-4 gap-4 bg-card min-w-[240px]">
+            <div className="flex items-center gap-2 pb-2 border-b">
+              <Clock className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Select Time</span>
+            </div>
+
+            <div className="flex gap-3 justify-center">
+              {/* Hour Picker */}
+              <div className="flex flex-col items-center gap-2">
+                <label className="text-[10px] font-medium text-muted-foreground">
+                  Hour
+                </label>
+                <ScrollArea className="h-40 w-14 rounded-md border bg-muted/5">
+                  <div className="p-1">
+                    {hours.map((h) => (
+                      <button
+                        key={h}
+                        type="button"
+                        onClick={() => handleTimeChange('hour', h)}
+                        className={cn(
+                          'w-full rounded px-2 py-1.5 text-xs font-medium hover:bg-primary/10 transition-colors',
+                          selectedTime.hour === h &&
+                            'bg-primary text-primary-foreground shadow-lg shadow-primary/20'
+                        )}
+                      >
+                        {h}
+                      </button>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </div>
+
+              {/* Minute Picker */}
+              <div className="flex flex-col items-center gap-2">
+                <label className="text-[10px] font-medium text-muted-foreground ">
+                  Min
+                </label>
+                <ScrollArea className="h-40 w-14 rounded-md border bg-muted/5">
+                  <div className="p-1">
+                    {minutes.filter(m => parseInt(m) % 5 === 0).map((m) => (
+                      <button
+                        key={m}
+                        type="button"
+                        onClick={() => handleTimeChange('minute', m)}
+                        className={cn(
+                          'w-full rounded px-2 py-1.5 text-xs font-medium hover:bg-primary/10 transition-colors',
+                          selectedTime.minute === m &&
+                            'bg-primary text-primary-foreground shadow-lg shadow-primary/20'
+                        )}
+                      >
+                        {m}
+                      </button>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </div>
+
+              {/* Period Picker */}
+              <div className="flex flex-col items-center gap-2">
+                <label className="text-[10px] font-medium text-muted-foreground ">
+                  &nbsp;
+                </label>
+                <div className="flex flex-col gap-2 pt-1">
+                  {(['AM', 'PM'] as const).map((p) => (
+                    <button
+                      key={p}
+                      type="button"
+                      onClick={() => handleTimeChange('period', p)}
+                      className={cn(
+                        'w-12 rounded px-2 py-2 text-xs font-mediumhover:bg-primary/10 transition-colors border',
+                        selectedTime.period === p
+                          ? 'bg-primary text-primary-foreground border-primary shadow-lg shadow-primary/20'
+                          : 'border-transparent'
+                      )}
+                    >
+                      {p}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex gap-2 pt-4 border-t mt-auto">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleClear}
+                className="flex-1 rounded h-9 font-semibold"
+              >
+                Clear
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                onClick={handleApply}
+                disabled={!selectedDate}
+                className="flex-1 rounded h-9 font-mediumbg-primary"
+              >
+                Apply
+              </Button>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}