cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor(lst): more dashboard work

Browse Source
This commit is contained in:
cowchmonkey@gmail.com
2025-02-20 13:18:47 -06:00
parent 604fdf1545
commit d939332499
13 changed files with 152 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/routes/__root.tsx
View File

@@ -5,6 +5,15 @@ import {SidebarProvider} from "../components/ui/sidebar";
import {ThemeProvider} from "../components/layout/theme-provider";
import {ModeToggle} from "../components/layout/mode-toggle";
import {AppSidebar} from "../components/layout/lst-sidebar";
import {Avatar, AvatarFallback, AvatarImage} from "../components/ui/avatar";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../components/ui/dropdown-menu";
// same as the layout
export const Route = createRootRoute({
@@ -15,8 +24,31 @@ export const Route = createRootRoute({
<>
<ThemeProvider>
<nav className="flex justify-end">
<div className="m-2">
<ModeToggle />
<div className="m-2 flex flex-row">
<div className="m-auto pr-2">
<p>Add Card</p>
</div>
<div className="m-1">
<ModeToggle />
</div>
<div className="m-1">
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</nav>
<SidebarProvider defaultOpen={sidebarState}>

16
frontend/src/routes/_auth/dashboard.tsx
View File

@@ -1,16 +0,0 @@
import {createFileRoute} from "@tanstack/react-router";
import {Button} from "../../components/ui/button";
import {useLogout} from "../../lib/hooks/useLogout";
export const Route = createFileRoute("/_auth/dashboard")({
component: RouteComponent,
});
function RouteComponent() {
const logout = useLogout();
return (
<div>
Hello "/_auth/dashboard"!<Button onClick={() => logout()}>Logout</Button>
</div>
);
}

58
frontend/src/routes/index.tsx
View File

@@ -1,30 +1,48 @@
import {createFileRoute} from "@tanstack/react-router";
import LoginForm from "../components/auth/LoginForm";
import {Button} from "../components/ui/button";
import {useLogout} from "../lib/hooks/useLogout";
import {useSession} from "../lib/hooks/useSession";
import {useSessionStore} from "../lib/store/sessionStore";
import GridLayout from "react-grid-layout";
import "../../node_modules/react-grid-layout/css/styles.css";
import "../../node_modules/react-resizable/css/styles.css";
export const Route = createFileRoute("/")({
component: Index,
});
function Index() {
const {session} = useSession();
const {user} = useSessionStore();
const logout = useLogout();
// const [layout, setLayout] = useState([
// {
// i: "PPOO",
// x: 0,
// y: 0,
// w: 5,
// h: 3,
// minW: 2,
// maxW: 6,
// minH: 2,
// maxH: 4,
// isResizable: true,
// isDraggable: true,
// },
// {i: "OCPLogs", x: 2, y: 0, w: 5, h: 3, isResizable: true, isDraggable: true},
// ]);
// const [cardData, setCardData] = useState([
// {i: "card1", name: "PPOO"},
// {i: "card2", name: "OCPLogs"},
// ]);
return (
<div className="p-2">
{session ? (
<>
<h3>Welcome Home {user?.username}</h3>
<p>Your current role is: {user?.role}</p>
<br></br>
<Button onClick={() => logout()}>Logout</Button>{" "}
</>
) : (
<LoginForm />
)}
</div>
<>
{/* <AddCards addCard={addCard} cards={cards} /> */}
<GridLayout className="layout" cols={12} rowHeight={30} width={window.innerWidth}>
<div className="bg-blue-400" key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>
a
</div>
<div className="bg-blue-400" key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>
b
</div>
<div className="bg-blue-400" key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>
c
</div>
</GridLayout>
</>
);
}

17
frontend/src/routes/ocp/$lineID.tsx
View File

@@ -1,17 +0,0 @@
import {createFileRoute} from "@tanstack/react-router";
export const Route = createFileRoute("/ocp/$lineID")({
component: RouteComponent,
loader: async ({params}) => {
await new Promise((r) => setTimeout(r, 1500));
//throw new Error();
return {lineID: params.lineID};
},
pendingComponent: () => <div className="m-auto">Loading....</div>,
errorComponent: () => <div className="m-auto">Error....</div>,
});
function RouteComponent() {
const {lineID} = Route.useLoaderData();
return <div>Hello "/ocp/{lineID}"!</div>;
}

17
frontend/src/routes/ocp/index.tsx
View File

@@ -2,30 +2,17 @@ import {createFileRoute, Link} from "@tanstack/react-router";
export const Route = createFileRoute("/ocp/")({
component: RouteComponent,
validateSearch: (search) => {
return {
q: (search.q as string) || "",
};
},
loaderDeps: ({search: {q}}) => ({q}),
loader: async ({deps: {q}}) => {
return {line: q};
},
});
function RouteComponent() {
const {line} = Route.useLoaderData();
const lines = ["l", "2", "3"];
return (
<div>
<h2>Hello "/ocp/{line}/something"!</h2>
<h2>Hello "/ocp/something"!</h2>
{lines.map((line) => {
return (
<div key={line}>
<Link to="/ocp/$lineID" params={{lineID: line}}>
Post
</Link>
<Link to="/ocp">Specific Line</Link>
</div>
);
})}