Segmentation.aspx
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Segmentation.aspx.vb" Inherits="Segmentation" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Customer Segmentation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="segment-box">
<h2>Customer Segmentation Analysis</h2>
<asp:DropDownList ID="ddlSegment" runat="server" CssClass="segment-dropdown">
<asp:ListItem Text="Select Segment" Value="" />
<asp:ListItem Text="Premium Customers" Value="premium" />
<asp:ListItem Text="Frequent Customers" Value="frequent" />
<asp:ListItem Text="Bulk Buyers" Value="bulk" />
<asp:ListItem Text="At-Risk Customers" Value="atrisk" />
<asp:ListItem Text="Loyal Customers" Value="loyal" />
<asp:ListItem Text="New Customers" Value="new" />
<asp:ListItem Text="Show All Segments" Value="all" />
</asp:DropDownList>
<asp:Button ID="btnShow" runat="server" Text="Show Segment"
CssClass="segment-btn" OnClick="btnShow_Click" />
<br /><br />
<asp:Label ID="lblMsg" runat="server" ForeColor="Red" />
<asp:Panel ID="pnlSingleGrid" runat="server">
<asp:GridView ID="GridView1" runat="server"
CssClass="segment-grid" AutoGenerateColumns="True" />
</asp:Panel>
<asp:Panel ID="pnlAllSegments" runat="server" Visible="False" CssClass="all-segments-grid" />
</div>
</form>
</body>
</html>
Segmentation.aspx.vb
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Partial Class Segmentation
Inherits System.Web.UI.Page
Dim connStr As String = ConfigurationManager.ConnectionStrings("PVFC").ConnectionString
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Session("Role") Is Nothing OrElse Session("Role").ToString() <> "Employee" Then
Response.Redirect("EmployeeLogin.aspx")
End If
End Sub
Private Function GetSegmentQuery(segment As String) As String
Select Case segment
Case "premium"
Return "SELECT TOP 5 C.Customer_Id, C.Customer_Name, " &
"SUM(OL.Ordered_Quantity * P.Standard_Price) AS TotalSpent " &
"FROM CUSTOMER_t C " &
"JOIN ORDER_t O ON C.Customer_Id = O.Customer_Id " &
"JOIN Order_line_t OL ON O.Order_Id = OL.Order_Id " &
"JOIN PRODUCT_t P ON P.Product_Id = OL.Product_Id " &
"GROUP BY C.Customer_Id, C.Customer_Name ORDER BY TotalSpent DESC"
Case "frequent"
Return "SELECT TOP 5 C.Customer_Id, C.Customer_Name, " &
"COUNT(O.Order_Id) AS TotalOrders " &
"FROM CUSTOMER_t C " &
"JOIN ORDER_t O ON C.Customer_Id = O.Customer_Id " &
"GROUP BY C.Customer_Id, C.Customer_Name " &
"HAVING COUNT(O.Order_Id) > 3 ORDER BY TotalOrders DESC"
Case "bulk"
Return "SELECT TOP 5 C.Customer_Id, C.Customer_Name, " &
"SUM(OL.Ordered_Quantity) AS TotalUnits " &
"FROM CUSTOMER_t C " &
"JOIN ORDER_t O ON C.Customer_Id = O.Customer_Id " &
"JOIN Order_line_t OL ON O.Order_Id = OL.Order_Id " &
"GROUP BY C.Customer_Id, C.Customer_Name " &
"HAVING SUM(OL.Ordered_Quantity) > 15 ORDER BY TotalUnits DESC"
Case "atrisk"
Return "SELECT TOP 5 C.Customer_Id, C.Customer_Name, " &
"MAX(O.Order_Date) AS LastOrderDate " &
"FROM CUSTOMER_t C " &
"JOIN ORDER_t O ON C.Customer_Id = O.Customer_Id " &
"GROUP BY C.Customer_Id, C.Customer_Name " &
"HAVING MAX(O.Order_Date) < DATEADD(YEAR, -1, GETDATE())"
Case "loyal"
Return "SELECT TOP 5 C.Customer_Id, C.Customer_Name, " &
"COUNT(DISTINCT O.Order_Id) AS OrderCount " &
"FROM CUSTOMER_t C " &
"JOIN ORDER_t O ON C.Customer_Id = O.Customer_Id " &
"GROUP BY C.Customer_Id, C.Customer_Name " &
"HAVING COUNT(DISTINCT O.Order_Id) >= 2 ORDER BY OrderCount DESC"
Case "new"
Return "SELECT TOP 5 C.Customer_Id, C.Customer_Name, " &
"COUNT(O.Order_Id) AS TotalOrders " &
"FROM CUSTOMER_t C " &
"JOIN ORDER_t O ON C.Customer_Id = O.Customer_Id " &
"GROUP BY C.Customer_Id, C.Customer_Name " &
"HAVING MIN(O.Order_Date) >= DATEADD(DAY, -60, GETDATE())"
End Select
Return ""
End Function
Protected Sub btnShow_Click(sender As Object, e As EventArgs) Handles btnShow.Click
Dim selected As String = ddlSegment.SelectedValue
lblMsg.Text = ""
pnlAllSegments.Visible = False
GridView1.DataSource = Nothing
GridView1.DataBind()
If selected = "" Then Exit Sub
If selected = "all" Then
pnlAllSegments.Visible = True
pnlSingleGrid.Visible = False
pnlAllSegments.Controls.Clear()
Dim segments() As String = {"premium", "frequent", "bulk", "atrisk", "loyal", "new"}
Using con As New SqlConnection(connStr)
con.Open()
For Each seg In segments
Dim query As String = GetSegmentQuery(seg)
If query = "" Then Continue For
Dim dt As New DataTable()
Using cmd As New SqlCommand(query, con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
End Using
Dim lbl As New Label()
lbl.Text = seg
pnlAllSegments.Controls.Add(lbl)
Dim gv As New GridView()
gv.DataSource = dt
gv.DataBind()
pnlAllSegments.Controls.Add(gv)
Next
End Using
Return
End If
Dim singleQuery As String = GetSegmentQuery(selected)
If singleQuery = "" Then Exit Sub
Using con As New SqlConnection(connStr)
Using cmd As New SqlCommand(singleQuery, con)
Dim da As New SqlDataAdapter(cmd)
Dim dt As New DataTable()
da.Fill(dt)
If dt.Rows.Count = 0 Then
lblMsg.Text = "No customers found in this segment."
Return
End If
GridView1.DataSource = dt
GridView1.DataBind()
End Using
End Using
End Sub
End Class
style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #FFF2E0;
color: #2d2d2d;
}
header {
background: #898AC4;
color: white;
padding: 15px;
text-align: center;
}
nav ul {
list-style-type: none;
background-color: #A2AADB;
padding: 0;
margin: 0;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #FFF2E0;
padding: 12px 18px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #C0C9EE;
color: #FFF2E0;
}
.container {
padding: 25px;
flex: 1;
}
button, .btn {
padding: 10px 18px;
background: #A2AADB;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover, .btn:hover {
background: #898AC4;
}
footer {
background-color: #C0C9EE;
text-align: center;
padding: 12px;
width: 100%;
}
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.product-card {
background: #C0C9EE;
padding: 15px;
border-radius: 10px;
width: 200px;
text-align: center;
}
.image-box {
width: 100%;
height: 120px;
background-color: #A2AADB;
border-radius: 8px;
margin-bottom: 10px;
}
.auth-box {
width: 350px;
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
margin: auto;
margin-top: 120px;
text-align: center;
}
.auth-box input, .auth-box .btn {
width: 100%;
padding: 10px;
margin-top: 10px;
}
.segment-box {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
max-width: 900px;
margin: 30px auto;
text-align: center;
}
.segment-box h2 {
margin-bottom: 15px;
color: #898AC4;
}
.segment-dropdown {
width: 100%;
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
background: #FFF2E0;
}
.segment-btn {
display: block;
margin: 10px auto;
width: fit-content;
padding: 10px 20px;
background: #A2AADB;
font-weight: bold;
border-radius: 6px;
border: none;
cursor: pointer;
}
.segment-btn:hover {
background: #898AC4;
}
.all-segments-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
align-items: start;
}
.seg-card {
border-radius: 10px;
padding: 14px;
}
.segment-grid {
width: 100%;
font-size: 13px;
margin-top: 10px;
}
.segment-grid table {
width: 100%;
border-collapse: collapse;
background: #FFF2E0;
border-radius: 8px;
overflow: hidden;
}
.segment-grid th,
.segment-grid td {
padding: 8px;
text-align: left;
}
.segment-grid th {
color: #000000;
font-weight: 600;
}
.segment-grid tr:hover td {
background: #FFF2E0;
}
.segment-no-data {
font-size: 13px;
color: #777;
font-style: italic;
}
.segment-section-title {
display: block;
font-size: 15px;
font-weight: 600;
margin: 10px 0;
color: #333;
}
.seg-premium {
background: #fff3cd;
}
.seg-premium th {
background: #d39e00;
}
.seg-frequent {
background: #e7f1ff;
}
.seg-frequent th {
background: #3b6cb7;
}
.seg-bulk {
background: #eafaf1;
}
.seg-bulk th {
background: #2e8b57;
}
.seg-atrisk {
background: #fdecea;
}
.seg-atrisk th {
background: #c0392b;
}
.seg-loyal {
background: #f4eaff;
}
.seg-loyal th {
background: #7d3c98;
}
.seg-new {
background: #e8fbf8;
}
.seg-new th {
background: #16a085;
}