feat: implement data fetching logic and skeleton loading states for dashboard and analytics modules
This commit is contained in:
Poyraz
@@ -0,0 +1,30 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Card, CardContent } from "poyraz-ui/atoms";
|
||||
|
||||
export default function AnalyticsLoading() {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-9 w-72" />
|
||||
<Skeleton className="mt-1 h-4 w-96" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-[160px]" />
|
||||
</div>
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6">
|
||||
<Skeleton className="mb-6 h-4 w-48" />
|
||||
<Skeleton className="h-[300px] w-full rounded-md" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -14,20 +14,19 @@ export default async function AnalyticsPage() {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
// 1. Fetch tasks
|
||||
const { data: tasks } = await supabase
|
||||
.from("tasks")
|
||||
.select("*");
|
||||
|
||||
// 2. Fetch projects
|
||||
const { data: projects } = await supabase
|
||||
.from("projects")
|
||||
.select("*");
|
||||
|
||||
// 3. Fetch finances
|
||||
const { data: finances } = await supabase
|
||||
.from("finance_transactions")
|
||||
.select("*");
|
||||
// Fetch all analytics data in parallel with only needed columns
|
||||
const [{ data: tasks }, { data: projects }, { data: finances }] =
|
||||
await Promise.all([
|
||||
supabase
|
||||
.from("tasks")
|
||||
.select("id, status, created_at, due_at"),
|
||||
supabase
|
||||
.from("projects")
|
||||
.select("id, name"),
|
||||
supabase
|
||||
.from("finance_transactions")
|
||||
.select("id, type, amount, transaction_date, project_id"),
|
||||
]);
|
||||
|
||||
const analyticsData = {
|
||||
tasks: tasks || [],
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Card, CardContent } from "poyraz-ui/atoms";
|
||||
|
||||
export default function ClientsLoading() {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-9 w-44" />
|
||||
<Skeleton className="mt-1 h-4 w-96" />
|
||||
</div>
|
||||
<Skeleton className="h-9 w-32" />
|
||||
</div>
|
||||
|
||||
{/* Stat Cards */}
|
||||
<div className="grid gap-3 md:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-8 w-16" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-10 rounded-sm" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tabs + Search */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
|
||||
<Skeleton className="h-10 w-64" />
|
||||
<Skeleton className="h-10 w-72" />
|
||||
</div>
|
||||
|
||||
{/* Pipeline Kanban Columns */}
|
||||
<div className="flex gap-4 overflow-hidden pb-4">
|
||||
{Array.from({ length: 5 }).map((_, colIdx) => (
|
||||
<div key={colIdx} className="w-[340px] flex-shrink-0 space-y-3">
|
||||
<div className="flex items-center justify-between px-1 mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-2 w-2 rounded-full" />
|
||||
<Skeleton className="h-5 w-28" />
|
||||
</div>
|
||||
<Skeleton className="h-5 w-6 rounded-full" />
|
||||
</div>
|
||||
{Array.from({ length: colIdx < 2 ? 3 : colIdx < 4 ? 2 : 1 }).map((_, cardIdx) => (
|
||||
<Card key={cardIdx}>
|
||||
<CardContent className="p-3 space-y-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<Skeleton className="h-5 w-3/4" />
|
||||
<Skeleton className="h-6 w-6" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-1/2" />
|
||||
<Skeleton className="h-3 w-24 mt-2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Card, CardContent } from "poyraz-ui/atoms";
|
||||
|
||||
export default function DashboardLoading() {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-9 w-40" />
|
||||
<Skeleton className="mt-1 h-4 w-72" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-[160px]" />
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="flex items-center justify-between gap-3 p-4">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-8 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-10 rounded-sm" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6">
|
||||
<Skeleton className="mb-6 h-4 w-40" />
|
||||
<Skeleton className="h-[300px] w-full rounded-md" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Recent Items */}
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 4 }).map((_, j) => (
|
||||
<div key={j} className="flex items-center gap-3 p-2">
|
||||
<Skeleton className="h-2 w-2 rounded-full" />
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-3 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+33
-33
@@ -22,39 +22,39 @@ export default async function DashboardPage() {
|
||||
const todayStr = today.toISOString();
|
||||
const thirtyDaysAgoStr = thirtyDaysAgo.toISOString();
|
||||
|
||||
// 1. Fetch tasks
|
||||
const { data: tasks } = await supabase
|
||||
.from("tasks")
|
||||
.select("*")
|
||||
.or(`due_at.gte.${thirtyDaysAgoStr},created_at.gte.${thirtyDaysAgoStr}`)
|
||||
.order("due_at", { ascending: true });
|
||||
|
||||
// 2. Fetch projects
|
||||
const { data: projects } = await supabase
|
||||
.from("projects")
|
||||
.select("*")
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
// 3. Fetch finances
|
||||
const { data: finances } = await supabase
|
||||
.from("finance_transactions")
|
||||
.select("*")
|
||||
.gte("transaction_date", thirtyDaysAgoStr)
|
||||
.order("transaction_date", { ascending: true });
|
||||
|
||||
// 4. Fetch daily logs
|
||||
const { data: logs } = await supabase
|
||||
.from("daily_logs")
|
||||
.select("*")
|
||||
.gte("log_date", thirtyDaysAgoStr)
|
||||
.order("log_date", { ascending: true });
|
||||
|
||||
// 5. Fetch recent clients
|
||||
const { data: clients } = await supabase
|
||||
.from("clients")
|
||||
.select("*")
|
||||
.order("created_at", { ascending: false })
|
||||
.limit(5);
|
||||
// Fetch all dashboard data in parallel with only needed columns
|
||||
const [
|
||||
{ data: tasks },
|
||||
{ data: projects },
|
||||
{ data: finances },
|
||||
{ data: logs },
|
||||
{ data: clients },
|
||||
] = await Promise.all([
|
||||
supabase
|
||||
.from("tasks")
|
||||
.select("id, status, created_at, updated_at, due_at")
|
||||
.or(`due_at.gte.${thirtyDaysAgoStr},created_at.gte.${thirtyDaysAgoStr}`)
|
||||
.order("due_at", { ascending: true }),
|
||||
supabase
|
||||
.from("projects")
|
||||
.select("id, status, name, created_at")
|
||||
.order("created_at", { ascending: false }),
|
||||
supabase
|
||||
.from("finance_transactions")
|
||||
.select("id, type, amount, transaction_date")
|
||||
.gte("transaction_date", thirtyDaysAgoStr)
|
||||
.order("transaction_date", { ascending: true }),
|
||||
supabase
|
||||
.from("daily_logs")
|
||||
.select("id, log_date, mood_score, energy_score")
|
||||
.gte("log_date", thirtyDaysAgoStr)
|
||||
.order("log_date", { ascending: true }),
|
||||
supabase
|
||||
.from("clients")
|
||||
.select("id, name, company_name, created_at")
|
||||
.order("created_at", { ascending: false })
|
||||
.limit(5),
|
||||
]);
|
||||
|
||||
const dashboardData = {
|
||||
tasks: tasks || [],
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Card, CardContent } from "poyraz-ui/atoms";
|
||||
|
||||
export default function ProjectDetailLoading() {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
{/* Back link + Header */}
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="space-y-2 flex-1">
|
||||
<Skeleton className="h-9 w-64" />
|
||||
<Skeleton className="h-4 w-96" />
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
<Skeleton className="h-5 w-20 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-9 w-24" />
|
||||
<Skeleton className="h-9 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cover Image */}
|
||||
<Skeleton className="aspect-[21/6] w-full rounded-sm" />
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-4 border-b border-border pb-0">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-10 w-24" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab Content: Overview-like skeleton */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Main Content */}
|
||||
<div className="space-y-6 lg:col-span-2">
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<Skeleton className="h-4 w-4 rounded-full" />
|
||||
<Skeleton className="h-4 flex-1" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-4 space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-3 w-3/4" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<Skeleton className="h-5 w-28" />
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-4 w-16" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-full rounded-full" />
|
||||
</div>
|
||||
<div className="space-y-2 pt-2">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="flex justify-between">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="flex justify-between">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Card, CardContent } from "poyraz-ui/atoms";
|
||||
|
||||
export default function ProjectsLoading() {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-44" />
|
||||
<Skeleton className="h-9 w-28" />
|
||||
<Skeleton className="mt-1 h-4 w-80" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-9 w-24" />
|
||||
<Skeleton className="h-9 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Cards */}
|
||||
<div className="grid gap-3 md:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="flex items-center justify-between gap-3 p-4">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-8 w-16" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-10 rounded-sm" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Project List Card */}
|
||||
<Card>
|
||||
<CardContent className="space-y-4 p-4">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="space-y-1.5">
|
||||
<Skeleton className="h-5 w-28" />
|
||||
<Skeleton className="h-4 w-40" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-10 w-80" />
|
||||
<Skeleton className="h-10 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Cards Grid */}
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="flex flex-col gap-5 p-5">
|
||||
<Skeleton className="aspect-video w-full rounded-sm" />
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<Skeleton className="h-6 w-3/4" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-3 w-16" />
|
||||
<Skeleton className="h-3 w-8" />
|
||||
</div>
|
||||
<Skeleton className="h-2.5 w-full rounded-full" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 border-t border-border pt-4">
|
||||
<Skeleton className="h-3 w-32" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-9 w-9" />
|
||||
<Skeleton className="h-9 w-9" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Card, CardContent } from "poyraz-ui/atoms";
|
||||
|
||||
export default function TasksLoading() {
|
||||
return (
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-9 w-28" />
|
||||
<Skeleton className="mt-1 h-4 w-72" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-9 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View toggle + filters */}
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<Skeleton className="h-10 w-48" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-10 w-64" />
|
||||
<Skeleton className="h-10 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kanban columns */}
|
||||
<div className="flex gap-4 overflow-hidden">
|
||||
{Array.from({ length: 3 }).map((_, colIdx) => (
|
||||
<div key={colIdx} className="w-[340px] flex-shrink-0 space-y-3">
|
||||
<div className="flex items-center justify-between px-1 mb-3">
|
||||
<Skeleton className="h-5 w-28" />
|
||||
<Skeleton className="h-5 w-8 rounded-full" />
|
||||
</div>
|
||||
{Array.from({ length: colIdx === 0 ? 4 : colIdx === 1 ? 3 : 2 }).map((_, cardIdx) => (
|
||||
<Card key={cardIdx}>
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<Skeleton className="h-5 w-3/4" />
|
||||
<Skeleton className="h-5 w-14 rounded-full" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-full" />
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<Skeleton className="h-3 w-20" />
|
||||
<Skeleton className="h-3 w-16" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user