git init

2025-01-22 17:58:47 +09:00
parent ef90ee4042
commit 19a7d45b7b
63 changed files with 7108 additions and 0 deletions
--- a/app/ui/dashboard/cards.tsx
+++ b/app/ui/dashboard/cards.tsx
@@ -0,0 +1,66 @@
+import {
+  BanknotesIcon,
+  ClockIcon,
+  UserGroupIcon,
+  InboxIcon,
+} from '@heroicons/react/24/outline';
+import { lusitana } from '@/app/ui/fonts';
+import { fetchCardData } from "@/app/lib/data";
+
+const iconMap = {
+  collected: BanknotesIcon,
+  customers: UserGroupIcon,
+  pending: ClockIcon,
+  invoices: InboxIcon,
+};
+
+export default async function CardWrapper() {
+  const {
+      numberOfInvoices,
+      numberOfCustomers,
+      totalPaidInvoices,
+      totalPendingInvoices,
+  } = await fetchCardData();
+
+  return (
+    <>
+      {/* NOTE: Uncomment this code in Chapter 9 */}
+
+      <Card title="Collected" value={totalPaidInvoices} type="collected" />
+      <Card title="Pending" value={totalPendingInvoices} type="pending" />
+      <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
+      <Card
+        title="Total Customers"
+        value={numberOfCustomers}
+        type="customers"
+      />
+    </>
+  );
+}
+
+export function Card({
+  title,
+  value,
+  type,
+}: {
+  title: string;
+  value: number | string;
+  type: 'invoices' | 'customers' | 'pending' | 'collected';
+}) {
+  const Icon = iconMap[type];
+
+  return (
+    <div className="rounded-xl bg-gray-50 p-2 shadow-sm">
+      <div className="flex p-4">
+        {Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
+        <h3 className="ml-2 text-sm font-medium">{title}</h3>
+      </div>
+      <p
+        className={`${lusitana.className}
+          truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
+      >
+        {value}
+      </p>
+    </div>
+  );
+}
--- a/app/ui/dashboard/latest-invoices.tsx
+++ b/app/ui/dashboard/latest-invoices.tsx
@@ -0,0 +1,63 @@
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+import Image from 'next/image';
+
+import {lusitana} from "@/app/ui/fonts";
+import {fetchLatestInvoices} from "@/app/lib/data";
+
+export default async function LatestInvoices() {
+
+    const latestInvoices = await fetchLatestInvoices();
+
+  return (
+    <div className="flex w-full flex-col md:col-span-4">
+      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>최근 송장</h2>
+      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
+        {/* NOTE: Uncomment this code in Chapter 7 */}
+
+        <div className="bg-white px-6">
+          {latestInvoices.map((invoice, i) => {
+            return (
+              <div
+                key={invoice.id}
+                className={clsx(
+                  'flex flex-row items-center justify-between py-4',
+                  {
+                    'border-t': i !== 0,
+                  },
+                )}
+              >
+                <div className="flex items-center">
+                  <Image
+                    src={invoice.image_url}
+                    className="mr-4 rounded-full"
+                    width={32}
+                    height={32}
+                    alt="invoices"
+                  />
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-semibold md:text-base">
+                      {invoice.name}
+                    </p>
+                    <p className="hidden text-sm text-gray-500 sm:block">
+                      {invoice.email}
+                    </p>
+                  </div>
+                </div>
+                <p
+                  className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
+                >
+                  {invoice.amount}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+        <div className="flex items-center pb-2 pt-6">
+          <ArrowPathIcon className="h-5 w-5 text-gray-500" />
+          <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/ui/dashboard/nav-links.tsx
+++ b/app/ui/dashboard/nav-links.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import {
+  UserGroupIcon,
+  HomeIcon,
+  DocumentDuplicateIcon,
+} from '@heroicons/react/24/outline';
+import Link from "next/link";
+import {usePathname} from 'next/navigation';
+import clsx from "clsx";
+
+// Map of links to display in the side navigation.
+// Depending on the size of the application, this would be stored in a database.
+const links = [
+  { name: 'Home', href: '/dashboard', icon: HomeIcon },
+  {
+    name: 'Invoices',
+    href: '/dashboard/invoices',
+    icon: DocumentDuplicateIcon,
+  },
+  { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
+];
+
+export default function NavLinks() {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {links.map((link) => {
+        const LinkIcon = link.icon;
+        return (
+          <Link
+            key={link.name}
+            href={link.href}
+            className={clsx(
+                'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
+                {
+                  'bg-sky-100 text-blue-600': pathname === link.href,
+                },
+            )}          >
+            <LinkIcon className="w-6" />
+            <p className="hidden md:block">{link.name}</p>
+          </Link>
+        );
+      })}
+    </>
+  );
+}
--- a/app/ui/dashboard/revenue-chart.tsx
+++ b/app/ui/dashboard/revenue-chart.tsx
@@ -0,0 +1,61 @@
+import { generateYAxis } from '@/app/lib/utils';
+import { CalendarIcon } from '@heroicons/react/24/outline';
+import { lusitana } from '@/app/ui/fonts';
+import {fetchRevenue} from "@/app/lib/data";
+
+// This component is representational only.
+// For data visualization UI, check out:
+// https://www.tremor.so/
+// https://www.chartjs.org/
+// https://airbnb.io/visx/
+
+export default async function RevenueChart() {
+  const revenue = await fetchRevenue();
+
+  const chartHeight = 350;
+  const { yAxisLabels, topLabel } = generateYAxis(revenue);
+
+  if (!revenue || revenue.length === 0) {
+    return <p className="mt-4 text-gray-400">No data available.</p>;
+  }
+
+  return (
+    <div className="w-full md:col-span-4">
+      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
+        최근 매출액
+      </h2>
+      {/* NOTE: Uncomment this code in Chapter 7 */}
+
+      <div className="rounded-xl bg-gray-50 p-4">
+        <div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
+          <div
+            className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
+            style={{ height: `${chartHeight}px` }}
+          >
+            {yAxisLabels.map((label) => (
+              <p key={label}>{label}</p>
+            ))}
+          </div>
+
+          {revenue.map((month) => (
+            <div key={month.month} className="flex flex-col items-center gap-2">
+              <div
+                className="w-full rounded-md bg-blue-300"
+                style={{
+                  height: `${(chartHeight / topLabel) * month.revenue}px`,
+                }}
+              ></div>
+              <p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
+                {month.month}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="flex items-center pb-2 pt-6">
+          <CalendarIcon className="h-5 w-5 text-gray-500" />
+          <h3 className="ml-2 text-sm text-gray-500 ">최근 12개월 동향</h3>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/ui/dashboard/sidenav.tsx
+++ b/app/ui/dashboard/sidenav.tsx
@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import NavLinks from '@/app/ui/dashboard/nav-links';
+import AcmeLogo from '@/app/ui/acme-logo';
+import { PowerIcon } from '@heroicons/react/24/outline';
+import {signOut} from "@/auth";
+
+export default function SideNav() {
+    return (
+        <div className="flex h-full flex-col px-3 py-4 md:px-2">
+            <Link
+                className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40"
+                href="/"
+            >
+                <div className="w-32 text-white md:w-40">
+                    <AcmeLogo/>
+                </div>
+            </Link>
+            <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
+                <NavLinks/>
+                <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
+                <form
+                    action={async () => {
+                        'use server';
+                        await signOut();
+                    }}
+                >
+                    <button
+                        className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
+                        <PowerIcon className="w-6"/>
+                        <div className="hidden md:block">접속해제</div>
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+}