Release v1.1.0 (#40)

MarkusThielker · Mar 17, 2024 · b34f5e7 · b34f5e7
2 parents 6ea3d90 + 86b47db
commit b34f5e7
Show file tree

Hide file tree

Showing 23 changed files with 557 additions and 305 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "next-finances",
   "description": "A finances application to keep track of my personal spendings",
   "homepage": "https://github.com/MarkusThielker/next-finances",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "MIT",
   "author": {
     "name": "Markus Thielker"
@@ -50,6 +50,7 @@
     "swr": "^2.2.5",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -42,7 +42,7 @@ export default async function AccountPage() {
 
     return (
         <div className="flex flex-col items-center">
-            <Card className="w-full max-w-md mt-12">
+            <Card className="w-full max-w-md md:mt-12">
                 <CardHeader>
                     <CardTitle>Hey, {user?.username}!</CardTitle>
                     <CardDescription>This is your account overview.</CardDescription>
@@ -81,7 +81,7 @@ export default async function AccountPage() {
                         </div>
                     </div>
                 </CardContent>
-                <CardFooter className="space-x-4">
+                <CardFooter className="grid gap-4 grid-cols-1 md:grid-cols-2">
                     {
                         process.env.NODE_ENV === 'development' && (
                             <GenerateSampleDataForm onSubmit={generateSampleData}/>

diff --git a/src/app/categories/columns.tsx b/src/app/categories/columns.tsx
@@ -25,6 +25,7 @@ export const columns = (
                     </svg>
                 );
             },
+            size: 65,
         },
         {
             accessorKey: 'createdAt',

diff --git a/src/app/categories/page.tsx b/src/app/categories/page.tsx
@@ -25,6 +25,6 @@ export default async function CategoriesPage() {
             categories={categories}
             onSubmit={categoryCreateUpdate}
             onDelete={categoryDelete}
-            className="flex flex-col justify-center space-y-4 p-10"/>
+            className="flex flex-col justify-center space-y-4"/>
     );
 }
diff --git a/src/app/entities/columns.tsx b/src/app/entities/columns.tsx
@@ -17,6 +17,7 @@ export const columns = (
         {
             accessorKey: 'type',
             header: 'Type',
+            size: 100,
         },
         {
             accessorKey: 'createdAt',

diff --git a/src/app/entities/page.tsx b/src/app/entities/page.tsx
@@ -28,6 +28,6 @@ export default async function EntitiesPage() {
             entities={entities}
             onSubmit={entityCreateUpdate}
             onDelete={entityDelete}
-            className="flex flex-col justify-center space-y-4 p-10"/>
+            className="flex flex-col justify-center space-y-4"/>
     );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,10 +22,10 @@ export default function RootLayout({
         <html lang="en">
         <body className={cn('dark', inter.className)}>
         <Navigation/>
-        <main>
+        <main className="p-4 sm:p-8">
             {children}
-            <Toaster/>
         </main>
+        <Toaster/>
         </body>
         </html>
     );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -200,7 +200,7 @@ export default async function DashboardPage(props: { searchParams?: { scope: Sco
             categoryPercentages={categoryPercentages}
             entityExpenses={entityExpensesFormat}
             entityPercentages={entityPercentages}
-            className="flex flex-col justify-center space-y-4 p-10"
+            className="flex flex-col justify-center space-y-4"
         />
     );
 }
diff --git a/src/app/payments/columns.tsx b/src/app/payments/columns.tsx
@@ -18,6 +18,7 @@ export const columns = (
             cell: ({row}) => {
                 return format(row.original.date, 'PPP');
             },
+            size: 175,
         },
         {
             accessorKey: 'amount',
@@ -28,6 +29,7 @@ export const columns = (
                     currency: 'EUR',
                 }).format(row.getValue('amount') as number / 100);
             },
+            size: 70,
         },
         {
             accessorKey: 'payorId',
@@ -36,6 +38,7 @@ export const columns = (
                 const entity = entities.find((entity) => entity.id === row.original.payorId);
                 return entity?.name ?? '-';
             },
+            size: 200,
         },
         {
             accessorKey: 'payeeId',
@@ -44,6 +47,7 @@ export const columns = (
                 const entity = entities.find((entity) => entity.id === row.original.payeeId);
                 return entity?.name ?? '-';
             },
+            size: 200,
         },
         {
             accessorKey: 'categoryId',
@@ -60,10 +64,12 @@ export const columns = (
                     </div>
                 );
             },
+            size: 200,
         },
         {
             accessorKey: 'note',
             header: 'Note',
+            size: 200,
         },
         {
             id: 'actions',

diff --git a/src/app/payments/page.tsx b/src/app/payments/page.tsx
@@ -58,6 +58,6 @@ export default async function PaymentsPage() {
             categories={categories}
             onSubmit={paymentCreateUpdate}
             onDelete={paymentDelete}
-            className="flex flex-col justify-center space-y-4 p-10"/>
+            className="flex flex-col justify-center space-y-4"/>
     );
 }
diff --git a/src/components/categoryPageClientComponents.tsx b/src/components/categoryPageClientComponents.tsx
@@ -23,6 +23,8 @@ import {
 } from '@/components/ui/alert-dialog';
 import { categoryFormSchema } from '@/lib/form-schemas/categoryFormSchema';
 import CategoryForm from '@/components/form/categoryForm';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 
 export default function CategoryPageClientContent({categories, onSubmit, onDelete, className}: {
     categories: Category[],
@@ -31,6 +33,7 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
     className: string,
 }) {
 
+    const isDesktop = useMediaQuery('(min-width: 768px)');
     const router = useRouter();
 
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -97,26 +100,51 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
                 <p className="text-3xl font-semibold">Categories</p>
 
                 {/* Edit dialog */}
-                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                    <DialogTrigger asChild>
-                        <Button
-                            onClick={() => {
-                                setSelectedCategory(undefined);
-                                setIsEditDialogOpen(true);
-                            }}>
-                            Create Category
-                        </Button>
-                    </DialogTrigger>
-                    <DialogContent>
-                        <DialogHeader>
-                            <DialogTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DialogTitle>
-                        </DialogHeader>
-                        <CategoryForm
-                            value={selectedCategory}
-                            onSubmit={handleSubmit}
-                            className="flex flex-row space-x-4 py-4"/>
-                    </DialogContent>
-                </Dialog>
+                {
+                    isDesktop ? (
+                        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DialogTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedCategory(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Category
+                                </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DialogTitle>
+                                </DialogHeader>
+                                <CategoryForm
+                                    value={selectedCategory}
+                                    onSubmit={handleSubmit}
+                                    className="flex flex-row space-x-4 py-4"/>
+                            </DialogContent>
+                        </Dialog>
+                    ) : (
+                        <Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DrawerTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedCategory(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Category
+                                </Button>
+                            </DrawerTrigger>
+                            <DrawerContent className="p-4">
+                                <DrawerHeader>
+                                    <DrawerTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DrawerTitle>
+                                </DrawerHeader>
+                                <CategoryForm
+                                    value={selectedCategory}
+                                    onSubmit={handleSubmit}
+                                    className="flex flex-row space-x-4 py-4"/>
+                            </DrawerContent>
+                        </Drawer>
+                    )
+                }
             </div>
 
             {/* Data Table */}

diff --git a/src/components/dashboardPageClientComponents.tsx b/src/components/dashboardPageClientComponents.tsx
@@ -49,7 +49,7 @@ export default function DashboardPageClientContent(
     return (
         <div className={className}>
             <div className="flex flex-col space-y-4">
-                <div className="flex items-center justify-between w-full">
+                <div className="flex items-center justify-between w-full space-x-8">
 
                     <p className="text-3xl font-semibold">Dashboard</p>
 

diff --git a/src/components/entityPageClientComponents.tsx b/src/components/entityPageClientComponents.tsx
@@ -24,6 +24,8 @@ import {
     AlertDialogFooter,
     AlertDialogHeader,
 } from '@/components/ui/alert-dialog';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 
 export default function EntityPageClientContent({entities, onSubmit, onDelete, className}: {
     entities: Entity[],
@@ -32,6 +34,7 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
     className: string,
 }) {
 
+    const isDesktop = useMediaQuery('(min-width: 768px)');
     const router = useRouter();
 
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -125,26 +128,51 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
                 <p className="text-3xl font-semibold">Entities</p>
 
                 {/* Edit dialog */}
-                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                    <DialogTrigger asChild>
-                        <Button
-                            onClick={() => {
-                                setSelectedEntity(undefined);
-                                setIsEditDialogOpen(true);
-                            }}>
-                            Create Entity
-                        </Button>
-                    </DialogTrigger>
-                    <DialogContent>
-                        <DialogHeader>
-                            <DialogTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DialogTitle>
-                        </DialogHeader>
-                        <EntityForm
-                            value={selectedEntity}
-                            onSubmit={handleSubmit}
-                            className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
-                    </DialogContent>
-                </Dialog>
+                {
+                    isDesktop ? (
+                        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DialogTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedEntity(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Entity
+                                </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DialogTitle>
+                                </DialogHeader>
+                                <EntityForm
+                                    value={selectedEntity}
+                                    onSubmit={handleSubmit}
+                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                            </DialogContent>
+                        </Dialog>
+                    ) : (
+                        <Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DrawerTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedEntity(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Entity
+                                </Button>
+                            </DrawerTrigger>
+                            <DrawerContent className="p-4">
+                                <DrawerHeader>
+                                    <DrawerTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DrawerTitle>
+                                </DrawerHeader>
+                                <EntityForm
+                                    value={selectedEntity}
+                                    onSubmit={handleSubmit}
+                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                            </DrawerContent>
+                        </Drawer>
+                    )
+                }
             </div>
 
             {/* Filter input */}