trackgo-fe/packages/ui/src/components/examples/style-guide-3.tsx

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>
  );
}