one-for-all-framework 2.0.0 → 4.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 55f0f757d3582b86a7b3c4f3f55ed0074b66f680540d38dc6b7e0bcda9f484ed
-  data.tar.gz: 74c31da1387582d610f8b78aa5f174d22517921719623fc74f57e4c71adb077e
+  metadata.gz: 6010d541e08ee4d29882dbfe22d000853a511985f01ee3b18239c57086bd7906
+  data.tar.gz: d05cdc0c5df07e8f2d9c0f3715169a3817b04b34da654dc63ce8afbaba0b932a
 SHA512:
-  metadata.gz: b28e6c8a6530c27c2d25121cc9ecf7bafaa2cb8c16f3d702893918bcf02e5f29890aeb35a2112293592c5104bb8ade48a51c468cd4712921e033965e6dde8b78
-  data.tar.gz: 3f69537492a02ddf4c559b358d6af8ebaef7e95ddaf034899ba84ba95e5e4a59c20764f44ca41334b50b49f8d51617ebab0ddc06600ffbc5ce9c3f7580484e9a
+  metadata.gz: 4b84becdb59e23e5177cd6d61b33ae6875cbcdc00a1ab81fe98c4e644c97e1549950cdeef4da11758564cf316d009f69bd69b431d33852e9384383294126acbb
+  data.tar.gz: 45544d4a74c6636667674f46b3ede29f4bde1e7a5e14e3f0d9385450b03676e76c4f538169386255d8f5ed1a1c70f971f65c3a88bdb948b6ace802ca8bc05170

data/README.md

@@ -2,13 +2,13 @@
   <img src="public/images/logo.png" width="500" height="500" alt="OFA Framework Logo">
 </p>
 
-# ⚡ One-For-All (OFA) Framework
+# ⚡ One-For-All (OFA) Framework v4.0.0
 
 [![Ruby Version](https://img.shields.io/badge/ruby-%3E%3D%203.0.0-red.svg)](https://www.ruby-lang.org/)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![Framework](https://img.shields.io/badge/MVC-Lightweight-orange.svg)]()
 
-**One-For-All (OFA)** is a premium, ultra-fast Ruby MVC framework designed for developers who value both high performance and modern aesthetics. Built on the powerful **Eks-Cent** engine and optimized with **Eksa Server**, OFA provides a production-ready foundation with a stunning "Glassmorphism" UI out of the box.
+**One-For-All (OFA)** is a premium, ultra-fast Ruby MVC framework designed for developers who value both high performance and modern aesthetics. Built on the powerful **Eks-Cent** engine and optimized with **Eksa Server**, OFA v3.0 now supports **Full E-Commerce integration** alongside its stunning "Glassmorphism" UI.
 
 ---
 
@@ -16,7 +16,7 @@
 
 -   **💎 Premium Aesthetics**: Beautiful Glassmorphism design system included by default with smooth dark/light mode transitions.
 -   **🚀 Blazing Fast**: Built on a modular Nio4r-powered engine for minimal overhead and instant boot times.
--   **📂 Multi-Database**: Seamlessly switch between SQLite, MySQL, MariaDB, and MongoDB Atlas.
+-   **📂 Multi-Database**: Seamlessly switch and migrate data between SQLite, MySQL, MariaDB, and MongoDB Atlas.
 -   **🛠️ Developer First**: A robust CLI (`ofa`) that handles everything from scaffolding to deployment.
 -   **🔐 Enterprise Ready**: Built-in CSRF protection, secure session management, and input validation.
 -   **🌐 Global Support**: Multi-language (I18n) support and SEO optimization ready.
@@ -52,40 +52,117 @@ Your app is now live at `http://localhost:3000` ⚡
 
 ---
 
-## 🛠️ CLI Power Tools
+## 🛠️ CLI Deep Dive & Expected Outputs
+
+The `ofa` CLI is designed to be interactive and informative. Below is a detailed breakdown of all available commands and the visual feedback they provide.
+
+### 📦 Project & Environment
+#### `ofa init [TYPE]`
+Initialize your workspace. Triggers an interactive wizard for Database and Storage setup.
+*   **Output Example:**
+    ```text
+    🛠️ Project Configuration
+    💾 Choose Database [1. SQLite, 2. MongoDB Atlas]: 2
+    🔗 Enter MongoDB Connection String: mongodb+srv://...
+    🖼️ Choose Image Storage [1. Local, 2. Cloudinary]: 1
+    ✅ Connection string saved to .env
+    ✅ Project structure initialized.
+    ```
+
+#### `ofa run`
+Boots the high-performance Eksa Server engine.
+*   **Output Example:**
+    ```text
+    Starting One-For-All server...
+    [INFO] Mendengarkan di TCP: 0.0.0.0:3000
+    [EksCent] 2026-05-03 14:40:52 | GET / | Status: 200
+    ```
+
+### 🏗️ Generators (Scaffolding)
+#### `ofa g controller NAME`
+*   **Output:** `✅ Created app/controllers/blog_controller.rb`
+#### `ofa g model NAME`
+*   **Output:** `✅ Created app/models/product.rb`
+#### `ofa g post TITLE [args]`
+Creates a SEO-optimized blog post with metadata.
+*   **Example:** `./ofa g post "Hello World" --author Antigravity`
+*   **Output:** `✅ Created app/views/posts/hello_world.erb`
+
+### 📂 Database Management
+#### `ofa db switch TYPE [URL]`
+Switches your database adapter on the fly.
+*   **Output:** `Switched to mongodb mode.`
+
+#### `ofa db migrate-data TYPE [URL]`
+**The most powerful tool.** Moves all data from your current DB to a new one (SQL or MongoDB Atlas).
+*   **Output Example:**
+    ```text
+    📦 Starting data migration: sqlite -> mongodb...
+      Migrating users... 12 rows.
+      Migrating posts... 45 rows.
+    ✅ Migration successful!
+    ```
+
+#### `ofa db migrate` (or `ofa migrate`)
+Runs pending database migrations in `db/migrations/`.
+*   **Output:** `✅ Migrations completed.`
+
+### 🎨 Customization & Security
+#### `ofa theme NAME`
+Changes the entire UI skin (Modern Glass, Retro, Cyber).
+*   **Output:** `✅ Theme set to: retro_terminal`
+
+#### `ofa storage NAME`
+Switches between local disk and Cloudinary cloud storage.
+*   **Output:** `✅ Storage set to: cloudinary`
+
+#### `ofa reset-password USR PWD`
+Securely manages admin credentials.
+*   **Output:** `✅ Password for 'admin' updated successfully.`
 
-The `ofa` CLI is your best friend. Use it to manage your entire application lifecycle:
+---
 
-### Project Management
+### 📁 Project Lifecycle
 | Command | Description |
 | :--- | :--- |
-| `ofa new NAME [TYPE]` | Create a new project with automatic bundle install. |
-| `ofa init [TYPE]` | Initialize project in current folder with interactive wizard. |
-| `ofa run` | Start the high-performance development server. |
-| `ofa deploy` | Deploy project to production (Railway/Docker ready). |
+| `ofa new NAME [TYPE]` | **Create a new project.** Generates a new directory, initializes the framework structure, and automatically runs `bundle install`. <br> *Example:* `./ofa new my_portfolio portfolio` |
+| `ofa init [TYPE]` | **Initialize in current folder.** Ideal if you've already created a folder or cloned a repository. It triggers an **Interactive Wizard** to configure your Database (SQLite/MongoDB) and Image Storage (Local/Cloudinary). |
+| `ofa run` | **Start Development Server.** Boots the high-performance Eksa Server. Your app will be accessible at `http://localhost:3000`. |
+| `ofa deploy` | **Production Deployment.** Automatically detects deployment targets. <br> 1. Checks if it's a Git repository. <br> 2. Detects **Railway CLI** and triggers `railway up`. <br> 3. Supports Docker via the included `Dockerfile`. |
+
+---
+
+### 🏗️ Scaffolding & Generators (`ofa g`)
+Automate the creation of boilerplate code with the generator command.
 
-### Generators (Scaffolding)
 | Command | Description |
 | :--- | :--- |
-| `ofa g controller NAME` | Generate a RESTful controller in `app/controllers`. |
-| `ofa g model NAME` | Generate a database model and migration. |
-| `ofa g migration NAME` | Generate a new database migration file. |
-| `ofa g post TITLE` | Create a new Markdown post (Supports `--category`, `--author`). |
+| `ofa g controller NAME` | Creates a new controller in `app/controllers/{name}_controller.rb` with a default `index` action. |
+| `ofa g model NAME` | Generates a database model in `app/models/{name}.rb` integrated with the Sequel ORM. |
+| `ofa g migration NAME` | Creates a timestamped migration file in `db/migrations/`. Use this to define your schema changes. |
+| `ofa g post TITLE` | Creates a new Markdown/ERB post in `app/views/posts/`. <br> *Args:* `--category`, `--author`, `--image`. <br> *Example:* `./ofa g post "My First Journey" --category Tech --author "John Doe"` |
+
+---
+
+### 🎨 Configuration & Customization
+Fine-tune your application's behavior and appearance without touching the code.
 
-### Configuration & Features
 | Command | Description |
 | :--- | :--- |
-| `ofa type [TYPE]` | Set app type: `portfolio`, `blog`, or `landing_page`. |
-| `ofa theme [THEME]` | Set UI theme: `light_glass`, `dark_glass`, `cyber_sidebar`, etc. |
-| `ofa feature enable [F]` | Toggle features like `cms` or `auth`. |
-| `ofa storage [local\|cloudinary]` | Set image storage provider. |
-| `ofa reset-password USR PWD`| Reset or create admin account credentials. |
+| `ofa type NAME` | **Set Application Type.** Switches the layout logic between `portfolio`, `blog`, `landing_page`, and `e_commerce`. |
+| `ofa theme NAME` | **Change UI Aesthetic.** Instantly swap between premium themes: <br> • `light_glass` / `dark_glass` (Modern Glassmorphism) <br> • `cyber_sidebar` (High-tech) <br> • `retro_terminal` (Old-school hacker vibe) <br> • `light_sidebar` (Professional/Clean) |
+| `ofa feature ACTION FEATURE`| **Toggle Core Features.** Enable or disable system modules. <br> *Usage:* `./ofa feature enable auth` or `./ofa feature disable cms`. |
+| `ofa storage NAME` | **Set Media Storage.** Choose between `local` (uploads folder) or `cloudinary` (Cloud storage). |
+
+---
 
-### Database Management
+### 🔐 Security & Database
 | Command | Description |
 | :--- | :--- |
-| `ofa db switch [ADAPTER]` | Switch DB: `sqlite`, `mysql`, `postgres`, `mongodb`. |
-| `ofa db migrate` | Run all pending database migrations. |
+| `ofa reset-password USR PWD`| **Enterprise Recovery.** Resets admin credentials with strict enforcement: 8+ chars, uppercase, and numbers. Powered by BCrypt hashing. |
+| `ofa db migrate-data TYPE [NAME]`| **Zero-Loss Migration.** The ultimate tool to move data (Users, Posts, Products) from SQLite to MongoDB Atlas or other SQL DBs without losing a single record. |
+| `ofa db switch ADAPTER` | **Hot-swap Engine.** Instantly change your database adapter. Supports `sqlite`, `mysql`, `mariadb`, `postgres`, and `mongodb`. |
+| `ofa db migrate` | **Schema Evolution.** Runs all pending migrations. OFA automatically handles table creation for core models during boot for maximum reliability. |
 
 ---
 
@@ -100,13 +177,41 @@ OFA follows a strict **MVC (Model-View-Controller)** pattern:
 
 ---
 
-## 🚢 Deployment
-
-One-For-All is optimized for modern cloud platforms:
-
--   **Railway / Heroku**: Uses the included `Procfile` for automatic detection.
--   **Docker**: A lightweight `Dockerfile` based on `ruby:3.2-slim` is provided.
--   **VPS**: Can be run behind Nginx/Apache using the `ofa run` command.
+## 🚢 Deployment Guide
+
+One-For-All is designed to be cloud-native and "deploy-ready" from day one.
+
+### 🚂 Railway (Recommended)
+Railway is the easiest way to get your OFA app live. The framework includes a `Procfile` that Railway detects automatically.
+1. Install [Railway CLI](https://docs.railway.app/guides/cli).
+2. Run `railway login`.
+3. In your project folder, run:
+   ```bash
+   ./ofa deploy
+   ```
+   *The CLI will automatically trigger `railway up` and handle the build process.*
+
+### 🐳 Docker
+For customized hosting or VPS providers, use the optimized `Dockerfile`.
+1. **Build the image**:
+   ```bash
+   docker build -t my-ofa-app .
+   ```
+2. **Run the container**:
+   ```bash
+   docker run -p 3000:3000 --env-file .env my-ofa-app
+   ```
+   *Note: Ensure your `.env` contains production-ready database credentials.*
+
+### 🖥️ VPS (DigitalOcean, Linode, AWS)
+To run OFA on a raw Linux server:
+1. **Setup**: Clone your repo and run `bundle install --deployment`.
+2. **Database**: Run `./ofa db migrate` to sync your production schema.
+3. **Process Management**: Use [PM2](https://pm2.keymetrics.io/) to keep the server alive:
+   ```bash
+   pm2 start "./ofa run" --name ofa-app
+   ```
+4. **Reverse Proxy**: We recommend using **Nginx** as a reverse proxy to handle SSL and port 80/443 forwarding to port 3000.
 
 ---
 

data/app/controllers/cart_controller.rb

@@ -0,0 +1,52 @@
+require_relative 'application_controller'
+
+class CartController < ApplicationController
+  def index
+    @cart_items = session['cart'] || {}
+    # Convert string keys to integers for the query
+    @products = Product.where(id: @cart_items.keys.map(&:to_i)).all
+    @total = @products.sum { |p| p.price * @cart_items[p.id.to_s].to_i }
+    render 'cart_index', title: "Your Cart - One-For-All"
+  end
+
+  def add
+    product_id = params['product_id']
+    qty = params['qty'].to_i
+    qty = 1 if qty <= 0
+    
+    cart = session['cart'] || {}
+    cart[product_id] = (cart[product_id].to_i + qty)
+    session['cart'] = cart
+    
+    redirect_to '/cart'
+  end
+
+  def remove
+    product_id = params['product_id']
+    cart = session['cart'] || {}
+    cart.delete(product_id)
+    session['cart'] = cart
+    
+    redirect_to '/cart'
+  end
+  
+  def update
+    product_id = params['product_id']
+    qty = params['qty'].to_i
+    
+    cart = session['cart'] || {}
+    if qty <= 0
+      cart.delete(product_id)
+    else
+      cart[product_id] = qty
+    end
+    session['cart'] = cart
+    
+    redirect_to '/cart'
+  end
+
+  def clear
+    session['cart'] = {}
+    redirect_to '/cart'
+  end
+end

data/app/controllers/dashboard_controller.rb

@@ -7,7 +7,8 @@ class DashboardController < ApplicationController
     @stats = {
       pages: Page.count,
       posts: Post.count,
-      projects: Project.count
+      projects: Project.count,
+      products: defined?(Product) ? Product.count : 0
     }
     render 'dashboard'
   end

data/app/controllers/products_controller.rb

@@ -0,0 +1,58 @@
+require_relative 'application_controller'
+
+class ProductsController < ApplicationController
+  def index
+    if req.path.start_with?('/dashboard')
+      @products = Product.order(Sequel.desc(:created_at)).all
+      render 'cms/products_index'
+    else
+      @products = Product.where(is_active: true).order(Sequel.desc(:created_at)).all
+      render 'products_index', title: "Shop - One-For-All"
+    end
+  end
+
+  def new
+    @product = Product.new
+    render 'cms/products_form'
+  end
+
+  def create
+    data = params['product']
+    @product = Product.new(data)
+    if @product.save
+      redirect_to '/dashboard/products'
+    else
+      render 'cms/products_form'
+    end
+  end
+
+  def edit
+    @product = Product[params['id']]
+    render 'cms/products_form'
+  end
+
+  def update
+    @product = Product[params['id']]
+    if @product.update(params['product'])
+      redirect_to '/dashboard/products'
+    else
+      render 'cms/products_form'
+    end
+  end
+
+  def destroy
+    @product = Product[params['id']]
+    @product.destroy
+    redirect_to '/dashboard/products'
+  end
+
+  def show
+    @product = Product.find(slug: params['slug'], is_active: true)
+    if @product
+      render 'product_show', title: "#{@product.name} - One-For-All"
+    else
+      @res.status = 404
+      render 'error', message: "Product not found."
+    end
+  end
+end

data/app/models/product.rb

@@ -0,0 +1,8 @@
+class Product < Sequel::Model
+  plugin :timestamps, update_on_create: true
+  
+  def before_save
+    self.slug ||= self.name.downcase.gsub(/[^a-z0-9]/, '-')
+    super
+  end
+end

data/app/views/cart_index.erb

@@ -0,0 +1,112 @@
+<div class="text-center mb-16">
+    <h1 class="text-5xl font-black mb-4 tracking-tighter">Your Shopping Cart</h1>
+    <p class="text-slate-500 text-lg">Review your items before checkout.</p>
+</div>
+
+<div class="glass-panel overflow-hidden mb-10">
+    <!-- Desktop Header (Hidden on Mobile) -->
+    <div class="hidden md:grid grid-cols-12 bg-white/5 border-b border-white/5 text-slate-400 font-bold uppercase text-xs tracking-widest px-8 py-4">
+        <div class="col-span-5">Product</div>
+        <div class="col-span-2">Price</div>
+        <div class="col-span-2 text-center">Quantity</div>
+        <div class="col-span-2 text-right">Subtotal</div>
+        <div class="col-span-1"></div>
+    </div>
+
+    <div class="divide-y divide-white/5">
+        <% @products.each do |product| %>
+            <% qty = @cart_items[product.id.to_s].to_i %>
+            <div class="grid grid-cols-1 md:grid-cols-12 items-center gap-4 md:gap-0 p-6 md:px-8 md:py-6 hover:bg-white/[0.02] transition-colors relative group">
+                <!-- Product Info -->
+                <div class="col-span-1 md:col-span-5">
+                    <div class="flex items-center gap-4">
+                        <div class="w-16 h-16 md:w-20 md:h-20 rounded-2xl overflow-hidden bg-slate-900/50 flex-shrink-0">
+                            <img src="<%= product.image_url || '/images/logo.png' %>" class="w-full h-full object-cover">
+                        </div>
+                        <div>
+                            <div class="font-black text-lg md:text-base"><%= product.name %></div>
+                            <div class="text-xs text-slate-500 uppercase tracking-tighter"><%= product.category %></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Price (Label on Mobile) -->
+                <div class="col-span-1 md:col-span-2 flex justify-between md:block items-center">
+                    <span class="md:hidden text-slate-500 text-sm font-bold uppercase tracking-widest">Price</span>
+                    <span class="font-mono text-slate-400">$<%= product.price %></span>
+                </div>
+
+                <!-- Quantity -->
+                <div class="col-span-1 md:col-span-2 flex justify-between md:block items-center">
+                    <span class="md:hidden text-slate-500 text-sm font-bold uppercase tracking-widest">Quantity</span>
+                    <div class="flex items-center justify-center gap-2">
+                        <form action="/cart/update" method="POST" class="inline">
+                            <%= csrf_tag %>
+                            <input type="hidden" name="product_id" value="<%= product.id %>">
+                            <input type="hidden" name="qty" value="<%= qty - 1 %>">
+                            <button type="submit" class="w-10 h-10 md:w-8 md:h-8 rounded-xl bg-white/5 hover:bg-red-500/10 hover:text-red-500 transition-all flex items-center justify-center">
+                                <i class="fas fa-minus text-xs"></i>
+                            </button>
+                        </form>
+                        <span class="w-8 text-center font-black text-lg md:text-base"><%= qty %></span>
+                        <form action="/cart/update" method="POST" class="inline">
+                            <%= csrf_tag %>
+                            <input type="hidden" name="product_id" value="<%= product.id %>">
+                            <input type="hidden" name="qty" value="<%= qty + 1 %>">
+                            <button type="submit" class="w-10 h-10 md:w-8 md:h-8 rounded-xl bg-white/5 hover:bg-primary/10 hover:text-primary transition-all flex items-center justify-center">
+                                <i class="fas fa-plus text-xs"></i>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+
+                <!-- Subtotal -->
+                <div class="col-span-1 md:col-span-2 flex justify-between md:block items-center border-t md:border-none border-white/5 pt-4 md:pt-0">
+                    <span class="md:hidden text-slate-500 text-sm font-bold uppercase tracking-widest">Subtotal</span>
+                    <span class="text-xl md:text-lg md:text-right block font-black text-primary">$<%= product.price * qty %></span>
+                </div>
+
+                <!-- Remove Btn -->
+                <div class="absolute top-6 right-6 md:static md:col-span-1 md:text-right">
+                    <form action="/cart/remove" method="POST">
+                        <%= csrf_tag %>
+                        <input type="hidden" name="product_id" value="<%= product.id %>">
+                        <button type="submit" class="w-10 h-10 md:w-auto flex items-center justify-center md:inline text-slate-400 hover:text-red-500 transition-colors">
+                            <i class="fas fa-trash-alt"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        <% end %>
+        
+        <% if @products.empty? %>
+            <div class="px-8 py-20 text-center">
+                <div class="w-20 h-20 bg-slate-900/20 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <i class="fas fa-shopping-basket text-4xl text-slate-700"></i>
+                </div>
+                <div class="text-slate-500 italic text-lg">Your cart is empty.</div>
+                <a href="/" class="btn-premium inline-flex mt-6 px-8">Start Shopping</a>
+            </div>
+        <% end %>
+    </div>
+</div>
+
+<% unless @products.empty? %>
+    <div class="flex flex-col md:flex-row justify-between items-end gap-8">
+        <form action="/cart/clear" method="POST">
+            <%= csrf_tag %>
+            <button type="submit" class="btn-secondary">Clear Cart</button>
+        </form>
+        
+        <div class="glass-card w-full md:w-96 !p-8">
+            <div class="flex justify-between items-center mb-6">
+                <span class="text-slate-500 font-bold">Total Amount</span>
+                <span class="text-3xl font-black text-primary">$<%= @total %></span>
+            </div>
+            <button class="btn-premium w-full !py-5 !text-xl">
+                Proceed to Checkout <i class="fas fa-arrow-right ml-2"></i>
+            </button>
+            <p class="text-[10px] text-center text-slate-600 mt-4 uppercase tracking-widest font-black">Secure Checkout Powered by OFA.SYS</p>
+        </div>
+    </div>
+<% end %>

data/app/views/cms/pages_form.erb

@@ -44,7 +44,7 @@
     </aside>
 
     <!-- Main Content -->
-    <div class="flex-1 space-y-6 w-full pb-20">
+    <div class="flex-1 space-y-6 pb-20 min-w-0">
         <div class="flex justify-between items-center bg-white/5 p-6 rounded-3xl border border-white/5">
             <div>
                 <h2 class="text-2xl font-black tracking-tight"><%= @page.id ? 'Edit' : 'Add' %> Page</h2>

data/app/views/cms/pages_index.erb

@@ -29,6 +29,11 @@
                     <i class="fas fa-palette w-5"></i>
                     <span class="font-semibold">Projects</span>
                 </a>
+            <% elsif FEATURES_CONFIG['type'] == 'e_commerce' %>
+                <a href="/dashboard/products" class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-300 <%= @req.path.start_with?('/dashboard/products') ? 'bg-primary text-white shadow-lg shadow-primary/30' : 'text-slate-500 hover:bg-white/5' %>">
+                    <i class="fas fa-tag w-5"></i>
+                    <span class="font-semibold">Products</span>
+                </a>
             <% end %>
 
             <div class="h-px bg-white/5 my-4"></div>
@@ -45,60 +50,71 @@
 
     <!-- Main Content -->
     <div class="flex-1 space-y-6 w-full">
-        <div class="flex justify-between items-center bg-white/5 p-6 rounded-3xl border border-white/5">
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white/5 p-6 rounded-3xl border border-white/5">
             <div>
                 <h2 class="text-2xl font-black tracking-tight">Page Management</h2>
                 <p class="text-slate-500 text-sm">Manage all static pages of your website.</p>
             </div>
-            <a href="/dashboard/pages/new" class="btn-premium">
+            <a href="/dashboard/pages/new" class="btn-premium w-full sm:w-auto text-center">
                 <i class="fas fa-plus mr-2 text-sm"></i> New Page
             </a>
         </div>
 
         <div class="glass-panel overflow-hidden border-none shadow-xl">
-            <table class="w-full text-left border-collapse">
-                <thead>
-                    <tr class="bg-white/5">
-                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-400">Title</th>
-                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-400">Slug</th>
-                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-400">Created At</th>
-                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-400 text-right">Action</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-white/5">
-                    <% if @pages.empty? %>
-                        <tr>
-                            <td colspan="4" class="px-6 py-12 text-center text-slate-500 italic">No pages created yet.</td>
-                        </tr>
-                    <% end %>
-                    <% @pages.each do |page| %>
-                    <tr class="hover:bg-white/[0.02] transition-colors group">
-                        <td class="px-6 py-4">
-                            <span class="font-bold text-slate-700 dark:text-slate-200 group-hover:text-primary transition-colors"><%= page.title %></span>
-                        </td>
-                        <td class="px-6 py-4">
-                            <code class="text-xs bg-primary/10 px-2 py-1 rounded-lg text-primary">/<%= page.slug %></code>
-                        </td>
-                        <td class="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">
-                            <%= page.created_at.strftime('%d %b %Y') %>
-                        </td>
-                        <td class="px-6 py-4 text-right">
-                            <div class="flex justify-end gap-2">
-                                <a href="/dashboard/pages/<%= page.id %>/edit" class="w-9 h-9 flex items-center justify-center rounded-xl bg-primary/10 text-primary hover:bg-primary hover:text-white transition-all shadow-lg shadow-primary/10">
-                                    <i class="fas fa-edit text-sm"></i>
-                                </a>
-                                <form action="/dashboard/pages/<%= page.id %>/delete" method="POST" onsubmit="return confirm('Delete this page?')" class="inline">
-                                    <%= csrf_tag %>
-                                    <button type="submit" class="w-9 h-9 flex items-center justify-center rounded-xl bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white transition-all shadow-lg shadow-red-500/10">
-                                        <i class="fas fa-trash-can text-sm"></i>
-                                    </button>
-                                </form>
-                            </div>
-                        </td>
-                    </tr>
-                    <% end %>
-                </tbody>
-            </table>
+            <!-- Header (Hidden on Mobile) -->
+            <div class="hidden md:grid grid-cols-12 bg-white/5 border-b border-white/5 text-slate-400 font-bold uppercase text-[10px] tracking-[0.2em] px-8 py-4">
+                <div class="col-span-5">Page Title</div>
+                <div class="col-span-3">Slug</div>
+                <div class="col-span-2">Created</div>
+                <div class="col-span-2 text-right">Actions</div>
+            </div>
+
+            <div class="divide-y divide-white/5">
+                <% if @pages.empty? %>
+                    <div class="px-8 py-20 text-center">
+                        <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-file-circle-plus text-2xl text-slate-600"></i>
+                        </div>
+                        <div class="text-slate-500 italic">No pages created yet.</div>
+                    </div>
+                <% end %>
+                <% @pages.each do |page| %>
+                <div class="grid grid-cols-1 md:grid-cols-12 items-center gap-4 md:gap-0 p-6 md:px-8 md:py-5 hover:bg-white/[0.02] transition-colors relative group">
+                    <!-- Title -->
+                    <div class="col-span-1 md:col-span-5">
+                        <div class="flex flex-col">
+                            <span class="font-black text-slate-700 dark:text-slate-200 group-hover:text-primary transition-colors text-lg md:text-base"><%= page.title %></span>
+                            <span class="md:hidden text-[10px] text-slate-500 uppercase tracking-widest font-black mt-1">Page Title</span>
+                        </div>
+                    </div>
+
+                    <!-- Slug -->
+                    <div class="col-span-1 md:col-span-3 flex flex-col">
+                        <code class="text-xs bg-primary/10 px-3 py-1.5 rounded-xl text-primary w-fit font-bold font-mono">/<%= page.slug %></code>
+                        <span class="md:hidden text-[10px] text-slate-500 uppercase tracking-widest font-black mt-2">Route Slug</span>
+                    </div>
+
+                    <!-- Date -->
+                    <div class="col-span-1 md:col-span-2 flex flex-col">
+                        <span class="text-sm text-slate-500 font-bold"><%= page.created_at.strftime('%d %b %Y') %></span>
+                        <span class="md:hidden text-[10px] text-slate-500 uppercase tracking-widest font-black mt-1">Creation Date</span>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="col-span-1 md:col-span-2 flex justify-end gap-2 pt-4 md:pt-0 border-t md:border-none border-white/5">
+                        <a href="/dashboard/pages/<%= page.id %>/edit" class="w-10 h-10 flex items-center justify-center rounded-2xl bg-primary/10 text-primary hover:bg-primary hover:text-white transition-all shadow-lg shadow-primary/10">
+                            <i class="fas fa-edit text-sm"></i>
+                        </a>
+                        <form action="/dashboard/pages/<%= page.id %>/delete" method="POST" onsubmit="return confirm('Delete this page?')" class="inline">
+                            <%= csrf_tag %>
+                            <button type="submit" class="w-10 h-10 flex items-center justify-center rounded-2xl bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white transition-all shadow-lg shadow-red-500/10">
+                                <i class="fas fa-trash-can text-sm"></i>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+                <% end %>
+            </div>
         </div>
     </div>
 </div>

data/app/views/cms/posts_form.erb

@@ -44,7 +44,7 @@
     </aside>
 
     <!-- Main Content -->
-    <div class="flex-1 space-y-6 w-full pb-20">
+    <div class="flex-1 space-y-6 pb-20 min-w-0">
         <div class="flex justify-between items-center bg-white/5 p-6 rounded-3xl border border-white/5">
             <div>
                 <h2 class="text-2xl font-black tracking-tight"><%= @post.id ? 'Edit' : 'Add' %> Article</h2>