From 6d1c3e1a12be1b0f839c878a38c1b20dc1ef9c09 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Wed, 13 May 2026 17:05:56 +0530
Subject: [PATCH 1/2] fix(admin): lift Drawer open state to parent so mount
 animation fires

---
 .../organizations/details/edit/billing.tsx    |  5 ++--
 .../views/organizations/details/edit/kyc.tsx  |  5 ++--
 .../details/edit/organization.tsx             |  4 ++--
 .../organizations/details/layout/index.tsx    | 10 +++-----
 .../admin/views/organizations/list/create.tsx |  4 +++-
 .../admin/views/organizations/list/index.tsx  | 23 +++++++++----------
 web/sdk/admin/views/products/details.tsx      | 12 +++++++---
 web/sdk/admin/views/products/index.tsx        | 13 +++++------
 .../views/webhooks/webhooks/create/index.tsx  |  5 ++--
 .../admin/views/webhooks/webhooks/index.tsx   | 13 +++++------
 .../views/webhooks/webhooks/update/index.tsx  |  5 ++--
 11 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/web/sdk/admin/views/organizations/details/edit/billing.tsx b/web/sdk/admin/views/organizations/details/edit/billing.tsx
index 24bf5d16f..34decae5e 100644
--- a/web/sdk/admin/views/organizations/details/edit/billing.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/billing.tsx
@@ -26,6 +26,7 @@ import {
 import { create } from "@bufbuild/protobuf";
 
 interface EditBillingPanelProps {
+  open?: boolean;
   onClose: () => void;
 }
 
@@ -70,7 +71,7 @@ const billingDetailsUpdateSchema = z
 
 type BillingDetailsForm = z.infer<typeof billingDetailsUpdateSchema>;
 
-export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
+export function EditBillingPanel({ open = false, onClose }: EditBillingPanelProps) {
   const { 
     billingAccount,
     billingAccountDetails,
@@ -174,7 +175,7 @@ export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
   const isPrepaid = tokenPaymentType === "prepaid";
 
   return (
-    <Drawer open>
+    <Drawer open={open}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-billing-panel"
diff --git a/web/sdk/admin/views/organizations/details/edit/kyc.tsx b/web/sdk/admin/views/organizations/details/edit/kyc.tsx
index df9719167..424d13983 100644
--- a/web/sdk/admin/views/organizations/details/edit/kyc.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/kyc.tsx
@@ -24,6 +24,7 @@ import { AdminServiceQueries, FrontierServiceQueries, SetOrganizationKycRequestS
 import { create } from "@bufbuild/protobuf";
 
 interface EditKYCPanelProps {
+  open?: boolean;
   onClose: () => void;
 }
 
@@ -44,7 +45,7 @@ const kycUpdateSchema = z
 
 type KYCUpdateSchema = z.infer<typeof kycUpdateSchema>;
 
-export function EditKYCPanel({ onClose }: EditKYCPanelProps) {
+export function EditKYCPanel({ open = false, onClose }: EditKYCPanelProps) {
   const { organization, kycDetails, updateKYCDetails } = useContext(OrganizationContext);
   const queryClient = useQueryClient();
   const transport = useTransport();
@@ -104,7 +105,7 @@ export function EditKYCPanel({ onClose }: EditKYCPanelProps) {
   }
 
   return (
-    <Drawer open>
+    <Drawer open={open}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-kyc-panel"
diff --git a/web/sdk/admin/views/organizations/details/edit/organization.tsx b/web/sdk/admin/views/organizations/details/edit/organization.tsx
index c6c035581..1bafd2b03 100644
--- a/web/sdk/admin/views/organizations/details/edit/organization.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/organization.tsx
@@ -78,7 +78,7 @@ function getDefaultValue(organization: Organization, industries: string[]) {
   };
 }
 
-export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
+export function EditOrganizationPanel({ open = false, onClose }: { open?: boolean; onClose: () => void }) {
   const t = useTerminology();
   const { organization, appUrl, countries: countriesFromContext = [], organizationTypes: industries = [] } = useContext(OrganizationContext);
   const [countries, setCountries] = useState<string[]>(countriesFromContext);
@@ -160,7 +160,7 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
   const showOtherTypeField = watch("type", "other") === "other";
 
   return (
-    <Drawer open>
+    <Drawer open={open}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-org-panel"
diff --git a/web/sdk/admin/views/organizations/details/layout/index.tsx b/web/sdk/admin/views/organizations/details/layout/index.tsx
index f7e64ef2a..8e074435c 100644
--- a/web/sdk/admin/views/organizations/details/layout/index.tsx
+++ b/web/sdk/admin/views/organizations/details/layout/index.tsx
@@ -97,14 +97,10 @@ export const OrganizationDetailsLayout = ({
         >
           {children}
         </Flex>
-        {showKYCPanel ? <EditKYCPanel onClose={closeKYCPanel} /> : null}
+        <EditKYCPanel open={showKYCPanel} onClose={closeKYCPanel} />
         {showSidePanel ? <OrgSidePanel organization={organization} /> : null}
-        {showEditOrgPanel ? (
-          <EditOrganizationPanel onClose={closeEditOrgPanel} />
-        ) : null}
-        {showEditBillingPanel ? (
-          <EditBillingPanel onClose={closeEditBillingPanel} />
-        ) : null}
+        <EditOrganizationPanel open={showEditOrgPanel} onClose={closeEditOrgPanel} />
+        <EditBillingPanel open={showEditBillingPanel} onClose={closeEditBillingPanel} />
       </Flex>
     </Flex>
   ) : (
diff --git a/web/sdk/admin/views/organizations/list/create.tsx b/web/sdk/admin/views/organizations/list/create.tsx
index 11ffa851e..a6d4b2af1 100644
--- a/web/sdk/admin/views/organizations/list/create.tsx
+++ b/web/sdk/admin/views/organizations/list/create.tsx
@@ -46,6 +46,7 @@ type OrgCreateSchema = z.infer<typeof orgCreateSchema>;
 const otherTypePrefix = "Other - ";
 
 export type CreateOrganizationPanelProps = {
+  open?: boolean;
   onClose: () => void;
   organizationTypes?: string[];
   appUrl?: string;
@@ -54,6 +55,7 @@ export type CreateOrganizationPanelProps = {
 };
 
 export function CreateOrganizationPanel({
+  open = false,
   onClose,
   organizationTypes = [],
   appUrl = "",
@@ -127,7 +129,7 @@ export function CreateOrganizationPanel({
   const showOtherTypeField = watch("type", "other") === "other";
 
   return (
-    <Drawer open>
+    <Drawer open={open}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-org-panel"
diff --git a/web/sdk/admin/views/organizations/list/index.tsx b/web/sdk/admin/views/organizations/list/index.tsx
index bd563e53f..5379a4b6d 100644
--- a/web/sdk/admin/views/organizations/list/index.tsx
+++ b/web/sdk/admin/views/organizations/list/index.tsx
@@ -185,18 +185,17 @@ export const OrganizationListView = ({
   }
   return (
     <>
-      {showCreatePanel ? (
-        <CreateOrganizationPanel
-          onClose={closeCreateOrgPanel}
-          organizationTypes={organizationTypes}
-          appUrl={appUrl}
-          countries={countries}
-          onSuccess={(id) => {
-            closeCreateOrgPanel();
-            onNavigateToOrg?.(id);
-          }}
-        />
-      ) : null}
+      <CreateOrganizationPanel
+        open={showCreatePanel}
+        onClose={closeCreateOrgPanel}
+        organizationTypes={organizationTypes}
+        appUrl={appUrl}
+        countries={countries}
+        onSuccess={(id) => {
+          closeCreateOrgPanel();
+          onNavigateToOrg?.(id);
+        }}
+      />
       <PageTitle title={t.organization({ plural: true, case: "capital" })} appName={appName} />
       <DataTable
         query={tableQuery}
diff --git a/web/sdk/admin/views/products/details.tsx b/web/sdk/admin/views/products/details.tsx
index a9d3df443..187f1a378 100644
--- a/web/sdk/admin/views/products/details.tsx
+++ b/web/sdk/admin/views/products/details.tsx
@@ -4,20 +4,26 @@ import styles from "./products.module.css";
 import { SheetHeader } from "../../components/SheetHeader";
 
 type ProductDetailsProps = {
-  product: Product;
+  product?: Product;
+  open?: boolean;
   onClose: () => void;
   onNavigateToPrices: (productId: string) => void;
 };
 
 export default function ProductDetails({
   product,
+  open = false,
   onClose,
   onNavigateToPrices,
 }: ProductDetailsProps) {
   return (
-    <Drawer open>
+    <Drawer open={open}>
       <Drawer.Content showCloseButton={false} className={styles.sheetContent}>
-        <SheetHeader title="Product Details" onClick={onClose} />
+        <SheetHeader
+          title="Product Details"
+          onClick={onClose}
+          data-test-id="frontier-admin-product-details-header"
+        />
         <Flex className={styles.sheetContentBody} direction="column" gap={9}>
           <Text size="regular">{product?.title}</Text>
           <Flex direction="column" gap={9}>
diff --git a/web/sdk/admin/views/products/index.tsx b/web/sdk/admin/views/products/index.tsx
index a2ee1bb1f..92e19ca2f 100644
--- a/web/sdk/admin/views/products/index.tsx
+++ b/web/sdk/admin/views/products/index.tsx
@@ -83,13 +83,12 @@ export default function ProductsView({
             emptyState={noDataChildren}
             classNames={{ root: styles.tableRoot }}
           />
-          {product && (
-            <ProductDetails
-              product={product}
-              onClose={onCloseDetail ?? (() => {})}
-              onNavigateToPrices={onNavigateToPrices ?? (() => {})}
-            />
-          )}
+          <ProductDetails
+            product={product ?? undefined}
+            open={!!product}
+            onClose={onCloseDetail ?? (() => {})}
+            onNavigateToPrices={onNavigateToPrices ?? (() => {})}
+          />
         </Flex>
       </DataTable>
     </>
diff --git a/web/sdk/admin/views/webhooks/webhooks/create/index.tsx b/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
index 0062ef87e..c04bf854c 100644
--- a/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
@@ -30,10 +30,11 @@ const NewWebookSchema = z.object({
 export type NewWebhook = z.infer<typeof NewWebookSchema>;
 
 export type CreateWebhooksProps = {
+  open?: boolean;
   onClose?: () => void;
 };
 
-export default function CreateWebhooks({ onClose: onCloseProp }: CreateWebhooksProps = {}) {
+export default function CreateWebhooks({ open = false, onClose: onCloseProp }: CreateWebhooksProps = {}) {
   const { invalidateWebhooksList } = useWebhookQueries();
 
   const onOpenChange = useCallback(() => {
@@ -73,7 +74,7 @@ export default function CreateWebhooks({ onClose: onCloseProp }: CreateWebhooksP
   };
 
   return (
-    <Drawer open={true}>
+    <Drawer open={open}>
       <Drawer.Content
         side="right"
         // @ts-ignore
diff --git a/web/sdk/admin/views/webhooks/webhooks/index.tsx b/web/sdk/admin/views/webhooks/webhooks/index.tsx
index 6ea92337d..463d55c63 100644
--- a/web/sdk/admin/views/webhooks/webhooks/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/index.tsx
@@ -86,13 +86,12 @@ export default function WebhooksView({
           />
         </Flex>
       </DataTable>
-      {createOpen && <CreateWebhooks onClose={onCloseDetail} />}
-      {selectedWebhookId && (
-        <UpdateWebhooks
-          webhookId={selectedWebhookId}
-          onClose={onCloseDetail}
-        />
-      )}
+      <CreateWebhooks open={createOpen} onClose={onCloseDetail} />
+      <UpdateWebhooks
+        open={!!selectedWebhookId}
+        webhookId={selectedWebhookId}
+        onClose={onCloseDetail}
+      />
     </>
   );
 }
diff --git a/web/sdk/admin/views/webhooks/webhooks/update/index.tsx b/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
index 5cdecd122..41bcebeaa 100644
--- a/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
@@ -30,11 +30,12 @@ const UpdateWebhookSchema = z.object({
 export type UpdateWebhook = z.infer<typeof UpdateWebhookSchema>;
 
 export type UpdateWebhooksProps = {
+  open?: boolean;
   webhookId?: string;
   onClose?: () => void;
 };
 
-export default function UpdateWebhooks({ webhookId: webhookIdProp, onClose: onCloseProp }: UpdateWebhooksProps = {}) {
+export default function UpdateWebhooks({ open = false, webhookId: webhookIdProp, onClose: onCloseProp }: UpdateWebhooksProps = {}) {
   const webhookId = webhookIdProp ?? "";
 
   const {
@@ -100,7 +101,7 @@ export default function UpdateWebhooks({ webhookId: webhookIdProp, onClose: onCl
   }, [webhook, methods.reset]);
 
   return (
-    <Drawer open={true}>
+    <Drawer open={open}>
       <Drawer.Content
         side="right"
         // @ts-ignore

From cc4d4e1728bd37f9ab0a94d15fae64e309aee0ac Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Fri, 15 May 2026 16:28:51 +0530
Subject: [PATCH 2/2] fix(admin): update Drawer component to handle open state
 change for better close behavior

---
 web/sdk/admin/views/organizations/details/edit/billing.tsx      | 2 +-
 web/sdk/admin/views/organizations/details/edit/kyc.tsx          | 2 +-
 web/sdk/admin/views/organizations/details/edit/organization.tsx | 2 +-
 web/sdk/admin/views/organizations/list/create.tsx               | 2 +-
 web/sdk/admin/views/products/details.tsx                        | 2 +-
 web/sdk/admin/views/webhooks/webhooks/create/index.tsx          | 2 +-
 web/sdk/admin/views/webhooks/webhooks/update/index.tsx          | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/sdk/admin/views/organizations/details/edit/billing.tsx b/web/sdk/admin/views/organizations/details/edit/billing.tsx
index 34decae5e..fa477fa63 100644
--- a/web/sdk/admin/views/organizations/details/edit/billing.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/billing.tsx
@@ -175,7 +175,7 @@ export function EditBillingPanel({ open = false, onClose }: EditBillingPanelProp
   const isPrepaid = tokenPaymentType === "prepaid";
 
   return (
-    <Drawer open={open}>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-billing-panel"
diff --git a/web/sdk/admin/views/organizations/details/edit/kyc.tsx b/web/sdk/admin/views/organizations/details/edit/kyc.tsx
index 424d13983..144d3ec5f 100644
--- a/web/sdk/admin/views/organizations/details/edit/kyc.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/kyc.tsx
@@ -105,7 +105,7 @@ export function EditKYCPanel({ open = false, onClose }: EditKYCPanelProps) {
   }
 
   return (
-    <Drawer open={open}>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-kyc-panel"
diff --git a/web/sdk/admin/views/organizations/details/edit/organization.tsx b/web/sdk/admin/views/organizations/details/edit/organization.tsx
index 1bafd2b03..7ba48e1a0 100644
--- a/web/sdk/admin/views/organizations/details/edit/organization.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/organization.tsx
@@ -160,7 +160,7 @@ export function EditOrganizationPanel({ open = false, onClose }: { open?: boolea
   const showOtherTypeField = watch("type", "other") === "other";
 
   return (
-    <Drawer open={open}>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-org-panel"
diff --git a/web/sdk/admin/views/organizations/list/create.tsx b/web/sdk/admin/views/organizations/list/create.tsx
index a6d4b2af1..21721df5c 100644
--- a/web/sdk/admin/views/organizations/list/create.tsx
+++ b/web/sdk/admin/views/organizations/list/create.tsx
@@ -129,7 +129,7 @@ export function CreateOrganizationPanel({
   const showOtherTypeField = watch("type", "other") === "other";
 
   return (
-    <Drawer open={open}>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-org-panel"
diff --git a/web/sdk/admin/views/products/details.tsx b/web/sdk/admin/views/products/details.tsx
index 187f1a378..d9e8f398b 100644
--- a/web/sdk/admin/views/products/details.tsx
+++ b/web/sdk/admin/views/products/details.tsx
@@ -17,7 +17,7 @@ export default function ProductDetails({
   onNavigateToPrices,
 }: ProductDetailsProps) {
   return (
-    <Drawer open={open}>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles.sheetContent}>
         <SheetHeader
           title="Product Details"
diff --git a/web/sdk/admin/views/webhooks/webhooks/create/index.tsx b/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
index c04bf854c..3127492dd 100644
--- a/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
@@ -74,7 +74,7 @@ export default function CreateWebhooks({ open = false, onClose: onCloseProp }: C
   };
 
   return (
-    <Drawer open={open}>
+    <Drawer open={open} onOpenChange={(open) => !open && onCloseProp?.()}>
       <Drawer.Content
         side="right"
         // @ts-ignore
diff --git a/web/sdk/admin/views/webhooks/webhooks/update/index.tsx b/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
index 41bcebeaa..0fa6d16f1 100644
--- a/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
@@ -101,7 +101,7 @@ export default function UpdateWebhooks({ open = false, webhookId: webhookIdProp,
   }, [webhook, methods.reset]);
 
   return (
-    <Drawer open={open}>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content
         side="right"
         // @ts-ignore