feat: Complete Smart Resume Formatter with R2 and Gemini AI integration

- Integrated Cloudflare R2 for template storage and converted file management
- Added Google Gemini AI for resume parsing and HTML generation
- Created backend API endpoints for templates, conversion, and history
- Refactored frontend to use real API instead of mock data
- Fixed Docker networking issues (IPv6/IPv4) for R2 connectivity
- Added resumeService.ts for frontend API integration
- Updated Vite configuration for proper asset serving in Docker
- Successfully tested with 13 templates from R2 bucket

frontend/components/FolderSection.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useMemo } from 'react';
+import { Folder, ChevronDown, FileText, Receipt } from 'lucide-react';
+import { FolderData } from '../types';
+import FileItem from './FileItem';
+
+interface FolderSectionProps {
+  folder: FolderData;
+  searchTerm: string;
+  onPreview: (url: string) => void;
+}
+
+const FolderSection: React.FC<FolderSectionProps> = ({ folder, searchTerm, onPreview }) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  // Memoize sorted and filtered files for performance
+  const sortedAndFilteredFiles = useMemo(() => {
+    // 1. Sort by lastModified date (newest first)
+    const sorted = [...folder.files].sort((a, b) => 
+      new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
+    );
+
+    // 2. Filter by search term if it exists
+    if (!searchTerm) return sorted;
+    return sorted.filter(file =>
+      file.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [folder.files, searchTerm]);
+  
+  // Hide folder section if search term exists and no files match
+  if (searchTerm && sortedAndFilteredFiles.length === 0) {
+    return null;
+  }
+
+  const getFolderIcon = () => {
+    const nameLower = folder.name.toLowerCase();
+    const iconClasses = "w-6 h-6 text-primary";
+    if (nameLower.includes('report')) {
+      return <FileText className={iconClasses} />;
+    }
+    if (nameLower.includes('invoice')) {
+      return <Receipt className={iconClasses} />;
+    }
+    return <Folder className={iconClasses} />;
+  };
+
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md mb-6 overflow-hidden border border-slate-200 dark:border-slate-700">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex justify-between items-center p-4 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
+        aria-expanded={isOpen}
+      >
+        <div className="flex items-center gap-3">
+          {getFolderIcon()}
+          <h2 className="text-lg font-bold text-slate-800 dark:text-slate-200">{folder.name}</h2>
+          <span className="text-sm font-medium bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400 px-2 py-0.5 rounded-full">
+            {sortedAndFilteredFiles.length} file{sortedAndFilteredFiles.length !== 1 ? 's' : ''}
+          </span>
+        </div>
+        <ChevronDown
+          className={`w-6 h-6 text-slate-500 transition-transform duration-300 ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+      <div
+        className={`grid transition-all duration-300 ease-in-out ${
+          isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+        }`}
+      >
+        <div className="overflow-hidden">
+          {sortedAndFilteredFiles.length > 0 ? (
+            <div>
+              {sortedAndFilteredFiles.map(file => (
+                <FileItem key={file.name} file={file} onPreview={onPreview} />
+              ))}
+            </div>
+          ) : (
+            <p className="p-4 text-slate-500 dark:text-slate-400">No files in this folder.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FolderSection;