Complete Settings page and fix TypeScript issues

- Create comprehensive SettingsPage with General, Storage, and Security tabs
- Add formatBytes method to settings service
- Update AdminSidebar to show real storage usage from backend
- Fix TypeScript errors with react-query v5 (isPending instead of isLoading)
- Remove unused imports and fix type imports
- Add Settings route to App.tsx
- Implement real-time storage monitoring in sidebar

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/admin/AdminSidebar.tsx

@@ -11,6 +11,8 @@ import {
   X,
   Palette
 } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { settingsService } from '../../services/settings.service';
 
 interface AdminSidebarProps {
   isOpen: boolean;
@@ -84,22 +86,51 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =
         </nav>
 
         {/* Storage Info */}
-        <div className="p-4 border-t border-neutral-200">
-          <div className="bg-neutral-100 rounded-lg p-3">
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-neutral-700">Storage Used</span>
-              <span className="font-medium text-neutral-900">2.4 GB</span>
-            </div>
-            <div className="mt-2 w-full bg-neutral-200 rounded-full h-2">
-              <div 
-                className="bg-primary-600 h-2 rounded-full transition-all duration-300"
-                style={{ width: '24%' }}
-              />
-            </div>
-            <p className="text-xs text-neutral-600 mt-1">24% of 10 GB</p>
-          </div>
+        <StorageInfo />
         </div>
       </div>
     </div>
   );
+};
+
+const StorageInfo: React.FC = () => {
+  const { data: storageInfo } = useQuery({
+    queryKey: ['storage-info'],
+    queryFn: () => settingsService.getStorageInfo(),
+    refetchInterval: 60000 // Refresh every minute
+  });
+
+  if (!storageInfo) {
+    return (
+      <div className="p-4 border-t border-neutral-200">
+        <div className="bg-neutral-100 rounded-lg p-3">
+          <div className="h-12 animate-pulse bg-neutral-200 rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  const usagePercent = Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100);
+
+  return (
+    <div className="p-4 border-t border-neutral-200">
+      <div className="bg-neutral-100 rounded-lg p-3">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-neutral-700">Storage Used</span>
+          <span className="font-medium text-neutral-900">
+            {settingsService.formatBytes(storageInfo.total_used)}
+          </span>
+        </div>
+        <div className="mt-2 w-full bg-neutral-200 rounded-full h-2">
+          <div 
+            className="bg-primary-600 h-2 rounded-full transition-all duration-300"
+            style={{ width: `${Math.min(usagePercent, 100)}%` }}
+          />
+        </div>
+        <p className="text-xs text-neutral-600 mt-1">
+          {usagePercent}% of {settingsService.formatBytes(storageInfo.storage_limit)}
+        </p>
+      </div>
+    </div>
+  );
 };