import React, { useState, useRef } from 'react'; import { Users, Calendar, BrainCircuit, Printer, FileUp, Settings2, Loader2, ShieldCheck, ChevronDown, Info, CheckCircle2, XCircle, LayoutDashboard, Menu, X } from 'lucide-react'; const apiKey = ""; const appId = typeof __app_id !== 'undefined' ? __app_id : 'thq-sillanwali-pro'; const App = () => { const [isGenerating, setIsGenerating] = useState(false); const [isExtracting, setIsExtracting] = useState(false); const [rosterData, setRosterData] = useState(null); const [customInstructions, setCustomInstructions] = useState("Shift Pattern: M, E, N, OFF. Ensure every nurse gets 1 day off per week. Balance night shifts equally."); const [statusMsg, setStatusMsg] = useState({ type: '', text: '' }); const [isMenuOpen, setIsMenuOpen] = useState(true); const fileInputRef = useRef(null); const daysInMonth = Array.from({ length: 31 }, (_, i) => i + 1); // AI Extraction from Uploaded Sheet const handleFileUpload = async (event) => { const file = event.target.files[0]; if (!file) return; setIsExtracting(true); setStatusMsg({ type: 'info', text: 'AI is reading your uploaded sheet...' }); const reader = new FileReader(); reader.onloadend = async () => { const base64Data = reader.result.split(',')[1]; try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [ { text: "Extract names and duty roles from this hospital roster. Return JSON: {staff: [{name, role}]}" }, { inlineData: { mimeType: "image/png", data: base64Data } } ] }], generationConfig: { responseMimeType: "application/json" } }) }); const data = await response.json(); const extracted = JSON.parse(data.candidates[0].content.parts[0].text); setStatusMsg({ type: 'success', text: `Extracted ${extracted.staff?.length || 0} staff members.` }); } catch (error) { setStatusMsg({ type: 'error', text: 'Upload failed. Please try a clearer photo.' }); } finally { setIsExtracting(false); } }; reader.readAsDataURL(file); }; // AI Generation Logic const generateOfficialRoster = async () => { setIsGenerating(true); setStatusMsg({ type: 'info', text: 'AI is generating the March 2026 Roster...' }); const userQuery = `Create a 31-day duty roster for 12 staff members at THQ Hospital Sillanwali. Instructions: ${customInstructions}. Use codes: M, E, N, OFF. Format: { "data": [ { "name": "Name", "duty": "Area", "shifts": ["M", "E", "OFF", ...] } ] }`; try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: userQuery }] }], generationConfig: { responseMimeType: "application/json" } }) }); const res = await response.json(); const parsed = JSON.parse(res.candidates[0].content.parts[0].text); setRosterData(parsed.data); setStatusMsg({ type: 'success', text: 'Roster Generated Successfully!' }); } catch (error) { setStatusMsg({ type: 'error', text: 'Generation failed. Try again.' }); } finally { setIsGenerating(false); } }; return (

{

AI Control Center

{/* UPLOAD SECTION */}

1. Upload Sheet

{/* AI INSTRUCTIONS */}

2. Custom AI Rules

setCustomInstructions(e.target.value)}
                className="w-full h-28 p-2 text-xs bg-slate-950 border border-slate-700 rounded-lg text-slate-300 resize-none focus:ring-1 focus:ring-emerald-500"
                placeholder="Ex: No back-to-back nights..."
              />
              <button 
                onClick={generateOfficialRoster}
                disabled={isGenerating}
                className="w-full py-3 bg-white text-slate-900 hover:bg-emerald-50 rounded-xl text-xs font-extrabold flex items-center justify-center gap-2 transition-all shadow-lg active:scale-95 disabled:opacity-50"
              >
                {isGenerating ? <Loader2 size={14} className="animate-spin" /> : <BrainCircuit size={14} />}
                Generate Roster
              </button>
            </div>
          </div>
        </nav>
      </aside>

{/* MAIN VIEWPORT */}
      <main className="flex-1 flex flex-col min-w-0">
        
        {/* TOP STATUS BAR */}
        <header className="h-16 bg-white border-b border-slate-200 px-6 flex items-center justify-between print:hidden">
          <div className="flex items-center gap-4">
            {!isMenuOpen && (
              <button onClick={() => setIsMenuOpen(true)} className="p-2 hover:bg-slate-100 rounded">
                <Menu size={20}/>
              </button>
            )}
            <h2 className="font-bold text-slate-800">Duty Roster Preview</h2>
          </div>

<div className="flex items-center gap-3">
             {statusMsg.text && (
                <div className={`text-[10px] font-bold px-3 py-1.5 rounded-full flex items-center gap-2 ${
                  statusMsg.type === 'error' ? 'bg-red-100 text-red-700' : 
                  statusMsg.type === 'success' ? 'bg-emerald-100 text-emerald-700' : 'bg-blue-100 text-blue-700'
                }`}>
                  {statusMsg.text}
                </div>
              )}
            <button onClick={() => window.print()} className="flex items-center gap-2 px-4 py-2 bg-slate-800 text-white rounded-lg text-xs font-bold hover:bg-slate-700">
              <Printer size={14} /> Print
            </button>
          </div>
        </header>

{/* DOCUMENT PREVIEW */}
        <div className="flex-1 overflow-auto p-4 md:p-10 flex flex-col items-center scrollbar-hide">
          <div className="bg-white w-full max-w-[1100px] min-h-[1400px] shadow-2xl border border-slate-300 p-8 md:p-16 print:p-0 print:shadow-none print:border-0">
            
            {/* Header Area */}
            <div className="text-center mb-10 border-b-2 border-slate-900 pb-6">
              <h1 className="text-2xl font-black uppercase underline decoration-2 underline-offset-8">Duty Roster of Nurses, LHV's & Midwives</h1>
              <h2 className="text-xl font-bold uppercase mt-4 italic">For the Month of March - 2026</h2>
              <div className="flex justify-between mt-6 text-xs font-bold uppercase">
                <span>THQ Hospital Sillanwali</span>
                <span>District Sargodha</span>
              </div>
            </div>

{/* The Table */}
            <div className="border border-slate-900 overflow-x-auto">
              <table className="w-full border-collapse text-[9px]">
                <thead>
                  <tr className="bg-slate-50 border-b border-slate-900 font-bold">
                    <th className="border-r border-slate-900 p-1 w-8 text-center bg-slate-100">Sr.</th>
                    <th className="border-r border-slate-900 p-1 w-40 text-left px-2">NAME OF EMPLOYEE</th>
                    {daysInMonth.map(d => (
                      <th key={d} className="border-r border-slate-900 text-center w-5 bg-white py-2">{d}</th>
                    ))}
                    <th className="p-1 w-44 text-left px-2 bg-slate-50">DUTY PLACE</th>
                  </tr>
                </thead>
                <tbody>
                  {rosterData ? rosterData.map((row, idx) => (
                    </article></body></html>

Sillanwali Duty Pro AI