init

config/settings.py

@@ -180,3 +180,6 @@ if EMAIL_USE_SSL:
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+LOGIN_REDIRECT_URL = 'dashboard'
+LOGOUT_REDIRECT_URL = 'login'

config/urls.py

@@ -21,6 +21,7 @@ from django.conf.urls.static import static
 
 urlpatterns = [
     path("admin/", admin.site.urls),
+    path("accounts/", include("django.contrib.auth.urls")),
     path("", include("core.urls")),
 ]
 

core/admin.py

@@ -1,3 +1,13 @@
 from django.contrib import admin
+from .models import Ticket, Comment
 
-# Register your models here.
+@admin.register(Ticket)
+class TicketAdmin(admin.ModelAdmin):
+    list_display = ('id', 'title', 'status', 'priority', 'category', 'created_by', 'created_at')
+    list_filter = ('status', 'priority', 'category')
+    search_fields = ('title', 'description')
+
+@admin.register(Comment)
+class CommentAdmin(admin.ModelAdmin):
+    list_display = ('ticket', 'author', 'created_at')
+    list_filter = ('created_at',)

core/forms.py

@@ -0,0 +1,21 @@
+from django import forms
+from .models import Ticket, Comment
+
+class TicketForm(forms.ModelForm):
+    class Meta:
+        model = Ticket
+        fields = ['title', 'description', 'priority', 'category']
+        widgets = {
+            'title': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Brief summary of the issue'}),
+            'description': forms.Textarea(attrs={'class': 'form-control', 'rows': 4, 'placeholder': 'Describe your problem in detail...'}),
+            'priority': forms.Select(attrs={'class': 'form-select'}),
+            'category': forms.Select(attrs={'class': 'form-select'}),
+        }
+
+class CommentForm(forms.ModelForm):
+    class Meta:
+        model = Comment
+        fields = ['text']
+        widgets = {
+            'text': forms.Textarea(attrs={'class': 'form-control', 'rows': 3, 'placeholder': 'Type your reply here...'}),
+        }

core/migrations/0001_initial.py

@@ -0,0 +1,48 @@
+# Generated by Django 5.2.7 on 2026-02-16 11:01
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Ticket',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=200)),
+                ('description', models.TextField()),
+                ('status', models.CharField(choices=[('open', 'Open'), ('pending', 'Pending'), ('resolved', 'Resolved'), ('closed', 'Closed')], default='open', max_length=20)),
+                ('priority', models.CharField(choices=[('low', 'Low'), ('medium', 'Medium'), ('high', 'High'), ('urgent', 'Urgent')], default='medium', max_length=20)),
+                ('category', models.CharField(choices=[('technical', 'Technical Issue'), ('billing', 'Billing'), ('feature', 'Feature Request'), ('other', 'Other')], default='technical', max_length=20)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('assigned_to', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='assigned_tickets', to=settings.AUTH_USER_MODEL)),
+                ('created_by', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='tickets', to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'ordering': ['-updated_at'],
+            },
+        ),
+        migrations.CreateModel(
+            name='Comment',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('text', models.TextField()),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('author', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+                ('ticket', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='comments', to='core.ticket')),
+            ],
+            options={
+                'ordering': ['created_at'],
+            },
+        ),
+    ]

core/models.py

@@ -1,3 +1,52 @@
 from django.db import models
+from django.contrib.auth.models import User
 
-# Create your models here.
+class Ticket(models.Model):
+    STATUS_CHOICES = [
+        ('open', 'Open'),
+        ('pending', 'Pending'),
+        ('resolved', 'Resolved'),
+        ('closed', 'Closed'),
+    ]
+    PRIORITY_CHOICES = [
+        ('low', 'Low'),
+        ('medium', 'Medium'),
+        ('high', 'High'),
+        ('urgent', 'Urgent'),
+    ]
+    CATEGORY_CHOICES = [
+        ('technical', 'Technical Issue'),
+        ('billing', 'Billing'),
+        ('feature', 'Feature Request'),
+        ('other', 'Other'),
+    ]
+
+    title = models.CharField(max_length=200)
+    description = models.TextField()
+    status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='open')
+    priority = models.CharField(max_length=20, choices=PRIORITY_CHOICES, default='medium')
+    category = models.CharField(max_length=20, choices=CATEGORY_CHOICES, default='technical')
+    
+    created_by = models.ForeignKey(User, on_delete=models.CASCADE, related_name='tickets')
+    assigned_to = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True, related_name='assigned_tickets')
+    
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    def __str__(self):
+        return f"#{self.id} - {self.title}"
+
+    class Meta:
+        ordering = ['-updated_at']
+
+class Comment(models.Model):
+    ticket = models.ForeignKey(Ticket, on_delete=models.CASCADE, related_name='comments')
+    author = models.ForeignKey(User, on_delete=models.CASCADE)
+    text = models.TextField()
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return f"Comment by {self.author} on {self.ticket}"
+
+    class Meta:
+        ordering = ['created_at']

core/templates/base.html

@@ -1,25 +1,81 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
-  {% if project_description %}
-  <meta name="description" content="{{ project_description }}">
-  <meta property="og:description" content="{{ project_description }}">
-  <meta property="twitter:description" content="{{ project_description }}">
-  {% endif %}
-  {% if project_image_url %}
-  <meta property="og:image" content="{{ project_image_url }}">
-  <meta property="twitter:image" content="{{ project_image_url }}">
-  {% endif %}
-  {% load static %}
-  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
-  {% block head %}{% endblock %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Support Center{% endblock %}</title>
+    <meta name="description" content="{% block description %}A lightweight support center to triage and resolve tickets.{% endblock %}">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={% now 'U' %}">
+    
+    {% block extra_head %}{% endblock %}
 </head>
+<body class="app-body">
+    <div class="ambient-bg" aria-hidden="true"></div>
+    <nav class="navbar navbar-expand-lg sticky-top mb-4 site-nav">
+        <div class="container">
+            <a class="navbar-brand fw-bold d-flex align-items-center gap-2" href="{% url 'dashboard' %}">
+                <span class="brand-mark">SC</span>
+                <span class="brand-text">Support Center</span>
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto align-items-center">
+                    {% if user.is_authenticated %}
+                        <li class="nav-item me-3">
+                            <span class="text-muted small">Welcome, {{ user.username }}</span>
+                        </li>
+                        <li class="nav-item">
+                            <a class="btn btn-primary btn-sm" href="{% url 'ticket_create' %}">+ New Ticket</a>
+                        </li>
+                        <li class="nav-item ms-2">
+                            <form action="{% url 'logout' %}" method="post" style="display: inline;">
+                                {% csrf_token %}
+                                <button type="submit" class="nav-link btn btn-link text-muted" style="text-decoration: none;">Logout</button>
+                            </form>
+                        </li>
+                        {% if user.is_staff %}
+                        <li class="nav-item ms-2">
+                            <a class="nav-link text-muted" href="/admin/">Admin</a>
+                        </li>
+                        {% endif %}
+                    {% else %}
+                        <li class="nav-item">
+                            <a class="nav-link" href="{% url 'login' %}">Login</a>
+                        </li>
+                    {% endif %}
+                </ul>
+            </div>
+        </div>
+    </nav>
 
-<body>
-  {% block content %}{% endblock %}
+    <main class="container page-shell">
+        {% if messages %}
+            {% for message in messages %}
+                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
+                    {{ message }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                </div>
+            {% endfor %}
+        {% endif %}
+
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="py-5 mt-5 text-center text-muted small site-footer">
+        <div class="container">
+            <p>&copy; {% now 'Y' %} Support Center. Built with Django.</p>
+        </div>
+    </footer>
+
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
 </body>
-
 </html>

core/templates/core/index.html

@@ -1,145 +1,84 @@
 {% extends "base.html" %}
-
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-  }
-
-  body::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
-    animation: bg-pan 20s linear infinite;
-    z-index: -1;
-  }
-
-  @keyframes bg-pan {
-    0% {
-      background-position: 0% 0%;
-    }
-
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
-  main {
-    padding: 2rem;
-  }
-
-  .card {
-    background: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: 16px;
-    padding: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
+{% block title %}Dashboard - Support Center{% endblock %}
 
 {% block content %}
-<main>
-  <div class="card">
-    <h1>Analyzing your requirements and generating your app…</h1>
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-      <span class="sr-only">Loading…</span>
+<div class="row mb-5">
+    <div class="col-md-8">
+        <h2 class="mb-1">Support Dashboard</h2>
+        <p class="text-muted">Manage and track your support requests</p>
     </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
-  </div>
-</main>
-<footer>
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-</footer>
+</div>
+
+<div class="row g-4 mb-5">
+    <div class="col-md-4">
+        <div class="card p-4 text-center">
+            <h3 class="h1 mb-0">{{ open_count }}</h3>
+            <span class="text-muted text-uppercase small fw-bold">Open Tickets</span>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card p-4 text-center">
+            <h3 class="h1 mb-0">{{ pending_count }}</h3>
+            <span class="text-muted text-uppercase small fw-bold">Pending</span>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card p-4 text-center">
+            <h3 class="h1 mb-0">{{ resolved_count }}</h3>
+            <span class="text-muted text-uppercase small fw-bold">Resolved</span>
+        </div>
+    </div>
+</div>
+
+<div class="card shadow-sm border-0">
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover align-middle mb-0">
+                <thead class="bg-light">
+                    <tr>
+                        <th class="ps-4 py-3 text-muted fw-normal">Ticket</th>
+                        <th class="py-3 text-muted fw-normal text-center">Status</th>
+                        <th class="py-3 text-muted fw-normal">Priority</th>
+                        <th class="py-3 text-muted fw-normal">Updated</th>
+                        <th class="pe-4 py-3 text-end fw-normal">Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for ticket in tickets %}
+                    <tr class="card-ticket">
+                        <td class="ps-4 py-4">
+                            <div class="fw-semibold text-dark">{{ ticket.title }}</div>
+                            <div class="text-muted small">#{{ ticket.id }} &bull; {{ ticket.get_category_display }}</div>
+                        </td>
+                        <td class="text-center">
+                            <span class="status-badge status-{{ ticket.status }}">
+                                {{ ticket.get_status_display }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="priority-{{ ticket.priority }}">
+                                {{ ticket.get_priority_display }}
+                            </span>
+                        </td>
+                        <td class="text-muted small">
+                            {{ ticket.updated_at|timesince }} ago
+                        </td>
+                        <td class="pe-4 text-end">
+                            <a href="{% url 'ticket_detail' ticket.id %}" class="btn btn-light btn-sm px-3">View</a>
+                        </td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="5" class="text-center py-5 text-muted">
+                            <div class="mb-3"><i class="bi bi-ticket-detailed h1"></i></div>
+                            <p>No tickets found. Need help? Create a new ticket!</p>
+                            <a href="{% url 'ticket_create' %}" class="btn btn-primary btn-sm">Create First Ticket</a>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
 {% endblock %}

core/templates/core/ticket_detail.html

@@ -0,0 +1,108 @@
+{% extends "base.html" %}
+{% block title %}Ticket #{{ ticket.id }} - Support Center{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-lg-8">
+        <div class="mb-4">
+            <a href="{% url 'dashboard' %}" class="text-decoration-none text-muted small">&larr; Back to Dashboard</a>
+        </div>
+
+        <!-- Ticket Header -->
+        <div class="card p-4 p-md-5 mb-4">
+            <div class="d-flex justify-content-between align-items-start mb-4">
+                <div>
+                    <span class="status-badge status-{{ ticket.status }} mb-2 d-inline-block">
+                        {{ ticket.get_status_display }}
+                    </span>
+                    <h1 class="h2">{{ ticket.title }}</h1>
+                    <p class="text-muted small">
+                        Submitted by <strong>{{ ticket.created_by.username }}</strong> &bull; 
+                        {{ ticket.created_at|date:"F j, Y, g:i a" }}
+                    </p>
+                </div>
+                <div class="text-end">
+                    <span class="badge bg-light text-dark fw-normal border">#{{ ticket.id }}</span>
+                </div>
+            </div>
+
+            <hr class="my-4 opacity-10">
+
+            <div class="ticket-description">
+                <p class="lead" style="white-space: pre-wrap;">{{ ticket.description }}</p>
+            </div>
+        </div>
+
+        <!-- Discussion Thread -->
+        <h4 class="mb-4">Discussion</h4>
+        <div class="discussion-container mb-5">
+            {% for comment in ticket.comments.all %}
+            <div class="thread-comment {% if comment.author.is_staff %}agent-reply{% endif %}">
+                <div class="d-flex justify-content-between mb-2">
+                    <span class="fw-bold small {% if comment.author.is_staff %}text-primary{% endif %}">
+                        {{ comment.author.username }} 
+                        {% if comment.author.is_staff %}(Agent){% endif %}
+                    </span>
+                    <span class="text-muted small">{{ comment.created_at|timesince }} ago</span>
+                </div>
+                <p class="mb-0">{{ comment.text }}</p>
+            </div>
+            {% empty %}
+            <p class="text-muted italic small py-4 text-center border rounded">No replies yet.</p>
+            {% endfor %}
+        </div>
+
+        <!-- Reply Form -->
+        <div class="card p-4">
+            <h5 class="mb-3">Add a Reply</h5>
+            <form method="post">
+                {% csrf_token %}
+                <div class="mb-3">
+                    {{ comment_form.text }}
+                </div>
+                <div class="text-end">
+                    <button type="submit" class="btn btn-primary">Post Reply</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Sidebar Info -->
+    <div class="col-lg-4 mt-4 mt-lg-0">
+        <div class="card p-4 sticky-top" style="top: 100px;">
+            <h5 class="mb-4">Ticket Details</h5>
+            
+            <div class="mb-3">
+                <label class="text-muted small d-block mb-1">Priority</label>
+                <span class="priority-{{ ticket.priority }} fw-semibold">{{ ticket.get_priority_display }}</span>
+            </div>
+            
+            <div class="mb-3">
+                <label class="text-muted small d-block mb-1">Category</label>
+                <span class="fw-semibold">{{ ticket.get_category_display }}</span>
+            </div>
+
+            <div class="mb-3">
+                <label class="text-muted small d-block mb-1">Assigned To</label>
+                <span class="fw-semibold">{{ ticket.assigned_to.username|default:"Unassigned" }}</span>
+            </div>
+
+            {% if user.is_staff %}
+            <hr class="my-4">
+            <h5 class="mb-3">Manage Status</h5>
+            <form method="post">
+                {% csrf_token %}
+                <div class="mb-3">
+                    <select name="status" class="form-select form-select-sm">
+                        {% for code, name in ticket.STATUS_CHOICES %}
+                        <option value="{{ code }}" {% if ticket.status == code %}selected{% endif %}>{{ name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <button type="submit" class="btn btn-outline-primary btn-sm w-100">Update Status</button>
+            </form>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}

core/templates/core/ticket_form.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+{% block title %}New Ticket - Support Center{% endblock %}
+
+{% block content %}
+<div class="row justify-content-center">
+    <div class="col-md-8 col-lg-6">
+        <div class="mb-4">
+            <a href="{% url 'dashboard' %}" class="text-decoration-none text-muted small">&larr; Back to Dashboard</a>
+        </div>
+        
+        <div class="card p-4 p-md-5">
+            <h2 class="mb-4">Submit a Ticket</h2>
+            <p class="text-muted mb-5">Please fill out the form below and our team will get back to you as soon as possible.</p>
+            
+            <form method="post">
+                {% csrf_token %}
+                {% for field in form %}
+                    <div class="mb-4">
+                        <label for="{{ field.id_for_label }}" class="form-label fw-semibold small">{{ field.label }}</label>
+                        {{ field }}
+                        {% if field.errors %}
+                            <div class="text-danger small mt-1">{{ field.errors|first }}</div>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+                
+                <div class="d-grid mt-5">
+                    <button type="submit" class="btn btn-primary btn-lg">Create Ticket</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock %}

core/templates/registration/login.html

@@ -0,0 +1,52 @@
+{% extends 'base.html' %}
+
+{% block title %}Login - Support Center{% endblock %}
+
+{% block content %}
+<div class="auth-shell">
+    <div class="card auth-card">
+        <div class="auth-hero">
+            <div class="auth-brand">
+                <span class="brand-mark">SC</span>
+                <span class="brand-text">Support Center</span>
+            </div>
+            <h2 class="auth-title">Welcome back.</h2>
+            <p class="auth-lead">Keep support flowing, track every issue, and stay on top of what matters.</p>
+            <div class="auth-highlights">
+                <div><span></span>Fast triage for incoming tickets</div>
+                <div><span></span>Clear priorities and status visibility</div>
+                <div><span></span>One place for team updates</div>
+            </div>
+        </div>
+        <div class="auth-form">
+            <h3 class="mb-2">Sign in</h3>
+            <p class="auth-meta mb-4">Use your team credentials to continue.</p>
+
+            <form method="post">
+                {% csrf_token %}
+                <div class="mb-3 text-start">
+                    <label for="id_username" class="form-label">Username</label>
+                    <input type="text" name="username" autofocus maxlength="150" required id="id_username" class="form-control">
+                </div>
+                <div class="mb-4 text-start">
+                    <label for="id_password" class="form-label">Password</label>
+                    <input type="password" name="password" required id="id_password" class="form-control">
+                </div>
+
+                {% if form.errors %}
+                    <div class="alert alert-danger py-2 small">
+                        Your username and password didn't match. Please try again.
+                    </div>
+                {% endif %}
+
+                <button type="submit" class="btn btn-primary w-100 py-2">Login</button>
+                <input type="hidden" name="next" value="{{ next }}">
+            </form>
+
+            <div class="mt-4 pt-3 border-top">
+                <p class="small text-muted mb-0">Need access? Reach out to your administrator.</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

core/urls.py

@@ -1,7 +1,8 @@
 from django.urls import path
-
-from .views import home
+from . import views
 
 urlpatterns = [
-    path("", home, name="home"),
+    path("", views.dashboard, name="dashboard"),
+    path("ticket/new/", views.ticket_create, name="ticket_create"),
+    path("ticket/<int:pk>/", views.ticket_detail, name="ticket_detail"),
 ]

core/views.py

@@ -1,25 +1,71 @@
-import os
-import platform
+from django.shortcuts import render, redirect, get_object_or_404
+from django.contrib.auth.decorators import login_required
+from django.contrib import messages
+from .models import Ticket, Comment
+from .forms import TicketForm, CommentForm
 
-from django import get_version as django_version
-from django.shortcuts import render
-from django.utils import timezone
-
-
-def home(request):
-    """Render the landing screen with loader and environment details."""
-    host_name = request.get_host().lower()
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
-    now = timezone.now()
+@login_required
+def dashboard(request):
+    """User dashboard showing their tickets."""
+    if request.user.is_staff:
+        tickets = Ticket.objects.all()
+    else:
+        tickets = Ticket.objects.filter(created_by=request.user)
     
     context = {
-        "project_name": "New Style",
-        "agent_brand": agent_brand,
-        "django_version": django_version(),
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+        'tickets': tickets,
+        'open_count': tickets.filter(status='open').count(),
+        'pending_count': tickets.filter(status='pending').count(),
+        'resolved_count': tickets.filter(status='resolved').count(),
     }
-    return render(request, "core/index.html", context)
+    return render(request, 'core/index.html', context)
+
+@login_required
+def ticket_create(request):
+    """View to create a new ticket."""
+    if request.method == 'POST':
+        form = TicketForm(request.POST)
+        if form.is_valid():
+            ticket = form.save(commit=False)
+            ticket.created_by = request.user
+            ticket.save()
+            messages.success(request, "Ticket created successfully!")
+            return redirect('dashboard')
+    else:
+        form = TicketForm()
+    
+    return render(request, 'core/ticket_form.html', {'form': form})
+
+@login_required
+def ticket_detail(request, pk):
+    """View ticket details and handle comments."""
+    ticket = get_object_or_404(Ticket, pk=pk)
+    
+    # Simple permission check
+    if not request.user.is_staff and ticket.created_by != request.user:
+        messages.error(request, "You do not have permission to view this ticket.")
+        return redirect('dashboard')
+    
+    if request.method == 'POST':
+        # Check if it's a comment or a status update
+        if 'status' in request.POST and request.user.is_staff:
+            ticket.status = request.POST.get('status')
+            ticket.save()
+            messages.success(request, f"Status updated to {ticket.get_status_display()}")
+            return redirect('ticket_detail', pk=pk)
+        
+        comment_form = CommentForm(request.POST)
+        if comment_form.is_valid():
+            comment = comment_form.save(commit=False)
+            comment.ticket = ticket
+            comment.author = request.user
+            comment.save()
+            messages.success(request, "Reply added!")
+            return redirect('ticket_detail', pk=pk)
+    else:
+        comment_form = CommentForm()
+    
+    return render(request, 'core/ticket_detail.html', {
+        'ticket': ticket,
+        'comment_form': comment_form,
+    })

static/css/custom.css

@@ -1,4 +1,322 @@
-/* Custom styles for the application */
-body {
-    font-family: system-ui, -apple-system, sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
+
+:root {
+    --font-body: 'Space Grotesk', sans-serif;
+    --font-display: 'Fraunces', serif;
+    --ink: #1f2328;
+    --muted: #5b6570;
+    --paper: #f5f2ed;
+    --paper-strong: #ffffff;
+    --accent: #0f766e;
+    --accent-dark: #0b5f59;
+    --accent-warm: #f1b97a;
+    --success: #2f8f6a;
+    --warning: #d18f1b;
+    --danger: #c7413a;
+    --border: rgba(31, 35, 40, 0.08);
+    --shadow: 0 16px 48px rgba(31, 35, 40, 0.12);
+    --shadow-soft: 0 8px 24px rgba(31, 35, 40, 0.08);
+}
+
+body {
+    font-family: var(--font-body);
+    background-color: var(--paper);
+    color: var(--ink);
+    line-height: 1.6;
+    min-height: 100vh;
+    background-image:
+        radial-gradient(1200px 420px at 10% -10%, rgba(241, 185, 122, 0.25), transparent 60%),
+        radial-gradient(900px 380px at 90% 0%, rgba(15, 118, 110, 0.2), transparent 60%),
+        linear-gradient(180deg, #f7f3ed 0%, #fbfaf7 45%, #f2f7f6 100%);
+}
+
+.app-body {
+    position: relative;
+}
+
+.ambient-bg {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+        radial-gradient(2px 2px at 20% 30%, rgba(31, 35, 40, 0.08), transparent 60%),
+        radial-gradient(2px 2px at 80% 40%, rgba(31, 35, 40, 0.08), transparent 60%),
+        radial-gradient(3px 3px at 70% 70%, rgba(31, 35, 40, 0.06), transparent 60%);
+    background-size: 260px 260px;
+    opacity: 0.35;
+    z-index: 0;
+}
+
+main.container,
+.site-nav,
+.site-footer {
+    position: relative;
+    z-index: 1;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-display);
+    font-weight: 600;
+    letter-spacing: 0.2px;
+}
+
+.site-nav {
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(14px);
+    border-bottom: 1px solid var(--border);
+    box-shadow: 0 6px 18px rgba(31, 35, 40, 0.05);
+}
+
+.navbar-brand {
+    font-family: var(--font-display);
+    font-weight: 600;
+    letter-spacing: 0.4px;
+}
+
+.brand-mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: linear-gradient(135deg, var(--accent), #1aa39a);
+    color: #ffffff;
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+}
+
+.brand-text {
+    color: var(--ink);
+}
+
+.nav-link {
+    color: var(--muted);
+    font-weight: 500;
+}
+
+.nav-link:hover,
+.nav-link:focus {
+    color: var(--ink);
+}
+
+.page-shell {
+    padding-bottom: 2rem;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--accent), #1aa39a);
+    border: none;
+    padding: 0.6rem 1.5rem;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 10px 18px rgba(15, 118, 110, 0.2);
+}
+
+.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 14px 24px rgba(15, 118, 110, 0.28);
+}
+
+.btn-light {
+    background: var(--paper-strong);
+    border: 1px solid var(--border);
+    color: var(--ink);
+}
+
+.btn-light:hover {
+    background: #f6faf9;
+}
+
+.btn-link {
+    color: var(--muted);
+}
+
+.card {
+    border: 1px solid var(--border);
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: var(--shadow-soft);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-ticket:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 18px 40px rgba(31, 35, 40, 0.12);
+}
+
+.table {
+    color: var(--ink);
+}
+
+.table thead th {
+    background: rgba(15, 118, 110, 0.08);
+    color: var(--muted);
+    font-weight: 500;
+    border-bottom: 1px solid var(--border);
+}
+
+.table-hover > tbody > tr:hover {
+    background: rgba(15, 118, 110, 0.05);
+}
+
+.form-label {
+    font-weight: 600;
+    color: var(--ink);
+}
+
+.form-control {
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: rgba(255, 255, 255, 0.9);
+    padding: 0.7rem 0.9rem;
+}
+
+.form-control:focus {
+    border-color: rgba(15, 118, 110, 0.6);
+    box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.15);
+}
+
+.status-badge {
+    padding: 0.35rem 0.85rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+}
+
+.status-open { background: rgba(15, 118, 110, 0.12); color: var(--accent); }
+.status-pending { background: rgba(241, 185, 122, 0.25); color: #9b5b12; }
+.status-resolved { background: rgba(47, 143, 106, 0.18); color: var(--success); }
+.status-closed { background: rgba(91, 101, 112, 0.16); color: var(--muted); }
+
+.priority-high { color: var(--danger); font-weight: 600; }
+.priority-urgent { color: var(--danger); text-decoration: underline; }
+
+.thread-comment {
+    border-left: 3px solid #dfe3e6;
+    margin-bottom: 1.5rem;
+    padding-left: 1.5rem;
+}
+
+.thread-comment.agent-reply {
+    border-left-color: var(--accent);
+}
+
+.auth-shell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: calc(100vh - 180px);
+}
+
+.auth-card {
+    display: grid;
+    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
+    gap: 0;
+    overflow: hidden;
+    width: min(920px, 100%);
+    animation: riseIn 0.6s ease both;
+}
+
+.auth-hero {
+    padding: 2.5rem;
+    color: #ffffff;
+    background:
+        radial-gradient(120px 120px at 20% 20%, rgba(255, 255, 255, 0.22), transparent 70%),
+        radial-gradient(180px 180px at 80% 30%, rgba(241, 185, 122, 0.28), transparent 70%),
+        linear-gradient(150deg, var(--accent), #1aa39a);
+}
+
+.auth-hero .brand-text {
+    color: #ffffff;
+}
+
+.auth-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-weight: 600;
+    margin-bottom: 2rem;
+}
+
+.auth-title {
+    font-family: var(--font-display);
+    font-size: 2rem;
+    margin-bottom: 0.6rem;
+}
+
+.auth-lead {
+    color: rgba(255, 255, 255, 0.85);
+    margin-bottom: 2rem;
+}
+
+.auth-highlights {
+    display: grid;
+    gap: 0.8rem;
+    font-size: 0.95rem;
+}
+
+.auth-highlights span {
+    display: inline-flex;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.8);
+    margin-right: 0.6rem;
+}
+
+.auth-form {
+    padding: 2.5rem;
+    background: rgba(255, 255, 255, 0.96);
+}
+
+.alert {
+    border-radius: 12px;
+    border: 1px solid var(--border);
+}
+
+.alert-danger {
+    border-color: rgba(199, 65, 58, 0.25);
+}
+
+.auth-form h3 {
+    font-family: var(--font-display);
+}
+
+.auth-meta {
+    color: var(--muted);
+    font-size: 0.9rem;
+}
+
+.site-footer {
+    color: var(--muted);
+}
+
+@keyframes riseIn {
+    from {
+        opacity: 0;
+        transform: translateY(14px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (max-width: 991px) {
+    .auth-shell {
+        min-height: auto;
+    }
+
+    .auth-card {
+        grid-template-columns: 1fr;
+    }
+
+    .auth-hero {
+        padding: 2rem;
+    }
 }