Skip to content

Commit

Permalink
feat: added bookings table and booking creation form
Browse files Browse the repository at this point in the history
  • Loading branch information
bencodes07 committed Oct 25, 2024
1 parent 3db12cf commit 13968dd
Show file tree
Hide file tree
Showing 14 changed files with 1,037 additions and 39 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.1.1",
Expand Down Expand Up @@ -67,6 +67,7 @@
"class-variance-authority": "^0.7.0",
"classnames": "^2.5.1",
"clsx": "^2.1.1",
"cmdk": "1.0.0",
"date-fns": "^3.6.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-tailwindcss": "^3.15.1",
Expand Down
32 changes: 5 additions & 27 deletions src/app/company/dashboard/bookings/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
"use client";
import { Input } from "@/components/ui/input";
import {
DropdownMenu,
DropdownMenuContent,
Expand All @@ -16,9 +15,10 @@ import { useRouter } from "next/navigation";
import { deleteToken } from "@/lib/authActions";
import Loader from "@/components/layout/Loader";
import { useCompany } from "@/components/dashboard/CompanyContext";
import { BookingsTable } from "@/components/dashboard/company/BookingsTable";

export default function Page() {
const { user, loading, companyLoading, company } = useCompany();
const { user, loading, companyLoading } = useCompany();
const router = useRouter();

const logout = async () => {
Expand All @@ -36,11 +36,8 @@ export default function Page() {
return (
<div className="flex h-[calc(100%-32px)] flex-col items-start justify-start p-8 px-6">
<header className="flex w-full flex-row items-center justify-between">
<h1 className="m-4 font-medium text-muted-foreground md:text-2xl">
{company?.getCompany.name} (ID: {company?.getCompany.id})
</h1>
<h1 className="m-4 font-medium text-foreground md:text-2xl">Company Bookings</h1>
<div className="flex items-center gap-x-6">
<Input className="w-[320px]" placeholder="Search"></Input>
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild className={"mr-4"}>
<Button variant="ghost" className="relative size-8 rounded-full">
Expand Down Expand Up @@ -72,27 +69,8 @@ export default function Page() {
</div>
</header>

<div className="mt-8 flex h-[600px] w-full flex-col rounded-[20px] px-12">
<div className={"mt-6 flex h-[200px] w-full items-center justify-between"}>
<div className={"flex flex-row items-center justify-center"}>
<div
className={
"flex size-[200px] items-center justify-center rounded-full bg-primary text-6xl font-medium text-foreground"
}>
{extractNameInitials(company?.getCompany.name)}
</div>
<div className={"ml-12 flex flex-col"}>
<h1 className={"text-4xl font-semibold"}>{company?.getCompany.name}</h1>
</div>
</div>
</div>
<p className={"mt-10 text-muted-foreground"}>
{company?.getCompany.description !== "" ? (
company?.getCompany.description
) : (
<i>This company has not provided a description</i>
)}
</p>
<div className="mt-8 flex h-[600px] w-full flex-col rounded-[20px] px-6">
<BookingsTable />
</div>
</div>
);
Expand Down
17 changes: 15 additions & 2 deletions src/app/company/dashboard/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import { usePathname } from "next/navigation";
import { cn, extractNameInitials } from "@/lib/utils";
import Loader from "@/components/layout/Loader";
import { CompanyProvider, useCompany } from "@/components/dashboard/CompanyContext";
import { BriefcaseBusiness, Users } from "lucide-react";
import { BriefcaseBusiness, Settings, Users } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

function DashboardContent({ children }: { children: React.ReactNode }) {
const { companyLoading, loading, company } = useCompany();
const [active, setActive] = useState<"dashboard" | "bookings" | "users" | "members">("dashboard");
const [active, setActive] = useState<"dashboard" | "bookings" | "users" | "members" | "settings">("dashboard");
const pathname = usePathname();

useEffect(() => {
Expand All @@ -23,6 +23,8 @@ function DashboardContent({ children }: { children: React.ReactNode }) {
setActive("users");
} else if (pathname.includes("/company/dashboard/members")) {
setActive("members");
} else if (pathname.includes("/company/dashboard/settings")) {
setActive("settings");
} else {
setActive("dashboard");
}
Expand Down Expand Up @@ -96,6 +98,17 @@ function DashboardContent({ children }: { children: React.ReactNode }) {
Members
</Button>
</Link>
<Link href={"/company/dashboard/settings"}>
<Button
className={cn(
"w-[168px] justify-start",
active === "settings" ? "text-foreground" : "text-muted-foreground"
)}
variant={active === "settings" ? "default" : "ghost"}>
<Settings className="mx-2" size={18} />
Settings
</Button>
</Link>
</div>
</div>
</div>
Expand Down
95 changes: 95 additions & 0 deletions src/app/company/dashboard/settings/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
"use client";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { extractNameInitials } from "@/lib/utils";
import React from "react";
import { useRouter } from "next/navigation";
import { deleteToken } from "@/lib/authActions";
import Loader from "@/components/layout/Loader";
import { useCompany } from "@/components/dashboard/CompanyContext";

export default function Page() {
const { user, loading, companyLoading, company } = useCompany();
const router = useRouter();

const logout = async () => {
try {
await deleteToken();
window.location.reload();
} catch (logoutError) {
console.error("Logout failed", logoutError);
throw logoutError;
}
};

if (loading || companyLoading) return <Loader />;

return (
<div className="flex h-[calc(100%-32px)] flex-col items-start justify-start p-8 px-6">
<header className="flex w-full flex-row items-center justify-between">
<h1 className="m-4 font-medium text-foreground md:text-2xl">Company Settings</h1>
<div className="flex items-center gap-x-6">
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild className={"mr-4"}>
<Button variant="ghost" className="relative size-8 rounded-full">
<Avatar className="size-10">
<AvatarFallback className={"bg-primary"}>{extractNameInitials(user?.name)}</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align={"end"} className={"w-56 border-border"}>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">{user?.name}</p>
<p className="text-xs leading-none text-muted-foreground">{user?.email}</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
router.push("/dashboard/settings");
}}>
Settings
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={logout} className={"text-red-500"}>
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>

<div className="mt-8 flex h-[600px] w-full flex-col rounded-[20px] px-12">
<div className={"mt-6 flex h-[200px] w-full items-center justify-between"}>
<div className={"flex flex-row items-center justify-center"}>
<div
className={
"flex size-[200px] items-center justify-center rounded-full bg-primary text-6xl font-medium text-foreground"
}>
{extractNameInitials(company?.getCompany.name)}
</div>
<div className={"ml-12 flex flex-col"}>
<h1 className={"text-4xl font-semibold"}>{company?.getCompany.name}</h1>
</div>
</div>
</div>
<p className={"mt-10 text-muted-foreground"}>
{company?.getCompany.description !== "" ? (
company?.getCompany.description
) : (
<i>This company has not provided a description</i>
)}
</p>
</div>
</div>
);
}
8 changes: 3 additions & 5 deletions src/app/company/dashboard/users/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ import { useRouter } from "next/navigation";
import { deleteToken } from "@/lib/authActions";
import Loader from "@/components/layout/Loader";
import { useCompany } from "@/components/dashboard/CompanyContext";
import { UsersTable } from "@/components/dashboard/UsersTable";
import { UsersTable } from "@/components/dashboard/company/UsersTable";

export default function Page() {
const { user, loading, companyLoading, company } = useCompany();
const { user, loading, companyLoading } = useCompany();
const router = useRouter();

const logout = async () => {
Expand All @@ -36,9 +36,7 @@ export default function Page() {
return (
<div className="flex h-[calc(100%-32px)] flex-col items-start justify-start p-8 px-6">
<header className="flex w-full flex-row items-center justify-between">
<h1 className="m-4 font-medium text-muted-foreground md:text-2xl">
{company?.getCompany.name} (ID: {company?.getCompany.id})
</h1>
<h1 className="m-4 font-medium text-foreground md:text-2xl">Subscribed Clients</h1>
<div className="flex items-center gap-x-6">
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild className={"mr-4"}>
Expand Down
Loading

0 comments on commit 13968dd

Please sign in to comment.