jason
d53c772dd6
- Node/Express/TypeScript API under /api/v1 with JWT auth (login, refresh, logout, /me) - Prisma schema: vendors, users, roles, products, categories, taxes, transactions - SQLite for local dev; Postgres via docker-compose for production - Full CRUD routes for vendors, users, categories, taxes, products with Zod validation and RBAC - Paginated list endpoints scoped per vendor; refresh token rotation - React/TypeScript admin SPA (Vite): login, protected routing, sidebar layout - Pages: Dashboard, Catalog (tabbed Products/Categories/Taxes), Users, Vendor Settings - Shared UI: Table, Modal, FormField, Btn, PageHeader components - Multi-stage Dockerfile; docker-compose with Postgres healthcheck - Seed script with demo vendor and owner account - INSTRUCTIONS.md, ROADMAP.md, .claude/launch.json for dev server config Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import React from "react";
|
|
|
|
interface FormFieldProps {
|
|
label: string;
|
|
error?: string;
|
|
children: React.ReactNode;
|
|
required?: boolean;
|
|
}
|
|
|
|
export function FormField({ label, error, children, required }: FormFieldProps) {
|
|
return (
|
|
<div style={s.field}>
|
|
<label style={s.label}>
|
|
{label}{required && <span style={s.req}> *</span>}
|
|
</label>
|
|
{children}
|
|
{error && <span style={s.error}>{error}</span>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const inputStyle: React.CSSProperties = {
|
|
width: "100%",
|
|
border: "1px solid var(--color-border)",
|
|
borderRadius: "var(--radius)",
|
|
padding: "8px 10px",
|
|
fontSize: 14,
|
|
outline: "none",
|
|
boxSizing: "border-box",
|
|
};
|
|
|
|
export function Btn({
|
|
children,
|
|
variant = "primary",
|
|
type = "button",
|
|
disabled,
|
|
onClick,
|
|
style,
|
|
}: {
|
|
children: React.ReactNode;
|
|
variant?: "primary" | "danger" | "ghost";
|
|
type?: "button" | "submit" | "reset";
|
|
disabled?: boolean;
|
|
onClick?: () => void;
|
|
style?: React.CSSProperties;
|
|
}) {
|
|
const base: React.CSSProperties = {
|
|
border: "none",
|
|
borderRadius: "var(--radius)",
|
|
padding: "8px 16px",
|
|
fontWeight: 600,
|
|
fontSize: 13,
|
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
opacity: disabled ? 0.6 : 1,
|
|
};
|
|
const variants = {
|
|
primary: { background: "var(--color-primary)", color: "#fff" },
|
|
danger: { background: "var(--color-danger)", color: "#fff" },
|
|
ghost: {
|
|
background: "none",
|
|
color: "var(--color-text-muted)",
|
|
border: "1px solid var(--color-border)",
|
|
},
|
|
};
|
|
return (
|
|
<button type={type} style={{ ...base, ...variants[variant], ...style }} disabled={disabled} onClick={onClick}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const s: Record<string, React.CSSProperties> = {
|
|
field: { display: "flex", flexDirection: "column", gap: 4, marginBottom: 16 },
|
|
label: { fontWeight: 500, fontSize: 13 },
|
|
req: { color: "var(--color-danger)" },
|
|
error: { color: "var(--color-danger)", fontSize: 12 },
|
|
};
|