finished laravel migration

resources/js/pages/Acp.jsx

@@ -0,0 +1,786 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Button, ButtonGroup, Col, Container, Form, Modal, Row, Tab, Tabs } from 'react-bootstrap'
+import DataTable, { createTheme } from 'react-data-table-component'
+import { useTranslation } from 'react-i18next'
+import { createForum, deleteForum, listAllForums, listUsers, reorderForums, updateForum } from '../api/client'
+
+export default function Acp({ isAdmin }) {
+  const { t } = useTranslation()
+  const [forums, setForums] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [selectedId, setSelectedId] = useState(null)
+  const [draggingId, setDraggingId] = useState(null)
+  const [overId, setOverId] = useState(null)
+  const [createType, setCreateType] = useState(null)
+  const [users, setUsers] = useState([])
+  const [usersLoading, setUsersLoading] = useState(false)
+  const [usersError, setUsersError] = useState('')
+  const [usersPage, setUsersPage] = useState(1)
+  const [usersPerPage, setUsersPerPage] = useState(10)
+  const [themeMode, setThemeMode] = useState(
+    document.documentElement.getAttribute('data-bs-theme') || 'light'
+  )
+
+  useEffect(() => {
+    createTheme('speedbb-dark', {
+      text: {
+        primary: '#e6e8eb',
+        secondary: '#9aa4b2',
+      },
+      background: {
+        default: 'transparent',
+      },
+      context: {
+        background: '#1a1f29',
+        text: '#ffffff',
+      },
+      divider: {
+        default: '#2a2f3a',
+      },
+      action: {
+        button: 'rgba(230, 232, 235, 0.12)',
+        hover: 'rgba(230, 232, 235, 0.08)',
+        disabled: 'rgba(230, 232, 235, 0.35)',
+      },
+    })
+
+    createTheme('speedbb-light', {
+      text: {
+        primary: '#0e121b',
+        secondary: '#5b6678',
+      },
+      background: {
+        default: '#ffffff',
+      },
+      context: {
+        background: '#f7f2ea',
+        text: '#0e121b',
+      },
+      divider: {
+        default: '#e0d7c7',
+      },
+      action: {
+        button: 'rgba(14, 18, 27, 0.12)',
+        hover: 'rgba(14, 18, 27, 0.06)',
+        disabled: 'rgba(14, 18, 27, 0.35)',
+      },
+    })
+  }, [])
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setThemeMode(document.documentElement.getAttribute('data-bs-theme') || 'light')
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-bs-theme'],
+    })
+
+    return () => observer.disconnect()
+  }, [])
+  const userColumns = useMemo(
+    () => [
+      {
+        name: t('user.name'),
+        selector: (row) => row.name,
+        sortable: true,
+      },
+      {
+        name: t('user.email'),
+        selector: (row) => row.email,
+        sortable: true,
+      },
+      {
+        name: '',
+        width: '180px',
+        right: true,
+        cell: (row) => (
+          <div className="bb-user-actions">
+            <ButtonGroup className="bb-action-group">
+              <Button
+                variant="dark"
+                title={t('user.impersonate')}
+                onClick={() => console.log('impersonate', row)}
+              >
+                <i className="bi bi-person-badge" aria-hidden="true" />
+              </Button>
+              <Button
+                variant="dark"
+                title={t('user.edit')}
+                onClick={() => console.log('edit user', row)}
+              >
+                <i className="bi bi-pencil" aria-hidden="true" />
+              </Button>
+              <Button
+                variant="dark"
+                title={t('user.delete')}
+                onClick={() => console.log('delete user', row)}
+              >
+                <i className="bi bi-trash" aria-hidden="true" />
+              </Button>
+            </ButtonGroup>
+          </div>
+        ),
+      },
+    ],
+    [t]
+  )
+  const userTableStyles = useMemo(
+    () => ({
+      table: {
+        style: {
+          backgroundColor: themeMode === 'dark' ? 'transparent' : '#ffffff',
+        },
+      },
+      headRow: {
+        style: {
+          backgroundColor: themeMode === 'dark' ? '#1a1f29' : '#f7f2ea',
+          borderBottomColor: themeMode === 'dark' ? '#2a2f3a' : '#e0d7c7',
+          color: themeMode === 'dark' ? '#e6e8eb' : '#0e121b',
+          fontWeight: 600,
+        },
+      },
+      rows: {
+        style: {
+          backgroundColor: themeMode === 'dark' ? 'rgba(255, 255, 255, 0.02)' : '#ffffff',
+          color: themeMode === 'dark' ? '#e6e8eb' : '#0e121b',
+        },
+        stripedStyle: {
+          backgroundColor: themeMode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : '#f7f2ea',
+          color: themeMode === 'dark' ? '#e6e8eb' : '#0e121b',
+        },
+        highlightOnHoverStyle: {
+          backgroundColor: themeMode === 'dark'
+            ? 'transparent'
+            : 'rgba(0, 0, 0, 0.04)',
+        },
+      },
+      pagination: {
+        style: {
+          backgroundColor: themeMode === 'dark' ? '#1a1f29' : '#ffffff',
+          color: themeMode === 'dark' ? '#cfd6df' : '#5b6678',
+          borderTopColor: themeMode === 'dark' ? '#2a2f3a' : '#e0d7c7',
+        },
+      },
+    }),
+    [themeMode]
+  )
+
+  const UsersPagination = ({ rowsPerPage, rowCount, onChangePage }) => {
+    const totalPages = Math.max(1, Math.ceil(rowCount / rowsPerPage))
+    const current = Math.min(usersPage, totalPages)
+
+    const pages = []
+    for (let page = Math.max(1, current - 2); page <= Math.min(totalPages, current + 2); page += 1) {
+      pages.push(page)
+    }
+
+    const goTo = (page) => {
+      if (page < 1 || page > totalPages) return
+      onChangePage(page, rowCount)
+    }
+
+    return (
+      <div className="bb-pagination">
+        <div className="bb-pagination-range">
+          {t('table.rows_per_page')} {rowsPerPage}{' '}
+          <span className="bb-muted">
+            {((current - 1) * rowsPerPage) + 1}-{Math.min(current * rowsPerPage, rowCount)} {t('table.range_separator')} {rowCount}
+          </span>
+        </div>
+        <div className="bb-pagination-actions">
+          <button type="button" onClick={() => goTo(1)} disabled={current === 1}>
+            «
+          </button>
+          <button type="button" onClick={() => goTo(current - 1)} disabled={current === 1}>
+            ‹
+          </button>
+          {pages.map((page) => (
+            <button
+              key={page}
+              type="button"
+              className={page === current ? 'is-active' : ''}
+              onClick={() => goTo(page)}
+            >
+              {page}
+            </button>
+          ))}
+          <button type="button" onClick={() => goTo(current + 1)} disabled={current === totalPages}>
+            ›
+          </button>
+          <button type="button" onClick={() => goTo(totalPages)} disabled={current === totalPages}>
+            »
+          </button>
+        </div>
+      </div>
+    )
+  }
+  const [collapsed, setCollapsed] = useState(() => new Set())
+  const [showModal, setShowModal] = useState(false)
+  const [form, setForm] = useState({
+    name: '',
+    description: '',
+    type: 'category',
+    parentId: '',
+  })
+
+  const refreshForums = async () => {
+    setLoading(true)
+    setError('')
+    try {
+      const data = await listAllForums()
+      setForums(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (isAdmin) {
+      refreshForums()
+    }
+  }, [isAdmin])
+
+  const refreshUsers = async () => {
+    setUsersLoading(true)
+    setUsersError('')
+    try {
+      const data = await listUsers()
+      setUsers(data)
+    } catch (err) {
+      setUsersError(err.message)
+    } finally {
+      setUsersLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (isAdmin) {
+      refreshUsers()
+    }
+  }, [isAdmin])
+
+  const getParentId = (forum) => {
+    if (!forum.parent) return null
+    if (typeof forum.parent === 'string') {
+      return forum.parent.split('/').pop()
+    }
+    return forum.parent.id ?? null
+  }
+
+  const forumTree = useMemo(() => {
+    const map = new Map()
+    const roots = []
+
+    forums.forEach((forum) => {
+      map.set(String(forum.id), { ...forum, children: [] })
+    })
+
+    forums.forEach((forum) => {
+      const parentId = getParentId(forum)
+      const node = map.get(String(forum.id))
+      if (parentId && map.has(String(parentId))) {
+        map.get(String(parentId)).children.push(node)
+      } else {
+        roots.push(node)
+      }
+    })
+
+    const sortNodes = (nodes) => {
+      nodes.sort((a, b) => {
+        if (a.position !== b.position) return a.position - b.position
+        return a.name.localeCompare(b.name)
+      })
+      nodes.forEach((node) => sortNodes(node.children))
+    }
+
+    sortNodes(roots)
+
+    return { roots, map }
+  }, [forums])
+
+  const categoryOptions = useMemo(
+    () => forums.filter((forum) => forum.type === 'category'),
+    [forums]
+  )
+
+  const handleSelectForum = (forum) => {
+    const parentId =
+      typeof forum.parent === 'string'
+        ? forum.parent.split('/').pop()
+        : forum.parent?.id ?? ''
+    setSelectedId(String(forum.id))
+    setShowModal(true)
+    setCreateType(null)
+    setForm({
+      name: forum.name || '',
+      description: forum.description || '',
+      type: forum.type || 'category',
+      parentId: parentId ? String(parentId) : '',
+    })
+  }
+
+  const handleReset = () => {
+    setSelectedId(null)
+    setShowModal(false)
+    setCreateType(null)
+    setForm({
+      name: '',
+      description: '',
+      type: 'category',
+      parentId: '',
+    })
+  }
+
+  const isExpanded = (forumId) => {
+    const key = String(forumId)
+    return !collapsed.has(key)
+  }
+
+  const toggleExpanded = (forumId) => {
+    const key = String(forumId)
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) {
+        next.delete(key)
+      } else {
+        next.add(key)
+      }
+      return next
+    })
+  }
+
+  const handleCollapseAll = () => {
+    const ids = forums
+      .filter((forum) => forum.type === 'category')
+      .map((forum) => String(forum.id))
+    setCollapsed(new Set(ids))
+  }
+
+  const handleExpandAll = () => {
+    setCollapsed(new Set())
+  }
+
+  const handleStartCreate = (type) => {
+    const current = selectedId
+    setSelectedId(null)
+    setShowModal(true)
+    setCreateType(type)
+    const parentFromSelection = current
+      ? forums.find((forum) => String(forum.id) === String(current))
+      : null
+    const parentId =
+      parentFromSelection?.type === 'category' ? String(parentFromSelection.id) : ''
+    setForm({
+      name: '',
+      description: '',
+      type,
+      parentId,
+    })
+  }
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    setError('')
+    const trimmedName = form.name.trim()
+    if (!trimmedName) {
+      setError(t('acp.forums_name_required'))
+      return
+    }
+    try {
+      if (selectedId) {
+        await updateForum(selectedId, {
+          name: trimmedName,
+          description: form.description,
+          type: form.type,
+          parentId: form.parentId || null,
+        })
+      } else {
+        await createForum({
+          name: trimmedName,
+          description: form.description,
+          type: form.type,
+          parentId: form.parentId || null,
+        })
+      }
+      handleReset()
+      refreshForums()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleDelete = async (forumId) => {
+    setError('')
+    if (!confirm(t('acp.forums_confirm_delete'))) {
+      return
+    }
+    try {
+      await deleteForum(forumId)
+      if (selectedId === String(forumId)) {
+        handleReset()
+      }
+      refreshForums()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleDragStart = (event, forumId) => {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', String(forumId))
+    setDraggingId(String(forumId))
+  }
+
+  const handleDragEnd = () => {
+    setDraggingId(null)
+    setOverId(null)
+  }
+
+  const applyLocalOrder = (parentId, orderedIds) => {
+    setForums((prev) =>
+      prev.map((forum) => {
+        const pid = getParentId(forum)
+        if (String(pid ?? '') !== String(parentId ?? '')) {
+          return forum
+        }
+        const newIndex = orderedIds.indexOf(String(forum.id))
+        return newIndex === -1 ? forum : { ...forum, position: newIndex + 1 }
+      })
+    )
+  }
+
+  const handleDragOver = (event, targetId, parentId) => {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+    if (!draggingId || String(draggingId) === String(targetId)) {
+      return
+    }
+
+    const draggedForum = forums.find((forum) => String(forum.id) === String(draggingId))
+    if (!draggedForum) {
+      return
+    }
+
+    const draggedParentId = getParentId(draggedForum)
+    if (String(draggedParentId ?? '') !== String(parentId ?? '')) {
+      return
+    }
+
+    const siblings = forums.filter((forum) => {
+      const pid = getParentId(forum)
+      return String(pid ?? '') === String(parentId ?? '')
+    })
+
+    const ordered = siblings
+      .slice()
+      .sort((a, b) => {
+        if (a.position !== b.position) return a.position - b.position
+        return a.name.localeCompare(b.name)
+      })
+      .map((forum) => String(forum.id))
+
+    const fromIndex = ordered.indexOf(String(draggingId))
+    const toIndex = ordered.indexOf(String(targetId))
+    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+      return
+    }
+
+    ordered.splice(toIndex, 0, ordered.splice(fromIndex, 1)[0])
+    setOverId(String(targetId))
+    applyLocalOrder(parentId, ordered)
+  }
+
+  const handleDragEnter = (forumId) => {
+    if (draggingId && String(forumId) !== String(draggingId)) {
+      setOverId(String(forumId))
+    }
+  }
+
+  const handleDragLeave = (event, forumId) => {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return
+    }
+    if (overId === String(forumId)) {
+      setOverId(null)
+    }
+  }
+
+  const handleDrop = async (event, targetId, parentId) => {
+    event.preventDefault()
+    const draggedId = event.dataTransfer.getData('text/plain')
+    if (!draggedId || String(draggedId) === String(targetId)) {
+      setDraggingId(null)
+      setOverId(null)
+      return
+    }
+
+    const siblings = forums.filter((forum) => {
+      const pid = getParentId(forum)
+      return String(pid ?? '') === String(parentId ?? '')
+    })
+
+    const ordered = siblings
+      .slice()
+      .sort((a, b) => {
+        if (a.position !== b.position) return a.position - b.position
+        return a.name.localeCompare(b.name)
+      })
+      .map((forum) => String(forum.id))
+
+    const fromIndex = ordered.indexOf(String(draggedId))
+    const toIndex = ordered.indexOf(String(targetId))
+    if (fromIndex === -1 || toIndex === -1) {
+      return
+    }
+
+    ordered.splice(toIndex, 0, ordered.splice(fromIndex, 1)[0])
+
+    try {
+      await reorderForums(parentId, ordered)
+      const updated = forums.map((forum) => {
+        const pid = getParentId(forum)
+        if (String(pid ?? '') !== String(parentId ?? '')) {
+          return forum
+        }
+        const newIndex = ordered.indexOf(String(forum.id))
+        return newIndex === -1 ? forum : { ...forum, position: newIndex + 1 }
+      })
+      setForums(updated)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setDraggingId(null)
+      setOverId(null)
+    }
+  }
+
+  const renderTree = (nodes, depth = 0) =>
+    nodes.map((node) => (
+      <div key={node.id}>
+        <div
+          className={`bb-drag-item d-flex align-items-center justify-content-between border rounded p-2 mb-2 ${
+            overId === String(node.id) ? 'bb-drop-target' : ''
+          } ${draggingId === String(node.id) ? 'bb-dragging' : ''}`}
+          style={{ marginLeft: depth * 16 }}
+          draggable
+          onDragStart={(event) => handleDragStart(event, node.id)}
+          onDragEnd={handleDragEnd}
+          onDragOver={(event) => handleDragOver(event, node.id, getParentId(node))}
+          onDragEnter={() => handleDragEnter(node.id)}
+          onDragLeave={(event) => handleDragLeave(event, node.id)}
+          onDrop={(event) => handleDrop(event, node.id, getParentId(node))}
+        >
+          <div className="d-flex align-items-start gap-3">
+            <span className={`bb-icon ${node.type === 'forum' ? 'bb-icon--forum' : ''}`}>
+              <i className={`bi ${node.type === 'category' ? 'bi-folder2' : 'bi-chat-left-text'}`} />
+              {node.type === 'category' && node.children?.length > 0 && (
+                <button
+                  type="button"
+                  className="bb-collapse-toggle"
+                  onClick={() => toggleExpanded(node.id)}
+                  aria-label={isExpanded(node.id) ? t('acp.collapse') : t('acp.expand')}
+                  title={isExpanded(node.id) ? t('acp.collapse') : t('acp.expand')}
+                >
+                  <i
+                    className={`bi ${
+                      isExpanded(node.id) ? 'bi-caret-down-fill' : 'bi-caret-right-fill'
+                    }`}
+                    aria-hidden="true"
+                  />
+                </button>
+              )}
+            </span>
+            <div>
+              <div className="fw-semibold d-flex align-items-center gap-2">
+                <span>{node.name}</span>
+              </div>
+              <div className="bb-muted">{node.description || t('forum.no_description')}</div>
+            </div>
+          </div>
+          <div className="d-flex align-items-center gap-2">
+            <span
+              className="bb-drag-handle text-muted"
+              style={{ cursor: 'grab', display: 'inline-flex' }}
+              title={t('acp.drag_handle')}
+            >
+              <i className="bi bi-arrow-down-up" aria-hidden="true" />
+            </span>
+            <ButtonGroup size="sm" className="bb-action-group">
+              <Button variant="dark" onClick={() => handleSelectForum(node)} title={t('acp.edit')}>
+                <i className="bi bi-pencil" aria-hidden="true" />
+              </Button>
+              <Button variant="dark" onClick={() => handleDelete(node.id)} title={t('acp.delete')}>
+                <i className="bi bi-trash" aria-hidden="true" />
+              </Button>
+            </ButtonGroup>
+          </div>
+        </div>
+        {node.children?.length > 0 &&
+          (!node.type || node.type !== 'category' || isExpanded(node.id)) && (
+            <div className="mb-2">{renderTree(node.children, depth + 1)}</div>
+          )}
+      </div>
+    ))
+
+  if (!isAdmin) {
+    return (
+      <Container className="py-5">
+        <h2 className="mb-3">{t('acp.title')}</h2>
+        <p className="bb-muted">{t('acp.no_access')}</p>
+      </Container>
+    )
+  }
+
+  return (
+    <Container fluid className="bb-acp py-4">
+      <h2 className="mb-4">{t('acp.title')}</h2>
+      <Tabs defaultActiveKey="general" className="mb-3">
+        <Tab eventKey="general" title={t('acp.general')}>
+          <p className="bb-muted">{t('acp.general_hint')}</p>
+        </Tab>
+        <Tab eventKey="forums" title={t('acp.forums')}>
+          <p className="bb-muted">{t('acp.forums_hint')}</p>
+          {error && <p className="text-danger">{error}</p>}
+          <Row className="g-4">
+            <Col lg={12}>
+              <div className="d-flex align-items-center justify-content-between mb-3 gap-3 flex-wrap">
+                <div className="d-flex align-items-center gap-2">
+                  <h5 className="mb-0">{t('acp.forums_tree')}</h5>
+                  <Button size="sm" variant="outline-dark" onClick={handleExpandAll}>
+                    <i className="bi bi-arrows-expand me-1" aria-hidden="true" />
+                    {t('acp.expand_all')}
+                  </Button>
+                  <Button size="sm" variant="outline-dark" onClick={handleCollapseAll}>
+                    <i className="bi bi-arrows-collapse me-1" aria-hidden="true" />
+                    {t('acp.collapse_all')}
+                  </Button>
+                </div>
+                <div className="d-flex gap-2">
+                  <Button
+                    size="sm"
+                    variant={createType === 'category' ? 'dark' : 'outline-dark'}
+                    onClick={() => handleStartCreate('category')}
+                  >
+                    <i className="bi bi-folder2 me-1" aria-hidden="true" />
+                    {t('acp.new_category')}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant={createType === 'forum' ? 'dark' : 'outline-dark'}
+                    onClick={() => handleStartCreate('forum')}
+                  >
+                    <i className="bi bi-chat-left-text me-1" aria-hidden="true" />
+                    {t('acp.new_forum')}
+                  </Button>
+                </div>
+              </div>
+              {loading && <p className="bb-muted">{t('acp.loading')}</p>}
+              {!loading && forumTree.roots.length === 0 && (
+                <p className="bb-muted">{t('acp.forums_empty')}</p>
+              )}
+              {forumTree.roots.length > 0 && (
+                <div className="mt-2">{renderTree(forumTree.roots)}</div>
+              )}
+            </Col>
+          </Row>
+        </Tab>
+        <Tab eventKey="users" title={t('acp.users')}>
+          {usersError && <p className="text-danger">{usersError}</p>}
+          {usersLoading && <p className="bb-muted">{t('acp.loading')}</p>}
+          {!usersLoading && (
+            <DataTable
+              columns={userColumns}
+              data={users}
+              pagination
+              striped
+              highlightOnHover={themeMode !== 'dark'}
+              dense
+              theme={themeMode === 'dark' ? 'speedbb-dark' : 'speedbb-light'}
+              customStyles={userTableStyles}
+              paginationComponentOptions={{
+                rowsPerPageText: t('table.rows_per_page'),
+                rangeSeparatorText: t('table.range_separator'),
+              }}
+              paginationPerPage={usersPerPage}
+              onChangePage={(page) => setUsersPage(page)}
+              onChangeRowsPerPage={(perPage) => {
+                setUsersPerPage(perPage)
+                setUsersPage(1)
+              }}
+              paginationComponent={UsersPagination}
+            />
+          )}
+        </Tab>
+      </Tabs>
+      <Modal show={showModal} onHide={handleReset} centered size="lg">
+        <Modal.Header closeButton closeVariant="white">
+          <Modal.Title>
+            {selectedId ? t('acp.forums_edit_title') : t('acp.forums_create_title')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <p className="bb-muted">{t('acp.forums_form_hint')}</p>
+          <Form onSubmit={handleSubmit}>
+            <Form.Group className="mb-3">
+              <Form.Label>{t('form.title')}</Form.Label>
+              <Form.Control
+                type="text"
+                value={form.name}
+                onChange={(event) => setForm({ ...form, name: event.target.value })}
+                required
+              />
+            </Form.Group>
+            <Form.Group className="mb-3">
+              <Form.Label>{t('form.description')}</Form.Label>
+              <Form.Control
+                as="textarea"
+                rows={3}
+                value={form.description}
+                onChange={(event) => setForm({ ...form, description: event.target.value })}
+              />
+            </Form.Group>
+            <Form.Group className="mb-3">
+              <Form.Label>{t('acp.forums_type')}</Form.Label>
+              <Form.Select
+                value={form.type}
+                onChange={(event) => setForm({ ...form, type: event.target.value })}
+              >
+                <option value="category">{t('forum.type_category')}</option>
+                <option value="forum">{t('forum.type_forum')}</option>
+              </Form.Select>
+            </Form.Group>
+            <Form.Group className="mb-3">
+              <Form.Label>{t('acp.forums_parent')}</Form.Label>
+              <Form.Select
+                value={form.parentId}
+                onChange={(event) => setForm({ ...form, parentId: event.target.value })}
+              >
+                <option value="">{t('acp.forums_parent_root')}</option>
+                {categoryOptions
+                  .filter((option) => String(option.id) !== String(selectedId))
+                  .map((option) => (
+                    <option key={option.id} value={option.id}>
+                      {option.name}
+                    </option>
+                  ))}
+              </Form.Select>
+            </Form.Group>
+            <div className="d-flex gap-2 justify-content-between">
+              <Button type="button" variant="outline-secondary" onClick={handleReset}>
+                {t('acp.cancel')}
+              </Button>
+              <Button type="submit" className="bb-accent-button">
+                {selectedId ? t('acp.save') : t('acp.create')}
+              </Button>
+            </div>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </Container>
+  )
+}

resources/js/pages/ForumView.jsx

@@ -0,0 +1,180 @@
+import { useEffect, useState } from 'react'
+import { Button, Card, Col, Container, Form, Row } from 'react-bootstrap'
+import { Link, useParams } from 'react-router-dom'
+import { createThread, getForum, listForumsByParent, listThreadsByForum } from '../api/client'
+import { useAuth } from '../context/AuthContext'
+import { useTranslation } from 'react-i18next'
+
+export default function ForumView() {
+  const { id } = useParams()
+  const { token } = useAuth()
+  const [forum, setForum] = useState(null)
+  const [children, setChildren] = useState([])
+  const [threads, setThreads] = useState([])
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [title, setTitle] = useState('')
+  const [body, setBody] = useState('')
+  const [saving, setSaving] = useState(false)
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    let active = true
+
+    const loadData = async () => {
+      setLoading(true)
+      setError('')
+      try {
+        const forumData = await getForum(id)
+        if (!active) return
+        setForum(forumData)
+        const childData = await listForumsByParent(id)
+        if (!active) return
+        setChildren(childData)
+        if (forumData.type === 'forum') {
+          const threadData = await listThreadsByForum(id)
+          if (!active) return
+          setThreads(threadData)
+        } else {
+          setThreads([])
+        }
+      } catch (err) {
+        if (active) setError(err.message)
+      } finally {
+        if (active) setLoading(false)
+      }
+    }
+
+    loadData()
+
+    return () => {
+      active = false
+    }
+  }, [id])
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await createThread({ title, body, forumId: id })
+      setTitle('')
+      setBody('')
+      const updated = await listThreadsByForum(id)
+      setThreads(updated)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Container className="py-5">
+      {loading && <p className="bb-muted">{t('forum.loading')}</p>}
+      {error && <p className="text-danger">{error}</p>}
+      {forum && (
+        <>
+          <div className="bb-hero mb-4">
+            <p className="bb-chip">
+              {forum.type === 'forum' ? t('forum.type_forum') : t('forum.type_category')}
+            </p>
+            <h2 className="mt-3">{forum.name}</h2>
+            <p className="bb-muted mb-0">
+              {forum.description || t('forum.no_description')}
+            </p>
+          </div>
+
+          <Row className="g-4">
+            <Col lg={7}>
+              <h4 className="bb-section-title mb-3">{t('forum.children')}</h4>
+              {children.length === 0 && (
+                <p className="bb-muted">{t('forum.empty_children')}</p>
+              )}
+              {children.map((child) => (
+                <Card className="bb-card mb-3" key={child.id}>
+                  <Card.Body>
+                    <Card.Title>{child.name}</Card.Title>
+                    <Card.Text className="bb-muted">
+                      {child.description || t('forum.no_description')}
+                    </Card.Text>
+                    <Link to={`/forum/${child.id}`} className="stretched-link">
+                      {t('forum.open')}
+                    </Link>
+                  </Card.Body>
+                </Card>
+              ))}
+
+              {forum.type === 'forum' && (
+                <>
+                  <h4 className="bb-section-title mb-3 mt-4">{t('forum.threads')}</h4>
+                  {threads.length === 0 && (
+                    <p className="bb-muted">{t('forum.empty_threads')}</p>
+                  )}
+                  {threads.map((thread) => (
+                    <Card className="bb-card mb-3" key={thread.id}>
+                      <Card.Body>
+                        <Card.Title>{thread.title}</Card.Title>
+                        <Card.Text className="bb-muted">
+                          {thread.body.length > 160
+                            ? `${thread.body.slice(0, 160)}...`
+                            : thread.body}
+                        </Card.Text>
+                        <Link to={`/thread/${thread.id}`} className="stretched-link">
+                          {t('thread.view')}
+                        </Link>
+                      </Card.Body>
+                    </Card>
+                  ))}
+                </>
+              )}
+            </Col>
+            <Col lg={5}>
+              <h4 className="bb-section-title mb-3">{t('forum.start_thread')}</h4>
+              <div className="bb-form">
+                {forum.type !== 'forum' && (
+                  <p className="bb-muted mb-3">{t('forum.only_forums')}</p>
+                )}
+                {forum.type === 'forum' && !token && (
+                  <p className="bb-muted mb-3">{t('forum.login_hint')}</p>
+                )}
+                <Form onSubmit={handleSubmit}>
+                  <Form.Group className="mb-3">
+                    <Form.Label>{t('form.title')}</Form.Label>
+                    <Form.Control
+                      type="text"
+                      placeholder={t('form.thread_title_placeholder')}
+                      value={title}
+                      onChange={(event) => setTitle(event.target.value)}
+                      disabled={!token || saving || forum.type !== 'forum'}
+                      required
+                    />
+                  </Form.Group>
+                  <Form.Group className="mb-3">
+                    <Form.Label>{t('form.body')}</Form.Label>
+                    <Form.Control
+                      as="textarea"
+                      rows={5}
+                      placeholder={t('form.thread_body_placeholder')}
+                      value={body}
+                      onChange={(event) => setBody(event.target.value)}
+                      disabled={!token || saving || forum.type !== 'forum'}
+                      required
+                    />
+                  </Form.Group>
+                  <Button
+                    type="submit"
+                    variant="dark"
+                    disabled={!token || saving || forum.type !== 'forum'}
+                  >
+                    {saving ? t('form.posting') : t('form.create_thread')}
+                  </Button>
+                </Form>
+              </div>
+            </Col>
+          </Row>
+        </>
+      )}
+    </Container>
+  )
+}

resources/js/pages/Home.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Container } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import { listAllForums } from '../api/client'
+import { useTranslation } from 'react-i18next'
+
+export default function Home() {
+  const [forums, setForums] = useState([])
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(true)
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    listAllForums()
+      .then(setForums)
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const getParentId = (forum) => {
+    if (!forum.parent) return null
+    if (typeof forum.parent === 'string') {
+      return forum.parent.split('/').pop()
+    }
+    return forum.parent.id ?? null
+  }
+
+  const forumTree = useMemo(() => {
+    const map = new Map()
+    const roots = []
+
+    forums.forEach((forum) => {
+      map.set(String(forum.id), { ...forum, children: [] })
+    })
+
+    forums.forEach((forum) => {
+      const parentId = getParentId(forum)
+      const node = map.get(String(forum.id))
+      if (parentId && map.has(String(parentId))) {
+        map.get(String(parentId)).children.push(node)
+      } else {
+        roots.push(node)
+      }
+    })
+
+    const sortNodes = (nodes) => {
+      nodes.sort((a, b) => {
+        if (a.position !== b.position) return a.position - b.position
+        return a.name.localeCompare(b.name)
+      })
+      nodes.forEach((node) => sortNodes(node.children))
+    }
+
+    sortNodes(roots)
+
+    return roots
+  }, [forums])
+
+  const renderTree = (nodes, depth = 0) =>
+    nodes.map((node) => (
+      <div key={node.id}>
+        <div
+          className="bb-forum-row border rounded p-3 mb-2 d-flex align-items-center justify-content-between"
+          style={{ marginLeft: depth * 16 }}
+        >
+          <div className="d-flex align-items-start gap-3">
+            <span className={`bb-icon ${node.type === 'forum' ? 'bb-icon--forum' : ''}`}>
+              <i className={`bi ${node.type === 'category' ? 'bi-folder2' : 'bi-chat-left-text'}`} />
+            </span>
+            <div>
+              <Link to={`/forum/${node.id}`} className="bb-forum-link fw-semibold">
+                {node.name}
+              </Link>
+              <div className="bb-muted">{node.description || t('forum.no_description')}</div>
+            </div>
+          </div>
+        </div>
+        {node.children?.length > 0 && (
+          <div className="mb-2">{renderTree(node.children, depth + 1)}</div>
+        )}
+      </div>
+    ))
+
+  return (
+    <Container className="py-5">
+      <div className="bb-hero mb-4">
+        <p className="bb-chip">{t('app.brand')}</p>
+        <h1 className="mt-3">{t('home.hero_title')}</h1>
+        <p className="bb-muted mb-0">
+          {t('home.hero_body')}
+        </p>
+      </div>
+
+      <h3 className="bb-section-title mb-3">{t('home.browse')}</h3>
+      {loading && <p className="bb-muted">{t('home.loading')}</p>}
+      {error && <p className="text-danger">{error}</p>}
+      {!loading && forumTree.length === 0 && (
+        <p className="bb-muted">{t('home.empty')}</p>
+      )}
+      {forumTree.length > 0 && <div className="mt-2">{renderTree(forumTree)}</div>}
+    </Container>
+  )
+}

resources/js/pages/Login.jsx

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { Button, Card, Container, Form } from 'react-bootstrap'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+import { useTranslation } from 'react-i18next'
+
+export default function Login() {
+  const { login } = useAuth()
+  const navigate = useNavigate()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { t } = useTranslation()
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      await login(email, password)
+      navigate('/')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Container className="py-5">
+      <Card className="bb-card mx-auto" style={{ maxWidth: '480px' }}>
+        <Card.Body>
+          <Card.Title className="mb-3">{t('auth.login_title')}</Card.Title>
+          <Card.Text className="bb-muted">{t('auth.login_hint')}</Card.Text>
+          {error && <p className="text-danger">{error}</p>}
+          <Form onSubmit={handleSubmit}>
+            <Form.Group className="mb-3">
+              <Form.Label>{t('form.email')}</Form.Label>
+              <Form.Control
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                required
+              />
+            </Form.Group>
+            <Form.Group className="mb-4">
+              <Form.Label>{t('form.password')}</Form.Label>
+              <Form.Control
+                type="password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                required
+              />
+            </Form.Group>
+            <Button type="submit" variant="dark" disabled={loading}>
+              {loading ? t('form.signing_in') : t('form.sign_in')}
+            </Button>
+          </Form>
+        </Card.Body>
+      </Card>
+    </Container>
+  )
+}

resources/js/pages/Register.jsx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { Button, Card, Container, Form } from 'react-bootstrap'
+import { useNavigate } from 'react-router-dom'
+import { registerUser } from '../api/client'
+import { useTranslation } from 'react-i18next'
+
+export default function Register() {
+  const navigate = useNavigate()
+  const [email, setEmail] = useState('')
+  const [username, setUsername] = useState('')
+  const [plainPassword, setPlainPassword] = useState('')
+  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { t } = useTranslation()
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    setError('')
+    setNotice('')
+    setLoading(true)
+    try {
+      await registerUser({ email, username, plainPassword })
+      setNotice(t('auth.verify_notice'))
+      setEmail('')
+      setUsername('')
+      setPlainPassword('')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Container className="py-5">
+      <Card className="bb-card mx-auto" style={{ maxWidth: '520px' }}>
+        <Card.Body>
+          <Card.Title className="mb-3">{t('auth.register_title')}</Card.Title>
+          <Card.Text className="bb-muted">{t('auth.register_hint')}</Card.Text>
+          {error && <p className="text-danger">{error}</p>}
+          {notice && <p className="text-success">{notice}</p>}
+          <Form onSubmit={handleSubmit}>
+            <Form.Group className="mb-3">
+              <Form.Label>{t('form.email')}</Form.Label>
+              <Form.Control
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                required
+              />
+            </Form.Group>
+            <Form.Group className="mb-3">
+              <Form.Label>{t('form.username')}</Form.Label>
+              <Form.Control
+                type="text"
+                value={username}
+                onChange={(event) => setUsername(event.target.value)}
+                required
+              />
+            </Form.Group>
+            <Form.Group className="mb-4">
+              <Form.Label>{t('form.password')}</Form.Label>
+              <Form.Control
+                type="password"
+                value={plainPassword}
+                onChange={(event) => setPlainPassword(event.target.value)}
+                minLength={8}
+                required
+              />
+            </Form.Group>
+            <Button type="submit" variant="dark" disabled={loading}>
+              {loading ? t('form.registering') : t('form.create_account')}
+            </Button>
+          </Form>
+        </Card.Body>
+      </Card>
+    </Container>
+  )
+}

resources/js/pages/ThreadView.jsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react'
+import { Button, Card, Col, Container, Form, Row } from 'react-bootstrap'
+import { Link, useParams } from 'react-router-dom'
+import { createPost, getThread, listPostsByThread } from '../api/client'
+import { useAuth } from '../context/AuthContext'
+import { useTranslation } from 'react-i18next'
+
+export default function ThreadView() {
+  const { id } = useParams()
+  const { token } = useAuth()
+  const [thread, setThread] = useState(null)
+  const [posts, setPosts] = useState([])
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [body, setBody] = useState('')
+  const [saving, setSaving] = useState(false)
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    setLoading(true)
+    Promise.all([getThread(id), listPostsByThread(id)])
+      .then(([threadData, postData]) => {
+        setThread(threadData)
+        setPosts(postData)
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await createPost({ body, threadId: id })
+      setBody('')
+      const updated = await listPostsByThread(id)
+      setPosts(updated)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Container className="py-5">
+      {loading && <p className="bb-muted">{t('thread.loading')}</p>}
+      {error && <p className="text-danger">{error}</p>}
+      {thread && (
+        <>
+          <div className="bb-hero mb-4">
+            <p className="bb-chip">{t('thread.label')}</p>
+            <h2 className="mt-3">{thread.title}</h2>
+            <p className="bb-muted mb-2">{thread.body}</p>
+            {thread.forum && (
+              <p className="bb-muted mb-0">
+                {t('thread.category')}{' '}
+                <Link to={`/forum/${thread.forum.id || thread.forum.split('/').pop()}`}>
+                  {thread.forum.name || t('thread.back_to_category')}
+                </Link>
+              </p>
+            )}
+          </div>
+
+          <Row className="g-4">
+            <Col lg={7}>
+              <h4 className="bb-section-title mb-3">{t('thread.replies')}</h4>
+              {posts.length === 0 && (
+                <p className="bb-muted">{t('thread.empty')}</p>
+              )}
+              {posts.map((post) => (
+                <Card className="bb-card mb-3" key={post.id}>
+                  <Card.Body>
+                    <Card.Text>{post.body}</Card.Text>
+                    <small className="bb-muted">
+                      {post.author?.username || t('thread.anonymous')}
+                    </small>
+                  </Card.Body>
+                </Card>
+              ))}
+            </Col>
+            <Col lg={5}>
+              <h4 className="bb-section-title mb-3">{t('thread.reply')}</h4>
+              <div className="bb-form">
+                {!token && (
+                  <p className="bb-muted mb-3">{t('thread.login_hint')}</p>
+                )}
+                <Form onSubmit={handleSubmit}>
+                  <Form.Group className="mb-3">
+                    <Form.Label>{t('form.message')}</Form.Label>
+                    <Form.Control
+                      as="textarea"
+                      rows={5}
+                      placeholder={t('form.reply_placeholder')}
+                      value={body}
+                      onChange={(event) => setBody(event.target.value)}
+                      disabled={!token || saving}
+                      required
+                    />
+                  </Form.Group>
+                  <Button type="submit" variant="dark" disabled={!token || saving}>
+                    {saving ? t('form.posting') : t('form.post_reply')}
+                  </Button>
+                </Form>
+              </div>
+            </Col>
+          </Row>
+        </>
+      )}
+    </Container>
+  )
+}