Skip to content

Commit

Permalink
refactor: new dashboard layout (sidebar)
Browse files Browse the repository at this point in the history
  • Loading branch information
mickasmt committed Jul 26, 2024
1 parent 576868e commit 25f1864
Show file tree
Hide file tree
Showing 39 changed files with 1,099 additions and 449 deletions.
14 changes: 14 additions & 0 deletions app/(protected)/admin/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { notFound, redirect } from "next/navigation";

import { getCurrentUser } from "@/lib/session";

interface ProtectedLayoutProps {
children: React.ReactNode;
}

export default async function Dashboard({ children }: ProtectedLayoutProps) {
const user = await getCurrentUser();
if (!user || user.role !== "ADMIN") redirect("/login");

return <>{children}</>;
}
23 changes: 23 additions & 0 deletions app/(protected)/admin/loading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Skeleton } from "@/components/ui/skeleton";
import { DashboardHeader } from "@/components/dashboard/header";

export default function AdminPanelLoading() {
return (
<>
<DashboardHeader
heading="Admin Panel"
text="Access only for users with ADMIN role."
/>
<div className="flex flex-col gap-5">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<Skeleton className="h-32 w-full rounded-lg" />
<Skeleton className="h-32 w-full rounded-lg" />
<Skeleton className="h-32 w-full rounded-lg" />
<Skeleton className="h-32 w-full rounded-lg" />
</div>
<Skeleton className="h-[500px] w-full rounded-lg" />
<Skeleton className="h-[500px] w-full rounded-lg" />
</div>
</>
);
}
14 changes: 14 additions & 0 deletions app/(protected)/admin/orders/loading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Skeleton } from "@/components/ui/skeleton";
import { DashboardHeader } from "@/components/dashboard/header";

export default function OrdersLoading() {
return (
<>
<DashboardHeader
heading="Orders"
text="Check and manage your latest orders."
/>
<Skeleton className="size-full rounded-lg" />
</>
);
}
34 changes: 34 additions & 0 deletions app/(protected)/admin/orders/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { redirect } from "next/navigation";

import { getCurrentUser } from "@/lib/session";
import { constructMetadata } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { DashboardHeader } from "@/components/dashboard/header";
import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";

export const metadata = constructMetadata({
title: "Orders – SaaS Starter",
description: "Check and manage your latest orders.",
});

export default async function OrdersPage() {
// const user = await getCurrentUser();
// if (!user || user.role !== "ADMIN") redirect("/login");

return (
<>
<DashboardHeader
heading="Orders"
text="Check and manage your latest orders."
/>
<EmptyPlaceholder>
<EmptyPlaceholder.Icon name="package" />
<EmptyPlaceholder.Title>No orders listed</EmptyPlaceholder.Title>
<EmptyPlaceholder.Description>
You don&apos;t have any orders yet. Start ordering a product.
</EmptyPlaceholder.Description>
<Button>Buy Products</Button>
</EmptyPlaceholder>
</>
);
}
14 changes: 9 additions & 5 deletions app/(protected)/admin/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { getCurrentUser } from "@/lib/session";
import { constructMetadata } from "@/lib/utils";
import { DashboardHeader } from "@/components/dashboard/header";
import InfoCard from "@/components/dashboard/info-card";
import { DashboardShell } from "@/components/dashboard/shell";
import TransactionsList from "@/components/dashboard/transactions-list";

export const metadata = constructMetadata({
Expand All @@ -17,16 +16,21 @@ export default async function AdminPage() {
if (!user || user.role !== "ADMIN") redirect("/login");

return (
<DashboardShell>
<DashboardHeader heading="Admin" text="Access only for admin." />
<>
<DashboardHeader
heading="Admin Panel"
text="Access only for users with ADMIN role."
/>
<div className="flex flex-col gap-5">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
<InfoCard />
<InfoCard />
<InfoCard />
<InfoCard />
</div>
<TransactionsList />
<TransactionsList />
</div>
</DashboardShell>
</>
);
}
5 changes: 2 additions & 3 deletions app/(protected)/dashboard/billing/loading.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { Skeleton } from "@/components/ui/skeleton";
import { DashboardHeader } from "@/components/dashboard/header";
import { DashboardShell } from "@/components/dashboard/shell";
import { CardSkeleton } from "@/components/shared/card-skeleton";

export default function DashboardBillingLoading() {
return (
<DashboardShell>
<>
<DashboardHeader
heading="Billing"
text="Manage billing and your subscription plan."
Expand All @@ -14,6 +13,6 @@ export default function DashboardBillingLoading() {
<Skeleton className="h-28 w-full rounded-lg md:h-24" />
<CardSkeleton />
</div>
</DashboardShell>
</>
);
}
5 changes: 2 additions & 3 deletions app/(protected)/dashboard/billing/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { getUserSubscriptionPlan } from "@/lib/subscription";
import { constructMetadata } from "@/lib/utils";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { DashboardHeader } from "@/components/dashboard/header";
import { DashboardShell } from "@/components/dashboard/shell";
import { BillingInfo } from "@/components/pricing/billing-info";
import { Icons } from "@/components/shared/icons";

Expand All @@ -25,7 +24,7 @@ export default async function BillingPage() {
}

return (
<DashboardShell>
<>
<DashboardHeader
heading="Billing"
text="Manage billing and your subscription plan."
Expand All @@ -50,6 +49,6 @@ export default async function BillingPage() {
</Alert>
<BillingInfo userSubscriptionPlan={userSubscriptionPlan} />
</div>
</DashboardShell>
</>
);
}
11 changes: 10 additions & 1 deletion app/(protected)/dashboard/charts/loading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,16 @@ export default function ChartsLoading() {
return (
<>
<DashboardHeader heading="Charts" text="List of charts by shadcn-ui." />
<Skeleton className="size-full rounded-lg" />
<div className="flex flex-col gap-5">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 2xl:grid-cols-4">
<Skeleton className="h-80 w-full rounded-lg md:max-xl:h-[390px] xl:max-2xl:h-[420px]" />
<Skeleton className="h-80 w-full rounded-lg md:max-xl:h-[390px] xl:max-2xl:h-[420px]" />
<Skeleton className="h-80 w-full rounded-lg md:max-xl:h-[390px] xl:max-2xl:h-[420px]" />
<Skeleton className="h-80 w-full rounded-lg md:max-xl:h-[390px] xl:max-2xl:h-[420px]" />
</div>
<Skeleton className="h-[500px] w-full rounded-lg" />
<Skeleton className="h-[500px] w-full rounded-lg" />
</div>
</>
);
}
3 changes: 2 additions & 1 deletion app/(protected)/dashboard/charts/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { constructMetadata } from "@/lib/utils";
import { Skeleton } from "@/components/ui/skeleton";
import { AreaChartStacked } from "@/components/charts/area-chart-stacked";
import { BarChartMixed } from "@/components/charts/bar-chart-mixed";
import { InteractiveBarChart } from "@/components/charts/interactive-bar-chart";
Expand All @@ -11,7 +12,7 @@ import { RadialTextChart } from "@/components/charts/radial-text-chart";
import { DashboardHeader } from "@/components/dashboard/header";

export const metadata = constructMetadata({
title: "Charts – Next Template",
title: "Charts – SaaS Starter",
description: "List of charts by shadcn-ui",
});

Expand Down
14 changes: 4 additions & 10 deletions app/(protected)/dashboard/loading.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
import { Skeleton } from "@/components/ui/skeleton";
import { DashboardHeader } from "@/components/dashboard/header";
import { DashboardShell } from "@/components/dashboard/shell";

export default function DashboardLoading() {
return (
<DashboardShell>
<DashboardHeader
heading="Panel"
text="Current Role :"
/>
<div className="divide-border-200 divide-y rounded-md border">
<Skeleton className="h-[400px] w-full rounded-lg" />
</div>
</DashboardShell>
<>
<DashboardHeader heading="Dashboard" text="Current Role :" />
<Skeleton className="size-full rounded-lg" />
</>
);
}
27 changes: 12 additions & 15 deletions app/(protected)/dashboard/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,30 @@ import { getCurrentUser } from "@/lib/session";
import { constructMetadata } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { DashboardHeader } from "@/components/dashboard/header";
import { DashboardShell } from "@/components/dashboard/shell";
import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";

export const metadata = constructMetadata({
title: "Panel – SaaS Starter",
title: "Dashboard – SaaS Starter",
description: "Create and manage content.",
});

export default async function DashboardPage() {
const user = await getCurrentUser();

return (
<DashboardShell>
<>
<DashboardHeader
heading="Panel"
heading="Dashboard"
text={`Current Role : ${user?.role} — Change your role in settings.`}
/>
<div>
<EmptyPlaceholder>
<EmptyPlaceholder.Icon name="post" />
<EmptyPlaceholder.Title>No content created</EmptyPlaceholder.Title>
<EmptyPlaceholder.Description>
You don&apos;t have any content yet. Start creating content.
</EmptyPlaceholder.Description>
<Button variant="outline">Fake button</Button>
</EmptyPlaceholder>
</div>
</DashboardShell>
<EmptyPlaceholder>
<EmptyPlaceholder.Icon name="post" />
<EmptyPlaceholder.Title>No content created</EmptyPlaceholder.Title>
<EmptyPlaceholder.Description>
You don&apos;t have any content yet. Start creating content.
</EmptyPlaceholder.Description>
<Button>Add Content</Button>
</EmptyPlaceholder>
</>
);
}
15 changes: 7 additions & 8 deletions app/(protected)/dashboard/settings/loading.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import { DashboardHeader } from "@/components/dashboard/header";
import { DashboardShell } from "@/components/dashboard/shell";
import { CardSkeleton } from "@/components/shared/card-skeleton";
import { SkeletonSection } from "@/components/shared/section-skeleton";

export default function DashboardSettingsLoading() {
return (
<DashboardShell>
<>
<DashboardHeader
heading="Settings"
text="Manage account and website settings."
/>
<div className="grid gap-6">
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<div className="divide-y divide-muted pb-10">
<SkeletonSection />
<SkeletonSection />
<SkeletonSection card />
</div>
</DashboardShell>
</>
);
}
7 changes: 3 additions & 4 deletions app/(protected)/dashboard/settings/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { getCurrentUser } from "@/lib/session";
import { constructMetadata } from "@/lib/utils";
import { DeleteAccountSection } from "@/components/dashboard/delete-account";
import { DashboardHeader } from "@/components/dashboard/header";
import { DashboardShell } from "@/components/dashboard/shell";
import { UserNameForm } from "@/components/forms/user-name-form";
import { UserRoleForm } from "@/components/forms/user-role-form";

Expand All @@ -19,16 +18,16 @@ export default async function SettingsPage() {
if (!user?.id) redirect("/login");

return (
<DashboardShell>
<>
<DashboardHeader
heading="Settings"
text="Manage account and website settings."
/>
<div className="grid gap-6">
<div className="divide-y divide-muted pb-10">
<UserNameForm user={{ id: user.id, name: user.name || "" }} />
<UserRoleForm user={{ id: user.id, role: user.role }} />
<DeleteAccountSection />
</div>
</DashboardShell>
</>
);
}
Loading

0 comments on commit 25f1864

Please sign in to comment.