feat: add Check In/Out management with notification system and update locker service

src/components/Notification.jsx

@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import { Copy } from "lucide-react";
+import { motion } from "motion/react";
+import PropTypes from "prop-types";
+
+function Notification({ notification }) {
+return <motion.div
+    initial={{ y: 15, opacity: 0 }}
+    animate={{ y: 0, opacity: 1 }}
+    exit={{ y: 15, opacity: 0 }}
+    className={clsx(
+        "p-2 pl-8 mb-8 font-body text-lg border-2 rounded-3xl flex items-center gap-2",
+        notification.type === "error"
+            ? "bg-error-surface text-white border-error"
+            : notification.type === "success"
+            ? "bg-success text-white border-green-700"
+            : notification.type === "warning"
+            ? "bg-warning-surface text-white border-warning"
+            : ""
+    )}
+>
+    {notification.message.split(":").map((msg, index) => {
+        return index === 1 ? (
+            <span key={index} className="border-b border-dashed">
+                {msg}
+            </span>
+        ) : (
+            <span key={index}>{msg}</span>
+        );
+    })}
+    {notification.message.split(":")[1] && (
+        <Copy
+            cursor={"pointer"}
+            size={15}
+            onClick={navigator.clipboard.writeText(
+                notification.message.split(":")[1].trim()
+            )}
+        />
+    )}
+</motion.div>;
+}
+
+Notification.propTypes = {
+  notification: PropTypes.shape({
+    visible: PropTypes.bool,
+    message: PropTypes.string,
+    type: PropTypes.string,
+  }),
+};
+
+export default Notification;