Add React Doctor to GitHub Actions

.github/workflows/react-doctor.yml

@@ -0,0 +1,56 @@
+# React Doctor — finds security, performance, correctness, accessibility,
+# bundle-size, and architecture issues in React codebases.
+#
+# Docs: https://www.react.doctor/ci
+# Source: https://github.com/millionco/react-doctor
+
+name: React Doctor
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+  # Scans `main` on every push so you get a health-score trend on the
+  # default branch — useful for tracking the overall number commit-by-commit
+  # and catching regressions that slipped past PR review. PR-specific steps
+  # (the sticky summary comment) are skipped automatically on `push` events.
+  # Comment this block out if you only want PR-time scans.
+  push:
+    branches: [main]
+
+permissions:
+  # `actions/checkout` needs this to read the repo source.
+  contents: read
+  # Two uses: (1) reads the PR's changed-file list so the scan only checks
+  # what the PR touched (faster, scoped to the diff), and (2) posts/updates
+  # the sticky React Doctor summary comment on the PR. Downgrade `write` to
+  # `read` to keep the changed-file scan but disable comment posting.
+  pull-requests: write
+  # The sticky-comment step uses GitHub's `issues.createComment` /
+  # `issues.updateComment` endpoints — those are the same APIs that back PR
+  # comments (PRs are issues under the hood). Not exercised on `push`
+  # events, so safe to drop if you only run on `main`.
+  issues: write
+
+# Cancels any in-flight scan for the same PR (or branch, on push) the moment
+# a new commit arrives, so reviewers only ever see the latest run.
+concurrency:
+  group: react-doctor-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  react-doctor:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - uses: millionco/react-doctor@v1
+        # Common configuration knobs — uncomment any to override the default.
+        # Full reference: https://www.react.doctor/ci
+        # with:
+        #   non-blocking: true       # Report findings but always exit 0 (won't fail the PR check)
+        #   fail-on: warning         # Gate level: "error" (default) | "warning" | "none"
+        #   comment: false           # Disable the sticky PR summary comment
+        #   annotations: false       # Disable inline GitHub Actions annotations on changed files
+        #   version: "0.2.18"        # Pin to a specific react-doctor version instead of "latest"
+        #   directory: apps/web      # Scan a sub-directory (default: ".")
+        #   project: "web,admin"     # In a monorepo, scan specific workspace project(s)

doctor.config.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://react.doctor/schema/config.json",
+  "ignore": {
+    "files": [
+      "src/components/ui/**",
+      "node_modules/**",
+      "drizzle/**",
+      "dist/**",
+      ".output/**",
+      "react-doctor-report.json"
+    ]
+  },
+  "rules": {
+    "react-doctor/only-export-components": "off",
+    "react-doctor/no-giant-component": "off",
+    "react-doctor/no-multi-comp": "off",
+    "react-doctor/prefer-useReducer": "off",
+    "react-doctor/no-many-boolean-props": "off",
+    "react-doctor/prefer-dynamic-import": "off",
+    "react-doctor/no-event-handler": "off",
+    "react-doctor/control-has-associated-label": "off",
+    "react-doctor/use-lazy-motion": "off",
+    "react-doctor/jsx-no-jsx-as-prop": "off",
+    "deslop/unused-export": "off",
+    "deslop/unused-file": "off"
+  }
+}

package.json

@@ -12,7 +12,8 @@
     "typecheck": "bun x tsc --noEmit",
     "check": "ultracite check",
     "fix": "ultracite fix",
-    "db:studio": "drizzle-kit studio"
+    "db:studio": "drizzle-kit studio",
+    "doctor": "npx react-doctor@latest"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
@@ -27,7 +28,6 @@
     "@tanstack/react-router-devtools": "^1.132.0",
     "@tanstack/react-router-ssr-query": "^1.131.7",
     "@tanstack/react-start": "^1.132.0",
-    "@tanstack/router-plugin": "^1.132.0",
     "@uploadthing/react": "^7.3.3",
     "better-auth": "^1.5.5",
     "class-variance-authority": "^0.7.1",
@@ -63,7 +63,6 @@
     "typescript": "^5.7.2",
     "ultracite": "7.3.2",
     "vite": "^8.0.12",
-    "vitest": "^4",
-    "web-vitals": "^5.1.0"
+    "vitest": "^4"
   }
 }

scripts/migrate-portal.ts

@@ -5,8 +5,14 @@ let hadError = false;
 
 // Add new columns to invites table (ignore if already exist)
 for (const [col, ddl] of [
-  ["initiated_by_client_id", "ALTER TABLE invites ADD COLUMN initiated_by_client_id TEXT REFERENCES clients(id) ON DELETE SET NULL"],
-  ["admin_approved_at", "ALTER TABLE invites ADD COLUMN admin_approved_at INTEGER"],
+  [
+    "initiated_by_client_id",
+    "ALTER TABLE invites ADD COLUMN initiated_by_client_id TEXT REFERENCES clients(id) ON DELETE SET NULL",
+  ],
+  [
+    "admin_approved_at",
+    "ALTER TABLE invites ADD COLUMN admin_approved_at INTEGER",
+  ],
 ] as const) {
   try {
     await db.run(sql.raw(ddl));
@@ -28,7 +34,8 @@ if (hadError) {
 
 // Create status_change_requests table
 try {
-  await db.run(sql.raw(`
+  await db.run(
+    sql.raw(`
     CREATE TABLE IF NOT EXISTS status_change_requests (
       id TEXT PRIMARY KEY,
       project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
@@ -40,7 +47,8 @@ try {
       reviewed_at INTEGER,
       created_at INTEGER NOT NULL
     )
-  `));
+  `)
+  );
   console.log("✓ Created status_change_requests table");
 } catch (e: unknown) {
   console.error("status_change_requests error:", e);

src/__tests__/api-invite-management.test.ts

@@ -21,18 +21,18 @@ vi.mock("@/server/email/notifications", () => ({
 
 import { getSessionUserFromHeaders } from "@/auth/session.server";
 import {
+  approveInviteRecord,
   createInviteRecord,
   getActiveInviteById,
   getClientById,
   getInviteRecordById,
   refreshInviteExpiration,
   revokeInviteRecord,
-  approveInviteRecord,
 } from "@/db/records";
 import { Route as InvitesRoute } from "@/routes/api/invites";
+import { Route as ApproveInviteRoute } from "@/routes/api/invites/$id/approve";
 import { Route as ResendInviteRoute } from "@/routes/api/invites/$id/resend";
 import { Route as RevokeInviteRoute } from "@/routes/api/invites/$id/revoke";
-import { Route as ApproveInviteRoute } from "@/routes/api/invites/$id/approve";
 import { sendInviteEmail } from "@/server/email/notifications";
 
 const inviteHandlers = InvitesRoute.options.server?.handlers as {

src/components/auth/auth-shell.tsx

@@ -71,7 +71,7 @@ export function AuthShell({
             </p>
           </div>
           <div className="font-normal text-emerald-100/40 text-xs tracking-wide">
-            © {new Date().getFullYear()} Clientra. Refined workspace design.
+            © <span suppressHydrationWarning>{new Date().getFullYear()}</span> Clientra. Refined workspace design.
           </div>
         </div>
       </div>

src/components/auth/worker-invite-form.tsx

@@ -22,6 +22,11 @@ interface InvitationData {
   role: string;
 }
 
+const handleSignOut = async () => {
+  await authClient.signOut();
+  window.location.reload();
+};
+
 export function WorkerInviteForm({ token }: { token: string }) {
   const router = useRouter();
   const [invitation, setInvitation] = useState<InvitationData | null>(null);
@@ -85,10 +90,7 @@ export function WorkerInviteForm({ token }: { token: string }) {
     }
   };
 
-  const handleSignOut = async () => {
-    await authClient.signOut();
-    window.location.reload();
-  };
+
 
   if (loading) {
     return (

src/components/common/panel-section.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface PanelSectionProps {
+  action?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  description?: string;
+  title: string;
+  variant?: "card" | "ghost";
+}
+
+export function PanelSection({
+  title,
+  description,
+  action,
+  children,
+  className,
+  variant = "card",
+}: PanelSectionProps) {
+  return (
+    <section
+      className={cn(
+        "space-y-5",
+        variant === "card" &&
+          "rounded-xl border border-border/40 bg-card p-6 shadow-[0_1px_3px_rgba(0,0,0,0.015)]",
+        className
+      )}
+    >
+      <div className="flex flex-wrap items-center justify-between gap-4 border-border/40 border-b pb-4">
+        <div>
+          <h2
+            className={cn(
+              "font-semibold text-foreground",
+              variant === "card" ? "text-lg" : "text-base"
+            )}
+          >
+            {title}
+          </h2>
+          {description && (
+            <p
+              className={cn(
+                "mt-1 text-muted-foreground leading-relaxed",
+                variant === "card" ? "text-sm" : "text-xs"
+              )}
+            >
+              {description}
+            </p>
+          )}
+        </div>
+        {action}
+      </div>
+      {children}
+    </section>
+  );
+}