305 lines
14 KiB
TypeScript
305 lines
14 KiB
TypeScript
import LandlordLayout from "@/Layouts/LandlordLayout";
|
||
import { Link, useForm, router } from "@inertiajs/react";
|
||
import { Globe, Plus, Trash2, ArrowLeft } from "lucide-react";
|
||
import { FormEvent, useState } from "react";
|
||
|
||
interface Domain {
|
||
id: number;
|
||
domain: string;
|
||
}
|
||
|
||
interface Tenant {
|
||
id: string;
|
||
name: string;
|
||
short_name: string | null;
|
||
email: string | null;
|
||
is_active: boolean;
|
||
created_at: string;
|
||
updated_at: string;
|
||
domains: Domain[];
|
||
}
|
||
|
||
interface Token {
|
||
id: number;
|
||
name: string;
|
||
last_used_at: string;
|
||
created_at: string;
|
||
}
|
||
|
||
interface Flash {
|
||
success: string | null;
|
||
error: string | null;
|
||
new_token: string | null;
|
||
}
|
||
|
||
interface Props {
|
||
tenant: Tenant;
|
||
tokens: Token[];
|
||
flash: Flash;
|
||
}
|
||
|
||
export default function TenantShow({ tenant, tokens = [], flash }: Props) {
|
||
const [showAddDomain, setShowAddDomain] = useState(false);
|
||
const [showAddToken, setShowAddToken] = useState(false);
|
||
|
||
const { data, setData, post, processing, errors, reset } = useForm({
|
||
domain: "",
|
||
});
|
||
|
||
// Token Form
|
||
const {
|
||
data: tokenData,
|
||
setData: setTokenData,
|
||
post: postToken,
|
||
processing: processingToken,
|
||
reset: resetToken
|
||
} = useForm({
|
||
name: "",
|
||
});
|
||
|
||
const handleAddDomain = (e: FormEvent) => {
|
||
e.preventDefault();
|
||
post(route("landlord.tenants.domains.store", tenant.id), {
|
||
onSuccess: () => {
|
||
reset();
|
||
setShowAddDomain(false);
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleAddToken = (e: FormEvent) => {
|
||
e.preventDefault();
|
||
postToken(route("landlord.tenants.tokens.store", tenant.id), {
|
||
onSuccess: () => {
|
||
resetToken();
|
||
// Don't close immediately if we want to show flash message?
|
||
// Flash message usually appears on redirect back.
|
||
setShowAddToken(false);
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleRevokeToken = (tokenId: number) => {
|
||
if (confirm("確定要撤銷此金鑰嗎？撤銷後無法復原，POS 連線將中斷。")) {
|
||
router.delete(route("landlord.tenants.tokens.destroy", [tenant.id, tokenId]));
|
||
}
|
||
};
|
||
|
||
const handleRemoveDomain = (domainId: number) => {
|
||
if (confirm("確定要移除這個域名嗎？")) {
|
||
router.delete(route("landlord.tenants.domains.destroy", [tenant.id, domainId]));
|
||
}
|
||
};
|
||
|
||
return (
|
||
<LandlordLayout
|
||
title="客戶詳情"
|
||
>
|
||
<div className="max-w-3xl space-y-6">
|
||
{/* Back Link */}
|
||
<Link
|
||
href="/landlord/tenants"
|
||
className="inline-flex items-center gap-1 text-slate-600 hover:text-slate-900"
|
||
>
|
||
<ArrowLeft className="w-4 h-4" />
|
||
返回列表
|
||
</Link>
|
||
|
||
{/* Header */}
|
||
<div className="flex items-start justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-900">{tenant.name}</h1>
|
||
<p className="text-slate-500 mt-1">客戶 ID: {tenant.id}</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Link
|
||
href={`/landlord/tenants/${tenant.id}/branding`}
|
||
className="bg-primary-main hover:bg-primary-dark text-white px-4 py-2 rounded-lg transition-colors"
|
||
>
|
||
樣式管理
|
||
</Link>
|
||
<Link
|
||
href={`/landlord/tenants/${tenant.id}/edit`}
|
||
className="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg transition-colors"
|
||
>
|
||
編輯
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info Card */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||
<h2 className="text-lg font-semibold text-slate-900 mb-4">基本資訊</h2>
|
||
<dl className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<dt className="text-sm text-slate-500">狀態</dt>
|
||
<dd className="mt-1">
|
||
<span
|
||
className={`px-2 py-1 rounded-full text-xs font-medium ${tenant.is_active
|
||
? "bg-green-100 text-green-700"
|
||
: "bg-slate-100 text-slate-600"
|
||
}`}
|
||
>
|
||
{tenant.is_active ? "啟用" : "停用"}
|
||
</span>
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-sm text-slate-500">客戶簡稱</dt>
|
||
<dd className="mt-1 text-slate-900">{tenant.short_name || "-"}</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-sm text-slate-500">聯絡信箱</dt>
|
||
<dd className="mt-1 text-slate-900">{tenant.email || "-"}</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-sm text-slate-500">建立時間</dt>
|
||
<dd className="mt-1 text-slate-900">{tenant.created_at}</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-sm text-slate-500">更新時間</dt>
|
||
<dd className="mt-1 text-slate-900">{tenant.updated_at}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
{/* Domains Card */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-lg font-semibold text-slate-900">綁定域名</h2>
|
||
<button
|
||
onClick={() => setShowAddDomain(!showAddDomain)}
|
||
className="text-primary-main hover:text-primary-dark flex items-center gap-1 text-sm"
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
新增域名
|
||
</button>
|
||
</div>
|
||
|
||
{showAddDomain && (
|
||
<form onSubmit={handleAddDomain} className="mb-4 flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={data.domain}
|
||
onChange={(e) => setData("domain", e.target.value)}
|
||
placeholder="例如：koori.erp.koori.tw"
|
||
className="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
disabled={processing}
|
||
className="bg-primary-main hover:bg-primary-dark text-white px-4 py-2 rounded-lg disabled:opacity-50"
|
||
>
|
||
新增
|
||
</button>
|
||
</form>
|
||
)}
|
||
{errors.domain && <p className="mb-4 text-sm text-red-500">{errors.domain}</p>}
|
||
|
||
{tenant.domains.length === 0 ? (
|
||
<p className="text-slate-500 text-sm">尚未綁定任何域名</p>
|
||
) : (
|
||
<ul className="space-y-2">
|
||
{tenant.domains.map((domain) => (
|
||
<li
|
||
key={domain.id}
|
||
className="flex items-center justify-between p-3 bg-slate-50 rounded-lg"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Globe className="w-4 h-4 text-slate-400" />
|
||
<span className="text-slate-900">{domain.domain}</span>
|
||
</div>
|
||
<button
|
||
onClick={() => handleRemoveDomain(domain.id)}
|
||
className="p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
|
||
>
|
||
<Trash2 className="w-4 h-4" />
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
|
||
{/* API Tokens Card */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-lg font-semibold text-slate-900">API 金鑰 (POS 整合)</h2>
|
||
<button
|
||
onClick={() => setShowAddToken(!showAddToken)}
|
||
className="text-primary-main hover:text-primary-dark flex items-center gap-1 text-sm"
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
新增金鑰
|
||
</button>
|
||
</div>
|
||
|
||
{flash?.new_token && (
|
||
<div className="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
||
<p className="text-sm text-green-800 font-bold mb-1">金鑰建立成功！請立即複製，離開後將無法再次查看。</p>
|
||
<div className="flex items-center gap-2">
|
||
<code className="flex-1 bg-white px-2 py-1 rounded border border-green-200 text-sm break-all font-mono select-all">
|
||
{flash.new_token}
|
||
</code>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showAddToken && (
|
||
<form onSubmit={handleAddToken} className="mb-4 flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={tokenData.name}
|
||
onChange={(e) => setTokenData("name", e.target.value)}
|
||
placeholder="金鑰名稱 (例如: POS-01)"
|
||
className="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
disabled={processingToken}
|
||
className="bg-primary-main hover:bg-primary-dark text-white px-4 py-2 rounded-lg disabled:opacity-50"
|
||
>
|
||
建立
|
||
</button>
|
||
</form>
|
||
)}
|
||
|
||
{tokens.length === 0 ? (
|
||
<p className="text-slate-500 text-sm">尚未建立任何 API 金鑰</p>
|
||
) : (
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm text-left">
|
||
<thead className="text-xs text-slate-500 uppercase bg-slate-50">
|
||
<tr>
|
||
<th className="px-3 py-2">名稱</th>
|
||
<th className="px-3 py-2">建立時間</th>
|
||
<th className="px-3 py-2">最後使用</th>
|
||
<th className="px-3 py-2 text-right">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{tokens.map((token) => (
|
||
<tr key={token.id} className="border-b border-slate-100 last:border-0 hover:bg-slate-50">
|
||
<td className="px-3 py-2 font-medium text-slate-900">{token.name}</td>
|
||
<td className="px-3 py-2 text-slate-500">{token.created_at}</td>
|
||
<td className="px-3 py-2 text-slate-500">{token.last_used_at}</td>
|
||
<td className="px-3 py-2 text-right">
|
||
<button
|
||
onClick={() => handleRevokeToken(token.id)}
|
||
className="text-red-600 hover:text-red-900 hover:underline"
|
||
>
|
||
撒銷
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</LandlordLayout>
|
||
);
|
||
}
|