Dialog Modal — Create ও Edit

const [dialogOpen, setDialogOpen] = useState(false);
const [editingProduct, setEditingProduct] = useState<Product | null>(null);

// create button
<Button onClick={() => {
  setEditingProduct(null);   // create mode
  setDialogOpen(true);
}}>
  <Plus className="size-4" /> নতুন Product
</Button>

// row-এর edit
const openEdit = (product: Product) => {
  setEditingProduct(product);  // edit mode
  setDialogOpen(true);
};

<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
  <DialogContent onPointerDownOutside={(e) => e.preventDefault()}>
    <DialogHeader>
      <DialogTitle>
        {editingProduct ? "সম্পাদনা" : "নতুন"} Product
      </DialogTitle>
      <DialogDescription>
        {editingProduct
          ? "তথ্য বদলে Save করুন"
          : "নতুন product-এর তথ্য দিন"}
      </DialogDescription>
    </DialogHeader>

    <ProductForm
      key={editingProduct?.id ?? "create"}
      defaultValues={editingProduct
        ? {
            name: editingProduct.name,
            description: editingProduct.description ?? "",
            price: editingProduct.price,
            category: editingProduct.category,
            stock: editingProduct.stock,
            status: editingProduct.status,
          }
        : undefined}
      isSubmitting={editingProduct
        ? updateProduct.isPending
        : createProduct.isPending}
      onSubmit={editingProduct
        ? (values) => {
            updateProduct.mutate(
              { id: editingProduct!.id, input: values },
              { onSuccess: () => setDialogOpen(false) },
            );
          }
        : (values) => {
            createProduct.mutate(values, {
              onSuccess: () => setDialogOpen(false),
            });
          }}
    />
  </DialogContent>
</Dialog>