# Mobile-Friendly Google Sheet Dashboard
“`html
Complaint Dashboard
const sheetId = "1QE_S2SfLFE3MSbCYsNBPpoRUTB1Wedz3fkTIe6DVJig"; const sheetName = "Sheet1";
const url = `https://opensheet.elk.sh/${sheetId}/${sheetName}`;
let originalData = [];
async function loadSheetData(){
try{
const response = await fetch(url); originalData = await response.json();
populateFilters(originalData); applyFilters();
}catch(error){ console.error(error); } }
function populateFilters(data){
const categorySet = new Set(); const statusSet = new Set();
data.forEach(row => {
if(row.Category){ categorySet.add(row.Category); }
if(row.Status){ statusSet.add(row.Status); }
});
const categoryFilter = document.getElementById("categoryFilter"); const statusFilter = document.getElementById("statusFilter");
categoryFilter.innerHTML = ``; statusFilter.innerHTML = ``;
categorySet.forEach(item => { categoryFilter.innerHTML += ``; });
statusSet.forEach(item => { statusFilter.innerHTML += ``; });
}
function applyFilters(){
const search = document.getElementById("searchInput") .value.toLowerCase();
const category = document.getElementById("categoryFilter") .value;
const status = document.getElementById("statusFilter") .value;
const filtered = originalData.filter(row => {
const matchesSearch = Object.values(row).some(value => String(value) .toLowerCase() .includes(search) );
const matchesCategory = !category || row.Category === category;
const matchesStatus = !status || row.Status === status;
return matchesSearch && matchesCategory && matchesStatus;
});
renderCards(filtered); }
function renderCards(data){
const container = document.getElementById("dataContainer");
if(data.length === 0){
container.innerHTML = "
No Data Found
"; return; }
let html = "";
data.forEach((row, index) => {
html += `
`;
});
container.innerHTML = html; }
function toggleDetails(index){
const details = document.getElementById(`details-${index}`);
if(details.style.display === "block"){ details.style.display = "none"; }else{ details.style.display = "block"; } }
function clearFilters(){
document.getElementById("searchInput").value = ""; document.getElementById("categoryFilter").value = ""; document.getElementById("statusFilter").value = "";
renderCards(originalData); }
// Events
document.getElementById("searchInput") .addEventListener("keyup", applyFilters);
document.getElementById("categoryFilter") .addEventListener("change", applyFilters);
document.getElementById("statusFilter") .addEventListener("change", applyFilters);
// Load Data loadSheetData();
// Auto refresh every 10 seconds setInterval(loadSheetData, 10000);
