refactor: migrate to monorepo structure with Docker, PocketBase, and e2e tests
- Reorganize into apps/, packages/, docs/, e2e/, pocketbase/ directories - Add Dockerfiles for web, worker, and PocketBase services - Add docker-compose.yml for local orchestration - Add turbo.json for monorepo task management - Add Playwright e2e test infrastructure - Add PocketBase backend with migrations - Remove Vite/Next.js/ESLint/PostCSS config files - Update package.json with workspace dependencies - Add .env.example and .dockerignore
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import ReactGridLayout from 'react-grid-layout';
|
||||
import 'react-grid-layout/css/styles.css';
|
||||
import 'react-resizable/css/styles.css';
|
||||
|
||||
// WidthProvider and Responsive are namespace exports from react-grid-layout.
|
||||
// With @types/react-grid-layout's `export =` pattern, we access them via the module.
|
||||
const WidthProvider = (
|
||||
ReactGridLayout as unknown as {
|
||||
WidthProvider: <P extends React.ComponentType<React.ComponentProps<P>>>(
|
||||
component: P
|
||||
) => React.ComponentType<React.ComponentProps<P> & { measureBeforeMount?: boolean }>;
|
||||
}
|
||||
).WidthProvider;
|
||||
|
||||
const Responsive = (
|
||||
ReactGridLayout as unknown as {
|
||||
Responsive: React.ComponentType<ReactGridLayout.ResponsiveProps>;
|
||||
}
|
||||
).Responsive;
|
||||
|
||||
const ResponsiveGridLayout = WidthProvider(Responsive);
|
||||
|
||||
interface ResponsiveGridProps {
|
||||
layout: ReactGridLayout.Layout[];
|
||||
onLayoutChange: (newLayout: ReactGridLayout.Layout[]) => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function ResponsiveGrid({
|
||||
layout,
|
||||
onLayoutChange,
|
||||
children,
|
||||
}: ResponsiveGridProps) {
|
||||
return (
|
||||
<ResponsiveGridLayout
|
||||
className="layout"
|
||||
layouts={{ lg: layout }}
|
||||
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
|
||||
rowHeight={80}
|
||||
onLayoutChange={onLayoutChange}
|
||||
draggableHandle=".widget-drag-handle"
|
||||
compactType="vertical"
|
||||
isResizable
|
||||
>
|
||||
{children}
|
||||
</ResponsiveGridLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
'use client';
|
||||
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
export function CalendarMiniWidget() {
|
||||
const today = new Date();
|
||||
const daysInMonth = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth() + 1,
|
||||
0
|
||||
).getDate();
|
||||
const firstDay = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
1
|
||||
).getDay();
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Calendar className="h-4 w-4" aria-hidden="true" />
|
||||
{today.toLocaleString('default', { month: 'long' })}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="grid grid-cols-7 gap-1 text-center text-xs">
|
||||
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
|
||||
<div key={i} className="font-semibold text-muted-foreground">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: firstDay }).map((_, i) => (
|
||||
<div key={`empty-${i}`} />
|
||||
))}
|
||||
{Array.from({ length: daysInMonth }).map((_, i) => {
|
||||
const day = i + 1;
|
||||
const isToday = day === today.getDate();
|
||||
return (
|
||||
<div
|
||||
key={day}
|
||||
className={`rounded p-1 ${
|
||||
isToday
|
||||
? 'bg-primary text-primary-foreground font-semibold'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Flame } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
|
||||
interface Habit {
|
||||
id: string;
|
||||
name: string;
|
||||
current_streak: number;
|
||||
logged_today: boolean;
|
||||
}
|
||||
|
||||
export function HabitChecklistWidget() {
|
||||
const [habits, setHabits] = useState<Habit[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchHabits();
|
||||
}, []);
|
||||
|
||||
async function fetchHabits() {
|
||||
try {
|
||||
const response = await fetch('/api/habits');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setHabits(data.items || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch habits:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleHabit(id: string) {
|
||||
try {
|
||||
await fetch(`/api/habits/${id}/logs`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
fetchHabits();
|
||||
} catch (error) {
|
||||
console.error('Failed to log habit:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const completedCount = habits.filter((h) => h.logged_today).length;
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
|
||||
Habits
|
||||
</CardTitle>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{completedCount}/{habits.length} done
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : habits.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No habits tracked</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{habits.slice(0, 5).map((habit) => (
|
||||
<div key={habit.id} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id={habit.id}
|
||||
checked={habit.logged_today}
|
||||
onCheckedChange={() => toggleHabit(habit.id)}
|
||||
aria-label={`Mark "${habit.name}" as ${habit.logged_today ? 'incomplete' : 'complete'}`}
|
||||
/>
|
||||
<label
|
||||
htmlFor={habit.id}
|
||||
className="flex-1 text-sm cursor-pointer"
|
||||
>
|
||||
{habit.name}
|
||||
</label>
|
||||
{habit.current_streak > 0 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
🔥 {habit.current_streak}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Flame } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
interface Streak {
|
||||
habit: { name: string };
|
||||
streak_current: number;
|
||||
}
|
||||
|
||||
export function HabitStreaksWidget() {
|
||||
const [streaks, setStreaks] = useState<Streak[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStreaks();
|
||||
}, []);
|
||||
|
||||
async function fetchStreaks() {
|
||||
try {
|
||||
const response = await fetch('/api/habits/streaks');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setStreaks(data.streaks || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch streaks:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
|
||||
Top Streaks
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : streaks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No active streaks</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{streaks.slice(0, 5).map((streak, i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<span className="text-sm">{streak.habit.name}</span>
|
||||
<span className="text-sm font-semibold">
|
||||
🔥 {streak.streak_current}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FolderKanban } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
export function ProjectProgressWidget() {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
'/api/projects?filter=status%3D%22active%22&perPage=5'
|
||||
);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setProjects(data.items || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch projects:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<FolderKanban className="h-4 w-4" aria-hidden="true" />
|
||||
Active Projects
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : projects.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No active projects</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{projects.map((project) => (
|
||||
<div key={project.id}>
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="text-sm">{project.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{project.progress}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={project.progress} className="h-2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
'use client';
|
||||
|
||||
import { Plus } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export function QuickAddWidget() {
|
||||
function handleQuickAdd() {
|
||||
document.dispatchEvent(
|
||||
new KeyboardEvent('keydown', { key: 'k', metaKey: true })
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Plus className="h-4 w-4" aria-hidden="true" />
|
||||
Quick Add
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="justify-start"
|
||||
onClick={handleQuickAdd}
|
||||
>
|
||||
New task
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="justify-start"
|
||||
onClick={handleQuickAdd}
|
||||
>
|
||||
New habit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="justify-start"
|
||||
onClick={handleQuickAdd}
|
||||
>
|
||||
New note
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { Activity } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
export function RecentActivityWidget() {
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Activity className="h-4 w-4" aria-hidden="true" />
|
||||
Recent Activity
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Activity feed coming soon
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CheckCircle2, Circle, ListTodo } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
status: string;
|
||||
priority: string;
|
||||
domain: string;
|
||||
}
|
||||
|
||||
export function TodayTasksWidget() {
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
}, []);
|
||||
|
||||
async function fetchTasks() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
'/api/tasks?filter=status!%3D%22done%22&perPage=5&sort=-priority'
|
||||
);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setTasks(data.items || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch tasks:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleTask(id: string, currentStatus: string) {
|
||||
const newStatus = currentStatus === 'done' ? 'todo' : 'done';
|
||||
try {
|
||||
await fetch(`/api/tasks/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
});
|
||||
fetchTasks();
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle task:', error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<ListTodo className="h-4 w-4" aria-hidden="true" />
|
||||
Today's Tasks
|
||||
</CardTitle>
|
||||
<Button variant="ghost" size="sm" className="h-7 text-xs">
|
||||
View all
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : tasks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No tasks for today</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{tasks.map((task) => (
|
||||
<div key={task.id} className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11 shrink-0"
|
||||
onClick={() => toggleTask(task.id, task.status)}
|
||||
aria-label={`Mark "${task.title}" as ${task.status === 'done' ? 'incomplete' : 'complete'}`}
|
||||
>
|
||||
{task.status === 'done' ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<span
|
||||
className={`flex-1 text-sm ${
|
||||
task.status === 'done'
|
||||
? 'line-through text-muted-foreground'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{task.title}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{task.domain}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { BarChart3, TrendingUp } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
interface WeeklyStats {
|
||||
taskCompletionRate: number;
|
||||
habitConsistency: number;
|
||||
totalTimeMinutes: number;
|
||||
}
|
||||
|
||||
export function WeeklyStatsWidget() {
|
||||
const [stats, setStats] = useState<WeeklyStats>({
|
||||
taskCompletionRate: 0,
|
||||
habitConsistency: 0,
|
||||
totalTimeMinutes: 0,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const response = await fetch('/api/analytics?period=7');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setStats(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch stats:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<BarChart3 className="h-4 w-4" aria-hidden="true" />
|
||||
This Week
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Task completion
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm font-semibold">
|
||||
{stats.taskCompletionRate}%
|
||||
</span>
|
||||
<TrendingUp className="h-3 w-3 text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Habit consistency
|
||||
</span>
|
||||
<span className="text-sm font-semibold">
|
||||
{stats.habitConsistency}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Time tracked
|
||||
</span>
|
||||
<span className="text-sm font-semibold">
|
||||
{Math.round(stats.totalTimeMinutes / 60)}h
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user