feat: api services updated modal

web/src/feature/ApiServiceUpdatedModal/index.tsx

@@ -0,0 +1,44 @@
+import { createPortal } from "react-dom";
+import { Button } from "@/components/ui/button";
+import { CircleCheckBig, X } from "lucide-react";
+import { useAdmin } from "@/store/admin";
+
+const ApiServiceUpdatedModal = () => {
+  const resetUpdated = useAdmin((state) => state.resetUpdatedApiService);
+
+  const portalRoot = document.getElementById("portal-root");
+  if (!portalRoot) return null;
+
+  return createPortal(
+    <div className="fixed z-50 inset-0 flex items-center justify-center bg-black/30 dark:bg-white/30 px-5">
+      <div className="rounded-2xl flex flex-col items-stretch bg-white dark:bg-black min-w-[300px] max-w-md w-full">
+        <div className="flex flex-row items-center justify-between p-4 border-b dark:border-gray-800 border-gray-300">
+          <p className="text-gray-800 dark:text-gray-200">Service Updated</p>
+          <Button variant="icon" onClick={resetUpdated}>
+            <X />
+          </Button>
+        </div>
+        <div className="p-4">
+          <div className="mb-4 flex flex-col items-center p-4 text-green-400 gap-3">
+            <CircleCheckBig size={64} />
+            <h2 className="text-gray-800 dark:text-gray-200 text-xl">
+              Service has updated successfully!
+            </h2>
+          </div>
+          <div className="mt-4 w-full">
+            <Button
+              variant="outlined"
+              className="w-full"
+              onClick={resetUpdated}
+            >
+              Close
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    portalRoot,
+  );
+};
+
+export default ApiServiceUpdatedModal;