diff --git a/apps/cs/src/app/providers/app-provider.tsx b/apps/cs/src/app/providers/app-provider.tsx
index cf477dcc0..caf3b98f7 100644
--- a/apps/cs/src/app/providers/app-provider.tsx
+++ b/apps/cs/src/app/providers/app-provider.tsx
@@ -3,13 +3,17 @@
import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
import { AuthWrapper } from "@/entities/auth";
import { QueryProvider, StoreProvider } from "@/shared/providers";
+import { AlertDialog } from "@/shared/ui/alert-dialog";
const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return (
- {children}
+
+ {children}
+
+
diff --git a/apps/cs/src/shared/lib/use-alert-store.ts b/apps/cs/src/shared/lib/use-alert-store.ts
new file mode 100644
index 000000000..c21a00ed3
--- /dev/null
+++ b/apps/cs/src/shared/lib/use-alert-store.ts
@@ -0,0 +1,14 @@
+import { useStore } from "zustand";
+import { useContext } from "react";
+import type { AlertStore } from "../store/alert-store";
+import { StoreContext } from "../providers/store-provider";
+
+export const useAlertStore = (selector: (store: AlertStore) => T): T => {
+ const storeContext = useContext(StoreContext);
+
+ if (!storeContext) {
+ throw new Error("useAlertStore must be used within StoreProvider");
+ }
+
+ return useStore(storeContext.alertStore, selector);
+};
diff --git a/apps/cs/src/shared/lib/use-user-store.ts b/apps/cs/src/shared/lib/use-user-store.ts
index f4bf9763a..748caed4c 100644
--- a/apps/cs/src/shared/lib/use-user-store.ts
+++ b/apps/cs/src/shared/lib/use-user-store.ts
@@ -1,6 +1,6 @@
import { useStore } from "zustand";
import { useContext } from "react";
-import { type UserStore } from "@/shared/store/user-store";
+import type { UserStore } from "../store/user-store";
import { StoreContext } from "../providers/store-provider";
export const useUserStore = (selector: (store: UserStore) => T): T => {
diff --git a/apps/cs/src/shared/providers/store-provider.tsx b/apps/cs/src/shared/providers/store-provider.tsx
index ec913f235..4814705ab 100644
--- a/apps/cs/src/shared/providers/store-provider.tsx
+++ b/apps/cs/src/shared/providers/store-provider.tsx
@@ -1,9 +1,11 @@
"use client";
import { createContext, useRef } from "react";
-import { createUserStore } from "@/shared/store/user-store";
+import { createAlertStore } from "../store/alert-store";
+import { createUserStore } from "../store/user-store";
type StoreContextType = {
+ alertStore: ReturnType;
userStore: ReturnType;
};
@@ -15,6 +17,7 @@ export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
const storeRef = useRef(null);
if (storeRef.current === null) {
storeRef.current = {
+ alertStore: createAlertStore(),
userStore: createUserStore(),
};
}
diff --git a/apps/cs/src/shared/store/alert-store.ts b/apps/cs/src/shared/store/alert-store.ts
new file mode 100644
index 000000000..a6e22d441
--- /dev/null
+++ b/apps/cs/src/shared/store/alert-store.ts
@@ -0,0 +1,22 @@
+import { createStore } from "zustand/vanilla";
+
+export type AlertState = {
+ alertMessage: string;
+};
+
+export type AlertActions = {
+ setAlertMessage: (message: string) => void;
+};
+
+export type AlertStore = AlertState & AlertActions;
+
+export const defaultInitState: AlertState = {
+ alertMessage: "",
+};
+
+export const createAlertStore = (initState: AlertState = defaultInitState) => {
+ return createStore()((set) => ({
+ ...initState,
+ setAlertMessage: (alertMessage: string) => set(() => ({ alertMessage })),
+ }));
+};
diff --git a/apps/cs/src/shared/ui/alert-dialog.tsx b/apps/cs/src/shared/ui/alert-dialog.tsx
new file mode 100644
index 000000000..68805ce2f
--- /dev/null
+++ b/apps/cs/src/shared/ui/alert-dialog.tsx
@@ -0,0 +1,28 @@
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogClose,
+ Button,
+} from "@common/components/ui";
+import { useAlertStore } from "../lib/use-alert-store";
+
+function AlertDialog() {
+ const { alertMessage, setAlertMessage } = useAlertStore((state) => state);
+ return (
+
+ );
+}
+
+export { AlertDialog };
diff --git a/apps/cs/src/shared/ui/confirm-dialog.tsx b/apps/cs/src/shared/ui/confirm-dialog.tsx
new file mode 100644
index 000000000..3e1e90f9d
--- /dev/null
+++ b/apps/cs/src/shared/ui/confirm-dialog.tsx
@@ -0,0 +1,46 @@
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogClose,
+ Button,
+ type ButtonProps,
+} from "@common/components/ui";
+
+type ConfirmDialogProps = {
+ open: boolean;
+ confirmButtonProps?: ButtonProps & { label?: string };
+ cancelButtonProps?: ButtonProps & { label?: string };
+};
+
+function ConfirmDialog({
+ open,
+ confirmButtonProps,
+ cancelButtonProps,
+}: ConfirmDialogProps) {
+ const { message, onConfirm, onCancel } = useConfirm();
+ return (
+
+ );
+}
+
+export { ConfirmDialog };