Merge pull request #93 from design-sparx/feat/updated-projects-api-url

Add project creation feature and enhance header actions

Author: kelvink96

.changeset/dull-flies-rescue.md

@@ -0,0 +1,5 @@
+---
+"mantine-analytics-dashboard": patch
+---
+
+Add project creation feature and enhance header actions

app/api/auth/[...nextauth]/route.ts

@@ -30,13 +30,32 @@ export const authOptions: NextAuthOptions = {
 
           const response = await res.json();
 
+          // If your JWT already contains the permissions
+          // You can extract the payload portion without validating the signature
+          // (NextAuth will handle token validation)
+          const token = response.token;
+          let permissions = [];
+
+          if (token) {
+            try {
+              // Split the token and decode the payload portion
+              const payload = JSON.parse(
+                Buffer.from(token.split('.')[1], 'base64').toString(),
+              );
+              permissions = payload.permission || [];
+            } catch (e) {
+              console.error('Error decoding JWT:', e);
+            }
+          }
+
           // Map the backend response to the NextAuth user object
           const user = {
             id: response.user.userId,
             name: response.user.username,
             email: response.user.email,
             token: response.token,
             roles: response.roles,
+            permissions: permissions,
             expiration: response.expiration,
           };
 
@@ -67,6 +86,7 @@ export const authOptions: NextAuthOptions = {
         token.id = user.id;
         token.accessToken = user.token;
         token.roles = user.roles;
+        token.permissions = user.permissions;
         token.expiration = user.expiration;
       }
       return token;
@@ -82,11 +102,13 @@ export const authOptions: NextAuthOptions = {
         // @ts-ignore
         session.roles = token.roles;
         // @ts-ignore
+        session.permissions = token.permissions; // Add this line
+        // @ts-ignore
         session.expiration = token.expiration;
       }
       return session;
     },
-    async signOut({ token, session }) {
+    async signOut({ token }: any) {
       try {
         // You could add server-side logout logic here if needed
         // For example, invalidating the token on your backend
@@ -108,8 +130,7 @@ export const authOptions: NextAuthOptions = {
       return true;
     },
   },
-  secret:
-    process.env.NEXTAUTH_SECRET || 'your-secret-key-change-this-in-production',
+  secret: process.env.NEXTAUTH_SECRET!,
 };
 
 const handler = NextAuth(authOptions);

app/api/projects/route.ts

@@ -0,0 +1,56 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  try {
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/projects',
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        // Add any needed credentials or headers here
+      },
+    );
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to fetch projects' },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/projects',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+      },
+    );
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to create project', details: data },
+        { status: response.status },
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to create project' },
+      { status: 500 },
+    );
+  }
+}

app/apps/invoices/list/page.tsx

@@ -3,14 +3,15 @@
 import {
   ActionIcon,
   Anchor,
+  Button,
   Container,
   Group,
   Paper,
   PaperProps,
   Stack,
   Text,
 } from '@mantine/core';
-import { IconDotsVertical } from '@tabler/icons-react';
+import { IconDotsVertical, IconPlus } from '@tabler/icons-react';
 
 import { InvoicesTable, PageHeader } from '@/components';
 import { useFetchData } from '@/hooks';
@@ -53,7 +54,9 @@ function Page() {
           <PageHeader
             title="Invoices"
             breadcrumbItems={items}
-            invoiceAction={true}
+            actionContent={
+              <Button leftSection={<IconPlus size={18} />}>New Invoice</Button>
+            }
           />
           <Paper {...PAPER_PROPS}>
             <Group justify="space-between" mb="md">

app/apps/projects/components/NewProjectDrawer.tsx

@@ -0,0 +1,146 @@
+import { useState } from 'react';
+
+import {
+  Button,
+  Drawer,
+  DrawerProps,
+  LoadingOverlay,
+  Stack,
+  TextInput,
+  Textarea,
+} from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import { isNotEmpty, useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+
+import { useAuth } from '@/hooks/useAuth';
+
+type NewProjectDrawerProps = Omit<DrawerProps, 'title' | 'children'> & {
+  onProjectCreated?: () => void;
+};
+
+export const NewProjectDrawer = ({
+  onProjectCreated,
+  ...drawerProps
+}: NewProjectDrawerProps) => {
+  const { user } = useAuth();
+  const [loading, setLoading] = useState(false);
+
+  const form = useForm({
+    mode: 'controlled',
+    initialValues: {
+      title: '',
+      description: '',
+      status: 1,
+      startDate: null,
+      dueDate: null,
+    },
+    validate: {
+      title: isNotEmpty('Project title cannot be empty'),
+      description: isNotEmpty('Project description cannot be empty'),
+      startDate: isNotEmpty('Start date cannot be empty'),
+    },
+  });
+
+  const handleSubmit = async (values: typeof form.values) => {
+    setLoading(true);
+    try {
+      // Format dates for API
+      const payload = {
+        ...values,
+        startDate: values.startDate
+          ? new Date(values.startDate).toISOString()
+          : null,
+        dueDate: values.dueDate ? new Date(values.dueDate).toISOString() : null,
+        ownerId: user?.id,
+      };
+
+      const response = await fetch('/api/projects', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to create project');
+      }
+
+      // Show success notification
+      notifications.show({
+        title: 'Success',
+        message: 'Project created successfully',
+        color: 'green',
+      });
+
+      // Reset form
+      form.reset();
+
+      // Close drawer
+      if (drawerProps.onClose) {
+        drawerProps.onClose();
+      }
+
+      // Trigger refresh of projects list
+      if (onProjectCreated) {
+        onProjectCreated();
+      }
+    } catch (error) {
+      // Show error notification
+      notifications.show({
+        title: 'Error',
+        message:
+          error instanceof Error ? error.message : 'Failed to create project',
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Drawer {...drawerProps} title="Create a new project">
+      <LoadingOverlay visible={loading} />
+      <form onSubmit={form.onSubmit(handleSubmit)}>
+        <Stack>
+          <TextInput
+            label="Project title"
+            placeholder="Project title"
+            key={form.key('title')}
+            {...form.getInputProps('title')}
+            required
+          />
+          <Textarea
+            label="Project description"
+            placeholder="Project description"
+            key={form.key('description')}
+            {...form.getInputProps('description')}
+            required
+          />
+          <DateInput
+            label="Start date"
+            placeholder="Start date"
+            key={form.key('startDate')}
+            {...form.getInputProps('startDate')}
+            clearable
+          />
+          <DateInput
+            label="Due date"
+            placeholder="Due date"
+            key={form.key('dueDate')}
+            {...form.getInputProps('dueDate')}
+            clearable
+          />
+          <Button type="submit" mt="md" loading={loading}>
+            Create Project
+          </Button>
+        </Stack>
+      </form>
+    </Drawer>
+  );
+};
+
+export default NewProjectDrawer;

app/apps/projects/components/ProjectsCard/ProjectsCard.module.css

@@ -0,0 +1,3 @@
+.tasksCompleted {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}

app/apps/projects/components/ProjectsCard/ProjectsCard.stories.tsx

@@ -0,0 +1,37 @@
+import ProjectsCard from './ProjectsCard';
+
+import type { StoryObj } from '@storybook/react';
+
+
+const MOCKS = {
+  id: 'fe2c25c6-2cbc-4c73-9edc-8477af0000a8',
+  title: 'Gembucket',
+  description:
+    'Phasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.\n\nProin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem.\n\nDuis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit.',
+  status: 'active',
+  image: null,
+  completion: 86,
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Projects/Card',
+  component: ProjectsCard,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProjectsCard>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    ...MOCKS,
+    style: { width: 500 },
+  },
+};