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/App.tsx

@@ -1,103 +1,326 @@
+import React, { useState, useEffect, useCallback, ChangeEvent, useRef } from 'react';
+import { Building, UploadCloud, FileText, Download, Eye, LoaderCircle, CheckCircle, XCircle, Wand2, History, FileCode } from 'lucide-react';
+import { 
+  fetchTemplates, 
+  fetchTemplateContent, 
+  convertResume, 
+  fetchConversionHistory,
+  type ConvertedFile 
+} from './services/resumeService';
 
-import React, { useState, useEffect, useCallback } from 'react';
-import type { Person, NewPerson } from './types';
-import { getPeople, addPerson } from './services/apiService';
-import PersonList from './components/PersonList';
-import AddPersonForm from './components/AddPersonForm';
-import Modal from './components/Modal';
-import { PlusIcon, UsersIcon } from './components/Icons';
+// --- Type Definitions ---
+interface ConvertedFileWithContent extends ConvertedFile {
+  template?: string;
+  htmlContent?: string;
+  pdfBlob?: Blob;
+}
 
+const formatDate = (date: Date): string => new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+
+// --- Main App Component ---
 const App: React.FC = () => {
-  const [people, setPeople] = useState<Person[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-
-  const fetchPeople = useCallback(async () => {
-    try {
-      setIsLoading(true);
-      setError(null);
-      const data = await getPeople();
-      setPeople(data);
-    } catch (err) {
-      setError('Failed to fetch people. Please try again later.');
-      console.error(err);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
+  // State
+  const [templates, setTemplates] = useState<string[]>([]);
+  const [selectedTemplate, setSelectedTemplate] = useState<string>('');
+  const [resumeFile, setResumeFile] = useState<File | null>(null);
+  const [generatedHtml, setGeneratedHtml] = useState<string | null>(null);
+  const [processingState, setProcessingState] = useState<'idle' | 'parsing' | 'generating' | 'done' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [isLoadingTemplates, setIsLoadingTemplates] = useState<boolean>(true);
+  const [isLoadingHistory, setIsLoadingHistory] = useState<boolean>(true);
+  const [convertedFiles, setConvertedFiles] = useState<ConvertedFileWithContent[]>([]);
+  const previewRef = useRef<HTMLIFrameElement>(null);
+  
+  // Effects
   useEffect(() => {
-    fetchPeople();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // Fetch templates from R2
+    setIsLoadingTemplates(true);
+    fetchTemplates().then(data => {
+      setTemplates(data);
+      if (data.length > 0) setSelectedTemplate(data[0]);
+    }).catch(error => {
+      console.error('Error loading templates:', error);
+      setErrorMessage('Failed to load templates from R2');
+    }).finally(() => setIsLoadingTemplates(false));
+    
+    // Fetch conversion history from R2
+    setIsLoadingHistory(true);
+    fetchConversionHistory().then(data => {
+        setConvertedFiles(data as ConvertedFileWithContent[]);
+    }).catch(error => {
+      console.error('Error loading history:', error);
+    }).finally(() => setIsLoadingHistory(false));
   }, []);
 
-  const handleAddPerson = async (newPerson: NewPerson) => {
-    try {
-      const addedPerson = await addPerson(newPerson);
-      setPeople((prevPeople) => [...prevPeople, addedPerson]);
-      setIsModalOpen(false);
-    } catch (err) {
-      setError('Failed to add person. Please try again.');
-      console.error(err);
+  // Handlers
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) handleFileSelect(e.target.files[0]);
+  };
+
+  const handleFileSelect = (file: File) => {
+    const allowedTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
+    if (allowedTypes.includes(file.type)) {
+      setResumeFile(file);
+      setGeneratedHtml(null);
+      setProcessingState('idle');
+    } else {
+      alert('Invalid file type. Please upload a PDF or DOCX file.');
     }
   };
 
-  const renderContent = () => {
-    if (isLoading) {
-      return <p className="text-center text-gray-500 dark:text-gray-400 mt-8">Loading profiles...</p>;
+  const handleGenerate = async () => {
+    if (!resumeFile || !selectedTemplate) {
+      setErrorMessage('Please select a template and upload a resume file.');
+      setProcessingState('error');
+      return;
     }
-    if (error) {
-      return <p className="text-center text-red-500 dark:text-red-400 mt-8">{error}</p>;
-    }
-    if (people.length === 0) {
-      return (
-        <div className="text-center py-16 px-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
-            <UsersIcon className="mx-auto h-12 w-12 text-gray-400" />
-            <h3 className="mt-2 text-lg font-medium text-gray-900 dark:text-white">No profiles yet</h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by adding a new profile.</p>
-            <div className="mt-6">
-                <button
-                    onClick={() => setIsModalOpen(true)}
-                    type="button"
-                    className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                >
-                    <PlusIcon className="-ml-1 mr-2 h-5 w-5" />
-                    Add Profile
-                </button>
-            </div>
-        </div>
+    setProcessingState('parsing');
+    setErrorMessage('');
+    setGeneratedHtml(null);
+
+    try {
+      // Call backend API to convert resume
+      const result = await convertResume(
+        resumeFile, 
+        selectedTemplate,
+        (message) => {
+          // Update UI with progress messages
+          if (message.includes('Uploading')) setProcessingState('parsing');
+          else if (message.includes('Processing')) setProcessingState('generating');
+        }
       );
+      
+      setGeneratedHtml(result.html_content);
+      
+      // Add to converted files list
+      const newFile: ConvertedFileWithContent = {
+        id: `${new Date().getTime()}-${resumeFile.name}`,
+        name: resumeFile.name,
+        url: result.html_url,
+        size: new Blob([result.html_content]).size,
+        lastModified: new Date().toISOString(),
+        timestamp: new Date(),
+        template: selectedTemplate,
+        htmlContent: result.html_content,
+      };
+      setConvertedFiles(prev => [newFile, ...prev]);
+      setProcessingState('done');
+    } catch (e) {
+      console.error(e);
+      setErrorMessage(e instanceof Error ? e.message : 'An unknown error occurred during resume conversion.');
+      setProcessingState('error');
     }
-    return <PersonList people={people} />;
   };
+  
+  const handleDownload = async (file: ConvertedFileWithContent, format: 'html' | 'pdf') => {
+      const baseName = file.name.replace(/\.[^/.]+$/, "");
+      const templateName = file.template || 'resume';
+      const fileName = `${baseName}_${templateName}.${format}`;
+      
+      const link = document.createElement('a');
+      link.download = fileName;
+
+      // For HTML files
+      if (format === 'html') {
+          if (file.htmlContent) {
+              // Download from in-memory content
+              const blob = new Blob([file.htmlContent], { type: 'text/html' });
+              link.href = URL.createObjectURL(blob);
+          } else if (file.url) {
+              // Download from R2 URL
+              link.href = file.url;
+          } else {
+              console.error("No HTML content or URL to download.");
+              return;
+          }
+      } else {
+          // PDF format - not supported yet in backend
+          alert('PDF download will be available soon. For now, you can print the HTML preview to PDF.');
+          return;
+      }
+
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      
+      if (file.htmlContent) {
+        URL.revokeObjectURL(link.href);
+      }
+  };
+
+  const handlePreviewHistoryItem = async (file: ConvertedFileWithContent) => {
+    if (file.htmlContent) {
+        // Preview from in-memory content
+        setGeneratedHtml(file.htmlContent);
+    } else if (file.url) {
+        // Fetch HTML content from R2 URL
+        try {
+            const response = await fetch(file.url);
+            if (!response.ok) throw new Error('Failed to fetch file');
+            const htmlContent = await response.text();
+            setGeneratedHtml(htmlContent);
+        } catch (e) {
+            const message = e instanceof Error ? e.message : 'Unknown error';
+            setGeneratedHtml(`<p>Error loading preview: ${message}</p>`);
+        }
+    } else {
+        setGeneratedHtml(`<p>Preview not available for this file.</p>`);
+    }
+  };
+  
+  // UI Components
+  const Card: React.FC<{ title: string; icon: React.ReactNode; children: React.ReactNode; className?: string }> = ({ title, icon, children, className }) => (
+    <div className={`bg-white dark:bg-slate-800 rounded-lg shadow-md border border-slate-200 dark:border-slate-700 flex flex-col ${className}`}>
+      <div className="flex items-center gap-3 p-4 border-b border-slate-200 dark:border-slate-700">
+        {icon}
+        <h2 className="text-lg font-bold text-slate-800 dark:text-slate-200">{title}</h2>
+      </div>
+      <div className="p-6 flex-grow">{children}</div>
+    </div>
+  );
+
+  const dropzoneProps = {
+    onDragOver: (e: React.DragEvent) => e.preventDefault(),
+    onDrop: (e: React.DragEvent) => {
+      e.preventDefault();
+      if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+        handleFileSelect(e.dataTransfer.files[0]);
+      }
+    },
+  };
+  
+  const getStatusIndicator = () => {
+    switch (processingState) {
+        case 'parsing': return <><LoaderCircle className="w-4 h-4 animate-spin" /> Extracting resume text with AI...</>;
+        case 'generating': return <><LoaderCircle className="w-4 h-4 animate-spin" /> Generating HTML & PDF with AI...</>;
+        case 'done': return <><CheckCircle className="w-4 h-4 text-green-500" /> Generation complete!</>;
+        case 'error': return <><XCircle className="w-4 h-4 text-red-500" /> {errorMessage}</>;
+        default: return null;
+    }
+  };
+  
+  const currentFile = convertedFiles.find(f => f.htmlContent === generatedHtml);
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
-      <div className="container mx-auto p-4 sm:p-6 lg:p-8">
-        <header className="flex items-center justify-between mb-8 pb-4 border-b border-gray-200 dark:border-gray-700">
-          <h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
-            Profile Linker
-          </h1>
-          {people.length > 0 && (
-            <button
-              onClick={() => setIsModalOpen(true)}
-              className="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
-            >
-              <PlusIcon className="w-5 h-5 mr-2 -ml-1" />
-              <span>Add Profile</span>
-            </button>
-          )}
-        </header>
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-200 p-4 sm:p-6 lg:p-8 font-sans">
+      <header className="max-w-7xl mx-auto mb-10 text-center">
+        <h1 className="text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary to-sky-400 dark:to-sky-300 pb-2">
+          Smart Resume Formatter
+        </h1>
+        <p className="text-slate-500 dark:text-slate-400 mt-1 text-lg">Generate professional resumes with AI-powered template merging.</p>
+      </header>
 
-        <main>
-          {renderContent()}
-        </main>
-      </div>
+      <main className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div className="space-y-8">
+              <Card title="1. Select Template" icon={<Building className="w-6 h-6 text-primary" />}>
+                {isLoadingTemplates ? <LoaderCircle className="w-6 h-6 animate-spin text-primary mx-auto" /> : (
+                  <select
+                    value={selectedTemplate}
+                    onChange={(e) => setSelectedTemplate(e.target.value)}
+                    className="w-full pl-3 pr-10 py-2 border border-slate-300 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 focus:ring-2 focus:ring-primary focus:border-primary outline-none"
+                  >
+                    {templates.map(t => <option key={t} value={t}>{t}</option>)}
+                  </select>
+                )}
+              </Card>
 
-      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title="Add New Profile">
-        <AddPersonForm onSubmit={handleAddPerson} onCancel={() => setIsModalOpen(false)} />
-      </Modal>
+              <Card title="2. Upload Resume" icon={<UploadCloud className="w-6 h-6 text-primary" />}>
+                <div className="flex flex-col items-center justify-center w-full gap-4" {...dropzoneProps}>
+                  <label htmlFor="file-upload" className="flex flex-col items-center justify-center w-full h-32 border-2 border-slate-300 dark:border-slate-600 border-dashed rounded-lg cursor-pointer bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition">
+                    <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                      {resumeFile ? (
+                          <>
+                            <FileText className="w-8 h-8 mb-2 text-green-500"/>
+                            <p className="font-semibold text-green-600 dark:text-green-400 truncate max-w-xs px-2" title={resumeFile.name}>{resumeFile.name}</p>
+                          </>
+                      ) : (
+                          <>
+                            <UploadCloud className="w-8 h-8 mb-2 text-slate-500 dark:text-slate-400" />
+                            <p className="text-sm text-slate-500 dark:text-slate-400"><span className="font-semibold">Click to upload</span> or drag & drop</p>
+                            <p className="text-xs text-slate-500 dark:text-slate-400">PDF or DOCX</p>
+                          </>
+                      )}
+                    </div>
+                    <input id="file-upload" type="file" className="hidden" accept=".pdf,.docx" onChange={handleFileChange} />
+                  </label>
+                  <button
+                    onClick={handleGenerate}
+                    disabled={!resumeFile || !selectedTemplate || ['parsing', 'generating'].includes(processingState)}
+                    className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-primary text-white font-semibold rounded-md hover:bg-blue-600 transition-colors disabled:bg-slate-400 disabled:cursor-not-allowed"
+                  >
+                    <Wand2 className="w-5 h-5" />
+                    Convert & Generate
+                  </button>
+                  <div className={`h-6 text-sm flex items-center gap-2 ${processingState === 'error' ? 'text-red-500' : 'text-slate-500 dark:text-slate-400'}`}>
+                    {getStatusIndicator()}
+                  </div>
+                </div>
+              </Card>
+            </div>
+
+            <Card title="3. Preview & Download" icon={<Eye className="w-6 h-6 text-primary" />} className="lg:row-span-2">
+                <div className="w-full h-[500px] bg-slate-100 dark:bg-slate-900 rounded-md border border-slate-300 dark:border-slate-700 overflow-hidden">
+                     {generatedHtml ? (
+                        <iframe
+                            ref={previewRef}
+                            srcDoc={generatedHtml}
+                            title="Resume Preview"
+                            className="w-full h-full border-0"
+                            sandbox="allow-scripts"
+                        />
+                    ) : (
+                        <div className="w-full h-full flex flex-col items-center justify-center text-slate-500 dark:text-slate-400 p-4 text-center">
+                            <FileText className="w-12 h-12 mb-4 text-slate-400" />
+                            <p className="font-medium">Preview will appear here</p>
+                            <p className="text-sm">Generate a resume to see the result.</p>
+                        </div>
+                    )}
+                </div>
+                {generatedHtml && currentFile && (
+                    <div className="grid grid-cols-2 gap-4 mt-6">
+                        <button onClick={() => handleDownload(currentFile, 'html')} className="flex items-center justify-center gap-2 px-4 py-2 bg-slate-600 text-white font-semibold rounded-md hover:bg-slate-700 transition-colors">
+                            <Download className="w-5 h-5" /> Download HTML
+                        </button>
+                        <button onClick={() => handleDownload(currentFile, 'pdf')} className="flex items-center justify-center gap-2 px-4 py-2 bg-red-600 text-white font-semibold rounded-md hover:bg-red-700 transition-colors">
+                            <Download className="w-5 h-5" /> Download PDF
+                        </button>
+                    </div>
+                )}
+            </Card>
+        </div>
+        
+        <div className="mt-12">
+            <Card title="Conversion History" icon={<History className="w-6 h-6 text-primary" />}>
+              {isLoadingHistory ? (
+                <div className="flex justify-center items-center py-4">
+                  <LoaderCircle className="w-6 h-6 animate-spin text-primary" />
+                  <span className="ml-3 text-slate-500 dark:text-slate-400">Loading history from R2...</span>
+                </div>
+              ) : convertedFiles.length > 0 ? (
+                <div className="space-y-2">
+                  {convertedFiles.map((file) => (
+                    <div key={file.id} className="grid grid-cols-[1fr,auto] gap-4 items-center p-3 rounded-md hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
+                      <div className="truncate">
+                        <p className="font-semibold text-slate-700 dark:text-slate-300 truncate" title={file.name}>{file.name}</p>
+                        <p className="text-sm text-slate-500 dark:text-slate-400">
+                          Template: <span className="font-medium">{file.template}</span> &bull; {formatDate(file.timestamp)}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <button onClick={() => handlePreviewHistoryItem(file)} title="Preview" className="p-2 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-md transition-colors"><Eye className="w-5 h-5" /></button>
+                        <button onClick={() => handleDownload(file, 'html')} title="Download HTML" className="p-2 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-md transition-colors"><FileCode className="w-5 h-5" /></button>
+                        <button onClick={() => handleDownload(file, 'pdf')} title="Download PDF" className="p-2 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-md transition-colors"><FileText className="w-5 h-5" /></button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-center text-slate-500 dark:text-slate-400 py-4">No converted resumes found in your bucket.</p>
+              )}
+            </Card>
+        </div>
+      </main>
     </div>
   );
 };

frontend/README.md

@@ -1,12 +1,12 @@
 <div align="center">
-<img width="1200" height="475" alt="GHBanner" src="https://gitea.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
 </div>
 
 # Run and deploy your AI Studio app
 
 This contains everything you need to run your app locally.
 
-View your app in AI Studio: https://ai.studio/apps/drive/1fGMiOc3HONBnOp0qMiclJ_huKwQg8ukW
+View your app in AI Studio: https://ai.studio/apps/drive/1Mgfuv-RfjAfP0upna5yO9_ji7D6oZpU-
 
 ## Run Locally
 

frontend/components/AddPersonForm.tsx

@@ -1,104 +0,0 @@
-
-import React, { useState } from 'react';
-import type { NewPerson } from '../types';
-
-interface AddPersonFormProps {
-  onSubmit: (person: NewPerson) => void;
-  onCancel: () => void;
-}
-
-const AddPersonForm: React.FC<AddPersonFormProps> = ({ onSubmit, onCancel }) => {
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [linkedinUrl, setLinkedinUrl] = useState('');
-  const [error, setError] = useState('');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!firstName || !lastName || !linkedinUrl) {
-      setError('All fields are required.');
-      return;
-    }
-    // Basic URL validation
-    try {
-        new URL(linkedinUrl);
-    } catch (_) {
-        setError('Please enter a valid LinkedIn URL.');
-        return;
-    }
-    setError('');
-    onSubmit({ firstName, lastName, linkedinUrl });
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-6">
-        {error && <div className="p-3 bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">{error}</div>}
-      <div>
-        <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-          First Name
-        </label>
-        <div className="mt-1">
-          <input
-            type="text"
-            id="firstName"
-            value={firstName}
-            onChange={(e) => setFirstName(e.target.value)}
-            className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-            required
-          />
-        </div>
-      </div>
-
-      <div>
-        <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-          Last Name
-        </label>
-        <div className="mt-1">
-          <input
-            type="text"
-            id="lastName"
-            value={lastName}
-            onChange={(e) => setLastName(e.target.value)}
-            className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-            required
-          />
-        </div>
-      </div>
-
-      <div>
-        <label htmlFor="linkedinUrl" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-          LinkedIn Profile URL
-        </label>
-        <div className="mt-1">
-          <input
-            type="url"
-            id="linkedinUrl"
-            value={linkedinUrl}
-            onChange={(e) => setLinkedinUrl(e.target.value)}
-            placeholder="https://www.linkedin.com/in/..."
-            className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-            required
-          />
-        </div>
-      </div>
-      
-      <div className="flex justify-end space-x-4 pt-2">
-        <button
-          type="button"
-          onClick={onCancel}
-          className="px-4 py-2 text-sm font-medium text-gray-700 bg-white dark:bg-gray-600 dark:text-gray-200 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        >
-          Save Profile
-        </button>
-      </div>
-    </form>
-  );
-};
-
-export default AddPersonForm;

frontend/components/CreateFolderModal.tsx

@@ -0,0 +1,107 @@
+import React, { useState, FormEvent, useEffect } from 'react';
+import { X, FolderPlus, LoaderCircle } from 'lucide-react';
+
+interface CreateFolderModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (folderName: string) => void;
+  isCreating: boolean;
+}
+
+const CreateFolderModal: React.FC<CreateFolderModalProps> = ({ isOpen, onClose, onSubmit, isCreating }) => {
+  const [folderName, setFolderName] = useState('');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    // Reset form state when modal is closed or opened
+    if (isOpen) {
+      setFolderName('');
+      setError('');
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!folderName.trim()) {
+      setError('Folder name cannot be empty.');
+      return;
+    }
+    // Basic validation for folder name characters could be added here
+    onSubmit(folderName.trim());
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50 p-4"
+      onClick={onClose}
+      aria-modal="true"
+      role="dialog"
+    >
+      <div
+        className="bg-white dark:bg-slate-800 rounded-lg shadow-2xl w-full max-w-md flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-700">
+          <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
+            <FolderPlus className="w-6 h-6 text-primary" />
+            Create New Folder
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1 rounded-full text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+            aria-label="Close modal"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="p-6">
+            <label htmlFor="folderName" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+              Folder Name
+            </label>
+            <input
+              id="folderName"
+              type="text"
+              value={folderName}
+              onChange={(e) => {
+                setFolderName(e.target.value);
+                if (error) setError('');
+              }}
+              placeholder="e.g., 'Project Alpha'"
+              className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
+              autoFocus
+            />
+            {error && <p className="text-sm text-red-500 mt-2">{error}</p>}
+          </div>
+          <div className="flex justify-end items-center gap-3 p-4 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-semibold bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-md hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isCreating}
+              className="flex items-center justify-center gap-2 w-40 px-4 py-2 text-sm font-semibold bg-primary text-white rounded-md hover:bg-blue-600 transition-colors disabled:bg-slate-400 disabled:cursor-not-allowed"
+            >
+              {isCreating ? (
+                <>
+                  <LoaderCircle className="w-4 h-4 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                'Create Folder'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default CreateFolderModal;

frontend/components/FileItem.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { FileText, FileCode, Download, Eye } from 'lucide-react';
+import { FileData } from '../types';
+import { formatBytes, formatDate } from '../utils/formatters';
+
+interface FileItemProps {
+  file: FileData;
+  onPreview: (url: string) => void;
+}
+
+const FileItem: React.FC<FileItemProps> = ({ file, onPreview }) => {
+  const getFileIcon = () => {
+    switch (file.type) {
+      case 'pdf':
+        return <FileText className="w-5 h-5 text-red-500" />;
+      case 'html':
+        return <FileCode className="w-5 h-5 text-blue-500" />;
+      default:
+        return <FileText className="w-5 h-5 text-slate-500" />;
+    }
+  };
+
+  return (
+    <div className="group grid grid-cols-1 md:grid-cols-[2fr,1fr,1.5fr,1.5fr] gap-4 items-center p-3 border-b border-slate-200 dark:border-slate-700 last:border-b-0 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
+      <div className="flex items-center gap-3 truncate">
+        {getFileIcon()}
+        <span className="font-medium text-slate-700 dark:text-slate-300 truncate group-hover:text-primary transition-colors" title={file.name}>{file.name}</span>
+      </div>
+      <div className="text-sm text-slate-500 dark:text-slate-400">
+        {formatBytes(file.size)}
+      </div>
+      <div className="text-sm text-slate-500 dark:text-slate-400 hidden md:block">
+        {formatDate(file.lastModified)}
+      </div>
+      <div className="flex items-center justify-start md:justify-end gap-2">
+        {file.type === 'html' && (
+          <button
+            onClick={() => onPreview(file.url)}
+            className="flex items-center gap-1.5 text-sm bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-600 px-3 py-1.5 rounded-md transition-colors font-semibold"
+          >
+            <Eye className="w-4 h-4" />
+            Preview
+          </button>
+        )}
+        <a
+          href={file.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          download={file.name}
+          className="flex items-center gap-1.5 text-sm bg-primary hover:bg-blue-600 text-white px-3 py-1.5 rounded-md transition-colors font-semibold"
+        >
+          <Download className="w-4 h-4" />
+          Download
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default FileItem;

frontend/components/FilePreviewModal.tsx

@@ -0,0 +1,43 @@
+
+import React from 'react';
+import { X } from 'lucide-react';
+
+interface FilePreviewModalProps {
+  url: string | null;
+  onClose: () => void;
+}
+
+const FilePreviewModal: React.FC<FilePreviewModalProps> = ({ url, onClose }) => {
+  if (!url) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50 p-4"
+      onClick={onClose}
+    >
+      <div 
+        className="bg-white dark:bg-slate-800 rounded-lg shadow-2xl w-full max-w-4xl h-full max-h-[90vh] flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-700">
+          <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200">File Preview</h2>
+          <button 
+            onClick={onClose} 
+            className="p-1 rounded-full text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+        <div className="flex-grow">
+          <iframe
+            src={url}
+            title="File Preview"
+            className="w-full h-full border-0"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilePreviewModal;

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;

frontend/components/HeaderBar.tsx

@@ -0,0 +1,69 @@
+import React, { useState, FormEvent } from 'react';
+import { Search, RefreshCw, X } from 'lucide-react';
+
+interface HeaderBarProps {
+  onSearch: (term: string) => void;
+  onRefresh: () => void;
+  isLoading: boolean;
+}
+
+const HeaderBar: React.FC<HeaderBarProps> = ({ onSearch, onRefresh, isLoading }) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSearch = (e: FormEvent) => {
+    e.preventDefault();
+    onSearch(inputValue);
+  };
+
+  const handleClear = () => {
+    setInputValue('');
+    onSearch('');
+  };
+
+  return (
+    <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm p-4 rounded-lg shadow-lg mb-8 sticky top-4 z-10 border border-slate-200 dark:border-slate-700">
+      <form onSubmit={handleSearch} className="flex flex-col md:flex-row items-center gap-4">
+        <div className="relative w-full">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 pointer-events-none" />
+          <input
+            type="text"
+            placeholder="Search files by name..."
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            className="w-full pl-10 pr-10 py-2 border border-slate-300 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
+          />
+          {inputValue && (
+             <button
+              type="button"
+              onClick={handleClear}
+              className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
+              aria-label="Clear search"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+        <div className="flex items-center gap-2 w-full md:w-auto flex-shrink-0">
+            <button
+              type="submit"
+              className="flex items-center justify-center gap-2 w-full md:w-auto px-4 py-2 bg-slate-700 text-white font-semibold rounded-md hover:bg-slate-800 dark:bg-slate-600 dark:hover:bg-slate-500 transition-colors"
+            >
+              <Search className="w-5 h-5" />
+              <span>Search</span>
+            </button>
+            <button
+              type="button"
+              onClick={onRefresh}
+              disabled={isLoading}
+              className="flex items-center justify-center gap-2 w-full md:w-auto px-4 py-2 bg-primary text-white font-semibold rounded-md hover:bg-blue-600 transition-colors disabled:bg-slate-400 disabled:cursor-not-allowed"
+            >
+              <RefreshCw className={`w-5 h-5 ${isLoading ? 'animate-spin' : ''}`} />
+              <span>Refresh</span>
+            </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default HeaderBar;

frontend/components/Icons.tsx

@@ -1,27 +0,0 @@
-
-import React from 'react';
-
-export const PlusIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-  </svg>
-);
-
-export const LinkedInIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
-    <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93-.94 0-1.62.61-1.62 1.93V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.38.96 3.38 3.3 V19z"></path>
-  </svg>
-);
-
-export const UsersIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-4.684v.005c.317.055.635.101.954.142m-1.58-2.318a2.25 2.25 0 00-3.814-1.625A2.25 2.25 0 006 13.5a2.25 2.25 0 00-1.58 2.318m1.58-2.318l-.003.004a2.25 2.25 0 01-3.814-1.625a2.25 2.25 0 013.814-1.625l.003.004m0 0a2.25 2.25 0 013.814 1.625a2.25 2.25 0 01-3.814-1.625M9 13.5a2.25 2.25 0 012.25-2.25A2.25 2.25 0 0113.5 13.5a2.25 2.25 0 01-2.25 2.25A2.25 2.25 0 019 13.5z" />
-    </svg>
-);
-
-export const CloseIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-    </svg>
-);
-

frontend/components/Modal.tsx

@@ -1,62 +0,0 @@
-
-import React, { Fragment } from 'react';
-import { CloseIcon } from './Icons';
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-  children: React.ReactNode;
-}
-
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-10 overflow-y-auto"
-      aria-labelledby="modal-title"
-      role="dialog"
-      aria-modal="true"
-    >
-      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-        {/* Background overlay */}
-        <div
-          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-          aria-hidden="true"
-          onClick={onClose}
-        ></div>
-
-        {/* This element is to trick the browser into centering the modal contents. */}
-        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
-          &#8203;
-        </span>
-        
-        {/* Modal panel */}
-        <div className="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-          <div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-            <div className="sm:flex sm:items-start w-full">
-              <div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
-                <div className="flex justify-between items-center">
-                  <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title">
-                    {title}
-                  </h3>
-                  <button onClick={onClose} className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
-                    <CloseIcon className="h-6 w-6" />
-                  </button>
-                </div>
-                <div className="mt-4">
-                  {children}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Modal;

frontend/components/PersonList.tsx

@@ -1,57 +0,0 @@
-
-import React from 'react';
-import type { Person } from '../types';
-import { LinkedInIcon } from './Icons';
-
-interface PersonListProps {
-  people: Person[];
-}
-
-const PersonList: React.FC<PersonListProps> = ({ people }) => {
-  return (
-    <div className="overflow-hidden bg-white dark:bg-gray-800 shadow-md rounded-lg">
-      <div className="overflow-x-auto">
-        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-          <thead className="bg-gray-50 dark:bg-gray-700">
-            <tr>
-              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                First Name
-              </th>
-              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                Last Name
-              </th>
-              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                LinkedIn Profile
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-            {people.map((person) => (
-              <tr key={person.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
-                  {person.firstName}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
-                  {person.lastName}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
-                  <a
-                    href={person.linkedinUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium group"
-                  >
-                    <LinkedInIcon className="w-5 h-5 mr-2 text-gray-400 group-hover:text-indigo-500 dark:group-hover:text-indigo-400" />
-                    View Profile
-                  </a>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};
-
-export default PersonList;

frontend/components/Spinner.tsx

@@ -0,0 +1,13 @@
+
+import React from 'react';
+import { LoaderCircle } from 'lucide-react';
+
+const Spinner: React.FC = () => {
+  return (
+    <div className="flex justify-center items-center py-10">
+      <LoaderCircle className="w-10 h-10 text-primary animate-spin" />
+    </div>
+  );
+};
+
+export default Spinner;

frontend/index.html

@@ -1,24 +1,46 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Profile Linker</title>
+    <title>Smart Resume Formatter</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ['Inter', 'sans-serif'],
+            },
+            colors: {
+              'primary': '#3b82f6', // blue-500
+              'secondary': '#64748b', // slate-500
+            }
+          }
+        }
+      }
+    </script>
   <script type="importmap">
 {
   "imports": {
+    "react": "https://aistudiocdn.com/react@^19.2.0",
     "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
     "react/": "https://aistudiocdn.com/react@^19.2.0/",
-    "react": "https://aistudiocdn.com/react@^19.2.0"
+    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.545.0",
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.24.0"
   }
 }
 </script>
-<link rel="stylesheet" href="./index.css">
+<link rel="stylesheet" href="/index.css">
 </head>
-  <body class="bg-gray-100 dark:bg-gray-900">
+  <body class="bg-slate-100 dark:bg-slate-900">
     <div id="root"></div>
-    <script type="module" src="./index.tsx"></script>
+    <script type="module" src="/index.tsx"></script>
   </body>
 </html>

frontend/metadata.json

@@ -1,5 +1,5 @@
 {
-  "name": "Profile Linker",
-  "description": "An application to manage a list of contacts with their first name, last name, and LinkedIn profile URL. It features the ability to add new contacts through a mocked backend service, designed for easy integration with a real API.",
+  "name": "Smart Resume Formatter",
+  "description": "An AI-powered tool to parse resumes, merge them with company templates, and generate professional HTML and PDF outputs.",
   "requestFramePermissions": []
 }

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ResumeFormatter",
+  "name": "smart-resume-formatter",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react": "^19.2.0"
+    "lucide-react": "^0.545.0",
+    "@google/genai": "^1.24.0"
   },
   "devDependencies": {
     "@types/node": "^22.14.0",

frontend/services/resumeService.ts

@@ -0,0 +1,150 @@
+/**
+ * Resume API Service
+ * Handles all API calls to the backend for resume processing
+ */
+
+const APP_NAME = import.meta.env.VITE_APP_NAME || 'resumeformatter';
+const API_BASE_URL = `/${APP_NAME}/api/resumes`;
+
+export interface ConvertedFile {
+  id: string;
+  name: string;
+  url: string;
+  size: number;
+  lastModified: string;
+  timestamp: Date;
+}
+
+export interface ConvertResponse {
+  success: boolean;
+  html_url: string;
+  html_content: string;
+  message: string;
+}
+
+/**
+ * Fetch list of available templates from R2
+ */
+export const fetchTemplates = async (): Promise<string[]> => {
+  console.log('Fetching templates from API...');
+  try {
+    const response = await fetch(`${API_BASE_URL}/templates`);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log('Templates loaded:', data);
+    return data;
+  } catch (error) {
+    console.error('Error fetching templates:', error);
+    throw error;
+  }
+};
+
+/**
+ * Fetch HTML content of a specific template
+ */
+export const fetchTemplateContent = async (templateName: string): Promise<string> => {
+  console.log(`Fetching template content for: ${templateName}`);
+  try {
+    const response = await fetch(`${API_BASE_URL}/templates/${encodeURIComponent(templateName)}`);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log('Template content loaded');
+    return data.content;
+  } catch (error) {
+    console.error('Error fetching template content:', error);
+    throw error;
+  }
+};
+
+/**
+ * Convert a resume file using the specified template
+ */
+export const convertResume = async (
+  file: File,
+  templateName: string,
+  onProgress?: (message: string) => void
+): Promise<ConvertResponse> => {
+  console.log(`Converting resume: ${file.name} with template: ${templateName}`);
+  
+  try {
+    // Create form data
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('template_name', templateName);
+    
+    onProgress?.('Uploading file to server...');
+    
+    // Send request
+    const response = await fetch(`${API_BASE_URL}/convert`, {
+      method: 'POST',
+      body: formData,
+    });
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ detail: 'Unknown error' }));
+      throw new Error(errorData.detail || `API error: ${response.status}`);
+    }
+    
+    onProgress?.('Processing complete!');
+    
+    const data = await response.json();
+    console.log('Conversion complete:', data);
+    return data;
+  } catch (error) {
+    console.error('Error converting resume:', error);
+    throw error;
+  }
+};
+
+/**
+ * Fetch list of converted resumes from R2
+ */
+export const fetchConversionHistory = async (limit: number = 50): Promise<ConvertedFile[]> => {
+  console.log('Fetching conversion history from API...');
+  try {
+    const response = await fetch(`${API_BASE_URL}/history?limit=${limit}`);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    const data = await response.json();
+    
+    // Transform data to match ConvertedFile interface
+    const files: ConvertedFile[] = data.map((file: any) => ({
+      id: file.id,
+      name: file.name,
+      url: file.url,
+      size: file.size,
+      lastModified: file.lastModified,
+      timestamp: new Date(file.lastModified),
+    }));
+    
+    console.log('Conversion history loaded:', files.length, 'files');
+    return files;
+  } catch (error) {
+    console.error('Error fetching conversion history:', error);
+    throw error;
+  }
+};
+
+/**
+ * Get download URL for a specific file
+ */
+export const getDownloadUrl = async (fileKey: string): Promise<string> => {
+  console.log(`Getting download URL for: ${fileKey}`);
+  try {
+    const response = await fetch(`${API_BASE_URL}/download/${encodeURIComponent(fileKey)}`);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log('Download URL retrieved');
+    return data.url;
+  } catch (error) {
+    console.error('Error getting download URL:', error);
+    throw error;
+  }
+};

frontend/src/App.tsx

@@ -0,0 +1,377 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+// FIX: Add imports for Gemini API
+import { GoogleGenAI } from '@google/genai';
+import { FolderData, ApiResponse } from './types';
+import HeaderBar from './components/HeaderBar';
+import FolderSection from './components/FolderSection';
+import Spinner from './components/Spinner';
+import FilePreviewModal from './components/FilePreviewModal';
+import CreateFolderModal from './components/CreateFolderModal';
+// FIX: Add more icons for new UI elements
+import { ServerCrash, Files, Search, Sparkles, Image as ImageIcon, X, LoaderCircle } from 'lucide-react';
+
+// Mock API data with varied dates to test sorting
+const mockApiData: ApiResponse = {
+  "folders": [
+    {
+      "name": "reports",
+      "files": [
+        { "name": "summary.pdf", "type": "pdf", "url": "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", "size": 13264, "lastModified": "2025-10-12T10:00:00Z" },
+        { "name": "quarterly-review.html", "type": "html", "url": "https://raw.githack.com/bvaughn/infinite-scroll-example/master/index.html", "size": 65536, "lastModified": "2025-11-15T11:00:00Z" }
+      ]
+    },
+    {
+      "name": "invoices",
+      "files": [
+        { "name": "invoice-q3.pdf", "type": "pdf", "url": "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", "size": 204800, "lastModified": "2025-10-13T08:30:00Z" },
+        { "name": "invoice-q4.pdf", "type": "pdf", "url": "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", "size": 215040, "lastModified": "2025-11-01T14:00:00Z" }
+      ]
+    },
+    {
+      "name": "presentations",
+      "files": []
+    }
+  ]
+};
+
+// Mock fetch function to simulate a real API call
+const fetchFiles = (): Promise<ApiResponse> => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // Uncomment to simulate a random API error
+      // if (Math.random() > 0.8) {
+      //   reject(new Error("Failed to fetch files from the server."));
+      //   return;
+      // }
+      resolve(mockApiData);
+    }, 1200);
+  });
+};
+
+// Mock API function for creating a folder
+const createFolderAPI = (folderName: string): Promise<{ success: boolean; folder: FolderData }> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const newFolder: FolderData = {
+        name: folderName,
+        files: [],
+      };
+      resolve({ success: true, folder: newFolder });
+    }, 800);
+  });
+};
+
+// FIX: Initialize Gemini AI client
+const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+
+
+const App: React.FC = () => {
+  const [folders, setFolders] = useState<FolderData[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isCreateFolderModalOpen, setIsCreateFolderModalOpen] = useState(false);
+  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
+
+  // FIX: Add state for AI Vision feature
+  const [isVisionModalOpen, setIsVisionModalOpen] = useState(false);
+  const [visionImage, setVisionImage] = useState<File | null>(null);
+  const [generatedHtml, setGeneratedHtml] = useState<string | null>(null);
+  const [isGenerating, setIsGenerating] = useState<boolean>(false);
+  const [visionError, setVisionError] = useState<string | null>(null);
+
+  const loadFiles = useCallback(() => {
+    setIsLoading(true);
+    setError(null);
+    fetchFiles()
+      .then(data => {
+        // Display all folders
+        setFolders(data.folders);
+      })
+      .catch(err => {
+        setError(err.message || 'An unknown error occurred.');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    loadFiles();
+  }, [loadFiles]);
+  
+  const handleCreateFolder = async (folderName: string) => {
+    if (folders.some(f => f.name.toLowerCase() === folderName.toLowerCase())) {
+        alert(`A folder named "${folderName}" already exists.`);
+        return;
+    }
+    
+    setIsCreatingFolder(true);
+    try {
+      const response = await createFolderAPI(folderName);
+      if (response.success) {
+        setFolders(prevFolders => [response.folder, ...prevFolders]);
+        setIsCreateFolderModalOpen(false);
+      } else {
+        alert('Failed to create the folder. Please try again.');
+      }
+    } catch (err) {
+      alert('An error occurred while creating the folder.');
+    } finally {
+      setIsCreatingFolder(false);
+    }
+  };
+
+  // FIX: Add handler for image analysis using Gemini API
+  const handleAnalyzeImage = async () => {
+    if (!visionImage) {
+      setVisionError('Please select an image file.');
+      return;
+    }
+    setIsGenerating(true);
+    setGeneratedHtml(null);
+    setVisionError(null);
+
+    try {
+      const fileToBase64 = (file: File): Promise<string> => {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
+          reader.onload = () => resolve((reader.result as string).split(',')[1]);
+          reader.onerror = error => reject(error);
+        });
+      };
+
+      const base64Data = await fileToBase64(visionImage);
+
+      const imagePart = {
+        inlineData: {
+          data: base64Data,
+          mimeType: visionImage.type,
+        },
+      };
+
+      const textPart = {
+        text: "Analyze the following image, which could be a woodworking project. Describe the project in detail, then generate a complete, self-contained HTML document to showcase it. The HTML should be visually appealing with modern CSS styling (e.g., using flexbox or grid for layout). Include a title, a detailed description, and a list of potential materials or key features observed in the image. The entire response should be only the HTML code, starting with <!DOCTYPE html>.",
+      };
+
+      const response = await ai.models.generateContent({
+        model: 'gemini-2.5-flash',
+        contents: { parts: [imagePart, textPart] },
+      });
+      
+      let htmlContent = response.text;
+      
+      const match = htmlContent.match(/```html([\s\S]*)```/);
+      if (match) {
+        htmlContent = match[1].trim();
+      }
+
+      setGeneratedHtml(htmlContent);
+
+    } catch (e) {
+      console.error(e);
+      let message = 'Failed to generate HTML. Please try again.';
+      if (e instanceof Error) {
+        message = `${message} Error: ${e.message}`;
+      }
+      setVisionError(message);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  // FIX: Add handler to close and reset vision modal state
+  const handleCloseVisionModal = () => {
+    setIsVisionModalOpen(false);
+    setVisionImage(null);
+    setGeneratedHtml(null);
+    setVisionError(null);
+    setIsGenerating(false);
+  };
+
+  const handleRefresh = () => {
+    loadFiles();
+  };
+  
+  const handlePreview = (url: string) => {
+    setPreviewUrl(url);
+  };
+  
+  const handleCloseModal = () => {
+    setPreviewUrl(null);
+  };
+
+  const totalFiles = useMemo(() => folders.reduce((sum, folder) => sum + folder.files.length, 0), [folders]);
+
+  const totalMatches = useMemo(() => {
+    if (!searchTerm) return totalFiles;
+    return folders.reduce((acc, folder) => {
+        const matches = folder.files.filter(file => file.name.toLowerCase().includes(searchTerm.toLowerCase()));
+        return acc + matches.length;
+    }, 0);
+  }, [folders, searchTerm, totalFiles]);
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <Spinner />;
+    }
+    if (error) {
+      return (
+        <div className="text-center p-8 bg-red-100 dark:bg-red-900/30 border border-red-400 rounded-lg">
+            <ServerCrash className="w-12 h-12 text-red-500 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold text-red-700 dark:text-red-300">Oops! Something went wrong.</h3>
+            <p className="text-red-600 dark:text-red-400 mt-2">{error}</p>
+        </div>
+      );
+    }
+    if (totalFiles === 0) {
+      return (
+        <div className="text-center p-8 bg-slate-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg">
+          <Files className="w-12 h-12 text-slate-400 mx-auto mb-4" />
+          <h3 className="text-xl font-semibold text-slate-700 dark:text-slate-300">No Files Found</h3>
+          <p className="text-slate-500 dark:text-slate-400 mt-2">There are currently no files available in your storage.</p>
+        </div>
+      );
+    }
+    if (totalMatches === 0 && searchTerm) {
+        return (
+          <div className="text-center p-8 bg-slate-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg">
+            <Search className="w-12 h-12 text-slate-400 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold text-slate-700 dark:text-slate-300">No Results Found</h3>
+            <p className="text-slate-500 dark:text-slate-400 mt-2">Your search for "{searchTerm}" did not match any files.</p>
+          </div>
+        );
+    }
+    
+    return folders.map(folder => (
+      <FolderSection 
+        key={folder.name} 
+        folder={folder} 
+        searchTerm={searchTerm} 
+        onPreview={handlePreview}
+      />
+    ));
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 p-4 sm:p-6 lg:p-8">
+      <header className="max-w-7xl mx-auto mb-8 text-center">
+        <h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary to-sky-400 dark:to-sky-300 pb-2">
+            R2 File Dashboard
+        </h1>
+        <p className="text-slate-500 dark:text-slate-400 mt-1 text-lg">Browse, search, and manage your cloud files with ease.</p>
+      </header>
+      <main className="max-w-7xl mx-auto">
+        <HeaderBar 
+            onSearch={setSearchTerm}
+            onRefresh={handleRefresh}
+            onCreateFolder={() => setIsCreateFolderModalOpen(true)}
+            onAnalyzeImage={() => setIsVisionModalOpen(true)}
+            isLoading={isLoading}
+        />
+        <div className="transition-opacity duration-300">
+            {renderContent()}
+        </div>
+      {/* FIX: Corrected closing tag from </ai> to </main> */}
+      </main>
+      <FilePreviewModal url={previewUrl} onClose={handleCloseModal} />
+      <CreateFolderModal 
+        isOpen={isCreateFolderModalOpen}
+        onClose={() => setIsCreateFolderModalOpen(false)}
+        onSubmit={handleCreateFolder}
+        isCreating={isCreatingFolder}
+      />
+      {/* FIX: Add AI Vision Modal JSX directly here to avoid creating new files */}
+      {isVisionModalOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50 p-4"
+          onClick={handleCloseVisionModal}
+        >
+          <div
+            className="bg-white dark:bg-slate-800 rounded-lg shadow-2xl w-full max-w-4xl h-full max-h-[90vh] flex flex-col overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-700">
+              <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
+                <Sparkles className="w-6 h-6 text-primary" />
+                Analyze Image with AI
+              </h2>
+              <button
+                onClick={handleCloseVisionModal}
+                className="p-1 rounded-full text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+                aria-label="Close modal"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+            <div className="flex-grow flex flex-col md:flex-row gap-4 p-4 overflow-auto">
+              <div className="w-full md:w-1/3 flex flex-col gap-4">
+                  <h3 className="text-md font-semibold text-slate-700 dark:text-slate-300">1. Upload an Image</h3>
+                  <div className="aspect-video bg-slate-100 dark:bg-slate-700/50 rounded-lg flex items-center justify-center border-2 border-dashed border-slate-300 dark:border-slate-600">
+                      {visionImage ? (
+                          <img src={URL.createObjectURL(visionImage)} alt="Preview" className="max-h-full max-w-full object-contain rounded-md" />
+                      ) : (
+                          <div className="text-center text-slate-500 dark:text-slate-400 p-4">
+                              <ImageIcon className="w-10 h-10 mx-auto mb-2" />
+                              <p>Image preview will appear here.</p>
+                          </div>
+                      )}
+                  </div>
+                  <input
+                      id="imageUpload"
+                      type="file"
+                      accept="image/*"
+                      onChange={(e) => {
+                          if (e.target.files && e.target.files[0]) {
+                              setVisionImage(e.target.files[0]);
+                              setGeneratedHtml(null);
+                              setVisionError(null);
+                          }
+                      }}
+                      className="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20"
+                  />
+                   <button
+                      type="button"
+                      onClick={handleAnalyzeImage}
+                      disabled={isGenerating || !visionImage}
+                      className="flex items-center justify-center gap-2 w-full px-4 py-2 text-sm font-semibold bg-primary text-white rounded-md hover:bg-blue-600 transition-colors disabled:bg-slate-400 disabled:cursor-not-allowed"
+                  >
+                      {isGenerating ? (
+                          <>
+                          <LoaderCircle className="w-4 h-4 animate-spin" />
+                          Generating...
+                          </>
+                      ) : (
+                          'Generate HTML from Image'
+                      )}
+                  </button>
+                  {visionError && <p className="text-sm text-red-500 mt-2">{visionError}</p>}
+              </div>
+              <div className="w-full md:w-2/3 flex flex-col">
+                   <h3 className="text-md font-semibold text-slate-700 dark:text-slate-300 mb-2">2. Generated HTML Preview</h3>
+                   <div className="flex-grow bg-white border border-slate-300 dark:border-slate-600 rounded-lg overflow-hidden">
+                      {generatedHtml ? (
+                           <iframe
+                              srcDoc={generatedHtml}
+                              title="Generated HTML Preview"
+                              className="w-full h-full border-0"
+                              sandbox="allow-scripts"
+                          />
+                      ) : (
+                          <div className="w-full h-full flex items-center justify-center text-slate-500 dark:text-slate-400 p-4 text-center">
+                              {isGenerating ? 'AI is working its magic...' : 'HTML preview will be displayed here after generation.'}
+                          </div>
+                      )}
+                   </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default App;

frontend/src/components/HeaderBar.tsx

@@ -0,0 +1,90 @@
+import React, { useState, FormEvent } from 'react';
+// FIX: Import Sparkles icon for AI feature button
+import { Search, RefreshCw, X, FolderPlus, Sparkles } from 'lucide-react';
+
+interface HeaderBarProps {
+  onSearch: (term: string) => void;
+  onRefresh: () => void;
+  onCreateFolder: () => void;
+  // FIX: Add prop for new AI feature
+  onAnalyzeImage: () => void;
+  isLoading: boolean;
+}
+
+const HeaderBar: React.FC<HeaderBarProps> = ({ onSearch, onRefresh, onCreateFolder, onAnalyzeImage, isLoading }) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSearch = (e: FormEvent) => {
+    e.preventDefault();
+    onSearch(inputValue);
+  };
+
+  const handleClear = () => {
+    setInputValue('');
+    onSearch('');
+  };
+
+  return (
+    <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm p-4 rounded-lg shadow-lg mb-8 sticky top-4 z-10 border border-slate-200 dark:border-slate-700">
+      <form onSubmit={handleSearch} className="flex flex-col md:flex-row items-center gap-4">
+        <div className="relative w-full">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 pointer-events-none" />
+          <input
+            type="text"
+            placeholder="Search files by name..."
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            className="w-full pl-10 pr-10 py-2 border border-slate-300 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
+          />
+          {inputValue && (
+             <button
+              type="button"
+              onClick={handleClear}
+              className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
+              aria-label="Clear search"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+        <div className="flex items-center gap-2 w-full md:w-auto flex-shrink-0">
+            <button
+              type="button"
+              onClick={onCreateFolder}
+              className="flex items-center justify-center gap-2 w-full md:w-auto px-4 py-2 bg-green-500 text-white font-semibold rounded-md hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-500 transition-colors"
+            >
+              <FolderPlus className="w-5 h-5" />
+              <span>New Folder</span>
+            </button>
+            {/* FIX: Add new button for AI Vision feature */}
+            <button
+              type="button"
+              onClick={onAnalyzeImage}
+              className="flex items-center justify-center gap-2 w-full md:w-auto px-4 py-2 bg-purple-500 text-white font-semibold rounded-md hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-500 transition-colors"
+            >
+              <Sparkles className="w-5 h-5" />
+              <span>Analyze Image</span>
+            </button>
+            <button
+              type="submit"
+              className="flex items-center justify-center gap-2 w-full md:w-auto px-4 py-2 bg-slate-700 text-white font-semibold rounded-md hover:bg-slate-800 dark:bg-slate-600 dark:hover:bg-slate-500 transition-colors"
+            >
+              <Search className="w-5 h-5" />
+              <span>Search</span>
+            </button>
+            <button
+              type="button"
+              onClick={onRefresh}
+              disabled={isLoading}
+              className="flex items-center justify-center gap-2 w-full md:w-auto px-4 py-2 bg-primary text-white font-semibold rounded-md hover:bg-blue-600 transition-colors disabled:bg-slate-400 disabled:cursor-not-allowed"
+            >
+              <RefreshCw className={`w-5 h-5 ${isLoading ? 'animate-spin' : ''}`} />
+              <span>Refresh</span>
+            </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default HeaderBar;

frontend/types.ts

@@ -1,9 +1,17 @@
 
-export interface Person {
-  id: string;
-  firstName: string;
-  lastName: string;
-  linkedinUrl: string;
+export interface FileData {
+  name: string;
+  type: 'pdf' | 'html' | string; // Allow for other types
+  url: string;
+  size: number;
+  lastModified: string;
 }
 
-export type NewPerson = Omit<Person, 'id'>;
+export interface FolderData {
+  name: string;
+  files: FileData[];
+}
+
+export interface ApiResponse {
+  folders: FolderData[];
+}

frontend/utils/formatters.ts

@@ -0,0 +1,24 @@
+
+export const formatBytes = (bytes: number, decimals = 2): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};
+
+export const formatDate = (dateString: string): string => {
+  try {
+    return new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    }).format(new Date(dateString));
+  } catch (error) {
+    return 'Invalid Date';
+  }
+};

frontend/vite.config.ts

@@ -4,15 +4,10 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, '.', '');
-    const appName = env.VITE_APP_NAME || 'ResumeFormatter';
+    const appName = env.VITE_APP_NAME || 'resumeformatter';
     
     return {
       base: `/${appName}/`,
-      build: {
-        assetsDir: 'assets',
-        outDir: 'dist',
-        emptyOutDir: true,
-      },
       server: {
         port: 3000,
         host: '0.0.0.0',