Merge pull request #241 from ArnasDon/fix/custom-fields-settings-tab

fix(settings): add Custom Fields tab to Settings (#238)
2026-11-02 09:19:51 +00:00 · 2026-06-11 16:23:05 +03:00 · 2026-06-11 16:23:05 +03:00 · 5b6fe3d677
commit 5b6fe3d677
parent 91e6375e61 599b21eed0
3 changed files with 160 additions and 92 deletions
--- a/src/app/(dashboard)/settings/page.tsx
+++ b/src/app/(dashboard)/settings/page.tsx
@ -9,8 +9,10 @@ import {
  Palette,
  UsersRound,
  Coins,
+  SlidersHorizontal,
 } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { useCan } from '@/hooks/use-can';
 import { WhatsAppConfig } from '@/components/settings/whatsapp-config';
 import { TemplateManager } from '@/components/settings/template-manager';
 import { TagManager } from '@/components/settings/tag-manager';
@ -20,12 +22,14 @@ import { SessionsCard } from '@/components/settings/sessions-card';
 import { AppearancePanel } from '@/components/settings/appearance-panel';
 import { MembersTab } from '@/components/settings/members-tab';
 import { DealsSettings } from '@/components/settings/deals-settings';
+import { CustomFieldsSettings } from '@/components/settings/custom-fields-settings';

 const TAB_VALUES = [
  'profile',
  'whatsapp',
  'templates',
  'tags',
+  'custom-fields',
  'deals',
  'appearance',
  'members',
@ -40,12 +44,21 @@ export default function SettingsPage() {
  const router = useRouter();
  const searchParams = useSearchParams();

+  // Custom-field definitions are account-wide config, so editing them is
+  // admin+ only — mirror the gate on the Contacts page. The `custom_fields`
+  // RLS rejects non-admin writes regardless.
+  const canEditSettings = useCan('edit-settings');
+
  // The URL is the single source of truth for the active tab — no
  // local state, no sync effect. A previous revision duplicated this
  // into `useState` + a sync effect, which tripped React 19's
  // set-state-in-effect rule and was also redundant.
  const queryTab = searchParams.get('tab');
-  const tab: TabValue = isTabValue(queryTab) ? queryTab : 'profile';
+  // Deep-linking to the admin-only tab as a non-admin falls back to profile
+  // rather than landing on a tab with no trigger or content.
+  const resolved: TabValue = isTabValue(queryTab) ? queryTab : 'profile';
+  const tab: TabValue =
+    resolved === 'custom-fields' && !canEditSettings ? 'profile' : resolved;

  const onChange = (next: TabValue) => {
    const params = new URLSearchParams(searchParams.toString());
@ -57,59 +70,68 @@ export default function SettingsPage() {
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Settings</h1>
-        <p className="text-sm text-slate-400 mt-1">
+        <p className="mt-1 text-sm text-slate-400">
          Manage your profile, WhatsApp® integration, message templates, and
          tags.
        </p>
      </div>

      <Tabs value={tab} onValueChange={(v) => onChange(v as TabValue)}>
-        <TabsList className="bg-slate-900 border border-slate-700">
+        <TabsList className="border border-slate-700 bg-slate-900">
          <TabsTrigger
            value="profile"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
          >
            <User className="size-4" />
            Profile
          </TabsTrigger>
          <TabsTrigger
            value="whatsapp"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
          >
            <Settings className="size-4" />
            WhatsApp Config
          </TabsTrigger>
          <TabsTrigger
            value="templates"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
          >
            <MessageSquare className="size-4" />
            Templates
          </TabsTrigger>
          <TabsTrigger
            value="tags"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
          >
            <Tag className="size-4" />
            Tags
          </TabsTrigger>
+          {canEditSettings && (
+            <TabsTrigger
+              value="custom-fields"
+              className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
+            >
+              <SlidersHorizontal className="size-4" />
+              Custom Fields
+            </TabsTrigger>
+          )}
          <TabsTrigger
            value="deals"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
          >
            <Coins className="size-4" />
            Deals
          </TabsTrigger>
          <TabsTrigger
            value="appearance"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
          >
            <Palette className="size-4" />
            Appearance
          </TabsTrigger>
          <TabsTrigger
            value="members"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
          >
            <UsersRound className="size-4" />
            Members
@ -134,6 +156,12 @@ export default function SettingsPage() {
          <TagManager />
        </TabsContent>

+        {canEditSettings && (
+          <TabsContent value="custom-fields">
+            <CustomFieldsSettings />
+          </TabsContent>
+        )}
+
        <TabsContent value="deals">
          <DealsSettings />
        </TabsContent>
--- a/src/components/contacts/custom-fields-manager.tsx
+++ b/src/components/contacts/custom-fields-manager.tsx
@ -22,15 +22,39 @@ interface CustomFieldsManagerProps {
 }

 /**
- * Create / rename / delete account-wide custom contact field definitions.
- * Per-contact values are edited elsewhere (contact detail → Custom Fields);
- * this only manages the field catalogue. Admin+ gated by the caller — the
- * `custom_fields` RLS also rejects non-admin writes as defense in depth.
+ * Dialog wrapper around {@link CustomFieldsPanel}, used on the Contacts page.
+ * The same panel is rendered inline under Settings → Custom Fields, so the
+ * editing UI lives in one place. Radix unmounts the dialog content on close,
+ * so the panel remounts (and refetches) on each open.
 */
 export function CustomFieldsManager({
  open,
  onOpenChange,
 }: CustomFieldsManagerProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="border-slate-700 bg-slate-900 text-slate-200 sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-white">Custom fields</DialogTitle>
+          <DialogDescription className="text-slate-400">
+            Define extra contact fields (e.g. ZIP code, lead source). They
+            appear on every contact and in the “Update Contact Field” automation
+            action.
+          </DialogDescription>
+        </DialogHeader>
+        <CustomFieldsPanel />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * Create / rename / delete account-wide custom contact field definitions.
+ * Per-contact values are edited elsewhere (contact detail → Custom Fields);
+ * this only manages the field catalogue. Admin+ gated by the caller — the
+ * `custom_fields` RLS also rejects non-admin writes as defense in depth.
+ */
+export function CustomFieldsPanel() {
  const supabase = createClient();
  const { user, accountId } = useAuth();

@ -51,27 +75,21 @@ export function CustomFieldsManager({
    setLoading(false);
  }, [supabase, accountId]);

-  // Load the field list when the dialog opens. The setters inside
-  // fetchFields run after the Supabase await — not synchronously in the
-  // effect body — so the cascade the lint rule warns about doesn't apply.
+  // Load the field list on mount once the account is known. The setters
+  // inside fetchFields run after the Supabase await — not synchronously in
+  // the effect body — so the cascade the lint rule warns about doesn't apply.
  useEffect(() => {
-    if (open && accountId) {
+    if (accountId) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      fetchFields();
    }
-  }, [open, accountId, fetchFields]);
-
-  // Clear the draft on close (handler, not effect) so reopening starts fresh.
-  function handleOpenChange(next: boolean) {
-    if (!next) setNewName('');
-    onOpenChange(next);
-  }
+  }, [accountId, fetchFields]);

  /** Case-insensitive name clash within the loaded list. */
  function isDuplicate(name: string, exceptId?: string): boolean {
    const lower = name.toLowerCase();
    return fields.some(
-      (f) => f.id !== exceptId && f.field_name.toLowerCase() === lower,
+      (f) => f.id !== exceptId && f.field_name.toLowerCase() === lower
    );
  }

@ -107,7 +125,10 @@ export function CustomFieldsManager({

  /** Returns true on success so the row can keep the new name, false so it
   *  reverts to the previous one. No-ops (blank / unchanged) count as success. */
-  async function handleRename(field: CustomField, nextName: string): Promise<boolean> {
+  async function handleRename(
+    field: CustomField,
+    nextName: string
+  ): Promise<boolean> {
    const name = nextName.trim();
    if (!name || name === field.field_name) return true;
    if (isDuplicate(name, field.id)) {
@ -131,7 +152,7 @@ export function CustomFieldsManager({
  async function handleDelete(field: CustomField) {
    if (
      !window.confirm(
-        `Delete "${field.field_name}"? This also removes its stored value on every contact. This cannot be undone.`,
+        `Delete "${field.field_name}"? This also removes its stored value on every contact. This cannot be undone.`
      )
    ) {
      return;
@ -151,71 +172,61 @@ export function CustomFieldsManager({
  }

  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="bg-slate-900 border-slate-700 text-slate-200 sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="text-white">Custom fields</DialogTitle>
-          <DialogDescription className="text-slate-400">
-            Define extra contact fields (e.g. ZIP code, lead source). They appear
-            on every contact and in the “Update Contact Field” automation action.
-          </DialogDescription>
-        </DialogHeader>
-
-        {/* Create */}
-        <div className="flex items-center gap-2">
-          <Input
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                void handleCreate();
-              }
-            }}
-            placeholder="New field name…"
-            className="bg-slate-800 text-white"
-          />
-          <Button
-            onClick={handleCreate}
-            disabled={creating || !newName.trim()}
-            className="bg-primary hover:bg-primary/90 text-primary-foreground shrink-0"
-          >
-            {creating ? (
-              <Loader2 className="size-4 animate-spin" />
-            ) : (
-              <Plus className="size-4" />
-            )}
-            Add
-          </Button>
-        </div>
-
-        {/* List */}
-        <div className="max-h-72 overflow-y-auto rounded-md border border-slate-800">
-          {loading ? (
-            <div className="flex items-center justify-center gap-2 py-8 text-sm text-slate-500">
-              <Loader2 className="size-4 animate-spin" />
-              Loading…
-            </div>
-          ) : fields.length === 0 ? (
-            <p className="py-8 text-center text-sm text-slate-500">
-              No custom fields yet.
-            </p>
+    <div className="space-y-4">
+      {/* Create */}
+      <div className="flex items-center gap-2">
+        <Input
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              void handleCreate();
+            }
+          }}
+          placeholder="New field name…"
+          className="bg-slate-800 text-white"
+        />
+        <Button
+          onClick={handleCreate}
+          disabled={creating || !newName.trim()}
+          className="bg-primary hover:bg-primary/90 text-primary-foreground shrink-0"
+        >
+          {creating ? (
+            <Loader2 className="size-4 animate-spin" />
          ) : (
-            <ul className="divide-y divide-slate-800">
-              {fields.map((field) => (
-                <FieldRow
-                  key={field.id}
-                  field={field}
-                  busy={busyId === field.id}
-                  onRename={handleRename}
-                  onDelete={handleDelete}
-                />
-              ))}
-            </ul>
+            <Plus className="size-4" />
          )}
-        </div>
-      </DialogContent>
-    </Dialog>
+          Add
+        </Button>
+      </div>
+
+      {/* List */}
+      <div className="max-h-72 overflow-y-auto rounded-md border border-slate-800">
+        {loading ? (
+          <div className="flex items-center justify-center gap-2 py-8 text-sm text-slate-500">
+            <Loader2 className="size-4 animate-spin" />
+            Loading…
+          </div>
+        ) : fields.length === 0 ? (
+          <p className="py-8 text-center text-sm text-slate-500">
+            No custom fields yet.
+          </p>
+        ) : (
+          <ul className="divide-y divide-slate-800">
+            {fields.map((field) => (
+              <FieldRow
+                key={field.id}
+                field={field}
+                busy={busyId === field.id}
+                onRename={handleRename}
+                onDelete={handleDelete}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
  );
 }

@ -254,7 +265,7 @@ function FieldRow({
          if (e.key === 'Enter') e.currentTarget.blur();
        }}
        aria-label={`Rename ${field.field_name}`}
-        className="h-8 border-transparent bg-transparent text-white hover:border-slate-700 focus:border-primary"
+        className="focus:border-primary h-8 border-transparent bg-transparent text-white hover:border-slate-700"
      />
      <Button
        variant="ghost"
--- a/src/components/settings/custom-fields-settings.tsx
+++ b/src/components/settings/custom-fields-settings.tsx
@ -0,0 +1,29 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { CustomFieldsPanel } from '@/components/contacts/custom-fields-manager';
+
+/**
+ * Settings → Custom Fields. Manage the account-wide custom contact field
+ * catalogue (the same panel the Contacts page exposes via a dialog). Writes
+ * are admin-gated by the caller and enforced by `custom_fields` RLS.
+ */
+export function CustomFieldsSettings() {
+  return (
+    <div className="mt-4 space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold text-white">Custom fields</h2>
+        <p className="text-sm text-slate-400">
+          Define extra contact fields (e.g. ZIP code, lead source). They appear
+          on every contact and in the “Update Contact Field” automation action.
+        </p>
+      </div>
+
+      <Card className="border-slate-700 bg-slate-900 ring-0 ring-transparent">
+        <CardContent className="pt-4">
+          <CustomFieldsPanel />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}