@spacemade/ui 0.0.1

package/src/pages/admin/activity/settings.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { AdminLayout } from '@components/common/layout/admin/AdminLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import { useGetActivitySettingsQuery, useUpdateActivitySettingsMutation } from '@store/slice/api/activityApiSlice'
+
+const asString = (value: string | string[] | undefined) => (Array.isArray(value) ? value[0] : value) || ''
+
+const ActivitySecuritySettings = () => {
+  const router = useRouter()
+  const orgId = asString(router.query.orgId)
+
+  const [rateLimitMaxRequests, setRateLimitMaxRequests] = useState(60)
+  const [rateLimitWindowSeconds, setRateLimitWindowSeconds] = useState(60)
+  const [banDurationMinutes, setBanDurationMinutes] = useState(30)
+  const [escalationTempBanThreshold, setEscalationTempBanThreshold] = useState(3)
+  const [escalationLookbackHours, setEscalationLookbackHours] = useState(24)
+  const [rateLimitEnabled, setRateLimitEnabled] = useState(true)
+  const [autoTempBanEnabled, setAutoTempBanEnabled] = useState(true)
+  const [escalationEnabled, setEscalationEnabled] = useState(true)
+  const [escalateToPermanent, setEscalateToPermanent] = useState(true)
+  const [importEnabled, setImportEnabled] = useState(false)
+  const [importAllowUnknownSources, setImportAllowUnknownSources] = useState(true)
+  const [importSourceAllowlistText, setImportSourceAllowlistText] = useState('')
+  const [rateLimitScope, setRateLimitScope] = useState<'ip_address' | 'fingerprint' | 'user_id'>('ip_address')
+  const [settingsError, setSettingsError] = useState('')
+
+  const { data: settingsResp } = useGetActivitySettingsQuery({ orgId: orgId || undefined })
+  const [updateSettings, { isLoading: isSavingSettings }] = useUpdateActivitySettingsMutation()
+  const settings = settingsResp?.settings
+
+  useEffect(() => {
+    if (!settings) return
+    setRateLimitMaxRequests(Number(settings.rateLimitMaxRequests || 60))
+    setRateLimitWindowSeconds(Number(settings.rateLimitWindowSeconds || 60))
+    setEscalationTempBanThreshold(Number(settings.escalationTempBanThreshold || 3))
+    setEscalationLookbackHours(Number(settings.escalationLookbackHours || 24))
+    setBanDurationMinutes(Number(settings.tempBanDurationMinutes || 30))
+    setRateLimitEnabled(Boolean(settings.rateLimitEnabled))
+    setAutoTempBanEnabled(Boolean(settings.autoTempBanEnabled))
+    setEscalationEnabled(Boolean(settings.escalationEnabled))
+    setEscalateToPermanent(Boolean(settings.escalateToPermanent))
+    setImportEnabled(Boolean(settings.importEnabled))
+    setImportAllowUnknownSources(Boolean(settings.importAllowUnknownSources))
+    setImportSourceAllowlistText((settings.importSourceAllowlist || []).join('\n'))
+    setRateLimitScope(settings.rateLimitScope || 'ip_address')
+  }, [settings])
+
+  const applyPreset = (preset: 'balanced' | 'strict' | 'lenient') => {
+    if (preset === 'strict') {
+      setRateLimitMaxRequests(20)
+      setRateLimitWindowSeconds(60)
+      setBanDurationMinutes(120)
+      setEscalationTempBanThreshold(2)
+      setEscalationLookbackHours(24)
+      setRateLimitScope('ip_address')
+      return
+    }
+    if (preset === 'lenient') {
+      setRateLimitMaxRequests(120)
+      setRateLimitWindowSeconds(60)
+      setBanDurationMinutes(15)
+      setEscalationTempBanThreshold(5)
+      setEscalationLookbackHours(12)
+      setRateLimitScope('fingerprint')
+      return
+    }
+    setRateLimitMaxRequests(60)
+    setRateLimitWindowSeconds(60)
+    setBanDurationMinutes(30)
+    setEscalationTempBanThreshold(3)
+    setEscalationLookbackHours(24)
+    setRateLimitScope('ip_address')
+  }
+
+  const validateSettings = () => {
+    if (rateLimitMaxRequests < 1) return 'Requests must be at least 1.'
+    if (rateLimitWindowSeconds < 1) return 'Window seconds must be at least 1.'
+    if (banDurationMinutes < 1) return 'Temp ban duration must be at least 1 minute.'
+    if (escalationTempBanThreshold < 1) return 'Escalation threshold must be at least 1.'
+    if (escalationLookbackHours < 1) return 'Escalation lookback must be at least 1 hour.'
+    return ''
+  }
+
+  return (
+    <AdminLayout>
+      <AppPageTitle title='Security Settings' />
+      <div className='my-4 border rounded bg-white p-3'>
+        <div className='d-flex justify-content-end mb-2'>
+          <Link href='/admin/activity' className='btn btn-sm btn-outline-dark'>Back to activity history</Link>
+        </div>
+        <div className='border rounded p-3'>
+          <div className='fw-semibold mb-2'>Rate Limit & Ban Policy</div>
+          <div className='d-flex gap-2 mb-2'>
+            <button className='btn btn-sm btn-outline-secondary' onClick={() => applyPreset('balanced')}>Balanced preset</button>
+            <button className='btn btn-sm btn-outline-secondary' onClick={() => applyPreset('strict')}>Strict preset</button>
+            <button className='btn btn-sm btn-outline-secondary' onClick={() => applyPreset('lenient')}>Lenient preset</button>
+          </div>
+          <div className='row g-2 align-items-end'>
+            <div className='col-6 col-md-2'>
+              <label className='form-label small text-muted'>Scope</label>
+              <select
+                className='form-select form-select-sm'
+                value={rateLimitScope}
+                onChange={(event) => setRateLimitScope(event.target.value as 'ip_address' | 'fingerprint' | 'user_id')}
+              >
+                <option value='ip_address'>IP Address</option>
+                <option value='fingerprint'>Fingerprint</option>
+                <option value='user_id'>User ID</option>
+              </select>
+            </div>
+            <div className='col-6 col-md-2'>
+              <label className='form-label small text-muted'>Requests</label>
+              <input className='form-control form-control-sm' type='number' min={1} value={rateLimitMaxRequests} onChange={(e) => setRateLimitMaxRequests(Math.max(1, Number(e.target.value || 1)))} />
+            </div>
+            <div className='col-6 col-md-2'>
+              <label className='form-label small text-muted'>Per seconds</label>
+              <input className='form-control form-control-sm' type='number' min={1} value={rateLimitWindowSeconds} onChange={(e) => setRateLimitWindowSeconds(Math.max(1, Number(e.target.value || 1)))} />
+            </div>
+            <div className='col-6 col-md-2'>
+              <label className='form-label small text-muted'>Temp bans before perm</label>
+              <input className='form-control form-control-sm' type='number' min={1} value={escalationTempBanThreshold} onChange={(e) => setEscalationTempBanThreshold(Math.max(1, Number(e.target.value || 1)))} />
+            </div>
+            <div className='col-6 col-md-2'>
+              <label className='form-label small text-muted'>Lookback hours</label>
+              <input className='form-control form-control-sm' type='number' min={1} value={escalationLookbackHours} onChange={(e) => setEscalationLookbackHours(Math.max(1, Number(e.target.value || 1)))} />
+            </div>
+            <div className='col-6 col-md-2'>
+              <label className='form-label small text-muted'>Temp ban minutes</label>
+              <input className='form-control form-control-sm' type='number' min={1} value={banDurationMinutes} onChange={(e) => setBanDurationMinutes(Math.max(1, Number(e.target.value || 1)))} />
+            </div>
+            <div className='col-12 col-md-6'>
+              <label className='form-label small text-muted'>Import source allowlist (one per line)</label>
+              <textarea className='form-control form-control-sm' rows={4} value={importSourceAllowlistText} onChange={(e) => setImportSourceAllowlistText(e.target.value)} />
+            </div>
+            <div className='col-12 d-flex flex-wrap gap-3 small'>
+              <label className='d-flex align-items-center gap-2'><input type='checkbox' checked={rateLimitEnabled} onChange={(e) => setRateLimitEnabled(e.target.checked)} />Rate limiting enabled</label>
+              <label className='d-flex align-items-center gap-2'><input type='checkbox' checked={autoTempBanEnabled} onChange={(e) => setAutoTempBanEnabled(e.target.checked)} />Auto temp ban enabled</label>
+              <label className='d-flex align-items-center gap-2'><input type='checkbox' checked={escalationEnabled} onChange={(e) => setEscalationEnabled(e.target.checked)} />Escalation enabled</label>
+              <label className='d-flex align-items-center gap-2'><input type='checkbox' checked={escalateToPermanent} onChange={(e) => setEscalateToPermanent(e.target.checked)} />Escalate to permanent</label>
+              <label className='d-flex align-items-center gap-2'><input type='checkbox' checked={importEnabled} onChange={(e) => setImportEnabled(e.target.checked)} />Import enabled</label>
+              <label className='d-flex align-items-center gap-2'><input type='checkbox' checked={importAllowUnknownSources} onChange={(e) => setImportAllowUnknownSources(e.target.checked)} />Allow unknown import sources</label>
+            </div>
+            {!!settingsError && <div className='col-12 small text-danger'>{settingsError}</div>}
+            <div className='col-12'>
+              <button
+                className='btn btn-sm btn-primary'
+                disabled={isSavingSettings}
+                onClick={async () => {
+                  const error = validateSettings()
+                  setSettingsError(error)
+                  if (error) return
+                  await updateSettings({
+                    orgId: orgId || undefined,
+                    importEnabled,
+                    importAllowUnknownSources,
+                    importSourceAllowlist: importSourceAllowlistText.split('\n').map((x) => x.trim()).filter(Boolean),
+                    rateLimitEnabled,
+                    rateLimitScope,
+                    autoTempBanEnabled,
+                    escalationEnabled,
+                    escalateToPermanent,
+                    rateLimitMaxRequests,
+                    rateLimitWindowSeconds,
+                    escalationTempBanThreshold,
+                    escalationLookbackHours,
+                    tempBanDurationMinutes: banDurationMinutes,
+                  }).unwrap()
+                }}
+              >
+                Save policy
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AdminLayout>
+  )
+}
+
+ActivitySecuritySettings.getInitialProps = async () => ({
+  pageTitle: 'Security Settings',
+  isAppNav: true,
+  showDetailTopNav: true,
+})
+
+export default WithAuth(ActivitySecuritySettings, { needSystemAdminRole: true })

package/src/pages/admin/categories/index.tsx

@@ -0,0 +1,61 @@
+import { useDisclosure } from '@chakra-ui/react'
+import { UpdateCategoryModal } from '@components/category/modal/UpdateCategoryModal'
+import { CategoryTable } from '@components/category/table/CategoryTable'
+import Button from '@components/common/button/Button'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { AdminLayout } from '@components/common/layout/admin/AdminLayout'
+import WithAuth from '@components/hoc/WithAuth'
+
+const CategoryList = () => {
+	const {
+		isOpen: isOpenCreateModal,
+		onOpen: onOpenCreateModal,
+		onClose: onCloseCreateModal,
+	} = useDisclosure()
+
+	return (
+		<AdminLayout>
+			<div className='row mx-auto'>
+				<div className='col-8 col-lg-6'>
+					<AppPageTitle title='Categories' />
+				</div>
+				<div className='col-4 col-lg-6 d-flex justify-content-end align-items-center'>
+					<Button
+						type='button'
+						className='no-min-size w-xs-80p rounded-xl text-white fw-bold d-md-none'
+						ariaLabel='Add new post'
+						color='primary'
+						onClick={onOpenCreateModal}
+					>
+						<span className='bi bi-plus'></span>
+					</Button>
+
+					<Button
+						color='primary'
+						className='text-white d-none d-md-block'
+						onClick={onOpenCreateModal}
+					>
+						Create Category
+					</Button>
+				</div>
+			</div>
+			<div className='my-4'>
+				<CategoryTable />
+			</div>
+			<UpdateCategoryModal
+				isOpen={isOpenCreateModal}
+				onClose={onCloseCreateModal}
+			/>
+		</AdminLayout>
+	)
+}
+
+CategoryList.getInitialProps = async () => {
+	return {
+		pageTitle: 'Categories',
+		isAppNav: true,
+		showDetailTopNav: true,
+	}
+}
+
+export default WithAuth(CategoryList, { needSystemAdminRole: true })

package/src/pages/admin/coupons/index.tsx

@@ -0,0 +1,38 @@
+import { useDisclosure } from '@chakra-ui/react'
+import Button from '@components/common/button/Button'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { AdminLayout } from '@components/common/layout/admin/AdminLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import { UpdateProductCouponModal } from '@components/product/modal/UpdateProductCouponModal'
+import { ProductCouponsTable } from '@components/product/table/ProductCouponsTable'
+
+const CouponList = () => {
+  const createModal = useDisclosure()
+
+  return (
+    <AdminLayout>
+      <div className="row mx-auto">
+        <div className="col-8 col-lg-6">
+          <AppPageTitle title="Coupons" />
+        </div>
+        <div className="col-4 col-lg-6 d-flex justify-content-end align-items-center">
+          <Button color="primary" className="text-white" onClick={createModal.onOpen}>
+            Create Coupon
+          </Button>
+        </div>
+      </div>
+      <div className="my-4">
+        <ProductCouponsTable />
+      </div>
+      <UpdateProductCouponModal isOpen={createModal.isOpen} onClose={createModal.onClose} />
+    </AdminLayout>
+  )
+}
+
+CouponList.getInitialProps = async () => ({
+  pageTitle: 'Coupons',
+  isAppNav: true,
+  showDetailTopNav: true,
+})
+
+export default WithAuth(CouponList, { needSystemAdminRole: true })