star-erp/resources/js/Pages/Landlord/Tenant/Show.tsx

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 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>
                    <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>
            </div>
        </LandlordLayout>
    );
}