feat: implement data fetching logic and skeleton loading states for dashboard and analytics modules
This commit is contained in:
@@ -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 || [],
|
||||
|
||||
Reference in New Issue
Block a user