ui update

src/app/api/session/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse, NextRequest } from 'next/server';
+import database from '../database';
+import { ObjectId } from 'mongodb';
+
+// Account login
+// Email exists
+// Password is valid
+export async function GET(req: NextRequest) {
+    const sessionId = new URL(req.url).searchParams.get('id');
+
+    if (typeof sessionId !== 'string')
+        return NextResponse.json(
+            {
+                message: 'Invalid structure, required param `id=`',
+            },
+            { status: 400 }
+        );
+
+    const user = await database.sessions.findOne({
+        _id: new ObjectId(sessionId),
+    });
+
+    if (!user)
+        return NextResponse.json(
+            {
+                message: 'Invalid session',
+            },
+            { status: 404 }
+        );
+
+    return NextResponse.json(
+        {
+            message: 'ok',
+            dashboard: {
+                engagement: [
+                    { week: 'Mo', views: 7300 },
+                    { week: 'Tuesday', views: 18000 },
+                    { week: 'Wednesday', views: 12000 },
+                    { week: 'Thursday', views: 12000 },
+                    { week: 'Friday', views: 23000 },
+                    { week: 'Saturday', views: 40000 },
+                    { week: 'Sunday', views: 20000 },
+                ],
+            },
+        },
+        { status: 200 }
+    );
+}

src/app/calendar/page.tsx

@@ -38,9 +38,7 @@ function CalendarApp() {
         isDark: true,
     });
 
-    useEffect(() => {
+    useEffect(() => {}, [eventsService]);
-        console.log(eventsService.getAll());
-    }, [eventsService]);
 
     const [newPostDialogOpen, setNewPostDialogOpen] = useState(false);
     const [date, setDate] = useState<Date>(today);

src/app/dashboard/page.tsx

@@ -4,8 +4,17 @@ import Ideas from '@/components/ideas';
 import RecentPosts from '@/components/recentPosts';
 import App from '@/components/app';
 import { Calendar } from '@/components/ui/calendar';
+import { cookies } from 'next/headers';
+import axios from 'axios';
+
+export default async function Dashboard() {
+    const cookieStore = await cookies();
+    const sessionId = cookieStore.get('session_id')?.value;
+
+    const data = (
+        await axios.get(`http:/localhost:3000/api/session/?id=${sessionId}`)
+    ).data.dashboard;
 
-export default function Dashboard() {
     return (
         <App>
             <div className="flex flex-1 flex-col p-6 px-5 md:px-10 h-max">
@@ -14,7 +23,7 @@ export default function Dashboard() {
                 </div>
 
                 <div className="w-full mt-5 flex flex-col xl:flex-row gap-5 items-stretch">
-                    <Engagement />
+                    <Engagement chartData={data.engagement} />
                     <div className="w-full pb-7 border rounded-2xl">
                         <Calendar
                             className="h-full w-full flex"
@@ -30,8 +39,8 @@ export default function Dashboard() {
                     </div>
                 </div>
 
-                <div className="w-full mt-5 flex gap-5">
+                <div className="w-full mt-5 flex gap-5 flex-col xl:flex-row">
-                    <div className="flex flex-col w-max gap-5">
+                    <div className="flex flex-col w-full gap-5 xl:w-[400px]">
                         <Ideas
                             ideas={[
                                 {

src/app/signup/page.tsx

@@ -58,10 +58,6 @@ export default function SignUp() {
                                 })
                                 .then(async (response) => {
                                     document.cookie = `session_id=${response.data.sessionId}`;
-                                    console.log(
-                                        'Account created with session',
-                                        response.data
-                                    );
                                     router.push('/dashboard');
                                 })
                                 .catch((err) => {

src/components/accountStatus.tsx

@@ -15,7 +15,7 @@ export default function AccountStatus({
                 <CardTitle>Account status</CardTitle>
             </CardHeader>
 
-            <CardContent className="w-[400px] h-[100px] grid gap-2 grid-cols-2">
+            <CardContent className="w-full h-[100px] grid gap-2 grid-cols-2">
                 {accounts.map((account, i) => (
                     <div key={i} className="flex">
                         {

src/components/engagement.tsx

@@ -16,15 +16,6 @@ import {
     ChartTooltipContent,
 } from '@/components/ui/chart';
 
-const chartData = [
-    { month: 'January', views: 18600 },
-    { month: 'February', views: 1000 },
-    { month: 'March', views: 12000 },
-    { month: 'April', views: 7300 },
-    { month: 'May', views: 23000 },
-    { month: 'June', views: 18000 },
-];
-
 const chartConfig = {
     views: {
         label: 'Views',
@@ -32,13 +23,20 @@ const chartConfig = {
     },
 } satisfies ChartConfig;
 
-export default function Engagement() {
+export default function Engagement({
+    chartData,
+}: {
+    chartData: {
+        week: string;
+        views: number;
+    }[];
+}) {
     return (
         <Card>
             <CardHeader>
                 <CardTitle>Post engagement</CardTitle>
                 <CardDescription>
-                    Showing engagements for the last 6 months
+                    Showing engagements for the last week
                 </CardDescription>
             </CardHeader>
             <CardContent>
@@ -56,7 +54,7 @@ export default function Engagement() {
                     >
                         <CartesianGrid vertical={false} />
                         <XAxis
-                            dataKey="month"
+                            dataKey="week"
                             tickLine={false}
                             axisLine={false}
                             tickMargin={8}

src/components/ideas.tsx

@@ -14,7 +14,7 @@ export default function Ideas({
                 <CardTitle>Daily content Ideas</CardTitle>
             </CardHeader>
 
-            <CardContent className="w-[400px] h-[100px] flex gap-5 flex-col">
+            <CardContent className="w-full h-[100px] flex gap-5 flex-col">
                 {ideas.map(({ idea, checked }, i) => (
                     <div className="flex space-x-2" key={i}>
                         <Checkbox

src/components/recentPosts.tsx

@@ -20,11 +20,8 @@ export default function RecentPosts({
                 <CardTitle>Recent posts</CardTitle>
             </CardHeader>
 
-            <CardContent className="w-full grid grid-rows-2 gap-4 items-stretch">
+            <CardContent className="w-full h-full grid grid-rows-2 gap-4 items-stretch">
                 {posts.map((post, i) => (
-                    // <div className="border flex flex-col h-full p-4 rounded-xl" key={i}>
-                    //     {post.content}
-                    // </div>
                     <div
                         key={i}
                         className="border flex flex-col h-full p-4 rounded-xl"