Fix/expenses

package.json

@@ -44,7 +44,7 @@
 		"clsx": "^2.1.1",
 		"date-fns": "^3.6.0",
 		"lucide-react": "^0.487.0",
-		"motion": "^12.6.3",
+		"motion": "^12.8.0",
 		"next-themes": "^0.4.6",
 		"react": "^18.3.1",
 		"react-day-picker": "^8.10.1",

src/components/LoadingScreen.tsx

@@ -0,0 +1,19 @@
+type LoadingScreenProps = {
+  resource?: string; // Customizable resource text (e.g., "Loading Groups", "Saving Expense")
+};
+
+export function LoadingScreen({ resource = "Loading" }: LoadingScreenProps) {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen w-full bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
+      {/* Subtle Dot Animation */}
+      <div className="flex space-x-2">
+        <div className="h-6 w-6 rounded-full bg-gradient-to-br from-[#4F32FF] to-[#ff4ecd] animate-bounce"></div>
+        <div className="h-6 w-6 rounded-full bg-gradient-to-br from-[#4F32FF] to-[#ff4ecd] animate-bounce delay-200"></div>
+        <div className="h-6 w-6 rounded-full bg-gradient-to-br from-[#4F32FF] to-[#ff4ecd] animate-bounce delay-400"></div>
+      </div>
+
+      {/* Resource Text */}
+      <p className="mt-4 text-xl font-medium">{resource}...</p>
+    </div>
+  );
+}

src/components/confirmation-dialog.tsx

@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { AlertTriangle } from "lucide-react";
+import { ReactNode } from "react";
+
+type ConfirmationDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: ReactNode;
+  onConfirm: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  destructive?: boolean;
+  loading: boolean;
+};
+
+export function ConfirmationDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  destructive = true,
+  loading = false,
+}: ConfirmationDialogProps & { isLoading?: boolean }) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            {destructive && (
+              <AlertTriangle className="h-5 w-5 text-destructive" />
+            )}
+            <DialogTitle>{title}</DialogTitle>
+          </div>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+            className="cursor-pointer"
+          >
+            {cancelText}
+          </Button>
+          <Button
+            variant={destructive ? "destructive" : "default"}
+            onClick={async () => {
+              await onConfirm();
+              onOpenChange(false);
+            }}
+            disabled={loading}
+            className="cursor-pointer"
+          >
+            {loading ? (
+              <div className="flex items-center gap-2">
+                <svg
+                  className="animate-spin h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                <span>Processing...</span>
+              </div>
+            ) : (
+              <span>{confirmText}</span>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}