feat: 實作 POS API 整合功能，包含商品與銷售訂單同步及韌性機制

resources/js/Pages/Landlord/Tenant/Show.tsx

@@ -19,16 +19,44 @@ interface Tenant {
     domains: Domain[];
 }
 
-interface Props {
-    tenant: Tenant;
+interface Token {
+    id: number;
+    name: string;
+    last_used_at: string;
+    created_at: string;
 }
 
-export default function TenantShow({ tenant }: Props) {
+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), {
@@ -39,6 +67,24 @@ export default function TenantShow({ tenant }: Props) {
         });
     };
 
+    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]));
@@ -174,6 +220,84 @@ export default function TenantShow({ tenant }: Props) {
                         </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>
     );