Initial commit

2026-04-10 15:36:33 -07:00
commit d6d7338a39
134 changed files with 16232 additions and 0 deletions
--- a/components/dashboard/header.tsx
+++ b/components/dashboard/header.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import { usePathname, useRouter } from 'next/navigation'
+import { signOut } from 'next-auth/react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Menu, LogOut, Settings, User as UserIcon, Monitor } from 'lucide-react'
+import Link from 'next/link'
+import { MobileNav } from './mobile-nav'
+import { useState } from 'react'
+
+interface Profile {
+  fullName: string | null
+  company: string | null
+  role: string | null
+}
+
+interface AuthUser {
+  id: string
+  email: string
+  name: string
+}
+
+interface DashboardHeaderProps {
+  user: AuthUser
+  profile: Profile | null
+}
+
+const pageTitles: Record<string, string> = {
+  '/dashboard': 'Overview',
+  '/dashboard/machines': 'Machines',
+  '/dashboard/connect': 'Quick Connect',
+  '/dashboard/sessions': 'Session History',
+  '/dashboard/settings': 'Settings',
+  '/dashboard/admin': 'Admin',
+  '/download': 'Download Agent',
+}
+
+export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
+
+  const handleSignOut = async () => {
+    await signOut({ redirect: false })
+    router.push('/auth/login')
+  }
+
+  const displayName = profile?.fullName || user.name || user.email?.split('@')[0]
+  const title = pageTitles[pathname] || 'Dashboard'
+
+  return (
+    <>
+      <header className="flex h-16 items-center justify-between gap-4 px-6 border-b border-border/50 bg-card/50">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="lg:hidden"
+            onClick={() => setMobileNavOpen(true)}
+          >
+            <Menu className="h-5 w-5" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+
+          <Link href="/dashboard" className="flex items-center gap-2 lg:hidden">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+              <Monitor className="h-4 w-4 text-primary-foreground" />
+            </div>
+          </Link>
+
+          <h1 className="text-lg font-semibold hidden sm:block">{title}</h1>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary text-sm font-medium">
+                {displayName?.charAt(0)?.toUpperCase() || 'U'}
+              </div>
+              <span className="hidden sm:inline-block text-sm">{displayName}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <div className="px-2 py-1.5">
+              <p className="text-sm font-medium">{displayName}</p>
+              <p className="text-xs text-muted-foreground">{user.email}</p>
+            </div>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+              <Link href="/dashboard/settings" className="cursor-pointer">
+                <UserIcon className="mr-2 h-4 w-4" />
+                Profile
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link href="/dashboard/settings" className="cursor-pointer">
+                <Settings className="mr-2 h-4 w-4" />
+                Settings
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer text-destructive">
+              <LogOut className="mr-2 h-4 w-4" />
+              Sign out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+
+      <MobileNav
+        open={mobileNavOpen}
+        onClose={() => setMobileNavOpen(false)}
+        profile={profile}
+      />
+    </>
+  )
+}
--- a/components/dashboard/machine-actions.tsx
+++ b/components/dashboard/machine-actions.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { MoreHorizontal, Trash2, RefreshCw, Copy } from 'lucide-react'
+
+interface Machine {
+  id: string
+  name: string
+  hostname: string | null
+  os: string | null
+  osVersion: string | null
+  isOnline: boolean
+  accessKey: string
+  lastSeen: Date | null
+}
+
+interface MachineActionsProps {
+  machine: Machine
+}
+
+export function MachineActions({ machine }: MachineActionsProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const router = useRouter()
+
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    const res = await fetch(`/api/machines/${machine.id}`, { method: 'DELETE' })
+    if (res.ok) router.refresh()
+    setIsDeleting(false)
+    setShowDeleteDialog(false)
+  }
+
+  const copyAccessKey = () => navigator.clipboard.writeText(machine.accessKey)
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={copyAccessKey}>
+            <Copy className="mr-2 h-4 w-4" />
+            Copy Access Key
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => router.refresh()}>
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Refresh Status
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() => setShowDeleteDialog(true)}
+            className="text-destructive focus:text-destructive"
+          >
+            <Trash2 className="mr-2 h-4 w-4" />
+            Delete Machine
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete machine?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will remove {`"${machine.name}"`} from your account. The agent on the remote machine will need to be re-registered.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
--- a/components/dashboard/mobile-nav.tsx
+++ b/components/dashboard/mobile-nav.tsx
@@ -0,0 +1,115 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Monitor,
+  LayoutDashboard,
+  Laptop,
+  History,
+  Settings,
+  Download,
+  Link2,
+  ShieldCheck,
+  X
+} from 'lucide-react'
+
+interface Profile {
+  fullName: string | null
+  company: string | null
+  role: string | null
+}
+
+interface MobileNavProps {
+  open: boolean
+  onClose: () => void
+  profile: Profile | null
+}
+
+const navItems = [
+  { href: '/dashboard', icon: LayoutDashboard, label: 'Overview' },
+  { href: '/dashboard/machines', icon: Laptop, label: 'Machines' },
+  { href: '/dashboard/connect', icon: Link2, label: 'Quick Connect' },
+  { href: '/dashboard/sessions', icon: History, label: 'Sessions' },
+  { href: '/download', icon: Download, label: 'Download Agent' },
+  { href: '/dashboard/settings', icon: Settings, label: 'Settings' },
+]
+
+const adminNavItems = [
+  { href: '/dashboard/admin', icon: ShieldCheck, label: 'Admin' },
+]
+
+export function MobileNav({ open, onClose, profile }: MobileNavProps) {
+  const pathname = usePathname()
+  const isAdmin = profile?.role === 'admin'
+  const allNavItems = isAdmin ? [...navItems, ...adminNavItems] : navItems
+
+  if (!open) return null
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
+        onClick={onClose}
+      />
+
+      <div className="fixed inset-y-0 left-0 z-50 w-72 bg-sidebar border-r border-sidebar-border lg:hidden">
+        <div className="flex h-16 items-center justify-between px-6 border-b border-sidebar-border">
+          <div className="flex items-center gap-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+              <Monitor className="h-4 w-4 text-primary-foreground" />
+            </div>
+            <span className="font-bold text-sidebar-foreground">RemoteLink</span>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-5 w-5" />
+            <span className="sr-only">Close menu</span>
+          </Button>
+        </div>
+
+        <nav className="flex-1 p-4 space-y-1">
+          {allNavItems.map((item) => {
+            const isActive =
+              pathname === item.href ||
+              (item.href !== '/dashboard' && pathname.startsWith(item.href))
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={onClose}
+                className={cn(
+                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                    : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                {item.label}
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="p-4 border-t border-sidebar-border">
+          <div className="flex items-center gap-3 px-3 py-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium">
+              {profile?.fullName?.charAt(0)?.toUpperCase() || 'U'}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-sidebar-foreground truncate">
+                {profile?.fullName || 'User'}
+              </p>
+              <p className="text-xs text-sidebar-foreground/60 truncate">
+                {profile?.company || 'Personal'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
--- a/components/dashboard/sidebar.tsx
+++ b/components/dashboard/sidebar.tsx
@@ -0,0 +1,102 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import {
+  Monitor,
+  LayoutDashboard,
+  Laptop,
+  History,
+  Settings,
+  Download,
+  Link2,
+  ShieldCheck
+} from 'lucide-react'
+
+interface Profile {
+  fullName: string | null
+  company: string | null
+  role: string | null
+}
+
+interface AuthUser {
+  id: string
+  email: string
+  name: string
+}
+
+interface DashboardSidebarProps {
+  user: AuthUser
+  profile: Profile | null
+}
+
+const navItems = [
+  { href: '/dashboard', icon: LayoutDashboard, label: 'Overview' },
+  { href: '/dashboard/machines', icon: Laptop, label: 'Machines' },
+  { href: '/dashboard/connect', icon: Link2, label: 'Quick Connect' },
+  { href: '/dashboard/sessions', icon: History, label: 'Sessions' },
+  { href: '/download', icon: Download, label: 'Download Agent' },
+  { href: '/dashboard/settings', icon: Settings, label: 'Settings' },
+]
+
+const adminNavItems = [
+  { href: '/dashboard/admin', icon: ShieldCheck, label: 'Admin' },
+]
+
+export function DashboardSidebar({ profile }: DashboardSidebarProps) {
+  const pathname = usePathname()
+  const isAdmin = profile?.role === 'admin'
+  const allNavItems = isAdmin ? [...navItems, ...adminNavItems] : navItems
+
+  return (
+    <aside className="hidden lg:flex w-64 flex-col border-r border-border/50 bg-sidebar">
+      <div className="flex h-16 items-center gap-2 px-6 border-b border-sidebar-border">
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+          <Monitor className="h-4 w-4 text-primary-foreground" />
+        </div>
+        <span className="font-bold text-sidebar-foreground">RemoteLink</span>
+      </div>
+
+      <nav className="flex-1 p-4 space-y-1">
+        {allNavItems.map((item) => {
+          const isActive =
+            pathname === item.href ||
+            (item.href !== '/dashboard' && pathname.startsWith(item.href))
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                  : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'
+              )}
+            >
+              <item.icon className="h-4 w-4" />
+              {item.label}
+            </Link>
+          )
+        })}
+      </nav>
+
+      <div className="p-4 border-t border-sidebar-border">
+        <div className="flex items-center gap-3 px-3 py-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium">
+            {profile?.fullName?.charAt(0)?.toUpperCase() || 'U'}
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-sidebar-foreground truncate">
+              {profile?.fullName || 'User'}
+            </p>
+            <p className="text-xs text-sidebar-foreground/60 truncate">
+              {profile?.company || 'Personal'}
+            </p>
+          </div>
+        </div>
+      </div>
+    </aside>
+  )
+}