eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: add example components and system pages for UI showcase

Browse Source 
- Introduced HeaderExample component for header display.
- Created StyleGuideOne, StyleGuideTwo, and StyleGuideThree components showcasing various UI elements and layouts.
- Added system pages: ComingSoon, Forbidden, Maintenance, and NotFound for better user experience during different states.
- Updated index.ts to export new components for easier access.
This commit is contained in:
Firman Ramdhani
2026-01-19 16:04:07 +07:00
parent 2313284aab
commit 23c869e574
15 changed files with 838 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/examples/style-guide-3.tsx
+232
View File
@@ -0,0 +1,232 @@
import React from 'react';
// ==========================================================
// COMPACT UI COMPONENTS
// ==========================================================
const SectionTitle = ({ children }: { children: React.ReactNode }) => (
<h3 className="text-[11px] font-bold text-gray-500 uppercase tracking-widest mb-2 border-b border-gray-200 pb-1 italic">
{children}
</h3>
);
const CompactCard = ({ title, children, footer }: any) => (
<div className="bg-white border border-gray-200 rounded shadow-sm flex flex-col">
{title && (
<div className="px-3 py-1.5 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
<span className="text-sm font-bold text-gray-700 tracking-tight">{title}</span>
</div>
)}
<div className="p-3 flex-1">{children}</div>
{footer && <div className="px-3 py-2 bg-gray-50/80 border-t border-gray-100">{footer}</div>}
</div>
);
const Badge = ({ children, variant = 'info' }: any) => {
const styles: any = {
success: 'bg-green-50 text-green-700 border-green-200',
error: 'bg-red-50 text-red-700 border-red-200',
warning: 'bg-amber-50 text-amber-700 border-amber-200',
info: 'bg-brand-50 text-brand-700 border-brand-200',
};
return (
<span
className={`px-1.5 py-0.5 rounded-sm text-[10px] font-bold border ${styles[variant]} uppercase tracking-tighter`}
>
{children}
</span>
);
};
// ==========================================================
// MAIN STYLE SHOWCASE
// ==========================================================
export function StyleGuideTree() {
return (
<div className="min-h-screen bg-gray-100 p-3 space-y-3 font-sans text-gray-800">
{/* GLOBAL ACTION BAR */}
<div className="bg-brand-900 text-white p-3 rounded flex justify-between items-center shadow-md">
<div className="flex items-center gap-3">
<div className="bg-white p-1 rounded text-brand-900 font-bold text-xs uppercase">ERP-SYSTEM</div>
<h1 className="text-base font-bold tracking-tight">Financial Postings & Asset Management</h1>
</div>
<div className="flex gap-2">
<button className="bg-brand-700 hover:bg-brand-600 px-3 py-1 rounded text-base font-medium border border-brand-600 transition-all">
Simulate
</button>
<button className="bg-white text-brand-900 hover:bg-gray-100 px-3 py-1 rounded text-base font-bold shadow-sm transition-all">
Post Document
</button>
</div>
</div>
<div className="grid grid-cols-12 gap-3">
{/* ROW 1: ANALYTICS & STATS (Top Row) */}
{[
{ label: 'Total Debit', val: 'IDR 4.500.000.000', sub: '24 Entries Today', color: 'text-gray-900' },
{ label: 'Total Credit', val: 'IDR 4.500.000.000', sub: 'Balanced', color: 'text-green-600' },
{ label: 'Unposted Items', val: '12 Documents', sub: 'High Priority', color: 'text-amber-600' },
{ label: 'System Health', val: '99.9%', sub: 'No Latency', color: 'text-brand-600' },
].map((stat, i) => (
<div key={i} className="col-span-12 md:col-span-3 bg-white p-3 rounded border border-gray-200 shadow-sm">
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{stat.label}</p>
<p className={`text-lg font-bold ${stat.color} tracking-tight`}>{stat.val}</p>
<p className="text-[11px] text-gray-400 font-medium italic">{stat.sub}</p>
</div>
))}
{/* ROW 2: FORMS & CONTROLS (Left Panel) */}
<div className="col-span-12 lg:col-span-4 space-y-3">
<CompactCard title="Document Header">
<div className="grid grid-cols-2 gap-3">
<div className="col-span-1 flex flex-col">
<label className="text-xs font-bold text-gray-400 uppercase italic mb-1 tracking-tight">
Posting Date
</label>
<input
type="date"
className="border border-gray-300 rounded px-2 py-1 text-base outline-none focus:border-brand-500 bg-gray-50"
defaultValue="2026-01-19"
/>
</div>
<div className="col-span-1 flex flex-col">
<label className="text-xs font-bold text-gray-400 uppercase italic mb-1 tracking-tight">Period</label>
<input
type="text"
readOnly
className="border border-gray-200 rounded px-2 py-1 text-base bg-gray-100 text-gray-500"
defaultValue="01 / 2026"
/>
</div>
<div className="col-span-2 flex flex-col">
<label className="text-xs font-bold text-gray-400 uppercase italic mb-1 tracking-tight">
Document Type
</label>
<select className="border border-gray-300 rounded px-2 py-1 text-base outline-none bg-white">
<option>SA - GL Account Document</option>
<option>DZ - Customer Payment</option>
</select>
</div>
<div className="col-span-2 flex flex-col">
<label className="text-xs font-bold text-gray-400 uppercase italic mb-1 tracking-tight">
Header Text
</label>
<textarea
className="border border-gray-300 rounded px-2 py-1 text-base h-16 outline-none focus:border-brand-500"
placeholder="Monthly reconciliation..."
></textarea>
</div>
</div>
</CompactCard>
<CompactCard title="Operational Controls">
<div className="space-y-2">
<label className="flex items-center gap-3 p-2 border border-gray-100 rounded hover:bg-gray-50 cursor-pointer transition-colors">
<input type="checkbox" className="accent-brand-600 w-4 h-4" defaultChecked />
<span className="text-base font-medium">Automatic Tax Calculation</span>
</label>
<label className="flex items-center gap-3 p-2 border border-gray-100 rounded hover:bg-gray-50 cursor-pointer transition-colors">
<input type="checkbox" className="accent-brand-600 w-4 h-4" />
<span className="text-base font-medium">Post to All Ledgers</span>
</label>
</div>
</CompactCard>
</div>
{/* ROW 3: COMPLEX DATA TABLE (Center Panel) */}
<div className="col-span-12 lg:col-span-8 space-y-3">
<CompactCard className="!p-0 overflow-hidden">
<div className="bg-gray-50/50 px-4 py-2 border-b border-gray-200 flex justify-between items-center">
<SectionTitle>Line Item Entries (001 - 005)</SectionTitle>
<div className="flex gap-2 mb-2">
<button className="text-[10px] font-bold text-brand-700 bg-brand-50 px-2 py-0.5 rounded border border-brand-100">
ADD ROW
</button>
<button className="text-[10px] font-bold text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">
CLEAR ALL
</button>
</div>
</div>
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr className="bg-gray-100 border-b border-gray-200">
<th className="px-3 py-1.5 text-[10px] font-bold text-gray-500 uppercase">Item</th>
<th className="px-3 py-1.5 text-[10px] font-bold text-gray-500 uppercase">GL Account</th>
<th className="px-3 py-1.5 text-[10px] font-bold text-gray-500 uppercase">Cost Center</th>
<th className="px-3 py-1.5 text-[10px] font-bold text-gray-500 uppercase text-right">
Amount (LC)
</th>
<th className="px-3 py-1.5 text-[10px] font-bold text-gray-500 uppercase text-center">Ind.</th>
<th className="px-3 py-1.5 text-[10px] font-bold text-gray-500 uppercase text-center">Status</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
{[10, 20, 30, 40, 50].map((item, idx) => (
<tr key={item} className="hover:bg-brand-50/30 transition-colors group">
<td className="px-3 py-1.5 text-center font-mono text-gray-400">{item}</td>
<td className="px-3 py-1.5">
<div className="font-bold text-brand-700 text-base leading-none">11000{idx}</div>
<div className="text-[10px] text-gray-400 italic">Petty Cash - Main Office</div>
</td>
<td className="px-3 py-1.5">
<div className="font-medium text-gray-700">CC-HEAD-01</div>
</td>
<td className="px-3 py-1.5 text-right font-mono font-bold text-gray-900">
{(item * 1500000).toLocaleString('id-ID')}
</td>
<td className="px-3 py-1.5 text-center font-bold text-brand-600">{idx % 2 === 0 ? 'S' : 'H'}</td>
<td className="px-3 py-1.5 text-center">
<Badge variant={idx === 2 ? 'warning' : 'success'}>{idx === 2 ? 'Review' : 'Valid'}</Badge>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="bg-gray-50 p-3 flex justify-end gap-10 border-t border-gray-200">
<div className="text-right">
<p className="text-[10px] font-bold text-gray-400 uppercase">Total Debit</p>
<p className="text-lg font-bold text-gray-900 tracking-tight">IDR 450.000.000</p>
</div>
<div className="text-right">
<p className="text-[10px] font-bold text-gray-400 uppercase">Total Credit</p>
<p className="text-lg font-bold text-brand-600 tracking-tight">IDR 450.000.000</p>
</div>
</div>
</CompactCard>
{/* MESSAGE LOGS / ACTIVITY */}
<div className="grid grid-cols-2 gap-3">
<CompactCard title="System Activity">
<div className="space-y-2">
{[
{ t: '09:41', u: 'System', m: 'Auto-balancing completed successfully.' },
{ t: '10:05', u: 'Admin', m: 'Modified Cost Center on Item 20.' },
].map((log, i) => (
<div key={i} className="text-base flex gap-2 border-b border-gray-50 pb-1">
<span className="font-mono text-brand-600 text-xs">{log.t}</span>
<span className="text-gray-600 leading-tight">
<strong>{log.u}:</strong> {log.m}
</span>
</div>
))}
</div>
</CompactCard>
<CompactCard title="Quick Attachments">
<div className="flex flex-wrap gap-2">
<div className="border border-dashed border-gray-300 rounded p-2 text-center w-full hover:bg-gray-50 cursor-pointer">
<span className="text-xs font-bold text-gray-400">+ DROP FILES HERE</span>
</div>
<div className="bg-gray-100 px-2 py-1 rounded text-[11px] font-medium flex items-center gap-2">
📄 invoice_001.pdf <span className="text-red-500 font-bold cursor-pointer">×</span>
</div>
</div>
</CompactCard>
</div>
</div>
</div>
</div>
);
}