feat: 實作 Multi-tenancy 多租戶架構 (stancl/tenancy)
- 安裝並設定 stancl/tenancy 套件 - 分離 Central / Tenant migrations - 建立 Tenant Model 與資料遷移指令 - 建立房東後台 CRUD (Landlord Dashboard) - 新增租戶管理頁面 (列表、新增、編輯、詳情) - 新增域名管理功能 - 更新部署手冊
This commit is contained in:
165
resources/js/Pages/Landlord/Tenant/Show.tsx
Normal file
165
resources/js/Pages/Landlord/Tenant/Show.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
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;
|
||||
email: string | null;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
domains: Domain[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tenant: Tenant;
|
||||
}
|
||||
|
||||
export default function TenantShow({ tenant }: Props) {
|
||||
const [showAddDomain, setShowAddDomain] = useState(false);
|
||||
const { data, setData, post, processing, errors, reset } = useForm({
|
||||
domain: "",
|
||||
});
|
||||
|
||||
const handleAddDomain = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
post(route("landlord.tenants.domains.store", tenant.id), {
|
||||
onSuccess: () => {
|
||||
reset();
|
||||
setShowAddDomain(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
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>
|
||||
<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>
|
||||
|
||||
{/* 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.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>
|
||||
</div>
|
||||
</LandlordLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user