initial commit: p2p-dev — custom frontend wired to dev env (app 169)
This commit is contained in:
Bhanu Prakash Sai Potteri
commit
dea13acd2b
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
*.local
|
||||
.DS_Store
|
||||
*-local-command-caveatcaveat-*.txt
|
||||
36
frontgen_projects_dev_to_studio.sql
Normal file
36
frontgen_projects_dev_to_studio.sql
Normal file
@ -0,0 +1,36 @@
|
||||
-- ============================================================
|
||||
-- Frontgen Projects — Dev → Studio Migration
|
||||
-- Run against: studio DB
|
||||
--
|
||||
-- Studio already has: clinic-workflow, support-ticket, customer-onboarding,
|
||||
-- task-management, truck, p2p (already on studio URL)
|
||||
-- Missing in studio: dealer-1, grfm-app, dealer-new-1, grfm, truck2, adani-dealer
|
||||
-- ============================================================
|
||||
|
||||
BEGIN;
|
||||
|
||||
-- 1. Repoint zino_api_url for projects already in studio (excluding p2p which is correct)
|
||||
UPDATE frontgen.projects
|
||||
SET zino_api_url = 'https://studio.getzino.in'
|
||||
WHERE id IN (
|
||||
'09c3357e-9b6c-4a93-abaf-9464e90ebbe4', -- Clinic workflow
|
||||
'14307640-8e37-4448-ba3c-c3672da68bbf', -- Support Ticket
|
||||
'a22cd6ba-c5e4-4f7e-ac84-1db17559c075', -- Customer Onboarding
|
||||
'242eb4da-066f-4c46-9f5b-479f3e1df3f1', -- Task Management
|
||||
'9134befe-f74b-4c87-925d-d4eaa096dbf0' -- Truck
|
||||
);
|
||||
|
||||
-- 2. Insert the 6 missing projects (all pre-pointed at studio)
|
||||
INSERT INTO frontgen.projects (id, name, slug, framework, repo_name, preview_url, workflow_id, zino_api_url, last_build_status, last_build_at, last_commit_sha, created_at, updated_at) VALUES
|
||||
('0afe0940-6ced-4310-bd95-acbda3d9da6e', 'dealer 1', 'dealer-1', 'react', 'dealer-1', 'https://preview.getzino.in/dealer-1/', 'fd7e72a5-5920-4d41-a660-40aa14a21fb6', 'https://studio.getzino.in', 'success', '2026-04-02 10:17:20.206652+00', '1bdd529a7bb461dee4ffc33c8c75dd7795f710a6', '2026-03-31 07:01:58.61003+00', '2026-04-02 10:17:20.209667+00'),
|
||||
('0ca7e50c-ea3c-4238-9ae1-07cdd61c9023', 'GRFM APP', 'grfm-app', 'react', 'grfm-app', 'http://preview.getzino.in/grfm-app/', '7dabcd26-30a4-498c-82a8-0fc88f1ad0dc', 'https://studio.getzino.in', 'success', '2026-03-31 10:24:14.231953+00', '5b4c587976d2ba4ba5a8c3bc03617ee9e52c63a2', '2026-03-31 10:06:47.566653+00', '2026-03-31 10:24:14.23535+00'),
|
||||
('69aa6f58-0e45-4562-8413-19de03f9f8b5', 'Dealer new 1', 'dealer-new-1', 'react', 'dealer-new-1', 'http://preview.getzino.in/dealer-new-1/', '817a45fe-882f-4502-b3cb-4ace65ca7b48', 'https://studio.getzino.in', 'success', '2026-04-10 13:30:05.24563+00', '9369958d64c266ef2c03afeab0c99117a7981388', '2026-04-08 05:58:17.232322+00', '2026-04-10 13:30:05.24978+00'),
|
||||
('8660fc96-9a06-4813-956f-2a22c8a6c69f', 'GRFM', 'grfm', 'react', 'grfm', 'http://preview.getzino.in/grfm/', '276d050c-c668-4fb4-9d4c-c627fc71c217', 'https://studio.getzino.in', 'success', '2026-04-13 06:15:35.019749+00', 'f9917e10eb4534ecff57bf743393676d8c844b0e', '2026-04-13 06:00:26.479567+00', '2026-04-13 06:15:35.024828+00'),
|
||||
('a12e234c-be37-4eb8-8410-0bff989e9b0b', 'Truck2', 'truck2', 'react', 'truck2', 'http://preview.getzino.in/truck2/', '6e144d23-dd76-478c-b330-6acd3b736129"', 'https://studio.getzino.in', 'success', '2026-04-13 11:56:50.316279+00', '9014d4522664b12315fae11f516632c20ada1617', '2026-04-13 11:31:17.284247+00', '2026-04-13 11:56:50.320774+00'),
|
||||
('0782a310-8dbc-4032-93b4-98454ae33317', 'Adani Dealer', 'adani-dealer', 'react', 'adani-dealer', 'http://preview.getzino.in/adani-dealer/', 'fc0dc1f1-bf24-4e5b-a066-6d16efc95899', 'https://studio.getzino.in', 'success', '2026-04-16 05:57:06.831479+00', '22025ea5fe2a28df6cb954de9141edeb3d68ead0', '2026-04-16 05:40:06.970758+00', '2026-04-16 05:57:06.834982+00')
|
||||
ON CONFLICT (id) DO NOTHING;
|
||||
|
||||
COMMIT;
|
||||
|
||||
-- Verify
|
||||
SELECT id, name, slug, zino_api_url FROM frontgen.projects ORDER BY created_at;
|
||||
16
index.html
Normal file
16
index.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/zino.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<title>P2P</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
405
migration_dev_to_studio.sql
Normal file
405
migration_dev_to_studio.sql
Normal file
File diff suppressed because one or more lines are too long
164
p2p_demo_schema.sql
Normal file
164
p2p_demo_schema.sql
Normal file
@ -0,0 +1,164 @@
|
||||
-- P2P Demo Schema Data
|
||||
CREATE SCHEMA IF NOT EXISTS p2p_demo;
|
||||
|
||||
CREATE TABLE p2p_demo.contract_line_items (
|
||||
id integer NOT NULL,
|
||||
contract_id text,
|
||||
product_code text NOT NULL,
|
||||
description text,
|
||||
unit_price numeric(12,2) NOT NULL,
|
||||
currency text DEFAULT 'INR'::text
|
||||
);
|
||||
|
||||
ALTER TABLE p2p_demo.contract_line_items OWNER TO postgres;
|
||||
CREATE SEQUENCE p2p_demo.contract_line_items_id_seq
|
||||
ALTER SEQUENCE p2p_demo.contract_line_items_id_seq OWNER TO postgres;
|
||||
ALTER SEQUENCE p2p_demo.contract_line_items_id_seq OWNED BY p2p_demo.contract_line_items.id;
|
||||
CREATE TABLE p2p_demo.contracts (
|
||||
contract_id text NOT NULL,
|
||||
vendor_id text NOT NULL,
|
||||
vendor_name text NOT NULL,
|
||||
effective_date date,
|
||||
expiry_date date,
|
||||
status text DEFAULT 'active'::text,
|
||||
payment_terms text,
|
||||
price_tolerance_pct numeric(5,2) DEFAULT 2.0,
|
||||
quantity_tolerance_pct numeric(5,2) DEFAULT 5.0,
|
||||
created_at timestamp without time zone DEFAULT now()
|
||||
);
|
||||
|
||||
ALTER TABLE p2p_demo.contracts OWNER TO postgres;
|
||||
CREATE TABLE p2p_demo.goods_receipts (
|
||||
gr_number text NOT NULL,
|
||||
po_number text NOT NULL,
|
||||
vendor_id text NOT NULL,
|
||||
receipt_date date,
|
||||
received_by text,
|
||||
notes text,
|
||||
created_at timestamp without time zone DEFAULT now()
|
||||
);
|
||||
|
||||
ALTER TABLE p2p_demo.goods_receipts OWNER TO postgres;
|
||||
CREATE TABLE p2p_demo.gr_line_items (
|
||||
id integer NOT NULL,
|
||||
gr_number text,
|
||||
product_code text NOT NULL,
|
||||
quantity_received integer NOT NULL,
|
||||
condition text DEFAULT 'good'::text
|
||||
);
|
||||
|
||||
ALTER TABLE p2p_demo.gr_line_items OWNER TO postgres;
|
||||
CREATE SEQUENCE p2p_demo.gr_line_items_id_seq
|
||||
ALTER SEQUENCE p2p_demo.gr_line_items_id_seq OWNER TO postgres;
|
||||
ALTER SEQUENCE p2p_demo.gr_line_items_id_seq OWNED BY p2p_demo.gr_line_items.id;
|
||||
CREATE TABLE p2p_demo.payments (
|
||||
payment_id text NOT NULL,
|
||||
invoice_number text,
|
||||
po_number text,
|
||||
vendor_id text NOT NULL,
|
||||
amount numeric(14,2) NOT NULL,
|
||||
payment_date date,
|
||||
status text DEFAULT 'completed'::text,
|
||||
created_at timestamp without time zone DEFAULT now()
|
||||
);
|
||||
|
||||
ALTER TABLE p2p_demo.payments OWNER TO postgres;
|
||||
CREATE TABLE p2p_demo.po_line_items (
|
||||
id integer NOT NULL,
|
||||
po_number text,
|
||||
product_code text NOT NULL,
|
||||
description text,
|
||||
quantity integer NOT NULL,
|
||||
unit_price numeric(12,2) NOT NULL
|
||||
);
|
||||
|
||||
ALTER TABLE p2p_demo.po_line_items OWNER TO postgres;
|
||||
CREATE SEQUENCE p2p_demo.po_line_items_id_seq
|
||||
ALTER SEQUENCE p2p_demo.po_line_items_id_seq OWNER TO postgres;
|
||||
ALTER SEQUENCE p2p_demo.po_line_items_id_seq OWNED BY p2p_demo.po_line_items.id;
|
||||
CREATE TABLE p2p_demo.purchase_orders (
|
||||
po_number text NOT NULL,
|
||||
vendor_id text NOT NULL,
|
||||
vendor_name text NOT NULL,
|
||||
contract_id text,
|
||||
order_date date,
|
||||
expected_delivery date,
|
||||
status text DEFAULT 'open'::text,
|
||||
total_amount numeric(14,2),
|
||||
created_at timestamp without time zone DEFAULT now()
|
||||
);
|
||||
|
||||
ALTER TABLE p2p_demo.purchase_orders OWNER TO postgres;
|
||||
ALTER TABLE ONLY p2p_demo.contract_line_items ALTER COLUMN id SET DEFAULT nextval('p2p_demo.contract_line_items_id_seq'::regclass);
|
||||
ALTER TABLE ONLY p2p_demo.contract_line_items ALTER COLUMN id SET DEFAULT nextval('p2p_demo.contract_line_items_id_seq'::regclass);
|
||||
ALTER TABLE ONLY p2p_demo.gr_line_items ALTER COLUMN id SET DEFAULT nextval('p2p_demo.gr_line_items_id_seq'::regclass);
|
||||
ALTER TABLE ONLY p2p_demo.gr_line_items ALTER COLUMN id SET DEFAULT nextval('p2p_demo.gr_line_items_id_seq'::regclass);
|
||||
ALTER TABLE ONLY p2p_demo.po_line_items ALTER COLUMN id SET DEFAULT nextval('p2p_demo.po_line_items_id_seq'::regclass);
|
||||
ALTER TABLE ONLY p2p_demo.po_line_items ALTER COLUMN id SET DEFAULT nextval('p2p_demo.po_line_items_id_seq'::regclass);
|
||||
COPY p2p_demo.contract_line_items (id, contract_id, product_code, description, unit_price, currency) FROM stdin;
|
||||
233 CNT-100 PRD-101 Steel Rods 12mm 1000.00 INR
|
||||
234 CNT-100 PRD-102 Steel Plates 5mm 2500.00 INR
|
||||
235 CNT-200 PRD-201 A4 Paper Ream (500 sheets) 200.00 INR
|
||||
236 CNT-200 PRD-202 Printer Ink Cartridge 1500.00 INR
|
||||
237 CNT-300 PRD-301 Circuit Board Type-A 500.00 INR
|
||||
238 CNT-300 PRD-302 LED Panel 24inch 3500.00 INR
|
||||
239 CNT-400 PRD-401 Safety Helmet 150.00 INR
|
||||
240 CNT-400 PRD-402 Industrial Gloves (pair) 80.00 INR
|
||||
\.
|
||||
|
||||
COPY p2p_demo.contracts (contract_id, vendor_id, vendor_name, effective_date, expiry_date, status, payment_terms, price_tolerance_pct, quantity_tolerance_pct, created_at) FROM stdin;
|
||||
CNT-100 VND-001 Tata Steel Ltd 2026-01-01 2026-12-31 active Net 30 2.00 5.00 2026-03-30 18:34:11.089882
|
||||
CNT-200 VND-002 Reliance Office Supplies 2026-01-01 2026-12-31 active Net 15 3.00 5.00 2026-03-30 18:34:11.091337
|
||||
CNT-300 VND-003 Bharat Electronics 2026-01-01 2026-12-31 active Net 30 2.00 5.00 2026-03-30 18:34:11.092484
|
||||
CNT-400 VND-004 Godrej Industrial 2026-01-01 2026-12-31 active 2/10 Net 30 2.00 5.00 2026-03-30 18:34:11.093581
|
||||
\.
|
||||
|
||||
COPY p2p_demo.goods_receipts (gr_number, po_number, vendor_id, receipt_date, received_by, notes, created_at) FROM stdin;
|
||||
GR-2001 PO-2001 VND-002 2026-03-18 Amit Kumar Full delivery received. All items in good condition. 2026-03-30 18:34:11.100119
|
||||
GR-1001 PO-1001 VND-001 2026-03-18 Rajesh Sharma Partial delivery. 700 of 1000 units received. Vendor confirmed remaining 300 shipped separately, expected April 5. 2026-03-30 18:34:11.101225
|
||||
GR-3001 PO-3001 VND-003 2026-03-18 Sunil Verma Full delivery received. QC passed. 2026-03-30 18:34:11.102194
|
||||
GR-2002 PO-2002 VND-002 2026-03-18 Amit Kumar Full delivery received. 2026-03-30 18:34:11.103112
|
||||
GR-1002 PO-1002 VND-001 2026-03-18 Rajesh Sharma Partial delivery. 600 of 800 plates received. Remaining 200 delayed due to transport issues. 2026-03-30 18:34:11.104018
|
||||
\.
|
||||
|
||||
COPY p2p_demo.gr_line_items (id, gr_number, product_code, quantity_received, condition) FROM stdin;
|
||||
146 GR-2001 PRD-201 500 good
|
||||
147 GR-1001 PRD-101 700 good
|
||||
148 GR-3001 PRD-301 200 good
|
||||
149 GR-2002 PRD-202 50 good
|
||||
150 GR-1002 PRD-102 600 good
|
||||
\.
|
||||
|
||||
COPY p2p_demo.payments (payment_id, invoice_number, po_number, vendor_id, amount, payment_date, status, created_at) FROM stdin;
|
||||
PAY-5001 INV-2026-00700 PO-2002 VND-002 75000.00 2026-03-10 completed 2026-03-30 18:34:11.10478
|
||||
PAY-5002 INV-2026-00800 PO-1002 VND-001 200000.00 2026-03-05 completed 2026-03-30 18:34:11.105142
|
||||
\.
|
||||
|
||||
COPY p2p_demo.po_line_items (id, po_number, product_code, description, quantity, unit_price) FROM stdin;
|
||||
175 PO-2001 PRD-201 A4 Paper Ream (500 sheets) 500 200.00
|
||||
176 PO-1001 PRD-101 Steel Rods 12mm 1000 1000.00
|
||||
177 PO-3001 PRD-301 Circuit Board Type-A 200 500.00
|
||||
178 PO-2002 PRD-202 Printer Ink Cartridge 50 1500.00
|
||||
179 PO-4001 PRD-401 Safety Helmet 300 150.00
|
||||
180 PO-1002 PRD-102 Steel Plates 5mm 800 1000.00
|
||||
\.
|
||||
|
||||
COPY p2p_demo.purchase_orders (po_number, vendor_id, vendor_name, contract_id, order_date, expected_delivery, status, total_amount, created_at) FROM stdin;
|
||||
PO-2001 VND-002 Reliance Office Supplies CNT-200 2026-02-15 2026-03-15 fully_received 100000.00 2026-03-30 18:34:11.094652
|
||||
PO-1001 VND-001 Tata Steel Ltd CNT-100 2026-02-15 2026-03-15 partially_received 1000000.00 2026-03-30 18:34:11.095959
|
||||
PO-3001 VND-003 Bharat Electronics CNT-300 2026-02-15 2026-03-15 fully_received 100000.00 2026-03-30 18:34:11.096847
|
||||
PO-2002 VND-002 Reliance Office Supplies CNT-200 2026-02-15 2026-03-15 fully_received 75000.00 2026-03-30 18:34:11.09772
|
||||
PO-4001 VND-004 Godrej Industrial CNT-400 2026-02-15 2026-03-15 open 45000.00 2026-03-30 18:34:11.098572
|
||||
PO-1002 VND-001 Tata Steel Ltd CNT-100 2026-02-15 2026-03-15 partially_received 800000.00 2026-03-30 18:34:11.099363
|
||||
\.
|
||||
|
||||
ALTER TABLE ONLY p2p_demo.contract_line_items
|
||||
ALTER TABLE ONLY p2p_demo.contracts
|
||||
ALTER TABLE ONLY p2p_demo.goods_receipts
|
||||
ALTER TABLE ONLY p2p_demo.gr_line_items
|
||||
ALTER TABLE ONLY p2p_demo.payments
|
||||
ALTER TABLE ONLY p2p_demo.po_line_items
|
||||
ALTER TABLE ONLY p2p_demo.purchase_orders
|
||||
ALTER TABLE ONLY p2p_demo.contract_line_items
|
||||
ALTER TABLE ONLY p2p_demo.gr_line_items
|
||||
ALTER TABLE ONLY p2p_demo.po_line_items
|
||||
2745
package-lock.json
generated
Normal file
2745
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
package.json
Normal file
29
package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "p2p-dev",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"typecheck": "tsc -b",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.60.5",
|
||||
"lucide-react": "^0.441.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.5",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.41",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"typescript": "~5.5.4",
|
||||
"vite": "^5.4.2"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
9
public/zino-logo.svg
Normal file
9
public/zino-logo.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 36" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="zinoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C96442"/>
|
||||
<stop offset="100%" stop-color="#E8A87C"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<text x="45" y="26" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="24" font-weight="700" fill="url(#zinoGrad)" text-anchor="middle" letter-spacing="2">ZINO</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 480 B |
9
public/zino.svg
Normal file
9
public/zino.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
37
src/App.tsx
Normal file
37
src/App.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import { Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { ProtectedRoute } from './components/ProtectedRoute'
|
||||
import Login from './pages/Login'
|
||||
import AppShell from './components/AppShell'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route
|
||||
path="/screen/:screenId/detail/:instanceId"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<AppShell />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/screen/:screenId"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<AppShell />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<AppShell />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
422
src/api/viewService.ts
Normal file
422
src/api/viewService.ts
Normal file
@ -0,0 +1,422 @@
|
||||
import { APP_ID } from "../config";
|
||||
|
||||
const TOKEN_KEY = "zino_token";
|
||||
|
||||
function baseUrl(): string {
|
||||
return (import.meta.env.VITE_ZINO_API_URL || "").replace(/\/+$/, "");
|
||||
}
|
||||
|
||||
function headers(): Record<string, string> {
|
||||
const h: Record<string, string> = { "Content-Type": "application/json" };
|
||||
const token = localStorage.getItem(TOKEN_KEY);
|
||||
if (token) h["Authorization"] = `Bearer ${token}`;
|
||||
return h;
|
||||
}
|
||||
|
||||
async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
|
||||
const res = await fetch(`${baseUrl()}${path}`, {
|
||||
method,
|
||||
headers: headers(),
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
});
|
||||
if (res.status === 401) {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
localStorage.removeItem("zino_user");
|
||||
window.location.href = `${import.meta.env.BASE_URL}login`;
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
if (!res.ok) {
|
||||
let msg = res.statusText;
|
||||
try { const e = await res.json(); if (e.error) msg = e.error; } catch {}
|
||||
throw new Error(msg);
|
||||
}
|
||||
if (res.status === 204) return undefined as T;
|
||||
return res.json() as Promise<T>;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Header
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface HeaderConfig {
|
||||
slots: { left: string[]; right: string[]; center: string[] };
|
||||
layout: { type: string; height: string; position: string; full_width: boolean };
|
||||
components: {
|
||||
nav?: { items: NavItem[] };
|
||||
logo?: { text?: string; image_url?: string; display_type: string };
|
||||
profile?: { shape: string; show_name: boolean };
|
||||
};
|
||||
}
|
||||
|
||||
export interface NavItem {
|
||||
id: string;
|
||||
icon: string;
|
||||
type: string;
|
||||
label: string;
|
||||
screen_uuid: string;
|
||||
}
|
||||
|
||||
export async function getHeaderConfig(deviceType = "desktop"): Promise<HeaderConfig> {
|
||||
const raw = await request<any>("GET", `/app/${APP_ID}/view/header/${deviceType}`);
|
||||
return raw.config ?? raw;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Screens
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface ScreenListItem {
|
||||
id: number;
|
||||
source_screen_id: number;
|
||||
screen_name: string;
|
||||
device: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface ScreenLayout {
|
||||
id: number;
|
||||
source_screen_id: number;
|
||||
screen_name: string;
|
||||
layout: LayoutElement[];
|
||||
}
|
||||
|
||||
export interface LayoutElement {
|
||||
type: string;
|
||||
style?: Record<string, string>;
|
||||
config: Record<string, any>;
|
||||
classes?: string[];
|
||||
}
|
||||
|
||||
export function getScreens(deviceType = "desktop"): Promise<ScreenListItem[]> {
|
||||
return request("GET", `/app/${APP_ID}/view/screens?device_type=${deviceType}`);
|
||||
}
|
||||
|
||||
export function getScreen(idOrUuid: number | string): Promise<ScreenLayout> {
|
||||
return request("GET", `/app/${APP_ID}/view/screens/${idOrUuid}`);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// RV Screens
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface RVScreen {
|
||||
id: number;
|
||||
source_screen_id: number;
|
||||
screen_name: string;
|
||||
rv_template_uid: string;
|
||||
layout?: any;
|
||||
}
|
||||
|
||||
// Accepts either the numeric source_screen_id OR the source_uuid — both
|
||||
// are accepted by the view-service's rv-screens endpoint.
|
||||
export function getRVScreen(idOrUuid: number | string): Promise<RVScreen> {
|
||||
return request("GET", `/app/${APP_ID}/view/rv-screens/${idOrUuid}`);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Record View (POST-based)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface SearchQuery {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
sort_by?: string;
|
||||
sort_dir?: "asc" | "desc";
|
||||
search?: string;
|
||||
filters?: Array<{ field_key: string; value: string; data_type?: string }>;
|
||||
}
|
||||
|
||||
export interface RecordViewField {
|
||||
field_key: string;
|
||||
output_label: string;
|
||||
data_type: string;
|
||||
is_filter: boolean;
|
||||
is_search: boolean;
|
||||
type?: string;
|
||||
activity_id?: string;
|
||||
}
|
||||
|
||||
export interface TileValue {
|
||||
tile_uid: string;
|
||||
key: string;
|
||||
value: unknown;
|
||||
}
|
||||
|
||||
export interface ChartDataRow {
|
||||
dimension: unknown;
|
||||
series?: string;
|
||||
value: unknown;
|
||||
}
|
||||
|
||||
export interface ChartDataResponse {
|
||||
chart_uid: string;
|
||||
key: string;
|
||||
rows: ChartDataRow[];
|
||||
}
|
||||
|
||||
export interface RecordViewResponse {
|
||||
config: { fields: RecordViewField[] };
|
||||
data: Record<string, unknown>[];
|
||||
pagination?: {
|
||||
page: number;
|
||||
limit: number;
|
||||
total_count: number;
|
||||
total_pages: number;
|
||||
};
|
||||
tile_values?: TileValue[];
|
||||
chart_data?: ChartDataResponse[];
|
||||
}
|
||||
|
||||
export function getRecordView(
|
||||
rvTemplateUid: string,
|
||||
rvScreenId: string | number,
|
||||
query: SearchQuery = {},
|
||||
): Promise<RecordViewResponse> {
|
||||
return request("POST", `/app/${APP_ID}/view/recordview`, {
|
||||
rv_template_uid: rvTemplateUid,
|
||||
rv_screen_id: String(rvScreenId),
|
||||
search_query: {
|
||||
page: query.page || 1,
|
||||
limit: query.limit || 50,
|
||||
sort_by: query.sort_by || "",
|
||||
sort_dir: query.sort_dir || "desc",
|
||||
search: query.search || "",
|
||||
filters: query.filters || [],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function getRecordViewLegacy(
|
||||
rvUid: string,
|
||||
query: SearchQuery = {},
|
||||
): Promise<RecordViewResponse> {
|
||||
const qs = new URLSearchParams();
|
||||
qs.set("rv_id", rvUid);
|
||||
if (query.page) qs.set("page", String(query.page));
|
||||
if (query.limit) qs.set("limit", String(query.limit));
|
||||
if (query.sort_by) qs.set("sort_by", query.sort_by);
|
||||
if (query.sort_dir) qs.set("sort_dir", query.sort_dir);
|
||||
if (query.search) qs.set("search", query.search);
|
||||
if (query.filters) {
|
||||
for (const f of query.filters) {
|
||||
qs.set(`filter.${f.field_key}`, f.value);
|
||||
}
|
||||
}
|
||||
return request("GET", `/recordview?${qs.toString()}`);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// DV Screens
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface DVScreen {
|
||||
id: number;
|
||||
source_screen_id: number;
|
||||
screen_name: string;
|
||||
dv_template_uid: string;
|
||||
layout?: any;
|
||||
}
|
||||
|
||||
export function getDVScreen(idOrUuid: number | string): Promise<DVScreen> {
|
||||
return request("GET", `/app/${APP_ID}/view/dv-screens/${idOrUuid}`);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Detail View
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface DetailViewResponse {
|
||||
config: { fields: Array<{ field_key: string; output_label: string; data_type: string }> };
|
||||
data: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export function getDetailView(dvSourceIdOrUid: number | string, instanceId: string): Promise<DetailViewResponse> {
|
||||
return request(
|
||||
"GET",
|
||||
`/app/${APP_ID}/view/detailview/${encodeURIComponent(String(dvSourceIdOrUid))}?instance_id=${encodeURIComponent(instanceId)}`,
|
||||
);
|
||||
}
|
||||
|
||||
export function getDetailViewLegacy(dvUid: string, instanceId: string): Promise<DetailViewResponse> {
|
||||
return request(
|
||||
"GET",
|
||||
`/detailview?dv_id=${encodeURIComponent(dvUid)}&instance_id=${encodeURIComponent(instanceId)}`,
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Form Screens
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface FormScreenField {
|
||||
id: string;
|
||||
uid: string;
|
||||
name: string;
|
||||
type: string;
|
||||
data_type: string;
|
||||
mandatory: boolean;
|
||||
value?: any;
|
||||
properties?: {
|
||||
options?: Array<{ label: string; value: string }>;
|
||||
country_code?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface FormScreenResponse {
|
||||
id: number;
|
||||
activity_uid: string;
|
||||
activity_name: string;
|
||||
device_type: string;
|
||||
fields: FormScreenField[];
|
||||
grid_config: Array<{ i: string; x: number; y: number; w: number; h: number }>;
|
||||
layout: any[];
|
||||
}
|
||||
|
||||
export function getFormScreen(
|
||||
activityId: string,
|
||||
instanceId?: string,
|
||||
deviceType = "desktop",
|
||||
): Promise<FormScreenResponse> {
|
||||
const numericInstanceId = instanceId ? Number(instanceId) : undefined;
|
||||
return request("POST", `/app/${APP_ID}/view/form-screens`, {
|
||||
activity_id: activityId,
|
||||
device_type: deviceType,
|
||||
...(numericInstanceId && !Number.isNaN(numericInstanceId)
|
||||
? { instance_id: numericInstanceId }
|
||||
: {}),
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Workflow Actions
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface WorkflowResponse {
|
||||
success: boolean;
|
||||
status_code?: number;
|
||||
message?: string;
|
||||
data?: Record<string, unknown>;
|
||||
instance_id?: string;
|
||||
}
|
||||
|
||||
// Core-service expects the workflow UUID as `workflow_uuid` — the numeric
|
||||
// `workflow_id` field was removed when the clone-portable identifier rolled out.
|
||||
export function startWorkflow(
|
||||
workflowUuid: string,
|
||||
activityId: string,
|
||||
data?: Record<string, unknown>,
|
||||
): Promise<WorkflowResponse> {
|
||||
return request("POST", `/app/${APP_ID}/start`, {
|
||||
workflow_uuid: workflowUuid,
|
||||
activity_id: activityId,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function performActivity(
|
||||
workflowUuid: string,
|
||||
instanceId: string,
|
||||
activityId: string,
|
||||
data?: Record<string, unknown>,
|
||||
): Promise<WorkflowResponse> {
|
||||
const numericInstanceId = Number(instanceId);
|
||||
return request("POST", `/app/${APP_ID}/activity`, {
|
||||
workflow_uuid: workflowUuid,
|
||||
instance_id: Number.isNaN(numericInstanceId) ? instanceId : numericInstanceId,
|
||||
activity_id: activityId,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function submitForm(
|
||||
workflowUuid: string,
|
||||
activityId: string,
|
||||
formData: Record<string, unknown>,
|
||||
instanceId?: string,
|
||||
deviceType = "desktop",
|
||||
): Promise<WorkflowResponse> {
|
||||
const numericInstanceId = instanceId ? Number(instanceId) : undefined;
|
||||
return request("POST", `/app/${APP_ID}/form/submit`, {
|
||||
workflow_uuid: workflowUuid,
|
||||
activity_id: activityId,
|
||||
device_type: deviceType,
|
||||
form_data: formData,
|
||||
...(numericInstanceId && !Number.isNaN(numericInstanceId)
|
||||
? { instance_id: numericInstanceId }
|
||||
: {}),
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Instance
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface InstanceResponse {
|
||||
instance_id: string;
|
||||
workflow_id: string;
|
||||
current_state_id: string;
|
||||
current_state_name: string;
|
||||
data: Record<string, unknown>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export function getInstance(workflowUuid: string, instanceId: string): Promise<InstanceResponse> {
|
||||
return request("POST", `/app/${APP_ID}/instance`, {
|
||||
workflow_uuid: workflowUuid,
|
||||
instance_id: Number(instanceId),
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Audit
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface AuditEntry {
|
||||
id: number;
|
||||
user_id: string;
|
||||
user_roles: string[];
|
||||
activity_id: string;
|
||||
data: Record<string, unknown>;
|
||||
execution_state: string;
|
||||
created_at: string;
|
||||
// Optional human-readable summary line. Populated by useInstanceMeta when
|
||||
// the audit is synthesised from instance.data._activities.
|
||||
context?: string;
|
||||
}
|
||||
|
||||
export function getAuditLog(instanceId: string): Promise<AuditEntry[]> {
|
||||
return request("GET", `/app/${APP_ID}/view/audit?instance_id=${encodeURIComponent(instanceId)}`);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// RDBMS lookup records — used by the demo calendar to pull rows from the
|
||||
// `mahindra_demo` schema via the lookup-field config on the INIT activity.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface RdbmsLookupResponse {
|
||||
records: Record<string, unknown>[];
|
||||
total: number;
|
||||
limit: number;
|
||||
offset: number;
|
||||
}
|
||||
|
||||
export interface RdbmsLookupQuery {
|
||||
workflowId: number;
|
||||
activityId: string;
|
||||
fieldId: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
search?: string;
|
||||
}
|
||||
|
||||
export function fetchRdbmsLookupRecords(templateUuid: string, q: RdbmsLookupQuery): Promise<RdbmsLookupResponse> {
|
||||
return request("POST", `/app/${APP_ID}/rdbms-templates/${encodeURIComponent(templateUuid)}/records`, {
|
||||
workflow_id: q.workflowId,
|
||||
activity_id: q.activityId,
|
||||
field_id: q.fieldId,
|
||||
limit: q.limit ?? 1000,
|
||||
offset: q.offset ?? 0,
|
||||
search: q.search ?? "",
|
||||
});
|
||||
}
|
||||
302
src/components/AppShell.tsx
Normal file
302
src/components/AppShell.tsx
Normal file
@ -0,0 +1,302 @@
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Loader2, CheckCircle2, XCircle, PauseCircle, MessageSquare, Clock } from "lucide-react";
|
||||
import DynamicHeader from "./DynamicHeader";
|
||||
import DashboardStats from "./DashboardStats";
|
||||
import ScreenRenderer from "./ScreenRenderer";
|
||||
import { TableSkeleton } from "./Skeleton";
|
||||
import DetailViewPanel from "./DetailViewPanel";
|
||||
import FormModal from "./FormModal";
|
||||
import { getHeaderConfig, getScreen, getAuditLog, getInstance, type LayoutElement, type NavItem, type AuditEntry } from "../api/viewService";
|
||||
import { WORKFLOW_ID, ACTIVITY_IDS, STATE_IDS, SCREEN_UUIDS, RDBMS_RV_SCREEN_UUID, RDBMS_DV_SCREEN_UUID } from "../config";
|
||||
import RecordViewTable from "./RecordViewTable";
|
||||
|
||||
// Keys + values are UUIDs (source_uuid from tbl_appconfig_rv_screens / dv_screens / screens).
|
||||
const RDBMS_SCREENS: Record<string, string> = {
|
||||
[RDBMS_RV_SCREEN_UUID]: RDBMS_RV_SCREEN_UUID, // Purchase Orders (Vendor Data) rv_screen
|
||||
};
|
||||
|
||||
const RDBMS_SCREEN_LABELS: Record<string, string> = {
|
||||
[RDBMS_RV_SCREEN_UUID]: "Purchase Orders",
|
||||
};
|
||||
|
||||
// RDBMS list screen → DV screen (both are dv/rv screen source_uuids).
|
||||
const RDBMS_DETAIL_SCREENS: Record<string, string> = {
|
||||
[RDBMS_RV_SCREEN_UUID]: RDBMS_DV_SCREEN_UUID,
|
||||
};
|
||||
|
||||
// List screen → detail screen (tbl_appconfig_screens source_uuid).
|
||||
const SCREEN_TO_DETAIL_SCREEN: Record<string, string> = {
|
||||
[SCREEN_UUIDS.MY_INVOICES]: SCREEN_UUIDS.INVOICE_DETAIL,
|
||||
[SCREEN_UUIDS.PENDING_CLARIFICATIONS]: SCREEN_UUIDS.CLARIFICATION_DETAIL,
|
||||
[SCREEN_UUIDS.FINANCE_REVIEW]: SCREEN_UUIDS.FINANCE_REVIEW_DETAIL,
|
||||
[SCREEN_UUIDS.ALL_INVOICES]: SCREEN_UUIDS.INVOICE_DETAIL,
|
||||
};
|
||||
|
||||
const ACTIVITY_META: Record<string, { label: string; icon: React.ReactNode; style: "primary" | "danger" | "ghost" }> = {
|
||||
[ACTIVITY_IDS.PROVIDE_CLARIFICATION]: { label: "Provide Clarification", icon: <MessageSquare size={14} />, style: "primary" },
|
||||
[ACTIVITY_IDS.APPROVE_PAYMENT]: { label: "Approve", icon: <CheckCircle2 size={14} />, style: "primary" },
|
||||
[ACTIVITY_IDS.REJECT_PAYMENT]: { label: "Reject", icon: <XCircle size={14} />, style: "danger" },
|
||||
[ACTIVITY_IDS.HOLD_PAYMENT]: { label: "Hold", icon: <PauseCircle size={14} />, style: "ghost" },
|
||||
};
|
||||
|
||||
const BTN_STYLES: Record<string, string> = {
|
||||
primary: "text-white shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 hover:scale-[1.02]",
|
||||
danger: "text-red-600 dark:text-red-400 bg-white dark:bg-zinc-900 border border-red-200 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-950/30",
|
||||
ghost: "text-slate-600 dark:text-zinc-300 bg-white dark:bg-zinc-900 border border-slate-200 dark:border-zinc-700 hover:bg-slate-50 dark:hover:bg-zinc-800",
|
||||
};
|
||||
|
||||
export default function AppShell() {
|
||||
const navigate = useNavigate();
|
||||
const params = useParams();
|
||||
const screenIdParam = params.screenId ?? null;
|
||||
const instanceIdParam = params.instanceId;
|
||||
|
||||
const [activeScreenId, setActiveScreenId] = useState<string | null>(screenIdParam);
|
||||
const [layout, setLayout] = useState<LayoutElement[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
const [detailInstanceId, setDetailInstanceId] = useState<string | null>(instanceIdParam || null);
|
||||
const [detailViewId, setDetailViewId] = useState<string | null>(null);
|
||||
const [detailScreenLayout, setDetailScreenLayout] = useState<LayoutElement[] | null>(null);
|
||||
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const [formModal, setFormModal] = useState<{ activityId: string; instanceId: string; title: string } | null>(null);
|
||||
const [instanceState, setInstanceState] = useState<string | null>(null);
|
||||
const [audit, setAudit] = useState<AuditEntry[]>([]);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [navItems, setNavItems] = useState<NavItem[]>([]);
|
||||
|
||||
// Init
|
||||
useEffect(() => {
|
||||
if (!screenIdParam && !instanceIdParam) {
|
||||
getHeaderConfig("desktop").then((cfg) => {
|
||||
const items = cfg.components?.nav?.items ?? [];
|
||||
setNavItems(items);
|
||||
if (items.length > 0) handleNavigate(items[0].screen_uuid);
|
||||
}).catch(console.error).finally(() => setReady(true));
|
||||
} else {
|
||||
setReady(true);
|
||||
if (instanceIdParam && screenIdParam) {
|
||||
setDetailInstanceId(instanceIdParam);
|
||||
setDetailViewId(SCREEN_TO_DETAIL_SCREEN[screenIdParam] ?? RDBMS_DETAIL_SCREENS[screenIdParam] ?? SCREEN_UUIDS.INVOICE_DETAIL);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Sync detail state with URL params on browser back/forward
|
||||
useEffect(() => {
|
||||
if (!params.instanceId && detailInstanceId) {
|
||||
setDetailInstanceId(null);
|
||||
setDetailViewId(null);
|
||||
setDetailScreenLayout(null);
|
||||
setInstanceState(null);
|
||||
setAudit([]);
|
||||
} else if (params.instanceId && params.instanceId !== detailInstanceId) {
|
||||
setDetailInstanceId(params.instanceId);
|
||||
const sid = params.screenId ?? activeScreenId;
|
||||
if (sid) setDetailViewId(SCREEN_TO_DETAIL_SCREEN[sid] ?? RDBMS_DETAIL_SCREENS[sid] ?? SCREEN_UUIDS.INVOICE_DETAIL);
|
||||
}
|
||||
}, [params.instanceId]);
|
||||
|
||||
// Load screen layout (skip for RDBMS screens — rendered directly)
|
||||
useEffect(() => {
|
||||
if (!activeScreenId || detailInstanceId) return;
|
||||
if (RDBMS_SCREENS[activeScreenId]) { setLoading(false); return; }
|
||||
setLoading(true);
|
||||
getScreen(activeScreenId)
|
||||
.then((s) => setLayout(s.layout ?? []))
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false));
|
||||
}, [activeScreenId, detailInstanceId]);
|
||||
|
||||
// Load detail screen
|
||||
useEffect(() => {
|
||||
if (!detailViewId) return;
|
||||
getScreen(detailViewId)
|
||||
.then((s) => setDetailScreenLayout(s.layout ?? []))
|
||||
.catch(() => setDetailScreenLayout(null));
|
||||
}, [detailViewId]);
|
||||
|
||||
// Load instance state + audit
|
||||
useEffect(() => {
|
||||
if (!detailInstanceId) return;
|
||||
getInstance(WORKFLOW_ID, detailInstanceId)
|
||||
.then((inst) => setInstanceState(inst.current_state_id))
|
||||
.catch(() => {});
|
||||
getAuditLog(detailInstanceId).then(setAudit).catch(() => setAudit([]));
|
||||
}, [detailInstanceId]);
|
||||
|
||||
const handleNavigate = useCallback((id: string) => {
|
||||
setActiveScreenId(id); setDetailInstanceId(null); setDetailViewId(null);
|
||||
setDetailScreenLayout(null); setInstanceState(null); setAudit([]);
|
||||
if (RDBMS_SCREENS[id]) setLayout([]);
|
||||
navigate(`/screen/${id}`);
|
||||
}, [navigate]);
|
||||
|
||||
const handleRowClick = useCallback((instanceId: string) => {
|
||||
const dvScreenId = activeScreenId ? (SCREEN_TO_DETAIL_SCREEN[activeScreenId] ?? SCREEN_UUIDS.INVOICE_DETAIL) : SCREEN_UUIDS.INVOICE_DETAIL;
|
||||
setDetailInstanceId(instanceId);
|
||||
setDetailViewId(dvScreenId);
|
||||
navigate(`/screen/${activeScreenId}/detail/${instanceId}`);
|
||||
}, [activeScreenId, navigate]);
|
||||
|
||||
const handleBack = () => {
|
||||
setDetailInstanceId(null); setDetailViewId(null); setDetailScreenLayout(null);
|
||||
setInstanceState(null); setAudit([]);
|
||||
navigate(`/screen/${activeScreenId}`);
|
||||
};
|
||||
|
||||
const handleFormSuccess = () => {
|
||||
setFormModal(null);
|
||||
if (detailInstanceId) {
|
||||
const v = detailViewId; setDetailViewId(null); setTimeout(() => setDetailViewId(v), 50);
|
||||
getAuditLog(detailInstanceId).then(setAudit).catch(() => {});
|
||||
}
|
||||
};
|
||||
|
||||
const actions = (() => {
|
||||
if (!instanceState) return [];
|
||||
if (instanceState === STATE_IDS.AWAITING_CLARIFICATION) return [ACTIVITY_IDS.PROVIDE_CLARIFICATION];
|
||||
if (instanceState === STATE_IDS.FINANCE_REVIEW) return [ACTIVITY_IDS.APPROVE_PAYMENT, ACTIVITY_IDS.REJECT_PAYMENT, ACTIVITY_IDS.HOLD_PAYMENT];
|
||||
return [];
|
||||
})();
|
||||
|
||||
if (!ready) return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-zinc-950 flex justify-center items-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 size={22} className="animate-spin text-violet-500" />
|
||||
<span className="text-[12px] text-slate-400 dark:text-zinc-600">Loading…</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50/60 dark:bg-zinc-950">
|
||||
<DynamicHeader activeScreenId={activeScreenId} onNavigate={handleNavigate} onSidebarChange={setSidebarOpen} />
|
||||
|
||||
<main className={`transition-all duration-200 py-6 px-7 ${sidebarOpen ? "ml-60" : "ml-0"}`}>
|
||||
<div className="w-full max-w-7xl mx-auto">
|
||||
{detailInstanceId && detailViewId ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-1.5 text-[13px]">
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="text-slate-400 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 transition-colors font-medium"
|
||||
>
|
||||
{navItems.find(n => n.screen_uuid === activeScreenId)?.label ?? (activeScreenId ? RDBMS_SCREEN_LABELS[activeScreenId] : undefined) ?? "Invoices"}
|
||||
</button>
|
||||
<span className="text-slate-300 dark:text-zinc-700">/</span>
|
||||
<span className="text-slate-700 dark:text-zinc-200 font-medium truncate max-w-xs">
|
||||
{detailInstanceId}
|
||||
</span>
|
||||
</nav>
|
||||
{actions.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
{actions.map((id) => {
|
||||
const m = ACTIVITY_META[id];
|
||||
if (!m) return null;
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => setFormModal({ activityId: id, instanceId: detailInstanceId, title: m.label })}
|
||||
className={`h-8 px-3.5 text-[12px] font-semibold rounded-xl transition-all flex items-center gap-1.5 ${BTN_STYLES[m.style]}`}
|
||||
style={m.style === "primary" ? { background: "linear-gradient(135deg, #7c3aed, #a855f7)" } : {}}
|
||||
>
|
||||
{m.icon}{m.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{detailScreenLayout ? <ScreenRenderer layout={detailScreenLayout} instanceId={detailInstanceId} /> : <DetailViewPanel viewId={detailViewId} instanceId={detailInstanceId} />}
|
||||
|
||||
{audit.length > 0 && (
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-slate-100 dark:border-zinc-800 flex items-center gap-2.5">
|
||||
<div className="w-6 h-6 rounded-lg flex items-center justify-center"
|
||||
style={{ background: "rgba(124, 58, 237, 0.1)" }}>
|
||||
<Clock size={13} className="text-violet-600 dark:text-violet-400" />
|
||||
</div>
|
||||
<h3 className="text-[13px] font-semibold text-slate-700 dark:text-zinc-200">Activity Timeline</h3>
|
||||
<span className="text-[11px] text-slate-300 dark:text-zinc-600 font-medium">{audit.length} events</span>
|
||||
</div>
|
||||
<div className="px-5 py-4">
|
||||
<div className="relative pl-6">
|
||||
<div className="absolute left-[7px] top-2 bottom-2 w-px"
|
||||
style={{ background: "linear-gradient(to bottom, #7c3aed40, #a855f720, transparent)" }} />
|
||||
<div className="space-y-4">
|
||||
{audit.map((e, i) => {
|
||||
const isFirst = i === 0;
|
||||
const isLast = i === audit.length - 1;
|
||||
return (
|
||||
<div key={e.id} className="flex items-start gap-3 relative">
|
||||
<div
|
||||
className={`absolute -left-6 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-zinc-900 mt-0.5 shadow-sm ${
|
||||
isLast
|
||||
? "ring-2 ring-violet-200 dark:ring-violet-900"
|
||||
: isFirst
|
||||
? ""
|
||||
: ""
|
||||
}`}
|
||||
style={{
|
||||
background: isLast ? "#7c3aed" : isFirst ? "#10b981" : "#d1d5db",
|
||||
boxShadow: isLast ? "0 0 8px rgba(124, 58, 237, 0.5)" : undefined,
|
||||
}}
|
||||
/>
|
||||
<div className="flex-1 py-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-[13px] font-medium ${isLast ? "text-violet-700 dark:text-violet-300" : "text-slate-700 dark:text-zinc-200"}`}>
|
||||
{fmtAct(e.activity_id)}
|
||||
</span>
|
||||
{isLast && (
|
||||
<span className="text-[10px] font-semibold px-1.5 py-0.5 rounded-full"
|
||||
style={{ background: "rgba(124, 58, 237, 0.1)", color: "#7c3aed" }}>
|
||||
Latest
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[11px] text-slate-400 dark:text-zinc-500">
|
||||
{new Date(e.created_at).toLocaleString("en-IN", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : loading ? (
|
||||
<><DashboardStats /><TableSkeleton rows={6} cols={6} /></>
|
||||
) : activeScreenId && RDBMS_SCREENS[activeScreenId] ? (
|
||||
<RecordViewTable
|
||||
key={`rdbms-${activeScreenId}`}
|
||||
viewId={RDBMS_SCREENS[activeScreenId]}
|
||||
onRowClick={RDBMS_DETAIL_SCREENS[activeScreenId] ? (pkValue) => {
|
||||
setDetailInstanceId(pkValue);
|
||||
setDetailViewId(RDBMS_DETAIL_SCREENS[activeScreenId]);
|
||||
navigate(`/screen/${activeScreenId}/detail/${pkValue}`);
|
||||
} : undefined}
|
||||
/>
|
||||
) : layout.length > 0 ? (
|
||||
<><DashboardStats key={`stats-${activeScreenId}`} /><ScreenRenderer key={`screen-${activeScreenId}-${refreshKey}`} layout={layout} onRowClick={handleRowClick} onRefresh={() => setRefreshKey((k) => k + 1)} /></>
|
||||
) : (
|
||||
<div className="text-center py-20 text-sm text-slate-400 dark:text-zinc-600">Select a screen from the navigation</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{formModal && <FormModal activityId={formModal.activityId} instanceId={formModal.instanceId} title={formModal.title} onClose={() => setFormModal(null)} onSuccess={handleFormSuccess} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function fmtAct(id: string): string { return id.replace(/^p2p-act-/, "").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()); }
|
||||
84
src/components/DashboardStats.tsx
Normal file
84
src/components/DashboardStats.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { FileText, AlertCircle, Clock, CheckCircle2 } from "lucide-react";
|
||||
import { getRecordView, getRVScreen } from "../api/viewService";
|
||||
import { StatsSkeleton } from "./Skeleton";
|
||||
import { ALL_INVOICES_RV_SCREEN_UUID, RECORD_VIEW_IDS } from "../config";
|
||||
|
||||
const ALL_INVOICES_VIEW = ALL_INVOICES_RV_SCREEN_UUID;
|
||||
|
||||
interface Stats {
|
||||
total: number;
|
||||
pendingClarification: number;
|
||||
financeReview: number;
|
||||
approved: number;
|
||||
}
|
||||
|
||||
export default function DashboardStats() {
|
||||
const [stats, setStats] = useState<Stats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const rvScreen = await getRVScreen(ALL_INVOICES_VIEW);
|
||||
const id = rvScreen.rv_template_uid;
|
||||
const rvUid = RECORD_VIEW_IDS.ALL_INVOICES;
|
||||
|
||||
// Step 1: get exact total from pagination
|
||||
const countRes = await getRecordView(id, rvUid, { page: 1, limit: 1 });
|
||||
const total = countRes.pagination?.total_count ?? 0;
|
||||
|
||||
let pendingClarification = 0, financeReview = 0, approved = 0;
|
||||
|
||||
if (total > 0) {
|
||||
// Step 2: fetch all rows in one call using exact total as limit
|
||||
const allRes = await getRecordView(id, rvUid, { page: 1, limit: total });
|
||||
for (const row of allRes.data ?? []) {
|
||||
const state = String(row.current_state_name ?? "");
|
||||
if (state === "Awaiting Clarification") pendingClarification++;
|
||||
else if (state === "Finance Review") financeReview++;
|
||||
else if (state === "Approved") approved++;
|
||||
}
|
||||
}
|
||||
|
||||
setStats({ total, pendingClarification, financeReview, approved });
|
||||
} catch {
|
||||
setStats({ total: 0, pendingClarification: 0, financeReview: 0, approved: 0 });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
if (loading) return <StatsSkeleton />;
|
||||
if (!stats) return null;
|
||||
|
||||
const cards = [
|
||||
{ label: "Total Invoices", value: stats.total, icon: FileText, color: "text-slate-500 dark:text-zinc-400", bg: "bg-slate-100 dark:bg-zinc-800" },
|
||||
{ label: "Pending Clarification", value: stats.pendingClarification, icon: AlertCircle, color: "text-amber-600 dark:text-amber-400", bg: "bg-amber-50 dark:bg-amber-950/40" },
|
||||
{ label: "Finance Review", value: stats.financeReview, icon: Clock, color: "text-indigo-600 dark:text-indigo-400", bg: "bg-indigo-50 dark:bg-indigo-950/40" },
|
||||
{ label: "Approved", value: stats.approved, icon: CheckCircle2, color: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-50 dark:bg-emerald-950/40" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
|
||||
{cards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
return (
|
||||
<div key={card.label} className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 px-5 py-4 flex items-center gap-4">
|
||||
<div className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${card.bg}`}>
|
||||
<Icon size={16} className={card.color} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[22px] font-bold tabular-nums text-slate-900 dark:text-zinc-50 leading-none mb-0.5">
|
||||
{card.value}
|
||||
</div>
|
||||
<div className="text-[11px] text-slate-400 dark:text-zinc-500 truncate">{card.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
363
src/components/DetailViewPanel.tsx
Normal file
363
src/components/DetailViewPanel.tsx
Normal file
@ -0,0 +1,363 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { Hash, Calendar, Sparkles, TrendingUp, MessageSquare, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import { getDVScreen, getDetailView } from "../api/viewService";
|
||||
import { DetailSkeleton } from "./Skeleton";
|
||||
|
||||
interface Field { field_key: string; output_label: string; data_type: string }
|
||||
interface Props { viewId: number | string; instanceId: string }
|
||||
|
||||
type GroupKey = "hero" | "vendor" | "financial" | "dates" | "ai" | "general";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Classification
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function classify(key: string): GroupKey {
|
||||
const k = key.toLowerCase();
|
||||
if (["invoice_number", "invoice_no", "inv_number", "po_number", "po_no", "order_number"].includes(k)) return "hero";
|
||||
if (k.startsWith("ai_") || k.includes("recommendation") || k.includes("confidence") ||
|
||||
k.includes("clarification") || k.includes("analysis") || k.includes("risk") ||
|
||||
k.includes("anomal") || k.includes("match_summary") || k.includes("reasoning") ||
|
||||
k.includes("reviewer") || k.includes("rejection") || k.includes("hold_reason") ||
|
||||
k.includes("response_text") || k.includes("response_notes") ||
|
||||
k.includes("confirmed_quantity") || k === "target_department" ||
|
||||
k.includes("recommended_amount") || k.includes("approved_amount")) return "ai";
|
||||
if (k.startsWith("vendor") || k.startsWith("supplier") || k === "gstin" || k === "pan") return "vendor";
|
||||
if (["total_amount","tax_amount","net_amount","gross_amount","subtotal","discount",
|
||||
"tds","cgst","sgst","igst","cess","line_total","line_amount"].includes(k) ||
|
||||
["price","cost","payment"].some(x => k.includes(x))) return "financial";
|
||||
if (k.includes("date") || k.includes("due") || k.includes("delivery") || k.includes("expected") ||
|
||||
k === "period" || k === "financial_year") return "dates";
|
||||
return "general";
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Status
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const STATUS: Record<string, { pill: string; dot: string; bar: string; pulse?: boolean }> = {
|
||||
"Invoice Submitted": { pill: "text-sky-700 bg-sky-50 ring-sky-200 dark:text-sky-300 dark:bg-sky-950/50 dark:ring-sky-800/60", dot: "bg-sky-500", bar: "bg-sky-500" },
|
||||
"AI Analysis": { pill: "text-violet-700 bg-violet-50 ring-violet-200 dark:text-violet-300 dark:bg-violet-950/50 dark:ring-violet-800/60", dot: "bg-violet-500", bar: "bg-violet-500", pulse: true },
|
||||
"Awaiting Clarification": { pill: "text-amber-700 bg-amber-50 ring-amber-200 dark:text-amber-300 dark:bg-amber-950/50 dark:ring-amber-800/60", dot: "bg-amber-500", bar: "bg-amber-400" },
|
||||
"Finance Review": { pill: "text-indigo-700 bg-indigo-50 ring-indigo-200 dark:text-indigo-300 dark:bg-indigo-950/50 dark:ring-indigo-800/60", dot: "bg-indigo-500", bar: "bg-indigo-500" },
|
||||
"Approved": { pill: "text-emerald-700 bg-emerald-50 ring-emerald-200 dark:text-emerald-300 dark:bg-emerald-950/50 dark:ring-emerald-800/60", dot: "bg-emerald-500", bar: "bg-emerald-500" },
|
||||
"Rejected": { pill: "text-red-700 bg-red-50 ring-red-200 dark:text-red-300 dark:bg-red-950/50 dark:ring-red-800/60", dot: "bg-red-500", bar: "bg-red-500" },
|
||||
"On Hold": { pill: "text-slate-600 bg-slate-100 ring-slate-200 dark:text-zinc-400 dark:bg-zinc-800 dark:ring-zinc-700", dot: "bg-slate-400", bar: "bg-slate-400" },
|
||||
// PO statuses
|
||||
"Pending": { pill: "text-amber-700 bg-amber-50 ring-amber-200 dark:text-amber-300 dark:bg-amber-950/50 dark:ring-amber-800/60", dot: "bg-amber-500", bar: "bg-amber-400" },
|
||||
"Delivered": { pill: "text-sky-700 bg-sky-50 ring-sky-200 dark:text-sky-300 dark:bg-sky-950/50 dark:ring-sky-800/60", dot: "bg-sky-500", bar: "bg-sky-500" },
|
||||
"Cancelled": { pill: "text-red-700 bg-red-50 ring-red-200 dark:text-red-300 dark:bg-red-950/50 dark:ring-red-800/60", dot: "bg-red-500", bar: "bg-red-500" },
|
||||
};
|
||||
const DS: { pill: string; dot: string; bar: string; pulse?: boolean } = { pill: "text-slate-600 bg-slate-100 ring-slate-200 dark:text-zinc-400 dark:bg-zinc-800 dark:ring-zinc-700", dot: "bg-slate-400", bar: "bg-slate-300" };
|
||||
|
||||
// Fields that are raw JSON — don't render
|
||||
const SKIP_KEYS = new Set(["analysis_so_far"]);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function DetailViewPanel({ viewId, instanceId }: Props) {
|
||||
const [data, setData] = useState<Record<string, unknown> | null>(null);
|
||||
const [fields, setFields] = useState<Field[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!instanceId) return;
|
||||
setLoading(true); setError(null);
|
||||
getDVScreen(viewId)
|
||||
.then(dv => getDetailView(dv.dv_template_uid, instanceId))
|
||||
.catch(() => getDetailView(viewId, instanceId))
|
||||
.then(res => {
|
||||
setFields(res.config?.fields?.filter((f: any) => f.field_key !== "") ?? []);
|
||||
setData(res.data ?? {});
|
||||
})
|
||||
.catch((e: any) => setError(e.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [viewId, instanceId]);
|
||||
|
||||
if (loading) return <DetailSkeleton />;
|
||||
if (error) return <p className="text-sm text-red-500 dark:text-red-400">{error}</p>;
|
||||
if (!data || !fields.length) return null;
|
||||
|
||||
const sys = new Set(["instance_id", "current_state_name", "created_at", "updated_at", "po_status"]);
|
||||
const groups: Record<GroupKey, Field[]> = { hero: [], vendor: [], financial: [], dates: [], ai: [], general: [] };
|
||||
|
||||
for (const f of fields) {
|
||||
if (sys.has(f.field_key) || SKIP_KEYS.has(f.field_key)) continue;
|
||||
const v = data[f.field_key];
|
||||
const g = classify(f.field_key);
|
||||
if (g !== "hero" && (v == null || v === "")) continue;
|
||||
groups[g].push(f);
|
||||
}
|
||||
|
||||
const heroField = groups.hero[0];
|
||||
const heroValue = heroField ? String(data[heroField.field_key] ?? "") : "";
|
||||
const stateName = String(data.current_state_name ?? data.po_status ?? "");
|
||||
const sc = STATUS[stateName] ?? DS;
|
||||
|
||||
// Primary amount shown large in header, removed from financials grid
|
||||
const primaryF = groups.financial.find(f =>
|
||||
["total_amount","amount","net_amount","gross_amount"].includes(f.field_key.toLowerCase())
|
||||
);
|
||||
const primaryAmt = primaryF ? Number(data[primaryF.field_key] ?? 0) : null;
|
||||
const financials = groups.financial.filter(f => f !== primaryF);
|
||||
|
||||
// Vendor name for subtitle
|
||||
const vendorNameF = groups.vendor.find(f => f.field_key === "vendor_name");
|
||||
const vendorName = vendorNameF ? String(data.vendor_name ?? "") : "";
|
||||
|
||||
// Left columns: dates + general + vendor (compact metadata)
|
||||
const isPoView = !!data.po_status || !!data.po_number;
|
||||
const leftGroups = [
|
||||
{ label: isPoView ? "Order Details" : "Invoice Details", fields: [...groups.dates, ...groups.general] },
|
||||
{ label: "Vendor", fields: groups.vendor },
|
||||
].filter(g => g.fields.length > 0);
|
||||
|
||||
// AI fields: short = inline grid (includes confidence bar), long = full-width text blocks
|
||||
const isScore = (f: Field) => f.field_key.toLowerCase().includes("confidence") || f.field_key.toLowerCase().includes("score");
|
||||
const isLongText = (f: Field) => { const v = data[f.field_key]; return typeof v === "string" && v.length > 55; };
|
||||
|
||||
const aiShort = groups.ai.filter(f => isScore(f) || !isLongText(f));
|
||||
const aiLong = groups.ai.filter(f => !isScore(f) && isLongText(f));
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 overflow-hidden">
|
||||
|
||||
{/* Status bar */}
|
||||
<div className={`h-[3px] ${sc.bar}`} />
|
||||
|
||||
{/* ── Header ──────────────────────────────────────────────────── */}
|
||||
<div className="px-7 pt-5 pb-4 border-b border-slate-100 dark:border-zinc-800">
|
||||
|
||||
{/* Row 1: invoice number + status + amount */}
|
||||
<div className="flex items-start justify-between gap-6 mb-3">
|
||||
<div className="min-w-0 flex items-center gap-3 flex-wrap">
|
||||
{heroValue && (
|
||||
<h1 className="text-[20px] font-bold tracking-tight text-slate-900 dark:text-white leading-none">
|
||||
{heroValue}
|
||||
</h1>
|
||||
)}
|
||||
{stateName && (
|
||||
<span className={`inline-flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-1 rounded-full ring-1 shrink-0 ${sc.pill}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${sc.dot} ${sc.pulse ? "animate-pulse" : ""}`} />
|
||||
{stateName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{primaryAmt !== null && primaryAmt > 0 && (
|
||||
<div className="text-right shrink-0">
|
||||
<p className="text-[10px] font-medium text-slate-400 dark:text-zinc-600 mb-0.5 uppercase tracking-wider">Total Amount</p>
|
||||
<p className="text-[26px] font-bold tabular-nums text-slate-900 dark:text-white leading-none">
|
||||
{fmtCurrency(primaryAmt)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Row 2: vendor + meta chips */}
|
||||
<div className="flex items-center gap-3 flex-wrap text-[12px]">
|
||||
{vendorName && (
|
||||
<span className="font-medium text-slate-600 dark:text-zinc-300">{vendorName}</span>
|
||||
)}
|
||||
{vendorName && (data.created_at || data.instance_id) && (
|
||||
<span className="text-slate-200 dark:text-zinc-700">·</span>
|
||||
)}
|
||||
{data.created_at && (
|
||||
<span className="flex items-center gap-1 text-slate-400 dark:text-zinc-500">
|
||||
<Calendar size={11} />{fmtDate(String(data.created_at))}
|
||||
</span>
|
||||
)}
|
||||
{data.instance_id && (
|
||||
<span className="flex items-center gap-1 text-slate-400 dark:text-zinc-500 font-mono text-[11px]">
|
||||
<Hash size={10} />{String(data.instance_id).slice(0, 16)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Two-column metadata ──────────────────────────────────────── */}
|
||||
{(leftGroups.length > 0 || financials.length > 0) && (
|
||||
<div className="grid lg:grid-cols-[3fr_2fr] divide-y lg:divide-y-0 lg:divide-x divide-slate-100 dark:divide-zinc-800 border-b border-slate-100 dark:border-zinc-800">
|
||||
|
||||
{/* Left — invoice details + vendor */}
|
||||
<div className="px-7 py-5 space-y-6">
|
||||
{leftGroups.map(({ label, fields: fs }) => (
|
||||
<section key={label}>
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-zinc-600 mb-3">{label}</p>
|
||||
<dl className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
{fs.map(f => (
|
||||
<div key={f.field_key}>
|
||||
<dt className="text-[11px] text-slate-400 dark:text-zinc-500 mb-0.5">{fmtLabel(f.output_label)}</dt>
|
||||
<dd className="text-[14px] font-medium text-slate-900 dark:text-zinc-100">
|
||||
{fmtVal(data[f.field_key], f.data_type, f.field_key)}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right — financials */}
|
||||
<div className="px-6 py-5">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-zinc-600 mb-3">Financials</p>
|
||||
{financials.length > 0 ? (
|
||||
<div>
|
||||
{financials
|
||||
.filter(f => !f.field_key.toLowerCase().includes("total") && !f.field_key.toLowerCase().includes("net"))
|
||||
.map(f => {
|
||||
const n = Number(data[f.field_key] ?? 0);
|
||||
return (
|
||||
<div key={f.field_key} className="flex justify-between py-2.5 border-b border-slate-50 dark:border-zinc-800/50">
|
||||
<span className="text-[13px] text-slate-500 dark:text-zinc-400">{fmtLabel(f.output_label)}</span>
|
||||
<span className="text-[13px] tabular-nums text-slate-700 dark:text-zinc-200">{n ? fmtCurrency(n) : "—"}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{financials
|
||||
.filter(f => f.field_key.toLowerCase().includes("total") || f.field_key.toLowerCase().includes("net"))
|
||||
.map(f => {
|
||||
const n = Number(data[f.field_key] ?? 0);
|
||||
return (
|
||||
<div key={f.field_key} className="flex justify-between pt-3 mt-1">
|
||||
<span className="text-[13px] font-semibold text-slate-700 dark:text-zinc-200 flex items-center gap-1.5">
|
||||
<TrendingUp size={12} className="text-emerald-500" />{fmtLabel(f.output_label)}
|
||||
</span>
|
||||
<span className="text-[15px] font-bold tabular-nums text-slate-900 dark:text-white">{n ? fmtCurrency(n) : "—"}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[13px] text-slate-300 dark:text-zinc-700">—</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── AI Analysis — full width ─────────────────────────────────── */}
|
||||
{groups.ai.length > 0 && (
|
||||
<div className="px-7 py-5">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-zinc-600 mb-4 flex items-center gap-1.5">
|
||||
<Sparkles size={10} className="text-violet-500" />AI Analysis
|
||||
</p>
|
||||
|
||||
{/* Short fields + confidence bars — inline grid */}
|
||||
{aiShort.length > 0 && (
|
||||
<dl className="grid grid-cols-2 sm:grid-cols-3 gap-x-8 gap-y-5 mb-5">
|
||||
{aiShort.map(f => {
|
||||
const val = data[f.field_key];
|
||||
const score = isScore(f);
|
||||
const num = score ? Number(val) : null;
|
||||
const pct = num !== null ? Math.min(num > 1 ? num : num * 100, 100) : 0;
|
||||
const barCls = pct >= 70 ? "bg-emerald-500" : pct >= 40 ? "bg-amber-500" : "bg-red-500";
|
||||
const pctCls = pct >= 70 ? "text-emerald-600 dark:text-emerald-400" : pct >= 40 ? "text-amber-600 dark:text-amber-400" : "text-red-500";
|
||||
return (
|
||||
<div key={f.field_key}>
|
||||
<dt className="text-[11px] text-slate-400 dark:text-zinc-500 mb-1">{fmtLabel(f.output_label)}</dt>
|
||||
{score && num !== null ? (
|
||||
<dd className="flex items-center gap-2.5">
|
||||
<div className="flex-1 h-1.5 bg-slate-100 dark:bg-zinc-800 rounded-full overflow-hidden">
|
||||
<div className={`h-full rounded-full ${barCls}`} style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<span className={`text-[12px] font-bold tabular-nums w-8 text-right ${pctCls}`}>{pct.toFixed(0)}%</span>
|
||||
</dd>
|
||||
) : (
|
||||
<dd className="text-[14px] font-semibold text-slate-900 dark:text-zinc-100">
|
||||
{fmtVal(val, f.data_type, f.field_key)}
|
||||
</dd>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</dl>
|
||||
)}
|
||||
|
||||
{/* Long text fields — full-width clamped paragraphs */}
|
||||
{aiLong.length > 0 && (
|
||||
<div className="space-y-4 border-t border-slate-100 dark:border-zinc-800 pt-4">
|
||||
{aiLong.map(f => {
|
||||
const val = data[f.field_key];
|
||||
const isClarif = f.field_key.includes("clarification") || f.field_key.includes("response");
|
||||
return (
|
||||
<div key={f.field_key} className="border-b border-slate-50 dark:border-zinc-800/50 pb-4 last:border-0 last:pb-0">
|
||||
<div className="flex items-center gap-1.5 mb-1.5">
|
||||
{isClarif && <MessageSquare size={11} className="text-amber-400 shrink-0" />}
|
||||
<span className="text-[11px] font-medium text-slate-400 dark:text-zinc-500">{fmtLabel(f.output_label)}</span>
|
||||
</div>
|
||||
<ClampedText text={String(val ?? "—")} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// ClampedText — show 3 lines, expand on demand
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function ClampedText({ text }: { text: string }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [clamped, setClamped] = useState(false);
|
||||
const ref = useRef<HTMLParagraphElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (el) setClamped(el.scrollHeight > el.clientHeight + 2);
|
||||
}, [text]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p
|
||||
ref={ref}
|
||||
className={`text-[13px] leading-relaxed text-slate-700 dark:text-zinc-200 transition-all ${expanded ? "" : "line-clamp-3"}`}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
{(clamped || expanded) && (
|
||||
<button
|
||||
onClick={() => setExpanded(e => !e)}
|
||||
className="mt-1.5 flex items-center gap-1 text-[11px] font-semibold text-violet-600 dark:text-violet-400 hover:text-violet-700 dark:hover:text-violet-300 transition-colors"
|
||||
>
|
||||
{expanded ? <><ChevronUp size={12} /> Show less</> : <><ChevronDown size={12} /> Show more</>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function fmtLabel(label: string): string {
|
||||
return label.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase());
|
||||
}
|
||||
|
||||
function fmtVal(val: unknown, type: string, key: string): string {
|
||||
if (val == null || val === "") return "—";
|
||||
if (type === "number") {
|
||||
const n = Number(val);
|
||||
if (["amount","tax","price","cost"].some(x => key.toLowerCase().includes(x))) return fmtCurrency(n);
|
||||
return n.toLocaleString("en-IN");
|
||||
}
|
||||
if (type === "datetime" || type === "date") return fmtDate(String(val));
|
||||
return String(val);
|
||||
}
|
||||
|
||||
function fmtCurrency(n: number): string {
|
||||
return n.toLocaleString("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 });
|
||||
}
|
||||
|
||||
function fmtDate(val: string): string {
|
||||
try { return new Date(val).toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" }); }
|
||||
catch { return val; }
|
||||
}
|
||||
251
src/components/DynamicHeader.tsx
Normal file
251
src/components/DynamicHeader.tsx
Normal file
@ -0,0 +1,251 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
LogOut, FileText, HelpCircle, Landmark, List,
|
||||
Settings, PanelLeftClose, PanelLeftOpen, Sun, Moon, ShoppingCart,
|
||||
} from "lucide-react";
|
||||
import { getHeaderConfig, type HeaderConfig, type NavItem } from "../api/viewService";
|
||||
import { useAuthContext } from "../hooks/AuthContext";
|
||||
import { useTheme } from "../hooks/ThemeContext";
|
||||
import { RDBMS_RV_SCREEN_UUID } from "../config";
|
||||
|
||||
const ICON_MAP: Record<string, React.ReactNode> = {
|
||||
receipt_long: <FileText size={16} />,
|
||||
help_outline: <HelpCircle size={16} />,
|
||||
account_balance: <Landmark size={16} />,
|
||||
list_alt: <List size={16} />,
|
||||
inventory_2: <FileText size={16} />,
|
||||
question_mark: <HelpCircle size={16} />,
|
||||
list: <List size={16} />,
|
||||
};
|
||||
|
||||
const EXTRA_NAV_ITEMS = [
|
||||
{ id: "vendor-data", screen_uuid: RDBMS_RV_SCREEN_UUID, label: "Purchase Orders", icon: <ShoppingCart size={16} /> },
|
||||
];
|
||||
|
||||
interface Props {
|
||||
activeScreenId: string | null;
|
||||
onNavigate: (screenUuid: string) => void;
|
||||
onSidebarChange?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export default function DynamicHeader({ activeScreenId, onNavigate, onSidebarChange }: Props) {
|
||||
const { user, logout } = useAuthContext();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [config, setConfig] = useState<HeaderConfig | null>(null);
|
||||
const [profileOpen, setProfileOpen] = useState(false);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
getHeaderConfig("desktop").then(setConfig).catch(console.error);
|
||||
}, []);
|
||||
|
||||
const navItems = config?.components?.nav?.items ?? [];
|
||||
const handleLogout = () => { logout(); navigate("/login"); };
|
||||
|
||||
const initials = (user?.name || "U")
|
||||
.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
|
||||
const roleName = user?.roles?.[0]
|
||||
?.replace(/^p2p_/, "").replace(/_/g, " ") ?? "";
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const next = !sidebarOpen;
|
||||
setSidebarOpen(next);
|
||||
onSidebarChange?.(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── Top bar ─────────────────────────────────────────────────────── */}
|
||||
<header className="bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md border-b border-slate-200/70 dark:border-zinc-800/70 sticky top-0 z-50 h-14 flex items-center px-4 justify-between">
|
||||
{/* Left */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-slate-700 dark:hover:text-zinc-200 hover:bg-slate-100 dark:hover:bg-zinc-800 transition-colors"
|
||||
>
|
||||
{sidebarOpen ? <PanelLeftClose size={17} /> : <PanelLeftOpen size={17} />}
|
||||
</button>
|
||||
|
||||
{/* Logo — unchanged from original */}
|
||||
<img
|
||||
src={import.meta.env.BASE_URL + "zino.svg"}
|
||||
alt="Zino"
|
||||
className="h-5 w-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* Theme toggle */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
title={theme === "dark" ? "Switch to light" : "Switch to dark"}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-950/40 transition-colors"
|
||||
>
|
||||
{theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
|
||||
</button>
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setProfileOpen(!profileOpen)}
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center ring-2 ring-white dark:ring-zinc-900 shadow-sm hover:ring-violet-200 dark:hover:ring-violet-800 transition-all"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #d946ef)" }}
|
||||
>
|
||||
<span className="text-[11px] font-bold text-white leading-none">{initials}</span>
|
||||
</button>
|
||||
|
||||
{profileOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={() => setProfileOpen(false)} />
|
||||
<div className="absolute right-0 top-full mt-2 w-60 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl shadow-slate-900/10 dark:shadow-black/40 border border-slate-200 dark:border-zinc-700/70 overflow-hidden z-50">
|
||||
<div className="px-4 py-3.5 border-b border-slate-100 dark:border-zinc-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #d946ef)" }}>
|
||||
<span className="text-[13px] font-bold text-white leading-none">{initials}</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] font-semibold text-slate-900 dark:text-zinc-100 truncate">{user?.name}</div>
|
||||
<div className="text-[11px] text-slate-400 dark:text-zinc-500 truncate">{user?.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
{roleName && (
|
||||
<div className="mt-2.5">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full capitalize"
|
||||
style={{ background: "rgba(124,58,237,0.1)", color: "#7c3aed", border: "1px solid rgba(124,58,237,0.2)" }}>
|
||||
{roleName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-1">
|
||||
<button className="w-full text-left px-4 py-2.5 text-[13px] text-slate-600 dark:text-zinc-300 hover:bg-slate-50 dark:hover:bg-zinc-800 flex items-center gap-2.5 transition-colors">
|
||||
<Settings size={14} className="text-slate-400 dark:text-zinc-500" /> Settings
|
||||
</button>
|
||||
<div className="h-px bg-slate-100 dark:bg-zinc-800 mx-3 my-0.5" />
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full text-left px-4 py-2.5 text-[13px] text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 flex items-center gap-2.5 transition-colors"
|
||||
>
|
||||
<LogOut size={14} /> Sign out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Sidebar ─────────────────────────────────────────────────────── */}
|
||||
<aside
|
||||
className={`fixed top-14 left-0 bottom-0 z-40 flex flex-col transition-all duration-200 ${sidebarOpen ? "w-60" : "w-0 overflow-hidden"}`}
|
||||
style={{
|
||||
background: "linear-gradient(180deg, #faf9ff 0%, #f5f3ff 100%)",
|
||||
}}
|
||||
>
|
||||
{/* Dark mode override via class */}
|
||||
<div className="flex flex-col h-full dark:bg-zinc-950 border-r border-violet-100 dark:border-zinc-800/80">
|
||||
|
||||
{/* App identity strip */}
|
||||
<div className="px-5 pt-5 pb-4 border-b border-violet-100/60 dark:border-zinc-800/60">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
<FileText size={13} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[13px] font-bold text-slate-800 dark:text-zinc-100 leading-none">Invoice Portal</div>
|
||||
<div className="text-[10px] text-slate-400 dark:text-zinc-600 mt-0.5">P2P · Procure-to-Pay</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nav section */}
|
||||
<div className="flex-1 overflow-y-auto px-3 py-3">
|
||||
<div className="text-[10px] font-bold text-slate-400 dark:text-zinc-600 uppercase tracking-widest px-2 mb-2">
|
||||
Navigation
|
||||
</div>
|
||||
<nav className="space-y-0.5">
|
||||
{navItems.map((item: NavItem) => {
|
||||
const active = activeScreenId === item.screen_uuid;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onNavigate(item.screen_uuid)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[13px] font-medium transition-all group ${
|
||||
active
|
||||
? "bg-violet-100 dark:bg-violet-950/50 text-violet-700 dark:text-violet-300"
|
||||
: "text-slate-500 dark:text-zinc-400 hover:bg-white dark:hover:bg-zinc-800/70 hover:text-slate-900 dark:hover:text-zinc-100"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`flex items-center justify-center w-7 h-7 rounded-lg shrink-0 transition-colors ${
|
||||
active
|
||||
? "bg-violet-200/70 dark:bg-violet-900/60 text-violet-600 dark:text-violet-400"
|
||||
: "bg-white dark:bg-zinc-800 text-slate-400 dark:text-zinc-500 shadow-sm group-hover:text-violet-600 dark:group-hover:text-violet-400"
|
||||
}`}
|
||||
>
|
||||
{ICON_MAP[item.icon] ?? <FileText size={16} />}
|
||||
</span>
|
||||
<span className="truncate">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{EXTRA_NAV_ITEMS.map((item) => {
|
||||
const active = activeScreenId === item.screen_uuid;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onNavigate(item.screen_uuid)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[13px] font-medium transition-all group ${
|
||||
active
|
||||
? "bg-violet-100 dark:bg-violet-950/50 text-violet-700 dark:text-violet-300"
|
||||
: "text-slate-500 dark:text-zinc-400 hover:bg-white dark:hover:bg-zinc-800/70 hover:text-slate-900 dark:hover:text-zinc-100"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`flex items-center justify-center w-7 h-7 rounded-lg shrink-0 transition-colors ${
|
||||
active
|
||||
? "bg-violet-200/70 dark:bg-violet-900/60 text-violet-600 dark:text-violet-400"
|
||||
: "bg-white dark:bg-zinc-800 text-slate-400 dark:text-zinc-500 shadow-sm group-hover:text-violet-600 dark:group-hover:text-violet-400"
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="truncate">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Bottom — user card */}
|
||||
<div className="px-3 py-3 border-t border-violet-100/60 dark:border-zinc-800/60">
|
||||
<div className="flex items-center gap-2.5 px-2 py-2 rounded-xl hover:bg-white dark:hover:bg-zinc-800/70 transition-colors cursor-pointer group"
|
||||
onClick={handleLogout}
|
||||
title="Sign out"
|
||||
>
|
||||
<div
|
||||
className="w-7 h-7 rounded-full flex items-center justify-center shrink-0 text-[11px] font-bold text-white"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #d946ef)" }}
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[12px] font-semibold text-slate-700 dark:text-zinc-200 truncate leading-none">{user?.name}</div>
|
||||
<div className="text-[10px] text-slate-400 dark:text-zinc-500 truncate mt-0.5 capitalize">{roleName}</div>
|
||||
</div>
|
||||
<LogOut size={13} className="text-slate-300 dark:text-zinc-600 group-hover:text-red-400 transition-colors shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
257
src/components/FormModal.tsx
Normal file
257
src/components/FormModal.tsx
Normal file
@ -0,0 +1,257 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { X, ArrowRight, AlertCircle, CheckCircle2, ChevronDown } from "lucide-react";
|
||||
import { getFormScreen, startWorkflow, performActivity } from "../api/viewService";
|
||||
import { WORKFLOW_ID } from "../config";
|
||||
import { Skeleton } from "./Skeleton";
|
||||
|
||||
interface FormField { id: string; uid: string; name: string; type: string; data_type: string; mandatory: boolean; value?: any; properties?: { options?: Array<{ label: string; value: string }>; country_code?: string }; }
|
||||
interface GridItem { i: string; x: number; y: number; w: number; h: number; }
|
||||
|
||||
interface Props {
|
||||
activityId: string;
|
||||
instanceId?: string;
|
||||
title?: string;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export default function FormModal({ activityId, instanceId, title, onClose, onSuccess }: Props) {
|
||||
const [fields, setFields] = useState<FormField[]>([]);
|
||||
const [gridConfig, setGridConfig] = useState<GridItem[]>([]);
|
||||
const [formTitle, setFormTitle] = useState(title || "");
|
||||
const [formData, setFormData] = useState<Record<string, string>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [touched, setTouched] = useState<Set<string>>(new Set());
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Entrance animation
|
||||
useEffect(() => { requestAnimationFrame(() => setVisible(true)); }, []);
|
||||
|
||||
useEffect(() => {
|
||||
getFormScreen(activityId, instanceId)
|
||||
.then((res: any) => {
|
||||
const f: FormField[] = res.fields ?? res.form_json?.fields ?? [];
|
||||
setFields(f);
|
||||
setGridConfig(res.grid_config ?? []);
|
||||
setFormTitle(res.activity_name || title || "Form");
|
||||
const pre: Record<string, string> = {};
|
||||
f.forEach((field) => { if (field.value != null) pre[field.id] = String(field.value); });
|
||||
setFormData(pre);
|
||||
})
|
||||
.catch((err: any) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [activityId, instanceId, title]);
|
||||
|
||||
const animateClose = (callback: () => void) => {
|
||||
setVisible(false);
|
||||
setTimeout(callback, 200);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setTouched(new Set(fields.map((f) => f.id)));
|
||||
|
||||
const missing = fields.filter((f) => f.mandatory && !formData[f.id]?.trim());
|
||||
if (missing.length > 0) {
|
||||
setError(`Please fill in: ${missing.map((f) => f.name).join(", ")}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true); setError(null);
|
||||
try {
|
||||
const data: Record<string, unknown> = {};
|
||||
for (const f of fields) { const v = formData[f.id] ?? ""; data[f.id] = f.data_type === "number" ? (v ? Number(v) : 0) : v; }
|
||||
instanceId ? await performActivity(WORKFLOW_ID, instanceId, activityId, data) : await startWorkflow(WORKFLOW_ID, activityId, data);
|
||||
setSuccess(true);
|
||||
setTimeout(() => animateClose(onSuccess), 800);
|
||||
} catch (err: any) { setError(err.message || "Failed"); }
|
||||
finally { setSubmitting(false); }
|
||||
};
|
||||
|
||||
const sorted = [...fields].sort((a, b) => {
|
||||
const ga = gridConfig.find((g) => g.i === a.uid), gb = gridConfig.find((g) => g.i === b.uid);
|
||||
if (!ga || !gb) return 0;
|
||||
return ga.y !== gb.y ? ga.y - gb.y : ga.x - gb.x;
|
||||
});
|
||||
|
||||
const rows: FormField[][] = []; let cy = -1;
|
||||
for (const f of sorted) { const g = gridConfig.find((gi) => gi.i === f.uid); const y = g?.y ?? rows.length; if (y !== cy) { rows.push([]); cy = y; } rows[rows.length - 1].push(f); }
|
||||
|
||||
const isMissing = (f: FormField) => f.mandatory && touched.has(f.id) && !formData[f.id]?.trim();
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center" onClick={() => animateClose(onClose)}>
|
||||
{/* Backdrop */}
|
||||
<div className={`absolute inset-0 bg-slate-900/50 dark:bg-black/60 backdrop-blur-[2px] transition-opacity duration-200 ${visible ? "opacity-100" : "opacity-0"}`} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
ref={modalRef}
|
||||
className={`relative bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl shadow-slate-900/10 dark:shadow-black/50 border border-slate-200/0 dark:border-zinc-700/60 w-full max-w-xl mx-4 max-h-[90vh] flex flex-col transition-all duration-200 ${visible ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* ── Success overlay ──────────────────────────────────────────── */}
|
||||
{success && (
|
||||
<div className="absolute inset-0 z-10 bg-white/95 dark:bg-zinc-900/95 rounded-2xl flex flex-col items-center justify-center gap-3">
|
||||
<div className="w-12 h-12 rounded-full bg-emerald-50 dark:bg-emerald-950/40 flex items-center justify-center">
|
||||
<CheckCircle2 size={24} className="text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-[14px] font-semibold text-slate-800 dark:text-zinc-100">Submitted successfully</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Header ───────────────────────────────────────────────────── */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-zinc-800">
|
||||
<div>
|
||||
<h2 className="text-[15px] font-semibold text-slate-900 dark:text-zinc-100">{formTitle}</h2>
|
||||
<p className="text-[12px] text-slate-400 dark:text-zinc-500 mt-0.5">
|
||||
{instanceId ? "Update the details below" : "Fill in the details to submit"}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => animateClose(onClose)}
|
||||
className="w-8 h-8 flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-slate-600 dark:hover:text-zinc-200 hover:bg-slate-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Body ─────────────────────────────────────────────────────── */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5">
|
||||
{loading ? (
|
||||
<div className="space-y-5">
|
||||
{[0, 1, 2, 3].map((r) => (
|
||||
<div key={r} className="grid grid-cols-2 gap-4">
|
||||
<div><Skeleton className="h-3 w-20 mb-2" /><Skeleton className="h-10 w-full rounded-lg" /></div>
|
||||
<div><Skeleton className="h-3 w-24 mb-2" /><Skeleton className="h-10 w-full rounded-lg" /></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<form id="act-form" onSubmit={handleSubmit} className="space-y-5">
|
||||
{rows.map((row, ri) => (
|
||||
<div key={ri} className={`grid gap-4 ${row.length > 1 ? "grid-cols-2" : "grid-cols-1"}`}>
|
||||
{row.map((f) => (
|
||||
<div key={f.id}>
|
||||
<label className="block text-[12px] font-medium text-slate-500 dark:text-zinc-400 mb-1.5">
|
||||
{f.name}
|
||||
{f.mandatory && <span className="text-red-400 ml-0.5">*</span>}
|
||||
</label>
|
||||
{renderInput(f, formData[f.id] ?? "", (v) => {
|
||||
setFormData((p) => ({ ...p, [f.id]: v }));
|
||||
setTouched((t) => new Set(t).add(f.id));
|
||||
if (error) setError(null);
|
||||
}, isMissing(f))}
|
||||
{isMissing(f) && (
|
||||
<p className="text-[11px] text-red-500 mt-1 flex items-center gap-1">
|
||||
<AlertCircle size={11} /> Required
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</form>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 flex items-start gap-2.5 text-[13px] text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 rounded-xl px-4 py-3 border border-red-100 dark:border-red-900">
|
||||
<AlertCircle size={15} className="shrink-0 mt-0.5" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Footer ───────────────────────────────────────────────────── */}
|
||||
{!loading && (
|
||||
<div className="px-6 py-4 border-t border-slate-100 dark:border-zinc-800 flex items-center justify-between">
|
||||
<div className="text-[11px] text-slate-400 dark:text-zinc-500">
|
||||
<span className="text-red-400">*</span> Required
|
||||
</div>
|
||||
<div className="flex gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => animateClose(onClose)}
|
||||
className="h-9 px-4 text-[13px] font-medium text-slate-500 dark:text-zinc-400 hover:text-slate-700 dark:hover:text-zinc-200 hover:bg-slate-50 dark:hover:bg-zinc-800 rounded-xl transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
form="act-form"
|
||||
disabled={submitting}
|
||||
className="h-9 px-5 text-[13px] font-semibold text-white disabled:opacity-50 rounded-xl transition-all flex items-center gap-1.5 shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 hover:scale-[1.02] active:scale-[0.98]"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
{submitting ? (
|
||||
<><div className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Submitting…</>
|
||||
) : (
|
||||
<>{instanceId ? "Update" : "Submit"} <ArrowRight size={14} /></>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Input renderer
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function renderInput(f: FormField, value: string, onChange: (v: string) => void, hasError: boolean) {
|
||||
const base = `w-full h-10 border rounded-xl px-3.5 text-[13px] bg-slate-50/50 dark:bg-zinc-800/70 focus:bg-white dark:focus:bg-zinc-800 text-slate-800 dark:text-zinc-100 focus:outline-none focus:ring-2 transition placeholder:text-slate-400 dark:placeholder:text-zinc-600 ${
|
||||
hasError
|
||||
? "border-red-300 dark:border-red-700 focus:ring-red-500/20 focus:border-red-400"
|
||||
: "border-slate-200 dark:border-zinc-700 focus:ring-violet-500/20 focus:border-violet-400 dark:focus:border-violet-500"
|
||||
}`;
|
||||
|
||||
// Select / radio with options
|
||||
const opts = f.properties?.options;
|
||||
if (opts && opts.length > 0) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={`${base} appearance-none pr-9 cursor-pointer`}
|
||||
>
|
||||
<option value="">Select {f.name.toLowerCase()}</option>
|
||||
{opts.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
switch (f.data_type) {
|
||||
case "longtext":
|
||||
return (
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
rows={3}
|
||||
className={`${base} h-auto py-2.5 rounded-xl`}
|
||||
placeholder={`Enter ${f.name.toLowerCase()}`}
|
||||
/>
|
||||
);
|
||||
case "number":
|
||||
return <input type="number" step="any" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder="0" />;
|
||||
case "date":
|
||||
return <input type="date" value={value} onChange={(e) => onChange(e.target.value)} className={base} />;
|
||||
case "email":
|
||||
return <input type="email" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
|
||||
case "phone":
|
||||
return <input type="tel" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
|
||||
default:
|
||||
return <input type="text" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
|
||||
}
|
||||
}
|
||||
13
src/components/ProtectedRoute.tsx
Normal file
13
src/components/ProtectedRoute.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { Navigate, useLocation } from "react-router-dom";
|
||||
import { useAuthContext } from "../hooks/AuthContext";
|
||||
|
||||
export function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated } = useAuthContext();
|
||||
const location = useLocation();
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/login" state={{ from: location }} replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
498
src/components/RecordViewTable.tsx
Normal file
498
src/components/RecordViewTable.tsx
Normal file
@ -0,0 +1,498 @@
|
||||
import { useEffect, useState, useCallback, useRef } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
ChevronLeft, ChevronRight, Search, ArrowUp, ArrowDown,
|
||||
X, CheckCircle2, XCircle, PauseCircle, MessageSquare,
|
||||
Inbox, MoreHorizontal, ArrowRight, RefreshCw,
|
||||
} from "lucide-react";
|
||||
import { getRVScreen, getRecordView, type RecordViewField, type SearchQuery } from "../api/viewService";
|
||||
import { TableSkeleton } from "./Skeleton";
|
||||
import FormModal from "./FormModal";
|
||||
import { STATE_IDS, ACTIVITY_IDS } from "../config";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Row actions by state
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const ROW_ACTIONS: Record<string, Array<{ activityId: string; label: string; icon: React.ReactNode }>> = {
|
||||
[STATE_IDS.AWAITING_CLARIFICATION]: [
|
||||
{ activityId: ACTIVITY_IDS.PROVIDE_CLARIFICATION, label: "Clarify", icon: <MessageSquare size={13} /> },
|
||||
],
|
||||
[STATE_IDS.FINANCE_REVIEW]: [
|
||||
{ activityId: ACTIVITY_IDS.APPROVE_PAYMENT, label: "Approve", icon: <CheckCircle2 size={13} /> },
|
||||
{ activityId: ACTIVITY_IDS.REJECT_PAYMENT, label: "Reject", icon: <XCircle size={13} /> },
|
||||
{ activityId: ACTIVITY_IDS.HOLD_PAYMENT, label: "Hold", icon: <PauseCircle size={13} /> },
|
||||
],
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface Props {
|
||||
viewId: number | string;
|
||||
onRowClick?: (instanceId: string) => void;
|
||||
toolbarAction?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function RecordViewTable({ viewId, onRowClick, toolbarAction }: Props) {
|
||||
const navigate = useNavigate();
|
||||
const [rvTemplateId, setRvTemplateId] = useState<string | null>(null);
|
||||
const [fields, setFields] = useState<RecordViewField[]>([]);
|
||||
const [rows, setRows] = useState<Record<string, unknown>[]>([]);
|
||||
const [pagination, setPagination] = useState({ page: 1, limit: 10, total_count: 0, total_pages: 0 });
|
||||
const [query, setQuery] = useState<SearchQuery>({ page: 1, limit: 10, sort_dir: "desc" });
|
||||
const [searchInput, setSearchInput] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dataLoading, setDataLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [formModal, setFormModal] = useState<{ activityId: string; instanceId: string; title: string } | null>(null);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
getRVScreen(viewId)
|
||||
.then((rv) => setRvTemplateId(rv.rv_template_uid))
|
||||
.catch((err) => { setError(err.message); setLoading(false); });
|
||||
}, [viewId]);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
if (!rvTemplateId) return;
|
||||
if (!loading) setDataLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await getRecordView(rvTemplateId, String(viewId), query);
|
||||
setFields(res.config.fields.filter((f) => f.field_key !== ""));
|
||||
const dataRows = Array.isArray(res.data) ? res.data : [];
|
||||
setRows(dataRows);
|
||||
if (res.pagination) {
|
||||
setPagination(res.pagination);
|
||||
} else {
|
||||
// RDBMS views return all rows without a pagination envelope
|
||||
setPagination((p) => ({ ...p, total_count: dataRows.length, total_pages: Math.ceil(dataRows.length / p.limit) || 1 }));
|
||||
}
|
||||
} catch (err: any) { setError(err.message); }
|
||||
finally { setLoading(false); setDataLoading(false); }
|
||||
}, [rvTemplateId, viewId, query]);
|
||||
|
||||
useEffect(() => { fetchData(); }, [fetchData]);
|
||||
|
||||
const handleSort = (key: string) => setQuery((q) => ({
|
||||
...q, page: 1, sort_by: key,
|
||||
sort_dir: q.sort_by === key && q.sort_dir === "asc" ? "desc" : "asc",
|
||||
}));
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setQuery((q) => ({ ...q, page: 1, search: searchInput }));
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearchInput("");
|
||||
setQuery((q) => ({ ...q, page: 1, search: "" }));
|
||||
};
|
||||
|
||||
const handlePage = (p: number) => setQuery((q) => ({ ...q, page: p }));
|
||||
|
||||
const handleRowClick = (row: Record<string, unknown>) => {
|
||||
const id = String(row.instance_id ?? row._pk_value ?? "");
|
||||
if (!id) return;
|
||||
onRowClick ? onRowClick(id) : navigate(`/detail/${id}`);
|
||||
};
|
||||
|
||||
if (loading) return <TableSkeleton rows={6} cols={fields.length || 6} />;
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-red-100 dark:border-red-900/50 bg-red-50/50 dark:bg-red-950/20 p-10 text-center">
|
||||
<p className="text-sm text-red-600 dark:text-red-400 mb-2">{error}</p>
|
||||
<button onClick={fetchData} className="text-xs text-violet-600 dark:text-violet-400 hover:text-violet-800 font-semibold">Try again</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const primaryFieldKey = fields.find(
|
||||
(f) => f.field_key !== "current_state_name" && f.field_key !== "instance_id" && f.data_type === "text"
|
||||
)?.field_key;
|
||||
|
||||
const { page, total_count, total_pages, limit } = pagination;
|
||||
const from = total_count > 0 ? (page - 1) * limit + 1 : 0;
|
||||
const to = Math.min(page * limit, total_count);
|
||||
const pages = buildPageRange(page, total_pages);
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 bg-white dark:bg-zinc-900 overflow-hidden shadow-sm dark:shadow-black/20">
|
||||
|
||||
{/* ── Toolbar ───────────────────────────────────────────────────────── */}
|
||||
<div className="px-5 py-3 flex items-center justify-between gap-4 border-b border-slate-100 dark:border-zinc-800">
|
||||
{/* Left — count + search chip + primary action */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-[15px] font-bold text-slate-800 dark:text-zinc-100 tabular-nums leading-none">{total_count}</span>
|
||||
<span className="text-[13px] text-slate-400 dark:text-zinc-500 leading-none">records</span>
|
||||
</div>
|
||||
|
||||
{query.search && (
|
||||
<div className="flex items-center gap-1.5 pl-3 border-l border-slate-200 dark:border-zinc-700">
|
||||
<span className="text-[11px] text-slate-400 dark:text-zinc-500">Filtered:</span>
|
||||
<span
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-semibold border"
|
||||
style={{ background: "rgba(124,58,237,0.08)", borderColor: "rgba(124,58,237,0.2)", color: "#7c3aed" }}
|
||||
>
|
||||
{query.search}
|
||||
<button onClick={clearSearch} className="ml-0.5 hover:opacity-60"><X size={9} /></button>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{toolbarAction && (
|
||||
<div className="pl-3 border-l border-slate-200 dark:border-zinc-700">
|
||||
{toolbarAction}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right — utility controls: refresh + search */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
onClick={fetchData}
|
||||
disabled={dataLoading}
|
||||
title="Refresh"
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-slate-600 dark:hover:text-zinc-300 hover:bg-slate-100 dark:hover:bg-zinc-800 transition-colors disabled:opacity-40"
|
||||
>
|
||||
<RefreshCw size={14} className={dataLoading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
|
||||
<form onSubmit={handleSearch}>
|
||||
<div className="relative">
|
||||
<Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 dark:text-zinc-500 pointer-events-none" />
|
||||
<input
|
||||
ref={searchRef}
|
||||
type="text"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder="Search…"
|
||||
className="w-44 h-8 pl-8 pr-7 text-[13px] border border-slate-200 dark:border-zinc-700 rounded-lg bg-slate-50 dark:bg-zinc-800 text-slate-800 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-violet-500/20 focus:border-violet-400 dark:focus:border-violet-500 focus:bg-white dark:focus:bg-zinc-800 transition placeholder:text-slate-400 dark:placeholder:text-zinc-600"
|
||||
/>
|
||||
{searchInput && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearSearch}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-300 dark:text-zinc-600 hover:text-slate-500"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Table ─────────────────────────────────────────────────────────── */}
|
||||
<div className="overflow-x-auto relative">
|
||||
{dataLoading && (
|
||||
<div className="absolute inset-0 bg-white/60 dark:bg-zinc-900/60 z-10 flex items-center justify-center backdrop-blur-[1px]">
|
||||
<div className="w-5 h-5 border-2 border-violet-200 dark:border-violet-900 border-t-violet-600 rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<table className="w-full">
|
||||
{/* ── Head ── */}
|
||||
<thead>
|
||||
<tr className="bg-slate-50/80 dark:bg-zinc-800/40 border-b border-slate-200/80 dark:border-zinc-700/80">
|
||||
{fields.map((f, i) => {
|
||||
const isSorted = query.sort_by === f.field_key;
|
||||
return (
|
||||
<th
|
||||
key={f.field_key}
|
||||
onClick={() => handleSort(f.field_key)}
|
||||
className={`py-2.5 text-left text-[12px] font-semibold cursor-pointer select-none whitespace-nowrap transition-colors group/th
|
||||
${i === 0 ? "pl-5 pr-4" : "px-4"}
|
||||
${isSorted
|
||||
? "text-violet-600 dark:text-violet-400"
|
||||
: "text-slate-500 dark:text-zinc-400 hover:text-slate-700 dark:hover:text-zinc-200"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
{f.output_label}
|
||||
{isSorted
|
||||
? (query.sort_dir === "asc"
|
||||
? <ArrowUp size={11} className="text-violet-500" />
|
||||
: <ArrowDown size={11} className="text-violet-500" />)
|
||||
: <ArrowDown size={10} className="text-slate-300 dark:text-zinc-700 opacity-0 group-hover/th:opacity-100 transition-opacity" />
|
||||
}
|
||||
</span>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
{/* Actions header — fixed width, no label */}
|
||||
<th className="py-2.5 pr-4 w-16" />
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* ── Body ── */}
|
||||
<tbody className="divide-y divide-slate-100/80 dark:divide-zinc-800/60">
|
||||
{rows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={fields.length + 1} className="py-20 text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-14 h-14 rounded-2xl flex items-center justify-center"
|
||||
style={{ background: "linear-gradient(135deg,#f5f3ff,#ede9fe)" }}>
|
||||
<Inbox size={22} className="text-violet-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[14px] font-semibold text-slate-600 dark:text-zinc-300">No records found</div>
|
||||
<div className="text-[12px] text-slate-400 dark:text-zinc-600 mt-1">
|
||||
{query.search ? "Try a different search term" : "Submit a new invoice to get started"}
|
||||
</div>
|
||||
</div>
|
||||
{query.search && (
|
||||
<button onClick={clearSearch} className="text-[12px] font-semibold text-violet-600 dark:text-violet-400 hover:text-violet-800 transition-colors">
|
||||
Clear search
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : rows.map((row, i) => {
|
||||
const stateName = String(row.current_state_name ?? "");
|
||||
const stateId = Object.entries(STATE_IDS).find(([_, v]) => {
|
||||
const name = v.replace(/^p2p-state-/, "").replace(/-/g, " ");
|
||||
return stateName.toLowerCase() === name;
|
||||
})?.[1];
|
||||
const actions = stateId ? ROW_ACTIONS[stateId] : undefined;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={String(row.instance_id ?? i)}
|
||||
onClick={() => handleRowClick(row)}
|
||||
className="group/row cursor-pointer hover:bg-slate-50/80 dark:hover:bg-zinc-800/40 transition-colors"
|
||||
>
|
||||
{fields.map((f, fi) => {
|
||||
const isPrimary = f.field_key === primaryFieldKey;
|
||||
const isFirst = fi === 0;
|
||||
return (
|
||||
<td
|
||||
key={f.field_key}
|
||||
className={`py-3.5 whitespace-nowrap text-[13px]
|
||||
${isFirst
|
||||
? "pl-5 pr-4 border-l-2 border-l-transparent group-hover/row:border-l-violet-500 transition-colors"
|
||||
: "px-4"
|
||||
}
|
||||
${isPrimary
|
||||
? "font-semibold text-slate-800 dark:text-zinc-100"
|
||||
: "text-slate-500 dark:text-zinc-400"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{renderCell(row[f.field_key], f.data_type, f.field_key)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Actions — hidden until hover */}
|
||||
<td className="pr-4 py-3 w-16 text-right" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-end gap-1 opacity-0 group-hover/row:opacity-100 transition-opacity">
|
||||
{actions && actions.length > 0 && (
|
||||
<RowMenu
|
||||
actions={actions}
|
||||
onAction={(activityId, label) =>
|
||||
setFormModal({ activityId, instanceId: String(row.instance_id), title: label })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleRowClick(row)}
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-100 dark:hover:bg-violet-950/50 transition-colors"
|
||||
>
|
||||
<ArrowRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* ── Pagination ────────────────────────────────────────────────────── */}
|
||||
{total_count > 0 && (
|
||||
<div className="px-5 py-3 border-t border-slate-100 dark:border-zinc-800 flex items-center justify-between gap-4">
|
||||
{/* Left */}
|
||||
<div className="flex items-center gap-3 text-[12px] text-slate-400 dark:text-zinc-500">
|
||||
<div className="flex items-center gap-1.5">
|
||||
Show
|
||||
<select
|
||||
value={query.limit}
|
||||
onChange={(e) => setQuery((q) => ({ ...q, page: 1, limit: Number(e.target.value) }))}
|
||||
className="h-7 px-2 text-[12px] border border-slate-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-slate-600 dark:text-zinc-300 font-medium focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={25}>25</option>
|
||||
<option value={50}>50</option>
|
||||
</select>
|
||||
per page
|
||||
</div>
|
||||
<span className="pl-3 border-l border-slate-200 dark:border-zinc-700 tabular-nums">
|
||||
{from}–{to} of {total_count}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Right — page numbers */}
|
||||
{total_pages > 1 && (
|
||||
<div className="flex items-center gap-0.5">
|
||||
<button
|
||||
disabled={page <= 1}
|
||||
onClick={() => handlePage(page - 1)}
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-950/30 disabled:opacity-30 disabled:pointer-events-none transition-colors"
|
||||
>
|
||||
<ChevronLeft size={15} />
|
||||
</button>
|
||||
|
||||
{pages.map((p, idx) =>
|
||||
p === "…" ? (
|
||||
<span key={`e${idx}`} className="w-7 h-7 flex items-center justify-center text-[12px] text-slate-300 dark:text-zinc-700 select-none">…</span>
|
||||
) : (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => handlePage(p as number)}
|
||||
className={`w-7 h-7 rounded-lg text-[12px] font-medium transition-colors ${
|
||||
p === page
|
||||
? "bg-violet-600 text-white"
|
||||
: "text-slate-500 dark:text-zinc-400 hover:bg-violet-50 dark:hover:bg-violet-950/30 hover:text-violet-600 dark:hover:text-violet-400"
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
|
||||
<button
|
||||
disabled={page >= total_pages}
|
||||
onClick={() => handlePage(page + 1)}
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-950/30 disabled:opacity-30 disabled:pointer-events-none transition-colors"
|
||||
>
|
||||
<ChevronRight size={15} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formModal && (
|
||||
<FormModal
|
||||
activityId={formModal.activityId}
|
||||
instanceId={formModal.instanceId}
|
||||
title={formModal.title}
|
||||
onClose={() => setFormModal(null)}
|
||||
onSuccess={() => { setFormModal(null); fetchData(); }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Row menu (three-dot dropdown)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface RowMenuProps {
|
||||
actions: Array<{ activityId: string; label: string; icon: React.ReactNode }>;
|
||||
onAction: (activityId: string, label: string) => void;
|
||||
}
|
||||
|
||||
function RowMenu({ actions, onAction }: RowMenuProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const close = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
document.addEventListener("mousedown", close);
|
||||
return () => document.removeEventListener("mousedown", close);
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-slate-600 dark:hover:text-zinc-300 hover:bg-slate-100 dark:hover:bg-zinc-800 transition-colors"
|
||||
>
|
||||
<MoreHorizontal size={15} />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 top-full mt-1 z-50 w-40 bg-white dark:bg-zinc-900 rounded-xl shadow-xl shadow-slate-900/10 dark:shadow-black/40 border border-slate-200 dark:border-zinc-700/70 py-1 overflow-hidden">
|
||||
{actions.map((a) => (
|
||||
<button
|
||||
key={a.activityId}
|
||||
onClick={() => { setOpen(false); onAction(a.activityId, a.label); }}
|
||||
className="w-full text-left px-3.5 py-2 text-[13px] text-slate-600 dark:text-zinc-300 hover:bg-slate-50 dark:hover:bg-zinc-800 flex items-center gap-2.5 transition-colors"
|
||||
>
|
||||
<span className="text-slate-400 dark:text-zinc-500">{a.icon}</span>
|
||||
{a.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function buildPageRange(current: number, total: number): Array<number | "…"> {
|
||||
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
||||
if (current <= 4) return [1, 2, 3, 4, 5, "…", total];
|
||||
if (current >= total - 3) return [1, "…", total - 4, total - 3, total - 2, total - 1, total];
|
||||
return [1, "…", current - 1, current, current + 1, "…", total];
|
||||
}
|
||||
|
||||
function renderCell(value: unknown, dataType: string, fieldKey: string): React.ReactNode {
|
||||
if (value == null || value === "") return <span className="text-slate-300 dark:text-zinc-700">—</span>;
|
||||
if (fieldKey === "current_state_name") return <StatusBadge value={String(value)} />;
|
||||
if (dataType === "number") {
|
||||
const n = Number(value);
|
||||
if (fieldKey.includes("amount") || fieldKey.includes("Amount") || fieldKey.includes("tax") || fieldKey.includes("price"))
|
||||
return <span className="tabular-nums font-medium text-slate-700 dark:text-zinc-200">{n.toLocaleString("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 })}</span>;
|
||||
return <span className="tabular-nums">{n.toLocaleString()}</span>;
|
||||
}
|
||||
if (dataType === "datetime" || dataType === "date") {
|
||||
try { return <span>{new Date(String(value)).toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" })}</span>; }
|
||||
catch { return String(value); }
|
||||
}
|
||||
if (fieldKey === "instance_id") {
|
||||
return <span className="font-mono text-[11px] text-slate-400 dark:text-zinc-500 bg-slate-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded-md">{String(value).slice(0, 8)}</span>;
|
||||
}
|
||||
return String(value);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Status badge
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const STATUS: Record<string, { bg: string; text: string; dot: string; darkBg: string; darkText: string; darkDot: string }> = {
|
||||
"Invoice Submitted": { bg: "bg-sky-50 border-sky-200", text: "text-sky-700", dot: "bg-sky-500", darkBg: "dark:bg-sky-950/40 dark:border-sky-800/60", darkText: "dark:text-sky-300", darkDot: "dark:bg-sky-400" },
|
||||
"AI Analysis": { bg: "bg-violet-50 border-violet-200", text: "text-violet-700", dot: "bg-violet-500", darkBg: "dark:bg-violet-950/40 dark:border-violet-800/60", darkText: "dark:text-violet-300", darkDot: "dark:bg-violet-400" },
|
||||
"Awaiting Clarification": { bg: "bg-amber-50 border-amber-200", text: "text-amber-700", dot: "bg-amber-500", darkBg: "dark:bg-amber-950/40 dark:border-amber-800/60", darkText: "dark:text-amber-300", darkDot: "dark:bg-amber-400" },
|
||||
"Finance Review": { bg: "bg-indigo-50 border-indigo-200", text: "text-indigo-700", dot: "bg-indigo-500", darkBg: "dark:bg-indigo-950/40 dark:border-indigo-800/60", darkText: "dark:text-indigo-300", darkDot: "dark:bg-indigo-400" },
|
||||
"Approved": { bg: "bg-emerald-50 border-emerald-200", text: "text-emerald-700", dot: "bg-emerald-500", darkBg: "dark:bg-emerald-950/40 dark:border-emerald-800/60", darkText: "dark:text-emerald-300", darkDot: "dark:bg-emerald-400" },
|
||||
"Rejected": { bg: "bg-red-50 border-red-200", text: "text-red-700", dot: "bg-red-500", darkBg: "dark:bg-red-950/40 dark:border-red-800/60", darkText: "dark:text-red-300", darkDot: "dark:bg-red-400" },
|
||||
"On Hold": { bg: "bg-slate-100 border-slate-200", text: "text-slate-600", dot: "bg-slate-400", darkBg: "dark:bg-zinc-800 dark:border-zinc-700", darkText: "dark:text-zinc-400", darkDot: "dark:bg-zinc-500" },
|
||||
};
|
||||
|
||||
function StatusBadge({ value }: { value: string }) {
|
||||
const s = STATUS[value] ?? { bg: "bg-slate-100 border-slate-200", text: "text-slate-600", dot: "bg-slate-400", darkBg: "dark:bg-zinc-800 dark:border-zinc-700", darkText: "dark:text-zinc-400", darkDot: "dark:bg-zinc-500" };
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold border ${s.bg} ${s.text} ${s.darkBg} ${s.darkText}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full shrink-0 ${s.dot} ${s.darkDot} ${value === "AI Analysis" ? "animate-pulse" : ""}`} />
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
82
src/components/ScreenRenderer.tsx
Normal file
82
src/components/ScreenRenderer.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import { useState, ReactNode } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import type { LayoutElement } from "../api/viewService";
|
||||
import RecordViewTable from "./RecordViewTable";
|
||||
import DetailViewPanel from "./DetailViewPanel";
|
||||
import FormModal from "./FormModal";
|
||||
|
||||
interface Props { layout: LayoutElement[]; instanceId?: string; onRefresh?: () => void; onRowClick?: (instanceId: string) => void; }
|
||||
|
||||
export default function ScreenRenderer({ layout, instanceId, onRefresh, onRowClick }: Props) {
|
||||
const [formModal, setFormModal] = useState<{ activityId: string; instanceId?: string; title?: string } | null>(null);
|
||||
|
||||
// Collect button elements to inject into the next record view's toolbar
|
||||
const buttons: ReactNode[] = [];
|
||||
const elements: { type: "rv" | "dv"; viewId: number | string; style?: Record<string, string> }[] = [];
|
||||
|
||||
// Walk the layout tree (sections may nest children)
|
||||
const walk = (nodes: any[]): void => {
|
||||
for (const el of nodes) {
|
||||
visit(el);
|
||||
if (Array.isArray(el.children) && el.children.length > 0) walk(el.children);
|
||||
}
|
||||
};
|
||||
|
||||
const visit = (el: any) => {
|
||||
const cfg = el.config || {};
|
||||
if (cfg.type === "button" || cfg.job_template) {
|
||||
const aid = cfg.params?.activity_id_init || cfg.params?.activity_id;
|
||||
const label = (cfg.name || "").replace(/^\+\s*/, "");
|
||||
buttons.push(
|
||||
<button
|
||||
key={aid}
|
||||
onClick={() => setFormModal({ activityId: aid, instanceId: cfg.job_template === "perform_activity" ? instanceId : undefined, title: label })}
|
||||
className="h-8 px-3.5 text-[12px] font-semibold text-white rounded-xl inline-flex items-center gap-1.5 transition-all hover:scale-[1.02] active:scale-[0.98] shadow-md shadow-violet-500/20"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
<Plus size={13} strokeWidth={2.5} />{label}
|
||||
</button>
|
||||
);
|
||||
} else if (cfg.type === "recordsview") {
|
||||
const vid = cfg.view_uuid ?? cfg.view_id;
|
||||
if (vid) elements.push({ type: "rv", viewId: vid, style: el.style });
|
||||
} else if (cfg.type === "detailsview") {
|
||||
const vid = cfg.view_uuid ?? cfg.view_id;
|
||||
if (vid) elements.push({ type: "dv", viewId: vid, style: el.style });
|
||||
}
|
||||
};
|
||||
|
||||
walk(layout as any[]);
|
||||
|
||||
// Drop absolute-positioning that the studio editor adds; render in normal flow.
|
||||
const flowStyle = (s?: Record<string, string>) => {
|
||||
if (!s) return undefined;
|
||||
const { position, top, left, right, bottom, width, height, ...rest } = s;
|
||||
return rest;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
{elements.map((el, i) => {
|
||||
if (el.type === "rv") {
|
||||
return (
|
||||
<div key={i} style={flowStyle(el.style)}>
|
||||
<RecordViewTable
|
||||
viewId={el.viewId}
|
||||
onRowClick={onRowClick}
|
||||
toolbarAction={buttons.length > 0 ? <div className="flex items-center gap-2">{buttons}</div> : undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (el.type === "dv") {
|
||||
return <div key={i} style={flowStyle(el.style)}><DetailViewPanel viewId={el.viewId} instanceId={instanceId || ""} /></div>;
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
{formModal && <FormModal activityId={formModal.activityId} instanceId={formModal.instanceId} title={formModal.title} onClose={() => setFormModal(null)} onSuccess={() => { setFormModal(null); onRefresh?.(); }} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
73
src/components/Skeleton.tsx
Normal file
73
src/components/Skeleton.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
export function Skeleton({ className = "" }: { className?: string }) {
|
||||
return <div className={`animate-pulse bg-slate-200/70 dark:bg-zinc-800 rounded ${className}`} />;
|
||||
}
|
||||
|
||||
export function TableSkeleton({ rows = 5, cols = 6 }: { rows?: number; cols?: number }) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 bg-white dark:bg-zinc-900 overflow-hidden shadow-sm">
|
||||
{/* Toolbar skeleton */}
|
||||
<div className="px-5 py-3.5 border-b border-slate-100 dark:border-zinc-800 flex items-center justify-between">
|
||||
<Skeleton className="h-5 w-48" />
|
||||
<Skeleton className="h-8 w-8 rounded-lg" />
|
||||
</div>
|
||||
{/* Header */}
|
||||
<div className="px-4 py-2.5 border-b border-slate-100 dark:border-zinc-800 bg-slate-50/50 dark:bg-zinc-800/30 flex gap-4">
|
||||
{Array.from({ length: cols }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-3 flex-1" />
|
||||
))}
|
||||
</div>
|
||||
{/* Rows */}
|
||||
{Array.from({ length: rows }).map((_, ri) => (
|
||||
<div key={ri} className="px-4 py-4 border-b border-slate-50 dark:border-zinc-800/60 flex gap-4">
|
||||
{Array.from({ length: cols }).map((_, ci) => (
|
||||
<Skeleton key={ci} className={`h-4 flex-1 ${ci === 0 ? "max-w-[80px]" : ""}`} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DetailSkeleton() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Status bar */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 px-5 py-3 flex gap-4">
|
||||
<Skeleton className="h-6 w-32 rounded-full" />
|
||||
<Skeleton className="h-4 w-20 mt-1" />
|
||||
<Skeleton className="h-4 w-24 mt-1" />
|
||||
</div>
|
||||
{/* Detail card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-slate-100 dark:border-zinc-800">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
<div className="grid grid-cols-3">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<div key={i} className="px-5 py-4 border-b border-slate-50 dark:border-zinc-800/60">
|
||||
<Skeleton className="h-3 w-20 mb-2" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatsSkeleton() {
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 p-4">
|
||||
<div className="flex items-start justify-between mb-3.5">
|
||||
<Skeleton className="h-10 w-10 rounded-xl" />
|
||||
<Skeleton className="h-8 w-12" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-24 mb-3" />
|
||||
<Skeleton className="h-1 w-full rounded-full" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
74
src/config.ts
Normal file
74
src/config.ts
Normal file
@ -0,0 +1,74 @@
|
||||
// P2P Invoice System (dev) — App 169, Org 47
|
||||
// Mirrors the studio app 20 build but with dev's UUID-based UIDs.
|
||||
|
||||
export const ORG_ID = "47";
|
||||
export const APP_ID = "169";
|
||||
|
||||
// Core-service expects the workflow UUID under `workflow_uuid`.
|
||||
export const WORKFLOW_ID = "0588b645-75f7-40e5-8251-e0761e4be632";
|
||||
|
||||
export const ACTIVITY_IDS = {
|
||||
SUBMIT_INVOICE: "5c060892-e3f3-4881-89d2-b44abfea47b5", // INIT — vendor submits
|
||||
ANALYZE_INVOICE: "p2p-act-analyze-invoice", // AI analysis — not present in dev workflow
|
||||
REQUEST_CLARIFICATION: "9be78287-edc9-4cad-bcb5-2d751951e268", // AI asks department
|
||||
PROVIDE_CLARIFICATION: "2633809d-7353-41f6-a5f1-08cede154ac0", // Department responds
|
||||
SUBMIT_RECOMMENDATION: "ce4715f4-41ee-4a96-b54c-5c0eb1c07a4e", // AI recommends
|
||||
APPROVE_PAYMENT: "48e36c69-ae33-48a5-9253-b749dac41ff1", // Finance approves
|
||||
REJECT_PAYMENT: "3d835170-9c46-47f5-8e63-c58f367a6373", // Finance rejects
|
||||
HOLD_PAYMENT: "c1571b59-6ee7-4ec5-bf26-0c5869a19537", // Finance holds
|
||||
} as const;
|
||||
|
||||
export const RECORD_VIEW_IDS = {
|
||||
ALL_INVOICES: "03f87d40-91c5-4d3e-89e4-7b44377ca5e0",
|
||||
PENDING_CLARIFICATIONS: "282f3dd5-8d58-4956-a985-f46b814034f1",
|
||||
VENDOR_INVOICES: "0b031076-4968-4717-908b-ea52cc3bb2bd",
|
||||
FINANCE_REVIEW_QUEUE: "174a852f-37f9-49d5-ad8d-d3a6d4135f6a",
|
||||
VENDOR_DATA_RDBMS: "f939a74a-c0f9-43fc-960d-018082b9b7be",
|
||||
} as const;
|
||||
|
||||
export const DETAIL_VIEW_IDS = {
|
||||
CLARIFICATION_DETAIL: "055fb42c-3aa7-450c-958e-ce7878322892",
|
||||
FINANCE_REVIEW_DETAIL: "731f7c3f-bbd7-4df3-b3ae-5cbd61b29625",
|
||||
INVOICE_DETAIL: "8b572cd4-d603-4140-9697-451d2c45c27f",
|
||||
VENDOR_DETAIL_RDBMS: "0a53322e-f130-48c0-886c-3885a3d7892a",
|
||||
} as const;
|
||||
|
||||
// Workflow states (matched by name)
|
||||
export const STATE_IDS = {
|
||||
INVOICE_SUBMITTED: "b406096d-b0a8-4dad-b6b1-f64e380395e3",
|
||||
AI_ANALYSIS: "ee026e0d-0199-49b2-b737-1ee6b43156f8",
|
||||
AWAITING_CLARIFICATION: "4ea58ab0-7f3c-4e35-b198-7026564ec017",
|
||||
FINANCE_REVIEW: "180ee05d-564e-41bc-97e6-b6132a094157",
|
||||
APPROVED: "b1db76d4-5cbc-4a39-894b-9b844e0e89b5",
|
||||
REJECTED: "da3751fb-6dc2-4bfa-88fa-918799b4ccf7",
|
||||
ON_HOLD: "2587a2e5-4236-4262-a371-6ca0e461a8c8",
|
||||
} as const;
|
||||
|
||||
// Roles (unchanged from studio)
|
||||
export const ROLES = {
|
||||
VENDOR: "p2p_vendor",
|
||||
AI_FINANCE: "p2p_ai_finance",
|
||||
WAREHOUSE: "p2p_warehouse",
|
||||
PROCUREMENT: "p2p_procurement",
|
||||
AP_TEAM: "p2p_ap_team",
|
||||
FINANCE_REVIEWER: "p2p_finance_reviewer",
|
||||
} as const;
|
||||
|
||||
// tbl_appconfig_screens.source_uuid for the 7 P2P screens.
|
||||
export const SCREEN_UUIDS = {
|
||||
MY_INVOICES: "723dd1c6-027c-4e1f-b8ad-c5e8f29699f1", // "P2P-My Invoices"
|
||||
PENDING_CLARIFICATIONS: "77ae8a02-818c-434f-a00b-a8610b9bd7e8", // "P2P-Pending Clarifications"
|
||||
FINANCE_REVIEW: "637bfef3-e719-4ac3-a3a2-19a384acd932", // "P2P-Finance Review"
|
||||
ALL_INVOICES: "019d28e0-d48b-4dbf-9285-29ce214b32d0", // "P2P-All Invoices"
|
||||
INVOICE_DETAIL: "84dee127-0c23-4885-98da-971f46ae60fa", // "P2P-Invoice Detail"
|
||||
CLARIFICATION_DETAIL: "09af6d6a-3c2a-445c-b126-8a7b732af3a8", // "P2P-Clarification Detail"
|
||||
FINANCE_REVIEW_DETAIL: "60d9da55-af9c-4cc1-a51a-27a21b5db85e", // "P2P-Finance Review Detail"
|
||||
} as const;
|
||||
|
||||
// tbl_appconfig_rv_screens.source_uuid for the RDBMS-backed Vendor Data screen.
|
||||
export const RDBMS_RV_SCREEN_UUID = "5cb361ca-7f83-4312-aa34-fecc553963b7"; // "Vendor Data" rv_screen
|
||||
// tbl_appconfig_dv_screens.source_uuid for the RDBMS-backed Vendor Detail screen.
|
||||
export const RDBMS_DV_SCREEN_UUID = "d3f870ee-ead6-4e69-a051-c65db1a1ef11"; // "Vendor Detail View" dv_screen
|
||||
|
||||
// rv_screen.source_uuid used by DashboardStats counts ("Admin - All Invoices").
|
||||
export const ALL_INVOICES_RV_SCREEN_UUID = "979047dd-e88f-4458-b356-35a8c014859b";
|
||||
19
src/hooks/AuthContext.tsx
Normal file
19
src/hooks/AuthContext.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React, { createContext, useContext } from "react";
|
||||
import { useAuth } from "./useAuth";
|
||||
|
||||
type AuthContextValue = ReturnType<typeof useAuth>;
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const auth = useAuth();
|
||||
return (
|
||||
<AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuthContext(): AuthContextValue {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error("useAuthContext must be inside <AuthProvider>");
|
||||
return ctx;
|
||||
}
|
||||
41
src/hooks/ThemeContext.tsx
Normal file
41
src/hooks/ThemeContext.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { createContext, useContext, useEffect, useState } from "react";
|
||||
|
||||
type Theme = "light" | "dark";
|
||||
|
||||
interface ThemeContextValue {
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextValue>({
|
||||
theme: "light",
|
||||
toggleTheme: () => {},
|
||||
});
|
||||
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [theme, setTheme] = useState<Theme>(() => {
|
||||
const stored = localStorage.getItem("p2p_theme");
|
||||
if (stored === "dark" || stored === "light") return stored;
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (theme === "dark") {
|
||||
root.classList.add("dark");
|
||||
} else {
|
||||
root.classList.remove("dark");
|
||||
}
|
||||
localStorage.setItem("p2p_theme", theme);
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => setTheme((t) => (t === "light" ? "dark" : "light"));
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useTheme = () => useContext(ThemeContext);
|
||||
100
src/hooks/useAuth.ts
Normal file
100
src/hooks/useAuth.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import type { User } from "../zino-sdk/types";
|
||||
|
||||
const TOKEN_KEY = "p2p_token";
|
||||
const USER_KEY = "p2p_user";
|
||||
|
||||
interface LoginParams {
|
||||
email: string;
|
||||
password: string;
|
||||
orgId?: string;
|
||||
}
|
||||
|
||||
interface AuthState {
|
||||
user: User | null;
|
||||
token: string | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const [state, setState] = useState<AuthState>(() => {
|
||||
const token = localStorage.getItem(TOKEN_KEY);
|
||||
const userJson = localStorage.getItem(USER_KEY);
|
||||
let user: User | null = null;
|
||||
if (userJson) {
|
||||
try {
|
||||
user = JSON.parse(userJson);
|
||||
} catch {}
|
||||
}
|
||||
return { user, token, loading: false, error: null };
|
||||
});
|
||||
|
||||
const apiUrl = (
|
||||
import.meta.env.VITE_ZINO_API_URL || ""
|
||||
).replace(/\/+$/, "");
|
||||
|
||||
const login = useCallback(
|
||||
async ({ email, password, orgId }: LoginParams) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const res = await fetch(`${apiUrl}/usr/login`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password,
|
||||
...(orgId ? { org_id: orgId } : {}),
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
let msg = "Login failed";
|
||||
try {
|
||||
const body = await res.json();
|
||||
if (body.error) msg = body.error;
|
||||
} catch {}
|
||||
throw new Error(msg);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
const { token, user } = data as { token: string; user: User };
|
||||
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
localStorage.setItem(USER_KEY, JSON.stringify(user));
|
||||
// Also set on zino SDK so workflow/view calls get the token
|
||||
localStorage.setItem("zino_token", token);
|
||||
|
||||
setState({ user, token, loading: false, error: null });
|
||||
return { token, user };
|
||||
} catch (err: any) {
|
||||
const msg = err?.message || "Login failed";
|
||||
setState((s) => ({ ...s, loading: false, error: msg }));
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
[apiUrl],
|
||||
);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
localStorage.removeItem(USER_KEY);
|
||||
localStorage.removeItem("zino_token");
|
||||
setState({ user: null, token: null, loading: false, error: null });
|
||||
}, []);
|
||||
|
||||
const clearError = useCallback(() => {
|
||||
setState((s) => ({ ...s, error: null }));
|
||||
}, []);
|
||||
|
||||
return {
|
||||
user: state.user,
|
||||
token: state.token,
|
||||
isAuthenticated: !!state.token,
|
||||
loading: state.loading,
|
||||
error: state.error,
|
||||
login,
|
||||
logout,
|
||||
clearError,
|
||||
};
|
||||
}
|
||||
47
src/index.css
Normal file
47
src/index.css
Normal file
@ -0,0 +1,47 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply antialiased text-slate-800 dark:text-zinc-100 bg-white dark:bg-zinc-950;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
transition-property: background-color, border-color, color;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
/* Override transition for animations so they still work */
|
||||
.animate-spin, .animate-pulse {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.glow-violet {
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
|
||||
}
|
||||
|
||||
.glow-fuchsia {
|
||||
box-shadow: 0 0 20px rgba(217, 70, 239, 0.25);
|
||||
}
|
||||
|
||||
.gradient-brand {
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7, #d946ef);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #7c3aed, #d946ef);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
24
src/main.tsx
Normal file
24
src/main.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { ZinoProvider } from './zino-sdk'
|
||||
import { AuthProvider } from './hooks/AuthContext'
|
||||
import { ThemeProvider } from './hooks/ThemeContext'
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
|
||||
const apiUrl = import.meta.env.VITE_ZINO_API_URL || ''
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<ThemeProvider>
|
||||
<ZinoProvider baseUrl={apiUrl}>
|
||||
<BrowserRouter basename={import.meta.env.BASE_URL}>
|
||||
<AuthProvider>
|
||||
<App />
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
</ZinoProvider>
|
||||
</ThemeProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
30
src/pages/Home.tsx
Normal file
30
src/pages/Home.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { useAuthContext } from "../hooks/AuthContext";
|
||||
import { LogOut } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
const { user, logout } = useAuthContext();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white border-b border-gray-200">
|
||||
<div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<h1 className="text-lg font-semibold text-gray-900">P2P</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-gray-600">{user?.name || user?.email}</span>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
title="Sign out"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-4 py-8">
|
||||
<p className="text-gray-500">Welcome. App pages will go here.</p>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
152
src/pages/Login.tsx
Normal file
152
src/pages/Login.tsx
Normal file
@ -0,0 +1,152 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { useAuthContext } from "../hooks/AuthContext";
|
||||
import { ShieldCheck, Zap, BarChart3, Bot, ArrowRight } from "lucide-react";
|
||||
|
||||
export default function Login() {
|
||||
const { login, loading, error, clearError } = useAuthContext();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [orgId] = useState("47");
|
||||
|
||||
const from = (location.state as any)?.from?.pathname || "/";
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
clearError();
|
||||
try {
|
||||
await login({ email, password, orgId: orgId || undefined });
|
||||
navigate(from, { replace: true });
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const inputCls = "w-full h-11 border border-slate-200 dark:border-zinc-700 rounded-lg px-3.5 text-[13px] bg-slate-50 dark:bg-zinc-800/60 text-slate-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-violet-500/20 focus:border-violet-400 dark:focus:border-violet-500 focus:bg-white dark:focus:bg-zinc-800 transition placeholder:text-slate-400 dark:placeholder:text-zinc-600";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex dark:bg-zinc-950">
|
||||
|
||||
{/* ── Left — branding ─────────────────────────────────────────── */}
|
||||
<div className="hidden lg:flex lg:w-[45%] items-center justify-center p-16 relative overflow-hidden"
|
||||
style={{ background: "linear-gradient(145deg, #1e1040 0%, #2d1567 40%, #1a0f3a 70%, #0f0a2e 100%)" }}>
|
||||
{/* Orbs */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute -top-32 -left-32 w-[500px] h-[500px] rounded-full opacity-30"
|
||||
style={{ background: "radial-gradient(circle, #7c3aed 0%, transparent 70%)" }} />
|
||||
<div className="absolute -bottom-20 -right-20 w-96 h-96 rounded-full opacity-20"
|
||||
style={{ background: "radial-gradient(circle, #d946ef 0%, transparent 70%)" }} />
|
||||
<div className="absolute inset-0 opacity-[0.04]"
|
||||
style={{ backgroundImage: "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)", backgroundSize: "40px 40px" }} />
|
||||
</div>
|
||||
|
||||
<div className="absolute top-10 left-16 z-10">
|
||||
<img src={import.meta.env.BASE_URL + "zino.svg"} alt="Zino" className="h-5 w-auto brightness-0 invert" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-lg">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium mb-8 border"
|
||||
style={{ background: "rgba(124,58,237,0.2)", borderColor: "rgba(167,139,250,0.3)", color: "#c4b5fd" }}>
|
||||
<ShieldCheck size={13} />
|
||||
Enterprise-grade procurement automation
|
||||
</div>
|
||||
|
||||
<h1 className="text-[2.6rem] font-bold text-white leading-[1.1] tracking-tight mb-8">
|
||||
Procure-to-Pay
|
||||
<br />
|
||||
<span className="text-transparent bg-clip-text"
|
||||
style={{ backgroundImage: "linear-gradient(135deg, #c4b5fd, #f0abfc, #67e8f9)" }}>
|
||||
Invoice Intelligence
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ icon: <Zap size={15} />, title: "Instant Validation", desc: "AI matches invoices against POs and GRNs in seconds" },
|
||||
{ icon: <Bot size={15} />, title: "Smart Routing", desc: "Exceptions auto-route to the right department" },
|
||||
{ icon: <BarChart3 size={15} />, title: "Full Audit Trail", desc: "Complete visibility from submission to payment" },
|
||||
].map((item) => (
|
||||
<div key={item.title} className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
|
||||
style={{ background: "rgba(124,58,237,0.3)", border: "1px solid rgba(167,139,250,0.25)", color: "#c4b5fd" }}>
|
||||
{item.icon}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[13px] font-semibold text-white">{item.title}</div>
|
||||
<div className="text-[12px] mt-0.5" style={{ color: "rgba(167,139,250,0.65)" }}>{item.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Right — login form ───────────────────────────────────────── */}
|
||||
<div className="flex-1 flex items-center justify-center bg-white dark:bg-zinc-950 px-8">
|
||||
<div className="w-full max-w-[340px]">
|
||||
|
||||
{/* Logo — visible on mobile only */}
|
||||
<img src={import.meta.env.BASE_URL + "zino.svg"} alt="Zino"
|
||||
className="h-5 w-auto mb-10 lg:hidden dark:invert" />
|
||||
|
||||
{/* Heading */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-[1.6rem] font-bold text-slate-900 dark:text-zinc-50 tracking-tight leading-none mb-2">
|
||||
Sign in
|
||||
</h2>
|
||||
<p className="text-[13px] text-slate-400 dark:text-zinc-500">
|
||||
Enter your credentials to access the portal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-slate-600 dark:text-zinc-400 mb-1.5 uppercase tracking-wide">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email" required autoComplete="email" autoFocus
|
||||
value={email} onChange={(e) => { setEmail(e.target.value); clearError(); }}
|
||||
className={inputCls} placeholder="you@company.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-slate-600 dark:text-zinc-400 mb-1.5 uppercase tracking-wide">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password" required autoComplete="current-password"
|
||||
value={password} onChange={(e) => { setPassword(e.target.value); clearError(); }}
|
||||
className={inputCls} placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-[12px] text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/30 rounded-lg px-3 py-2.5 border border-red-100 dark:border-red-900/60">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit" disabled={loading}
|
||||
className="w-full h-11 mt-1 disabled:opacity-50 text-white text-[13px] font-semibold rounded-lg transition-all flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.99]"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
{loading ? "Signing in…" : <>Sign in <ArrowRight size={14} /></>}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-center gap-1.5 mt-10">
|
||||
<span className="text-[11px] text-slate-400 dark:text-zinc-500">Powered by</span>
|
||||
<img src={import.meta.env.BASE_URL + "zino.svg"} alt="Zino"
|
||||
className="h-3.5 w-auto dark:invert" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
175
src/zino-sdk/DynamicForm.tsx
Normal file
175
src/zino-sdk/DynamicForm.tsx
Normal file
@ -0,0 +1,175 @@
|
||||
import React, { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useZino } from "./provider";
|
||||
import type { FormField } from "./types";
|
||||
|
||||
export interface DynamicFormProps {
|
||||
/** Workflow definition ID. */
|
||||
workflowId: string;
|
||||
/** Activity UID — the form schema is fetched for this activity. */
|
||||
activityId: string;
|
||||
/** Instance ID — omit for INIT activities (start workflow). */
|
||||
instanceId?: string;
|
||||
/** Called after successful submission with the result. */
|
||||
onSuccess?: (result: unknown) => void;
|
||||
/** Called on submission error. */
|
||||
onError?: (error: unknown) => void;
|
||||
/** Optional CSS class for the form wrapper. */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a dynamic form based on the activity's form schema.
|
||||
*
|
||||
* Fetches the form config from the core-service, renders fields by type,
|
||||
* and submits via performActivity or startWorkflow.
|
||||
*
|
||||
* ```tsx
|
||||
* <DynamicForm
|
||||
* workflowId={WORKFLOW_ID}
|
||||
* activityId={ACTIVITY_IDS.ASSIGN_TICKET}
|
||||
* instanceId={instanceId}
|
||||
* onSuccess={() => { closeModal(); }}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export function DynamicForm({
|
||||
workflowId,
|
||||
activityId,
|
||||
instanceId,
|
||||
onSuccess,
|
||||
onError,
|
||||
className,
|
||||
}: DynamicFormProps) {
|
||||
const { workflows } = useZino();
|
||||
const queryClient = useQueryClient();
|
||||
const [formData, setFormData] = useState<Record<string, string>>({});
|
||||
|
||||
// Fetch form schema
|
||||
const { data: form, isLoading: formLoading, error: formError } = useQuery({
|
||||
queryKey: ["form", workflowId, activityId, instanceId],
|
||||
queryFn: () => workflows.getForm(workflowId, activityId, "desktop", instanceId),
|
||||
});
|
||||
|
||||
// Submit mutation
|
||||
const submit = useMutation({
|
||||
mutationFn: async (data: Record<string, string>) => {
|
||||
if (instanceId) {
|
||||
return workflows.performActivity(workflowId, instanceId, activityId, data);
|
||||
} else {
|
||||
return workflows.startWorkflow(workflowId, activityId, data);
|
||||
}
|
||||
},
|
||||
onSuccess: (result) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["recordview"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["instance"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["detailview"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["audit"] });
|
||||
onSuccess?.(result);
|
||||
},
|
||||
onError: (err) => {
|
||||
onError?.(err);
|
||||
},
|
||||
});
|
||||
|
||||
const handleChange = (fieldId: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [fieldId]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Map form field IDs to their mapped_activity_field_id
|
||||
const mapped: Record<string, string> = {};
|
||||
for (const field of form?.form_json?.fields ?? []) {
|
||||
const key = field.mapped_activity_field_id || field.id;
|
||||
mapped[key] = formData[field.id] ?? "";
|
||||
}
|
||||
submit.mutate(mapped);
|
||||
};
|
||||
|
||||
if (formLoading) {
|
||||
return <div className="flex justify-center py-8"><div className="animate-spin h-6 w-6 border-2 border-blue-500 border-t-transparent rounded-full" /></div>;
|
||||
}
|
||||
|
||||
if (formError) {
|
||||
return <div className="text-red-600 text-sm py-4">Failed to load form: {(formError as any)?.message ?? "Unknown error"}</div>;
|
||||
}
|
||||
|
||||
const fields: FormField[] = form?.form_json?.fields ?? [];
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className={className}>
|
||||
{form?.form_json?.title && (
|
||||
<h3 className="text-lg font-semibold mb-4">{form.form_json.title}</h3>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
{fields.map((field) => (
|
||||
<div key={field.id}>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{field.label}
|
||||
</label>
|
||||
{renderField(field, formData[field.id] ?? "", (v) => handleChange(field.id, v))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{submit.error && (
|
||||
<div className="mt-3 text-sm text-red-600">
|
||||
{(submit.error as any)?.message ?? "Submission failed"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submit.isPending}
|
||||
className="mt-6 w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium py-2.5 px-4 rounded-lg transition-colors"
|
||||
>
|
||||
{submit.isPending ? "Submitting..." : "Submit"}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function renderField(
|
||||
field: FormField,
|
||||
value: string,
|
||||
onChange: (value: string) => void,
|
||||
) {
|
||||
const baseClass =
|
||||
"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
|
||||
|
||||
switch (field.type) {
|
||||
case "paragraph":
|
||||
return (
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
rows={4}
|
||||
className={baseClass}
|
||||
placeholder={field.label}
|
||||
/>
|
||||
);
|
||||
case "number":
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={baseClass}
|
||||
placeholder={field.label}
|
||||
/>
|
||||
);
|
||||
case "text":
|
||||
default:
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={baseClass}
|
||||
placeholder={field.label}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
64
src/zino-sdk/auth.ts
Normal file
64
src/zino-sdk/auth.ts
Normal file
@ -0,0 +1,64 @@
|
||||
import type { ZinoClient } from "./client";
|
||||
import type { LoginResponse, User } from "./types";
|
||||
import { mockDelay, MOCK_USER } from "./mock";
|
||||
|
||||
/**
|
||||
* Authentication methods — login, logout, and JWT decoding.
|
||||
* Maps to user-service endpoints.
|
||||
*/
|
||||
export class AuthService {
|
||||
private client: ZinoClient;
|
||||
constructor(client: ZinoClient) {
|
||||
this.client = client;
|
||||
}
|
||||
|
||||
async login(
|
||||
email: string,
|
||||
password: string,
|
||||
orgId?: string,
|
||||
): Promise<LoginResponse> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
const res: LoginResponse = {
|
||||
token: "mock-jwt-token-" + Date.now(),
|
||||
user: { ...MOCK_USER },
|
||||
};
|
||||
this.client.setToken(res.token);
|
||||
return res;
|
||||
}
|
||||
|
||||
const res = await this.client.request<LoginResponse>("POST", "/usr/login", {
|
||||
email,
|
||||
password,
|
||||
...(orgId ? { org_id: orgId } : {}),
|
||||
});
|
||||
this.client.setToken(res.token);
|
||||
return res;
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
this.client.setToken(null);
|
||||
}
|
||||
|
||||
getCurrentUser(): User | null {
|
||||
if (this.client.isMock) return { ...MOCK_USER };
|
||||
|
||||
const token = this.client.getToken();
|
||||
if (!token) return null;
|
||||
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split(".")[1]));
|
||||
return {
|
||||
id: payload.user_id ?? payload.sub,
|
||||
org_id: payload.org_id ?? "",
|
||||
name: payload.name ?? "",
|
||||
email: payload.email ?? "",
|
||||
roles: payload.roles ?? [],
|
||||
groups: payload.groups ?? [],
|
||||
role_assignments: payload.role_assignments ?? [],
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
86
src/zino-sdk/client.ts
Normal file
86
src/zino-sdk/client.ts
Normal file
@ -0,0 +1,86 @@
|
||||
import type { ApiError, ZinoClientConfig } from "./types";
|
||||
|
||||
const TOKEN_KEY = "zino_token";
|
||||
|
||||
/**
|
||||
* Core HTTP client for the Zino API.
|
||||
*
|
||||
* Persists JWT in localStorage so sessions survive page refresh.
|
||||
*/
|
||||
export class ZinoClient {
|
||||
readonly baseUrl: string;
|
||||
private token: string | null = null;
|
||||
private onAuthError?: () => void;
|
||||
|
||||
constructor(config: ZinoClientConfig) {
|
||||
this.baseUrl = config.baseUrl.replace(/\/+$/, "");
|
||||
this.onAuthError = config.onAuthError;
|
||||
// Restore token from localStorage on init
|
||||
if (typeof window !== "undefined") {
|
||||
this.token = localStorage.getItem(TOKEN_KEY);
|
||||
}
|
||||
}
|
||||
|
||||
get isMock(): boolean {
|
||||
return this.baseUrl === "mock";
|
||||
}
|
||||
|
||||
setToken(token: string | null): void {
|
||||
this.token = token;
|
||||
if (typeof window !== "undefined") {
|
||||
if (token) {
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
} else {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getToken(): string | null {
|
||||
return this.token;
|
||||
}
|
||||
|
||||
async request<T>(
|
||||
method: "GET" | "POST" | "PUT" | "DELETE",
|
||||
path: string,
|
||||
body?: unknown,
|
||||
): Promise<T> {
|
||||
const url = `${this.baseUrl}${path}`;
|
||||
const headers: Record<string, string> = {
|
||||
"Content-Type": "application/json",
|
||||
};
|
||||
|
||||
if (this.token) {
|
||||
headers["Authorization"] = `Bearer ${this.token}`;
|
||||
}
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers,
|
||||
body: body !== undefined ? JSON.stringify(body) : undefined,
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
this.token = null;
|
||||
this.onAuthError?.();
|
||||
const err: ApiError = { status: 401, message: "Unauthorized" };
|
||||
throw err;
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
let message = res.statusText;
|
||||
try {
|
||||
const errBody = (await res.json()) as { error?: string };
|
||||
if (errBody.error) message = errBody.error;
|
||||
} catch {
|
||||
// body wasn't JSON
|
||||
}
|
||||
const err: ApiError = { status: res.status, message };
|
||||
throw err;
|
||||
}
|
||||
|
||||
if (res.status === 204) return undefined as T;
|
||||
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
}
|
||||
61
src/zino-sdk/index.ts
Normal file
61
src/zino-sdk/index.ts
Normal file
@ -0,0 +1,61 @@
|
||||
// ---------------------------------------------------------------------------
|
||||
// Zino Service SDK — Public API
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Core client
|
||||
export { ZinoClient } from "./client";
|
||||
|
||||
// Service modules
|
||||
export { AuthService } from "./auth";
|
||||
export { WorkflowService } from "./workflow";
|
||||
export { ViewService } from "./views";
|
||||
|
||||
// React bindings
|
||||
export { ZinoProvider, useZino, queryClient } from "./provider";
|
||||
|
||||
// Components
|
||||
export { DynamicForm } from "./DynamicForm";
|
||||
|
||||
// Re-export TanStack Query hooks for convenience
|
||||
export { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
// Types
|
||||
export type {
|
||||
User,
|
||||
RoleAssignment,
|
||||
LoginRequest,
|
||||
LoginResponse,
|
||||
App,
|
||||
WorkflowDefinition,
|
||||
State,
|
||||
Transition,
|
||||
Activity,
|
||||
ActivityDataField,
|
||||
AllowedRole,
|
||||
WorkflowDataField,
|
||||
GridColumn,
|
||||
DataType,
|
||||
StageGate,
|
||||
StageGateRuleSet,
|
||||
SGRuleOutcome,
|
||||
WorkflowInstance,
|
||||
ActivityLogEntry,
|
||||
FormFieldType,
|
||||
FormField,
|
||||
FormConfig,
|
||||
ActivityForm,
|
||||
ViewField,
|
||||
ViewFieldType,
|
||||
ActionConfig,
|
||||
Column,
|
||||
SortDir,
|
||||
TabularViewParams,
|
||||
TabularViewResponse,
|
||||
ActivityEntry,
|
||||
InstanceReport,
|
||||
DetailViewResponse,
|
||||
ReportSection,
|
||||
StateTransition,
|
||||
ZinoClientConfig,
|
||||
ApiError,
|
||||
} from "./types";
|
||||
243
src/zino-sdk/mock.ts
Normal file
243
src/zino-sdk/mock.ts
Normal file
@ -0,0 +1,243 @@
|
||||
import type {
|
||||
ActivityForm,
|
||||
ActivityLogEntry,
|
||||
Column,
|
||||
InstanceReport,
|
||||
ReportSection,
|
||||
StateTransition,
|
||||
TabularViewParams,
|
||||
TabularViewResponse,
|
||||
User,
|
||||
WorkflowDefinition,
|
||||
WorkflowInstance,
|
||||
} from "./types";
|
||||
|
||||
export function mockDelay(): Promise<void> {
|
||||
const ms = 200 + Math.random() * 200;
|
||||
return new Promise((r) => setTimeout(r, ms));
|
||||
}
|
||||
|
||||
function randomId(): string {
|
||||
return Math.random().toString(36).slice(2, 10);
|
||||
}
|
||||
|
||||
function isoNow(): string {
|
||||
return new Date().toISOString();
|
||||
}
|
||||
|
||||
function daysAgo(n: number): string {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() - n);
|
||||
return d.toISOString();
|
||||
}
|
||||
|
||||
export const MOCK_USER: User = {
|
||||
id: "usr-001",
|
||||
org_id: "org-acme",
|
||||
name: "Jane Doe",
|
||||
email: "jane@acme.corp",
|
||||
roles: ["admin", "reviewer"],
|
||||
groups: ["engineering"],
|
||||
role_assignments: [
|
||||
{ role_id: "admin", positions: ["manager"] },
|
||||
{ role_id: "reviewer" },
|
||||
],
|
||||
};
|
||||
|
||||
export const MOCK_WORKFLOW_DEF: WorkflowDefinition = {
|
||||
workflow_id: "wf-support-ticket",
|
||||
version: 1,
|
||||
name: "Support Ticket",
|
||||
states: [
|
||||
{ uid: "s-new", name: "New", type: "initial", allowed_activities: ["a-init"] },
|
||||
{ uid: "s-open", name: "Open", allowed_activities: ["a-assign", "a-close"] },
|
||||
{ uid: "s-in-progress", name: "In Progress", allowed_activities: ["a-resolve", "a-escalate"] },
|
||||
{ uid: "s-resolved", name: "Resolved", allowed_activities: ["a-reopen", "a-close"] },
|
||||
{ uid: "s-closed", name: "Closed", type: "terminal", allowed_activities: [] },
|
||||
],
|
||||
activities: [
|
||||
{ uid: "a-init", name: "Create Ticket", type: "INIT", data_fields: [
|
||||
{ id: "f-title", name: "title", type: "local", data_type: "text", mandatory: true },
|
||||
{ id: "f-desc", name: "description", type: "local", data_type: "longtext", mandatory: false },
|
||||
{ id: "f-priority", name: "priority", type: "local", data_type: "text", mandatory: true },
|
||||
] },
|
||||
{ uid: "a-assign", name: "Assign Agent", type: "USER", data_fields: [
|
||||
{ id: "f-agent", name: "assigned_to", type: "local", data_type: "text", mandatory: true },
|
||||
] },
|
||||
{ uid: "a-resolve", name: "Resolve", type: "USER", data_fields: [
|
||||
{ id: "f-resolution", name: "resolution_notes", type: "local", data_type: "longtext", mandatory: true },
|
||||
] },
|
||||
{ uid: "a-escalate", name: "Escalate", type: "USER" },
|
||||
{ uid: "a-reopen", name: "Reopen", type: "USER" },
|
||||
{ uid: "a-close", name: "Close", type: "USER" },
|
||||
],
|
||||
transitions: [
|
||||
{ from_state_id: "s-new", by_activity_id: "a-init", transition_type: "direct", to_state_id: "s-open" },
|
||||
{ from_state_id: "s-open", by_activity_id: "a-assign", transition_type: "direct", to_state_id: "s-in-progress" },
|
||||
{ from_state_id: "s-in-progress", by_activity_id: "a-resolve", transition_type: "direct", to_state_id: "s-resolved" },
|
||||
{ from_state_id: "s-in-progress", by_activity_id: "a-escalate", transition_type: "direct", to_state_id: "s-open" },
|
||||
{ from_state_id: "s-resolved", by_activity_id: "a-reopen", transition_type: "direct", to_state_id: "s-open" },
|
||||
{ from_state_id: "s-resolved", by_activity_id: "a-close", transition_type: "direct", to_state_id: "s-closed" },
|
||||
{ from_state_id: "s-open", by_activity_id: "a-close", transition_type: "direct", to_state_id: "s-closed" },
|
||||
],
|
||||
workflow_data_fields: [
|
||||
{ id: "wdf-title", uid: "wdf-title", name: "title", data_type: "text" },
|
||||
{ id: "wdf-desc", uid: "wdf-desc", name: "description", data_type: "longtext" },
|
||||
{ id: "wdf-priority", uid: "wdf-priority", name: "priority", data_type: "text" },
|
||||
],
|
||||
};
|
||||
|
||||
const NAMES = ["Alice Johnson", "Bob Ramirez", "Chandra Patel", "Dina Sokolov", "Emeka Obi"];
|
||||
const PRIORITIES = ["High", "Medium", "Low"];
|
||||
const STATUSES = ["Open", "In Progress", "Resolved", "Closed"];
|
||||
const TITLES = [
|
||||
"Login page not loading",
|
||||
"Payment gateway timeout",
|
||||
"Dashboard chart misaligned",
|
||||
"Export CSV returns empty file",
|
||||
"Password reset email delayed",
|
||||
"Mobile sidebar overlaps content",
|
||||
"Search returns stale results",
|
||||
"Role permissions not syncing",
|
||||
];
|
||||
|
||||
export function mockWorkflowInstance(workflowId: string, instanceId?: string): WorkflowInstance {
|
||||
return {
|
||||
instance_id: instanceId ?? `inst-${randomId()}`,
|
||||
workflow_id: workflowId,
|
||||
workflow_version: 1,
|
||||
current_state_id: "s-open",
|
||||
data: {
|
||||
title: TITLES[Math.floor(Math.random() * TITLES.length)],
|
||||
priority: PRIORITIES[Math.floor(Math.random() * PRIORITIES.length)],
|
||||
description: "Detailed description of the reported issue.",
|
||||
},
|
||||
created_at: daysAgo(3),
|
||||
updated_at: isoNow(),
|
||||
};
|
||||
}
|
||||
|
||||
export function mockActivityForm(workflowId: string, activityId: string): ActivityForm {
|
||||
return {
|
||||
id: `form-${randomId()}`,
|
||||
workflow_id: workflowId,
|
||||
activity_id: activityId,
|
||||
form_id: `form-${activityId}`,
|
||||
device_type: "desktop",
|
||||
form_json: {
|
||||
title: activityId === "a-init" ? "Create Ticket" : "Update Ticket",
|
||||
fields: [
|
||||
{ id: "f1", label: "Title", type: "text", mapped_activity_field_id: "f-title" },
|
||||
{ id: "f2", label: "Description", type: "paragraph", mapped_activity_field_id: "f-desc" },
|
||||
{ id: "f3", label: "Priority", type: "text", mapped_activity_field_id: "f-priority" },
|
||||
],
|
||||
},
|
||||
created_at: daysAgo(30),
|
||||
};
|
||||
}
|
||||
|
||||
export function mockTabularResponse(params: TabularViewParams): TabularViewResponse {
|
||||
const pageSize = params.pageSize ?? 10;
|
||||
const page = params.page ?? 1;
|
||||
const total = 47;
|
||||
|
||||
const columns: Column[] = [
|
||||
{ key: "instance_id", label: "ID", data_type: "text", sortable: true, filterable: false, searchable: true },
|
||||
{ key: "title", label: "Title", data_type: "text", sortable: true, filterable: false, searchable: true },
|
||||
{ key: "priority", label: "Priority", data_type: "text", sortable: true, filterable: true, searchable: false },
|
||||
{ key: "status", label: "Status", data_type: "text", sortable: true, filterable: true, searchable: false },
|
||||
{ key: "assigned_to", label: "Assigned To", data_type: "text", sortable: true, filterable: true, searchable: true },
|
||||
{ key: "created_at", label: "Created", data_type: "text", sortable: true, filterable: false, searchable: false },
|
||||
];
|
||||
|
||||
const rows: Record<string, unknown>[] = [];
|
||||
const count = Math.min(pageSize, total - (page - 1) * pageSize);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const idx = (page - 1) * pageSize + i;
|
||||
rows.push({
|
||||
instance_id: `TICKET-${1000 + idx}`,
|
||||
title: TITLES[idx % TITLES.length],
|
||||
priority: PRIORITIES[idx % PRIORITIES.length],
|
||||
status: STATUSES[idx % STATUSES.length],
|
||||
assigned_to: NAMES[idx % NAMES.length],
|
||||
created_at: daysAgo(total - idx),
|
||||
});
|
||||
}
|
||||
|
||||
return { rows, total, page, columns };
|
||||
}
|
||||
|
||||
export function mockInstanceReport(instanceId: string): {
|
||||
report: InstanceReport;
|
||||
sections: ReportSection[];
|
||||
history: StateTransition[];
|
||||
} {
|
||||
const report: InstanceReport = {
|
||||
workflow_id: "wf-support-ticket",
|
||||
instance_id: instanceId,
|
||||
workflow_version: 1,
|
||||
current_state_id: "s-in-progress",
|
||||
current_state_name: "In Progress",
|
||||
global_data: {
|
||||
title: "Payment gateway timeout",
|
||||
description: "Users report intermittent 504 errors during checkout.",
|
||||
priority: "High",
|
||||
assigned_to: "Bob Ramirez",
|
||||
},
|
||||
activities: [
|
||||
{ activity_id: "a-init", data: { title: "Payment gateway timeout" }, activity_performed_at: daysAgo(5), performed_by_id: "usr-001" },
|
||||
{ activity_id: "a-assign", data: { assigned_to: "Bob Ramirez" }, activity_performed_at: daysAgo(4), performed_by_id: "usr-001" },
|
||||
],
|
||||
created_at: daysAgo(5),
|
||||
updated_at: daysAgo(4),
|
||||
};
|
||||
|
||||
const sections: ReportSection[] = [
|
||||
{
|
||||
title: "Instance Details",
|
||||
fields: [
|
||||
{ label: "Instance ID", value: instanceId },
|
||||
{ label: "Workflow", value: "Support Ticket" },
|
||||
{ label: "Current State", value: "In Progress" },
|
||||
{ label: "Created", value: report.created_at },
|
||||
{ label: "Updated", value: report.updated_at },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Data",
|
||||
fields: Object.entries(report.global_data).map(([k, v]) => ({ label: k, value: v })),
|
||||
},
|
||||
];
|
||||
|
||||
const history: StateTransition[] = [
|
||||
{ from_state: "New", to_state: "Open", activity_name: "Create Ticket", performed_by: "Jane Doe", timestamp: daysAgo(5), data: {} },
|
||||
{ from_state: "Open", to_state: "In Progress", activity_name: "Assign Agent", performed_by: "Jane Doe", timestamp: daysAgo(4), data: { assigned_to: "Bob Ramirez" } },
|
||||
];
|
||||
|
||||
return { report, sections, history };
|
||||
}
|
||||
|
||||
export function mockAuditLog(): ActivityLogEntry[] {
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
user_id: "usr-001",
|
||||
user_roles: ["admin"],
|
||||
user_groups: ["engineering"],
|
||||
activity_id: "a-init",
|
||||
data: { title: "Payment gateway timeout", priority: "High" },
|
||||
execution_state: "s-open",
|
||||
created_at: daysAgo(5),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
user_id: "usr-001",
|
||||
user_roles: ["admin"],
|
||||
user_groups: ["engineering"],
|
||||
activity_id: "a-assign",
|
||||
data: { assigned_to: "Bob Ramirez" },
|
||||
execution_state: "s-in-progress",
|
||||
created_at: daysAgo(4),
|
||||
},
|
||||
];
|
||||
}
|
||||
143
src/zino-sdk/provider.tsx
Normal file
143
src/zino-sdk/provider.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ZinoClient } from "./client";
|
||||
import { AuthService } from "./auth";
|
||||
import { WorkflowService } from "./workflow";
|
||||
import { ViewService } from "./views";
|
||||
import type { User } from "./types";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Context
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface ZinoContextValue {
|
||||
client: ZinoClient;
|
||||
auth: AuthService;
|
||||
workflows: WorkflowService;
|
||||
views: ViewService;
|
||||
user: User | null;
|
||||
setUser: (user: User | null) => void;
|
||||
}
|
||||
|
||||
const ZinoContext = createContext<ZinoContextValue | null>(null);
|
||||
|
||||
const MOCK_SESSION_KEY = "zino_mock_session";
|
||||
|
||||
// Shared QueryClient — sensible defaults for generated apps.
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 30_000, // 30s before refetch
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Provider
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface ZinoProviderProps {
|
||||
baseUrl: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrap your app with `<ZinoProvider>` to get access to Zino services
|
||||
* and TanStack Query throughout the component tree.
|
||||
*
|
||||
* ```tsx
|
||||
* <ZinoProvider baseUrl="http://localhost:8091">
|
||||
* <App />
|
||||
* </ZinoProvider>
|
||||
* ```
|
||||
*/
|
||||
export function ZinoProvider({ baseUrl, children }: ZinoProviderProps) {
|
||||
const [user, setUserState] = useState<User | null>(null);
|
||||
|
||||
const viteMock = import.meta.env.VITE_ZINO_MOCK === "true";
|
||||
const resolvedUrl = baseUrl === "mock" || viteMock ? "mock" : baseUrl;
|
||||
const isMock = resolvedUrl === "mock";
|
||||
|
||||
const setUser = useMemo(() => (u: User | null) => {
|
||||
setUserState(u);
|
||||
if (isMock) {
|
||||
if (u) {
|
||||
sessionStorage.setItem(MOCK_SESSION_KEY, "1");
|
||||
} else {
|
||||
sessionStorage.removeItem(MOCK_SESSION_KEY);
|
||||
}
|
||||
}
|
||||
}, [isMock]);
|
||||
|
||||
// Restore session on mount — from localStorage token or mock sessionStorage.
|
||||
useEffect(() => {
|
||||
if (isMock && sessionStorage.getItem(MOCK_SESSION_KEY)) {
|
||||
const authSvc = new AuthService(new ZinoClient({ baseUrl: "mock" }));
|
||||
const mockUser = authSvc.getCurrentUser();
|
||||
if (mockUser) setUserState(mockUser);
|
||||
} else {
|
||||
// Real mode — check if a token exists in localStorage
|
||||
const client = new ZinoClient({ baseUrl: resolvedUrl });
|
||||
if (client.getToken()) {
|
||||
const authSvc = new AuthService(client);
|
||||
const restored = authSvc.getCurrentUser();
|
||||
if (restored) setUserState(restored);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const value = useMemo<ZinoContextValue>(() => {
|
||||
const client = new ZinoClient({
|
||||
baseUrl: resolvedUrl,
|
||||
onAuthError: () => setUser(null),
|
||||
});
|
||||
|
||||
return {
|
||||
client,
|
||||
auth: new AuthService(client),
|
||||
workflows: new WorkflowService(client),
|
||||
views: new ViewService(client),
|
||||
user,
|
||||
setUser,
|
||||
};
|
||||
}, [resolvedUrl, setUser]);
|
||||
|
||||
const ctx = useMemo(
|
||||
() => ({ ...value, user, setUser }),
|
||||
[value, user, setUser],
|
||||
);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ZinoContext.Provider value={ctx}>{children}</ZinoContext.Provider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Hook
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Access Zino services. Use with TanStack Query:
|
||||
*
|
||||
* ```tsx
|
||||
* const { views } = useZino();
|
||||
* const { data } = useQuery({
|
||||
* queryKey: ['recordview', rvId],
|
||||
* queryFn: () => views.getTabularView(rvId, { page: 1 }),
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
export function useZino(): ZinoContextValue {
|
||||
const ctx = useContext(ZinoContext);
|
||||
if (!ctx) {
|
||||
throw new Error("useZino must be used within a <ZinoProvider>");
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
|
||||
/** Re-export queryClient for direct invalidation in mutations. */
|
||||
export { queryClient };
|
||||
285
src/zino-sdk/types.ts
Normal file
285
src/zino-sdk/types.ts
Normal file
@ -0,0 +1,285 @@
|
||||
// ---------------------------------------------------------------------------
|
||||
// Zino Service SDK — TypeScript Interfaces
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// ---- Auth & User ----
|
||||
|
||||
export interface RoleAssignment {
|
||||
role_id: string;
|
||||
positions?: string[];
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
org_id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
roles: string[];
|
||||
groups: string[];
|
||||
role_assignments: RoleAssignment[];
|
||||
}
|
||||
|
||||
export interface LoginRequest {
|
||||
email: string;
|
||||
password: string;
|
||||
org_id?: string;
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
token: string;
|
||||
user: User;
|
||||
}
|
||||
|
||||
export interface App {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
org_id: string;
|
||||
}
|
||||
|
||||
// ---- Workflow Definition ----
|
||||
|
||||
export interface AllowedRole {
|
||||
role: string;
|
||||
positions?: string;
|
||||
}
|
||||
|
||||
export interface State {
|
||||
uid: string;
|
||||
name: string;
|
||||
type?: string;
|
||||
allowed_activities: string[];
|
||||
}
|
||||
|
||||
export interface Transition {
|
||||
from_state_id: string;
|
||||
by_activity_id?: string;
|
||||
by_outcome?: string;
|
||||
transition_type: string;
|
||||
to_state_id?: string;
|
||||
stage_gate_id?: string;
|
||||
}
|
||||
|
||||
export type DataType = "text" | "longtext" | "number" | "grid";
|
||||
|
||||
export interface GridColumn {
|
||||
id: string;
|
||||
name: string;
|
||||
data_type: DataType;
|
||||
}
|
||||
|
||||
export interface WorkflowDataField {
|
||||
id: string;
|
||||
uid: string;
|
||||
name: string;
|
||||
data_type: DataType;
|
||||
columns?: GridColumn[];
|
||||
}
|
||||
|
||||
export interface ActivityDataField {
|
||||
id: string;
|
||||
name: string;
|
||||
type: "local" | "mapped";
|
||||
data_type?: DataType;
|
||||
mandatory: boolean;
|
||||
mapped_workflow_field?: string;
|
||||
columns?: GridColumn[];
|
||||
}
|
||||
|
||||
export interface Activity {
|
||||
uid: string;
|
||||
name: string;
|
||||
type: string;
|
||||
allowed_roles?: AllowedRole[];
|
||||
allowed_groups?: string[];
|
||||
dynamic_rbac_allowed?: boolean;
|
||||
only_roles_positions?: boolean;
|
||||
data_fields?: ActivityDataField[];
|
||||
trigger_uid?: string;
|
||||
}
|
||||
|
||||
export interface StageGate {
|
||||
id: string;
|
||||
rules_id: string;
|
||||
}
|
||||
|
||||
export interface SGRuleOutcome {
|
||||
state_id: string;
|
||||
sg_rule_config?: {
|
||||
condition_field?: string;
|
||||
condition_operator?: string;
|
||||
condition_value?: unknown;
|
||||
};
|
||||
}
|
||||
|
||||
export interface StageGateRuleSet {
|
||||
id: string;
|
||||
default_state: string;
|
||||
other_states: SGRuleOutcome[];
|
||||
}
|
||||
|
||||
export interface WorkflowDefinition {
|
||||
workflow_id: string;
|
||||
version: number;
|
||||
name: string;
|
||||
states: State[];
|
||||
activities: Activity[];
|
||||
transitions: Transition[];
|
||||
workflow_data_fields: WorkflowDataField[];
|
||||
stage_gates?: StageGate[];
|
||||
sg_rules?: StageGateRuleSet[];
|
||||
}
|
||||
|
||||
// ---- Workflow Instances ----
|
||||
|
||||
export interface WorkflowInstance {
|
||||
instance_id: string;
|
||||
workflow_id: string;
|
||||
workflow_version?: number;
|
||||
current_state_id: string;
|
||||
current_state_name?: string;
|
||||
data: Record<string, unknown>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ActivityLogEntry {
|
||||
id: number;
|
||||
user_id: string;
|
||||
user_roles: string[];
|
||||
user_groups: string[];
|
||||
activity_id: string;
|
||||
data: Record<string, unknown>;
|
||||
execution_state: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// ---- Forms ----
|
||||
|
||||
export type FormFieldType = "text" | "paragraph" | "number";
|
||||
|
||||
export interface FormField {
|
||||
id: string;
|
||||
label: string;
|
||||
type: FormFieldType;
|
||||
mapped_activity_field_id: string;
|
||||
}
|
||||
|
||||
export interface FormConfig {
|
||||
title: string;
|
||||
fields: FormField[];
|
||||
}
|
||||
|
||||
export interface ActivityForm {
|
||||
id: string;
|
||||
workflow_id: string;
|
||||
activity_id: string;
|
||||
form_id: string;
|
||||
device_type: string;
|
||||
form_json: FormConfig;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// ---- Views ----
|
||||
|
||||
export interface ActionConfig {
|
||||
label: string;
|
||||
activity_uid: string;
|
||||
workflow_id?: string;
|
||||
}
|
||||
|
||||
export type ViewFieldType =
|
||||
| "global"
|
||||
| "local"
|
||||
| "system-global"
|
||||
| "system-local"
|
||||
| "action";
|
||||
|
||||
export interface ViewField {
|
||||
type: ViewFieldType;
|
||||
field_key: string;
|
||||
output_label: string;
|
||||
activity_id?: string;
|
||||
action?: ActionConfig;
|
||||
data_type: string;
|
||||
is_filter: boolean;
|
||||
is_search: boolean;
|
||||
}
|
||||
|
||||
export interface Column {
|
||||
key: string;
|
||||
label: string;
|
||||
data_type: string;
|
||||
sortable: boolean;
|
||||
filterable: boolean;
|
||||
searchable: boolean;
|
||||
}
|
||||
|
||||
export type SortDir = "asc" | "desc";
|
||||
|
||||
export interface TabularViewParams {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
sortBy?: string;
|
||||
sortDir?: SortDir;
|
||||
filters?: Record<string, string>;
|
||||
search?: string;
|
||||
}
|
||||
|
||||
export interface TabularViewResponse {
|
||||
rows: Record<string, unknown>[];
|
||||
total: number;
|
||||
totalPages?: number;
|
||||
page: number;
|
||||
columns: Column[];
|
||||
}
|
||||
|
||||
export interface ActivityEntry {
|
||||
activity_id: string;
|
||||
data: Record<string, unknown>;
|
||||
activity_performed_at: string;
|
||||
performed_by_id: string;
|
||||
}
|
||||
|
||||
export interface InstanceReport {
|
||||
workflow_id: string;
|
||||
instance_id: string;
|
||||
workflow_version: number;
|
||||
current_state_id: string;
|
||||
current_state_name: string;
|
||||
global_data: Record<string, unknown>;
|
||||
activities: ActivityEntry[];
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface StateTransition {
|
||||
from_state: string;
|
||||
to_state: string;
|
||||
activity_name: string;
|
||||
performed_by: string;
|
||||
timestamp: string;
|
||||
data: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface ReportSection {
|
||||
title: string;
|
||||
fields: { label: string; value: unknown }[];
|
||||
}
|
||||
|
||||
export interface DetailViewResponse {
|
||||
data: Record<string, unknown>;
|
||||
sections: ReportSection[];
|
||||
}
|
||||
|
||||
// ---- SDK-internal ----
|
||||
|
||||
export interface ZinoClientConfig {
|
||||
baseUrl: string;
|
||||
onAuthError?: () => void;
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
status: number;
|
||||
message: string;
|
||||
}
|
||||
197
src/zino-sdk/views.ts
Normal file
197
src/zino-sdk/views.ts
Normal file
@ -0,0 +1,197 @@
|
||||
import type { ZinoClient } from "./client";
|
||||
import type {
|
||||
ActivityLogEntry,
|
||||
Column,
|
||||
DetailViewResponse,
|
||||
InstanceReport,
|
||||
ReportSection,
|
||||
StateTransition,
|
||||
TabularViewParams,
|
||||
TabularViewResponse,
|
||||
} from "./types";
|
||||
import {
|
||||
mockDelay,
|
||||
mockTabularResponse,
|
||||
mockInstanceReport,
|
||||
mockAuditLog,
|
||||
} from "./mock";
|
||||
|
||||
/**
|
||||
* View and reporting methods — tabular record views, detail views,
|
||||
* and audit trails. Maps to view-service endpoints.
|
||||
*/
|
||||
export class ViewService {
|
||||
private client: ZinoClient;
|
||||
constructor(client: ZinoClient) {
|
||||
this.client = client;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch a paginated, sortable, filterable record view.
|
||||
* Maps to `GET /recordview?rv_id=…`.
|
||||
*/
|
||||
async getTabularView(
|
||||
viewId: string,
|
||||
params: TabularViewParams = {},
|
||||
): Promise<TabularViewResponse> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return mockTabularResponse(params);
|
||||
}
|
||||
|
||||
const qs = new URLSearchParams();
|
||||
qs.set("rv_id", viewId);
|
||||
if (params.page) qs.set("page", String(params.page));
|
||||
if (params.pageSize) qs.set("limit", String(params.pageSize));
|
||||
if (params.sortBy) qs.set("sort_by", params.sortBy);
|
||||
if (params.sortDir) qs.set("sort_dir", params.sortDir);
|
||||
if (params.search) qs.set("search", params.search);
|
||||
if (params.filters) {
|
||||
for (const [k, v] of Object.entries(params.filters)) {
|
||||
qs.set(`filter.${k}`, v);
|
||||
}
|
||||
}
|
||||
|
||||
const raw = await this.client.request<{
|
||||
config: { fields: Array<{ field_key: string; output_label: string; data_type: string; is_filter: boolean; is_search: boolean }> };
|
||||
data: Record<string, unknown>[];
|
||||
pagination?: { page: number; limit: number; total_count: number; total_pages: number };
|
||||
}>("GET", `/recordview?${qs.toString()}`);
|
||||
|
||||
const columns: Column[] = raw.config.fields
|
||||
.filter((f) => f.field_key !== "")
|
||||
.map((f) => ({
|
||||
key: f.field_key,
|
||||
label: f.output_label,
|
||||
data_type: f.data_type,
|
||||
sortable: true,
|
||||
filterable: f.is_filter,
|
||||
searchable: f.is_search,
|
||||
}));
|
||||
|
||||
const rows = Array.isArray(raw.data) ? raw.data : [];
|
||||
|
||||
return {
|
||||
rows,
|
||||
total: raw.pagination?.total_count ?? rows.length,
|
||||
totalPages: raw.pagination?.total_pages,
|
||||
page: raw.pagination?.page ?? params.page ?? 1,
|
||||
columns,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch a detail view for a specific workflow instance.
|
||||
* Maps to `GET /detailview?dv_id=…&instance_id=…`.
|
||||
*/
|
||||
async getDetailView(viewId: string, instanceId: string): Promise<DetailViewResponse> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
const data: Record<string, unknown> = {
|
||||
instance_id: instanceId,
|
||||
view_id: viewId,
|
||||
status: "Open",
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
return {
|
||||
data,
|
||||
sections: [
|
||||
{
|
||||
title: "Details",
|
||||
fields: Object.entries(data).map(([k, v]) => ({ label: k, value: v })),
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
const raw = await this.client.request<{
|
||||
config: { fields: Array<{ field_key: string; output_label: string; data_type: string }> };
|
||||
data: Record<string, unknown>;
|
||||
}>("GET", `/detailview?dv_id=${encodeURIComponent(viewId)}&instance_id=${encodeURIComponent(instanceId)}`);
|
||||
|
||||
const data = raw.data ?? {};
|
||||
const fields = (raw.config?.fields ?? []).filter((f) => f.field_key !== "");
|
||||
|
||||
const sections: ReportSection[] = [
|
||||
{
|
||||
title: "Details",
|
||||
fields: fields.length > 0
|
||||
? fields.map((f) => ({ label: f.output_label, value: data[f.field_key] }))
|
||||
: Object.entries(data).map(([k, v]) => ({ label: k, value: v })),
|
||||
},
|
||||
];
|
||||
|
||||
return { data, sections };
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch a full instance report — global data, activity history,
|
||||
* and state transitions.
|
||||
*/
|
||||
async getInstanceReport(
|
||||
workflowId: string,
|
||||
instanceId: string,
|
||||
): Promise<{ report: InstanceReport; sections: ReportSection[]; history: StateTransition[] }> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return mockInstanceReport(instanceId);
|
||||
}
|
||||
|
||||
const [instance, audit] = await Promise.all([
|
||||
this.client.request<InstanceReport>("POST", "/instance", {
|
||||
workflow_id: workflowId,
|
||||
instance_id: instanceId,
|
||||
}),
|
||||
this.client.request<ActivityLogEntry[]>(
|
||||
"GET",
|
||||
`/audit?instance_id=${encodeURIComponent(instanceId)}`,
|
||||
),
|
||||
]);
|
||||
|
||||
const sections: ReportSection[] = [
|
||||
{
|
||||
title: "Instance Details",
|
||||
fields: [
|
||||
{ label: "Instance ID", value: instance.instance_id },
|
||||
{ label: "Workflow", value: instance.workflow_id },
|
||||
{ label: "Current State", value: instance.current_state_name },
|
||||
{ label: "Created", value: instance.created_at },
|
||||
{ label: "Updated", value: instance.updated_at },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Data",
|
||||
fields: Object.entries((instance as any).data ?? instance.global_data ?? {}).map(([k, v]) => ({
|
||||
label: k,
|
||||
value: v,
|
||||
})),
|
||||
},
|
||||
];
|
||||
|
||||
const history: StateTransition[] = audit.map((entry) => ({
|
||||
from_state: "",
|
||||
to_state: entry.execution_state,
|
||||
activity_name: entry.activity_id,
|
||||
performed_by: entry.user_id,
|
||||
timestamp: entry.created_at,
|
||||
data: entry.data,
|
||||
}));
|
||||
|
||||
return { report: instance, sections, history };
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the raw audit log for an instance.
|
||||
*/
|
||||
async getAuditLog(instanceId: string): Promise<ActivityLogEntry[]> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return mockAuditLog();
|
||||
}
|
||||
|
||||
return this.client.request<ActivityLogEntry[]>(
|
||||
"GET",
|
||||
`/audit?instance_id=${encodeURIComponent(instanceId)}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
223
src/zino-sdk/workflow.ts
Normal file
223
src/zino-sdk/workflow.ts
Normal file
@ -0,0 +1,223 @@
|
||||
import type { ZinoClient } from "./client";
|
||||
import type {
|
||||
Activity,
|
||||
ActivityForm,
|
||||
WorkflowDefinition,
|
||||
WorkflowInstance,
|
||||
} from "./types";
|
||||
import {
|
||||
mockDelay,
|
||||
MOCK_WORKFLOW_DEF,
|
||||
mockWorkflowInstance,
|
||||
mockActivityForm,
|
||||
} from "./mock";
|
||||
|
||||
/**
|
||||
* Workflow execution methods — start instances, perform activities,
|
||||
* fetch definitions, forms, and instance state.
|
||||
* Maps to core-service and view-service endpoints.
|
||||
*/
|
||||
export class WorkflowService {
|
||||
private client: ZinoClient;
|
||||
constructor(client: ZinoClient) {
|
||||
this.client = client;
|
||||
}
|
||||
|
||||
/**
|
||||
* Start a new workflow instance.
|
||||
* Core-service returns a wrapped response; we extract instance_id.
|
||||
*/
|
||||
async startWorkflow(
|
||||
workflowId: string,
|
||||
activityId: string,
|
||||
data?: Record<string, unknown>,
|
||||
): Promise<WorkflowInstance> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return mockWorkflowInstance(workflowId);
|
||||
}
|
||||
|
||||
const raw = await this.client.request<{
|
||||
success: boolean;
|
||||
instance_id?: string;
|
||||
data?: Record<string, unknown>;
|
||||
}>("POST", "/start", {
|
||||
workflow_id: workflowId,
|
||||
activity_id: activityId,
|
||||
data,
|
||||
});
|
||||
|
||||
return {
|
||||
instance_id: raw.instance_id ?? "",
|
||||
workflow_id: workflowId,
|
||||
current_state_id: "",
|
||||
current_state_name: "",
|
||||
data: raw.data ?? {},
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
} as WorkflowInstance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute an activity on a running workflow instance.
|
||||
* Core-service returns a wrapped response; we extract instance_id.
|
||||
*/
|
||||
async performActivity(
|
||||
workflowId: string,
|
||||
instanceId: string,
|
||||
activityId: string,
|
||||
data?: Record<string, unknown>,
|
||||
): Promise<WorkflowInstance> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return mockWorkflowInstance(workflowId, instanceId);
|
||||
}
|
||||
|
||||
const raw = await this.client.request<{
|
||||
success: boolean;
|
||||
instance_id?: string;
|
||||
data?: Record<string, unknown>;
|
||||
}>("POST", "/activity", {
|
||||
workflow_id: workflowId,
|
||||
instance_id: instanceId,
|
||||
activity_id: activityId,
|
||||
data,
|
||||
});
|
||||
|
||||
return {
|
||||
instance_id: raw.instance_id ?? instanceId,
|
||||
workflow_id: workflowId,
|
||||
current_state_id: "",
|
||||
current_state_name: "",
|
||||
data: raw.data ?? {},
|
||||
created_at: "",
|
||||
updated_at: new Date().toISOString(),
|
||||
} as WorkflowInstance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch instance state and compute available activities.
|
||||
* Uses /api-docs to get the activity list (no states endpoint exists),
|
||||
* so all non-INIT activities are returned — the server enforces real constraints.
|
||||
*/
|
||||
async getInstanceState(
|
||||
workflowId: string,
|
||||
instanceId: string,
|
||||
): Promise<{
|
||||
instance: WorkflowInstance;
|
||||
availableActivities: Activity[];
|
||||
}> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return {
|
||||
instance: mockWorkflowInstance(workflowId, instanceId),
|
||||
availableActivities: MOCK_WORKFLOW_DEF.activities.filter(
|
||||
(a) => a.type !== "INIT",
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
const [apiDocs, instance] = await Promise.all([
|
||||
this.client.request<Array<{
|
||||
activity_uid: string;
|
||||
activity_name: string;
|
||||
type: string;
|
||||
}>>("GET", `/api-docs?workflow_id=${encodeURIComponent(workflowId)}`),
|
||||
this.client.request<WorkflowInstance>("POST", "/instance", {
|
||||
workflow_id: workflowId,
|
||||
instance_id: instanceId,
|
||||
}),
|
||||
]);
|
||||
|
||||
// api-docs returns activity documentation; filter out INIT activities
|
||||
const availableActivities: Activity[] = (apiDocs ?? [])
|
||||
.filter((a) => a.type !== "INIT")
|
||||
.map((a) => ({
|
||||
uid: a.activity_uid,
|
||||
name: a.activity_name,
|
||||
type: a.type,
|
||||
}));
|
||||
|
||||
return { instance, availableActivities };
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the workflow definition.
|
||||
* Note: /api-docs returns activity documentation (not full definition with states).
|
||||
* We build a partial WorkflowDefinition from it — states/transitions will be empty.
|
||||
*/
|
||||
async getWorkflowDefinition(
|
||||
workflowId: string,
|
||||
): Promise<WorkflowDefinition> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return { ...MOCK_WORKFLOW_DEF, workflow_id: workflowId };
|
||||
}
|
||||
|
||||
const apiDocs = await this.client.request<Array<{
|
||||
activity_uid: string;
|
||||
activity_name: string;
|
||||
type: string;
|
||||
}>>("GET", `/api-docs?workflow_id=${encodeURIComponent(workflowId)}`);
|
||||
|
||||
return {
|
||||
workflow_id: workflowId,
|
||||
version: 1,
|
||||
name: workflowId,
|
||||
states: [],
|
||||
activities: (apiDocs ?? []).map((a) => ({
|
||||
uid: a.activity_uid,
|
||||
name: a.activity_name,
|
||||
type: a.type,
|
||||
})),
|
||||
transitions: [],
|
||||
workflow_data_fields: [],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the form schema for a specific activity.
|
||||
*/
|
||||
async getForm(
|
||||
workflowId: string,
|
||||
activityId: string,
|
||||
deviceType: string = "desktop",
|
||||
instanceId?: string,
|
||||
): Promise<ActivityForm> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return mockActivityForm(workflowId, activityId);
|
||||
}
|
||||
|
||||
return this.client.request<ActivityForm>("POST", "/form", {
|
||||
workflow_id: workflowId,
|
||||
activity_id: activityId,
|
||||
device_type: deviceType,
|
||||
...(instanceId ? { instance_id: instanceId } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit form data for an activity.
|
||||
*/
|
||||
async submitForm(
|
||||
workflowId: string,
|
||||
activityId: string,
|
||||
formData: Record<string, unknown>,
|
||||
deviceType: string = "desktop",
|
||||
instanceId?: string,
|
||||
): Promise<WorkflowInstance> {
|
||||
if (this.client.isMock) {
|
||||
await mockDelay();
|
||||
return mockWorkflowInstance(workflowId, instanceId);
|
||||
}
|
||||
|
||||
return this.client.request<WorkflowInstance>("POST", "/form/submit", {
|
||||
workflow_id: workflowId,
|
||||
activity_id: activityId,
|
||||
device_type: deviceType,
|
||||
form_data: formData,
|
||||
...(instanceId ? { instance_id: instanceId } : {}),
|
||||
});
|
||||
}
|
||||
}
|
||||
13
tailwind.config.js
Normal file
13
tailwind.config.js
Normal file
@ -0,0 +1,13 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
19
tsconfig.app.json
Normal file
19
tsconfig.app.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": false,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
15
tsconfig.node.json
Normal file
15
tsconfig.node.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
33
vite.config.ts
Normal file
33
vite.config.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
const devTarget = 'https://dev.getzino.in'
|
||||
const proxy = (target: string) => ({ target, changeOrigin: true, secure: false })
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
base: process.env.VITE_BASE_URL ?? '/p2p-dev/',
|
||||
server: {
|
||||
port: 3006,
|
||||
proxy: {
|
||||
// user-service
|
||||
'/usr': proxy(devTarget),
|
||||
'/login': proxy(devTarget),
|
||||
'/apps': proxy(devTarget),
|
||||
'/agents': proxy(devTarget),
|
||||
// core-service
|
||||
'/start': proxy(devTarget),
|
||||
'/activity': proxy(devTarget),
|
||||
'/instance': proxy(devTarget),
|
||||
'/form': proxy(devTarget),
|
||||
'/pa': proxy(devTarget),
|
||||
// view-service (legacy)
|
||||
'/recordview': proxy(devTarget),
|
||||
'/detailview': proxy(devTarget),
|
||||
'/audit': proxy(devTarget),
|
||||
'/api-docs': proxy(devTarget),
|
||||
// view-service (app-scoped)
|
||||
'/app/': proxy(devTarget),
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user