Hugging Face's logo

Spaces:
Zeetek321
/
customer-support-website
Running

App Files Community
Zeetek321 commited on
Commit
39033c5
·
verified ·
1 Parent(s): dcd6973

Create a customer complaints and support services website using bootstrap and php. The php code must be procedural for easy debugging and understanding. The backend is MYSQL - Initial Deployment

Browse files
Files changed (9) hide show
  1. README.md +7 -5
  2. admin/dashboard.php +191 -0
  3. admin/tickets.php +207 -0
  4. admin/view-ticket.php +229 -0
  5. index.html +176 -18
  6. login.php +102 -0
  7. prompts.txt +1 -0
  8. submit-ticket.php +129 -0
  9. track-ticket.php +162 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Customer Support Website
3
- emoji: 🐨
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: customer-support-website
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
admin/dashboard.php ADDED
@@ -0,0 +1,191 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Admin Dashboard</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
+ <style>
10
+ .sidebar {
11
+ min-height: 100vh;
12
+ background-color: #212529;
13
+ color: white;
14
+ }
15
+ .sidebar-link {
16
+ color: rgba(255, 255, 255, 0.75);
17
+ text-decoration: none;
18
+ display: block;
19
+ padding: 10px 15px;
20
+ border-radius: 5px;
21
+ margin-bottom: 5px;
22
+ }
23
+ .sidebar-link:hover, .sidebar-link.active {
24
+ color: white;
25
+ background-color: #495057;
26
+ }
27
+ .stat-card {
28
+ border-radius: 10px;
29
+ padding: 20px;
30
+ color: white;
31
+ margin-bottom: 20px;
32
+ }
33
+ .stat-card.total {
34
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
35
+ }
36
+ .stat-card.open {
37
+ background: linear-gradient(135deg, #FF6B6B 0%, #FF0000 100%);
38
+ }
39
+ .stat-card.progress {
40
+ background: linear-gradient(135deg, #FFD166 0%, #FF9500 100%);
41
+ }
42
+ .stat-card.resolved {
43
+ background: linear-gradient(135deg, #06D6A0 0%, #00A86B 100%);
44
+ }
45
+ .ticket-table th {
46
+ background-color: #f8f9fa;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body>
51
+ <div class="container-fluid">
52
+ <div class="row">
53
+ <!-- Sidebar -->
54
+ <div class="col-md-3 col-lg-2 d-md-block sidebar collapse bg-dark">
55
+ <div class="position-sticky pt-3">
56
+ <div class="text-center mb-4">
57
+ <h4>SupportHub Admin</h4>
58
+ <p class="text-muted">Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?></p>
59
+ </div>
60
+
61
+ <ul class="nav flex-column">
62
+ <li>
63
+ <a href="dashboard.php" class="sidebar-link active">
64
+ <i class="bi bi-speedometer2 me-2"></i> Dashboard
65
+ </a>
66
+ </li>
67
+ <li>
68
+ <a href="tickets.php" class="sidebar-link">
69
+ <i class="bi bi-ticket-detailed me-2"></i> Tickets
70
+ </a>
71
+ </li>
72
+ <li>
73
+ <a href="staff.php" class="sidebar-link">
74
+ <i class="bi bi-people me-2"></i> Staff
75
+ </a>
76
+ </li>
77
+ <li>
78
+ <a href="reports.php" class="sidebar-link">
79
+ <i class="bi bi-graph-up me-2"></i> Reports
80
+ </a>
81
+ </li>
82
+ <li>
83
+ <a href="settings.php" class="sidebar-link">
84
+ <i class="bi bi-gear me-2"></i> Settings
85
+ </a>
86
+ </li>
87
+ <li class="mt-4">
88
+ <a href="../logout.php" class="sidebar-link text-danger">
89
+ <i class="bi bi-box-arrow-right me-2"></i> Logout
90
+ </a>
91
+ </li>
92
+ </ul>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Main Content -->
97
+ <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
98
+ <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
99
+ <h1 class="h2">Dashboard</h1>
100
+ <div class="btn-toolbar mb-2 mb-md-0">
101
+ <div class="btn-group me-2">
102
+ <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Stats Cards -->
108
+ <div class="row">
109
+ <div class="col-md-3">
110
+ <div class="stat-card total">
111
+ <h5>Total Tickets</h5>
112
+ <h2><?php echo $total_tickets; ?></h2>
113
+ </div>
114
+ </div>
115
+ <div class="col-md-3">
116
+ <div class="stat-card open">
117
+ <h5>Open Tickets</h5>
118
+ <h2><?php echo $open_tickets; ?></h2>
119
+ </div>
120
+ </div>
121
+ <div class="col-md-3">
122
+ <div class="stat-card progress">
123
+ <h5>In Progress</h5>
124
+ <h2><?php echo $in_progress_tickets; ?></h2>
125
+ </div>
126
+ </div>
127
+ <div class="col-md-3">
128
+ <div class="stat-card resolved">
129
+ <h5>Resolved</h5>
130
+ <h2><?php echo $resolved_tickets; ?></h2>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Recent Tickets -->
136
+ <div class="card mt-4">
137
+ <div class="card-header">
138
+ <h5 class="mb-0">Recent Tickets</h5>
139
+ </div>
140
+ <div class="card-body">
141
+ <div class="table-responsive">
142
+ <table class="table table-hover ticket-table">
143
+ <thead>
144
+ <tr>
145
+ <th>Ticket ID</th>
146
+ <th>Subject</th>
147
+ <th>Status</th>
148
+ <th>Priority</th>
149
+ <th>Created</th>
150
+ <th>Actions</th>
151
+ </tr>
152
+ </thead>
153
+ <tbody>
154
+ <?php while ($ticket = mysqli_fetch_assoc($recent_tickets)): ?>
155
+ <tr>
156
+ <td><?php echo htmlspecialchars($ticket['ticket_id']); ?></td>
157
+ <td><?php echo htmlspecialchars($ticket['subject']); ?></td>
158
+ <td>
159
+ <span class="badge
160
+ <?php
161
+ switch ($ticket['status']) {
162
+ case 'Open': echo 'bg-danger'; break;
163
+ case 'In Progress': echo 'bg-warning text-dark'; break;
164
+ case 'Resolved': echo 'bg-success'; break;
165
+ case 'Closed': echo 'bg-secondary'; break;
166
+ }
167
+ ?>">
168
+ <?php echo htmlspecialchars($ticket['status']); ?>
169
+ </span>
170
+ </td>
171
+ <td><?php echo htmlspecialchars($ticket['priority']); ?></td>
172
+ <td><?php echo date('M d, Y', strtotime($ticket['created_at'])); ?></td>
173
+ <td>
174
+ <a href="view-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-sm btn-outline-primary">
175
+ <i class="bi bi-eye"></i> View
176
+ </a>
177
+ </td>
178
+ </tr>
179
+ <?php endwhile; ?>
180
+ </tbody>
181
+ </table>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </main>
186
+ </div>
187
+ </div>
188
+
189
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
190
+ </body>
191
+ </html>
admin/tickets.php ADDED
@@ -0,0 +1,207 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Manage Tickets</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
+ <style>
10
+ .sidebar {
11
+ min-height: 100vh;
12
+ background-color: #212529;
13
+ color: white;
14
+ }
15
+ .sidebar-link {
16
+ color: rgba(255, 255, 255, 0.75);
17
+ text-decoration: none;
18
+ display: block;
19
+ padding: 10px 15px;
20
+ border-radius: 5px;
21
+ margin-bottom: 5px;
22
+ }
23
+ .sidebar-link:hover, .sidebar-link.active {
24
+ color: white;
25
+ background-color: #495057;
26
+ }
27
+ .ticket-table th {
28
+ background-color: #f8f9fa;
29
+ }
30
+ .search-box {
31
+ max-width: 300px;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body>
36
+ <div class="container-fluid">
37
+ <div class="row">
38
+ <!-- Sidebar -->
39
+ <div class="col-md-3 col-lg-2 d-md-block sidebar collapse bg-dark">
40
+ <div class="position-sticky pt-3">
41
+ <div class="text-center mb-4">
42
+ <h4>SupportHub Admin</h4>
43
+ <p class="text-muted">Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?></p>
44
+ </div>
45
+
46
+ <ul class="nav flex-column">
47
+ <li>
48
+ <a href="dashboard.php" class="sidebar-link">
49
+ <i class="bi bi-speedometer2 me-2"></i> Dashboard
50
+ </a>
51
+ </li>
52
+ <li>
53
+ <a href="tickets.php" class="sidebar-link active">
54
+ <i class="bi bi-ticket-detailed me-2"></i> Tickets
55
+ </a>
56
+ </li>
57
+ <li>
58
+ <a href="staff.php" class="sidebar-link">
59
+ <i class="bi bi-people me-2"></i> Staff
60
+ </a>
61
+ </li>
62
+ <li>
63
+ <a href="reports.php" class="sidebar-link">
64
+ <i class="bi bi-graph-up me-2"></i> Reports
65
+ </a>
66
+ </li>
67
+ <li>
68
+ <a href="settings.php" class="sidebar-link">
69
+ <i class="bi bi-gear me-2"></i> Settings
70
+ </a>
71
+ </li>
72
+ <li class="mt-4">
73
+ <a href="../logout.php" class="sidebar-link text-danger">
74
+ <i class="bi bi-box-arrow-right me-2"></i> Logout
75
+ </a>
76
+ </li>
77
+ </ul>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Main Content -->
82
+ <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
83
+ <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
84
+ <h1 class="h2">Manage Tickets</h1>
85
+ <div class="btn-toolbar mb-2 mb-md-0">
86
+ <div class="input-group search-box">
87
+ <input type="text" class="form-control" placeholder="Search tickets...">
88
+ <button class="btn btn-outline-secondary" type="button">
89
+ <i class="bi bi-search"></i>
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Filter Options -->
96
+ <div class="row mb-4">
97
+ <div class="col-md-3">
98
+ <select class="form-select">
99
+ <option selected>All Status</option>
100
+ <option>Open</option>
101
+ <option>In Progress</option>
102
+ <option>Resolved</option>
103
+ <option>Closed</option>
104
+ </select>
105
+ </div>
106
+ <div class="col-md-3">
107
+ <select class="form-select">
108
+ <option selected>All Priority</option>
109
+ <option>Low</option>
110
+ <option>Medium</option>
111
+ <option>High</option>
112
+ <option>Critical</option>
113
+ </select>
114
+ </div>
115
+ <div class="col-md-3">
116
+ <select class="form-select">
117
+ <option selected>Sort by Date</option>
118
+ <option>Newest First</option>
119
+ <option>Oldest First</option>
120
+ </select>
121
+ </div>
122
+ <div class="col-md-3">
123
+ <button class="btn btn-primary w-100">
124
+ <i class="bi bi-funnel"></i> Apply Filters
125
+ </button>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Tickets Table -->
130
+ <div class="card">
131
+ <div class="card-body">
132
+ <div class="table-responsive">
133
+ <table class="table table-hover ticket-table">
134
+ <thead>
135
+ <tr>
136
+ <th>Ticket ID</th>
137
+ <th>Subject</th>
138
+ <th>Customer</th>
139
+ <th>Status</th>
140
+ <th>Priority</th>
141
+ <th>Created</th>
142
+ <th>Actions</th>
143
+ </tr>
144
+ </thead>
145
+ <tbody>
146
+ <?php while ($ticket = mysqli_fetch_assoc($tickets)): ?>
147
+ <tr>
148
+ <td><?php echo htmlspecialchars($ticket['ticket_id']); ?></td>
149
+ <td><?php echo htmlspecialchars($ticket['subject']); ?></td>
150
+ <td><?php echo htmlspecialchars($ticket['name']); ?></td>
151
+ <td>
152
+ <span class="badge
153
+ <?php
154
+ switch ($ticket['status']) {
155
+ case 'Open': echo 'bg-danger'; break;
156
+ case 'In Progress': echo 'bg-warning text-dark'; break;
157
+ case 'Resolved': echo 'bg-success'; break;
158
+ case 'Closed': echo 'bg-secondary'; break;
159
+ }
160
+ ?>">
161
+ <?php echo htmlspecialchars($ticket['status']); ?>
162
+ </span>
163
+ </td>
164
+ <td><?php echo htmlspecialchars($ticket['priority']); ?></td>
165
+ <td><?php echo date('M d, Y', strtotime($ticket['created_at'])); ?></td>
166
+ <td>
167
+ <div class="btn-group">
168
+ <a href="view-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-sm btn-outline-primary">
169
+ <i class="bi bi-eye"></i>
170
+ </a>
171
+ <a href="edit-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-sm btn-outline-secondary">
172
+ <i class="bi bi-pencil"></i>
173
+ </a>
174
+ <a href="delete-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-sm btn-outline-danger">
175
+ <i class="bi bi-trash"></i>
176
+ </a>
177
+ </div>
178
+ </td>
179
+ </tr>
180
+ <?php endwhile; ?>
181
+ </tbody>
182
+ </table>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Pagination -->
188
+ <nav aria-label="Page navigation" class="mt-4">
189
+ <ul class="pagination justify-content-center">
190
+ <li class="page-item disabled">
191
+ <a class="page-link" href="#" tabindex="-1">Previous</a>
192
+ </li>
193
+ <li class="page-item active"><a class="page-link" href="#">1</a></li>
194
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
195
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
196
+ <li class="page-item">
197
+ <a class="page-link" href="#">Next</a>
198
+ </li>
199
+ </ul>
200
+ </nav>
201
+ </main>
202
+ </div>
203
+ </div>
204
+
205
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
206
+ </body>
207
+ </html>
admin/view-ticket.php ADDED
@@ -0,0 +1,229 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>View Ticket</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
+ <style>
10
+ .sidebar {
11
+ min-height: 100vh;
12
+ background-color: #212529;
13
+ color: white;
14
+ }
15
+ .sidebar-link {
16
+ color: rgba(255, 255, 255, 0.75);
17
+ text-decoration: none;
18
+ display: block;
19
+ padding: 10px 15px;
20
+ border-radius: 5px;
21
+ margin-bottom: 5px;
22
+ }
23
+ .sidebar-link:hover, .sidebar-link.active {
24
+ color: white;
25
+ background-color: #495057;
26
+ }
27
+ .ticket-header {
28
+ border-bottom: 1px solid #dee2e6;
29
+ padding-bottom: 15px;
30
+ margin-bottom: 20px;
31
+ }
32
+ .response-card {
33
+ border-left: 4px solid #0d6efd;
34
+ margin-bottom: 20px;
35
+ }
36
+ .staff-response {
37
+ border-left-color: #198754;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body>
42
+ <div class="container-fluid">
43
+ <div class="row">
44
+ <!-- Sidebar -->
45
+ <div class="col-md-3 col-lg-2 d-md-block sidebar collapse bg-dark">
46
+ <div class="position-sticky pt-3">
47
+ <div class="text-center mb-4">
48
+ <h4>SupportHub Admin</h4>
49
+ <p class="text-muted">Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?></p>
50
+ </div>
51
+
52
+ <ul class="nav flex-column">
53
+ <li>
54
+ <a href="dashboard.php" class="sidebar-link">
55
+ <i class="bi bi-speedometer2 me-2"></i> Dashboard
56
+ </a>
57
+ </li>
58
+ <li>
59
+ <a href="tickets.php" class="sidebar-link active">
60
+ <i class="bi bi-ticket-detailed me-2"></i> Tickets
61
+ </a>
62
+ </li>
63
+ <li>
64
+ <a href="staff.php" class="sidebar-link">
65
+ <i class="bi bi-people me-2"></i> Staff
66
+ </a>
67
+ </li>
68
+ <li>
69
+ <a href="reports.php" class="sidebar-link">
70
+ <i class="bi bi-graph-up me-2"></i> Reports
71
+ </a>
72
+ </li>
73
+ <li>
74
+ <a href="settings.php" class="sidebar-link">
75
+ <i class="bi bi-gear me-2"></i> Settings
76
+ </a>
77
+ </li>
78
+ <li class="mt-4">
79
+ <a href="../logout.php" class="sidebar-link text-danger">
80
+ <i class="bi bi-box-arrow-right me-2"></i> Logout
81
+ </a>
82
+ </li>
83
+ </ul>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Main Content -->
88
+ <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
89
+ <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
90
+ <h1 class="h2">View Ticket</h1>
91
+ <div class="btn-toolbar mb-2 mb-md-0">
92
+ <a href="tickets.php" class="btn btn-sm btn-outline-secondary">
93
+ <i class="bi bi-arrow-left"></i> Back to Tickets
94
+ </a>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Ticket Details -->
99
+ <div class="card mb-4">
100
+ <div class="card-body">
101
+ <div class="ticket-header">
102
+ <div class="d-flex justify-content-between align-items-center mb-3">
103
+ <h3 class="mb-0">Ticket #<?php echo htmlspecialchars($ticket['ticket_id']); ?></h3>
104
+ <span class="badge
105
+ <?php
106
+ switch ($ticket['status']) {
107
+ case 'Open': echo 'bg-danger'; break;
108
+ case 'In Progress': echo 'bg-warning text-dark'; break;
109
+ case 'Resolved': echo 'bg-success'; break;
110
+ case 'Closed': echo 'bg-secondary'; break;
111
+ }
112
+ ?>">
113
+ <?php echo htmlspecialchars($ticket['status']); ?>
114
+ </span>
115
+ </div>
116
+
117
+ <div class="row">
118
+ <div class="col-md-6">
119
+ <p class="mb-1"><strong>Subject:</strong> <?php echo htmlspecialchars($ticket['subject']); ?></p>
120
+ <p class="mb-1"><strong>Priority:</strong> <?php echo htmlspecialchars($ticket['priority']); ?></p>
121
+ </div>
122
+ <div class="col-md-6">
123
+ <p class="mb-1"><strong>Created:</strong> <?php echo date('M d, Y H:i', strtotime($ticket['created_at'])); ?></p>
124
+ <?php if ($ticket['updated_at']): ?>
125
+ <p class="mb-1"><strong>Last updated:</strong> <?php echo date('M d, Y H:i', strtotime($ticket['updated_at'])); ?></p>
126
+ <?php endif; ?>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="mb-4">
132
+ <h5>Description</h5>
133
+ <div class="bg-light p-3 rounded">
134
+ <?php echo nl2br(htmlspecialchars($ticket['description'])); ?>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="row">
139
+ <div class="col-md-6">
140
+ <h5>Customer Details</h5>
141
+ <ul class="list-unstyled">
142
+ <li><strong>Name:</strong> <?php echo htmlspecialchars($ticket['name']); ?></li>
143
+ <li><strong>Email:</strong> <?php echo htmlspecialchars($ticket['email']); ?></li>
144
+ </ul>
145
+ </div>
146
+ <div class="col-md-6">
147
+ <h5>Ticket Actions</h5>
148
+ <div class="btn-group">
149
+ <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#responseModal">
150
+ <i class="bi bi-reply"></i> Add Response
151
+ </button>
152
+ <a href="edit-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-secondary">
153
+ <i class="bi bi-pencil"></i> Edit
154
+ </a>
155
+ <a href="delete-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-danger">
156
+ <i class="bi bi-trash"></i> Delete
157
+ </a>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Responses Section -->
165
+ <h4 class="mb-3">Responses</h4>
166
+
167
+ <?php if (mysqli_num_rows($responses) > 0): ?>
168
+ <?php while ($response = mysqli_fetch_assoc($responses)): ?>
169
+ <div class="card response-card <?php echo ($response['is_staff'] == 1) ? 'staff-response' : ''; ?>">
170
+ <div class="card-body">
171
+ <div class="d-flex justify-content-between mb-2">
172
+ <strong>
173
+ <?php echo ($response['is_staff'] == 1) ? 'Staff Response' : 'Customer Response'; ?>
174
+ </strong>
175
+ <small class="text-muted">
176
+ <?php echo date('M d, Y H:i', strtotime($response['created_at'])); ?>
177
+ </small>
178
+ </div>
179
+ <p><?php echo nl2br(htmlspecialchars($response['message'])); ?></p>
180
+ </div>
181
+ </div>
182
+ <?php endwhile; ?>
183
+ <?php else: ?>
184
+ <div class="alert alert-info">
185
+ No responses yet. Be the first to respond to this ticket.
186
+ </div>
187
+ <?php endif; ?>
188
+ </main>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Response Modal -->
193
+ <div class="modal fade" id="responseModal" tabindex="-1" aria-labelledby="responseModalLabel" aria-hidden="true">
194
+ <div class="modal-dialog">
195
+ <div class="modal-content">
196
+ <div class="modal-header">
197
+ <h5 class="modal-title" id="responseModalLabel">Add Response</h5>
198
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
199
+ </div>
200
+ <form method="POST" action="add-response.php">
201
+ <div class="modal-body">
202
+ <input type="hidden" name="ticket_id" value="<?php echo $ticket['id']; ?>">
203
+ <div class="mb-3">
204
+ <label for="responseMessage" class="form-label">Message</label>
205
+ <textarea class="form-control" id="responseMessage" name="message" rows="5" required></textarea>
206
+ </div>
207
+ <div class="mb-3">
208
+ <label for="responseStatus" class="form-label">Update Status</label>
209
+ <select class="form-select" id="responseStatus" name="status">
210
+ <option value="">Keep current status</option>
211
+ <option value="Open">Open</option>
212
+ <option value="In Progress">In Progress</option>
213
+ <option value="Resolved">Resolved</option>
214
+ <option value="Closed">Closed</option>
215
+ </select>
216
+ </div>
217
+ </div>
218
+ <div class="modal-footer">
219
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
220
+ <button type="submit" class="btn btn-primary">Submit Response</button>
221
+ </div>
222
+ </form>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
228
+ </body>
229
+ </html>
index.html CHANGED
@@ -1,19 +1,177 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Customer Support Portal</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
+ <style>
10
+ .hero-section {
11
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
12
+ color: white;
13
+ padding: 5rem 0;
14
+ }
15
+ .feature-icon {
16
+ font-size: 2.5rem;
17
+ margin-bottom: 1rem;
18
+ color: #0d6efd;
19
+ }
20
+ .card-hover:hover {
21
+ transform: translateY(-5px);
22
+ transition: all 0.3s ease;
23
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body>
28
+ <!-- Navigation -->
29
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
30
+ <div class="container">
31
+ <a class="navbar-brand" href="#">SupportHub</a>
32
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
33
+ <span class="navbar-toggler-icon"></span>
34
+ </button>
35
+ <div class="collapse navbar-collapse" id="navbarNav">
36
+ <ul class="navbar-nav ms-auto">
37
+ <li class="nav-item">
38
+ <a class="nav-link active" href="index.html">Home</a>
39
+ </li>
40
+ <li class="nav-item">
41
+ <a class="nav-link" href="submit-ticket.php">Submit Ticket</a>
42
+ </li>
43
+ <li class="nav-item">
44
+ <a class="nav-link" href="track-ticket.php">Track Ticket</a>
45
+ </li>
46
+ <li class="nav-item">
47
+ <a class="nav-link" href="login.php">Login</a>
48
+ </li>
49
+ </ul>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Hero Section -->
55
+ <section class="hero-section">
56
+ <div class="container text-center">
57
+ <h1 class="display-4 fw-bold mb-4">We're Here to Help</h1>
58
+ <p class="lead mb-5">24/7 customer support for all your needs. Submit a ticket and our team will get back to you shortly.</p>
59
+ <a href="submit-ticket.php" class="btn btn-light btn-lg px-4 me-2">Submit a Ticket</a>
60
+ <a href="track-ticket.php" class="btn btn-outline-light btn-lg px-4">Track Existing Ticket</a>
61
+ </div>
62
+ </section>
63
+
64
+ <!-- Features Section -->
65
+ <section class="py-5">
66
+ <div class="container">
67
+ <div class="row g-4">
68
+ <div class="col-md-4">
69
+ <div class="card h-100 card-hover">
70
+ <div class="card-body text-center p-4">
71
+ <i class="bi bi-headset feature-icon"></i>
72
+ <h3 class="h4 mb-3">24/7 Support</h3>
73
+ <p class="text-muted">Our team is available round the clock to assist you with any issues or questions.</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ <div class="col-md-4">
78
+ <div class="card h-100 card-hover">
79
+ <div class="card-body text-center p-4">
80
+ <i class="bi bi-speedometer2 feature-icon"></i>
81
+ <h3 class="h4 mb-3">Fast Response</h3>
82
+ <p class="text-muted">Average response time under 2 hours for all priority tickets.</p>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <div class="col-md-4">
87
+ <div class="card h-100 card-hover">
88
+ <div class="card-body text-center p-4">
89
+ <i class="bi bi-shield-check feature-icon"></i>
90
+ <h3 class="h4 mb-3">Secure Platform</h3>
91
+ <p class="text-muted">All your data is encrypted and protected with industry-standard security measures.</p>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- How It Works -->
100
+ <section class="py-5 bg-light">
101
+ <div class="container">
102
+ <h2 class="text-center mb-5">How It Works</h2>
103
+ <div class="row g-4">
104
+ <div class="col-md-3">
105
+ <div class="text-center">
106
+ <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
107
+ <span class="h4 mb-0">1</span>
108
+ </div>
109
+ <h4 class="my-3">Submit Ticket</h4>
110
+ <p>Fill out our simple form with details about your issue.</p>
111
+ </div>
112
+ </div>
113
+ <div class="col-md-3">
114
+ <div class="text-center">
115
+ <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
116
+ <span class="h4 mb-0">2</span>
117
+ </div>
118
+ <h4 class="my-3">Receive Ticket ID</h4>
119
+ <p>Get a unique reference number to track your ticket.</p>
120
+ </div>
121
+ </div>
122
+ <div class="col-md-3">
123
+ <div class="text-center">
124
+ <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
125
+ <span class="h4 mb-0">3</span>
126
+ </div>
127
+ <h4 class="my-3">Expert Review</h4>
128
+ <p>Our team analyzes and prioritizes your request.</p>
129
+ </div>
130
+ </div>
131
+ <div class="col-md-3">
132
+ <div class="text-center">
133
+ <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
134
+ <span class="h4 mb-0">4</span>
135
+ </div>
136
+ <h4 class="my-3">Resolution</h4>
137
+ <p>We provide a solution and follow up for feedback.</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- Footer -->
145
+ <footer class="bg-dark text-white py-4">
146
+ <div class="container">
147
+ <div class="row">
148
+ <div class="col-md-6">
149
+ <h5>SupportHub</h5>
150
+ <p>Your trusted partner for all customer support needs.</p>
151
+ </div>
152
+ <div class="col-md-3">
153
+ <h5>Quick Links</h5>
154
+ <ul class="list-unstyled">
155
+ <li><a href="submit-ticket.php" class="text-white">Submit Ticket</a></li>
156
+ <li><a href="track-ticket.php" class="text-white">Track Ticket</a></li>
157
+ <li><a href="faq.php" class="text-white">FAQ</a></li>
158
+ </ul>
159
+ </div>
160
+ <div class="col-md-3">
161
+ <h5>Contact</h5>
162
+ <ul class="list-unstyled">
163
+ <li><i class="bi bi-envelope me-2"></i> support@example.com</li>
164
+ <li><i class="bi bi-telephone me-2"></i> +1 (555) 123-4567</li>
165
+ </ul>
166
+ </div>
167
+ </div>
168
+ <hr>
169
+ <div class="text-center">
170
+ <p class="mb-0">&copy; 2023 SupportHub. All rights reserved.</p>
171
+ </div>
172
+ </div>
173
+ </footer>
174
+
175
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
176
+ </body>
177
  </html>
login.php ADDED
@@ -0,0 +1,102 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Staff Login</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
+ <style>
10
+ .login-form {
11
+ max-width: 400px;
12
+ margin: 0 auto;
13
+ background-color: #f8f9fa;
14
+ border-radius: 10px;
15
+ padding: 30px;
16
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
17
+ }
18
+ .form-header {
19
+ border-bottom: 2px solid #0d6efd;
20
+ padding-bottom: 15px;
21
+ margin-bottom: 30px;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body>
26
+ <!-- Navigation -->
27
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
28
+ <div class="container">
29
+ <a class="navbar-brand" href="index.html">SupportHub</a>
30
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
31
+ <span class="navbar-toggler-icon"></span>
32
+ </button>
33
+ <div class="collapse navbar-collapse" id="navbarNav">
34
+ <ul class="navbar-nav ms-auto">
35
+ <li class="nav-item">
36
+ <a class="nav-link" href="index.html">Home</a>
37
+ </li>
38
+ <li class="nav-item">
39
+ <a class="nav-link" href="submit-ticket.php">Submit Ticket</a>
40
+ </li>
41
+ <li class="nav-item">
42
+ <a class="nav-link" href="track-ticket.php">Track Ticket</a>
43
+ </li>
44
+ <li class="nav-item">
45
+ <a class="nav-link active" href="login.php">Login</a>
46
+ </li>
47
+ </ul>
48
+ </div>
49
+ </div>
50
+ </nav>
51
+
52
+ <!-- Main Content -->
53
+ <div class="container my-5">
54
+ <div class="row justify-content-center">
55
+ <div class="col-md-6">
56
+ <div class="login-form">
57
+ <div class="form-header text-center">
58
+ <h2><i class="bi bi-person-circle"></i> Staff Login</h2>
59
+ <p class="text-muted">Enter your credentials to access the support portal</p>
60
+ </div>
61
+
62
+ <?php if ($error_message): ?>
63
+ <div class="alert alert-danger alert-dismissible fade show" role="alert">
64
+ <?php echo $error_message; ?>
65
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
66
+ </div>
67
+ <?php endif; ?>
68
+
69
+ <form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
70
+ <div class="mb-3">
71
+ <label for="username" class="form-label">Username</label>
72
+ <input type="text" class="form-control" id="username" name="username" value="<?php echo htmlspecialchars($username); ?>" required>
73
+ </div>
74
+
75
+ <div class="mb-4">
76
+ <label for="password" class="form-label">Password</label>
77
+ <input type="password" class="form-control" id="password" name="password" required>
78
+ </div>
79
+
80
+ <div class="d-grid">
81
+ <button type="submit" class="btn btn-primary">
82
+ <i class="bi bi-box-arrow-in-right"></i> Login
83
+ </button>
84
+ </div>
85
+ </form>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Footer -->
92
+ <footer class="bg-dark text-white py-4">
93
+ <div class="container">
94
+ <div class="text-center">
95
+ <p class="mb-0">&copy; 2023 SupportHub. All rights reserved.</p>
96
+ </div>
97
+ </div>
98
+ </footer>
99
+
100
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
101
+ </body>
102
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a customer complaints and support services website using bootstrap and php. The php code must be procedural for easy debugging and understanding. The backend is MYSQL
submit-ticket.php ADDED
@@ -0,0 +1,129 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Submit Support Ticket</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
+ <style>
10
+ .ticket-form {
11
+ background-color: #f8f9fa;
12
+ border-radius: 10px;
13
+ padding: 30px;
14
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
15
+ }
16
+ .form-header {
17
+ border-bottom: 2px solid #0d6efd;
18
+ padding-bottom: 15px;
19
+ margin-bottom: 30px;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body>
24
+ <!-- Navigation -->
25
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
26
+ <div class="container">
27
+ <a class="navbar-brand" href="index.html">SupportHub</a>
28
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
29
+ <span class="navbar-toggler-icon"></span>
30
+ </button>
31
+ <div class="collapse navbar-collapse" id="navbarNav">
32
+ <ul class="navbar-nav ms-auto">
33
+ <li class="nav-item">
34
+ <a class="nav-link" href="index.html">Home</a>
35
+ </li>
36
+ <li class="nav-item">
37
+ <a class="nav-link active" href="submit-ticket.php">Submit Ticket</a>
38
+ </li>
39
+ <li class="nav-item">
40
+ <a class="nav-link" href="track-ticket.php">Track Ticket</a>
41
+ </li>
42
+ <li class="nav-item">
43
+ <a class="nav-link" href="login.php">Login</a>
44
+ </li>
45
+ </ul>
46
+ </div>
47
+ </div>
48
+ </nav>
49
+
50
+ <!-- Main Content -->
51
+ <div class="container my-5">
52
+ <div class="row justify-content-center">
53
+ <div class="col-lg-8">
54
+ <div class="ticket-form">
55
+ <div class="form-header text-center">
56
+ <h2><i class="bi bi-ticket-detailed"></i> Submit Support Ticket</h2>
57
+ <p class="text-muted">Fill out the form below and our team will get back to you shortly</p>
58
+ </div>
59
+
60
+ <?php if ($success_message): ?>
61
+ <div class="alert alert-success alert-dismissible fade show" role="alert">
62
+ <?php echo $success_message; ?>
63
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
64
+ </div>
65
+ <?php endif; ?>
66
+
67
+ <?php if ($error_message): ?>
68
+ <div class="alert alert-danger alert-dismissible fade show" role="alert">
69
+ <?php echo $error_message; ?>
70
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
71
+ </div>
72
+ <?php endif; ?>
73
+
74
+ <form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
75
+ <div class="row mb-3">
76
+ <div class="col-md-6 mb-3">
77
+ <label for="name" class="form-label">Full Name</label>
78
+ <input type="text" class="form-control" id="name" name="name" value="<?php echo htmlspecialchars($name); ?>" required>
79
+ </div>
80
+ <div class="col-md-6 mb-3">
81
+ <label for="email" class="form-label">Email Address</label>
82
+ <input type="email" class="form-control" id="email" name="email" value="<?php echo htmlspecialchars($email); ?>" required>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="mb-3">
87
+ <label for="subject" class="form-label">Subject</label>
88
+ <input type="text" class="form-control" id="subject" name="subject" value="<?php echo htmlspecialchars($subject); ?>" required>
89
+ </div>
90
+
91
+ <div class="mb-3">
92
+ <label for="description" class="form-label">Description</label>
93
+ <textarea class="form-control" id="description" name="description" rows="5" required><?php echo htmlspecialchars($description); ?></textarea>
94
+ </div>
95
+
96
+ <div class="mb-4">
97
+ <label for="priority" class="form-label">Priority</label>
98
+ <select class="form-select" id="priority" name="priority" required>
99
+ <option value="" disabled selected>Select priority level</option>
100
+ <option value="Low" <?php echo ($priority == 'Low') ? 'selected' : ''; ?>>Low</option>
101
+ <option value="Medium" <?php echo ($priority == 'Medium') ? 'selected' : ''; ?>>Medium</option>
102
+ <option value="High" <?php echo ($priority == 'High') ? 'selected' : ''; ?>>High</option>
103
+ <option value="Critical" <?php echo ($priority == 'Critical') ? 'selected' : ''; ?>>Critical</option>
104
+ </select>
105
+ </div>
106
+
107
+ <div class="d-grid">
108
+ <button type="submit" class="btn btn-primary btn-lg">
109
+ <i class="bi bi-send-fill"></i> Submit Ticket
110
+ </button>
111
+ </div>
112
+ </form>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Footer -->
119
+ <footer class="bg-dark text-white py-4">
120
+ <div class="container">
121
+ <div class="text-center">
122
+ <p class="mb-0">&copy; 2023 SupportHub. All rights reserved.</p>
123
+ </div>
124
+ </div>
125
+ </footer>
126
+
127
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
128
+ </body>
129
+ </html>
track-ticket.php ADDED
@@ -0,0 +1,162 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Track Support Ticket</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9
+ <style>
10
+ .track-form {
11
+ background-color: #f8f9fa;
12
+ border-radius: 10px;
13
+ padding: 30px;
14
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
15
+ }
16
+ .ticket-card {
17
+ border-left: 5px solid #0d6efd;
18
+ border-radius: 8px;
19
+ }
20
+ .status-badge {
21
+ padding: 5px 10px;
22
+ border-radius: 20px;
23
+ font-weight: 600;
24
+ }
25
+ .status-open {
26
+ background-color: #d1e7dd;
27
+ color: #0f5132;
28
+ }
29
+ .status-in-progress {
30
+ background-color: #fff3cd;
31
+ color: #664d03;
32
+ }
33
+ .status-resolved {
34
+ background-color: #cfe2ff;
35
+ color: #084298;
36
+ }
37
+ .status-closed {
38
+ background-color: #f8d7da;
39
+ color: #842029;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body>
44
+ <!-- Navigation -->
45
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
46
+ <div class="container">
47
+ <a class="navbar-brand" href="index.html">SupportHub</a>
48
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
49
+ <span class="navbar-toggler-icon"></span>
50
+ </button>
51
+ <div class="collapse navbar-collapse" id="navbarNav">
52
+ <ul class="navbar-nav ms-auto">
53
+ <li class="nav-item">
54
+ <a class="nav-link" href="index.html">Home</a>
55
+ </li>
56
+ <li class="nav-item">
57
+ <a class="nav-link" href="submit-ticket.php">Submit Ticket</a>
58
+ </li>
59
+ <li class="nav-item">
60
+ <a class="nav-link active" href="track-ticket.php">Track Ticket</a>
61
+ </li>
62
+ <li class="nav-item">
63
+ <a class="nav-link" href="login.php">Login</a>
64
+ </li>
65
+ </ul>
66
+ </div>
67
+ </div>
68
+ </nav>
69
+
70
+ <!-- Main Content -->
71
+ <div class="container my-5">
72
+ <div class="row justify-content-center">
73
+ <div class="col-lg-8">
74
+ <div class="track-form mb-4">
75
+ <h2 class="text-center mb-4"><i class="bi bi-search"></i> Track Your Ticket</h2>
76
+ <form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
77
+ <div class="input-group mb-3">
78
+ <input type="text" class="form-control form-control-lg" name="ticket_id" placeholder="Enter your Ticket ID (e.g. TKT-ABC123)" value="<?php echo htmlspecialchars($ticket_id); ?>" required>
79
+ <button class="btn btn-primary" type="submit">Track</button>
80
+ </div>
81
+ </form>
82
+
83
+ <?php if ($error_message): ?>
84
+ <div class="alert alert-danger alert-dismissible fade show" role="alert">
85
+ <?php echo $error_message; ?>
86
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
87
+ </div>
88
+ <?php endif; ?>
89
+ </div>
90
+
91
+ <?php if ($ticket_data): ?>
92
+ <div class="card ticket-card mb-4">
93
+ <div class="card-body">
94
+ <div class="d-flex justify-content-between align-items-center mb-3">
95
+ <h3 class="card-title mb-0">Ticket #<?php echo htmlspecialchars($ticket_data['ticket_id']); ?></h3>
96
+ <?php
97
+ $status_class = '';
98
+ switch ($ticket_data['status']) {
99
+ case 'Open':
100
+ $status_class = 'status-open';
101
+ break;
102
+ case 'In Progress':
103
+ $status_class = 'status-in-progress';
104
+ break;
105
+ case 'Resolved':
106
+ $status_class = 'status-resolved';
107
+ break;
108
+ case 'Closed':
109
+ $status_class = 'status-closed';
110
+ break;
111
+ }
112
+ ?>
113
+ <span class="status-badge <?php echo $status_class; ?>">
114
+ <?php echo htmlspecialchars($ticket_data['status']); ?>
115
+ </span>
116
+ </div>
117
+
118
+ <div class="row mb-3">
119
+ <div class="col-md-6">
120
+ <p class="mb-1"><strong>Subject:</strong> <?php echo htmlspecialchars($ticket_data['subject']); ?></p>
121
+ </div>
122
+ <div class="col-md-6">
123
+ <p class="mb-1"><strong>Priority:</strong> <?php echo htmlspecialchars($ticket_data['priority']); ?></p>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="mb-3">
128
+ <h5>Description</h5>
129
+ <p><?php echo nl2br(htmlspecialchars($ticket_data['description'])); ?></p>
130
+ </div>
131
+
132
+ <div class="row">
133
+ <div class="col-md-6">
134
+ <p class="mb-1"><strong>Submitted by:</strong> <?php echo htmlspecialchars($ticket_data['name']); ?></p>
135
+ <p class="mb-1"><strong>Email:</strong> <?php echo htmlspecialchars($ticket_data['email']); ?></p>
136
+ </div>
137
+ <div class="col-md-6">
138
+ <p class="mb-1"><strong>Created:</strong> <?php echo date('M d, Y H:i', strtotime($ticket_data['created_at'])); ?></p>
139
+ <?php if ($ticket_data['updated_at']): ?>
140
+ <p class="mb-1"><strong>Last updated:</strong> <?php echo date('M d, Y H:i', strtotime($ticket_data['updated_at'])); ?></p>
141
+ <?php endif; ?>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <?php endif; ?>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Footer -->
152
+ <footer class="bg-dark text-white py-4">
153
+ <div class="container">
154
+ <div class="text-center">
155
+ <p class="mb-0">&copy; 2023 SupportHub. All rights reserved.</p>
156
+ </div>
157
+ </div>
158
+ </footer>
159
+
160
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
161
+ </body>
162
+ </html>