fix: update user fields to match schema

- Replace firstName/lastName with name field in users API route
- Update user formatting in UsersTab component
- Add email fallback when name is not available

src/components/breadcrumb.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useActiveStudy } from "~/context/active-study";
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export function Breadcrumb() {
+  const pathname = usePathname();
+  const { activeStudy } = useActiveStudy();
+
+  const getBreadcrumbs = (): BreadcrumbItem[] => {
+    const items: BreadcrumbItem[] = [{ label: 'Dashboard', href: '/dashboard' }];
+    const path = pathname.split('/').filter(Boolean);
+
+    // Handle studies list page
+    if (path[1] === 'studies' && !activeStudy) {
+      items.push({ label: 'Studies', href: '/dashboard/studies' });
+      if (path[2] === 'new') {
+        items.push({ label: 'New Study' });
+      }
+      return items;
+    }
+
+    // Handle active study pages
+    if (activeStudy) {
+      items.push({ 
+        label: 'Studies', 
+        href: '/dashboard/studies' 
+      });
+      
+      items.push({ 
+        label: activeStudy.title,
+        href: `/dashboard/studies/${activeStudy.id}`
+      });
+
+      // Add section based on URL
+      if (path.length > 3) {
+        const section = path[3];
+        const sectionLabel = section.charAt(0).toUpperCase() + section.slice(1);
+        
+        if (section === 'new') {
+          items.push({ 
+            label: `New ${path[2].slice(0, -1)}`,
+            href: `/dashboard/studies/${activeStudy.id}/${path[2]}/new`
+          });
+        } else {
+          items.push({ 
+            label: sectionLabel,
+            href: `/dashboard/studies/${activeStudy.id}/${section}`
+          });
+        }
+      }
+    }
+
+    return items;
+  };
+
+  const breadcrumbs = getBreadcrumbs();
+
+  if (breadcrumbs.length <= 1) return null;
+
+  return (
+    <div className="flex items-center space-x-2 text-sm text-muted-foreground mb-6">
+      {breadcrumbs.map((item, index) => {
+        const isLast = index === breadcrumbs.length - 1;
+
+        return (
+          <div key={item.label} className="flex items-center">
+            {index > 0 && <ChevronRight className="h-4 w-4 mx-2" />}
+            {item.href && !isLast ? (
+              <Link
+                href={item.href}
+                className="hover:text-foreground transition-colors"
+              >
+                {item.label}
+              </Link>
+            ) : (
+              <span className={isLast ? "text-foreground font-medium" : ""}>
+                {item.label}
+              </span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}