style various ui components

IhsenBouallegue · Oct 29, 2023 · b193840 · b193840
1 parent bb6897e
commit b193840
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 77 deletions.
diff --git a/src/app/(dashboard)/[organizationSlug]/dashboard/billing/page.tsx b/src/app/(dashboard)/[organizationSlug]/dashboard/billing/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div className="max-w-screen-2xl m-auto space-y-12">
+      <h2 className="text-3xl font-bold">Billing</h2>
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/[organizationSlug]/dashboard/organization/settings.tsx b/src/app/(dashboard)/[organizationSlug]/dashboard/organization/settings.tsx
@@ -1,4 +1,6 @@
 import { deleteOrganization } from "@/components/dashboard/organization-switcher/organization-switcher.actions";
+import db from "@/lib/db";
+import { organizations } from "@/lib/schema/orgaizations";
 import { Button } from "@/ui/button";
 import {
   Card,
@@ -7,24 +9,37 @@ import {
   CardHeader,
   CardTitle,
 } from "@/ui/card";
+import { eq } from "drizzle-orm";
 
-export default function Settings({
+export default async function Settings({
   selectedOrganizationSlug,
 }: { selectedOrganizationSlug: string }) {
   const deleteOrganizationWithSlug = deleteOrganization.bind(
     null,
     selectedOrganizationSlug
   );
-
+  const organization = await db.query.organizations.findFirst({
+    where: eq(organizations.slug, selectedOrganizationSlug),
+  });
   return (
     <Card>
       <CardHeader>
         <CardTitle className="text-2xl font-bold">Settings</CardTitle>
         <CardDescription>Adjust your organization's settings.</CardDescription>
       </CardHeader>
       <CardContent className="grid gap-6">
+        {organization?.isPersonalOrganization && (
+          <p className="text-sm text-muted">
+            Deleting a personal organization is not possible.
+          </p>
+        )}
         <form>
-          <Button variant="destructive" formAction={deleteOrganizationWithSlug}>
+          <Button
+            variant="destructive"
+            formAction={deleteOrganizationWithSlug}
+            aria-disabled={organization?.isPersonalOrganization}
+            disabled={organization?.isPersonalOrganization}
+          >
             Delete
           </Button>
         </form>

diff --git a/src/app/(dashboard)/[organizationSlug]/dashboard/page.tsx b/src/app/(dashboard)/[organizationSlug]/dashboard/page.tsx
@@ -2,7 +2,7 @@
 
 import { CalendarDateRangePicker } from "@/components/dashboard/date-range-picker";
 import { Overview } from "@/components/dashboard/overview";
-import { RecentSales } from "@/components/dashboard/recent-sales";
+import { RecentClicks } from "@/components/dashboard/recent-clicks";
 import { Icons } from "@/components/icons";
 import { Button } from "@/ui/button";
 import {
@@ -14,18 +14,18 @@ import {
 } from "@/ui/card";
 import { toast } from "@/ui/use-toast";
 
-export default function DashboardPage() {
+export default function Page() {
   return (
     <div className="max-w-screen-2xl m-auto flex-1 space-y-4">
       <div className="flex items-center justify-between space-y-2">
-        <h2 className="text-3xl font-bold">Dashboard</h2>
+        <h2 className="text-3xl font-bold">Overview</h2>
         <div className="flex items-center space-x-2">
           <CalendarDateRangePicker />
           <Button
             onClick={() => {
               toast({
-                title: "Organization created",
-                description: "You can now create HubSpaces and Hubs.",
+                title: "Download is not available yet.",
+                description: "We are working hard on this feature!",
               });
             }}
           >
@@ -37,35 +37,35 @@ export default function DashboardPage() {
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
+            <CardTitle className="text-sm font-medium">Total Visits</CardTitle>
             <Icons.billing />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">$45,231.89</div>
+            <div className="text-2xl font-bold">23189</div>
             <p className="text-xs text-muted-foreground">
               +20.1% from last month
             </p>
           </CardContent>
         </Card>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
+            <CardTitle className="text-sm font-medium">Total Clicks</CardTitle>
             <Icons.billing />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">+2350</div>
+            <div className="text-2xl font-bold">15650</div>
             <p className="text-xs text-muted-foreground">
               +180.1% from last month
             </p>
           </CardContent>
         </Card>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Sales</CardTitle>
+            <CardTitle className="text-sm font-medium">Link Created</CardTitle>
             <Icons.billing />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">+12,234</div>
+            <div className="text-2xl font-bold">2234</div>
             <p className="text-xs text-muted-foreground">
               +19% from last month
             </p>
@@ -77,7 +77,7 @@ export default function DashboardPage() {
             <Icons.billing />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">+573</div>
+            <div className="text-2xl font-bold">273</div>
             <p className="text-xs text-muted-foreground">
               +201 since last hour
             </p>
@@ -87,19 +87,19 @@ export default function DashboardPage() {
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
         <Card className="col-span-4">
           <CardHeader>
-            <CardTitle>Overview</CardTitle>
+            <CardTitle>Link Clicks</CardTitle>
           </CardHeader>
           <CardContent className="pl-2">
             <Overview />
           </CardContent>
         </Card>
         <Card className="col-span-3">
           <CardHeader>
-            <CardTitle>Recent Sales</CardTitle>
-            <CardDescription>You made 265 sales this month.</CardDescription>
+            <CardTitle>Recent Clicks</CardTitle>
+            <CardDescription>265 clicks happened today.</CardDescription>
           </CardHeader>
           <CardContent>
-            <RecentSales />
+            <RecentClicks />
           </CardContent>
         </Card>
       </div>

diff --git a/src/app/(dashboard)/[organizationSlug]/dashboard/plan/page.tsx b/src/app/(dashboard)/[organizationSlug]/dashboard/plan/page.tsx
@@ -1,3 +1,7 @@
 export default function Page() {
-  return <div>hello plans</div>;
+  return (
+    <div className="max-w-screen-2xl m-auto space-y-12">
+      <h2 className="text-3xl font-bold">Plans</h2>
+    </div>
+  );
 }
diff --git a/src/app/api/organization-members/route.ts b/src/app/api/organization-members/route.ts
diff --git a/src/components/dashboard/overview.tsx b/src/components/dashboard/overview.tsx
@@ -69,9 +69,9 @@ export function Overview() {
           fontSize={12}
           tickLine={false}
           axisLine={false}
-          tickFormatter={(value: string) => `$${value}`}
+          tickFormatter={(value: string) => `${value}`}
         />
-        <Bar dataKey="total" fill="#adfa1d" radius={[4, 4, 0, 0]} />
+        <Bar dataKey="total" fill="#ffa538" radius={[4, 4, 0, 0]} />
       </BarChart>
     </ResponsiveContainer>
   );

diff --git a/src/components/dashboard/recent-sales.tsx → src/components/dashboard/recent-clicks.tsx b/src/components/dashboard/recent-sales.tsx → src/components/dashboard/recent-clicks.tsx
@@ -1,6 +1,6 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
 
-export function RecentSales() {
+export function RecentClicks() {
   return (
     <div className="space-y-8">
       <div className="flex items-center">
@@ -14,18 +14,18 @@ export function RecentSales() {
             [email protected]
           </p>
         </div>
-        <div className="ml-auto font-medium">+$1,999.00</div>
+        <div className="ml-auto font-medium">Hub2</div>
       </div>
       <div className="flex items-center">
-        <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
+        <Avatar className="flex h-9 w-9">
           <AvatarImage src="/logo/hubone_logo.svg" alt="Avatar" />
           <AvatarFallback>JL</AvatarFallback>
         </Avatar>
         <div className="ml-4 space-y-1">
           <p className="text-sm font-medium leading-none">Jackson Lee</p>
           <p className="text-sm text-muted-foreground">[email protected]</p>
         </div>
-        <div className="ml-auto font-medium">+$39.00</div>
+        <div className="ml-auto font-medium">Hub1</div>
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -38,7 +38,7 @@ export function RecentSales() {
             [email protected]
           </p>
         </div>
-        <div className="ml-auto font-medium">+$299.00</div>
+        <div className="ml-auto font-medium">Hub1</div>
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -49,7 +49,7 @@ export function RecentSales() {
           <p className="text-sm font-medium leading-none">William Kim</p>
           <p className="text-sm text-muted-foreground">[email protected]</p>
         </div>
-        <div className="ml-auto font-medium">+$99.00</div>
+        <div className="ml-auto font-medium">Hub3</div>
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -60,7 +60,7 @@ export function RecentSales() {
           <p className="text-sm font-medium leading-none">Sofia Davis</p>
           <p className="text-sm text-muted-foreground">[email protected]</p>
         </div>
-        <div className="ml-auto font-medium">+$39.00</div>
+        <div className="ml-auto font-medium">Hub1</div>
       </div>
     </div>
   );

diff --git a/src/components/dashboard/user-nav.tsx b/src/components/dashboard/user-nav.tsx
@@ -47,16 +47,18 @@ export async function UserNav() {
           <DropdownMenuItem>New Organization</DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <form
-            action={async () => {
-              "use server";
-              await signOut({ redirect: true, redirectTo: "/" });
-            }}
-          >
-            <button type="submit">Log out</button>
-          </form>
-        </DropdownMenuItem>
+        <form
+          action={async () => {
+            "use server";
+            await signOut({ redirect: true, redirectTo: "/" });
+          }}
+        >
+          <DropdownMenuItem>
+            <button type="submit" className="w-full text-left">
+              Log out
+            </button>
+          </DropdownMenuItem>
+        </form>
       </DropdownMenuContent>
     </DropdownMenu>
   );