Improve the frontend 3

frontend/src/components/ui/Slider/Slider.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  step?: number;
+ value: number[];
+  onValueChange: (value: number[]) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+const Slider: React.FC<SliderProps> = ({
+  min,
+  max,
+  step = 1,
+  value,
+  onValueChange,
+  disabled = false,
+  className = '',
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(e.target.value);
+    onValueChange([newValue]);
+  };
+
+  return (
+    <div className={`flex items-center space-x-4 ${className}`}>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value[0]}
+        onChange={handleChange}
+        disabled={disabled}
+        className="w-full h-2 bg-[var(--bg-secondary)] rounded-lg appearance-none cursor-pointer accent-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed"
+      />
+      <span className="text-sm text-[var(--text-secondary)] min-w-12">
+        {(value[0] * 100).toFixed(0)}%
+      </span>
+    </div>
+  );
+};
+
+export default Slider;

frontend/src/components/ui/Slider/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Slider';
+export { default as Slider } from './Slider';
+export type { SliderProps } from './Slider';

frontend/src/components/ui/TenantSwitcher.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 import { useTenant } from '../../stores/tenant.store';
-import { useToast } from '../../hooks/ui/useToast';
+import { showToast } from '../../utils/toast';
 import { ChevronDown, Building2, Check, AlertCircle, Plus, X } from 'lucide-react';
 
 interface TenantSwitcherProps {
@@ -36,7 +36,7 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
     clearError,
   } = useTenant();
 
-  const { success: showSuccessToast, error: showErrorToast } = useToast();
+  
 
   // Load tenants on mount
   useEffect(() => {
@@ -150,11 +150,11 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
 
     if (success) {
       const newTenant = availableTenants?.find(t => t.id === tenantId);
-      showSuccessToast(`Switched to ${newTenant?.name}`, {
+      showToast.success(`Switched to ${newTenant?.name}`, {
         title: 'Tenant Switched'
       });
     } else {
-      showErrorToast(error || 'Failed to switch tenant', {
+      showToast.error(error || 'Failed to switch tenant', {
         title: 'Switch Failed'
       });
     }