src/components/account-setup.tsx

Linked repository file from this build.

import { AuthFrame } from "./auth-frame";

export function AccountSetup({ fields }: { fields: string[] }) {
  return (
    <AuthFrame>
      <section role="alert" className="max-w-lg space-y-4 rounded-xl border bg-card p-6">
        <h1 className="text-xl font-semibold">Your account is not set up for QC-CRM</h1>
        <p>
          You signed in successfully. Your account needs these Clerk public metadata fields before
          you can use QC-CRM:
        </p>
        <ul className="list-inside list-disc">
          {fields.map((field) => (
            <li key={field}>{field}</li>
          ))}
        </ul>
        <p>
          Contact the QC administrator who assigns Clerk public metadata. Ask them to add or correct
          these fields on your account.
        </p>
      </section>
    </AuthFrame>
  );
}