diff --git a/src/hooks/use-media-query.ts b/src/hooks/use-media-query.ts
index 3193f06..36a4a02 100644
--- a/src/hooks/use-media-query.ts
+++ b/src/hooks/use-media-query.ts
@@ -1,34 +1,29 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
-type CommonmediaQueries=
- | '(min-width: 640px)'
- | '(min-width: 768px)'
- | '(min-width: 1024px)'
- | '(min-width: 1280px)'
- | '(min-width: 1536px)'
+type CommonmediaQueries =
+ | "(min-width: 640px)"
+ | "(min-width: 768px)"
+ | "(min-width: 1024px)"
+ | "(min-width: 1280px)"
+ | "(min-width: 1536px)";
-
-export function useMediaQuery(query: CommonmediaQueries | (string&{})) {
+export function useMediaQuery(query: CommonmediaQueries | (string & {})) {
const [matches, setMatches] = useState(window.matchMedia(query).matches);
useEffect(() => {
- const mediaQueryList
- = window.matchMedia(query);
+ const mediaQueryList = window.matchMedia(query);
- const handleMediaChange
- = () => {
+ const handleMediaChange = () => {
setMatches(mediaQueryList.matches);
};
- mediaQueryList.addEventListener('change', handleMediaChange);
+ mediaQueryList.addEventListener("change", handleMediaChange);
// Cleanup on component unmount
return () => {
- mediaQueryList.removeEventListener('change', handleMediaChange);
+ mediaQueryList.removeEventListener("change", handleMediaChange);
};
}, [query]);
return matches;
}
-
-
diff --git a/src/hooks/use-page-searchquery.ts b/src/hooks/use-page-searchquery.ts
new file mode 100644
index 0000000..dd5bfef
--- /dev/null
+++ b/src/hooks/use-page-searchquery.ts
@@ -0,0 +1,45 @@
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useTransition, useState, useEffect } from "react";
+import { useDebouncedValue } from "./use-debouncer";
+import { ValidRoutes } from "@/lib/tanstack/router/router-types";
+
+ /**
+ * Use this hook to generate a debounced search query that can be used in a input search field.
+ * @param path the path of the route that the search query will be applied to
+ * @returns an object containing the debounced search query, a boolean indicating if the debouncer is running, the current keyword and a function to update the keyword
+ * Use this hook in a page component that declares a sq search param in the route
+ */
+export function usePageSearchQuery(path: ValidRoutes) {
+ // @ts-expect-error : search parm below wwill exist when the compnent is usesd
+ const { sq, page } = useSearch({ from:`${path}/` });
+ const navigate = useNavigate({ from:path });
+ const [_, startTransition] = useTransition();
+
+ const [keyword, setKeyword] = useState(sq ?? "");
+ const { debouncedValue, isDebouncing } = useDebouncedValue(keyword, 2000);
+ useEffect(() => {
+ if (sq !== debouncedValue) {
+ startTransition(() => {
+ navigate({
+ search: {
+ page,
+ sq: debouncedValue,
+ },
+ });
+ });
+
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [debouncedValue, navigate, page]);
+ function updatePage(page: number) {
+ startTransition(() => {
+ navigate({
+ search: {
+ page,
+ sq: debouncedValue,
+ },
+ });
+ })
+ }
+ return { debouncedValue, isDebouncing, keyword, setKeyword,page, updatePage };
+}
diff --git a/src/hooks/use-storage.tsx b/src/hooks/use-storage.tsx
index 179fe3b..7a0289e 100644
--- a/src/hooks/use-storage.tsx
+++ b/src/hooks/use-storage.tsx
@@ -8,7 +8,7 @@ export function useSessionStorage
(key: string, initialValue: T) {
React.useEffect(() => {
sessionStorage.setItem(key, JSON.stringify(state[0]));
- }, [state[0]]);
+ }, [key, state]);
return state;
}
@@ -21,5 +21,5 @@ export function useLocalStorage(key: string, initialValue: T) {
React.useEffect(() => {
localStorage.setItem(key, JSON.stringify(state[0]));
- }, [state[0]]);
+ }, [key, state]);
}
diff --git a/src/lib/tanstack/router/router-types.ts b/src/lib/tanstack/router/router-types.ts
new file mode 100644
index 0000000..799be6e
--- /dev/null
+++ b/src/lib/tanstack/router/router-types.ts
@@ -0,0 +1,4 @@
+import { routeTree } from "@/routeTree.gen";
+import { ParseRoute } from "@tanstack/react-router";
+
+export type ValidRoutes = ParseRoute['fullPath'];
diff --git a/src/main.tsx b/src/main.tsx
index 93a9556..fa0bef4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,17 +1,16 @@
import ReactDOM from "react-dom/client";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { createRouter } from "@tanstack/react-router";
import {
MutationCache,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query";
import { routeTree } from "./routeTree.gen";
-import React, { useEffect } from "react";
+import React from "react";
import { RouterPendingComponent } from "./lib/tanstack/router/RouterPendingComponent";
import { RouterErrorComponent } from "./lib/tanstack/router/routerErrorComponent";
import { RouterNotFoundComponent } from "./lib/tanstack/router/RouterNotFoundComponent";
-import { themeChange } from "theme-change";
-import { useViewer } from "./lib/tanstack/query/use-viewer";
+import { App } from "./App";
export const queryClient = new QueryClient({
mutationCache: new MutationCache({
@@ -37,7 +36,7 @@ export const queryClient = new QueryClient({
// Set up a Router instance
-const router = createRouter({
+export const router = createRouter({
routeTree,
defaultPreload: "intent",
defaultViewTransition:true,
@@ -57,28 +56,7 @@ declare module "@tanstack/react-router" {
}
}
-function App() {
- useEffect(() => {
- // other view transition styles include "angled", "wipe", "slides", "flip", "vertical"
- // currently doesn't work in firefox
- document.documentElement.dataset.style = "vertical";
- themeChange(false);
- }, []);
-const viewer = useViewer();
- return (
- <>
-
- >
- );
-}
const rootElement = document.getElementById("app")!;
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 90efafc..5e3f6fe 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -14,9 +14,11 @@ import { Route as rootRoute } from './routes/__root'
import { Route as DashboardLayoutImport } from './routes/dashboard/layout'
import { Route as IndexImport } from './routes/index'
import { Route as ProfileIndexImport } from './routes/profile/index'
+import { Route as MoneyIndexImport } from './routes/money/index'
import { Route as DashboardIndexImport } from './routes/dashboard/index'
import { Route as AuthIndexImport } from './routes/auth/index'
import { Route as AuthSignupImport } from './routes/auth/signup'
+import { Route as MoneyMoneyIndexImport } from './routes/money/$money/index'
import { Route as DashboardTeamsIndexImport } from './routes/dashboard/teams/index'
import { Route as DashboardProjectsIndexImport } from './routes/dashboard/projects/index'
import { Route as DashboardOsProjectsIndexImport } from './routes/dashboard/os-projects/index'
@@ -46,6 +48,12 @@ const ProfileIndexRoute = ProfileIndexImport.update({
getParentRoute: () => rootRoute,
} as any)
+const MoneyIndexRoute = MoneyIndexImport.update({
+ id: '/money/',
+ path: '/money/',
+ getParentRoute: () => rootRoute,
+} as any)
+
const DashboardIndexRoute = DashboardIndexImport.update({
id: '/',
path: '/',
@@ -64,6 +72,12 @@ const AuthSignupRoute = AuthSignupImport.update({
getParentRoute: () => rootRoute,
} as any)
+const MoneyMoneyIndexRoute = MoneyMoneyIndexImport.update({
+ id: '/money/$money/',
+ path: '/money/$money/',
+ getParentRoute: () => rootRoute,
+} as any)
+
const DashboardTeamsIndexRoute = DashboardTeamsIndexImport.update({
id: '/teams/',
path: '/teams/',
@@ -153,6 +167,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof DashboardIndexImport
parentRoute: typeof DashboardLayoutImport
}
+ '/money/': {
+ id: '/money/'
+ path: '/money'
+ fullPath: '/money'
+ preLoaderRoute: typeof MoneyIndexImport
+ parentRoute: typeof rootRoute
+ }
'/profile/': {
id: '/profile/'
path: '/profile'
@@ -216,6 +237,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof DashboardTeamsIndexImport
parentRoute: typeof DashboardLayoutImport
}
+ '/money/$money/': {
+ id: '/money/$money/'
+ path: '/money/$money'
+ fullPath: '/money/$money'
+ preLoaderRoute: typeof MoneyMoneyIndexImport
+ parentRoute: typeof rootRoute
+ }
}
}
@@ -255,6 +283,7 @@ export interface FileRoutesByFullPath {
'/auth/signup': typeof AuthSignupRoute
'/auth': typeof AuthIndexRoute
'/dashboard/': typeof DashboardIndexRoute
+ '/money': typeof MoneyIndexRoute
'/profile': typeof ProfileIndexRoute
'/dashboard/challenges': typeof DashboardChallengesIndexRoute
'/dashboard/hackathons': typeof DashboardHackathonsIndexRoute
@@ -264,6 +293,7 @@ export interface FileRoutesByFullPath {
'/dashboard/os-projects': typeof DashboardOsProjectsIndexRoute
'/dashboard/projects': typeof DashboardProjectsIndexRoute
'/dashboard/teams': typeof DashboardTeamsIndexRoute
+ '/money/$money': typeof MoneyMoneyIndexRoute
}
export interface FileRoutesByTo {
@@ -271,6 +301,7 @@ export interface FileRoutesByTo {
'/auth/signup': typeof AuthSignupRoute
'/auth': typeof AuthIndexRoute
'/dashboard': typeof DashboardIndexRoute
+ '/money': typeof MoneyIndexRoute
'/profile': typeof ProfileIndexRoute
'/dashboard/challenges': typeof DashboardChallengesIndexRoute
'/dashboard/hackathons': typeof DashboardHackathonsIndexRoute
@@ -280,6 +311,7 @@ export interface FileRoutesByTo {
'/dashboard/os-projects': typeof DashboardOsProjectsIndexRoute
'/dashboard/projects': typeof DashboardProjectsIndexRoute
'/dashboard/teams': typeof DashboardTeamsIndexRoute
+ '/money/$money': typeof MoneyMoneyIndexRoute
}
export interface FileRoutesById {
@@ -289,6 +321,7 @@ export interface FileRoutesById {
'/auth/signup': typeof AuthSignupRoute
'/auth/': typeof AuthIndexRoute
'/dashboard/': typeof DashboardIndexRoute
+ '/money/': typeof MoneyIndexRoute
'/profile/': typeof ProfileIndexRoute
'/dashboard/challenges/': typeof DashboardChallengesIndexRoute
'/dashboard/hackathons/': typeof DashboardHackathonsIndexRoute
@@ -298,6 +331,7 @@ export interface FileRoutesById {
'/dashboard/os-projects/': typeof DashboardOsProjectsIndexRoute
'/dashboard/projects/': typeof DashboardProjectsIndexRoute
'/dashboard/teams/': typeof DashboardTeamsIndexRoute
+ '/money/$money/': typeof MoneyMoneyIndexRoute
}
export interface FileRouteTypes {
@@ -308,6 +342,7 @@ export interface FileRouteTypes {
| '/auth/signup'
| '/auth'
| '/dashboard/'
+ | '/money'
| '/profile'
| '/dashboard/challenges'
| '/dashboard/hackathons'
@@ -317,12 +352,14 @@ export interface FileRouteTypes {
| '/dashboard/os-projects'
| '/dashboard/projects'
| '/dashboard/teams'
+ | '/money/$money'
fileRoutesByTo: FileRoutesByTo
to:
| '/'
| '/auth/signup'
| '/auth'
| '/dashboard'
+ | '/money'
| '/profile'
| '/dashboard/challenges'
| '/dashboard/hackathons'
@@ -332,6 +369,7 @@ export interface FileRouteTypes {
| '/dashboard/os-projects'
| '/dashboard/projects'
| '/dashboard/teams'
+ | '/money/$money'
id:
| '__root__'
| '/'
@@ -339,6 +377,7 @@ export interface FileRouteTypes {
| '/auth/signup'
| '/auth/'
| '/dashboard/'
+ | '/money/'
| '/profile/'
| '/dashboard/challenges/'
| '/dashboard/hackathons/'
@@ -348,6 +387,7 @@ export interface FileRouteTypes {
| '/dashboard/os-projects/'
| '/dashboard/projects/'
| '/dashboard/teams/'
+ | '/money/$money/'
fileRoutesById: FileRoutesById
}
@@ -356,7 +396,9 @@ export interface RootRouteChildren {
DashboardLayoutRoute: typeof DashboardLayoutRouteWithChildren
AuthSignupRoute: typeof AuthSignupRoute
AuthIndexRoute: typeof AuthIndexRoute
+ MoneyIndexRoute: typeof MoneyIndexRoute
ProfileIndexRoute: typeof ProfileIndexRoute
+ MoneyMoneyIndexRoute: typeof MoneyMoneyIndexRoute
}
const rootRouteChildren: RootRouteChildren = {
@@ -364,7 +406,9 @@ const rootRouteChildren: RootRouteChildren = {
DashboardLayoutRoute: DashboardLayoutRouteWithChildren,
AuthSignupRoute: AuthSignupRoute,
AuthIndexRoute: AuthIndexRoute,
+ MoneyIndexRoute: MoneyIndexRoute,
ProfileIndexRoute: ProfileIndexRoute,
+ MoneyMoneyIndexRoute: MoneyMoneyIndexRoute,
}
export const routeTree = rootRoute
@@ -381,7 +425,9 @@ export const routeTree = rootRoute
"/dashboard",
"/auth/signup",
"/auth/",
- "/profile/"
+ "/money/",
+ "/profile/",
+ "/money/$money/"
]
},
"/": {
@@ -411,6 +457,9 @@ export const routeTree = rootRoute
"filePath": "dashboard/index.tsx",
"parent": "/dashboard"
},
+ "/money/": {
+ "filePath": "money/index.tsx"
+ },
"/profile/": {
"filePath": "profile/index.tsx"
},
@@ -445,6 +494,9 @@ export const routeTree = rootRoute
"/dashboard/teams/": {
"filePath": "dashboard/teams/index.tsx",
"parent": "/dashboard"
+ },
+ "/money/$money/": {
+ "filePath": "money/$money/index.tsx"
}
}
}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 53a30a9..b53f579 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -12,6 +12,8 @@ import { z } from "zod";
import { Viewer } from "@/lib/tanstack/query/use-viewer";
const searchparams = z.object({
+ sq: z.string().optional(),
+ page: z.number().optional(),
globalPage: z.number().optional(),
globalSearch: z.string().optional(),
});
diff --git a/src/routes/dashboard/-components/DashboardUserDropdown.tsx b/src/routes/dashboard/-components/DashboardUserDropdown.tsx
index 0f8f55d..91a619b 100644
--- a/src/routes/dashboard/-components/DashboardUserDropdown.tsx
+++ b/src/routes/dashboard/-components/DashboardUserDropdown.tsx
@@ -10,7 +10,7 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MutationButton } from "@/lib/tanstack/query/MutationButton";
-import { useSidebar } from "@/components/ui/sidebar";
+import { useSidebar } from "@/components/ui/sidebar-extras";
import { useViewer } from "@/lib/tanstack/query/use-viewer";
interface DashboardUserDropdownProps {
diff --git a/src/routes/dashboard/-components/dashboard-layout/DashboardLayoutActions.tsx b/src/routes/dashboard/-components/dashboard-layout/DashboardLayoutActions.tsx
index a0ecc88..a5fee62 100644
--- a/src/routes/dashboard/-components/dashboard-layout/DashboardLayoutActions.tsx
+++ b/src/routes/dashboard/-components/dashboard-layout/DashboardLayoutActions.tsx
@@ -1,6 +1,7 @@
import { BellIcon,Settings, UserPlus } from "lucide-react";
+
interface DashboardLayoutActionsProps {
}
diff --git a/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarActions.tsx b/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarActions.tsx
index 9655672..e9261a8 100644
--- a/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarActions.tsx
+++ b/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarActions.tsx
@@ -1,4 +1,4 @@
-import { useSidebar } from "@/components/ui/sidebar";
+import { useSidebar } from "@/components/ui/sidebar-extras";
import { DashboardLayoutActions } from "../dashboard-layout/DashboardLayoutActions";
import { DashboardSidebaruser } from "./DashboardSidebaruser";
diff --git a/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarHeader.tsx b/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarHeader.tsx
index 05208b2..2ca57ed 100644
--- a/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarHeader.tsx
+++ b/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarHeader.tsx
@@ -1,5 +1,5 @@
import { LayoutDashboard } from "lucide-react";
-import { useSidebar } from "@/components/ui/sidebar";
+import { useSidebar } from "@/components/ui/sidebar-extras";
import { Link, useLocation } from "@tanstack/react-router";
interface DashboardSidebarHeaderProps {}
diff --git a/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarLinks.tsx b/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarLinks.tsx
index 4571453..e34bfa9 100644
--- a/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarLinks.tsx
+++ b/src/routes/dashboard/-components/dashoboard-sidebar/DashboardSidebarLinks.tsx
@@ -5,8 +5,8 @@ import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
- useSidebar,
} from "@/components/ui/sidebar";
+import { useSidebar } from "@/components/ui/sidebar-extras";
import {
Tooltip,
TooltipContent,
diff --git a/src/routes/dashboard/-components/dashoboard-sidebar/DashboardTheme.tsx b/src/routes/dashboard/-components/dashoboard-sidebar/DashboardTheme.tsx
index ebedbd7..45d8c67 100644
--- a/src/routes/dashboard/-components/dashoboard-sidebar/DashboardTheme.tsx
+++ b/src/routes/dashboard/-components/dashoboard-sidebar/DashboardTheme.tsx
@@ -1,4 +1,4 @@
-import { useSidebar } from "@/components/ui/sidebar";
+import { useSidebar } from "@/components/ui/sidebar-extras";
import { useTheme } from "@/lib/tanstack/router/use-theme";
import {Sun,Moon} from "lucide-react"
interface DashboardThemeProps {
diff --git a/src/routes/money/$money/index.tsx b/src/routes/money/$money/index.tsx
new file mode 100644
index 0000000..b620155
--- /dev/null
+++ b/src/routes/money/$money/index.tsx
@@ -0,0 +1,9 @@
+
+import { createFileRoute } from '@tanstack/react-router'
+import { OneMoneyPage } from '@/routes/money/-components/onemoney/OneMoneyPage'
+
+export const Route = createFileRoute('/money/$money/')({
+ component: OneMoneyPage
+})
+
+
\ No newline at end of file
diff --git a/src/routes/money/-components/MoneyPage.tsx b/src/routes/money/-components/MoneyPage.tsx
new file mode 100644
index 0000000..7e21097
--- /dev/null
+++ b/src/routes/money/-components/MoneyPage.tsx
@@ -0,0 +1,43 @@
+
+import { SearchBox } from "@/components/search/SearchBox";
+import { Suspense } from "react";
+import { ListPageHeader } from "@/components/wrappers/ListPageHeader";
+import { Helmet } from "@/components/wrappers/custom-helmet";
+import { usePageSearchQuery } from "@/hooks/use-page-searchquery";
+import { CardsListSuspenseFallback } from "@/components/loaders/GenericDataCardsListSuspenseFallback";
+import { CreateMoneyForm } from "./form/create";
+import { MoneyList } from "./list/MoneyList";
+
+interface MoneyPageProps {
+}
+
+export function MoneyPage({}: MoneyPageProps) {
+ const { debouncedValue, isDebouncing, keyword, setKeyword } =
+ usePageSearchQuery("/money");
+ return (
+
+
+
}
+ searchBox={
+
+ }
+ />
+
+
+ }>
+
+
+
+
+ );
+}
diff --git a/src/routes/money/-components/form/base.tsx b/src/routes/money/-components/form/base.tsx
new file mode 100644
index 0000000..3ac864c
--- /dev/null
+++ b/src/routes/money/-components/form/base.tsx
@@ -0,0 +1,20 @@
+
+
+import { UseMutationResult } from "@tanstack/react-query";
+
+interface BaseMoneyFormProps> {
+ mutation: UseMutationResult;
+ row: T;
+ afterSave?: () => void;
+}
+export function BaseMoneyForm>(
+ {}: BaseMoneyFormProps,
+) {
+ return (
+
+ );
+}
+
+
\ No newline at end of file
diff --git a/src/routes/money/-components/form/create.tsx b/src/routes/money/-components/form/create.tsx
new file mode 100644
index 0000000..5e0df8c
--- /dev/null
+++ b/src/routes/money/-components/form/create.tsx
@@ -0,0 +1,61 @@
+
+
+import { useState } from "react";
+import { DiaDrawer } from "@/components/wrappers/DiaDrawer";
+import { Plus } from "lucide-react";
+import { makeHotToast } from "@/components/toasters";
+import { BaseMoneyForm } from "./base";
+import { useMutation } from "@tanstack/react-query";
+
+export function CreateMoneyForm() {
+ const [open, setOpen] = useState(false);
+
+ const mutation = useMutation({
+ mutationFn: (value: {}) => {
+ return new Promise<{}>((resolve) => {
+ setTimeout(() => {
+ resolve(value);
+ }, 2000);
+ });
+ },
+ onSuccess: () => {
+ makeHotToast({
+ title: "Money added",
+ description: "Money has been added successfully",
+ variant: "success",
+ });
+ setOpen(false);
+ },
+ onError(error) {
+ makeHotToast({
+ title: "Something went wrong",
+ description: error.message,
+ variant: "error",
+ });
+ },
+ meta: {
+ invalidates: ["money"],
+ },
+ });
+ return (
+
+
+ Add new
+
+ }
+ >
+
+
+
+
+ );
+}
+
+
+
\ No newline at end of file
diff --git a/src/routes/money/-components/form/update.tsx b/src/routes/money/-components/form/update.tsx
new file mode 100644
index 0000000..152ac65
--- /dev/null
+++ b/src/routes/money/-components/form/update.tsx
@@ -0,0 +1,58 @@
+
+
+import { useState } from "react";
+import { DiaDrawer } from "@/components/wrappers/DiaDrawer";
+import { Edit } from "lucide-react";
+import { makeHotToast } from "@/components/toasters";
+import { BaseMoneyForm } from "./base";
+import { useMutation } from "@tanstack/react-query";
+
+interface UpdateMoneyformInterface {
+ item: Record & { id: string };
+}
+export function UpdateMoneyform({ item }: UpdateMoneyformInterface) {
+ const [open, setOpen] = useState(false);
+ const mutation = useMutation({
+ mutationFn: (value: {}) => {
+ return new Promise<{}>((resolve) => {
+ setTimeout(() => {
+ resolve(value);
+ }, 2000);
+ });
+ },
+ onSuccess: () => {
+ makeHotToast({
+ title: "Money added",
+ description: "Money has been added successfully",
+ variant: "success",
+ });
+ setOpen(false);
+ },
+ onError(error) {
+ makeHotToast({
+ title: "Something went wrong",
+ description: error.message,
+ variant: "error",
+ });
+ },
+ meta: {
+ invalidates: ["money"],
+ },
+ });
+ return (
+ }
+ >
+
+
+
+
+ );
+}
+
+
+
\ No newline at end of file
diff --git a/src/routes/money/-components/list/MoneyList.tsx b/src/routes/money/-components/list/MoneyList.tsx
new file mode 100644
index 0000000..b3451ac
--- /dev/null
+++ b/src/routes/money/-components/list/MoneyList.tsx
@@ -0,0 +1,76 @@
+
+import { ItemNotFound } from "@/components/wrappers/ItemNotFound";
+import { ErrorWrapper } from "@/components/wrappers/ErrorWrapper";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import ResponsivePagination from "react-responsive-pagination";
+import { usePageSearchQuery } from "@/hooks/use-page-searchquery";
+import { UpdateMoneyform } from "@/routes/money/-components/form/update";
+import { moneyListQueryOptions } from "@/routes/money/-query-options/money-query-option";
+
+interface MoneyListProps {
+ keyword?: string;
+}
+
+export function MoneyList({ keyword = "" }: MoneyListProps) {
+ const { page,updatePage } = usePageSearchQuery("/money");
+ const query = useSuspenseQuery(moneyListQueryOptions({ keyword,page }));
+ const data = query.data;
+ const error = query.error;
+
+ if (error) {
+ return (
+
+
+
+ );
+ }
+ if (!data || data.items.length === 0) {
+ return (
+
+
+
+ );
+ }
+ return (
+
+
+ {data.items.map((item) => {
+ return (
+ -
+
+
+
+ {item.id}
+
+
+
+
+
see details
+ ➡️
+
+
+
+ );
+ })}
+
+
+ {
+ updatePage(e);
+ }}
+ />
+
+
+ );
+}
+
+
diff --git a/src/routes/money/-components/onemoney/OneMoneyDetails.tsx b/src/routes/money/-components/onemoney/OneMoneyDetails.tsx
new file mode 100644
index 0000000..1957e06
--- /dev/null
+++ b/src/routes/money/-components/onemoney/OneMoneyDetails.tsx
@@ -0,0 +1,32 @@
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useParams } from "@tanstack/react-router";
+import { oneMoneyQueryOptions } from "@/routes/money/-query-options/money-query-option";
+import { ErrorWrapper } from "@/components/wrappers/ErrorWrapper";
+
+interface OneMoneyDetailsProps {
+}
+
+export function OneMoneyDetails({}: OneMoneyDetailsProps) {
+ const { money } = useParams({ from: "/money/$money/" });
+ const query = useSuspenseQuery(oneMoneyQueryOptions({ money }));
+ const data = query.data;
+ const error = query.error;
+
+ if (error) {
+ return (
+
+
+
+ );
+ }
+ return (
+
+
+ {JSON.stringify(data, null, 2)}
+
+
+ );
+}
+
+
\ No newline at end of file
diff --git a/src/routes/money/-components/onemoney/OneMoneyPage.tsx b/src/routes/money/-components/onemoney/OneMoneyPage.tsx
new file mode 100644
index 0000000..5341d9f
--- /dev/null
+++ b/src/routes/money/-components/onemoney/OneMoneyPage.tsx
@@ -0,0 +1,24 @@
+
+import { Suspense } from "react";
+import { OneMoneyDetails } from "./OneMoneyDetails";
+
+interface OneMoneyPageProps {
+}
+
+export function OneMoneyPage({}: OneMoneyPageProps) {
+ return (
+
+ }
+ >
+
+
+
+ );
+}
+
+
\ No newline at end of file
diff --git a/src/routes/money/-query-options/money-query-option.ts b/src/routes/money/-query-options/money-query-option.ts
new file mode 100644
index 0000000..53a6e2f
--- /dev/null
+++ b/src/routes/money/-query-options/money-query-option.ts
@@ -0,0 +1,55 @@
+
+import { queryOptions } from "@tanstack/react-query";
+
+
+interface moneyQueryOptionPropss {
+ keyword: string;
+ page?: number;
+}
+export function moneyListQueryOptions({ keyword, page=1 }: moneyQueryOptionPropss) {
+ return queryOptions({
+ queryKey: ["money_list", keyword,page],
+ queryFn: () => {
+ return new Promise<{
+ page: number;
+ perPage: number;
+ totaleItems: number;
+ totalPages: number;
+ items: Array