feat: 實作 Multi-tenancy 多租戶架構 (stancl/tenancy)
- 安裝並設定 stancl/tenancy 套件 - 分離 Central / Tenant migrations - 建立 Tenant Model 與資料遷移指令 - 建立房東後台 CRUD (Landlord Dashboard) - 新增租戶管理頁面 (列表、新增、編輯、詳情) - 新增域名管理功能 - 更新部署手冊
This commit is contained in:
132
resources/js/Layouts/LandlordLayout.tsx
Normal file
132
resources/js/Layouts/LandlordLayout.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { Link, usePage } from "@inertiajs/react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Building2,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
import { Toaster } from "sonner";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/Components/ui/dropdown-menu";
|
||||
|
||||
interface LandlordLayoutProps {
|
||||
children: React.ReactNode;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export default function LandlordLayout({ children, title }: LandlordLayoutProps) {
|
||||
const { url, props } = usePage();
|
||||
// @ts-ignore
|
||||
const user = props.auth?.user || { name: 'Admin', username: 'admin' };
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: "儀表板",
|
||||
href: "/landlord",
|
||||
icon: LayoutDashboard,
|
||||
active: url === "/landlord" || url === "/landlord/",
|
||||
},
|
||||
{
|
||||
label: "租戶管理",
|
||||
href: "/landlord/tenants",
|
||||
icon: Building2,
|
||||
active: url.startsWith("/landlord/tenants"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-slate-50">
|
||||
{/* Sidebar */}
|
||||
<aside className="fixed left-0 top-0 bottom-0 w-64 bg-slate-900 text-white flex flex-col">
|
||||
<div className="h-16 flex items-center px-6 border-b border-slate-800">
|
||||
<Link href="/landlord" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary-main rounded-lg flex items-center justify-center">
|
||||
<Building2 className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span className="font-bold text-lg">房東後台</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-4 space-y-1">
|
||||
{menuItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors",
|
||||
item.active
|
||||
? "bg-primary-main text-white"
|
||||
: "text-slate-400 hover:bg-slate-800 hover:text-white"
|
||||
)}
|
||||
>
|
||||
<item.icon className="w-5 h-5" />
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-slate-800">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm"
|
||||
>
|
||||
← 返回 ERP 系統
|
||||
</Link>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 ml-64">
|
||||
{/* Header */}
|
||||
<header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6">
|
||||
<h1 className="text-lg font-semibold text-slate-900">
|
||||
{title || "房東管理後台"}
|
||||
</h1>
|
||||
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger className="flex items-center gap-2 outline-none group">
|
||||
<div className="flex flex-col items-end mr-1">
|
||||
<span className="text-sm font-medium text-slate-700">
|
||||
{user.name}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500">系統管理員</span>
|
||||
</div>
|
||||
<div className="h-9 w-9 bg-slate-100 rounded-full flex items-center justify-center">
|
||||
<User className="h-5 w-5 text-slate-600" />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56 z-[100]">
|
||||
<DropdownMenuLabel>我的帳號</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={route('logout')}
|
||||
method="post"
|
||||
as="button"
|
||||
className="w-full flex items-center cursor-pointer text-red-600"
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
<span>登出系統</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Toaster richColors closeButton position="top-center" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
106
resources/js/Pages/Landlord/Dashboard.tsx
Normal file
106
resources/js/Pages/Landlord/Dashboard.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import LandlordLayout from "@/Layouts/LandlordLayout";
|
||||
import { Building2, Users, Activity } from "lucide-react";
|
||||
import { Link } from "@inertiajs/react";
|
||||
|
||||
interface Tenant {
|
||||
id: string;
|
||||
name: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
domains: string[];
|
||||
}
|
||||
|
||||
interface DashboardProps {
|
||||
totalTenants: number;
|
||||
activeTenants: number;
|
||||
recentTenants: Tenant[];
|
||||
}
|
||||
|
||||
export default function Dashboard({ totalTenants, activeTenants, recentTenants }: DashboardProps) {
|
||||
const statsCards = [
|
||||
{
|
||||
title: "租戶總數",
|
||||
value: totalTenants,
|
||||
icon: Building2,
|
||||
color: "bg-blue-500",
|
||||
},
|
||||
{
|
||||
title: "啟用中",
|
||||
value: activeTenants,
|
||||
icon: Activity,
|
||||
color: "bg-green-500",
|
||||
},
|
||||
{
|
||||
title: "停用中",
|
||||
value: totalTenants - activeTenants,
|
||||
icon: Users,
|
||||
color: "bg-slate-400",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<LandlordLayout title="儀表板">
|
||||
<div className="space-y-6">
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{statsCards.map((stat) => (
|
||||
<div
|
||||
key={stat.title}
|
||||
className="bg-white rounded-xl border border-slate-200 p-6 flex items-center gap-4"
|
||||
>
|
||||
<div className={`w-12 h-12 ${stat.color} rounded-lg flex items-center justify-center`}>
|
||||
<stat.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">{stat.title}</p>
|
||||
<p className="text-2xl font-bold text-slate-900">{stat.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Recent Tenants */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900">最近新增的租戶</h2>
|
||||
<Link
|
||||
href="/landlord/tenants"
|
||||
className="text-sm text-primary-main hover:underline"
|
||||
>
|
||||
查看全部 →
|
||||
</Link>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100">
|
||||
{recentTenants.length === 0 ? (
|
||||
<div className="px-6 py-8 text-center text-slate-500">
|
||||
尚無租戶資料
|
||||
</div>
|
||||
) : (
|
||||
recentTenants.map((tenant) => (
|
||||
<div key={tenant.id} className="px-6 py-4 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">{tenant.name}</p>
|
||||
<p className="text-sm text-slate-500">
|
||||
{tenant.domains.length > 0 ? tenant.domains.join(", ") : "無綁定域名"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<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>
|
||||
<span className="text-sm text-slate-400">{tenant.created_at}</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LandlordLayout>
|
||||
);
|
||||
}
|
||||
104
resources/js/Pages/Landlord/Tenant/Create.tsx
Normal file
104
resources/js/Pages/Landlord/Tenant/Create.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import LandlordLayout from "@/Layouts/LandlordLayout";
|
||||
import { useForm, Link } from "@inertiajs/react";
|
||||
import { FormEvent } from "react";
|
||||
|
||||
export default function TenantCreate() {
|
||||
const { data, setData, post, processing, errors } = useForm({
|
||||
id: "",
|
||||
name: "",
|
||||
email: "",
|
||||
domain: "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
post(route("landlord.tenants.store"));
|
||||
};
|
||||
|
||||
return (
|
||||
<LandlordLayout title="新增租戶">
|
||||
<div className="max-w-2xl">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-slate-900">新增租戶</h1>
|
||||
<p className="text-slate-500 mt-1">建立一個新的租戶帳號</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="bg-white rounded-xl border border-slate-200 p-6 space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||||
租戶 ID <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={data.id}
|
||||
onChange={(e) => setData("id", e.target.value.toLowerCase())}
|
||||
placeholder="例如：koori, alcohol"
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
||||
/>
|
||||
<p className="mt-1 text-sm text-slate-500">只能使用英文、數字、底線</p>
|
||||
{errors.id && <p className="mt-1 text-sm text-red-500">{errors.id}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||||
租戶名稱 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={data.name}
|
||||
onChange={(e) => setData("name", e.target.value)}
|
||||
placeholder="例如：小小冰室"
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
||||
/>
|
||||
{errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||||
聯絡信箱
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={data.email}
|
||||
onChange={(e) => setData("email", e.target.value)}
|
||||
placeholder="admin@example.com"
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
||||
/>
|
||||
{errors.email && <p className="mt-1 text-sm text-red-500">{errors.email}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||||
綁定域名
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={data.domain}
|
||||
onChange={(e) => setData("domain", e.target.value)}
|
||||
placeholder="例如：koori.erp.koori.tw"
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
||||
/>
|
||||
<p className="mt-1 text-sm text-slate-500">可之後再設定</p>
|
||||
{errors.domain && <p className="mt-1 text-sm text-red-500">{errors.domain}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 pt-4 border-t">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={processing}
|
||||
className="bg-primary-main hover:bg-primary-dark text-white px-6 py-2 rounded-lg disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{processing ? "處理中..." : "建立租戶"}
|
||||
</button>
|
||||
<Link
|
||||
href="/landlord/tenants"
|
||||
className="text-slate-600 hover:text-slate-900"
|
||||
>
|
||||
取消
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</LandlordLayout>
|
||||
);
|
||||
}
|
||||
107
resources/js/Pages/Landlord/Tenant/Edit.tsx
Normal file
107
resources/js/Pages/Landlord/Tenant/Edit.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import LandlordLayout from "@/Layouts/LandlordLayout";
|
||||
import { useForm, Link } from "@inertiajs/react";
|
||||
import { FormEvent } from "react";
|
||||
|
||||
interface Tenant {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string | null;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tenant: Tenant;
|
||||
}
|
||||
|
||||
export default function TenantEdit({ tenant }: Props) {
|
||||
const { data, setData, put, processing, errors } = useForm({
|
||||
name: tenant.name,
|
||||
email: tenant.email || "",
|
||||
is_active: tenant.is_active,
|
||||
});
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
put(route("landlord.tenants.update", tenant.id));
|
||||
};
|
||||
|
||||
return (
|
||||
<LandlordLayout title="編輯租戶">
|
||||
<div className="max-w-2xl">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-slate-900">編輯租戶</h1>
|
||||
<p className="text-slate-500 mt-1">修改租戶 {tenant.id} 的資訊</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="bg-white rounded-xl border border-slate-200 p-6 space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||||
租戶 ID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={tenant.id}
|
||||
disabled
|
||||
className="w-full px-4 py-2 border border-slate-200 rounded-lg bg-slate-50 text-slate-500"
|
||||
/>
|
||||
<p className="mt-1 text-sm text-slate-500">租戶 ID 無法修改</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||||
租戶名稱 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={data.name}
|
||||
onChange={(e) => setData("name", e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
||||
/>
|
||||
{errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||||
聯絡信箱
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={data.email}
|
||||
onChange={(e) => setData("email", e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
||||
/>
|
||||
{errors.email && <p className="mt-1 text-sm text-red-500">{errors.email}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.is_active}
|
||||
onChange={(e) => setData("is_active", e.target.checked)}
|
||||
className="w-4 h-4 rounded border-slate-300 text-primary-main focus:ring-primary-main"
|
||||
/>
|
||||
<span className="text-sm font-medium text-slate-700">啟用此租戶</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 pt-4 border-t">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={processing}
|
||||
className="bg-primary-main hover:bg-primary-dark text-white px-6 py-2 rounded-lg disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{processing ? "儲存中..." : "儲存變更"}
|
||||
</button>
|
||||
<Link
|
||||
href="/landlord/tenants"
|
||||
className="text-slate-600 hover:text-slate-900"
|
||||
>
|
||||
取消
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</LandlordLayout>
|
||||
);
|
||||
}
|
||||
188
resources/js/Pages/Landlord/Tenant/Index.tsx
Normal file
188
resources/js/Pages/Landlord/Tenant/Index.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import LandlordLayout from "@/Layouts/LandlordLayout";
|
||||
import { Link, router } from "@inertiajs/react";
|
||||
import { Plus, Edit, Trash2, Globe } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/Components/ui/alert-dialog";
|
||||
|
||||
interface Tenant {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string | null;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
domains: string[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tenants: Tenant[];
|
||||
}
|
||||
|
||||
export default function TenantIndex({ tenants }: Props) {
|
||||
const [deleteTarget, setDeleteTarget] = useState<Tenant | null>(null);
|
||||
|
||||
const handleDelete = () => {
|
||||
if (deleteTarget) {
|
||||
router.delete(route("landlord.tenants.destroy", deleteTarget.id));
|
||||
setDeleteTarget(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<LandlordLayout title="租戶管理">
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">租戶管理</h1>
|
||||
<p className="text-slate-500 mt-1">管理系統中的所有租戶</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/landlord/tenants/create"
|
||||
className="bg-primary-main hover:bg-primary-dark text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
新增租戶
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
|
||||
ID
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
|
||||
名稱
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
|
||||
域名
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
|
||||
狀態
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">
|
||||
建立時間
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase">
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{tenants.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-6 py-12 text-center text-slate-500">
|
||||
尚無租戶資料，請點擊「新增租戶」建立第一個租戶
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
tenants.map((tenant) => (
|
||||
<tr key={tenant.id} className="hover:bg-slate-50">
|
||||
<td className="px-6 py-4 font-mono text-sm text-slate-600">
|
||||
{tenant.id}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">{tenant.name}</p>
|
||||
{tenant.email && (
|
||||
<p className="text-sm text-slate-500">{tenant.email}</p>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{tenant.domains.length > 0 ? (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{tenant.domains.map((domain) => (
|
||||
<span
|
||||
key={domain}
|
||||
className="inline-flex items-center gap-1 px-2 py-1 bg-slate-100 rounded text-xs"
|
||||
>
|
||||
<Globe className="w-3 h-3" />
|
||||
{domain}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-slate-400 text-sm">無</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<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>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-500">
|
||||
{tenant.created_at}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Link
|
||||
href={`/landlord/tenants/${tenant.id}`}
|
||||
className="p-2 text-slate-400 hover:text-primary-main hover:bg-slate-100 rounded-lg transition-colors"
|
||||
title="查看詳情"
|
||||
>
|
||||
<Globe className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link
|
||||
href={`/landlord/tenants/${tenant.id}/edit`}
|
||||
className="p-2 text-slate-400 hover:text-blue-600 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
title="編輯"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setDeleteTarget(tenant)}
|
||||
className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="刪除"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete Confirmation */}
|
||||
<AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>確定要刪除這個租戶嗎？</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
刪除租戶將會同時刪除其資料庫和所有資料，此操作無法復原。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
確定刪除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</LandlordLayout>
|
||||
);
|
||||
}
|
||||
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