{"id":2651,"date":"2026-01-25T20:39:24","date_gmt":"2026-01-25T20:39:24","guid":{"rendered":"https:\/\/malikskitchen.in\/?page_id=2651"},"modified":"2026-02-15T20:26:43","modified_gmt":"2026-02-15T20:26:43","slug":"clint-management-tools","status":"publish","type":"page","link":"https:\/\/malikskitchen.in\/index.php\/clint-management-tools\/","title":{"rendered":"Clint Management Tools"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n GST Client Management - Offline<\/title>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18.2.0\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18.2.0\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone@7.23.5\/babel.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\r\n <style>\r\n body { margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n \r\n <script type=\"text\/babel\">\r\n const { useState, useEffect } = React;\r\n\r\n \/\/ Simple storage helper\r\n const storage = {\r\n get: (key) => {\r\n const value = localStorage.getItem(key);\r\n return value ? JSON.parse(value) : null;\r\n },\r\n set: (key, value) => {\r\n localStorage.setItem(key, JSON.stringify(value));\r\n }\r\n };\r\n\r\n function App() {\r\n const [parties, setParties] = useState([]);\r\n const [showForm, setShowForm] = useState(false);\r\n const [editingId, setEditingId] = useState(null);\r\n const [showPassword, setShowPassword] = useState({});\r\n const [searchTerm, setSearchTerm] = useState('');\r\n const [activeFilter, setActiveFilter] = useState('all'); \/\/ all, active, inactive\r\n const [statusFilter, setStatusFilter] = useState('all'); \/\/ all, data-uploaded, gstr1-filed, gstr3b-filed\r\n const [paymentFilter, setPaymentFilter] = useState('all'); \/\/ all, due, completed\r\n const [filingTypeFilter, setFilingTypeFilter] = useState('all'); \/\/ all, nil, full, quarterly\r\n const [filingModeFilter, setFilingModeFilter] = useState('all'); \/\/ all, software, manual\r\n \r\n const [formData, setFormData] = useState({\r\n partyName: '',\r\n gstNumber: '',\r\n userId: '',\r\n password: '',\r\n accountStatus: 'active',\r\n filingType: 'nil',\r\n filingMode: 'software',\r\n igst: '0',\r\n cgst: '0',\r\n sgst: '0',\r\n dataUploaded: false,\r\n gstr1: false,\r\n gstr3b: false,\r\n paymentStatus: 'due',\r\n notes: ''\r\n });\r\n\r\n useEffect(() => {\r\n const data = storage.get('gst-parties');\r\n if (data) setParties(data);\r\n }, []);\r\n\r\n const saveData = (newParties) => {\r\n storage.set('gst-parties', newParties);\r\n setParties(newParties);\r\n };\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value, type, checked } = e.target;\r\n setFormData(prev => ({\r\n ...prev,\r\n [name]: type === 'checkbox' ? checked : value\r\n }));\r\n };\r\n\r\n const handleSubmit = (e) => {\r\n e.preventDefault();\r\n \r\n if (!formData.partyName || !formData.gstNumber || !formData.userId || !formData.password) {\r\n alert('\u0915\u0943\u092a\u092f\u093e \u0938\u092d\u0940 required fields \u092d\u0930\u0947\u0902');\r\n return;\r\n }\r\n\r\n const newParty = {\r\n id: editingId || Date.now(),\r\n ...formData,\r\n createdAt: editingId ? parties.find(p => p.id === editingId).createdAt : new Date().toISOString(),\r\n updatedAt: new Date().toISOString()\r\n };\r\n\r\n let newParties;\r\n if (editingId) {\r\n newParties = parties.map(p => p.id === editingId ? newParty : p);\r\n } else {\r\n newParties = [...parties, newParty];\r\n }\r\n\r\n saveData(newParties);\r\n resetForm();\r\n alert('\u2705 Data successfully saved!');\r\n };\r\n\r\n const handleEdit = (party) => {\r\n setFormData({\r\n partyName: party.partyName,\r\n gstNumber: party.gstNumber || '',\r\n userId: party.userId,\r\n password: party.password,\r\n accountStatus: party.accountStatus || 'active',\r\n filingType: party.filingType,\r\n filingMode: party.filingMode,\r\n igst: party.igst,\r\n cgst: party.cgst,\r\n sgst: party.sgst,\r\n dataUploaded: party.dataUploaded,\r\n gstr1: party.gstr1,\r\n gstr3b: party.gstr3b,\r\n paymentStatus: party.paymentStatus,\r\n notes: party.notes || ''\r\n });\r\n setEditingId(party.id);\r\n setShowForm(true);\r\n };\r\n\r\n const handleDelete = (id) => {\r\n if (confirm('\u0915\u094d\u092f\u093e \u0906\u092a \u0907\u0938 entry \u0915\u094b delete \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902?')) {\r\n const newParties = parties.filter(p => p.id !== id);\r\n saveData(newParties);\r\n }\r\n };\r\n\r\n const resetForm = () => {\r\n setFormData({\r\n partyName: '',\r\n gstNumber: '',\r\n userId: '',\r\n password: '',\r\n accountStatus: 'active',\r\n filingType: 'nil',\r\n filingMode: 'software',\r\n igst: '0',\r\n cgst: '0',\r\n sgst: '0',\r\n dataUploaded: false,\r\n gstr1: false,\r\n gstr3b: false,\r\n paymentStatus: 'due',\r\n notes: ''\r\n });\r\n setEditingId(null);\r\n setShowForm(false);\r\n };\r\n\r\n const togglePasswordVisibility = (id) => {\r\n setShowPassword(prev => ({\r\n ...prev,\r\n [id]: !prev[id]\r\n }));\r\n };\r\n\r\n const quickToggleField = (id, field) => {\r\n const updatedParties = parties.map(party => {\r\n if (party.id === id) {\r\n return { ...party, [field]: !party[field], updatedAt: new Date().toISOString() };\r\n }\r\n return party;\r\n });\r\n saveData(updatedParties);\r\n };\r\n\r\n const quickTogglePayment = (id) => {\r\n const updatedParties = parties.map(party => {\r\n if (party.id === id) {\r\n const newStatus = party.paymentStatus === 'completed' ? 'due' : 'completed';\r\n return { ...party, paymentStatus: newStatus, updatedAt: new Date().toISOString() };\r\n }\r\n return party;\r\n });\r\n saveData(updatedParties);\r\n };\r\n\r\n const getTotalTax = (party) => {\r\n const igst = parseFloat(party.igst) || 0;\r\n const cgst = parseFloat(party.cgst) || 0;\r\n const sgst = parseFloat(party.sgst) || 0;\r\n return igst + cgst + sgst;\r\n };\r\n\r\n \/\/ Export to Excel\r\n const exportToExcel = () => {\r\n if (parties.length === 0) {\r\n alert('\u0915\u094b\u0908 data export \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0928\u0939\u0940\u0902 \u0939\u0948!');\r\n return;\r\n }\r\n\r\n const exportData = parties.map(party => ({\r\n 'Party Name': party.partyName,\r\n 'GST Number': party.gstNumber || '',\r\n 'User ID': party.userId,\r\n 'Password': party.password,\r\n 'Account Status': party.accountStatus || 'active',\r\n 'Filing Type': party.filingType,\r\n 'Filing Mode': party.filingMode,\r\n 'IGST': party.igst,\r\n 'CGST': party.cgst,\r\n 'SGST': party.sgst,\r\n 'Total Tax': getTotalTax(party).toFixed(2),\r\n 'Data Uploaded': party.dataUploaded ? 'Yes' : 'No',\r\n 'GSTR-1 Filed': party.gstr1 ? 'Yes' : 'No',\r\n 'GSTR-3B Filed': party.gstr3b ? 'Yes' : 'No',\r\n 'Payment Status': party.paymentStatus,\r\n 'Notes': party.notes || '',\r\n 'Created At': new Date(party.createdAt).toLocaleString('hi-IN'),\r\n 'Updated At': new Date(party.updatedAt).toLocaleString('hi-IN')\r\n }));\r\n\r\n const ws = XLSX.utils.json_to_sheet(exportData);\r\n const wb = XLSX.utils.book_new();\r\n XLSX.utils.book_append_sheet(wb, ws, 'GST Clients');\r\n \r\n const fileName = `GST_Clients_${new Date().toISOString().split('T')[0]}.xlsx`;\r\n XLSX.writeFile(wb, fileName);\r\n alert('\u2705 Excel file successfully exported!');\r\n };\r\n\r\n \/\/ Import from Excel\r\n const importFromExcel = (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n\r\n const reader = new FileReader();\r\n reader.onload = (event) => {\r\n try {\r\n const data = new Uint8Array(event.target.result);\r\n const workbook = XLSX.read(data, { type: 'array' });\r\n const sheetName = workbook.SheetNames[0];\r\n const worksheet = workbook.Sheets[sheetName];\r\n const jsonData = XLSX.utils.sheet_to_json(worksheet);\r\n\r\n const importedParties = jsonData.map((row, index) => ({\r\n id: Date.now() + index,\r\n partyName: row['Party Name'] || '',\r\n gstNumber: row['GST Number'] || '',\r\n userId: row['User ID'] || '',\r\n password: row['Password'] || '',\r\n accountStatus: row['Account Status'] || 'active',\r\n filingType: row['Filing Type'] || 'nil',\r\n filingMode: row['Filing Mode'] || 'software',\r\n igst: String(row['IGST'] || '0'),\r\n cgst: String(row['CGST'] || '0'),\r\n sgst: String(row['SGST'] || '0'),\r\n dataUploaded: row['Data Uploaded'] === 'Yes',\r\n gstr1: row['GSTR-1 Filed'] === 'Yes',\r\n gstr3b: row['GSTR-3B Filed'] === 'Yes',\r\n paymentStatus: row['Payment Status'] || 'due',\r\n notes: row['Notes'] || '',\r\n createdAt: new Date().toISOString(),\r\n updatedAt: new Date().toISOString()\r\n }));\r\n\r\n if (confirm(`${importedParties.length} entries \u092e\u093f\u0932\u0940 \u0939\u0948\u0902\u0964 \u0915\u094d\u092f\u093e \u0906\u092a \u0907\u0928\u094d\u0939\u0947\u0902 existing data \u0915\u0947 \u0938\u093e\u0925 merge \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902?\\n\\nYes = Merge with existing\\nNo = Replace all data`)) {\r\n saveData([...parties, ...importedParties]);\r\n } else {\r\n saveData(importedParties);\r\n }\r\n \r\n alert('\u2705 Data successfully imported!');\r\n e.target.value = '';\r\n } catch (error) {\r\n alert('\u274c Error importing file. Please check the file format.');\r\n console.error(error);\r\n }\r\n };\r\n reader.readAsArrayBuffer(file);\r\n };\r\n\r\n \/\/ Filter parties based on all filters and search term\r\n const filteredParties = parties.filter(party => {\r\n \/\/ Search filter - includes notes now\r\n const matchesSearch = party.partyName.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n party.userId.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n (party.notes && party.notes.toLowerCase().includes(searchTerm.toLowerCase()));\r\n \r\n \/\/ Account status filter\r\n const matchesActiveFilter = activeFilter === 'all' || \r\n (activeFilter === 'active' && (party.accountStatus || 'active') === 'active') ||\r\n (activeFilter === 'inactive' && (party.accountStatus || 'active') === 'inactive');\r\n \r\n \/\/ Status filter (Data\/GSTR-1\/GSTR-3B)\r\n const matchesStatusFilter = statusFilter === 'all' ||\r\n (statusFilter === 'data-uploaded' && party.dataUploaded) ||\r\n (statusFilter === 'gstr1-filed' && party.gstr1) ||\r\n (statusFilter === 'gstr3b-filed' && party.gstr3b);\r\n \r\n \/\/ Payment filter\r\n const matchesPaymentFilter = paymentFilter === 'all' ||\r\n (paymentFilter === 'due' && party.paymentStatus === 'due') ||\r\n (paymentFilter === 'completed' && party.paymentStatus === 'completed');\r\n \r\n \/\/ Filing Type filter\r\n const matchesFilingTypeFilter = filingTypeFilter === 'all' ||\r\n party.filingType === filingTypeFilter;\r\n \r\n \/\/ Filing Mode filter\r\n const matchesFilingModeFilter = filingModeFilter === 'all' ||\r\n party.filingMode === filingModeFilter;\r\n \r\n return matchesSearch && matchesActiveFilter && matchesStatusFilter && \r\n matchesPaymentFilter && matchesFilingTypeFilter && matchesFilingModeFilter;\r\n });\r\n\r\n const stats = {\r\n total: parties.length,\r\n active: parties.filter(p => (p.accountStatus || 'active') === 'active').length,\r\n inactive: parties.filter(p => (p.accountStatus || 'active') === 'inactive').length,\r\n dataUploaded: parties.filter(p => p.dataUploaded).length,\r\n gstr1Filed: parties.filter(p => p.gstr1).length,\r\n gstr3bFiled: parties.filter(p => p.gstr3b).length,\r\n completed: parties.filter(p => p.paymentStatus === 'completed').length,\r\n pending: parties.filter(p => p.paymentStatus === 'due').length,\r\n nilFiling: parties.filter(p => p.filingType === 'nil').length,\r\n fullFiling: parties.filter(p => p.filingType === 'full').length,\r\n quarterlyFiling: parties.filter(p => p.filingType === 'quarterly').length,\r\n softwareMode: parties.filter(p => p.filingMode === 'software').length,\r\n manualMode: parties.filter(p => p.filingMode === 'manual').length,\r\n totalTax: parties.reduce((sum, p) => sum + getTotalTax(p), 0)\r\n };\r\n\r\n return (\r\n <div className=\"min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-4\">\r\n <div className=\"max-w-7xl mx-auto\">\r\n {\/* Header *\/}\r\n <div className=\"bg-white rounded-xl shadow-lg p-6 mb-6\">\r\n <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\">\r\n <div>\r\n <h1 className=\"text-3xl font-bold text-indigo-900\">\ud83d\udcca GST Client Management<\/h1>\r\n <p className=\"text-gray-600 mt-1\">Offline Data Management System<\/p>\r\n <\/div>\r\n <div className=\"flex flex-wrap gap-3\">\r\n <button\r\n onClick={exportToExcel}\r\n className=\"bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition shadow-md font-semibold text-sm\"\r\n >\r\n \ud83d\udce5 Export Excel\r\n <\/button>\r\n <label className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition shadow-md font-semibold text-sm cursor-pointer\">\r\n \ud83d\udce4 Import Excel\r\n <input\r\n type=\"file\"\r\n accept=\".xlsx,.xls\"\r\n onChange={importFromExcel}\r\n className=\"hidden\"\r\n \/>\r\n <\/label>\r\n <button\r\n onClick={() => setShowForm(!showForm)}\r\n className=\"bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition shadow-md font-semibold text-sm\"\r\n >\r\n {showForm ? '\u274c Cancel' : '\u2795 Add Client'}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Stats Dashboard *\/}\r\n <div className=\"grid grid-cols-2 md:grid-cols-6 gap-4 mb-6\">\r\n <div className=\"bg-white rounded-lg shadow p-4\">\r\n <p className=\"text-xs text-gray-600 mb-1\">Total Clients<\/p>\r\n <p className=\"text-2xl font-bold text-indigo-900\">{stats.total}<\/p>\r\n <\/div>\r\n <div className=\"bg-white rounded-lg shadow p-4\">\r\n <p className=\"text-xs text-gray-600 mb-1\">Active<\/p>\r\n <p className=\"text-2xl font-bold text-green-600\">{stats.active}<\/p>\r\n <\/div>\r\n <div className=\"bg-white rounded-lg shadow p-4\">\r\n <p className=\"text-xs text-gray-600 mb-1\">Inactive<\/p>\r\n <p className=\"text-2xl font-bold text-red-600\">{stats.inactive}<\/p>\r\n <\/div>\r\n <div className=\"bg-white rounded-lg shadow p-4\">\r\n <p className=\"text-xs text-gray-600 mb-1\">Payment Done<\/p>\r\n <p className=\"text-2xl font-bold text-green-600\">{stats.completed}<\/p>\r\n <\/div>\r\n <div className=\"bg-white rounded-lg shadow p-4\">\r\n <p className=\"text-xs text-gray-600 mb-1\">Payment Due<\/p>\r\n <p className=\"text-2xl font-bold text-orange-600\">{stats.pending}<\/p>\r\n <\/div>\r\n <div className=\"bg-white rounded-lg shadow p-4\">\r\n <p className=\"text-xs text-gray-600 mb-1\">Total Tax<\/p>\r\n <p className=\"text-2xl font-bold text-purple-600\">\u20b9{stats.totalTax.toFixed(2)}<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Add\/Edit Form *\/}\r\n {showForm && (\r\n <div className=\"bg-white rounded-xl shadow-lg p-6 mb-6\">\r\n <h2 className=\"text-2xl font-bold text-gray-800 mb-6\">\r\n {editingId ? '\u270f\ufe0f Edit Client' : '\u2795 Add New Client'}\r\n <\/h2>\r\n \r\n <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n {\/* Basic Information *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">\r\n Party Name <span className=\"text-red-500\">*<\/span>\r\n <\/label>\r\n <input\r\n type=\"text\"\r\n name=\"partyName\"\r\n value={formData.partyName}\r\n onChange={handleInputChange}\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\r\n required\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">\r\n GST Number <span className=\"text-red-500\">*<\/span>\r\n <\/label>\r\n <input\r\n type=\"text\"\r\n name=\"gstNumber\"\r\n value={formData.gstNumber}\r\n onChange={handleInputChange}\r\n placeholder=\"22AAAAA0000A1Z5\"\r\n maxLength=\"15\"\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent uppercase\"\r\n required\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">\r\n User ID <span className=\"text-red-500\">*<\/span>\r\n <\/label>\r\n <input\r\n type=\"text\"\r\n name=\"userId\"\r\n value={formData.userId}\r\n onChange={handleInputChange}\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\r\n required\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">\r\n Password <span className=\"text-red-500\">*<\/span>\r\n <\/label>\r\n <input\r\n type=\"password\"\r\n name=\"password\"\r\n value={formData.password}\r\n onChange={handleInputChange}\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\r\n required\r\n \/>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Account Status - Separate Row *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">\r\n Account Status <span className=\"text-red-500\">*<\/span>\r\n <\/label>\r\n <select\r\n name=\"accountStatus\"\r\n value={formData.accountStatus}\r\n onChange={handleInputChange}\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n >\r\n <option value=\"active\">\ud83d\udfe2 Active<\/option>\r\n <option value=\"inactive\">\ud83d\udd34 Inactive<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Filing Details *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">Filing Type<\/label>\r\n <select\r\n name=\"filingType\"\r\n value={formData.filingType}\r\n onChange={handleInputChange}\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n >\r\n <option value=\"nil\">Nil Filing<\/option>\r\n <option value=\"full\">Full Filing<\/option>\r\n <option value=\"quarterly\">Quarterly Filing<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">Filing Mode<\/label>\r\n <select\r\n name=\"filingMode\"\r\n value={formData.filingMode}\r\n onChange={handleInputChange}\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n >\r\n <option value=\"software\">Software<\/option>\r\n <option value=\"manual\">Manual<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Tax Details *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">IGST (\u20b9)<\/label>\r\n <input\r\n type=\"number\"\r\n name=\"igst\"\r\n value={formData.igst}\r\n onChange={handleInputChange}\r\n step=\"0.01\"\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">CGST (\u20b9)<\/label>\r\n <input\r\n type=\"number\"\r\n name=\"cgst\"\r\n value={formData.cgst}\r\n onChange={handleInputChange}\r\n step=\"0.01\"\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">SGST (\u20b9)<\/label>\r\n <input\r\n type=\"number\"\r\n name=\"sgst\"\r\n value={formData.sgst}\r\n onChange={handleInputChange}\r\n step=\"0.01\"\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Status Checkboxes *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div className=\"space-y-3\">\r\n <label className=\"flex items-center gap-3 cursor-pointer\">\r\n <input\r\n type=\"checkbox\"\r\n name=\"dataUploaded\"\r\n checked={formData.dataUploaded}\r\n onChange={handleInputChange}\r\n className=\"w-5 h-5 text-indigo-600 rounded\"\r\n \/>\r\n <span className=\"text-sm font-medium text-gray-700\">Data Uploaded<\/span>\r\n <\/label>\r\n\r\n <label className=\"flex items-center gap-3 cursor-pointer\">\r\n <input\r\n type=\"checkbox\"\r\n name=\"gstr1\"\r\n checked={formData.gstr1}\r\n onChange={handleInputChange}\r\n className=\"w-5 h-5 text-indigo-600 rounded\"\r\n \/>\r\n <span className=\"text-sm font-medium text-gray-700\">GSTR-1 Filed<\/span>\r\n <\/label>\r\n\r\n <label className=\"flex items-center gap-3 cursor-pointer\">\r\n <input\r\n type=\"checkbox\"\r\n name=\"gstr3b\"\r\n checked={formData.gstr3b}\r\n onChange={handleInputChange}\r\n className=\"w-5 h-5 text-indigo-600 rounded\"\r\n \/>\r\n <span className=\"text-sm font-medium text-gray-700\">GSTR-3B Filed<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">Payment Status<\/label>\r\n <select\r\n name=\"paymentStatus\"\r\n value={formData.paymentStatus}\r\n onChange={handleInputChange}\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n >\r\n <option value=\"due\">Payment Due<\/option>\r\n <option value=\"completed\">Payment Completed<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Notes *\/}\r\n <div>\r\n <label className=\"block text-sm font-semibold text-gray-700 mb-2\">Notes \/ Remarks<\/label>\r\n <textarea\r\n name=\"notes\"\r\n value={formData.notes}\r\n onChange={handleInputChange}\r\n rows=\"3\"\r\n placeholder=\"Add any additional notes...\"\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n \/>\r\n <\/div>\r\n\r\n {\/* Submit Buttons *\/}\r\n <div className=\"flex gap-3 pt-4 border-t\">\r\n <button\r\n type=\"submit\"\r\n className=\"bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition shadow-md font-semibold\"\r\n >\r\n \ud83d\udcbe {editingId ? 'Update Client' : 'Save Client'}\r\n <\/button>\r\n <button\r\n type=\"button\"\r\n onClick={resetForm}\r\n className=\"bg-gray-500 text-white px-6 py-3 rounded-lg hover:bg-gray-600 transition\"\r\n >\r\n Cancel\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n )}\r\n\r\n {\/* Search and Filter *\/}\r\n <div className=\"bg-white rounded-xl shadow-lg p-6 mb-6\">\r\n <div className=\"space-y-4\">\r\n {\/* Search *\/}\r\n <div>\r\n <input\r\n type=\"text\"\r\n placeholder=\"\ud83d\udd0d Search by party name, user ID, or notes...\"\r\n value={searchTerm}\r\n onChange={(e) => setSearchTerm(e.target.value)}\r\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\r\n \/>\r\n <\/div>\r\n \r\n {\/* Filter Dropdowns *\/}\r\n <div className=\"grid grid-cols-2 md:grid-cols-5 gap-3\">\r\n {\/* Account Status Filter *\/}\r\n <div>\r\n <label className=\"block text-xs font-semibold text-gray-700 mb-1\">Account Status<\/label>\r\n <select\r\n value={activeFilter}\r\n onChange={(e) => setActiveFilter(e.target.value)}\r\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm\"\r\n >\r\n <option value=\"all\">All ({stats.total})<\/option>\r\n <option value=\"active\">\ud83d\udfe2 Active ({stats.active})<\/option>\r\n <option value=\"inactive\">\ud83d\udd34 Inactive ({stats.inactive})<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n {\/* Filing Status Filter *\/}\r\n <div>\r\n <label className=\"block text-xs font-semibold text-gray-700 mb-1\">Filing Status<\/label>\r\n <select\r\n value={statusFilter}\r\n onChange={(e) => setStatusFilter(e.target.value)}\r\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm\"\r\n >\r\n <option value=\"all\">All<\/option>\r\n <option value=\"data-uploaded\">\ud83d\udce4 Data Uploaded ({stats.dataUploaded})<\/option>\r\n <option value=\"gstr1-filed\">\ud83d\udccb GSTR-1 Filed ({stats.gstr1Filed})<\/option>\r\n <option value=\"gstr3b-filed\">\ud83d\udcdd GSTR-3B Filed ({stats.gstr3bFiled})<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n {\/* Payment Status Filter *\/}\r\n <div>\r\n <label className=\"block text-xs font-semibold text-gray-700 mb-1\">Payment Status<\/label>\r\n <select\r\n value={paymentFilter}\r\n onChange={(e) => setPaymentFilter(e.target.value)}\r\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm\"\r\n >\r\n <option value=\"all\">All<\/option>\r\n <option value=\"due\">\u23f3 Payment Due ({stats.pending})<\/option>\r\n <option value=\"completed\">\u2705 Payment Done ({stats.completed})<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n {\/* Filing Type Filter *\/}\r\n <div>\r\n <label className=\"block text-xs font-semibold text-gray-700 mb-1\">Filing Type<\/label>\r\n <select\r\n value={filingTypeFilter}\r\n onChange={(e) => setFilingTypeFilter(e.target.value)}\r\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm\"\r\n >\r\n <option value=\"all\">All<\/option>\r\n <option value=\"nil\">Nil Filing ({stats.nilFiling})<\/option>\r\n <option value=\"full\">Full Filing ({stats.fullFiling})<\/option>\r\n <option value=\"quarterly\">Quarterly ({stats.quarterlyFiling})<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n {\/* Filing Mode Filter *\/}\r\n <div>\r\n <label className=\"block text-xs font-semibold text-gray-700 mb-1\">Filing Mode<\/label>\r\n <select\r\n value={filingModeFilter}\r\n onChange={(e) => setFilingModeFilter(e.target.value)}\r\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm\"\r\n >\r\n <option value=\"all\">All<\/option>\r\n <option value=\"software\">\ud83d\udcbb Software ({stats.softwareMode})<\/option>\r\n <option value=\"manual\">\u270d\ufe0f Manual ({stats.manualMode})<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Filtered Results Count & Clear Filters *\/}\r\n <div className=\"flex justify-between items-center pt-2 border-t\">\r\n <div className=\"text-sm font-semibold text-indigo-900\">\r\n \ud83d\udccb Showing <span className=\"text-lg text-indigo-600\">{filteredParties.length}<\/span> of {stats.total} clients\r\n <\/div>\r\n {(activeFilter !== 'all' || statusFilter !== 'all' || paymentFilter !== 'all' || \r\n filingTypeFilter !== 'all' || filingModeFilter !== 'all' || searchTerm !== '') && (\r\n <button\r\n onClick={() => {\r\n setActiveFilter('all');\r\n setStatusFilter('all');\r\n setPaymentFilter('all');\r\n setFilingTypeFilter('all');\r\n setFilingModeFilter('all');\r\n setSearchTerm('');\r\n }}\r\n className=\"px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition text-sm font-semibold\"\r\n >\r\n \ud83d\udd04 Clear All Filters\r\n <\/button>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Data Table *\/}\r\n <div className=\"bg-white rounded-xl shadow-lg overflow-hidden\">\r\n {filteredParties.length === 0 ? (\r\n <div className=\"text-center py-16 px-4\">\r\n <p className=\"text-xl text-gray-600 mb-2\">\r\n {parties.length === 0 ? '\ud83d\udccb No clients added yet' : '\ud83d\udd0d No clients found'}\r\n <\/p>\r\n <p className=\"text-sm text-gray-500\">\r\n {parties.length === 0 ? 'Click \"Add Client\" to get started' : 'Try different search terms or filters'}\r\n <\/p>\r\n <\/div>\r\n ) : (\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full\">\r\n <thead className=\"bg-indigo-600 text-white\">\r\n <tr>\r\n <th className=\"px-4 py-3 text-left text-sm font-semibold\">Status<\/th>\r\n <th className=\"px-4 py-3 text-left text-sm font-semibold\">Party Name<\/th>\r\n <th className=\"px-4 py-3 text-left text-sm font-semibold\">Credentials<\/th>\r\n <th className=\"px-4 py-3 text-left text-sm font-semibold\">Filing Info<\/th>\r\n <th className=\"px-4 py-3 text-right text-sm font-semibold\">Tax Details<\/th>\r\n <th className=\"px-4 py-3 text-center text-sm font-semibold\">Filing Status<\/th>\r\n <th className=\"px-4 py-3 text-center text-sm font-semibold\">Payment<\/th>\r\n <th className=\"px-4 py-3 text-center text-sm font-semibold\">Actions<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"divide-y divide-gray-200\">\r\n {filteredParties.map((party) => (\r\n <tr key={party.id} className=\"hover:bg-gray-50\">\r\n <td className=\"px-4 py-4 text-center\">\r\n <span className={`inline-block px-3 py-1 rounded-full text-xs font-bold ${\r\n (party.accountStatus || 'active') === 'active'\r\n ? 'bg-green-100 text-green-800'\r\n : 'bg-red-100 text-red-800'\r\n }`}>\r\n {(party.accountStatus || 'active') === 'active' ? '\ud83d\udfe2' : '\ud83d\udd34'}\r\n <\/span>\r\n <\/td>\r\n \r\n <td className=\"px-4 py-4\">\r\n <div className=\"font-medium text-gray-900\">{party.partyName}<\/div>\r\n {party.gstNumber && (\r\n <div className=\"text-xs text-gray-600 mt-1 font-mono\">\r\n GST: {party.gstNumber}\r\n <\/div>\r\n )}\r\n {party.notes && (\r\n <div className=\"text-xs text-gray-500 mt-1 italic\">\r\n {party.notes.substring(0, 50)}{party.notes.length > 50 ? '...' : ''}\r\n <\/div>\r\n )}\r\n <\/td>\r\n \r\n <td className=\"px-4 py-4\">\r\n <div className=\"text-sm text-gray-700\">\r\n <div className=\"font-medium\">ID: {party.userId}<\/div>\r\n <div className=\"flex items-center gap-2 mt-1\">\r\n <span className=\"text-xs\">\r\n {showPassword[party.id] ? party.password : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}\r\n <\/span>\r\n <button\r\n onClick={() => togglePasswordVisibility(party.id)}\r\n className=\"text-indigo-600 hover:text-indigo-800 text-xs\"\r\n >\r\n {showPassword[party.id] ? '\ud83d\ude48' : '\ud83d\udc41\ufe0f'}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n \r\n <td className=\"px-4 py-4\">\r\n <div className=\"space-y-1\">\r\n <span className=\"inline-block px-2 py-1 rounded text-xs font-semibold bg-blue-100 text-blue-800 capitalize\">\r\n {party.filingType}\r\n <\/span>\r\n <div className=\"text-xs text-gray-600 capitalize\">\r\n Mode: {party.filingMode}\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n \r\n <td className=\"px-4 py-4 text-right\">\r\n <div className=\"text-sm space-y-1\">\r\n <div className=\"text-gray-600\">IGST: \u20b9{parseFloat(party.igst || 0).toFixed(2)}<\/div>\r\n <div className=\"text-gray-600\">CGST: \u20b9{parseFloat(party.cgst || 0).toFixed(2)}<\/div>\r\n <div className=\"text-gray-600\">SGST: \u20b9{parseFloat(party.sgst || 0).toFixed(2)}<\/div>\r\n <div className=\"font-bold text-indigo-900 pt-1 border-t\">\r\n Total: \u20b9{getTotalTax(party).toFixed(2)}\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n \r\n <td className=\"px-4 py-4\">\r\n <div className=\"space-y-2\">\r\n <label className=\"flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-1 rounded\">\r\n <input\r\n type=\"checkbox\"\r\n checked={party.dataUploaded}\r\n onChange={() => quickToggleField(party.id, 'dataUploaded')}\r\n className=\"w-4 h-4 text-green-600 rounded cursor-pointer\"\r\n \/>\r\n <span className={`text-xs font-medium ${party.dataUploaded ? 'text-green-600' : 'text-gray-400'}`}>\r\n Data Uploaded\r\n <\/span>\r\n <\/label>\r\n\r\n <label className=\"flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-1 rounded\">\r\n <input\r\n type=\"checkbox\"\r\n checked={party.gstr1}\r\n onChange={() => quickToggleField(party.id, 'gstr1')}\r\n className=\"w-4 h-4 text-green-600 rounded cursor-pointer\"\r\n \/>\r\n <span className={`text-xs font-medium ${party.gstr1 ? 'text-green-600' : 'text-gray-400'}`}>\r\n GSTR-1 Filed\r\n <\/span>\r\n <\/label>\r\n\r\n <label className=\"flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-1 rounded\">\r\n <input\r\n type=\"checkbox\"\r\n checked={party.gstr3b}\r\n onChange={() => quickToggleField(party.id, 'gstr3b')}\r\n className=\"w-4 h-4 text-green-600 rounded cursor-pointer\"\r\n \/>\r\n <span className={`text-xs font-medium ${party.gstr3b ? 'text-green-600' : 'text-gray-400'}`}>\r\n GSTR-3B Filed\r\n <\/span>\r\n <\/label>\r\n <\/div>\r\n <\/td>\r\n \r\n <td className=\"px-4 py-4 text-center\">\r\n <button\r\n onClick={() => quickTogglePayment(party.id)}\r\n className={`inline-block px-3 py-1 rounded-full text-xs font-semibold cursor-pointer transition hover:scale-105 ${\r\n party.paymentStatus === 'completed' \r\n ? 'bg-green-100 text-green-800 hover:bg-green-200' \r\n : 'bg-orange-100 text-orange-800 hover:bg-orange-200'\r\n }`}\r\n title=\"Click to toggle payment status\"\r\n >\r\n {party.paymentStatus === 'completed' ? '\u2705 Done' : '\u23f3 Due'}\r\n <\/button>\r\n <\/td>\r\n \r\n <td className=\"px-4 py-4\">\r\n <div className=\"flex justify-center gap-2\">\r\n <button\r\n onClick={() => handleEdit(party)}\r\n className=\"text-blue-600 hover:text-blue-800 p-2 hover:bg-blue-50 rounded transition\"\r\n title=\"Edit\"\r\n >\r\n \u270f\ufe0f\r\n <\/button>\r\n <button\r\n onClick={() => handleDelete(party.id)}\r\n className=\"text-red-600 hover:text-red-800 p-2 hover:bg-red-50 rounded transition\"\r\n title=\"Delete\"\r\n >\r\n \ud83d\uddd1\ufe0f\r\n <\/button>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Render the app\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>GST Client Management – Offline<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2651","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=2651"}],"version-history":[{"count":20,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2651\/revisions"}],"predecessor-version":[{"id":3149,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2651\/revisions\/3149"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}