Upload files to "project-specs"

2026-04-13 11:26:58 +07:00
parent 82aecb7e9d
commit 98939f050a
5 changed files with 380 additions and 0 deletions
--- a/project-specs/TEMPLATE_STRUCTURE.md
+++ b/project-specs/TEMPLATE_STRUCTURE.md
@@ -0,0 +1,102 @@
+# Template Structure
+
+Recommended file organization for an HTMX + Tailwind rebuild.
+
+## Example Layout
+
+```text
+app/
+  templates/
+    layouts/
+      base.html
+      auth.html
+      shell.html
+    pages/
+      login.html
+      dashboard.html
+      orders/
+        list.html
+        detail.html
+        new.html
+      results/
+        list.html
+        detail.html
+      fpp/
+        list.html
+      settings/
+        account.html
+        change-password.html
+    fragments/
+      orders/
+        table.html
+        detail.html
+        stepper.html
+      results/
+        table.html
+        detail.html
+      fpp/
+        list.html
+      modals/
+        pesan-khusus.html
+    components/
+      sidebar.html
+      topbar.html
+      cards.html
+      table.html
+      empty-state.html
+      form-fields.html
+      pagination.html
+```
+
+## Layouts
+
+### `base.html`
+
+- Includes global Tailwind styles
+- Loads HTMX
+- Defines meta tags and page title
+
+### `auth.html`
+
+- Used for login and problem-login screens
+- Simple centered layout
+
+### `shell.html`
+
+- Used for authenticated app pages
+- Includes sidebar on desktop and nav on mobile
+
+## Components
+
+Keep components small and reusable:
+
+- sidebar
+- topbar
+- action bar
+- stat cards
+- search/filter bar
+- table rows
+- empty states
+- confirm dialogs
+- modal shells
+
+## Fragment Rules
+
+- A fragment should contain only the markup needed for the swap target
+- Fragments must be valid standalone HTML snippets
+- Do not duplicate full page layout in a fragment
+
+## Tailwind Rules
+
+- Use a consistent spacing scale
+- Define semantic color tokens in the design system layer
+- Make desktop breakpoints explicit
+- Prefer utility composition over custom CSS unless a pattern repeats often
+
+## Responsive Behavior
+
+- Mobile first
+- Sidebar becomes drawer or bottom nav
+- Tables become cards on small screens
+- Forms collapse to one column
+