one-for-all-framework 1.0.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7da16da0dd7fd64c3418a570d9d9c2f366fe487a464cd524214ead23b249a932
-  data.tar.gz: 43e95c18a2a0adc29c1c1fb39f95e175a11db8dd9fb70979b9ee04156d49c6f7
+  metadata.gz: 26eab5d2f3279aef8aaf3e4f4f69af60d01c535a8a4ba2f41a82615f77e02732
+  data.tar.gz: a6760ad95277f885fff52a45427049cb87f3a59e584dc09fffa533c4b7b57bd5
 SHA512:
-  metadata.gz: 7e770e771c8cfd8e8e2c7d62a6b46e3a06cada5144a60a35c3d5348a06040a59158de1c2b9c807026c982fd74ea4c1e0f1be8e114f36f91b420955706a9b2e50
-  data.tar.gz: 28c6bc05a32ddf5af5c78e74939adc3886b811c31a812e7fcba9d1b6b437f8f34bc7858917e1f7ef8463dbe93c93c05b7b8927e074b03838cbe1966fc7760761
+  metadata.gz: ac089f1a856bf5b31ffea2561db5a48d2fed567b14be86245c7962965595d9fb80209472d2427a4c10c4f15d17ed48c839897bb3141d0a46f860f43d7014d44b
+  data.tar.gz: 9f10a41d2e81293e8cfd363253d08fbb1bd1dc595e97cc646b31ce2c36e30807ee385772c9ba903e98e70bec3205e5b265f0a694cdc3d62aaba12e488639eed0

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 v3.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.
 
 ---
 
@@ -52,20 +52,50 @@ Your app is now live at `http://localhost:3000` ⚡
 
 ---
 
-## 🛠️ CLI Power Tools
+## 🛠️ CLI Power Tools (Detailed Reference)
 
-The `ofa` CLI is your best friend. Use it to manage your entire application lifecycle:
+The `ofa` CLI is the heart of the One-For-All framework. It handles everything from project initialization to production deployment.
 
+### 📁 Project Lifecycle
 | Command | Description |
 | :--- | :--- |
-| `ofa new NAME` | Create a brand new project from scratch. |
-| `ofa g controller Name` | Generate a RESTful controller. |
-| `ofa g model Name` | Generate a database model and migration. |
-| `ofa db migrate` | Sync your database with the latest schema. |
-| `ofa type [blog\|portfolio]` | Switch application mode instantly. |
-| `ofa theme [dark\|light]` | Toggle between premium UI themes. |
-| `ofa storage cloudinary` | Enable automated Cloudinary image hosting. |
-| `ofa reset-password USR PWD`| Securely reset admin credentials. |
+| `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.
+
+| Command | Description |
+| :--- | :--- |
+| `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.
+
+| Command | Description |
+| :--- | :--- |
+| `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). |
+
+---
+
+### 🔐 Security & Database
+| Command | Description |
+| :--- | :--- |
+| `ofa reset-password USR PWD`| **User Management.** Resets a password for an existing admin or creates a new one. <br> *Note:* Enforces strong password rules (8+ chars, 1 uppercase, 1 number). |
+| `ofa db switch ADAPTER` | **Hot-swap Database.** Configure your adapter on the fly: `sqlite`, `mysql`, `mariadb`, `postgres`, or `env` (for MongoDB Atlas). |
+| `ofa db migrate` | **Database Sync.** Runs all pending migrations in `db/migrations/` to keep your schema up to date. |
 
 ---
 
@@ -80,13 +110,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/api_controller.rb

@@ -9,7 +9,7 @@ class ApiController < ApplicationController
   end
 
   def status
-    render_json({ status: 'ok', version: '1.0.0', type: FEATURES_CONFIG['type'] })
+    render_json({ status: 'ok', version: '2.0.0', type: FEATURES_CONFIG['type'] })
   end
 
   def halt_error(message, status: 400)

data/app/controllers/application_controller.rb

@@ -58,7 +58,7 @@ class ApplicationController
       rescue => e
         puts "⚠ Error deleting from Cloudinary: #{e.message}"
       end
-    elsif url.start_with?('/img/uploads/')
+    elsif url.start_with?('/images/uploads/')
       path = File.join(APP_ROOT, 'public', url)
       FileUtils.rm(path) if File.exist?(path) rescue nil
     end
@@ -71,7 +71,7 @@ class ApplicationController
     urls.each { |url| delete_from_storage(url) }
     
     # Also find local uploads
-    local_urls = content.scan(/\/img\/uploads\/[^\s\)]+/)
+    local_urls = content.scan(/\/images\/uploads\/[^\s\)]+/)
     local_urls.each { |url| delete_from_storage(url) }
   end
 end

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
@@ -27,9 +28,9 @@ class DashboardController < ApplicationController
         end
       else
         filename = "#{Time.now.to_i}_#{file[:filename]}"
-        target = File.join(APP_ROOT, 'public/img/uploads', filename)
+        target = File.join(APP_ROOT, 'public/images/uploads', filename)
         FileUtils.cp(file[:tempfile].path, target)
-        @res.body << { url: "/img/uploads/#{filename}" }.to_json
+        @res.body << { url: "/images/uploads/#{filename}" }.to_json
       end
     else
       @res.status = 400

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>