create-fullstack-scaffold 0.5.7 → 0.6.0

package/template/src/tenant/pages/InviteAcceptPage.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Card, Button, Typography, Spin, App } from 'antd'
+import { api, getToken } from '../services/tenantApi'
+import { useTenantStore } from '../stores/tenantStore'
+import type { PublicInvitation } from '@shared/schemas'
+
+/**
+ * 邀请落地页（公开路由 /tenant/invite/:token）。
+ * 展示脱敏邀请详情；未登录先跳登录（回跳本页），登录后一键接受入组。
+ */
+export const InviteAcceptPage: React.FC = () => {
+  const { token = '' } = useParams()
+  const navigate = useNavigate()
+  const { message } = App.useApp()
+  const [detail, setDetail] = useState<PublicInvitation | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [accepting, setAccepting] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      const res = await api<PublicInvitation>(`/tenants/invitations/${token}`)
+      if (!cancelled) {
+        setDetail(res.success && res.data ? res.data : null)
+        setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [token])
+
+  const restoreFromToken = useTenantStore(state => state.restoreFromToken)
+
+  const handleAccept = async () => {
+    if (!getToken()) {
+      navigate('/login', { state: { from: `/invite/${token}` } })
+      return
+    }
+    setAccepting(true)
+    const res = await api(`/tenants/invitations/${token}/accept`, { method: 'POST' })
+    setAccepting(false)
+    if (res.success) {
+      message.success('Invitation accepted — welcome!')
+      // 入组成功即有租户——恢复上下文（写 slug）再进 dashboard，
+      // 否则 TenantGuard 因 currentTenant 为空永久 Spin（白屏）
+      await restoreFromToken()
+      navigate('/dashboard', { replace: true })
+    } else {
+      message.error('Invitation is invalid, used or expired')
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <Spin size="large" />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center bg-gray-100"
+      data-testid="tenant-invite"
+    >
+      <Card
+        className="w-96 shadow-lg text-center"
+        title={<Typography.Title level={4}>Tenant Invitation</Typography.Title>}
+      >
+        {detail ? (
+          <>
+            <Typography.Paragraph>
+              You are invited to join <strong>{detail.tenantName}</strong> as{' '}
+              <strong>{detail.roleLabel}</strong>
+            </Typography.Paragraph>
+            <Typography.Paragraph type="secondary">
+              Invited email: {detail.email}
+            </Typography.Paragraph>
+            {detail.status === 'pending' ? (
+              <Button type="primary" block loading={accepting} onClick={handleAccept}>
+                Accept invitation
+              </Button>
+            ) : (
+              <Typography.Paragraph type="warning">
+                This invitation is {detail.status}.
+              </Typography.Paragraph>
+            )}
+          </>
+        ) : (
+          <Typography.Paragraph type="danger">Invitation not found.</Typography.Paragraph>
+        )}
+      </Card>
+    </div>
+  )
+}

package/template/src/tenant/pages/LoginPage.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { Card, Form, Input, Button, Typography, App } from 'antd'
+import { LockOutlined, UserOutlined } from '@ant-design/icons'
+import { useTenantStore } from '../stores/tenantStore'
+
+/**
+ * 租户控制台登录——平台账号认证 + /tenants/mine 选定成员租户。
+ * 无租户归属的账号会被明确拒绝（多租户语义的入口门槛）。
+ */
+export const LoginPage: React.FC = () => {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const login = useTenantStore(state => state.login)
+  const loading = useTenantStore(state => state.loading)
+  const [error, setError] = useState<string | null>(null)
+  const { message } = App.useApp()
+
+  const onFinish = async (values: { account: string; password: string }) => {
+    setError(null)
+    const result = await login(values.account, values.password)
+    if (!result.ok) {
+      setError(result.error ?? 'Login failed')
+      return
+    }
+    if (result.hasTenant) {
+      message.success('Welcome back')
+      navigate('/dashboard', { replace: true })
+      return
+    }
+    // 认证成功但尚无租户：受邀新用户回跳邀请落地页完成入组
+    const from = (location.state as { from?: string } | null)?.from
+    if (from && from.startsWith('/invite/')) {
+      navigate(from, { replace: true })
+    } else {
+      setError(
+        'Signed in, but this account belongs to no tenant yet. Open your invitation link to join one.'
+      )
+    }
+  }
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center bg-gray-100"
+      data-testid="tenant-login"
+    >
+      <Card
+        className="w-96 shadow-lg"
+        title={<Typography.Title level={4}>Tenant Console</Typography.Title>}
+      >
+        <Typography.Paragraph type="secondary">
+          Sign in with your platform account. Accounts belonging to a tenant will enter that
+          tenant's console.
+        </Typography.Paragraph>
+        <Form layout="vertical" onFinish={onFinish} data-testid="tenant-login-form">
+          <Form.Item
+            name="account"
+            label="Account"
+            rules={[{ required: true, message: 'Please input your account' }]}
+          >
+            <Input prefix={<UserOutlined />} placeholder="username / email" />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[{ required: true, message: 'Please input your password' }]}
+          >
+            <Input.Password prefix={<LockOutlined />} placeholder="password" />
+          </Form.Item>
+          {error && (
+            <Typography.Paragraph type="danger" data-testid="tenant-login-error">
+              {error}
+            </Typography.Paragraph>
+          )}
+          <Button type="primary" htmlType="submit" block loading={loading}>
+            Sign in
+          </Button>
+        </Form>
+      </Card>
+    </div>
+  )
+}

package/template/src/tenant/pages/SubscriptionPage.tsx

@@ -1,8 +1,12 @@
 import { useEffect } from 'react'
-import { Card, Descriptions, Button, message } from 'antd'
-import { CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'
+import { Card, Descriptions, Progress, Button, Typography, Tooltip } from 'antd'
 import { useTenantStore } from '../stores/tenantStore'
 
+/**
+ * 订阅/配额页——全部真实数据：plan/maxUsers 来自租户记录，
+ * 成员用量来自 members 接口；配额在邀请与接受两处服务端真实拦截。
+ * 套餐变更走平台管理员（ tenants 属平台管理域），此处按钮以提示代替假动作。
+ */
 export const SubscriptionPage: React.FC = () => {
   const { subscription, loading, fetchSubscription } = useTenantStore()
 
@@ -10,72 +14,45 @@ export const SubscriptionPage: React.FC = () => {
     fetchSubscription()
   }, [fetchSubscription])
 
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case 'active':
-        return <CheckCircleOutlined style={{ color: '#52c41a' }} />
-      case 'pending':
-        return <ClockCircleOutlined style={{ color: '#faad14' }} />
-      case 'cancelled':
-        return <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
-      default:
-        return null
-    }
-  }
-
-  const handleUpgrade = () => {
-    message.success('Upgrade feature coming soon!')
-  }
-
-  const handleCancel = () => {
-    message.success('Cancel subscription feature coming soon!')
-  }
-
-  if (loading) {
+  if (loading && !subscription) {
     return <div>Loading subscription...</div>
   }
 
-  const subData = subscription as {
-    plan?: string
-    status?: string
-    startDate?: string
-    endDate?: string
-    usersLimit?: number
-    storageLimit?: string
-    features?: string[]
+  if (!subscription) {
+    return <div>No subscription data</div>
   }
 
+  const { plan, maxUsers, currentUsers } = subscription
+  const percent = maxUsers > 0 ? Math.round((currentUsers / maxUsers) * 100) : 0
+
   return (
     <div data-testid="tenant-subscription">
       <h1 className="text-2xl font-bold mb-6">Subscription</h1>
       <Card>
-        <Descriptions title={subData?.plan || 'No Plan'} bordered>
-          <Descriptions.Item label="Status">
-            {subData?.status ? (
-              <span>
-                {getStatusIcon(subData.status)} {subData.status}
-              </span>
-            ) : (
-              'No subscription'
-            )}
+        <Descriptions title={plan.toUpperCase()} bordered>
+          <Descriptions.Item label="Plan">{plan}</Descriptions.Item>
+          <Descriptions.Item label="Members">
+            {currentUsers} / {maxUsers}
           </Descriptions.Item>
-          <Descriptions.Item label="Start Date">{subData?.startDate || '-'}</Descriptions.Item>
-          <Descriptions.Item label="End Date">{subData?.endDate || '-'}</Descriptions.Item>
-          <Descriptions.Item label="Users Limit">{subData?.usersLimit || '-'}</Descriptions.Item>
-          <Descriptions.Item label="Storage Limit">
-            {subData?.storageLimit || '-'}
-          </Descriptions.Item>
-          <Descriptions.Item label="Features">
-            {subData?.features?.join(', ') || 'None'}
+          <Descriptions.Item label="Custom role limit">
+            {{ free: 3, starter: 5, pro: 10, enterprise: 'Unlimited' }[plan] ?? '-'}
           </Descriptions.Item>
         </Descriptions>
+        <div className="mt-6">
+          <Typography.Paragraph strong>Member quota usage</Typography.Paragraph>
+          <Progress percent={percent} status={percent >= 100 ? 'exception' : 'normal'} />
+          {percent >= 100 && (
+            <Typography.Paragraph type="danger">
+              Quota is full — new invitations will be rejected until the plan is upgraded.
+            </Typography.Paragraph>
+          )}
+        </div>
         <div className="mt-6 flex gap-4">
-          <Button type="primary" onClick={handleUpgrade}>
-            Upgrade Plan
-          </Button>
-          <Button danger onClick={handleCancel}>
-            Cancel Subscription
-          </Button>
+          <Tooltip title="Plan changes are managed by the platform administrator">
+            <Button type="primary" disabled>
+              Upgrade Plan
+            </Button>
+          </Tooltip>
         </div>
       </Card>
     </div>

package/template/src/tenant/pages/UsersPage.tsx

@@ -1,109 +1,123 @@
 import { useEffect, useState } from 'react'
-import { Table, Button, Space, Modal, Form, Input, message } from 'antd'
+import { Table, Button, Space, Modal, Form, Input, Select, Typography, App } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
+import { EditOutlined, DeleteOutlined, PlusOutlined, UserAddOutlined } from '@ant-design/icons'
 import { useTenantStore } from '../stores/tenantStore'
+import type { TenantMember } from '@shared/schemas'
 
+/**
+ * 租户成员管理：列表（含角色）/邀请新成员（邮件+角色）/改角色/移除。
+ * 后端在邀请与接受时执行套餐成员数配额（P4）。
+ */
 export const UsersPage: React.FC = () => {
-  const { users, loading, fetchUsers, createUser, updateUser, deleteUser } = useTenantStore()
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [editingUser, setEditingUser] = useState<unknown | null>(null)
-  const [form] = Form.useForm()
+  const { users, roles, loading, fetchUsers, fetchRoles, inviteUser, updateUser, deleteUser } =
+    useTenantStore()
+  const { message } = App.useApp()
+  const [inviteOpen, setInviteOpen] = useState(false)
+  const [roleTarget, setRoleTarget] = useState<TenantMember | null>(null)
+  const [inviteForm] = Form.useForm()
+  const [roleForm] = Form.useForm()
 
   useEffect(() => {
     fetchUsers()
-  }, [fetchUsers])
+    fetchRoles()
+  }, [fetchUsers, fetchRoles])
 
-  const handleAdd = () => {
-    setEditingUser(null)
-    form.resetFields()
-    setIsModalOpen(true)
+  const handleInvite = async () => {
+    try {
+      const values = await inviteForm.validateFields()
+      const ok = await inviteUser(values.email, values.roleId)
+      if (ok) {
+        message.success('Invitation created — the invitee will receive a join link')
+        setInviteOpen(false)
+        inviteForm.resetFields()
+        fetchUsers()
+      } else {
+        message.error('Failed to create invitation')
+      }
+    } catch {
+      // validation error
+    }
   }
 
-  const handleEdit = (user: unknown) => {
-    setEditingUser(user)
-    form.setFieldsValue(user)
-    setIsModalOpen(true)
+  const handleRoleChange = async () => {
+    if (!roleTarget) return
+    try {
+      const values = await roleForm.validateFields()
+      const ok = await updateUser(roleTarget.id, { roleId: values.roleId })
+      if (ok) {
+        message.success('Member role updated')
+        setRoleTarget(null)
+        fetchUsers()
+      } else {
+        message.error('Failed to update role')
+      }
+    } catch {
+      // validation error
+    }
   }
 
-  const handleDelete = async (userId: number) => {
+  const handleRemove = (member: TenantMember) => {
     Modal.confirm({
-      title: 'Confirm Delete',
-      content: 'Are you sure you want to delete this user?',
-      okText: 'Yes',
-      cancelText: 'No',
+      title: 'Remove member',
+      content: `Remove ${member.userId} from this tenant? They will lose access immediately.`,
+      okText: 'Remove',
+      okButtonProps: { danger: true },
+      cancelText: 'Cancel',
       onOk: async () => {
-        const success = await deleteUser(userId)
-        if (success) {
-          message.success('User deleted successfully')
+        const ok = await deleteUser(member.id)
+        if (ok) {
+          message.success('Member removed')
           fetchUsers()
+        } else {
+          message.error('Failed to remove member')
         }
       },
     })
   }
 
-  const handleSubmit = async () => {
-    try {
-      const values = await form.validateFields()
-
-      if (editingUser) {
-        const userId = (editingUser as { id: number }).id
-        const success = await updateUser(userId, values)
-        if (success) {
-          message.success('User updated successfully')
-          fetchUsers()
-        }
-      } else {
-        const success = await createUser(values)
-        if (success) {
-          message.success('User created successfully')
-          fetchUsers()
-        }
-      }
-
-      setIsModalOpen(false)
-      form.resetFields()
-    } catch (error) {
-      console.error('Validation failed:', error)
-    }
-  }
-
-  const columns: ColumnsType<unknown> = [
+  const columns: ColumnsType<TenantMember> = [
+    { title: 'Account', dataIndex: 'username', key: 'username' },
     {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
-    },
-    {
-      title: 'Username',
-      dataIndex: 'username',
-      key: 'username',
+      title: 'Role',
+      key: 'role',
+      render: (_, record) => (
+        <Typography.Text code>{record.role?.label ?? record.roleId}</Typography.Text>
+      ),
     },
     {
-      title: 'Email',
-      dataIndex: 'email',
-      key: 'email',
+      title: 'Status',
+      dataIndex: 'status',
+      key: 'status',
     },
     {
-      title: 'Role',
-      dataIndex: 'role',
-      key: 'role',
+      title: 'Joined',
+      dataIndex: 'joinedAt',
+      key: 'joinedAt',
+      render: (v: string) => (v ? new Date(v).toLocaleDateString() : '-'),
     },
     {
       title: 'Actions',
       key: 'actions',
       render: (_, record) => (
         <Space size="middle">
-          <Button icon={<EditOutlined />} size="small" onClick={() => handleEdit(record)}>
-            Edit
+          <Button
+            icon={<EditOutlined />}
+            size="small"
+            onClick={() => {
+              setRoleTarget(record)
+              roleForm.setFieldsValue({ roleId: record.roleId })
+            }}
+          >
+            Role
           </Button>
           <Button
             icon={<DeleteOutlined />}
             size="small"
             danger
-            onClick={() => handleDelete(Number((record as { id: unknown }).id))}
+            onClick={() => handleRemove(record)}
           >
-            Delete
+            Remove
           </Button>
         </Space>
       ),
@@ -112,32 +126,64 @@ export const UsersPage: React.FC = () => {
 
   return (
     <div data-testid="tenant-users">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold">Users</h1>
-        <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
-          Add User
+      <div className="flex justify-between items-center mb-4">
+        <Typography.Title level={5} className="!mb-0">
+          Members
+        </Typography.Title>
+        <Button type="primary" icon={<PlusOutlined />} onClick={() => setInviteOpen(true)}>
+          Invite member
         </Button>
       </div>
-      <Table columns={columns} dataSource={users as unknown[]} loading={loading} rowKey="id" />
+      <Table columns={columns} dataSource={users} loading={loading} rowKey="id" />
+
       <Modal
-        title={editingUser ? 'Edit User' : 'Add User'}
-        open={isModalOpen}
-        onOk={handleSubmit}
-        onCancel={() => setIsModalOpen(false)}
-        destroyOnClose
+        title={
+          <span>
+            <UserAddOutlined /> Invite member
+          </span>
+        }
+        open={inviteOpen}
+        onOk={handleInvite}
+        onCancel={() => setInviteOpen(false)}
+        okText="Send invitation"
       >
-        <Form form={form} layout="vertical">
-          <Form.Item name="username" label="Username" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
-            <Input />
+        <Typography.Paragraph type="secondary">
+          An invitation link (valid for 7 days) will be generated for the invitee.
+        </Typography.Paragraph>
+        <Form form={inviteForm} layout="vertical">
+          <Form.Item
+            name="email"
+            label="Email"
+            rules={[
+              { required: true, message: 'Please input email' },
+              { type: 'email', message: 'Invalid email' },
+            ]}
+          >
+            <Input placeholder="teammate@example.com" />
           </Form.Item>
-          <Form.Item name="password" label="Password" rules={[{ required: !editingUser }]}>
-            <Input.Password />
+          <Form.Item
+            name="roleId"
+            label="Role"
+            rules={[{ required: true, message: 'Pick a role' }]}
+          >
+            <Select
+              placeholder="Select role"
+              options={roles.map(r => ({ value: r.id, label: r.label }))}
+            />
           </Form.Item>
-          <Form.Item name="role" label="Role" rules={[{ required: true }]}>
-            <Input />
+        </Form>
+      </Modal>
+
+      <Modal
+        title="Change member role"
+        open={!!roleTarget}
+        onOk={handleRoleChange}
+        onCancel={() => setRoleTarget(null)}
+        okText="Save"
+      >
+        <Form form={roleForm} layout="vertical">
+          <Form.Item name="roleId" label="Role" rules={[{ required: true }]}>
+            <Select options={roles.map(r => ({ value: r.id, label: r.label }))} />
           </Form.Item>
         </Form>
       </Modal>

package/template/src/tenant/services/tenantApi.ts

@@ -0,0 +1,61 @@
+/**
+ * 租户控制台 API 层——统一注入认证与租户上下文。
+ *
+ * token：登录（平台认证 /api/auth/login）后存 localStorage('tenant-token')
+ * slug：登录时从 /api/tenants/mine 选定，存 localStorage('current-tenant-slug')
+ */
+
+const TOKEN_KEY = 'tenant-token'
+const SLUG_KEY = 'current-tenant-slug'
+
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY)
+}
+
+export function setToken(token: string | null): void {
+  if (token) localStorage.setItem(TOKEN_KEY, token)
+  else localStorage.removeItem(TOKEN_KEY)
+}
+
+export function getSlug(): string | null {
+  return localStorage.getItem(SLUG_KEY)
+}
+
+export function setSlug(slug: string | null): void {
+  if (slug) localStorage.setItem(SLUG_KEY, slug)
+  else localStorage.removeItem(SLUG_KEY)
+}
+
+function headers(json = true): Record<string, string> {
+  const h: Record<string, string> = {}
+  if (json) h['Content-Type'] = 'application/json'
+  const token = getToken()
+  if (token) h['Authorization'] = `Bearer ${token}`
+  const slug = getSlug()
+  if (slug) h['X-Tenant-Slug'] = slug
+  return h
+}
+
+export interface ApiResponse<T> {
+  success: boolean
+  data?: T
+  error?: string
+  status?: number
+}
+
+export async function api<T>(
+  path: string,
+  options: { method?: string; body?: unknown } = {}
+): Promise<ApiResponse<T>> {
+  try {
+    const res = await fetch(`/api${path}`, {
+      method: options.method ?? 'GET',
+      headers: headers(),
+      body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
+    })
+    const json = (await res.json()) as ApiResponse<T>
+    return { ...json, status: res.status }
+  } catch (e) {
+    return { success: false, error: e instanceof Error ? e.message : 'Network error' }
+  }
+}