initial commit

This commit is contained in:
jason
2026-03-12 17:09:22 -05:00
commit 4982e5392e
35 changed files with 9803 additions and 0 deletions

View File

@@ -0,0 +1,203 @@
"use client";
import { useState, useEffect } from "react";
import { Search, ChevronDown, ChevronUp, ExternalLink, FileText, User, Calendar, Settings, ListChecks, Save } from "lucide-react";
export default function AdminDashboard() {
const [reports, setReports] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState("");
const [expandedId, setExpandedId] = useState<string | null>(null);
const [tab, setTab] = useState<"REPORTS" | "SETTINGS">("REPORTS");
const [folderId, setFolderId] = useState("");
const [saving, setSaving] = useState(false);
useEffect(() => {
fetchReports();
fetchSettings();
}, []);
const fetchSettings = async () => {
try {
const res = await fetch("/api/admin/settings");
const data = await res.json();
if (data.GOOGLE_DRIVE_FOLDER_ID) {
setFolderId(data.GOOGLE_DRIVE_FOLDER_ID);
}
} catch (error) {
console.error("Failed to fetch settings");
}
};
const saveSetting = async (key: string, value: string) => {
setSaving(true);
try {
await fetch("/api/admin/settings", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ key, value }),
});
alert("Setting saved successfully!");
} catch (error) {
alert("Failed to save setting");
} finally {
setSaving(false);
}
};
const fetchReports = async () => {
try {
const res = await fetch("/api/reports");
const data = await res.json();
setReports(data);
} catch (error) {
console.error("Failed to fetch reports");
} finally {
setLoading(false);
}
};
const filteredReports = reports.filter(r =>
r.user?.name?.toLowerCase().includes(search.toLowerCase()) ||
r.managerName?.toLowerCase().includes(search.toLowerCase())
);
if (loading) return <div className="text-center py-20 animate-pulse">Loading reports...</div>;
return (
<div className="space-y-6">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex items-center gap-4">
<button
onClick={() => setTab("REPORTS")}
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm font-medium ${
tab === "REPORTS" ? "bg-accent-primary text-white" : "hover:bg-white/5 text-text-dim"
}`}
>
<ListChecks size={18} /> Reports
</button>
<button
onClick={() => setTab("SETTINGS")}
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm font-medium ${
tab === "SETTINGS" ? "bg-accent-primary text-white" : "hover:bg-white/5 text-text-dim"
}`}
>
<Settings size={18} /> Settings
</button>
</div>
{tab === "REPORTS" && (
<div className="relative max-w-sm w-full">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-text-dim" size={18} />
<input
type="text"
placeholder="Search by employee or manager..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="glass-input w-full pl-10 pr-4 py-2 rounded-lg text-sm"
/>
</div>
)}
</div>
{tab === "REPORTS" ? (
<div className="grid gap-4">
{filteredReports.map((report) => (
<div key={report.id} className="glass-card overflow-hidden transition-all duration-300">
<div
className="p-4 flex items-center justify-between cursor-pointer hover:bg-white/5"
onClick={() => setExpandedId(expandedId === report.id ? null : report.id)}
>
<div className="flex items-center gap-4">
<div className="h-10 w-10 rounded-full bg-accent-primary/20 flex items-center justify-center text-accent-primary">
<User size={20} />
</div>
<div>
<h3 className="font-semibold">{report.user?.name || "Unknown User"}</h3>
<p className="text-xs text-text-dim flex items-center gap-1">
<Calendar size={12} /> {new Date(report.date).toLocaleDateString()} Manager: {report.managerName}
</p>
</div>
</div>
<div className="flex items-center gap-4">
<span className={`text-[10px] uppercase tracking-wider px-2 py-1 rounded-full font-bold ${
report.status === 'SUBMITTED' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
}`}>
{report.status}
</span>
{expandedId === report.id ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
</div>
</div>
{expandedId === report.id && (
<div className="p-6 border-t border-white/10 bg-black/20 space-y-6 animate-fade-in">
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-3">
<h4 className="text-xs font-bold uppercase text-accent-primary tracking-widest">Planned Tasks</h4>
{report.tasks.filter((t: any) => t.type === 'PLANNED').map((task: any) => (
<div key={task.id} className="text-sm border-l-2 border-accent-primary/30 pl-3 py-1">
<p className="font-medium">{task.description}</p>
<p className="text-xs text-text-dim">Est: {task.timeEstimate} {task.notes}</p>
</div>
))}
</div>
<div className="space-y-3">
<h4 className="text-xs font-bold uppercase text-accent-secondary tracking-widest">Completed Tasks</h4>
{report.tasks.filter((t: any) => t.type === 'COMPLETED').map((task: any) => (
<div key={task.id} className="text-sm border-l-2 border-accent-secondary/30 pl-3 py-1">
<p className="font-medium">{task.description}</p>
<div className="flex items-center justify-between">
<span className="text-[10px] text-text-dim italic">{task.status}</span>
{task.link && (
<a href={task.link} target="_blank" className="text-accent-secondary hover:underline flex items-center gap-1 text-[10px]">
<ExternalLink size={10} /> View Work
</a>
)}
</div>
</div>
))}
</div>
</div>
</div>
)}
</div>
))}
{filteredReports.length === 0 && <p className="text-center py-10 text-text-dim">No reports found matching your criteria.</p>}
</div>
) : (
<div className="glass-card p-8 space-y-8 animate-fade-in">
<div className="space-y-4">
<div>
<h3 className="text-lg font-semibold flex items-center gap-2">
<FileText size={20} className="text-accent-primary" /> Google Drive Configuration
</h3>
<p className="text-sm text-text-dim">Designate a specific folder where all exported reports will be saved.</p>
</div>
<div className="space-y-2">
<label className="text-xs font-bold uppercase text-text-dim tracking-wider">Google Drive Folder ID</label>
<input
type="text"
value={folderId}
onChange={(e) => setFolderId(e.target.value)}
placeholder="Enter Folder ID (from URL)"
className="glass-input w-full px-4 py-3 rounded-xl text-sm"
/>
<p className="text-[10px] text-text-dim italic">
Example ID: `1abc12345xyz_...` (Found in the URL of your Google Drive folder)
</p>
</div>
<button
onClick={() => saveSetting('GOOGLE_DRIVE_FOLDER_ID', folderId)}
disabled={saving}
className="btn-primary flex items-center gap-2 px-8"
>
<Save size={18} /> {saving ? "Saving..." : "Save Settings"}
</button>
</div>
</div>
)}
</div>
);
}

View File

@@ -0,0 +1,328 @@
"use client";
import { useSession, signIn, signOut } from "next-auth/react";
import { useState, useEffect } from "react";
import { Plus, Trash2, Send, Save, CheckCircle, Clock, Calendar, User as UserIcon, Link as LinkIcon, LogOut, ShieldCheck, ClipboardList } from "lucide-react";
import AdminDashboard from "./AdminDashboard";
export default function ReportForm() {
const { data: session, status } = useSession();
const [report, setReport] = useState<any>(null);
const [loading, setLoading] = useState(true);
const [managerName, setManagerName] = useState("");
const [plannedTasks, setPlannedTasks] = useState<any[]>([]);
const [completedTasks, setCompletedTasks] = useState<any[]>([]);
const [saving, setSaving] = useState(false);
const [view, setView] = useState<"REPORT" | "ADMIN">("REPORT");
useEffect(() => {
if (status === "authenticated") {
fetchReport();
}
}, [status]);
const fetchReport = async () => {
try {
const res = await fetch("/api/reports");
const data = await res.json();
const today = new Date().toISOString().split('T')[0];
const todayReport = data.find((r: any) => r.date.split('T')[0] === today);
if (todayReport) {
setReport(todayReport);
setManagerName(todayReport.managerName);
setPlannedTasks(todayReport.tasks.filter((t: any) => t.type === "PLANNED"));
setCompletedTasks(todayReport.tasks.filter((t: any) => t.type === "COMPLETED"));
}
} catch (error) {
console.error("Failed to fetch report", error);
} finally {
setLoading(false);
}
};
const startReport = async () => {
setSaving(true);
try {
const res = await fetch("/api/reports", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ managerName }),
});
const data = await res.json();
setReport(data);
} catch (error) {
alert("Failed to start report");
} finally {
setSaving(false);
}
};
const addTask = async (type: "PLANNED" | "COMPLETED") => {
if (!report) return;
const newTask = {
reportId: report.id,
type,
description: "",
timeEstimate: type === "PLANNED" ? "" : null,
notes: "",
status: type === "COMPLETED" ? "DONE" : "PENDING",
};
try {
const res = await fetch("/api/tasks", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(newTask),
});
const data = await res.json();
if (type === "PLANNED") setPlannedTasks([...plannedTasks, data]);
else setCompletedTasks([...completedTasks, data]);
} catch (error) {
alert("Failed to add task");
}
};
const updateTask = async (id: string, updates: any) => {
try {
await fetch("/api/tasks", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id, ...updates }),
});
if (updates.type === 'PLANNED') {
setPlannedTasks(plannedTasks.map(t => t.id === id ? { ...t, ...updates } : t));
} else {
setCompletedTasks(completedTasks.map(t => t.id === id ? { ...t, ...updates } : t));
}
} catch (error) {
console.error("Failed to update task");
}
};
const deleteTask = async (id: string, type: string) => {
try {
await fetch(`/api/tasks?id=${id}`, { method: "DELETE" });
if (type === "PLANNED") setPlannedTasks(plannedTasks.filter(t => t.id !== id));
else setCompletedTasks(completedTasks.filter(t => t.id !== id));
} catch (error) {
alert("Failed to delete task");
}
};
const exportToDrive = async () => {
if (!report) return;
setSaving(true);
try {
const res = await fetch(`/api/reports/${report.id}/export`, { method: "POST" });
const data = await res.json();
if (data.link) {
alert("Report exported to Google Drive!");
window.open(data.link, '_blank');
fetchReport();
} else {
alert("Export failed: " + data.error);
}
} catch (error) {
alert("Export error");
} finally {
setSaving(false);
}
};
if (status === "loading" || loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-accent-primary"></div>
</div>
);
}
if (!session) {
return (
<div className="flex flex-col items-center justify-center min-h-screen p-4">
<div className="glass-card p-8 max-w-md w-full text-center space-y-6 animate-fade-in">
<h1 className="text-4xl font-bold bg-gradient-to-r from-accent-primary to-accent-secondary bg-clip-text text-transparent">
WFH Tracker
</h1>
<p className="text-text-dim">Please sign in with your company Google account to access your daily reports.</p>
<button onClick={() => signIn("google")} className="btn-primary w-full flex items-center justify-center gap-2">
Continue with Google
</button>
</div>
</div>
);
}
return (
<div className="max-w-4xl mx-auto p-4 md:p-8 space-y-8 animate-fade-in">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold">{view === "REPORT" ? "Daily Report" : "Administration"}</h1>
<p className="text-text-dim flex items-center gap-2">
<Calendar size={16} /> {new Date().toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
</p>
</div>
<div className="flex items-center gap-4">
{session.user.role === "ADMIN" && (
<button
onClick={() => setView(view === "REPORT" ? "ADMIN" : "REPORT")}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors border border-white/10 text-sm font-medium"
>
{view === "REPORT" ? (
<><ShieldCheck size={18} className="text-accent-primary" /> Admin Panel</>
) : (
<><ClipboardList size={18} className="text-accent-primary" /> My Report</>
)}
</button>
)}
<span className="text-sm hidden md:inline">{session.user.name}</span>
<button onClick={() => signOut()} className="p-2 hover:bg-white/10 rounded-full transition-colors text-red-400" title="Logout">
<LogOut size={20} />
</button>
</div>
</div>
{view === "ADMIN" ? (
<AdminDashboard />
) : !report ? (
<div className="glass-card p-8 space-y-6">
<div className="space-y-4">
<label className="block text-sm font-medium text-text-dim">Assigning Manager</label>
<div className="relative">
<UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-text-dim" size={18} />
<input
type="text"
value={managerName}
onChange={(e) => setManagerName(e.target.value)}
placeholder="Manager's Name"
className="glass-input w-full pl-10 pr-4 py-3 rounded-xl"
/>
</div>
</div>
<button
disabled={!managerName || saving}
onClick={startReport}
className="btn-primary w-full disabled:opacity-50"
>
{saving ? "Starting..." : "Start Today's Report"}
</button>
</div>
) : (
<div className="space-y-8">
{/* Morning Section */}
<section className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold flex items-center gap-2"><Clock className="text-accent-primary" /> Morning Setup (Planned Tasks)</h2>
<button onClick={() => addTask("PLANNED")} className="btn-secondary flex items-center gap-2 py-2 px-4 text-sm">
<Plus size={16} /> Add Task
</button>
</div>
<div className="space-y-3">
{plannedTasks.map((task) => (
<div key={task.id} className="glass-card p-4 flex gap-4 group">
<div className="flex-1 space-y-3">
<input
type="text"
value={task.description}
onChange={(e) => updateTask(task.id, { description: e.target.value, type: 'PLANNED' })}
placeholder="Task description..."
className="bg-transparent border-b border-white/10 w-full py-1 focus:border-accent-primary outline-none transition-colors"
/>
<div className="flex gap-4">
<div className="flex-1">
<input
type="text"
value={task.timeEstimate || ""}
onChange={(e) => updateTask(task.id, { timeEstimate: e.target.value, type: 'PLANNED' })}
placeholder="Time estimate (e.g. 2h)"
className="bg-transparent text-sm text-text-dim border-none p-0 focus:ring-0 outline-none w-full"
/>
</div>
<div className="flex-1">
<input
type="text"
value={task.notes || ""}
onChange={(e) => updateTask(task.id, { notes: e.target.value, type: 'PLANNED' })}
placeholder="Short notes..."
className="bg-transparent text-sm text-text-dim border-none p-0 focus:ring-0 outline-none w-full"
/>
</div>
</div>
</div>
<button onClick={() => deleteTask(task.id, "PLANNED")} className="opacity-0 group-hover:opacity-100 p-2 text-red-400 transition-opacity">
<Trash2 size={18} />
</button>
</div>
))}
{plannedTasks.length === 0 && <p className="text-center py-4 text-text-dim border border-dashed border-white/10 rounded-xl">No tasks added yet.</p>}
</div>
</section>
{/* Evening Section */}
<section className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold flex items-center gap-2"><CheckCircle className="text-accent-secondary" /> Evening Review (Completed Tasks)</h2>
<button onClick={() => addTask("COMPLETED")} className="btn-secondary flex items-center gap-2 py-2 px-4 text-sm">
<Plus size={16} /> Add Completed
</button>
</div>
<div className="space-y-3">
{completedTasks.map((task) => (
<div key={task.id} className="glass-card p-4 flex gap-4 group">
<div className="flex-1 space-y-3">
<input
type="text"
value={task.description}
onChange={(e) => updateTask(task.id, { description: e.target.value, type: 'COMPLETED' })}
placeholder="What did you complete?"
className="bg-transparent border-b border-white/10 w-full py-1 focus:border-accent-secondary outline-none transition-colors"
/>
<div className="flex gap-4">
<select
value={task.status || "DONE"}
onChange={(e) => updateTask(task.id, { status: e.target.value, type: 'COMPLETED' })}
className="bg-transparent text-sm text-text-dim border-none p-0 focus:ring-0 outline-none appearance-none cursor-pointer"
>
<option value="DONE" className="bg-slate-800">Completed</option>
<option value="IN_PROGRESS" className="bg-slate-800">In Progress</option>
<option value="CANCELLED" className="bg-slate-800">Delayed</option>
</select>
<div className="flex-1 relative">
<LinkIcon size={14} className="absolute left-0 top-1/2 -translate-y-1/2 text-text-dim" />
<input
type="text"
value={task.link || ""}
onChange={(e) => updateTask(task.id, { link: e.target.value, type: 'COMPLETED' })}
placeholder="Google Drive link (optional)"
className="bg-transparent text-sm text-text-dim border-none pl-5 p-0 focus:ring-0 outline-none w-full"
/>
</div>
</div>
</div>
<button onClick={() => deleteTask(task.id, "COMPLETED")} className="opacity-0 group-hover:opacity-100 p-2 text-red-400 transition-opacity">
<Trash2 size={18} />
</button>
</div>
))}
{completedTasks.length === 0 && <p className="text-center py-4 text-text-dim border border-dashed border-white/10 rounded-xl">Add your achievements for today.</p>}
</div>
</section>
<footer className="pt-8 border-t border-white/10 flex justify-end gap-4">
<button
onClick={exportToDrive}
disabled={saving || report.status === 'SUBMITTED'}
className="btn-primary flex items-center gap-2 px-8"
>
{saving ? "Processing..." : (report.status === 'SUBMITTED' ? "Already Submitted" : "Finalize & Export to Drive")}
<Send size={18} />
</button>
</footer>
</div>
)}
</div>
);
}

View File

@@ -0,0 +1,7 @@
"use client";
import { SessionProvider } from "next-auth/react";
export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
return <SessionProvider>{children}</SessionProvider>;
};