External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

adding agent pages.

Browse Source
This commit is contained in:
killian-larcher
2024-11-10 23:12:38 +01:00
parent 84030dcba0
commit c76727f0d1
30 changed files with 627 additions and 8469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/Agent/AgentCard/AgentCard.tsx
+24
View File
@@ -0,0 +1,24 @@
"use client";
import {Card, CardContent, CardHeader} from "@/components/ui/card";
import Link from "next/link";
export type agentCardProps = {
id: string;
name: string;
lastContact: string;
}
export const AgentCard = (props: agentCardProps) => {
const {id, name, lastContact} = props;
return (
<Link href={`/dashboard/agents/${id}`}>
<Card>
<CardHeader>{name}</CardHeader>
<CardContent>Agent's Description</CardContent>
</Card>
</Link>
)
}
src/components/wrappers/Auth/Login/LoginForm/LoginForm.tsx
+2
View File
@@ -59,6 +59,7 @@ export const LoginForm = (props: loginFormProps) => {
<FormField
control={form.control}
name="email"
defaultValue=""
render={({field}) => (
<FormItem>
<FormLabel>Email</FormLabel>
@@ -73,6 +74,7 @@ export const LoginForm = (props: loginFormProps) => {
<FormField
control={form.control}
name="password"
defaultValue=""
render={({field}) => (
<FormItem>
src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx
+4
View File
@@ -63,6 +63,7 @@ export const RegisterForm = (props: registerFormProps) => {
<FormField
control={form.control}
name="name"
defaultValue=""
render={({field}) => (
<FormItem>
<FormLabel>Name</FormLabel>
@@ -77,6 +78,7 @@ export const RegisterForm = (props: registerFormProps) => {
<FormField
control={form.control}
name="email"
defaultValue=""
render={({field}) => (
<FormItem>
<FormLabel>Email</FormLabel>
@@ -91,6 +93,7 @@ export const RegisterForm = (props: registerFormProps) => {
<FormField
control={form.control}
name="password"
defaultValue=""
render={({field}) => (
<FormItem>
<FormLabel className="flex">Password
@@ -115,6 +118,7 @@ export const RegisterForm = (props: registerFormProps) => {
<FormField
control={form.control}
name="confirmPassword"
defaultValue=""
render={({field}) => (
<FormItem>
<FormLabel>Password Confirmation</FormLabel>
src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx
-1
View File
@@ -1,4 +1,3 @@
import {Button} from "@/components/ui/button"
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
import {currentUser} from "@/auth/current-user";
import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx
+14 -18
View File
@@ -9,23 +9,16 @@ import {
} from "@/components/ui/sidebar"
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import {
Calendar,
ChartArea,
ChevronDown,
ChevronUp,
Home,
Inbox,
Search,
Settings,
ShieldHalf,
User2
} from "lucide-react";
import Link from "next/link";
import {signOutAction} from "@/features/auth/auth.action";
import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
import {Button, buttonVariants} from "@/components/ui/button"
import {buttonVariants} from "@/components/ui/button"
import {cn} from "@/lib/utils";
@@ -65,10 +58,10 @@ export function AppSidebar() {
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton>
Select Workspace
<ChevronDown className="ml-auto"/>
</SidebarMenuButton>
<SidebarMenuButton>
Select Workspace
<ChevronDown className="ml-auto"/>
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[--radix-popper-anchor-width]">
<DropdownMenuItem>
@@ -89,15 +82,18 @@ export function AppSidebar() {
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild >
<SidebarMenuButton asChild>
<Link
className={cn(buttonVariants({size: "lg", variant: "ghost"}), "justify-start p-0")}
className={cn(buttonVariants({
size: "lg",
variant: "ghost"
}), "justify-start p-0")}
href={`${BASE_URL}/${item.url}`}>
<item.icon/>
<span>{item.title}</span>
<item.icon/>
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
<SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100" />
<SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100"/>
</SidebarMenuItem>
src/components/wrappers/cards-with-pagination.tsx
+150
View File
@@ -0,0 +1,150 @@
'use client'
import React, {useState} from 'react'
import {Card} from "@/components/ui/card"
import {cn} from "@/lib/utils";
import {
Pagination, PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext, PaginationPrevious
} from "@/components/ui/pagination";
export type cardsWithPaginationProps = {
data: Array<{}>;
cardItem: React.ComponentType;
cardsPerPage?: number
numberOfColumns?: number
}
export const CardsWithPagination = (props: cardsWithPaginationProps) => {
const {data, cardItem, cardsPerPage = 5, numberOfColumns = 1} = props
const CardItem = cardItem
const [currentPage, setCurrentPage] = useState(1)
const totalPages = Math.ceil(data.length / cardsPerPage)
const indexOfLastCard = currentPage * cardsPerPage
const indexOfFirstCard = indexOfLastCard - cardsPerPage
const currentCards = data.slice(indexOfFirstCard, indexOfLastCard)
const handlePageChange = (pageNumber: number) => {
setCurrentPage(pageNumber)
}
const renderPaginationItems = () => {
const items = []
const maxVisiblePages = 3
if (totalPages <= maxVisiblePages) {
for (let i = 1; i <= totalPages; i++) {
items.push(
<PaginationItem key={i}>
<PaginationLink
onClick={() => handlePageChange(i)}
isActive={currentPage === i}
>
{i}
</PaginationLink>
</PaginationItem>
)
}
} else {
if (currentPage <= 2) {
for (let i = 1; i <= maxVisiblePages; i++) {
items.push(
<PaginationItem key={i}>
<PaginationLink
onClick={() => handlePageChange(i)}
isActive={currentPage === i}
>
{i}
</PaginationLink>
</PaginationItem>
)
}
items.push(
<PaginationItem key="ellipsis1">
<PaginationEllipsis/>
</PaginationItem>
)
} else if (currentPage >= totalPages - 1) {
items.push(
<PaginationItem key="ellipsis2">
<PaginationEllipsis/>
</PaginationItem>
)
for (let i = totalPages - 2; i <= totalPages; i++) {
items.push(
<PaginationItem key={i}>
<PaginationLink
onClick={() => handlePageChange(i)}
isActive={currentPage === i}
>
{i}
</PaginationLink>
</PaginationItem>
)
}
} else {
items.push(
<PaginationItem key="ellipsis3">
<PaginationEllipsis/>
</PaginationItem>
)
for (let i = currentPage - 1; i <= currentPage + 1; i++) {
items.push(
<PaginationItem key={i}>
<PaginationLink
onClick={() => handlePageChange(i)}
isActive={currentPage === i}
>
{i}
</PaginationLink>
</PaginationItem>
)
}
items.push(
<PaginationItem key="ellipsis4">
<PaginationEllipsis/>
</PaginationItem>
)
}
}
return items
}
return (
<div className="">
<div className={cn(`grid auto-rows-min gap-4 md:grid-cols-${numberOfColumns}`)}>
{currentCards.map((card, key) => (
<CardItem key={key} {...card}/>
))}
</div>
<Pagination className="mt-8">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
aria-disabled={currentPage === 1}
tabIndex={currentPage === 1 ? -1 : 0}
/>
</PaginationItem>
{renderPaginationItems()}
<PaginationItem>
<PaginationNext
onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
aria-disabled={currentPage === totalPages}
tabIndex={currentPage === totalPages ? -1 : 0}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
)
}