Add React Doctor to GitHub Actions

.github/workflows/react-doctor.yml

@@ -0,0 +1,47 @@
+# 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:
+  # Scans the PR's changed files and posts a sticky summary comment listing only the new issues introduced relative to the merge base of the target branch.
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+  # Scans `main` on every push to track the health-score trend and catch regressions that slipped past PR review.
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+  statuses: 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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          persist-credentials: false
+
+      - uses: millionco/react-doctor@75932719d11ef50e110eac01ce04acdc05fde074 # v2.0.1
+        # Common configuration knobs — uncomment any to override the default.
+        # Full reference: https://www.react.doctor/ci
+        # with:
+        #   blocking: warning        # Gate level: "error" (default) | "warning" | "none" (advisory)
+        #   scope: full              # On PRs, scan the whole project instead of just changed files
+        #   comment: false           # Disable the sticky PR summary comment
+        #   review-comments: false   # Disable inline review comments on changed lines
+        #   commit-status: false     # Disable the commit status (score + counts, links to the run)
+        #   version: "0.4.0"         # 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)

.gitignore

@@ -1,15 +1,16 @@
-node_modules
-.DS_Store
-dist
-dist-ssr
-*.local
-count.txt
-.env
-.nitro
-.tanstack
-.wrangler
-.output
-.vinxi
-__unconfig*
-todos.json
-local.db
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+count.txt
+.env
+.nitro
+.tanstack
+.wrangler
+.output
+.vinxi
+__unconfig*
+todos.json
+local.db
+react-doctor-report.json

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@2"
   },
   "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>
+  );
+}