Correcting some bugs and working on responsive.

app/(customer)/dashboard/layout.tsx

@@ -12,7 +12,7 @@ export default async function Layout({children}: { children: React.ReactNode })
 
     const user = await currentUser()
     console.log(user)
-    if(user){
+    if (user) {
         const userInfo = await prisma.user.findUnique({
             where: {
                 email: user?.email
@@ -25,13 +25,15 @@ export default async function Layout({children}: { children: React.ReactNode })
 
     return (
         <SidebarProvider>
-            <AppSidebar/>
+            <div className="flex flex-col lg:flex-row w-full">
-            <SidebarInset>
+                <AppSidebar/>
-                <Header/>
+                <SidebarInset>
-                <main className="h-full">
+                    <Header/>
-                    {children}
+                    <main className="h-full">
-                </main>
+                        {children}
-            </SidebarInset>
+                    </main>
+                </SidebarInset>
+            </div>
         </SidebarProvider>
     )
 }

app/(customer)/dashboard/profile/page.tsx

@@ -27,13 +27,18 @@ export default async function RoutePage(props: PageParams<{}>) {
                         <AvatarWithUpload user={userInfo}/>
                         {user.name}
                         <Badge className="ml-3 hidden lg:block">{userInfo.authMethod}</Badge>
+                        <Badge className="ml-3 hidden lg:block">{userInfo.role}</Badge>
                     </PageTitle>
-                    <PageActions className={"mt-2"}>
+                    <PageActions className="mt-2 hidden sm:block">
                         <ButtonDeleteAccount text="Delete my account"/>
                     </PageActions>
                 </div>
             <PageContent>
-                <UserForm userId={userInfo.id} defaultValues={userInfo}/>
+                <UserForm  userId={userInfo.id} defaultValues={userInfo}/>
+                <div className="mt-4 sm:hidden">
+                    <ButtonDeleteAccount text="Delete my account" />
+                </div>
+
             </PageContent>
         </Page>
     )

src/components/wrappers/Dashboard/Settings/SettingsTabs/SettingsTabs.tsx

@@ -17,12 +17,13 @@ export type SettingsTabsProps = {
 export const SettingsTabs = (props: SettingsTabsProps) => {
 
     return(
+
         <Tabs defaultValue="informations" >
-            <TabsList className="w-full" >
+            <TabsList className="w-full">
-                <TabsTrigger className="w-full" value="informations">Informations</TabsTrigger>
+                <TabsTrigger className="w-full " value="informations">Info</TabsTrigger>
-                <TabsTrigger className="w-full" value="users">Users</TabsTrigger>
+                <TabsTrigger className="w-full " value="users">Users</TabsTrigger>
-                <TabsTrigger className="w-full" value="email">Email</TabsTrigger>
+                <TabsTrigger className="w-full " value="email">Email</TabsTrigger>
-                <TabsTrigger className="w-full" value="storage">Storage</TabsTrigger>
+                <TabsTrigger className="w-full " value="storage">Storage</TabsTrigger>
             </TabsList>
             <TabsContent value="informations">
                 <div className="flex flex-1 flex-col gap-4 py-4">
@@ -34,7 +35,7 @@ export const SettingsTabs = (props: SettingsTabsProps) => {
                     <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
                 </div>
             </TabsContent>
-            <TabsContent value="users" className="h-full justify-between">
+            <TabsContent value="users" >
                 <SettingsUsersTab users={props.users}/>
             </TabsContent>
             <TabsContent value="email">
@@ -44,5 +45,6 @@ export const SettingsTabs = (props: SettingsTabsProps) => {
                 <SettingsStorageTab settings={props.settings}/>
             </TabsContent>
         </Tabs>
+
     )
 }

src/components/wrappers/Dashboard/Settings/SettingsUsersTab/SettingsUsersTab.tsx

@@ -9,6 +9,7 @@ export type SettingsUsersTabProps = {
 
 export const SettingsUsersTab = (props: SettingsUsersTabProps) => {
     return (
+
         <div className="flex flex-col h-full  py-4">
             <div className="flex gap-4 h-fit justify-between">
                 <h1>List of Portabase users</h1>

src/components/wrappers/table/data-table.tsx

@@ -7,47 +7,50 @@ export type dataTableProps = {
 
 export const DataTable = ({table}: dataTableProps) => {
     return (
-        <Table>
+        <div className="rounded-md border w-full ">
-            <TableHeader>
+            <Table className="w-full">
-                {table.getHeaderGroups().map((headerGroup) => (
+
-                    <TableRow key={headerGroup.id}>
+                <TableHeader>
-                        {headerGroup.headers.map((header) => {
+                    {table.getHeaderGroups().map((headerGroup) => (
-                            return (
+                        <TableRow key={headerGroup.id}>
-                                <TableHead key={header.id}>
+                            {headerGroup.headers.map((header) => {
-                                    {header.isPlaceholder
+                                return (
-                                        ? null
+                                    <TableHead key={header.id}>
-                                        : flexRender(
+                                        {header.isPlaceholder
-                                            header.column.columnDef.header,
+                                            ? null
-                                            header.getContext()
+                                            : flexRender(
-                                        )}
+                                                header.column.columnDef.header,
-                                </TableHead>
+                                                header.getContext()
-                            )
+                                            )}
-                        })}
+                                    </TableHead>
-                    </TableRow>
+                                )
-                ))}
+                            })}
-            </TableHeader>
-            <TableBody>
-                {table.getRowModel().rows?.length ? (
-                    table.getRowModel().rows.map((row) => (
-                        <TableRow
-                            key={row.id}
-                            data-state={row.getIsSelected() && "selected"}
-                        >
-                            {row.getVisibleCells().map((cell) => (
-                                <TableCell key={cell.id}>
-                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                </TableCell>
-                            ))}
                         </TableRow>
-                    ))
+                    ))}
-                ) : (
+                </TableHeader>
-                    <TableRow>
+                <TableBody>
-                        <TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
+                    {table.getRowModel().rows?.length ? (
-                            No results.
+                        table.getRowModel().rows.map((row) => (
-                        </TableCell>
+                            <TableRow
-                    </TableRow>
+                                key={row.id}
-                )}
+                                data-state={row.getIsSelected() && "selected"}
-            </TableBody>
+                            >
-        </Table>
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
+                                No results.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
     )
 }

src/components/wrappers/table/table-pagination-size.tsx

@@ -8,26 +8,24 @@ export type tablePaginationSizeProps = {
     pageSizeOptions?: number[]
 }
 
-
 export const TablePaginationSize = (props: tablePaginationSizeProps) => {
-
+    const { className, table, pageSizeOptions = [10, 20, 30, 40, 50] } = props;
-    const {className, table, pageSizeOptions = [10, 20, 30, 40, 50]} = props
 
     useEffect(() => {
-        table.setPageSize(Number(pageSizeOptions[0]))
+        table.setPageSize(Number(pageSizeOptions[0]));
     }, []);
 
     return (
-        <div className={cn("flex items-center justify-center space-x-2", className)}>
+        <div className={cn("flex items-center justify-end sm:justify-center space-x-2", className)}>
             <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
             <Select
                 value={`${table.getState().pagination.pageSize}`}
                 onValueChange={(value) => {
-                    table.setPageSize(Number(value))
+                    table.setPageSize(Number(value));
                 }}
             >
                 <SelectTrigger className="h-8 w-[4.5rem]">
-                    <SelectValue placeholder={table.getState().pagination.pageSize}/>
+                    <SelectValue placeholder={table.getState().pagination.pageSize} />
                 </SelectTrigger>
                 <SelectContent side="top">
                     {pageSizeOptions.map((pageSize) => (
@@ -38,6 +36,5 @@ export const TablePaginationSize = (props: tablePaginationSizeProps) => {
                 </SelectContent>
             </Select>
         </div>
-    )
+    );
-
+};
-}

src/components/wrappers/table/table-pagination.tsx

@@ -16,9 +16,9 @@ export function TablePagination(props: tablePaginationProps) {
     const {className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50]} = props
 
     return (
-        <div className={cn("flex mt-6", className)}>
+        <div className={cn("flex flex-col sm:flex-row mt-6", className)}>
-            <TablePaginationSize table={table} pageSizeOptions={pageSizeOptions}/>
+            <TablePaginationSize table={table} pageSizeOptions={pageSizeOptions} />
-            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end"/>
+            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end mt-5 sm:mt-0" />
         </div>
-    )
+    );
 }