Skip to content

Commit fea76ff

Browse files
dahaldahal
authored
feat: complete UI design for overview page (#89)
* fix: testing treamor.so component, and cannot get it to work for some reason 🙃 * fix: issues with font * feat: creating one donut chart with selector to select between stakeholder and share classes * feat: complete overview page design * chore: remove unnecessary packages
1 parent c11e9d1 commit fea76ff

File tree

21 files changed

+823
-229
lines changed

21 files changed

+823
-229
lines changed

‎package-lock.json

Lines changed: 415 additions & 69 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"@t3-oss/env-nextjs": "^0.7.1",
4343
"@tanstack/react-query": "^4.36.1",
4444
"@tanstack/react-table": "^8.11.7",
45+
"@tremor/react": "^3.13.4",
4546
"@trpc/client": "^10.43.6",
4647
"@trpc/next": "^10.43.6",
4748
"@trpc/react-query": "^10.43.6",
@@ -53,7 +54,7 @@
5354
"lodash-es": "^4.17.21",
5455
"lucide-react": "^0.312.0",
5556
"nanoid": "^5.0.4",
56-
"next": "^14.0.4",
57+
"next": "^14.1.0",
5758
"next-auth": "^4.24.5",
5859
"next-nprogress-bar": "^2.1.2",
5960
"nodemailer": "^6.9.8",

‎src/app/(authenticated)/(dashboard)/[publicId]/page.tsx

Lines changed: 18 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,76 +2,18 @@
22

33
import { useParams } from "next/navigation";
44
import { useSession } from "next-auth/react";
5-
import EmptyOverview from "@/components/overview/empty";
6-
import DonutCard from "@/components/overview/donut-card";
7-
import OverviewCard from "@/components/overview/top-card";
8-
import ActivitiesCard from "@/components/overview/activities-card";
5+
import EmptyOverview from "@/components/dashboard/overview/empty";
6+
import OverviewCard from "@/components/dashboard/overview/top-card";
7+
import ActivitiesCard from "@/components/dashboard/overview/activities-card";
8+
import DonutCard from "@/components/dashboard/overview/donut-card";
9+
import SummaryTable from "@/components/dashboard/overview/summary-table";
910

1011
const OverviewPage = () => {
1112
const params = useParams<{ publicId: string }>();
1213
const { data } = useSession();
1314
const firstName = data?.user.name?.split(" ")[0];
1415
const publicCompanyId = params.publicId;
1516

16-
const byShareClasses = [
17-
{
18-
key: "Common - 53%",
19-
value: 53,
20-
},
21-
22-
{
23-
key: "Preferred - 10%",
24-
value: 10,
25-
},
26-
27-
// {
28-
// key: "Preferred (Series A) - 23%",
29-
// value: 15,
30-
// },
31-
32-
// {
33-
// key: "Preferred (Convertible note) - 7%",
34-
// value: 7,
35-
// },
36-
37-
{
38-
key: "Stock Plan - 15%",
39-
value: 15,
40-
},
41-
];
42-
43-
const byStakeholders = [
44-
{
45-
key: "John Doe",
46-
value: 27,
47-
},
48-
49-
{
50-
key: "Jane Doe",
51-
value: 25,
52-
},
53-
54-
// {
55-
// key: "Others",
56-
// value: 18,
57-
// },
58-
59-
{
60-
key: "Equity Plan",
61-
value: 15,
62-
},
63-
64-
{
65-
key: "Acme Ventures",
66-
value: 10,
67-
},
68-
69-
{
70-
key: "Jane Doe",
71-
value: 5,
72-
},
73-
];
74-
7517
return (
7618
<>
7719
{/* <EmptyOverview firstName={firstName} publicCompanyId={publicCompanyId} /> */}
@@ -90,51 +32,33 @@ const OverviewPage = () => {
9032
<div className="grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-3">
9133
<OverviewCard
9234
title="Amount raised"
93-
amount={10000000}
35+
amount={28000000}
9436
prefix="$"
9537
/>
96-
<OverviewCard title="Diluted shares" amount={11567010} />
38+
<OverviewCard title="Diluted shares" amount={7560010} />
9739
<OverviewCard title="Stakeholders" amount={28} format={false} />
9840
</div>
9941
</section>
10042

101-
{/* Donut charts */}
43+
{/* Tremor chart */}
10244
<section className="mt-6">
103-
<div className="grid h-fit gap-4 sm:grid-cols-2 xl:grid-cols-2 ">
104-
<DonutCard
105-
title={
106-
<>
107-
<span className="text-xs text-muted-foreground">
108-
Ownerships by{" "}
109-
</span>
110-
<span className="text-md font-semibold text-primary">
111-
Stakeholders
112-
</span>
113-
</>
114-
}
115-
data={byStakeholders}
116-
/>
117-
<DonutCard
118-
title={
119-
<>
120-
<span className="text-xs text-muted-foreground">
121-
Ownerships by{" "}
122-
</span>
123-
<span className="text-md font-semibold text-primary">
124-
Share Class
125-
</span>
126-
</>
127-
}
128-
data={byShareClasses}
129-
/>
130-
</div>
45+
<DonutCard />
13146
</section>
13247
</div>
13348

13449
<div className="mt-6 sm:col-span-12 md:col-span-6 lg:col-span-4">
13550
<ActivitiesCard className="border-none bg-transparent shadow-none" />
13651
</div>
13752
</div>
53+
54+
<div className="mt-10">
55+
<h4 className="font-medium">Summary</h4>
56+
<p className="text-sm text-muted-foreground">
57+
Summary of your company{`'`}s captable
58+
</p>
59+
60+
<SummaryTable />
61+
</div>
13862
</>
13963
);
14064
};

‎src/app/(authenticated)/(dashboard)/[publicId]/reports/page.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1+
import { Button } from "@/components/ui/button";
2+
import EmptyState from "@/components/shared/empty-state";
3+
import { RiFilePdf2Fill } from "@remixicon/react";
4+
15
const ReportsPage = () => {
2-
return <div>Reports page</div>;
6+
return (
7+
<EmptyState
8+
icon={<RiFilePdf2Fill />}
9+
title="No reports available."
10+
subtitle="Please click the button below to generate a report"
11+
>
12+
<Button size="lg">Generate a report</Button>
13+
</EmptyState>
14+
);
315
};
416

517
export default ReportsPage;

‎src/app/(authenticated)/(dashboard)/[publicId]/share-classes/page.tsx renamed to ‎src/app/(authenticated)/(dashboard)/[publicId]/share-class/page.tsx

File renamed without changes.

‎src/app/layout.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { instrumentSans } from "@/styles/fonts";
1+
import { instrumentSans, robotoMono } from "@/styles/fonts";
22
import "@/styles/globals.css";
33
import { cn } from "@/lib/utils";
44
import { cookies } from "next/headers";
55
import { TRPCReactProvider } from "@/trpc/react";
66
import { type Metadata } from "next";
7-
import ProgressBarProvider from "./ProgressBarProvider";
7+
import ProgressBarProvider from "./providers/progress-bar";
88
import { constants } from "@/lib/constants";
99
import { Toaster } from "@/components/ui/toaster";
1010
import { NextAuthProvider } from "@/providers/next-auth";
@@ -26,7 +26,10 @@ export default async function RootLayout({
2626
const session = await getServerAuthSession();
2727

2828
return (
29-
<html lang="en" className={cn(instrumentSans.variable)}>
29+
<html
30+
lang="en"
31+
className={cn(instrumentSans.variable, robotoMono.variable)}
32+
>
3033
<body className="min-h-screen">
3134
<ProgressBarProvider>
3235
<NextAuthProvider session={session}>

‎src/app/ProgressBarProvider.tsx renamed to ‎src/app/providers/progress-bar.tsx

File renamed without changes.

‎src/components/dashboard/navbar/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ interface SideBarProps {
1111
export function NavBar({ publicId, companies }: SideBarProps) {
1212
return (
1313
<div className="sticky top-0 z-50 w-full border-b">
14-
<header className="flex h-14 items-center px-4 lg:px-8">
15-
<div className="flex w-full items-center justify-between ">
14+
<header className="flex h-14 items-center bg-gray-50 px-4 lg:px-8">
15+
<div className="flex w-full items-center justify-between">
1616
<MobileDrawer publicId={publicId} companies={companies} />
1717
<div className="flex items-center gap-6">
1818
<CommandMenu />

‎src/components/overview/activities-card.tsx renamed to ‎src/components/dashboard/overview/activities-card.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const DonutCard = ({ title, className }: Props) => {
2525
type: "user",
2626
},
2727

28-
summary: "Jane Doe created a safe '[Draft] - SAFE for Y Combinator'",
28+
summary: "Camila Murphy created a safe '[Draft] - SAFE for Y Combinator'",
2929
date: "28 days ago",
3030
},
3131
{
@@ -40,7 +40,8 @@ const DonutCard = ({ title, className }: Props) => {
4040
type: "user",
4141
},
4242

43-
summary: "Jane Doe uploaded a document 'Certificate of Incorporation'",
43+
summary:
44+
"Dennis Shelton uploaded a document 'Certificate of Incorporation'",
4445
date: "28 days ago",
4546
},
4647
{
@@ -55,7 +56,7 @@ const DonutCard = ({ title, className }: Props) => {
5556
type: "user",
5657
},
5758

58-
summary: "Jane Doe accepted the invitation to join the company",
59+
summary: "Camila Murphy accepted the invitation to join the company",
5960
date: "29 days ago",
6061
},
6162
{
@@ -70,15 +71,16 @@ const DonutCard = ({ title, className }: Props) => {
7071
type: "user",
7172
},
7273

73-
summary: "John Doe invited an admin Jane Doe to join the company",
74+
summary:
75+
"Dennis Shelton invited an admin Camila Murphy to join the company",
7476
date: "30 days ago",
7577
},
7678
];
7779

7880
return (
7981
<Card className={className}>
8082
<CardHeader className="pt-0">
81-
<CardDescription className="text-md font-bold text-primary">
83+
<CardDescription className="text-md font-semibold text-primary">
8284
Activities
8385
</CardDescription>
8486
</CardHeader>

0 commit comments

Comments
 (0)