chore: UI changes

app/(client)/history/detail/receive/page.tsx

@@ -284,6 +284,7 @@ export default function Page() {
 
 					<Button
 						variant={"outline"}
+						nativeButton={false}
 						render={
 							<Link href={`/history/detail?id=${encodeURIComponent(id)}`} />
 						}

app/(client)/settings/switch-account/page.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import { NewAccountForm } from "@/app/(client)/settings/switch-account/new-account-form";
-import { SwitchAccountForm } from "@/app/admin/(private)/settings/switch-account/switch-account-form";
+import { SwitchAccountForm } from "@/app/admin/(private)/switch-account/switch-account-form";
 import { FadeHeader } from "@/components/fade-header";
 import { ResponsiveCard } from "@/components/responsive-card";
 import { CardContent } from "@/components/ui/card";

app/admin/(private)/(dashboard)/page.test.tsx

@@ -40,6 +40,6 @@ describe("(dashboard) / page", () => {
 		itemsCard.click();
 
 		expect(mockRouterPush).toHaveBeenCalledTimes(1);
-		expect(mockRouterPush).toHaveBeenLastCalledWith("/admin/items");
+		expect(mockRouterPush).toHaveBeenLastCalledWith("/admin/catalog");
 	});
 });

app/admin/(private)/(dashboard)/page.tsx

@@ -82,7 +82,7 @@ export default function Home() {
 					description={t(
 						"admin:dashboard.home.cards.itemManagement.description",
 					)}
-					onClick={() => router.push("/admin/items")}
+					onClick={() => router.push("/admin/catalog")}
 					className={"@container/card min-w-sm"}
 				>
 					<div className={"w-full flex justify-center"}>

app/admin/(private)/accounts/accounts-table.tsx

@@ -10,7 +10,6 @@ import type { ColumnDef } from "@tanstack/react-table";
 import type { TFunction } from "i18next";
 import { PlusIcon } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -58,6 +57,15 @@ const createColumns = (t: TFunction): ColumnDef<Task, Task>[] => [
 	{
 		accessorKey: "name",
 		header: createSortableHeader(t("accounts:table.columns.name")),
+		cell: ({ row }) => (
+			<Link
+				href={
+					`/admin/accounts/detail?id=${encodeURIComponent(row.original.id)}` as never
+				}
+			>
+				<Button variant={"link"}>{row.original.name}</Button>
+			</Link>
+		),
 	},
 	{
 		accessorKey: "_tag",
@@ -99,13 +107,14 @@ const createColumns = (t: TFunction): ColumnDef<Task, Task>[] => [
 			row.original.deviceName && row.original.deviceId ? (
 				<Button
 					variant="link"
+					nativeButton={false}
 					onClick={(event) => {
 						event.stopPropagation();
 					}}
 					render={
 						<Link
 							href={
-								`/admin/devices/detail?id=${encodeURIComponent(row.original.deviceId)}` as never
+								`/admin/settings/devices/detail?id=${encodeURIComponent(row.original.deviceId)}` as never
 							}
 						/>
 					}
@@ -142,7 +151,6 @@ const createFilterableColumns = (t: TFunction) =>
 
 export function AccountsTable() {
 	const { t } = useTranslation();
-	const router = useRouter();
 	const evolu = useEvolu();
 	const columnVisibilityDriver = useDataTableVisibilityDriver("accounts");
 	const columns = useMemo(() => createColumns(t), [t]);
@@ -320,11 +328,6 @@ export function AccountsTable() {
 					columnVisibilityDriver={columnVisibilityDriver}
 					onFilterChange={onFilterChange}
 					filterableColumns={filterableColumns}
-					onRowClick={(item) =>
-						router.push(
-							`/admin/accounts/detail?id=${encodeURIComponent(item.id)}`,
-						)
-					}
 				/>
 			</CardContent>
 		</ResponsiveCard>

app/admin/(private)/accounts/detail/page.tsx

@@ -144,6 +144,7 @@ export default function Home() {
 							<Button
 								variant={"outline"}
 								className={"w-full"}
+								nativeButton={false}
 								render={
 									<Link
 										href={`/admin/accounts/edit?id=${encodeURIComponent(id)}`}

app/admin/(private)/ai-assistant/(default)/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { SubNavShellContent } from "@/components/sub-nav-shell";
+
+export default function Layout(
+	props: Readonly<{
+		children: React.ReactNode;
+	}>,
+) {
+	const { t } = useTranslation();
+
+	return (
+		<SubNavShellContent
+			title={"Chat"}
+			description={t("settings:page.aiAssistantDescription")}
+		>
+			{props.children}
+		</SubNavShellContent>
+	);
+}

app/admin/(private)/ai-assistant/(default)/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { AiAssistantChat } from "@/app/admin/(private)/ai-assistant/ai-assistant-chat";
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function Home() {
+	return (
+		<div className="w-full max-w-4xl">
+			<Card>
+				<CardContent>
+					<AiAssistantChat />
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

app/admin/(private)/ai-assistant/ai-assistant-chat.tsx

@@ -226,7 +226,8 @@ export function AiAssistantChat() {
 					Pro použití asistenta nejprve uložte Google API klíč v nastavení.
 				</div>
 				<Button
-					render={<Link href="/admin/settings/ai-assistant" />}
+					nativeButton={false}
+					render={<Link href="/admin/ai-assistant/settings" />}
 					variant="outline"
 				>
 					Otevřít nastavení asistenta

app/admin/(private)/ai-assistant/layout.tsx

@@ -1,15 +1,40 @@
 "use client";
 
+import { MessageSquareTextIcon, SettingsIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { DefautLayout } from "@/app/admin/defaut-layout";
+import { SubNavShellRoot } from "@/components/sub-nav-shell";
+
+const aiAssistantTabs = [
+	{
+		value: "chat",
+		label: "Chat",
+		icon: MessageSquareTextIcon,
+		nextUrl: "/admin/ai-assistant",
+	},
+	{
+		value: "settings",
+		label: "Settings",
+		icon: SettingsIcon,
+		nextUrl: "/admin/ai-assistant/settings",
+	},
+] as const;
 
 export default function Layout(
 	props: Readonly<{
 		children: React.ReactNode;
 	}>,
 ) {
+	const { t } = useTranslation();
+
 	return (
 		<DefautLayout titleKey={"admin:layout.title.aiAssistant"}>
-			{props.children}
+			<SubNavShellRoot
+				tabsLabel={t("settings:page.aiAssistantTabsSections")}
+				tabs={aiAssistantTabs}
+			>
+				{props.children}
+			</SubNavShellRoot>
 		</DefautLayout>
 	);
 }

app/admin/(private)/ai-assistant/settings/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { SubNavShellContent } from "@/components/sub-nav-shell";
+
+export default function Layout(
+	props: Readonly<{
+		children: React.ReactNode;
+	}>,
+) {
+	const { t } = useTranslation();
+
+	return (
+		<SubNavShellContent
+			title={"Settings"}
+			description={t("settings:page.aiAssistantSettings")}
+		>
+			{props.children}
+		</SubNavShellContent>
+	);
+}

app/admin/(private)/settings/ai-assistant/page.tsx → app/admin/(private)/ai-assistant/settings/page.tsx

@@ -6,15 +6,12 @@ import {
 	sqliteTrue,
 } from "@evolu/common";
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { AiAssistantSettingsForm } from "@/app/admin/(private)/settings/ai-assistant/ai-assistant-form";
-import { ResponsiveCard } from "@/components/responsive-card";
-import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { AiAssistantSettingsForm } from "@/app/admin/(private)/ai-assistant/settings/ai-assistant-settings-form";
+import { Card, CardContent } from "@/components/ui/card";
 import { useEvoluQuery } from "@/hooks/use-evolu-query";
 import { createQuery } from "@/lib/evolu";
 
 export default function Home() {
-	const { t } = useTranslation();
 	const itemId = createIdFromString("");
 	const query = useMemo(
 		() =>
@@ -36,10 +33,7 @@ export default function Home() {
 	const item = data[0];
 
 	return (
-		<ResponsiveCard className="w-full max-w-xl">
-			<CardHeader>
-				<CardTitle>{t("settings:page.aiAssistantSettings")}</CardTitle>
-			</CardHeader>
+		<Card className="w-full max-w-xl">
 			<CardContent>
 				<AiAssistantSettingsForm
 					defaultValues={
@@ -51,6 +45,6 @@ export default function Home() {
 					}
 				/>
 			</CardContent>
-		</ResponsiveCard>
+		</Card>
 	);
 }

app/admin/(private)/catalog/(default)/(items)/(default)/layout.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import { SubNavShellContent } from "@/components/sub-nav-shell";
+import { Button } from "@/components/ui/button";
+
+export default function Layout(
+	props: Readonly<{
+		children: React.ReactNode;
+	}>,
+) {
+	const { t } = useTranslation();
+
+	return (
+		<SubNavShellContent
+			title={t("navigation:main.links.items")}
+			description={t("items:table.listOfYourSalesItems")}
+			actions={
+				<Link href={"/admin/catalog/new"}>
+					<Button>
+						<PlusIcon />
+						{t("items:table.actions.new-item")}
+					</Button>
+				</Link>
+			}
+		>
+			{props.children}
+		</SubNavShellContent>
+	);
+}

app/admin/(private)/items/page.tsx → app/admin/(private)/catalog/(default)/(items)/(default)/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ItemsTable } from "@/app/admin/(private)/items/items-table";
+import { ItemsTable } from "@/app/admin/(private)/catalog/items-table";
 
 export default function Home() {
 	return (

app/admin/(private)/categories/new/page.tsx → app/admin/(private)/catalog/(default)/(items)/categories/new/page.tsx

@@ -3,11 +3,11 @@
 import { useAtomValue } from "jotai";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
-import { CategoryForm } from "@/app/admin/(private)/categories/category-form";
 import { accountAtom } from "@/atoms/account";
 import { BackButton } from "@/components/back-button";
 import { ResponsiveCard } from "@/components/responsive-card";
 import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CategoryForm } from "../../../../categories/category-form";
 
 export default function Home() {
 	const { t } = useTranslation();

app/admin/(private)/items/new/page.tsx → app/admin/(private)/catalog/(default)/(items)/new/page.tsx

@@ -5,21 +5,24 @@ import { useAtomValue } from "jotai";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ItemForm } from "@/app/admin/(private)/items/item-form";
 import { accountAtom } from "@/atoms/account";
 import { BackButton } from "@/components/back-button";
 import { ResponsiveCard } from "@/components/responsive-card";
 import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useEvolu } from "@/hooks/use-evolu";
 import { createQuery } from "@/lib/evolu";
+import type { Currency } from "@/lib/shared/types";
+import { ItemForm } from "../../../item-form";
 
 export default function Home() {
 	const { t } = useTranslation();
 	const router = useRouter();
 	const evolu = useEvolu();
 	const account = useAtomValue(accountAtom);
 
-	const [billingSettings, setBillingSettings] = useState<any>(undefined);
+	const [billingSettings, setBillingSettings] = useState<
+		{ defaultCurrency?: Currency | null } | undefined
+	>(undefined);
 	useEffect(() => {
 		const query = createQuery((db) =>
 			db

app/admin/(private)/catalog/(default)/categories/layout.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import { SubNavShellContent } from "@/components/sub-nav-shell";
+import { Button } from "@/components/ui/button";
+
+export default function Layout(
+	props: Readonly<{
+		children: React.ReactNode;
+	}>,
+) {
+	const { t } = useTranslation();
+
+	return (
+		<SubNavShellContent
+			title={t("navigation:main.links.categories")}
+			description={t("categories:table.listOfProductCategories")}
+			actions={
+				<Link href={"/admin/catalog/categories/new"}>
+					<Button>
+						<PlusIcon />
+						{t("categories:table.actions.new-category")}
+					</Button>
+				</Link>
+			}
+		>
+			{props.children}
+		</SubNavShellContent>
+	);
+}