From ef55b63a3b20bbb98fd56df3af73c0b188d4a169 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Wed, 29 Oct 2025 11:04:54 -0700
Subject: [PATCH] Fix admin layout and data refresh after update/delete

---
 src/app/(main)/admin/AdminLayout.tsx          | 15 +++++++++---
 .../(main)/admin/teams/AdminTeamsTable.tsx    | 24 +++++++++++--------
 .../admin/users/[userId]/UserEditForm.tsx     |  1 +
 .../(main)/teams/[teamId]/TeamDeleteForm.tsx  |  1 +
 .../[websiteId]/settings/WebsiteEditForm.tsx  |  1 +
 5 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/app/(main)/admin/AdminLayout.tsx b/src/app/(main)/admin/AdminLayout.tsx
index 8b138785..4c902d0f 100644
--- a/src/app/(main)/admin/AdminLayout.tsx
+++ b/src/app/(main)/admin/AdminLayout.tsx
@@ -46,8 +46,15 @@ export function AdminLayout({ children }: { children: ReactNode }) {
     ?.find(({ path }) => path && pathname.startsWith(path))?.id;
 
   return (
-    <Grid columns="auto 1fr" width="100%" height="100%">
-      <Column height="100%" border="right" backgroundColor>
+    <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
+      <Column
+        display={{ xs: 'none', lg: 'flex' }}
+        width="240px"
+        height="100%"
+        border="right"
+        backgroundColor
+        marginRight="2"
+      >
         <SideMenu
           items={items}
           title={formatMessage(labels.admin)}
@@ -55,7 +62,9 @@ export function AdminLayout({ children }: { children: ReactNode }) {
           allowMinimize={false}
         />
       </Column>
-      <PageBody>{children}</PageBody>
+      <Column gap="6" margin="2">
+        <PageBody>{children}</PageBody>
+      </Column>
     </Grid>
   );
 }
diff --git a/src/app/(main)/admin/teams/AdminTeamsTable.tsx b/src/app/(main)/admin/teams/AdminTeamsTable.tsx
index d7c99a26..e5453258 100644
--- a/src/app/(main)/admin/teams/AdminTeamsTable.tsx
+++ b/src/app/(main)/admin/teams/AdminTeamsTable.tsx
@@ -1,11 +1,11 @@
-import { useState } from 'react';
-import { Row, Text, Icon, DataTable, DataColumn, MenuItem, Modal } from '@umami/react-zen';
-import Link from 'next/link';
-import { Trash } from '@/components/icons';
-import { useMessages } from '@/components/hooks';
-import { Edit } from '@/components/icons';
-import { MenuButton } from '@/components/input/MenuButton';
 import { DateDistance } from '@/components/common/DateDistance';
+import { useMessages } from '@/components/hooks';
+import { Edit, Trash } from '@/components/icons';
+import { MenuButton } from '@/components/input/MenuButton';
+import { DataColumn, DataTable, Dialog, Icon, MenuItem, Modal, Row, Text } from '@umami/react-zen';
+import { TeamDeleteForm } from '../../teams/[teamId]/TeamDeleteForm';
+import Link from 'next/link';
+import { useState } from 'react';
 
 export function AdminTeamsTable({
   data = [],
@@ -15,7 +15,7 @@ export function AdminTeamsTable({
   showActions?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const [deleteUser, setDeleteUser] = useState(null);
+  const [deleteTeam, setDeleteTeam] = useState(null);
 
   return (
     <>
@@ -60,7 +60,7 @@ export function AdminTeamsTable({
                   </MenuItem>
                   <MenuItem
                     id="delete"
-                    onAction={() => setDeleteUser(row)}
+                    onAction={() => setDeleteTeam(id)}
                     data-test="link-button-delete"
                   >
                     <Row alignItems="center" gap>
@@ -76,7 +76,11 @@ export function AdminTeamsTable({
           </DataColumn>
         )}
       </DataTable>
-      <Modal isOpen={!!deleteUser}></Modal>
+      <Modal isOpen={!!deleteTeam}>
+        <Dialog style={{ width: 400 }}>
+          <TeamDeleteForm teamId={deleteTeam} onClose={() => setDeleteTeam(null)} />
+        </Dialog>
+      </Modal>
     </>
   );
 }
diff --git a/src/app/(main)/admin/users/[userId]/UserEditForm.tsx b/src/app/(main)/admin/users/[userId]/UserEditForm.tsx
index ac7875db..142adaa6 100644
--- a/src/app/(main)/admin/users/[userId]/UserEditForm.tsx
+++ b/src/app/(main)/admin/users/[userId]/UserEditForm.tsx
@@ -22,6 +22,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
     await mutateAsync(data, {
       onSuccess: async () => {
         toast(formatMessage(messages.saved));
+        touch('users');
         touch(`user:${user.id}`);
         onSave?.();
       },
diff --git a/src/app/(main)/teams/[teamId]/TeamDeleteForm.tsx b/src/app/(main)/teams/[teamId]/TeamDeleteForm.tsx
index cf1ce618..7adc9b34 100644
--- a/src/app/(main)/teams/[teamId]/TeamDeleteForm.tsx
+++ b/src/app/(main)/teams/[teamId]/TeamDeleteForm.tsx
@@ -19,6 +19,7 @@ export function TeamDeleteForm({
     await mutateAsync(null, {
       onSuccess: async () => {
         touch('teams');
+        touch(`teams:${teamId}`);
         onSave?.();
         onClose?.();
       },
diff --git a/src/app/(main)/websites/[websiteId]/settings/WebsiteEditForm.tsx b/src/app/(main)/websites/[websiteId]/settings/WebsiteEditForm.tsx
index 50598199..c7cb3d89 100644
--- a/src/app/(main)/websites/[websiteId]/settings/WebsiteEditForm.tsx
+++ b/src/app/(main)/websites/[websiteId]/settings/WebsiteEditForm.tsx
@@ -11,6 +11,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
     await mutateAsync(data, {
       onSuccess: async () => {
         toast(formatMessage(messages.saved));
+        touch('websites');
         touch(`website:${website.id}`);
         onSave?.();
       },