Modern Web Engineering: Next.js, Tailwind CSS & TypeScript

// app/dashboard/page.tsx - Server Component (Fetches data directly on the server)
import { Suspense } from 'react';
import UserList from '@/components/UserList';
import MetricCards from '@/components/MetricCards';
import LoadingSkeleton from '@/components/LoadingSkeleton';

export default async function DashboardPage() {
  return (
    <main className="min-h-screen bg-slate-50 dark:bg-slate-950 p-8">
      <h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white mb-6">
        Analytics Overview
      </h1>
      
      <Suspense fallback={<LoadingSkeleton />}>
        <MetricCards />
      </Suspense>

      <section className="mt-8">
        <UserList />
      </section>
    </main>
  );
}

// app/actions/user.ts
'use server';

import { revalidatePath } from 'next/cache';
import { z } from 'zod';

const UpdateProfileSchema = z.object({
  userId: z.string().uuid(),
  displayName: z.string().min(2, 'Name must be at least 2 characters'),
  bio: z.string().max(200).optional(),
});

export type ActionResponse = {
  success: boolean;
  message?: string;
  errors?: Record<string, string[]>;
};

export async function updateProfile(prevState: ActionResponse | null, formData: FormData): Promise<ActionResponse> {
  const rawData = {
    userId: formData.get('userId'),
    displayName: formData.get('displayName'),
    bio: formData.get('bio'),
  };

  const parsed = UpdateProfileSchema.safeParse(rawData);

  if (!parsed.success) {
    return {
      success: false,
      errors: parsed.error.flatten().fieldErrors,
    };
  }

  // Perform database write operation securely
  // await db.user.update({ where: { id: parsed.data.userId }, data: parsed.data });

  revalidatePath('/dashboard');
  return { success: true, message: 'Profile updated successfully.' };
}

// lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}

// components/ProfileCard.tsx
'use client';

import Image from 'next/image';
import { useState } from 'react';
import { cn } from '@/lib/utils';

export type UserStatus = 'active' | 'away' | 'offline';

export interface ProfileCardProps {
  id: string;
  name: string;
  role: string;
  avatarUrl: string;
  initialStatus?: UserStatus;
  className?: string;
}

const statusColorMap: Record<UserStatus, string> = {
  active: 'bg-emerald-500 ring-emerald-500/20',
  away: 'bg-amber-500 ring-amber-500/20',
  offline: 'bg-slate-400 ring-slate-400/20',
};

export default function ProfileCard({
  name,
  role,
  avatarUrl,
  initialStatus = 'active',
  className,
}: ProfileCardProps) {
  const [status, setStatus] = useState<UserStatus>(initialStatus);

  return (
    <div
      className={cn(
        'group relative flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition-all duration-200 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:hover:border-slate-700',
        className
      )}
    >
      <div className="relative shrink-0">
        <Image
          src={avatarUrl}
          alt={`${name}'s profile avatar`}
          width={56}
          height={56}
          className="rounded-full object-cover ring-2 ring-slate-100 dark:ring-slate-800"
        />
        <span
          className={cn(
            'absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full ring-2 ring-white dark:ring-slate-900',
            statusColorMap[status]
          )}
          aria-label={`Status: ${status}`}
        />
      </div>

      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2">
          <h3 className="truncate text-base font-semibold text-slate-900 dark:text-slate-100">
            {name}
          </h3>
          <select
            value={status}
            onChange={(e) => setStatus(e.target.value as UserStatus)}
            className="rounded border border-slate-200 bg-transparent px-2 py-0.5 text-xs text-slate-600 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-400"
          >
            <option value="active">Active</option>
            <option value="away">Away</option>
            <option value="offline">Offline</option>
          </select>
        </div>
        <p className="truncate text-sm text-slate-500 dark:text-slate-400">
          {role}
        </p>
      </div>
    </div>
  );
}