create-fullstack-scaffold 0.4.9 → 0.4.11

package/template/src/client/index.css

@@ -25,3 +25,76 @@ code {
 #root {
   min-height: 100vh;
 }
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+[data-theme="dark"] body {
+  background-color: #141414;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] .bg-white {
+  background-color: #1f1f1f !important;
+}
+
+[data-theme="dark"] .bg-gray-50 {
+  background-color: #1a1a1a !important;
+}
+
+[data-theme="dark"] .bg-gray-100 {
+  background-color: #1f1f1f !important;
+}
+
+[data-theme="dark"] .text-gray-900 {
+  color: rgba(255, 255, 255, 0.95) !important;
+}
+
+[data-theme="dark"] .text-gray-800 {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+
+[data-theme="dark"] .text-gray-700 {
+  color: rgba(255, 255, 255, 0.75) !important;
+}
+
+[data-theme="dark"] .text-gray-600 {
+  color: rgba(255, 255, 255, 0.65) !important;
+}
+
+[data-theme="dark"] .text-gray-500 {
+  color: rgba(255, 255, 255, 0.55) !important;
+}
+
+[data-theme="dark"] .border-gray-200 {
+  border-color: #303030 !important;
+}
+
+[data-theme="dark"] .border-gray-100 {
+  border-color: #262626 !important;
+}
+
+[data-theme="dark"] .hover\:bg-gray-100:hover {
+  background-color: rgba(255, 255, 255, 0.08) !important;
+}
+
+[data-theme="dark"] .hover\:bg-gray-50:hover {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+[data-theme="dark"] .text-gray-400 {
+  color: #8c8c8c;
+}
+
+[data-theme="dark"] .text-gray-300 {
+  color: #a0a0a0;
+}
+
+[data-theme="dark"] .bg-blue-50 {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+[data-theme="dark"] .border-gray-300 {
+  border-color: #434343;
+}

package/template/src/merchant/App.tsx

@@ -7,6 +7,7 @@ import { ProductsPage } from './pages/ProductsPage'
 import { OrdersPage } from './pages/OrdersPage'
 import { DisputesPage } from './pages/DisputesPage'
 import { SettingsPage } from './pages/SettingsPage'
+import { LoginPage } from './pages/LoginPage'
 import { MerchantGuard } from './components/MerchantGuard'
 import { useMerchantStore } from './stores/merchantStore'
 
@@ -32,6 +33,7 @@ export const App: React.FC = () => {
     >
       <BrowserRouter basename="/merchant">
         <Routes>
+          <Route path="/login" element={<LoginPage />} />
           <Route
             path="/*"
             element={

package/template/src/merchant/components/MerchantGuard.tsx

@@ -6,13 +6,9 @@ interface MerchantGuardProps {
 }
 
 export const MerchantGuard: React.FC<MerchantGuardProps> = ({ children }) => {
-  const { isAuthenticated, user } = useMerchantStore()
+  const { isAuthenticated, merchant } = useMerchantStore()
 
-  if (!isAuthenticated) {
-    return <Navigate to="/login" replace />
-  }
-
-  if (!user || user.role !== 'merchant') {
+  if (!isAuthenticated || !merchant) {
     return <Navigate to="/login" replace />
   }
 

package/template/src/merchant/components/__tests__/MerchantGuard.test.tsx

@@ -0,0 +1,117 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { MerchantGuard } from '../MerchantGuard'
+
+const mockMerchantState = {
+  isAuthenticated: false as boolean,
+  merchant: null as { id: string; name: string } | null,
+}
+
+vi.mock('../../stores/merchantStore', () => ({
+  useMerchantStore: <T,>(selector?: (state: typeof mockMerchantState) => T) => {
+    if (selector) return selector(mockMerchantState)
+    return mockMerchantState
+  },
+}))
+
+function renderWithRouter(ui: React.ReactElement, initialPath = '/protected') {
+  return render(
+    <MemoryRouter initialEntries={[initialPath]}>
+      <Routes>
+        <Route path="/login" element={<div data-testid="login-page">Login</div>} />
+        <Route path="/protected" element={ui} />
+      </Routes>
+    </MemoryRouter>
+  )
+}
+
+describe('MerchantGuard', () => {
+  beforeEach(() => {
+    mockMerchantState.isAuthenticated = false
+    mockMerchantState.merchant = null
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should redirect to /login when not authenticated', () => {
+    renderWithRouter(
+      <MerchantGuard>
+        <div>Protected Content</div>
+      </MerchantGuard>
+    )
+
+    expect(screen.getByTestId('login-page')).toBeInTheDocument()
+  })
+
+  it('should redirect to /login when merchant is null', () => {
+    mockMerchantState.isAuthenticated = true
+    mockMerchantState.merchant = null
+
+    renderWithRouter(
+      <MerchantGuard>
+        <div>Protected Content</div>
+      </MerchantGuard>
+    )
+
+    expect(screen.getByTestId('login-page')).toBeInTheDocument()
+  })
+
+  it('should render children when authenticated with merchant', () => {
+    mockMerchantState.isAuthenticated = true
+    mockMerchantState.merchant = { id: 'merchant-1', name: 'Test Merchant' }
+
+    renderWithRouter(
+      <MerchantGuard>
+        <div data-testid="protected">Protected Content</div>
+      </MerchantGuard>
+    )
+
+    expect(screen.getByTestId('protected')).toBeInTheDocument()
+  })
+
+  it('should render children when both isAuthenticated and merchant are set', () => {
+    mockMerchantState.isAuthenticated = true
+    mockMerchantState.merchant = { id: 'merchant-2', name: 'Another Merchant' }
+
+    renderWithRouter(
+      <MerchantGuard>
+        <div data-testid="protected">Protected Content</div>
+      </MerchantGuard>
+    )
+
+    expect(screen.getByTestId('protected')).toBeInTheDocument()
+    expect(screen.queryByTestId('login-page')).not.toBeInTheDocument()
+  })
+
+  it('should redirect to /login when authenticated but merchant is null', () => {
+    mockMerchantState.isAuthenticated = true
+    mockMerchantState.merchant = null
+
+    renderWithRouter(
+      <MerchantGuard>
+        <div data-testid="protected">Protected Content</div>
+      </MerchantGuard>
+    )
+
+    expect(screen.getByTestId('login-page')).toBeInTheDocument()
+    expect(screen.queryByTestId('protected')).not.toBeInTheDocument()
+  })
+
+  it('should redirect to /login when merchant is set but not authenticated', () => {
+    mockMerchantState.isAuthenticated = false
+    mockMerchantState.merchant = { id: 'merchant-1', name: 'Test Merchant' }
+
+    renderWithRouter(
+      <MerchantGuard>
+        <div data-testid="protected">Protected Content</div>
+      </MerchantGuard>
+    )
+
+    expect(screen.getByTestId('login-page')).toBeInTheDocument()
+    expect(screen.queryByTestId('protected')).not.toBeInTheDocument()
+  })
+})

package/template/src/merchant/layouts/Header.tsx

@@ -11,7 +11,7 @@ interface HeaderProps {
 }
 
 export const Header: FC<HeaderProps> = ({ onToggle }) => {
-  const { user, logout } = useMerchantStore()
+  const { merchant, logout } = useMerchantStore()
 
   const handleLogout = () => {
     logout()
@@ -45,7 +45,7 @@ export const Header: FC<HeaderProps> = ({ onToggle }) => {
       <Button type="text" icon={<MenuOutlined />} onClick={onToggle} />
 
       <Space>
-        <Text>Welcome, {user?.username || 'Merchant'}</Text>
+        <Text>Welcome, {merchant?.businessName || 'Merchant'}</Text>
         <Dropdown menu={{ items }} placement="bottomRight">
           <Avatar icon={<UserOutlined />} style={{ cursor: 'pointer' }} />
         </Dropdown>

package/template/src/merchant/pages/DashboardPage.tsx

@@ -17,9 +17,9 @@ export const DashboardPage: FC = () => {
         <Col span={8}>
           <Card>
             <Statistic
-              title="Total Sales"
+              title="Total Revenue"
               prefix={<DollarOutlined />}
-              value={stats?.totalSales || 0}
+              value={stats?.totalRevenue || 0}
               precision={2}
               suffix="$"
             />

package/template/src/merchant/pages/DisputesPage.tsx

@@ -1,6 +1,7 @@
-import { FC, useState, useEffect } from 'react'
+import { FC, useState, useEffect, useCallback } from 'react'
 import { Table, Tag, Button, Space, Typography, Descriptions } from 'antd'
 import { EyeOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons'
+import { apiClient } from '@client/services/apiClient'
 import type { Dispute, DisputeStatus } from '@shared/schemas'
 
 const { Text } = Typography
@@ -11,11 +12,12 @@ export const DisputesPage: FC = () => {
   const [selectedDispute, setSelectedDispute] = useState<Dispute | null>(null)
   const setShowModal = useState(false)[1]
 
-  const fetchDisputes = async () => {
+  const fetchDisputes = useCallback(async () => {
     setLoading(true)
     try {
-      const response = await fetch('/api/merchant/disputes')
-      const result = (await response.json()) as { success?: boolean; data?: Dispute[] }
+      // @ts-expect-error - Hono type depth limit in full template with 15+ modules; resolves in generated projects
+      const response = await apiClient.api.merchant.disputes.$get()
+      const result = await response.json()
       if (result.success === true && result.data) {
         setDisputes(result.data)
       }
@@ -24,7 +26,7 @@ export const DisputesPage: FC = () => {
     } finally {
       setLoading(false)
     }
-  }
+  }, [])
 
   const handleView = (dispute: Dispute) => {
     setSelectedDispute(dispute)
@@ -33,8 +35,9 @@ export const DisputesPage: FC = () => {
 
   const handleResolve = async (disputeId: string) => {
     try {
-      await fetch(`/api/merchant/disputes/${disputeId}/resolve`, {
-        method: 'POST',
+      // @ts-expect-error - Hono type depth limit in full template with 15+ modules; resolves in generated projects
+      await apiClient.api.merchant.disputes[':id'].resolve.$post({
+        param: { id: disputeId },
       })
       fetchDisputes()
     } catch (error) {
@@ -44,8 +47,9 @@ export const DisputesPage: FC = () => {
 
   const handleClose = async (disputeId: string) => {
     try {
-      await fetch(`/api/merchant/disputes/${disputeId}/close`, {
-        method: 'POST',
+      // @ts-expect-error - Hono type depth limit in full template with 15+ modules; resolves in generated projects
+      await apiClient.api.merchant.disputes[':id'].close.$post({
+        param: { id: disputeId },
       })
       fetchDisputes()
     } catch (error) {
@@ -55,7 +59,7 @@ export const DisputesPage: FC = () => {
 
   useEffect(() => {
     fetchDisputes()
-  }, [])
+  }, [fetchDisputes])
 
   const getStatusColor = (status: DisputeStatus): string => {
     const colors: Record<DisputeStatus, string> = {

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

@@ -0,0 +1,49 @@
+import { FC } from 'react'
+import { Form, Input, Button, Card, message } from 'antd'
+import { UserOutlined, LockOutlined } from '@ant-design/icons'
+import { useNavigate } from 'react-router-dom'
+import { useMerchantStore } from '../stores/merchantStore'
+
+export const LoginPage: FC = () => {
+  const navigate = useNavigate()
+  const login = useMerchantStore(state => state.login)
+  const loading = useMerchantStore(state => state.loading)
+  const error = useMerchantStore(state => state.error)
+
+  const handleSubmit = async (values: { username: string; password: string }) => {
+    await login(values.username, values.password)
+
+    const { isAuthenticated } = useMerchantStore.getState()
+    if (isAuthenticated) {
+      message.success('Login successful!')
+      navigate('/dashboard', { replace: true })
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <Card className="w-full max-w-md" title="Merchant Login">
+        <Form onFinish={handleSubmit} layout="vertical" autoComplete="off">
+          <Form.Item
+            name="username"
+            rules={[{ required: true, message: 'Please input your username!' }]}
+          >
+            <Input prefix={<UserOutlined />} placeholder="Username" size="large" />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            rules={[{ required: true, message: 'Please input your password!' }]}
+          >
+            <Input.Password prefix={<LockOutlined />} placeholder="Password" size="large" />
+          </Form.Item>
+          {error && <div className="mb-4 text-red-500 text-sm">{error}</div>}
+          <Form.Item>
+            <Button type="primary" htmlType="submit" size="large" block loading={loading}>
+              Login
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  )
+}

package/template/src/merchant/pages/OrdersPage.tsx

@@ -1,6 +1,7 @@
-import { FC, useState, useEffect } from 'react'
+import { FC, useState, useEffect, useCallback } from 'react'
 import { Select, Space, DatePicker, Button } from 'antd'
 import { SearchOutlined } from '@ant-design/icons'
+import { apiClient } from '@client/services/apiClient'
 import type { Order } from '@shared/schemas'
 import { OrderTable } from '../components/OrderTable'
 
@@ -10,13 +11,14 @@ export const OrdersPage: FC = () => {
   const [orders, setOrders] = useState<Order[]>([])
   const [loading, setLoading] = useState(false)
   const setStatusFilter = useState<string>('all')[1]
-  const setDateRange = useState<[Date, Date] | null>(null)[1]
+  const setDateRange = useState<[import('dayjs').Dayjs, import('dayjs').Dayjs] | null>(null)[1]
 
-  const fetchOrders = async () => {
+  const fetchOrders = useCallback(async () => {
     setLoading(true)
     try {
-      const response = await fetch('/api/merchant/orders')
-      const result = (await response.json()) as { success?: boolean; data?: Order[] }
+      // @ts-expect-error - Hono type depth limit in full template with 15+ modules; resolves in generated projects
+      const response = await apiClient.api.merchant.orders.$get()
+      const result = await response.json()
       if (result.success === true && result.data) {
         setOrders(result.data)
       }
@@ -25,15 +27,20 @@ export const OrdersPage: FC = () => {
     } finally {
       setLoading(false)
     }
-  }
+  }, [])
 
   const handleStatusChange = (value: string) => {
     setStatusFilter(value)
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Ant Design RangePicker types are complex
-  const handleDateRangeChange = (dates: any) => {
-    setDateRange(dates)
+  const handleDateRangeChange = (
+    dates: [import('dayjs').Dayjs | null, import('dayjs').Dayjs | null] | null
+  ) => {
+    if (dates && dates[0] && dates[1]) {
+      setDateRange([dates[0], dates[1]])
+    } else {
+      setDateRange(null)
+    }
   }
 
   const handleSearch = () => {
@@ -42,7 +49,7 @@ export const OrdersPage: FC = () => {
 
   useEffect(() => {
     fetchOrders()
-  }, [])
+  }, [fetchOrders])
 
   return (
     <div>

package/template/src/merchant/pages/ProductsPage.tsx

@@ -1,6 +1,7 @@
-import { FC, useState, useEffect } from 'react'
+import { FC, useState, useEffect, useCallback } from 'react'
 import { Table, Button, Space, Tag, Typography } from 'antd'
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
+import { apiClient } from '@client/services/apiClient'
 import { ProductCard } from '../components/ProductCard'
 import type { Product } from '@shared/schemas'
 
@@ -9,25 +10,32 @@ const { Title } = Typography
 export const ProductsPage: FC = () => {
   const [products, setProducts] = useState<Product[]>([])
   const [loading, setLoading] = useState(false)
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
 
-  const fetchProducts = async () => {
+  const fetchProducts = useCallback(async () => {
     setLoading(true)
     try {
-      const response = await fetch('/api/merchant/products')
-      const result = (await response.json()) as { success?: boolean; data?: Product[] }
+      // @ts-expect-error - Hono type depth limit in full template with 15+ modules; resolves in generated projects
+      const response = await apiClient.api.merchant.products.$get()
+      const result = await response.json()
       if (result.success === true && result.data) {
-        setProducts(result.data)
+        setProducts(result.data.items)
+        setTotal(result.data.total)
+        setPage(result.data.page)
+        setPageSize(result.data.pageSize)
       }
     } catch (error) {
       console.error('Failed to fetch products:', error)
     } finally {
       setLoading(false)
     }
-  }
+  }, [])
 
   useEffect(() => {
     fetchProducts()
-  }, [])
+  }, [fetchProducts])
 
   const columns = [
     {
@@ -77,7 +85,22 @@ export const ProductsPage: FC = () => {
         </Button>
       </div>
       <ProductCard products={products} loading={loading} />
-      <Table dataSource={products} columns={columns} loading={loading} rowKey="id" />
+      <Table
+        dataSource={products}
+        columns={columns}
+        loading={loading}
+        rowKey="id"
+        pagination={{
+          current: page,
+          pageSize,
+          total,
+          showSizeChanger: true,
+          onChange: (newPage, newPageSize) => {
+            setPage(newPage)
+            setPageSize(newPageSize)
+          },
+        }}
+      />
     </div>
   )
 }

package/template/src/merchant/pages/SettingsPage.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import { Form, Input, Button, Card, Typography, Upload, message } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
+import { apiClient } from '@client/services/apiClient'
 import type { UploadProps } from 'antd'
 
 const { Title, Text } = Typography
@@ -10,13 +11,8 @@ export const SettingsPage: FC = () => {
 
   const handleSave = async (values: unknown) => {
     try {
-      await fetch('/api/merchant/settings', {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(values),
-      })
+      // @ts-expect-error - Hono type depth limit in full template with 15+ modules; resolves in generated projects
+      await apiClient.api.merchant.settings.$put({ json: values })
       message.success('Settings saved successfully')
     } catch {
       message.error('Failed to save settings')