[go: up one dir, main page]
Scribd
Upload
16 views6 pages

Sale Maangement Coding

Uploaded by

mohitkashap869
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views6 pages

Sale Maangement Coding

Uploaded by

mohitkashap869
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales Management System</title>
<style>
/* Add your CSS styles here */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;
}

.container {
max-width: 800px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

h1 {
text-align: center;
color: #333;
}

label {
font-weight: bold;
}

input[type="text"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: #45a049;
}

.records, .follow-ups {
margin-top: 20px;
}

.record, .follow-up {
background: #f9f9f9;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}

.record.done {
background: #d7ffd9;
}

.record.closed {
text-decoration: line-through;
background: #ffd7d7;
}

.record button, .follow-up button {


margin-right: 10px;
}

.download-btn {
margin-top: 20px;
}

.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}

.pagination button {
margin: 0 5px;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Sales Management System</h1>

<form id="salesForm">
<label for="customerName">Customer Name:</label>
<input type="text" id="customerName" required><br>

<label for="phoneNumber">Phone Number:</label>


<input type="tel" id="phoneNumber" required><br>

<label for="date">Date:</label>
<input type="date" id="date" required><br>

<label for="conversation">Conversation:</label><br>
<textarea id="conversation" rows="4" required></textarea><br>
<label for="productName">Product Name:</label>
<input type="text" id="productName" required><br>

<label for="price">Price:</label>
<input type="number" id="price" required><br>

<label for="followUpDate">Follow-up Date:</label>


<input type="date" id="followUpDate"><br>

<button type="button" onclick="createOrUpdateRecord()">Create/Update


Record</button>
</form>

<button class="download-btn" onclick="downloadExcel()">Download as


Excel</button>

<div class="records" id="records">


<!-- Records will be displayed here -->
</div>

<div class="pagination" id="pagination">


<!-- Pagination buttons will be displayed here -->
</div>
</div>

<div class="container">
<h2>Today's Follow-ups</h2>
<div id="followUps">
<!-- Follow-up records will be displayed here -->
</div>
</div>

<script>
// Array to store records
let records = JSON.parse(localStorage.getItem('records')) || [];
const recordsPerPage = 4;
let currentPage = 1;

document.addEventListener('DOMContentLoaded', () => {
displayRecords();
displayFollowUps();
});

function createOrUpdateRecord() {
const customerName = document.getElementById('customerName').value;
const phoneNumber = document.getElementById('phoneNumber').value;
const existingRecordIndex = records.findIndex(record =>
record.customerName === customerName && record.phoneNumber === phoneNumber);
const record = {
customerName,
phoneNumber,
date: document.getElementById('date').value,
conversation: document.getElementById('conversation').value,
productName: document.getElementById('productName').value,
price: document.getElementById('price').value,
followUpDate: document.getElementById('followUpDate').value,
status: 'open'
};
if (existingRecordIndex !== -1) {
records[existingRecordIndex] = record; // Update existing record
} else {
records.unshift(record); // Add new record at the beginning
}
localStorage.setItem('records', JSON.stringify(records));
displayRecords();
displayFollowUps();
clearForm();
}

function displayRecords() {
const recordsContainer = document.getElementById('records');
recordsContainer.innerHTML = '';
const totalRecords = records.length;
const totalPages = Math.ceil(totalRecords / recordsPerPage);
const startIndex = (currentPage - 1) * recordsPerPage;
const endIndex = Math.min(startIndex + recordsPerPage, totalRecords);

for (let i = startIndex; i < endIndex; i++) {


const record = records[i];
const div = document.createElement('div');
div.classList.add('record');
if (record.status === 'done') {
div.classList.add('done');
} else if (record.status === 'closed') {
div.classList.add('closed');
}
div.innerHTML = `
<p><strong>Customer Name:</strong> ${record.customerName}</p>
<p><strong>Phone Number:</strong> ${record.phoneNumber}</p>
<p><strong>Date:</strong> ${record.date}</p>
<p><strong>Conversation:</strong> ${record.conversation}</p>
<p><strong>Product Name:</strong> ${record.productName}</p>
<p><strong>Price:</strong> ${record.price}</p>
<p><strong>Follow-up Date:</strong> ${record.followUpDate}</p>
<button onclick="markAsDone(${i})">Mark as Done</button>
<button onclick="markAsClosed(${i})">Close</button>
<button onclick="deleteRecord(${i})">Delete</button>
<button onclick="duplicateEntry(${i})">Duplicate Entry</button>
`;
recordsContainer.appendChild(div);
}

const paginationContainer = document.getElementById('pagination');


paginationContainer.innerHTML = '';

if (currentPage > 1) {
const prevButton = document.createElement('button');
prevButton.textContent = 'Previous';
prevButton.onclick = () => {
currentPage--;
displayRecords();
};
paginationContainer.appendChild(prevButton);
}

if (currentPage < totalPages) {


const nextButton = document.createElement('button');
nextButton.textContent = 'Next';
nextButton.onclick = () => {
currentPage++;
displayRecords();
};
paginationContainer.appendChild(nextButton);
}
}

function displayFollowUps() {
const followUpsContainer = document.getElementById('followUps');
followUpsContainer.innerHTML = '';
const today = new Date().toISOString().split('T')[0];
const followUps = records.filter(record => record.followUpDate ===
today && record.status === 'open');
followUps.forEach((record, index) => {
const div = document.createElement('div');
div.classList.add('follow-up');
div.innerHTML = `
<p><strong>Customer Name:</strong> ${record.customerName}</p>
<p><strong>Phone Number:</strong> ${record.phoneNumber}</p>
<p><strong>Date:</strong> ${record.date}</p>
<p><strong>Conversation:</strong> ${record.conversation}</p>
<p><strong>Product Name:</strong> ${record.productName}</p>
<p><strong>Price:</strong> ${record.price}</p>
<p><strong>Follow-up Date:</strong> ${record.followUpDate}</p>
<button onclick="markAsDone(${index})">Mark as Done</button>
<button onclick="markAsClosed(${index})">Close</button>
<button onclick="deleteRecord(${index})">Delete</button>
<button onclick="duplicateEntry(${index})">Duplicate
Entry</button>
`;
followUpsContainer.appendChild(div);
});
}

function markAsDone(index) {
records[index].status = 'done';
localStorage.setItem('records', JSON.stringify(records));
displayRecords();
displayFollowUps();
}

function markAsClosed(index) {
records[index].status = 'closed';
localStorage.setItem('records', JSON.stringify(records));
displayRecords();
displayFollowUps();
}

function deleteRecord(index) {
records.splice(index, 1);
localStorage.setItem('records', JSON.stringify(records));
displayRecords();
displayFollowUps();
}

function duplicateEntry(index) {
const record = records[index];
document.getElementById('customerName').value = record.customerName;
document.getElementById('phoneNumber').value = record.phoneNumber;
document.getElementById('date').value = record.date;
document.getElementById('conversation').value = record.conversation;
document.getElementById('productName').value = record.productName;
document.getElementById('price').value = record.price;
document.getElementById('followUpDate').value = '';
}

function clearForm() {
document.getElementById('customerName').value = '';
document.getElementById('phoneNumber').value = '';
document.getElementById('date').value = '';
document.getElementById('conversation').value = '';
document.getElementById('productName').value = '';
document.getElementById('price').value = '';
document.getElementById('followUpDate').value = '';
}

function downloadExcel() {
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += "Customer Name,Phone Number,Date,Conversation,Product
Name,Price,Follow-up Date,Status\n";
records.forEach(record => {
const row = [
record.customerName,
record.phoneNumber,
record.date,
record.conversation,
record.productName,
record.price,
record.followUpDate,
record.status
].join(",");
csvContent += row + "\n";
});

const encodedUri = encodeURI(csvContent);


const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "sales_records.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>

You might also like