summaryrefslogtreecommitdiff
path: root/lib/dashboard/dashboard-client.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'lib/dashboard/dashboard-client.tsx')
-rw-r--r--lib/dashboard/dashboard-client.tsx91
1 files changed, 56 insertions, 35 deletions
diff --git a/lib/dashboard/dashboard-client.tsx b/lib/dashboard/dashboard-client.tsx
index 37dc1901..cda1ed8e 100644
--- a/lib/dashboard/dashboard-client.tsx
+++ b/lib/dashboard/dashboard-client.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useState } from "react";
+import { useState, useTransition } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { RefreshCw } from "lucide-react";
@@ -8,31 +8,22 @@ import { DashboardStatsCard } from "./dashboard-stats-card";
import { DashboardOverviewChart } from "./dashboard-overview-chart";
import { DashboardSummaryCards } from "./dashboard-summary-cards";
import { toast } from "sonner";
-import { DashboardData } from "./service";
+import { DashboardData, getDashboardData } from "./service";
interface DashboardClientProps {
initialData: DashboardData;
- onRefresh: () => Promise<DashboardData>;
}
-export function DashboardClient({ initialData, onRefresh }: DashboardClientProps) {
+export function DashboardClient({ initialData }: DashboardClientProps) {
+
+
const [data, setData] = useState<DashboardData>(initialData);
- const [isRefreshing, setIsRefreshing] = useState(false);
-
-
- const handleRefresh = async () => {
- try {
- setIsRefreshing(true);
- const newData = await onRefresh();
- setData(newData);
- toast.success("대시보드 데이터가 새로고침되었습니다.");
- } catch (error) {
- toast.error("데이터 새로고침에 실패했습니다.");
- console.error("Dashboard refresh error:", error);
- } finally {
- setIsRefreshing(false);
- }
- };
+ const [isPending, startTransition] = useTransition();
+
+
+ console.log(data)
+
+ const { domain, teamStats, userStats, summary } = data;
const getDomainDisplayName = (domain: string) => {
const domainNames: Record<string, string> = {
@@ -44,51 +35,81 @@ export function DashboardClient({ initialData, onRefresh }: DashboardClientProps
return domainNames[domain] || domain;
};
+ const handleRefresh = () => {
+ startTransition(async () => {
+ try {
+ const refreshedData = await getDashboardData(domain);
+ setData(refreshedData);
+ toast.success("데이터가 새로고침되었습니다.");
+ } catch (error) {
+ console.error("Refresh failed:", error);
+ toast.error("데이터 새로고침에 실패했습니다.");
+ }
+ });
+ };
+
+ // 데이터가 없으면 에러 상태 표시
+ if (!summary) {
+ return (
+ <div className="flex items-center justify-center py-12">
+ <div className="text-center space-y-2">
+ <p className="text-destructive">데이터를 불러올 수 없습니다.</p>
+ <Button onClick={handleRefresh} variant="outline" size="sm">
+ 다시 시도
+ </Button>
+ </div>
+ </div>
+ );
+ }
+
return (
<div className="space-y-6">
{/* 헤더 */}
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold tracking-tight">
- {getDomainDisplayName(data.domain)} Dashboard
+ {getDomainDisplayName(domain)} Dashboard
</h2>
<p className="text-muted-foreground">
- {data.domain ==="partners"? "회사와 개인에게 할당된 일들을 보여줍니다.":"팀과 개인에게 할당된 일들을 보여줍니다."}
+ {domain === "partners"
+ ? "회사와 개인에게 할당된 일들을 보여줍니다."
+ : "팀과 개인에게 할당된 일들을 보여줍니다."
+ }
</p>
</div>
- <Button
- onClick={handleRefresh}
- disabled={isRefreshing}
- variant="outline"
+ <Button
+ onClick={handleRefresh}
+ variant="outline"
size="sm"
+ disabled={isPending}
>
- <RefreshCw
- className={`w-4 h-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`}
- />
+ <RefreshCw className={`h-4 w-4 mr-2 ${isPending ? 'animate-spin' : ''}`} />
새로고침
</Button>
</div>
{/* 요약 카드 */}
- <DashboardSummaryCards summary={data.summary} />
+ <DashboardSummaryCards summary={summary} />
{/* 차트 */}
<DashboardOverviewChart
- data={data.teamStats}
- title={getDomainDisplayName(data.domain)}
+ data={teamStats}
+ title={getDomainDisplayName(domain)}
description="업무 타입별 현황을 확인하세요"
/>
{/* 탭 */}
<Tabs defaultValue="team" className="space-y-4">
<TabsList className="grid w-full grid-cols-2 max-w-md">
- <TabsTrigger value="team"> {data.domain ==="partners"? "회사 업무 현황":"팀 업무 현황"}</TabsTrigger>
+ <TabsTrigger value="team">
+ {domain === "partners" ? "회사 업무 현황" : "팀 업무 현황"}
+ </TabsTrigger>
<TabsTrigger value="personal">내 업무 현황</TabsTrigger>
</TabsList>
<TabsContent value="team" className="space-y-4">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
- {data.teamStats.map((stats) => (
+ {teamStats.map((stats) => (
<DashboardStatsCard
key={stats.tableName}
stats={stats}
@@ -100,7 +121,7 @@ export function DashboardClient({ initialData, onRefresh }: DashboardClientProps
<TabsContent value="personal" className="space-y-4">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
- {data.userStats.map((stats) => (
+ {userStats.map((stats) => (
<DashboardStatsCard
key={stats.tableName}
stats={stats}