wip 8

frontend/src/components/Toast.tsx

@@ -68,7 +68,11 @@ export function Toast({ id, type, message, duration = 5000, onClose }: ToastProp
 
   return (
     <div
-      className={`${baseStyles} ${typeStyles[type]} ${isAnimatingOut ? 'opacity-0 translate-x-full' : 'opacity-100 translate-x-0'}`}
+      className={`${baseStyles} ${typeStyles[type]} ${
+        isAnimatingOut 
+          ? 'opacity-0 translate-x-full' 
+          : 'animate-slideInRight opacity-100'
+      }`}
     >
       {icons[type]}
       <p className={`flex-1 text-sm font-medium ${textStyles[type]}`}>

frontend/src/components/ToastContext.tsx

@@ -59,7 +59,7 @@ function ToastContainer({ toasts }: ToastContainerProps) {
   }
 
   return (
-    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
       <div className="pointer-events-auto">
         {toasts.map((toast) => (
           <Toast key={toast.id} {...toast} />

frontend/src/index.css

@@ -129,4 +129,20 @@ main {
     rgb(75, 85, 99) 100%
   );
   background-size: 200% 100%;
+}
+
+/* Toast Slide In Animation */
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slideInRight {
+  animation: slideInRight 0.3s ease-out forwards;
 }

frontend/src/pages/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, FormEvent } from 'react';
+import { useState, useEffect, FormEvent } from 'react';
 import { useGetSettings, useUpdateSettings } from '../generated/anthoLumeAPIV1';
 import { User, Lock, Clock } from 'lucide-react';
 import { Button } from '../components/Button';
@@ -7,12 +7,18 @@ import { useToasts } from '../components/ToastContext';
 export default function SettingsPage() {
   const { data, isLoading } = useGetSettings();
   const updateSettings = useUpdateSettings();
-  const settingsData = data?.data;
+  const settingsData = data;
   const { showInfo, showError } = useToasts();
 
   const [password, setPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
-  const [timezone, setTimezone] = useState(settingsData?.timezone || '');
+  const [timezone, setTimezone] = useState('UTC');
+
+  useEffect(() => {
+    if (settingsData?.data.timezone && settingsData.data.timezone.trim() !== '') {
+      setTimezone(settingsData.data.timezone);
+    }
+  }, [settingsData]);
 
   const handlePasswordSubmit = async (e: FormEvent) => {
     e.preventDefault();
@@ -99,7 +105,7 @@ export default function SettingsPage() {
           className="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
         >
           <User size={60} />
-          <p className="text-lg">{settingsData?.user?.username}</p>
+          <p className="text-lg">{settingsData?.data.user.username || "N/A"}</p>
         </div>
       </div>
 
@@ -167,7 +173,7 @@ export default function SettingsPage() {
                 <Clock size={15} />
               </span>
               <select
-                value={timezone}
+                value={timezone || 'UTC'}
                 onChange={(e) => setTimezone(e.target.value)}
                 className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
               >
@@ -215,12 +221,12 @@ export default function SettingsPage() {
               </tr>
             </thead>
             <tbody className="text-black dark:text-white">
-              {!settingsData?.devices || settingsData.devices.length === 0 ? (
+              {!settingsData?.data.devices || settingsData.data.devices.length === 0 ? (
                 <tr>
                   <td className="text-center p-3" colSpan={3}>No Results</td>
                 </tr>
               ) : (
-                settingsData.devices.map((device: any) => (
+                settingsData.data.devices.map((device: any) => (
                   <tr key={device.id}>
                     <td className="p-3 pl-0">
                       <p>{device.device_name || 'Unknown'}</p>
@@ -240,4 +246,4 @@ export default function SettingsPage() {
       </div>
     </div>
   );
-}
+}