Issue 7: Implement Admin UI, Documentation, and Final Hardening for blog_content #543

Parent Epic: #536
Depends on: #537, #538, #539, #540, #541
Optional dependency for advanced screens: #542

Objective

Add admin screens for blog management and complete documentation, test coverage, accessibility checks, and production readiness validation.

Context

This is the final hardening issue for the blog_content module. It must make the module usable by administrators while ensuring the implementation is documented, tested, accessible, and aligned with AWCMS-Mini production standards.

Scope

• Blog dashboard
• Posts list
• Post editor
• Pages list
• Page editor
• Categories manager
• Tags manager
• Settings page
• Optional advanced screens:
  • Templates
  • Widgets
  • Menus
  • Media/Gallery
  • Ads
• Documentation updates
• UX/accessibility hardening
• Final validation commands

Out of Scope

• Rebuilding the admin shell
• Adding a new frontend framework
• Rebuilding base auth/RBAC/ABAC/audit/media/sync systems
• Adding npm, pnpm, yarn, or Node.js runtime workflow

Admin Screens

/admin/blog
/admin/blog/posts
/admin/blog/posts/new
/admin/blog/posts/[id]
/admin/blog/pages
/admin/blog/pages/new
/admin/blog/pages/[id]
/admin/blog/categories
/admin/blog/tags
/admin/blog/settings

Optional advanced screens if #542 is included in the same milestone:

/admin/blog/templates
/admin/blog/widgets
/admin/blog/menus
/admin/blog/media
/admin/blog/ads

UI Requirements

• Use existing admin layout shell.
• Use existing design tokens.
• Use Astro + vanilla JS only.
• No new UI framework is added.
• Provide loading, empty, error, and ready states.
• Prevent double-submit.
• High-risk actions require confirmation.
• Form labels are accessible.
• Keyboard focus is visible.
• UI follows WCAG-aware contrast and interaction patterns.
• All visible strings follow existing i18n .po pattern where applicable.

Admin UX Requirements

Blog Dashboard

• Show summary cards for posts, drafts, scheduled posts, pages, and recent updates.
• Provide quick links to create post/page and manage taxonomies/settings.

Post List

• Support search.
• Support status filter.
• Support category/tag filter where available.
• Support pagination.
• Show title, status, author, locale, published/scheduled date, and last updated date.

Post Editor

Support fields:

• Title
• Slug
• Excerpt
• Content
• Status
• Visibility
• SEO title
• Meta description
• Canonical URL
• Category
• Tags
• Featured media reference where available
• Locale

Page Editor

Support fields:

• Title
• Slug
• Content
• Page type
• Parent page
• Menu order
• Visibility
• SEO fields
• Locale

Category/Tag Manager

• Categories support hierarchy.
• Tags must not support parent assignment.
• Slug conflict validation is visible.

Settings Page

Support settings:

• Blog title
• Blog description
• Posts per page
• RSS enabled
• Sitemap enabled
• Default locale
• Default SEO title template
• Default meta description

Documentation Updates

Update or add:

src/modules/blog-content/README.md
docs/awcms-mini/04_erd_data_dictionary.md
docs/awcms-mini/05_api_event_contract.md
docs/awcms-mini/07_sprint_test_plan.md
docs/awcms-mini/08_sop_operasional.md
docs/awcms-mini/13_traceability_matrix.md

Documentation must include:

• Module purpose
• Data model
• Permissions
• ABAC behavior
• Public visibility rules
• Scheduled publishing operation
• RSS/sitemap behavior
• Template, widget, menu, media/gallery, multilingual, theme mode, and advertisement behavior if enabled
• Security notes
• Testing commands
• Operational checklist
• Known limitations

Security and Compliance Notes

• No hardcoded secrets.
• No direct public PostgreSQL exposure.
• Runtime DB access must use least privilege.
• RLS isolation must be tested.
• High-risk admin actions require confirmation and audit.
• Public rendering must prevent XSS.
• Error messages must not leak stack traces or sensitive details.
• Implementation should remain aligned with OWASP Top 10, OWASP API Security Top 10, ISO 27001-style controls, and Indonesian PDP/ITE/PSTE-aware operational documentation where relevant.

Final Acceptance Criteria

• Admin blog dashboard exists.
• Post list supports search and filters.
• Post editor supports title, slug, excerpt, content, status, visibility, SEO, category, tags, and locale.
• Page editor exists.
• Category/tag manager exists.
• Settings page exists.
• Optional advanced screens exist if Issue 6: Implement Templates, Menus, Widgets, Media/Gallery, Multilingual, Theme Mode, and Ads #542 is merged.
• UI uses existing admin shell.
• UI uses existing design tokens.
• UI uses Astro + vanilla JS only.
• No new UI framework is added.
• Loading, empty, error, and ready states exist.
• High-risk actions require explicit confirmation.
• Double-submit is prevented.
• Labels and keyboard focus are accessible.
• Documentation matches implementation.
• OpenAPI and AsyncAPI are synchronized.
• No unrelated files are changed.
• No hardcoded secrets exist.
• Final validation commands pass.
• PR summary includes files changed, commands run, test results, security notes, docs updates, limitations, and next steps.

Final Validation Commands

bun run db:migrate
bun run api:spec:check
bun run typecheck
bun run test
bun run build
bun run check
bun run production:preflight