improvement: toast component created and used every where in the app.

frontend/src/components/ui/common/Toast.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { BadgeVariant } from '@/components/ui/common/Badge';
+
+interface ToastProps {
+  children: ReactNode;
+  variant?: BadgeVariant;
+  className?: string;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  success: 'bg-badge-success-bg text-badge-success-fg border-badge-success-border',
+  warning: 'bg-badge-warning-bg text-badge-warning-fg border-badge-warning-border',
+  danger: 'bg-badge-danger-bg text-badge-danger-fg border-badge-danger-border',
+  default: 'bg-badge-default-bg text-badge-default-fg border-badge-default-border',
+};
+
+export function Toast({ children, variant = 'default', className = '' }: ToastProps) {
+  return (
+    <div
+      role="status"
+      className={`w-full rounded-[var(--radius-md)] border px-4 py-3 text-sm shadow-lg ${variantStyles[variant]} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}

frontend/src/components/ui/treatment/TreatmentWorkspace.tsx

@@ -8,6 +8,7 @@ import { Checkbox } from '@/components/ui/common/Checkbox';
 import { Button } from '@/components/ui/common/Button';
 import { Dropdown } from '@/components/ui/common/Dropdown';
 import { SearchBar } from '@/components/ui/common/SearchBar';
+import { Toast } from '@/components/ui/common/Toast';
 import { isSameLocalCalendarDay, startOfLocalDay } from '@/lib/appointmentTime';
 import {
   fetchLinkedOrganizations,
@@ -325,7 +326,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   }
 
   return (
-    <div className="space-y-6">
+    <div className="relative space-y-6 pb-24">
       <header className="space-y-1">
         <h1 className="text-2xl font-semibold text-text-primary">Treatment</h1>
         <p className="text-sm text-text-secondary">
@@ -345,12 +346,6 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
         loading={apptsLoading}
       />
 
-      {banner && (
-        <div className="rounded-[var(--radius-md)] border border-primary/40 bg-primary-soft px-4 py-2 text-sm text-text-primary">
-          {banner}
-        </div>
-      )}
-
       <div className="grid grid-cols-1 xl:grid-cols-[minmax(280px,380px)_minmax(0,1fr)] gap-6 items-start">
         <div className="space-y-4">
           {selectedAppointment ? (
@@ -651,6 +646,14 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
           </div>
         </div>
       </div>
+
+      {banner && (
+        <div className="fixed bottom-4 left-0 right-0 z-[70] px-4 pointer-events-none">
+          <div className="pointer-events-auto w-full">
+            <Toast variant="success">{banner}</Toast>
+          </div>
+        </div>
+      )}
     </div>
   );
 }