Skip to content

Commit 444a6be

Browse files
kaifcoderkaifcoder
committed
Add new routes and dependencies
1 parent 054008a commit 444a6be

25 files changed

+1363
-69
lines changed

‎.hintrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": [
3+
"development"
4+
],
5+
"hints": {
6+
"no-inline-styles": "off"
7+
}
8+
}

‎app/(routes)/dashboard/_components/DashboardHeader.tsx

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { cn } from "@/lib/utils";
2+
import { Search, Send, Share } from "lucide-react";
3+
import React, { useState } from "react";
4+
import {
5+
Tooltip,
6+
TooltipContent,
7+
TooltipProvider,
8+
TooltipTrigger,
9+
} from "@/components/ui/tooltip";
10+
11+
const DashboardHeader = ({ user }: any) => {
12+
const menu = [
13+
{
14+
id: 1,
15+
name: "All",
16+
},
17+
{
18+
id: 2,
19+
name: "Recent",
20+
},
21+
{
22+
id: 3,
23+
name: "Created By Me",
24+
},
25+
];
26+
27+
const [selected, setSelected] = useState(1);
28+
return (
29+
<div className="w-full">
30+
<div className="pl-16 py-6 pr-10 mt-4 flex items-center gap-2">
31+
<div className="flex flex-1 space-x-2 font-semibold text-sm w-fit">
32+
{menu.map((item, index) => (
33+
<div
34+
onClick={() => setSelected(item.id)}
35+
className={cn(
36+
"cursor-pointer rounded-lg px-3 py-1 text-neutral-400 hover:text-white ",
37+
selected === item.id &&
38+
"bg-neutral-800 border border-neutral-600 text-white"
39+
)}
40+
key={index}
41+
>
42+
{item.name}
43+
</div>
44+
))}
45+
</div>
46+
47+
{/* search user and share */}
48+
<div className="flex items-center space-x-4">
49+
<div className="bg-neutral-800 rounded-lg flex items-center border border-white/30 space-x-2 py-1 ">
50+
<Search size={16} className="ml-2 text-neutral-400" />
51+
<input
52+
type="text"
53+
placeholder="Search"
54+
className="bg-neutral-800 text-white p-0 text-sm outline-none border-none focus:ring-0"
55+
/>
56+
</div>
57+
<TooltipProvider>
58+
<Tooltip>
59+
<TooltipTrigger>
60+
<div>
61+
<img
62+
src={
63+
user?.picture ??
64+
"https://img.freepik.com/free-vector/graphic-designer-man_78370-159.jpg?size=626&ext=jpg&ga=GA1.1.1395880969.1709251200&semt=ais"
65+
}
66+
alt="logo"
67+
className="w-8 h-8 rounded-full object-cover cursor-pointer"
68+
/>
69+
</div>
70+
</TooltipTrigger>
71+
<TooltipContent className="p-1 bg-neutral-600 outline-none border-none">
72+
<div className="text-white ">
73+
{user?.given_name! + " " + user?.family_name!}
74+
</div>
75+
</TooltipContent>
76+
</Tooltip>
77+
</TooltipProvider>
78+
79+
<div>
80+
<div className="bg-blue-700 hover:bg-blue-800 cursor-pointer text-white text-sm rounded-sm flex items-center px-4 py-1">
81+
<Send size={16} className="mr-1" />
82+
Invite
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
);
89+
};
90+
91+
export default DashboardHeader;

‎app/(routes)/dashboard/_components/DashboardTable.tsx

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
"use client";
2+
3+
import React, { use, useContext, useEffect, useState } from "react";
4+
import {
5+
Table,
6+
TableBody,
7+
TableCell,
8+
TableHead,
9+
TableHeader,
10+
TableRow,
11+
} from "@/components/ui/table";
12+
import { Archive, Delete, MoreHorizontal } from "lucide-react";
13+
import { FileListContext } from "@/app/_context/FileListContext";
14+
import moment from "moment";
15+
import {
16+
DropdownMenu,
17+
DropdownMenuContent,
18+
DropdownMenuItem,
19+
DropdownMenuSeparator,
20+
DropdownMenuTrigger,
21+
} from "@/components/ui/dropdown-menu";
22+
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
23+
import { useRouter } from "next/navigation";
24+
25+
export interface FILE {
26+
_id: string;
27+
fileName: string;
28+
createdBy: string;
29+
_creationTime: string;
30+
archieved: boolean;
31+
teamId: string;
32+
document: string;
33+
whiteboard: string;
34+
}
35+
36+
const DashboardTable = () => {
37+
const { fileList, setFileList } = useContext(FileListContext);
38+
const [fileList_, setFileList_] = useState([] as FILE[]);
39+
const { user } = useKindeBrowserClient();
40+
useEffect(() => {
41+
fileList && setFileList_(fileList);
42+
console.log(fileList);
43+
}, [fileList]);
44+
45+
const handleArchive = (id: string) => {
46+
console.log("archived", id);
47+
};
48+
49+
const handleDelete = (id: string) => {
50+
console.log("deleted", id);
51+
};
52+
53+
const router = useRouter();
54+
55+
return (
56+
<div className="mt-8 pl-2 pr-2">
57+
<Table className="border-none ">
58+
<TableHeader className="">
59+
<TableRow className="border-white/40 mx-16 hover:bg-transparent">
60+
<TableHead className="pl-20 w-[300px]">Name</TableHead>
61+
<TableHead className="">Location</TableHead>
62+
<TableHead className="">Author</TableHead>
63+
<TableHead className="pr-2 w-[100px]">Created</TableHead>
64+
</TableRow>
65+
</TableHeader>
66+
<TableBody>
67+
{fileList_ &&
68+
fileList_.map((file) => (
69+
<TableRow
70+
onClick={() => {
71+
router.push(`/workspace/${file._id}`);
72+
}}
73+
key={file._id}
74+
className="mx-16 hover:bg-white/10 cursor-pointer border-neutral-700 hover:text-white"
75+
>
76+
<TableCell className="font-medium pl-20">
77+
{file.fileName}
78+
</TableCell>
79+
<TableCell className=""></TableCell>
80+
<TableCell className="w-[150px] text-sm">
81+
<div>
82+
<img
83+
src={
84+
user?.picture ??
85+
"https://img.freepik.com/free-vector/graphic-designer-man_78370-159.jpg?size=626&ext=jpg&ga=GA1.1.1395880969.1709251200&semt=ais"
86+
}
87+
alt="logo"
88+
className="w-8 h-8 rounded-full object-cover cursor-pointer"
89+
/>
90+
</div>
91+
</TableCell>
92+
<TableCell className="w-[150px] text-sm">
93+
{moment(file._creationTime).format("DD MMM YYYY")}
94+
</TableCell>
95+
<TableCell className="pr-2">
96+
<DropdownMenu>
97+
<DropdownMenuTrigger asChild className="outline-none">
98+
<div className="p-1 hover:bg-neutral-600 w-fit rounded-sm cursor-pointer">
99+
<MoreHorizontal size={16} />
100+
</div>
101+
</DropdownMenuTrigger>
102+
<DropdownMenuContent className="bg-neutral-800 gap-1 rounded-lg text-white border-neutral-700 w-48 ml-4 mt-2">
103+
<DropdownMenuItem
104+
className="cursor-pointer focus:bg-neutral-700 focus:text-white"
105+
onClick={() => {
106+
console.log("clicked");
107+
}}
108+
>
109+
<Archive size={16} className="mr-2" />
110+
Archive
111+
</DropdownMenuItem>
112+
<DropdownMenuItem
113+
className="cursor-pointer focus:bg-red-500 focus:text-white hover:bg-red-500 hover:text-white"
114+
onClick={() => {
115+
console.log("clicked");
116+
}}
117+
>
118+
<Delete size={16} className="mr-2" />
119+
Delete
120+
</DropdownMenuItem>
121+
</DropdownMenuContent>
122+
</DropdownMenu>
123+
</TableCell>
124+
</TableRow>
125+
))}
126+
</TableBody>
127+
</Table>
128+
</div>
129+
);
130+
};
131+
132+
export default DashboardTable;

‎app/(routes)/dashboard/getting-started/page.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
3+
const page = () => {
4+
return <div>page</div>;
5+
};
6+
7+
export default page;

‎app/(routes)/dashboard/layout.tsx

+19-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
"use client";
22

33
import Sidebar from "@/app/_components/Sidebar";
4+
import { FileListContext } from "@/app/_context/FileListContext";
45
import { api } from "@/convex/_generated/api";
56
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
67
import { useConvex } from "convex/react";
78
import { useRouter } from "next/navigation";
8-
import { useEffect } from "react";
9+
import { useEffect, useState } from "react";
910

1011
export default function DashboardLayout({
1112
children,
@@ -16,6 +17,8 @@ export default function DashboardLayout({
1617
const convex = useConvex();
1718
const router = useRouter();
1819

20+
const [fileList, setFileList] = useState([] as any[]);
21+
1922
useEffect(() => {
2023
if (user) {
2124
checkTeam();
@@ -32,15 +35,22 @@ export default function DashboardLayout({
3235
};
3336

3437
return (
35-
<div className="h-screen">
36-
<div className="grid grid-cols-5">
37-
<div>
38-
<Sidebar />
39-
</div>
40-
<div className="grid-cols-4 pl-4 border-l border-neutral-800 w-[80vw]">
41-
{children}
38+
<div className="h-screen overscroll-x-none" suppressHydrationWarning>
39+
<FileListContext.Provider
40+
value={{
41+
fileList,
42+
setFileList,
43+
}}
44+
>
45+
<div className="grid sm:grid-cols-5 ">
46+
<div className="sm:col-span-1">
47+
<Sidebar />
48+
</div>
49+
<div className="sm:col-span-4 h-screen overscroll-x-none overflow-y-auto w-full">
50+
{children}
51+
</div>
4252
</div>
43-
</div>
53+
</FileListContext.Provider>
4454
</div>
4555
);
4656
}

‎app/(routes)/dashboard/page.tsx

+6-14
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { Button } from "@/components/ui/button";
77
import { useConvex, useMutation, useQuery } from "convex/react";
88
import { api } from "@/convex/_generated/api";
99
import { useRouter } from "next/navigation";
10+
import DashboardHeader from "./_components/DashboardHeader";
11+
import DashboardTable from "./_components/DashboardTable";
12+
1013
const page = () => {
1114
const { user } = useKindeBrowserClient();
1215
const convex = useConvex();
@@ -36,20 +39,9 @@ const page = () => {
3639
}
3740
};
3841
return (
39-
<div className="text-white h-screen">
40-
DashBoard Page user Id : {user?.id}
41-
<div className="">
42-
<h2>
43-
Welcome to the dashboard {user?.given_name} {user?.family_name}. You
44-
can now access the protected route. showing data for team = {}
45-
</h2>
46-
<h3>You can also logout by clicking the logout button below.</h3>
47-
</div>
48-
<div className="mt-3 ml-3">
49-
<Button className="rounded-full p-4" variant={"destructive"}>
50-
<LogoutLink>Logout</LogoutLink>
51-
</Button>
52-
</div>
42+
<div className="text-white">
43+
<DashboardHeader user={user} />
44+
<DashboardTable />
5345
</div>
5446
);
5547
};

0 commit comments

Comments
 (0)