Data management tab

2025-12-02 09:46:12 +01:00
parent 61cb93d04c
commit 2e6b485532
6 changed files with 812 additions and 3 deletions
@@ -0,0 +1,361 @@
+import {useState} from 'react';
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@plunk/ui';
+import {Trash2, AlertCircle, Loader2} from 'lucide-react';
+import {toast} from 'sonner';
+import useSWR from 'swr';
+import {useActiveProject} from '../lib/contexts/ActiveProjectProvider';
+import {network} from '../lib/network';
+
+interface FieldData {
+  field: string;
+  type: 'string' | 'number' | 'boolean' | 'date';
+}
+
+interface FieldUsage {
+  usedInSegments: Array<{id: string; name: string}>;
+  usedInCampaigns: Array<{id: string; name: string}>;
+  contactCount: number;
+  canDelete: boolean;
+}
+
+interface EventUsage {
+  usedInSegments: Array<{id: string; name: string}>;
+  usedInWorkflows: Array<{id: string; name: string}>;
+  totalCount: number;
+  uniqueContacts: number;
+  canDelete: boolean;
+}
+
+export function DataManagementSettings() {
+  const {activeProject} = useActiveProject();
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedField, setSelectedField] = useState<string | null>(null);
+  const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Fetch contact fields
+  const {data: fieldsData, mutate: mutateFields} = useSWR<{fields: FieldData[]; count: number}>(
+    activeProject?.id ? `/contacts/fields` : null,
+  );
+
+  // Fetch event names
+  const {data: eventsData, mutate: mutateEvents} = useSWR<{eventNames: string[]}>(
+    activeProject?.id ? `/events/names` : null,
+  );
+
+  // Fetch field usage for selected field
+  const {data: fieldUsage} = useSWR<FieldUsage>(
+    selectedField ? `/contacts/fields/${encodeURIComponent(selectedField)}/usage` : null,
+  );
+
+  // Fetch event usage for selected event
+  const {data: eventUsage} = useSWR<EventUsage>(
+    selectedEvent ? `/events/${encodeURIComponent(selectedEvent)}/usage` : null,
+  );
+
+  // Filter out standard fields and only show custom data fields
+  const customFields =
+    fieldsData?.fields.filter(f => f.field.startsWith('data.')) || [];
+
+  // Filter out system events
+  const customEvents =
+    eventsData?.eventNames.filter(
+      name => !name.startsWith('email.') && !name.startsWith('segment.'),
+    ) || [];
+
+  const handleDeleteField = async () => {
+    if (!selectedField || !fieldUsage?.canDelete) return;
+
+    setIsDeleting(true);
+    try {
+      const result = await network.fetch<{deletedFrom: number}>(
+        'DELETE',
+        `/contacts/fields/${encodeURIComponent(selectedField)}`,
+      );
+
+      toast.success(`Field deleted from ${result.deletedFrom} contact(s)`);
+      setDeleteDialogOpen(false);
+      setSelectedField(null);
+      mutateFields();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to delete field');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleDeleteEvent = async () => {
+    if (!selectedEvent || !eventUsage?.canDelete) return;
+
+    setIsDeleting(true);
+    try {
+      const result = await network.fetch<{deletedCount: number}>(
+        'DELETE',
+        `/events/${encodeURIComponent(selectedEvent)}`,
+      );
+
+      toast.success(`Deleted ${result.deletedCount} event(s)`);
+      setDeleteDialogOpen(false);
+      setSelectedEvent(null);
+      mutateEvents();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to delete event');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const openFieldDeleteDialog = (field: string) => {
+    setSelectedField(field);
+    setSelectedEvent(null);
+    setDeleteDialogOpen(true);
+  };
+
+  const openEventDeleteDialog = (eventName: string) => {
+    setSelectedEvent(eventName);
+    setSelectedField(null);
+    setDeleteDialogOpen(true);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Custom Contact Fields */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Custom Contact Fields</CardTitle>
+          <CardDescription>
+            Manage custom fields stored in your contact data. You can only delete fields that are not
+            used in any segments or campaigns.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {customFields.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No custom fields found</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Field Name</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {customFields.map(field => (
+                  <TableRow key={field.field}>
+                    <TableCell className="font-mono text-sm">
+                      {field.field.replace('data.', '')}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">{field.type}</Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => openFieldDeleteDialog(field.field)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Custom Events */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Custom Events</CardTitle>
+          <CardDescription>
+            Manage custom events tracked in your project. You can only delete events that are not used
+            in any segments or workflows. System events (email.*, segment.*) cannot be deleted.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {customEvents.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No custom events found</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Event Name</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {customEvents.map(eventName => (
+                  <TableRow key={eventName}>
+                    <TableCell className="font-mono text-sm">{eventName}</TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => openEventDeleteDialog(eventName)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {selectedField ? 'Delete Field' : 'Delete Event'}
+            </DialogTitle>
+            <DialogDescription>
+              {selectedField
+                ? `Are you sure you want to delete the field "${selectedField.replace('data.', '')}"?`
+                : `Are you sure you want to delete the event "${selectedEvent}"?`}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedField && fieldUsage && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <p className="text-sm">
+                  <strong>Contacts with this field:</strong> {fieldUsage.contactCount}
+                </p>
+                <p className="text-sm">
+                  <strong>Used in segments:</strong> {fieldUsage.usedInSegments.length}
+                </p>
+                <p className="text-sm">
+                  <strong>Used in campaigns:</strong> {fieldUsage.usedInCampaigns.length}
+                </p>
+              </div>
+
+              {!fieldUsage.canDelete && (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <div className="ml-2">
+                    <p className="text-sm font-medium">Cannot delete this field</p>
+                    <p className="text-sm">
+                      This field is currently used in:
+                    </p>
+                    {fieldUsage.usedInSegments.length > 0 && (
+                      <ul className="mt-2 list-disc list-inside text-sm">
+                        {fieldUsage.usedInSegments.map(segment => (
+                          <li key={segment.id}>Segment: {segment.name}</li>
+                        ))}
+                      </ul>
+                    )}
+                    {fieldUsage.usedInCampaigns.length > 0 && (
+                      <ul className="mt-2 list-disc list-inside text-sm">
+                        {fieldUsage.usedInCampaigns.map(campaign => (
+                          <li key={campaign.id}>Campaign: {campaign.name}</li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                </Alert>
+              )}
+            </div>
+          )}
+
+          {selectedEvent && eventUsage && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <p className="text-sm">
+                  <strong>Total events:</strong> {eventUsage.totalCount}
+                </p>
+                <p className="text-sm">
+                  <strong>Unique contacts:</strong> {eventUsage.uniqueContacts}
+                </p>
+                <p className="text-sm">
+                  <strong>Used in segments:</strong> {eventUsage.usedInSegments.length}
+                </p>
+                <p className="text-sm">
+                  <strong>Used in workflows:</strong> {eventUsage.usedInWorkflows.length}
+                </p>
+              </div>
+
+              {!eventUsage.canDelete && (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <div className="ml-2">
+                    <p className="text-sm font-medium">Cannot delete this event</p>
+                    <p className="text-sm">
+                      This event is currently used in:
+                    </p>
+                    {eventUsage.usedInSegments.length > 0 && (
+                      <ul className="mt-2 list-disc list-inside text-sm">
+                        {eventUsage.usedInSegments.map(segment => (
+                          <li key={segment.id}>Segment: {segment.name}</li>
+                        ))}
+                      </ul>
+                    )}
+                    {eventUsage.usedInWorkflows.length > 0 && (
+                      <ul className="mt-2 list-disc list-inside text-sm">
+                        {eventUsage.usedInWorkflows.map(workflow => (
+                          <li key={workflow.id}>Workflow: {workflow.name}</li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                </Alert>
+              )}
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setSelectedField(null);
+                setSelectedEvent(null);
+              }}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={selectedField ? handleDeleteField : handleDeleteEvent}
+              disabled={
+                isDeleting ||
+                (!!selectedField && !fieldUsage?.canDelete) ||
+                (!!selectedEvent && !eventUsage?.canDelete)
+              }
+            >
+              {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
@@ -32,7 +32,7 @@ import {
 } from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
 import {NextSeo} from 'next-seo';
-import {AlertTriangle, CreditCard, Globe, Mail, Settings as SettingsIcon} from 'lucide-react';
+import {AlertTriangle, CreditCard, Database, Globe, Mail, Settings as SettingsIcon} from 'lucide-react';
 import type {z} from 'zod';
 import {useRouter} from 'next/router';
 import {DashboardLayout} from '../../components/DashboardLayout';
@@ -43,12 +43,13 @@ import {BillingInvoices} from '../../components/BillingInvoices';
 import {UnpaidInvoiceBanner} from '../../components/UnpaidInvoiceBanner';
 import {ApiKeyDisplay} from '../../components/ApiKeyDisplay';
 import {SmtpSettings} from '../../components/SmtpSettings';
+import {DataManagementSettings} from '../../components/DataManagementSettings';
 import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
 import {network} from '../../lib/network';
 import {useProjects} from '../../lib/hooks/useProject';
 import {useConfig} from '../../lib/hooks/useConfig';

-type TabId = 'general' | 'billing' | 'domains' | 'smtp';
+type TabId = 'general' | 'billing' | 'domains' | 'smtp' | 'data';

 interface Tab {
  id: TabId;
@@ -64,6 +65,7 @@ const buildTabs = (options: {billingEnabled: boolean; smtpEnabled: boolean}): Ta
    {id: 'billing', label: 'Billing', icon: CreditCard, condition: billingEnabled},
    {id: 'domains', label: 'Domains', icon: Globe},
    {id: 'smtp', label: 'SMTP', icon: Mail, condition: smtpEnabled},
+    {id: 'data', label: 'Data', icon: Database},
  ];
  return allTabs.filter(tab => tab.condition !== false);
 };
@@ -513,6 +515,11 @@ export default function Settings() {
          <TabsContent value="smtp">
            <SmtpSettings smtpConfig={smtpConfig} />
          </TabsContent>
+
+          {/* Data Management Tab */}
+          <TabsContent value="data">
+            <DataManagementSettings />
+          </TabsContent>
        </Tabs>
      </div>