@@ -341,11 +348,11 @@ export default function HeaderNotificationNav() {
sed do eiusmod tempor incididunt
-
+
-
+
-
+
)
}
diff --git a/src/app/ui/dashboard/Header/HeaderProfileNav.tsx b/src/app/ui/dashboard/Header/HeaderProfileNav.tsx
index bd22c67..bb1e437 100644
--- a/src/app/ui/dashboard/Header/HeaderProfileNav.tsx
+++ b/src/app/ui/dashboard/Header/HeaderProfileNav.tsx
@@ -1,7 +1,13 @@
-'use client'
-
import {
- Badge, Dropdown, Nav, NavItem,
+ Badge,
+ Dropdown,
+ DropdownDivider,
+ DropdownHeader,
+ DropdownItem,
+ DropdownMenu,
+ DropdownToggle,
+ Nav,
+ NavItem,
} from 'react-bootstrap'
import Image from 'next/image'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -19,8 +25,7 @@ import {
faGear, faListCheck, faLock, faPowerOff,
} from '@fortawesome/free-solid-svg-icons'
import Link from 'next/link'
-import axios from 'axios'
-import { useRouter } from 'next/navigation'
+import HeaderLogout from '@/app/ui/dashboard/Header/HeaderLogout'
type ItemWithIconProps = {
icon: IconDefinition;
@@ -38,19 +43,10 @@ const ItemWithIcon = (props: ItemWithIconProps) => {
}
export default function HeaderProfileNav() {
- const router = useRouter()
-
- const logout = async () => {
- const res = await axios.post('/api/mock/logout')
- if (res.status === 200) {
- router.push('/login')
- }
- }
-
return (
)
diff --git a/src/app/ui/dashboard/Sidebar/SidebarNav.tsx b/src/app/ui/dashboard/Sidebar/SidebarNav.tsx
index e3eec05..da20b06 100644
--- a/src/app/ui/dashboard/Sidebar/SidebarNav.tsx
+++ b/src/app/ui/dashboard/Sidebar/SidebarNav.tsx
@@ -1,12 +1,5 @@
-'use client'
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
- faAddressCard,
- faBell,
- faFileLines,
- faStar,
- IconDefinition,
+ faAddressCard, faBell, faFileLines, faStar,
} from '@fortawesome/free-regular-svg-icons'
import {
faBug,
@@ -21,40 +14,10 @@ import {
faPuzzlePiece,
faRightToBracket,
} from '@fortawesome/free-solid-svg-icons'
-import React, { PropsWithChildren, useContext } from 'react'
-import { Badge, Nav } from 'react-bootstrap'
-import Link from 'next/link'
+import React, { PropsWithChildren } from 'react'
+import { Badge } from 'react-bootstrap'
import SidebarNavGroup from '@/app/ui/dashboard/Sidebar/SidebarNavGroup'
-import { SidebarContext } from '@/app/ui/dashboard/sidebar-provider'
-
-type SidebarNavItemProps = {
- href: string;
- icon?: IconDefinition;
-} & PropsWithChildren
-
-const SidebarNavItem = (props: SidebarNavItemProps) => {
- const {
- icon,
- children,
- href,
- } = props
-
- const {
- showSidebarState: [, setIsShowSidebar],
- } = useContext(SidebarContext)
-
- return (
-
-
- setIsShowSidebar(false)}>
- {icon ?
- : }
- {children}
-
-
-
- )
-}
+import SidebarNavItem from '@/app/ui/dashboard/Sidebar/SidebarNavItem'
const SidebarNavTitle = (props: PropsWithChildren) => {
const { children } = props
diff --git a/src/app/ui/dashboard/Sidebar/SidebarNavItem.tsx b/src/app/ui/dashboard/Sidebar/SidebarNavItem.tsx
new file mode 100644
index 0000000..fbc6e42
--- /dev/null
+++ b/src/app/ui/dashboard/Sidebar/SidebarNavItem.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { IconDefinition } from '@fortawesome/free-regular-svg-icons'
+import React, { PropsWithChildren, useContext } from 'react'
+import { SidebarContext } from '@/app/ui/dashboard/sidebar-provider'
+import { NavItem, NavLink } from 'react-bootstrap'
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+type Props = {
+ href: string;
+ icon?: IconDefinition;
+} & PropsWithChildren
+
+export default function SidebarNavItem(props: Props) {
+ const {
+ icon,
+ children,
+ href,
+ } = props
+
+ const {
+ showSidebarState: [, setIsShowSidebar],
+ } = useContext(SidebarContext)
+
+ return (
+
+
+ setIsShowSidebar(false)}>
+ {icon ?
+ : }
+ {children}
+
+
+
+ )
+}
diff --git a/src/components/Dashboard/ConversionChart.tsx b/src/components/Dashboard/ConversionChart.tsx
new file mode 100644
index 0000000..8740164
--- /dev/null
+++ b/src/components/Dashboard/ConversionChart.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { Line } from 'react-chartjs-2'
+import React from 'react'
+import {
+ BarElement,
+ CategoryScale,
+ Chart,
+ Filler,
+ LinearScale,
+ LineElement,
+ PointElement,
+ Tooltip,
+} from 'chart.js'
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Filler)
+
+export default function ConversionChart() {
+ return (
+
+ )
+}
diff --git a/src/components/Dashboard/IncomeChart.tsx b/src/components/Dashboard/IncomeChart.tsx
new file mode 100644
index 0000000..043727f
--- /dev/null
+++ b/src/components/Dashboard/IncomeChart.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { Line } from 'react-chartjs-2'
+import React from 'react'
+import {
+ BarElement,
+ CategoryScale,
+ Chart,
+ Filler,
+ LinearScale,
+ LineElement,
+ PointElement,
+ Tooltip,
+} from 'chart.js'
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Filler)
+
+export default function IncomeChart() {
+ return (
+
+ )
+}
diff --git a/src/components/Dashboard/SessionChart.tsx b/src/components/Dashboard/SessionChart.tsx
new file mode 100644
index 0000000..13f439e
--- /dev/null
+++ b/src/components/Dashboard/SessionChart.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { Bar } from 'react-chartjs-2'
+import React from 'react'
+import {
+ BarElement,
+ CategoryScale,
+ Chart,
+ Filler,
+ LinearScale,
+ LineElement,
+ PointElement,
+ Tooltip,
+} from 'chart.js'
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Filler)
+
+export default function SessionChart() {
+ return (
+
+ )
+}
diff --git a/src/components/Dashboard/TrafficChart.tsx b/src/components/Dashboard/TrafficChart.tsx
new file mode 100644
index 0000000..1ac1f6f
--- /dev/null
+++ b/src/components/Dashboard/TrafficChart.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import { Line } from 'react-chartjs-2'
+import React from 'react'
+import {
+ BarElement,
+ CategoryScale,
+ Chart,
+ Filler,
+ LinearScale,
+ LineElement,
+ PointElement,
+ Tooltip,
+} from 'chart.js'
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Filler)
+
+const random = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min)
+
+export default function TrafficChart() {
+ return (
+
+ )
+}
diff --git a/src/components/Dashboard/UserChart.tsx b/src/components/Dashboard/UserChart.tsx
new file mode 100644
index 0000000..ac9a468
--- /dev/null
+++ b/src/components/Dashboard/UserChart.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { Line } from 'react-chartjs-2'
+import React from 'react'
+import {
+ BarElement,
+ CategoryScale,
+ Chart,
+ Filler,
+ LinearScale,
+ LineElement,
+ PointElement,
+ Tooltip,
+} from 'chart.js'
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Filler)
+
+export default function UserChart() {
+ return (
+
+ )
+}
diff --git a/src/components/Form/FormError.tsx b/src/components/Form/FormError.tsx
index f4607ad..f6d694c 100644
--- a/src/components/Form/FormError.tsx
+++ b/src/components/Form/FormError.tsx
@@ -1,8 +1,8 @@
-import { Form } from 'react-bootstrap'
import React from 'react'
+import Feedback from 'react-bootstrap/Feedback'
export default function FormError(props: { message?: string }) {
const { message } = props
- return message &&
{message}
+ return message &&
{message}
}
diff --git a/src/components/Pagination/RowsPerPage.tsx b/src/components/Pagination/RowsPerPage.tsx
index b0d0972..6d66a2e 100644
--- a/src/components/Pagination/RowsPerPage.tsx
+++ b/src/components/Pagination/RowsPerPage.tsx
@@ -1,8 +1,4 @@
-'use client'
-
-import { Form } from 'react-bootstrap'
-import React from 'react'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import RowPerPageSelect from '@/components/Pagination/RowsPerPageSelect'
type Props = {
perPage: number;
@@ -11,35 +7,12 @@ type Props = {
export default function RowsPerPage(props: Props) {
const { perPage, setPerPage } = props
- const router = useRouter()
- const pathname = usePathname()
- const searchParams = useSearchParams()
return (
Rows per page:
{' '}
- {
- if (setPerPage) {
- setPerPage(parseInt(event.target.value, 10))
- }
-
- const newSearchParams = new URLSearchParams(searchParams)
- newSearchParams.set('page', '1') // Go back to first page
- newSearchParams.set('per_page', event.target.value)
-
- router.push(`${pathname}?${newSearchParams}`)
- }}
- >
-
-
-
-
-
+
)
}
diff --git a/src/components/Pagination/RowsPerPageSelect.tsx b/src/components/Pagination/RowsPerPageSelect.tsx
new file mode 100644
index 0000000..bfb1c00
--- /dev/null
+++ b/src/components/Pagination/RowsPerPageSelect.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { FormSelect } from 'react-bootstrap'
+import React from 'react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+
+type Props = {
+ perPage: number;
+ setPerPage?: (perPage: number) => void;
+}
+
+export default function RowPerPageSelect(props: Props) {
+ const { perPage, setPerPage } = props
+ const router = useRouter()
+ const pathname = usePathname()
+ const searchParams = useSearchParams()
+
+ return (
+
{
+ if (setPerPage) {
+ setPerPage(parseInt(event.target.value, 10))
+ }
+
+ const newSearchParams = new URLSearchParams(searchParams)
+ newSearchParams.set('page', '1') // Go back to first page
+ newSearchParams.set('per_page', event.target.value)
+
+ router.push(`${pathname}?${newSearchParams}`)
+ }}
+ >
+
+
+
+
+
+ )
+}
diff --git a/src/components/Pokemon/PokemonList.tsx b/src/components/Pokemon/PokemonList.tsx
index 563130b..d3af9c0 100644
--- a/src/components/Pokemon/PokemonList.tsx
+++ b/src/components/Pokemon/PokemonList.tsx
@@ -1,6 +1,6 @@
-'use client'
-
-import { Dropdown, Table } from 'react-bootstrap'
+import {
+ Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Table,
+} from 'react-bootstrap'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons'
import React from 'react'
@@ -65,27 +65,27 @@ export default function PokemonList(props: Props) {
{pokemon.total} |
-
-
+
-
- Info
+
+ Info
- Edit
+ Edit
-
Delete
-
-
+
+
|