Workspace UI
This commit is contained in:
Domonkos
5
apps/workspace-ui/app/cookies.txt
Normal file
5
apps/workspace-ui/app/cookies.txt
Normal file
@@ -0,0 +1,5 @@
|
||||
# Netscape HTTP Cookie File
|
||||
# https://curl.se/docs/http-cookies.html
|
||||
# This file was generated by libcurl! Edit at your own risk.
|
||||
|
||||
#HttpOnly_localhost FALSE / FALSE 0 JSESSIONID 4284693C7D8D78CD97E889740B09B5CD
|
||||
BIN
apps/workspace-ui/app/favicon.ico
Normal file
BIN
apps/workspace-ui/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
26
apps/workspace-ui/app/globals.css
Normal file
26
apps/workspace-ui/app/globals.css
Normal file
@@ -0,0 +1,26 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
34
apps/workspace-ui/app/layout.tsx
Normal file
34
apps/workspace-ui/app/layout.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
307
apps/workspace-ui/app/page.tsx
Normal file
307
apps/workspace-ui/app/page.tsx
Normal file
@@ -0,0 +1,307 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
type OverviewRow = {
|
||||
skuId: number;
|
||||
skuCode: string;
|
||||
productName: string;
|
||||
category: string | null;
|
||||
size: string | null;
|
||||
color: string | null;
|
||||
price: number;
|
||||
currentStock: number;
|
||||
};
|
||||
|
||||
type MovementPayload = {
|
||||
skuId: number;
|
||||
delta: number;
|
||||
reason: "PRODUCTION" | "SALE" | "ADJUSTMENT" | "RETURN";
|
||||
reference?: string;
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
const [rows, setRows] = useState<OverviewRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [q, setQ] = useState("");
|
||||
const [category, setCategory] = useState<string>("ALL");
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [selectedSku, setSelectedSku] = useState<OverviewRow | null>(null);
|
||||
const [delta, setDelta] = useState<number>(0);
|
||||
const [reason, setReason] = useState<MovementPayload["reason"]>("ADJUSTMENT");
|
||||
const [reference, setReference] = useState("");
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch("/api/inventory/overview", { credentials: "include" });
|
||||
if (res.status === 401 || res.status === 302) {
|
||||
// If you're not logged in, Spring may redirect. In the browser, just go to /login.
|
||||
setError("Not logged in. Open /login in the browser.");
|
||||
setRows([]);
|
||||
return;
|
||||
}
|
||||
if (!res.ok) throw new Error(`Failed to load: ${res.status}`);
|
||||
const data = (await res.json()) as OverviewRow[];
|
||||
setRows(data);
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? "Unknown error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
await fetch("/logout", { method: "POST", credentials: "include" });
|
||||
window.location.href = "/login";
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const categories = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
rows.forEach((r) => r.category && set.add(r.category));
|
||||
return ["ALL", ...Array.from(set).sort()];
|
||||
}, [rows]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const qq = q.trim().toLowerCase();
|
||||
return rows.filter((r) => {
|
||||
const matchesQ =
|
||||
!qq ||
|
||||
r.productName.toLowerCase().includes(qq) ||
|
||||
r.skuCode.toLowerCase().includes(qq);
|
||||
const matchesCat = category === "ALL" || r.category === category;
|
||||
return matchesQ && matchesCat;
|
||||
});
|
||||
}, [rows, q, category]);
|
||||
|
||||
function openMovement(row: OverviewRow) {
|
||||
setSelectedSku(row);
|
||||
setDelta(0);
|
||||
setReason("ADJUSTMENT");
|
||||
setReference("");
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
async function submitMovement() {
|
||||
if (!selectedSku) return;
|
||||
if (!Number.isFinite(delta) || delta === 0) {
|
||||
alert("Delta must be a non-zero number (e.g. 10 or -1).");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload: MovementPayload = {
|
||||
skuId: selectedSku.skuId,
|
||||
delta,
|
||||
reason,
|
||||
reference: reference.trim() || undefined,
|
||||
};
|
||||
|
||||
const res = await fetch("/api/inventory/movements", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const txt = await res.text();
|
||||
alert(`Failed: ${res.status}\n${txt}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setModalOpen(false);
|
||||
setSelectedSku(null);
|
||||
await load();
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-4">
|
||||
<header className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Workspace Inventory</h1>
|
||||
<p className="text-sm text-gray-600">
|
||||
Data from <code className="px-1">/api/inventory/overview</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
className="rounded border px-3 py-2 text-sm hover:bg-gray-50"
|
||||
href="/login"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
|
||||
<button
|
||||
className="rounded border px-3 py-2 text-sm hover:bg-gray-50"
|
||||
onClick={logout}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="rounded border px-3 py-2 text-sm hover:bg-gray-50"
|
||||
onClick={load}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<input
|
||||
className="w-full rounded border px-3 py-2 text-sm"
|
||||
placeholder="Search product name or SKU code…"
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
/>
|
||||
<select
|
||||
className="rounded border px-3 py-2 text-sm"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
>
|
||||
{categories.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</section>
|
||||
|
||||
{loading && <p className="text-sm text-gray-600">Loading…</p>}
|
||||
{error && (
|
||||
<p className="rounded border border-red-200 bg-red-50 p-3 text-sm text-red-800">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<section className="overflow-x-auto rounded border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50 text-left">
|
||||
<tr>
|
||||
<th className="p-3">Product</th>
|
||||
<th className="p-3">Category</th>
|
||||
<th className="p-3">SKU</th>
|
||||
<th className="p-3">Size</th>
|
||||
<th className="p-3">Color</th>
|
||||
<th className="p-3">Price</th>
|
||||
<th className="p-3">Stock</th>
|
||||
<th className="p-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map((r) => (
|
||||
<tr key={r.skuId} className="border-t">
|
||||
<td className="p-3">{r.productName}</td>
|
||||
<td className="p-3">{r.category ?? "-"}</td>
|
||||
<td className="p-3 font-mono">{r.skuCode}</td>
|
||||
<td className="p-3">{r.size ?? "-"}</td>
|
||||
<td className="p-3">{r.color ?? "-"}</td>
|
||||
<td className="p-3">{Number(r.price).toFixed(2)}</td>
|
||||
<td className="p-3 font-semibold">{r.currentStock}</td>
|
||||
<td className="p-3 text-right">
|
||||
<button
|
||||
className="rounded border px-3 py-1.5 text-xs hover:bg-gray-50"
|
||||
onClick={() => openMovement(r)}
|
||||
>
|
||||
Add movement
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{!loading && filtered.length === 0 && (
|
||||
<tr>
|
||||
<td className="p-3 text-gray-600" colSpan={8}>
|
||||
No rows. (Did you create SKUs + movements in the backend?)
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
{modalOpen && selectedSku && (
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-black/40 p-4">
|
||||
<div className="w-full max-w-md rounded bg-white p-4 shadow">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Add movement</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedSku.productName} — <span className="font-mono">{selectedSku.skuCode}</span>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="rounded border px-2 py-1 text-sm hover:bg-gray-50"
|
||||
onClick={() => setModalOpen(false)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600">Delta</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full rounded border px-3 py-2 text-sm"
|
||||
value={delta}
|
||||
onChange={(e) => setDelta(Number(e.target.value))}
|
||||
placeholder="e.g. 10 or -1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600">Reason</label>
|
||||
<select
|
||||
className="w-full rounded border px-3 py-2 text-sm"
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value as any)}
|
||||
>
|
||||
<option value="PRODUCTION">PRODUCTION</option>
|
||||
<option value="SALE">SALE</option>
|
||||
<option value="RETURN">RETURN</option>
|
||||
<option value="ADJUSTMENT">ADJUSTMENT</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600">Reference (optional)</label>
|
||||
<input
|
||||
className="w-full rounded border px-3 py-2 text-sm"
|
||||
value={reference}
|
||||
onChange={(e) => setReference(e.target.value)}
|
||||
placeholder='e.g. "Order #1001"'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
className="rounded border px-3 py-2 text-sm hover:bg-gray-50"
|
||||
onClick={() => setModalOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="rounded bg-black px-3 py-2 text-sm text-white hover:opacity-90"
|
||||
onClick={submitMovement}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user