import React, { useState, useEffect } from "react" import { useFireproof } from "use-fireproof" import { callAI } from "call-ai" import { ImgGen } from "use-vibes" export default function InternTimesheetTracker() { const { database, useLiveQuery, useDocument } = useFireproof("intern-timesheet-auth") const [activeTab, setActiveTab] = useState("timesheet") const [currentUser, setCurrentUser] = useState(null) const [loginMode, setLoginMode] = useState("login") // "login", "register", or "recovery" // Update page title and URL useEffect(() => { document.title = "Intern Time Log - vibes.diy" }, []) // Login/Register form const { doc: authForm, merge: mergeAuthForm, reset: resetAuthForm } = useDocument({ email: "", password: "", name: "", role: "intern", // "intern" or "manager" department: "", securityQuestion: "What was your first pet's name?", securityAnswer: "" }) // Password recovery form const { doc: recoveryForm, merge: mergeRecoveryForm, reset: resetRecoveryForm } = useDocument({ email: "", securityAnswer: "" }) // Get all users const { docs: users } = useLiveQuery("type", { key: "user" }) // Get current active session for current user const { docs: activeSessions } = useLiveQuery( (doc) => [doc.type, doc.userId, doc.status], { prefix: ["timesheet", currentUser?._id, "active"] } ) // Get timesheet entries - show all for managers, only own for interns const { docs: allTimesheetEntries } = useLiveQuery("type", { key: "timesheet", descending: true }) // Filter entries based on user role const timesheetEntries = currentUser?.role === "manager" ? allTimesheetEntries : allTimesheetEntries.filter(entry => entry.userId === currentUser?._id) // Get current week entries const currentWeekStart = new Date() currentWeekStart.setDate(currentWeekStart.getDate() - currentWeekStart.getDay()) currentWeekStart.setHours(0, 0, 0, 0) const weeklyEntries = timesheetEntries.filter(entry => { const entryDate = new Date(entry.date) return entryDate >= currentWeekStart }) // Get weekly reports - show all for managers, only own for interns const { docs: allWeeklyReports } = useLiveQuery("type", { key: "weekly-report", descending: true }) const weeklyReports = currentUser?.role === "manager" ? allWeeklyReports : allWeeklyReports.filter(report => report.userId === currentUser?._id) const [currentTime, setCurrentTime] = useState(new Date()) const [isClockingIn, setIsClockingIn] = useState(false) const [isGeneratingReport, setIsGeneratingReport] = useState(false) const [authError, setAuthError] = useState("") const [recoveryError, setRecoveryError] = useState("") const [recoverySuccess, setRecoverySuccess] = useState("") const [foundUser, setFoundUser] = useState(null) // Update current time every second useEffect(() => { const timer = setInterval(() => setCurrentTime(new Date()), 1000) return () => clearInterval(timer) }, []) // Check for saved user session useEffect(() => { const savedUser = localStorage.getItem("timesheetUser") if (savedUser) { const user = JSON.parse(savedUser) // Verify user still exists in database const existingUser = users.find(u => u._id === user._id) if (existingUser) { setCurrentUser(existingUser) } else { localStorage.removeItem("timesheetUser") } } }, [users]) const activeSession = activeSessions[0] const isActive = !!activeSession // Authentication functions const handleLogin = async () => { setAuthError("") if (!authForm.email || !authForm.password) { setAuthError("Please enter both email and password") return } const user = users.find(u => u.email === authForm.email && u.password === authForm.password) if (!user) { setAuthError("Invalid email or password") return } setCurrentUser(user) localStorage.setItem("timesheetUser", JSON.stringify(user)) resetAuthForm() } const handleRegister = async () => { setAuthError("") if (!authForm.email || !authForm.password || !authForm.name || !authForm.securityAnswer) { setAuthError("Please fill in all required fields including security question") return } const existingUser = users.find(u => u.email === authForm.email) if (existingUser) { setAuthError("User with this email already exists") return } const newUser = { type: "user", email: authForm.email, password: authForm.password, // In production, this should be hashed name: authForm.name, role: authForm.role, department: authForm.department, securityQuestion: authForm.securityQuestion, securityAnswer: authForm.securityAnswer.toLowerCase().trim(), createdAt: new Date().toISOString() } const result = await database.put(newUser) const savedUser = await database.get(result.id) setCurrentUser(savedUser) localStorage.setItem("timesheetUser", JSON.stringify(savedUser)) resetAuthForm() } const handleLogout = () => { setCurrentUser(null) localStorage.removeItem("timesheetUser") setActiveTab("timesheet") } // Password recovery functions const handleEmailLookup = () => { setRecoveryError("") setRecoverySuccess("") if (!recoveryForm.email) { setRecoveryError("Please enter your email address") return } const user = users.find(u => u.email === recoveryForm.email) if (!user) { setRecoveryError("No account found with this email address") return } setFoundUser(user) setRecoverySuccess(`Security Question: ${user.securityQuestion}`) } const handlePasswordRecovery = () => { setRecoveryError("") if (!recoveryForm.securityAnswer || !foundUser) { setRecoveryError("Please answer the security question") return } const userAnswer = recoveryForm.securityAnswer.toLowerCase().trim() const storedAnswer = foundUser.securityAnswer.toLowerCase().trim() if (userAnswer !== storedAnswer) { setRecoveryError("Incorrect security answer") return } setRecoverySuccess(`Your password is: ${foundUser.password}`) } const resetRecoveryProcess = () => { setFoundUser(null) setRecoveryError("") setRecoverySuccess("") resetRecoveryForm() } // Demo data function for testing const createDemoData = async () => { const demoPrompt = "Generate sample timesheet and user data for testing an intern timesheet system. Include 2 interns and 1 manager with realistic work entries." const demoData = await callAI(demoPrompt, { schema: { properties: { users: { type: "array", items: { type: "object", properties: { email: { type: "string" }, password: { type: "string" }, name: { type: "string" }, role: { type: "string" }, department: { type: "string" } } } }, timesheets: { type: "array", items: { type: "object", properties: { internName: { type: "string" }, date: { type: "string" }, clockInTime: { type: "string" }, clockOutTime: { type: "string" }, workDescription: { type: "string" }, totalHours: { type: "number" }, department: { type: "string" } } } } } } }) const data = JSON.parse(demoData) // Create demo users with security questions for (const user of data.users) { const result = await database.put({ type: "user", ...user, securityQuestion: "What was your first pet's name?", securityAnswer: user.role === "manager" ? "fluffy" : "buddy", createdAt: new Date().toISOString() }) // Create demo timesheet entries const savedUser = await database.get(result.id) const userTimesheets = data.timesheets.filter(t => t.internName === user.name) for (const timesheet of userTimesheets) { await database.put({ type: "timesheet", userId: savedUser._id, status: "completed", ...timesheet, createdAt: new Date().toISOString() }) } } alert("Demo data created! Try logging in with the generated users. Security answer for all demo users is either 'fluffy' or 'buddy'.") } // Fixed Clock in function const handleClockIn = async () => { if (!currentUser) { alert("Please log in first") return } // Check if already clocked in if (isActive) { alert("You are already clocked in") return } setIsClockingIn(true) const clockInTime = new Date().toLocaleTimeString() const currentDate = new Date().toISOString().split('T')[0] try { await database.put({ type: "timesheet", userId: currentUser._id, internName: currentUser.name, department: currentUser.department, date: currentDate, clockInTime, clockOutTime: "", workDescription: "", status: "active", totalHours: 0, createdAt: new Date().toISOString() }) } catch (error) { console.error("Error clocking in:", error) alert("Failed to clock in. Please try again.") } finally { setIsClockingIn(false) } } // Clock out function const handleClockOut = async (sessionDoc = null) => { const session = sessionDoc || activeSession if (!session) return const clockOutTime = new Date().toLocaleTimeString() const clockIn = new Date(`1970-01-01 ${session.clockInTime}`) const clockOut = new Date(`1970-01-01 ${clockOutTime}`) let totalHours = (clockOut - clockIn) / (1000 * 60 * 60) if (totalHours < 0) totalHours += 24 // Handle overnight sessions await database.put({ ...session, clockOutTime, totalHours: Math.round(totalHours * 100) / 100, status: "completed" }) } // Update work description for active session const updateWorkDescription = async (description) => { if (!activeSession) return await database.put({ ...activeSession, workDescription: description }) } // Generate weekly report const generateWeeklyReport = async (targetUserId = null) => { const userId = targetUserId || currentUser._id const userName = targetUserId ? users.find(u => u._id === targetUserId)?.name : currentUser.name setIsGeneratingReport(true) try { const userEntries = weeklyEntries.filter(entry => targetUserId ? entry.userId === targetUserId : entry.userId === currentUser._id ) const completedEntries = userEntries.filter(entry => entry.status === "completed") const totalHours = completedEntries.reduce((sum, entry) => sum + (entry.totalHours || 0), 0) const weekStart = new Date(currentWeekStart) const weekEnd = new Date(weekStart) weekEnd.setDate(weekEnd.getDate() + 6) const reportPrompt = `Generate a comprehensive weekly internship report for ${userName} for the week of ${weekStart.toLocaleDateString()} to ${weekEnd.toLocaleDateString()}. Timesheet Data: ${JSON.stringify(completedEntries.map(entry => ({ date: entry.date, hours: entry.totalHours, work: entry.workDescription })))} Total Hours: ${totalHours} Create a professional report with executive summary, accomplishments, and recommendations.` const report = await callAI(reportPrompt, { schema: { properties: { weekPeriod: { type: "string" }, executiveSummary: { type: "string" }, totalHours: { type: "number" }, keyAccomplishments: { type: "array", items: { type: "string" } }, skillsDeveloped: { type: "array", items: { type: "string" } }, nextWeekGoals: { type: "array", items: { type: "string" } }, managerRecommendations: { type: "string" } } } }) const reportData = JSON.parse(report) await database.put({ type: "weekly-report", userId: userId, weekStart: weekStart.toISOString(), weekEnd: weekEnd.toISOString(), internName: userName, generatedBy: currentUser._id, generatedByName: currentUser.name, ...reportData, generatedAt: new Date().toISOString(), status: "generated" }) alert("Weekly report generated successfully!") } catch (error) { console.error("Error generating weekly report:", error) alert("Failed to generate weekly report") } finally { setIsGeneratingReport(false) } } const totalWeeklyHours = weeklyEntries .filter(entry => entry.status === "completed" && (!currentUser || currentUser.role === "manager" || entry.userId === currentUser._id)) .reduce((total, entry) => total + (entry.totalHours || 0), 0) // Login/Register/Recovery Screen if (!currentUser) { return (

🔐 INTERN TIME LOG

interntimelog.vibes.diy

Secure access for **interns** and **managers** with **password recovery** support.

{/* Mode Toggle */}

{/* Error Messages */} {authError && (

{authError}

)} {recoveryError && (

{recoveryError}

)} {recoverySuccess && (

{recoverySuccess}

)} {/* Login Form */} {loginMode === "login" && (

Email * mergeAuthForm({ email: e.target.value })} placeholder="your@email.com" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

Password * mergeAuthForm({ password: e.target.value })} placeholder="Enter password" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

)} {/* Register Form */} {loginMode === "register" && (

Full Name * mergeAuthForm({ name: e.target.value })} placeholder="Enter your full name" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

Role *

Department mergeAuthForm({ department: e.target.value })} placeholder="e.g., Engineering, Marketing" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

Email * mergeAuthForm({ email: e.target.value })} placeholder="your@email.com" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

Password * mergeAuthForm({ password: e.target.value })} placeholder="Enter password" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

Security Question *

Security Answer * mergeAuthForm({ securityAnswer: e.target.value })} placeholder="Enter your answer" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

)} {/* Recovery Form */} {loginMode === "recovery" && (

{!foundUser ? ( <>

Email Address * mergeRecoveryForm({ email: e.target.value })} placeholder="Enter your email" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

) : ( <>

Account found: {foundUser.name}

Security Answer * mergeRecoveryForm({ securityAnswer: e.target.value })} placeholder="Enter your answer" className="w-full p-3 border-3 border-black text-lg bg-yellow-50" />

)}

)} {users.length === 0 && (

No users exist yet. Create demo data for testing:

)}

) } return (

{/* Header */}

⏰ INTERN TIME LOG

interntimelog.vibes.diy

Welcome, {currentUser.name} ({currentUser.role}) - {currentUser.department}

Current Time: {currentTime.toLocaleTimeString()}

{/* Tab Navigation */}

{currentUser.role === "manager" && ( )}

{/* Timesheet Tab */} {activeTab === "timesheet" && currentUser.role === "intern" && ( <> {/* Clock In/Out Section */}

🕐 CLOCK IN/OUT

{!isActive ? (

) : (

CURRENTLY CLOCKED IN

Started: {activeSession.clockInTime}

Date: {activeSession.date}

What are you working on?

updateWorkDescription(e.target.value)}
                      placeholder="Describe your current tasks and activities..."
                      rows={4}
                      className="w-full p-3 border-3 border-black text-lg bg-yellow-50"
                    />
                  </div>
                  
                  <button
                    onClick={() => handleClockOut()}
                    className="w-full bg-red-400 hover:bg-red-500 text-black font-black text-xl p-4 border-3 border-black shadow-lg transition-colors"
                  >
                    ⏰ CLOCK OUT
                  </button>
                </div>
              )}
            </div>

{/* My Weekly Summary */}
            <div className="bg-white border-4 border-black shadow-lg p-6 mb-6">
              <div className="flex justify-between items-center mb-4">
                <h2 className="text-2xl font-black text-black">📊 MY WEEK'S HOURS</h2>
                <div className="text-xl font-black text-black bg-yellow-200 px-4 py-2 border-2 border-black">
                  Total: {Math.round(totalWeeklyHours * 100) / 100} hrs
                </div>
              </div>
              
              <div className="space-y-3">
                {weeklyEntries.length === 0 ? (
                  <p className="text-lg italic text-gray-600">No timesheet entries this week</p>
                ) : (
                  weeklyEntries
                    .sort((a, b) => new Date(b.date + " " + (b.clockInTime || "00:00")) - new Date(a.date + " " + (a.clockInTime || "00:00")))
                    .map((entry) => (
                      <div key={entry._id} className="bg-gray-50 border-2 border-black p-4">
                        <div className="flex justify-between items-start mb-2">
                          <div>
                            <h3 className="font-black text-lg">{entry.date}</h3>
                            <p className="font-bold">
                              {entry.clockInTime} - {entry.clockOutTime || "Active"} 
                              {entry.status === "completed" && ` (${entry.totalHours} hrs)`}
                            </p>
                          </div>
                          <div className="flex gap-2">
                            <span className={`px-2 py-1 text-xs font-bold border-2 border-black ${
                              entry.status === "active" ? "bg-lime-200" : "bg-gray-200"
                            }`}>
                              {entry.status.toUpperCase()}
                            </span>
                            {entry.status === "active" && entry.userId === currentUser._id && (
                              <button
                                onClick={() => handleClockOut(entry)}
                                className="bg-red-300 hover:bg-red-400 text-black font-bold px-2 py-1 text-xs border-2 border-black"
                              >
                                CLOCK OUT
                              </button>
                            )}
                          </div>
                        </div>
                        {entry.workDescription && (
                          <div className="bg-white border-2 border-black p-2 mt-2">
                            <p className="text-sm font-bold text-gray-800">{entry.workDescription}</p>
                          </div>
                        )}
                      </div>
                    ))
                )}
              </div>
            </div>
          </>
        )}

{/* Manager Timesheet Overview */}
        {activeTab === "timesheet" && currentUser.role === "manager" && (
          <div className="bg-white border-4 border-black shadow-lg p-6 mb-6">
            <h2 className="text-2xl font-black text-black mb-4">👥 ALL INTERN TIMESHEETS</h2>
            <p className="text-lg italic mb-6 text-gray-700">
              **Manager view:** Monitor all intern activity and hours across your department.
            </p>
            
            <div className="space-y-4">
              {timesheetEntries.length === 0 ? (
                <p className="text-lg italic text-gray-600">No timesheet entries found</p>
              ) : (
                timesheetEntries
                  .sort((a, b) => new Date(b.date + " " + (b.clockInTime || "00:00")) - new Date(a.date + " " + (a.clockInTime || "00:00")))
                  .map((entry) => {
                    const entryUser = users.find(u => u._id === entry.userId)
                    return (
                      <div key={entry._id} className="bg-gray-50 border-2 border-black p-4">
                        <div className="flex justify-between items-start mb-2">
                          <div>
                            <h3 className="font-black text-lg">
                              {entry.internName} ({entryUser?.email}) - {entry.date}
                            </h3>
                            <p className="font-bold text-gray-600">{entry.department}</p>
                            <p className="font-bold">
                              {entry.clockInTime} - {entry.clockOutTime || "Active"} 
                              {entry.status === "completed" && ` (${entry.totalHours} hrs)`}
                            </p>
                          </div>
                          <span className={`px-2 py-1 text-xs font-bold border-2 border-black ${
                            entry.status === "active" ? "bg-lime-200" : "bg-gray-200"
                          }`}>
                            {entry.status.toUpperCase()}
                          </span>
                        </div>
                        {entry.workDescription && (
                          <div className="bg-white border-2 border-black p-2 mt-2">
                            <p className="text-sm font-bold text-gray-800">{entry.workDescription}</p>
                          </div>
                        )}
                      </div>
                    )
                  })
              )}
            </div>
          </div>
        )}

{/* Reports Tab */}
        {activeTab === "reports" && (
          <>
            <div className="bg-white border-4 border-black shadow-lg p-6 mb-6">
              <h2 className="text-2xl font-black text-black mb-4">📊 WEEKLY REPORTS</h2>
              
              <button
                onClick={() => generateWeeklyReport()}
                disabled={isGeneratingReport}
                className="mb-6 bg-blue-400 hover:bg-blue-500 disabled:bg-gray-300 text-black font-black text-lg px-6 py-3 border-3 border-black shadow-lg transition-colors"
              >
                {isGeneratingReport ? "GENERATING..." : "📧 GENERATE MY WEEKLY REPORT"}
              </button>

<div className="space-y-4">
                {weeklyReports.length === 0 ? (
                  <p className="text-lg italic text-gray-600">No weekly reports generated yet</p>
                ) : (
                  weeklyReports.map((report) => (
                    <div key={report._id} className="bg-gray-50 border-2 border-black p-4">
                      <div className="flex justify-between items-start mb-2">
                        <div>
                          <h3 className="font-black text-lg">
                            {report.internName} - Week of {new Date(report.weekStart).toLocaleDateString()}
                          </h3>
                          <p className="font-bold text-gray-700">Total Hours: {report.totalHours}</p>
                          <p className="text-sm text-gray-600">
                            Generated by: {report.generatedByName} on {new Date(report.generatedAt).toLocaleDateString()}
                          </p>
                        </div>
                        <span className="px-2 py-1 text-xs font-bold border-2 border-black bg-green-200">
                          COMPLETED
                        </span>
                      </div>
                      
                      <div className="bg-white border-2 border-black p-3 mt-2">
                        <h4 className="font-bold mb-2">Executive Summary:</h4>
                        <p className="text-sm text-gray-800 mb-3">{report.executiveSummary}</p>
                        
                        {report.keyAccomplishments && report.keyAccomplishments.length > 0 && (
                          <div>
                            <h4 className="font-bold mb-1">Key Accomplishments:</h4>
                            <ul className="list-disc list-inside text-sm text-gray-800">
                              {report.keyAccomplishments.map((item, index) => (
                                <li key={index}>{item}</li>
                              ))}
                            </ul>
                          </div>
                        )}
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>
          </>
        )}

{/* Manager Dashboard */}
        {activeTab === "manage" && currentUser.role === "manager" && (
          <div className="space-y-6">
            {/* Intern Overview */}
            <div className="bg-white border-4 border-black shadow-lg p-6">
              <h2 className="text-2xl font-black text-black mb-4">👥 INTERN MANAGEMENT</h2>
              <p className="text-lg italic mb-6 text-gray-700">
                **Manager Dashboard:** Generate reports for any intern and view comprehensive analytics.
              </p>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {users.filter(user => user.role === "intern").map((intern) => {
                  const internEntries = allTimesheetEntries.filter(entry => entry.userId === intern._id)
                  const weeklyInternEntries = internEntries.filter(entry => {
                    const entryDate = new Date(entry.date)
                    return entryDate >= currentWeekStart
                  })
                  const totalHours = weeklyInternEntries
                    .filter(entry => entry.status === "completed")
                    .reduce((sum, entry) => sum + (entry.totalHours || 0), 0)
                  
                  return (
                    <div key={intern._id} className="bg-gray-50 border-2 border-black p-4">
                      <h3 className="font-black text-lg mb-2">{intern.name}</h3>
                      <p className="font-bold text-gray-700">{intern.email}</p>
                      <p className="font-bold text-gray-700">{intern.department}</p>
                      <p className="text-sm text-gray-600 mb-4">
                        This week: {Math.round(totalHours * 100) / 100} hours
                      </p>
                      
                      <button
                        onClick={() => generateWeeklyReport(intern._id)}
                        disabled={isGeneratingReport}
                        className="w-full bg-blue-400 hover:bg-blue-500 disabled:bg-gray-300 text-black font-bold px-3 py-2 border-2 border-black text-sm"
                      >
                        📊 GENERATE REPORT
                      </button>
                    </div>
                  )
                })}
              </div>
            </div>

{/* Department Analytics */}
            <div className="bg-white border-4 border-black shadow-lg p-6">
              <h2 className="text-2xl font-black text-black mb-4">📈 DEPARTMENT ANALYTICS</h2>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-lime-100 border-2 border-black p-4">
                  <h3 className="font-bold text-lg">Total Interns</h3>
                  <p className="text-2xl font-black">
                    {users.filter(user => user.role === "intern").length}
                  </p>
                </div>
                
                <div className="bg-blue-100 border-2 border-black p-4">
                  <h3 className="font-bold text-lg">Total Weekly Hours</h3>
                  <p className="text-2xl font-black">
                    {Math.round(allTimesheetEntries
                      .filter(entry => {
                        const entryDate = new Date(entry.date)
                        return entryDate >= currentWeekStart && entry.status === "completed"
                      })
                      .reduce((sum, entry) => sum + (entry.totalHours || 0), 0) * 100) / 100}
                  </p>
                </div>
                
                <div className="bg-yellow-100 border-2 border-black p-4">
                  <h3 className="font-bold text-lg">Active Sessions</h3>
                  <p className="text-2xl font-black">
                    {allTimesheetEntries.filter(entry => entry.status === "active").length}
                  </p>
                </div>
              </div>
            </div>
          </div>
        )}

{/* Usage Instructions */}
        <div className="bg-white border-4 border-black shadow-lg p-6">
          <h2 className="text-2xl font-black text-black mb-4">📋 HOW TO USE INTERN TIME LOG</h2>
          <div className="space-y-2 text-lg">
            <p className="italic">
              **Available at:** *interntimelog.vibes.diy* for easy access from any device
            </p>
            <p className="italic">
              **Account Security:** Register with a security question for password recovery
            </p>
            <p className="italic">
              **Interns:** Log in with your credentials to clock in/out and track your daily work activities
            </p>
            <p className="italic">
              **Managers:** Access all intern timesheets, generate reports, and monitor department productivity
            </p>
            <p className="italic">
              **Password Recovery:** Use the Recovery tab to retrieve forgotten passwords with your security answer
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>