60 lines
2.2 KiB
TypeScript
Executable File
60 lines
2.2 KiB
TypeScript
Executable File
import { useState } from 'react';
|
|
import type { AssetsTab } from './assetTypes';
|
|
import AssetManagement from './AssetManagement';
|
|
import AssetTheory from './AssetTheory';
|
|
import ShipInsurance from './ShipInsurance';
|
|
import { useFeatureTracking } from '@common/hooks/useFeatureTracking';
|
|
|
|
// ── Main AssetsView ──
|
|
|
|
export function AssetsView() {
|
|
const [activeTab, setActiveTab] = useState<AssetsTab>('management');
|
|
|
|
// 내부 탭 전환 시 자동 감사 로그
|
|
useFeatureTracking(`assets:${activeTab}`);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full w-full bg-bg-base">
|
|
{/* Tab Navigation */}
|
|
<div className="flex items-center justify-between border-b border-stroke bg-bg-surface shrink-0">
|
|
<div className="flex">
|
|
{[
|
|
{ id: 'management' as const, label: '자산 관리' },
|
|
// { id: 'upload' as const, label: '자산 현행화 (업로드)' },
|
|
{ id: 'theory' as const, label: '방제자원 이론' },
|
|
{ id: 'insurance' as const, label: '선박 보험정보' },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`px-5 py-3.5 text-xs font-semibold transition-all font-korean border-b-2 ${
|
|
activeTab === tab.id
|
|
? 'text-color-accent border-color-accent'
|
|
: 'text-fg-disabled border-transparent hover:text-fg-sub'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{/* <div
|
|
className="flex items-center gap-1.5 px-3.5 py-1.5 border rounded-full text-label-2 text-color-info font-korean mr-4"
|
|
style={{ borderColor: 'color-mix(in srgb, var(--color-info) 30%, transparent)' }}
|
|
>
|
|
👤 남해청_방제과 (수정 권한 ✅)
|
|
</div> */}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-auto px-6 py-5">
|
|
<div className="w-full h-full">
|
|
{activeTab === 'management' && <AssetManagement />}
|
|
{/* {activeTab === 'upload' && <AssetUpload />} */}
|
|
{activeTab === 'theory' && <AssetTheory />}
|
|
{activeTab === 'insurance' && <ShipInsurance />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|