initial: standalone repo from monorepo split

src/components/create-ticket-modal.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import api from '@/lib/api';
+
+interface TenantOption {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+interface Props {
+  tenants: TenantOption[];
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function CreateTicketModal({ tenants, onClose, onSuccess }: Props) {
+  const [tenantId, setTenantId] = useState('');
+  const [subject, setSubject] = useState('');
+  const [description, setDescription] = useState('');
+  const [category, setCategory] = useState('general');
+  const [priority, setPriority] = useState('normal');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!tenantId || !subject.trim() || !description.trim()) return;
+    setError('');
+    setSubmitting(true);
+    try {
+      await api.post('/support/tickets', { tenantId, subject, description, category, priority });
+      onSuccess();
+      onClose();
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Failed to create ticket');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-white rounded-xl p-6 w-full max-w-lg shadow-xl" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-lg font-semibold mb-4">Create Support Ticket</h3>
+
+        {error && <div className="p-3 text-sm text-red-700 bg-red-50 rounded-lg border border-red-200 mb-4">{error}</div>}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-surface-700 mb-1">Tenant</label>
+            <select
+              value={tenantId}
+              onChange={(e) => setTenantId(e.target.value)}
+              className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm"
+              required
+            >
+              <option value="">Select a tenant...</option>
+              {tenants.map((t) => (
+                <option key={t.id} value={t.id}>{t.name}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-surface-700 mb-1">Subject</label>
+            <input
+              type="text" value={subject}
+              onChange={(e) => setSubject(e.target.value)}
+              className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-surface-700 mb-1">Description</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={4}
+              className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm resize-none"
+              required
+            />
+          </div>
+          <div className="flex gap-4">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-surface-700 mb-1">Category</label>
+              <select
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+                className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm"
+              >
+                <option value="general">General</option>
+                <option value="billing">Billing</option>
+                <option value="technical">Technical</option>
+                <option value="account">Account</option>
+                <option value="feature_request">Feature Request</option>
+              </select>
+            </div>
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-surface-700 mb-1">Priority</label>
+              <select
+                value={priority}
+                onChange={(e) => setPriority(e.target.value)}
+                className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm"
+              >
+                <option value="low">Low</option>
+                <option value="normal">Normal</option>
+                <option value="high">High</option>
+                <option value="urgent">Urgent</option>
+              </select>
+            </div>
+          </div>
+          <div className="flex justify-end gap-3 pt-2">
+            <button type="button" onClick={onClose} className="px-4 py-2 text-sm text-surface-600 border border-surface-300 rounded-lg">Cancel</button>
+            <button
+              type="submit"
+              disabled={submitting || !tenantId}
+              className="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700 disabled:opacity-50"
+            >
+              {submitting ? 'Creating...' : 'Create Ticket'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/edit-user-modal.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState } from 'react';
+
+interface Props {
+  user: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    isActive: boolean;
+  };
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function EditUserModal({ user, onClose, onSuccess }: Props) {
+  const [firstName, setFirstName] = useState(user.firstName);
+  const [lastName, setLastName] = useState(user.lastName);
+  const [isActive, setIsActive] = useState(user.isActive);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      const { default: api } = await import('@/lib/api');
+      await api.patch(`/users/${user.id}`, { firstName, lastName, isActive });
+      onSuccess();
+      onClose();
+    } catch (err) {
+      console.error('Failed to update user:', err);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-xl" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-lg font-semibold mb-4">Edit User</h3>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-surface-700 mb-1">First Name</label>
+            <input
+              type="text" value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-surface-700 mb-1">Last Name</label>
+            <input
+              type="text" value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-surface-700 mb-1">Email</label>
+            <input type="email" value={user.email} disabled className="w-full px-3 py-2 border border-surface-200 rounded-lg text-sm bg-surface-50" />
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox" id="isActive" checked={isActive}
+              onChange={(e) => setIsActive(e.target.checked)}
+              className="rounded border-surface-300"
+            />
+            <label htmlFor="isActive" className="text-sm text-surface-700">Active</label>
+          </div>
+          <div className="flex justify-end gap-3 pt-2">
+            <button type="button" onClick={onClose} className="px-4 py-2 text-sm text-surface-600 border border-surface-300 rounded-lg">Cancel</button>
+            <button type="submit" disabled={submitting} className="px-4 py-2 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50">
+              {submitting ? 'Saving...' : 'Save Changes'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/layout/admin-header.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/auth';
+
+export function AdminHeader() {
+  const router = useRouter();
+  const { logout, admin } = useAuthStore();
+
+  const handleLogout = async () => {
+    await logout();
+    router.replace('/login');
+  };
+
+  return (
+    <header className="h-16 bg-white border-b border-surface-200 flex items-center justify-between px-6 shrink-0">
+      <div>
+        <h1 className="text-lg font-semibold text-surface-900">Platform Administration</h1>
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-surface-600">
+          {admin?.firstName} {admin?.lastName}
+        </span>
+        <button
+          onClick={handleLogout}
+          className="text-sm text-surface-500 hover:text-red-600 transition-colors"
+        >
+          Logout
+        </button>
+      </div>
+    </header>
+  );
+}

src/components/layout/admin-sidebar.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useAuthStore } from '@/lib/auth';
+
+const navigation = [
+  { name: 'Dashboard', href: '/', icon: '📊' },
+  { name: 'Tenants', href: '/tenants', icon: '🏢' },
+  { name: 'Users', href: '/users', icon: '👥' },
+  {
+    name: 'Support Tickets',
+    href: '/support',
+    icon: '🎫',
+    children: [
+      { name: 'All Tickets', href: '/support' },
+      { name: 'Open', href: '/support?status=open' },
+      { name: 'My Assigned', href: '/support?assigned=me' },
+    ],
+  },
+  { name: 'Audit Logs', href: '/audit-logs', icon: '📋' },
+];
+
+export function AdminSidebar() {
+  const pathname = usePathname();
+  const admin = useAuthStore((s) => s.admin);
+
+  return (
+    <aside className="w-64 bg-white border-r border-surface-200 flex flex-col shrink-0">
+      <div className="h-16 flex items-center px-6 border-b border-surface-200">
+        <Link href="/" className="flex items-center gap-2">
+          <span className="text-lg font-bold text-primary-600">FiberOps</span>
+          <span className="text-xs font-medium text-surface-400 bg-surface-100 px-2 py-0.5 rounded">Admin</span>
+        </Link>
+      </div>
+
+      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+        {navigation.map((item) => {
+          const isActive =
+            item.href === '/'
+              ? pathname === '/'
+              : pathname.startsWith(item.href);
+
+          return (
+            <div key={item.name}>
+              <Link
+                href={item.href}
+                className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  isActive
+                    ? 'bg-primary-50 text-primary-700'
+                    : 'text-surface-600 hover:bg-surface-100 hover:text-surface-900'
+                }`}
+              >
+                <span>{item.icon}</span>
+                {item.name}
+              </Link>
+            </div>
+          );
+        })}
+      </nav>
+
+      <div className="p-4 border-t border-surface-200">
+        <div className="text-xs text-surface-500">
+          <p className="font-medium text-surface-700">
+            {admin?.firstName} {admin?.lastName}
+          </p>
+          <p>{admin?.email}</p>
+        </div>
+      </div>
+    </aside>
+  );
+}

src/components/reset-password-modal.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useState } from 'react';
+
+interface Props {
+  user: { id: string; firstName: string; lastName: string };
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function ResetPasswordModal({ user, onClose, onSuccess }: Props) {
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    if (password.length < 8) { setError('Password must be at least 8 characters'); return; }
+    if (password !== confirm) { setError('Passwords do not match'); return; }
+
+    setSubmitting(true);
+    try {
+      const { default: api } = await import('@/lib/api');
+      await api.patch(`/users/${user.id}/reset-password`, { password });
+      onSuccess();
+      onClose();
+    } catch (err) {
+      console.error('Failed to reset password:', err);
+      setError('Failed to reset password');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-xl" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-lg font-semibold mb-1">Reset Password</h3>
+        <p className="text-sm text-surface-500 mb-4">for {user.firstName} {user.lastName}</p>
+
+        {error && <div className="p-3 text-sm text-red-700 bg-red-50 rounded-lg border border-red-200 mb-4">{error}</div>}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-surface-700 mb-1">New Password</label>
+            <input
+              type="password" value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm"
+              required minLength={8}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-surface-700 mb-1">Confirm Password</label>
+            <input
+              type="password" value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              className="w-full px-3 py-2 border border-surface-300 rounded-lg text-sm"
+              required minLength={8}
+            />
+          </div>
+          <div className="flex justify-end gap-3 pt-2">
+            <button type="button" onClick={onClose} className="px-4 py-2 text-sm text-surface-600 border border-surface-300 rounded-lg">Cancel</button>
+            <button type="submit" disabled={submitting} className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50">
+              {submitting ? 'Resetting...' : 'Reset Password'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}