diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 000000000..1b997d844
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,8 @@
+{
+ "permissions": {
+ "allow": [
+ "Bash(git checkout feature/ticket-dashboard)",
+ "Bash(npx react-scripts build)"
+ ]
+ }
+}
diff --git a/csharp/App/Backend/DataTypes/Ticket.cs b/csharp/App/Backend/DataTypes/Ticket.cs
index 53659e3f0..ef3ca3658 100644
--- a/csharp/App/Backend/DataTypes/Ticket.cs
+++ b/csharp/App/Backend/DataTypes/Ticket.cs
@@ -4,7 +4,24 @@ namespace InnovEnergy.App.Backend.DataTypes;
public enum TicketStatus { Open = 0, InProgress = 1, Escalated = 2, Resolved = 3, Closed = 4 }
public enum TicketPriority { Critical = 0, High = 1, Medium = 2, Low = 3 }
-public enum TicketCategory { Hardware = 0, Software = 1, DataApi = 2, UserAccess = 3 }
+public enum TicketCategory { Hardware = 0, Software = 1, Network = 2, UserAccess = 3, Firmware = 4 }
+
+public enum TicketSubCategory
+{
+ General = 0,
+ Other = 99,
+ // Hardware (1xx)
+ Battery = 100, Inverter = 101, Cable = 102, Gateway = 103,
+ Metering = 104, Cooling = 105, PvSolar = 106, Safety = 107,
+ // Software (2xx)
+ Backend = 200, Frontend = 201, Database = 202, Api = 203,
+ // Network (3xx)
+ Connectivity = 300, VpnAccess = 301, S3Storage = 302,
+ // UserAccess (4xx)
+ Permissions = 400, Login = 401,
+ // Firmware (5xx)
+ BatteryFirmware = 500, InverterFirmware = 501, ControllerFirmware = 502
+}
public enum TicketSource { Manual = 0, AutoAlert = 1, Email = 2, Api = 3 }
public class Ticket
@@ -17,6 +34,7 @@ public class Ticket
[Indexed] public Int32 Status { get; set; } = (Int32)TicketStatus.Open;
public Int32 Priority { get; set; } = (Int32)TicketPriority.Medium;
public Int32 Category { get; set; } = (Int32)TicketCategory.Hardware;
+ public Int32 SubCategory { get; set; } = (Int32)TicketSubCategory.General;
public Int32 Source { get; set; } = (Int32)TicketSource.Manual;
[Indexed] public Int64 InstallationId { get; set; }
diff --git a/typescript/frontend-marios2/src/App.tsx b/typescript/frontend-marios2/src/App.tsx
index 3ff590030..19e054b97 100644
--- a/typescript/frontend-marios2/src/App.tsx
+++ b/typescript/frontend-marios2/src/App.tsx
@@ -23,6 +23,7 @@ import SalidomoInstallationTabs from './content/dashboards/SalidomoInstallations
import SodioHomeInstallationTabs from './content/dashboards/SodiohomeInstallations';
import { ProductIdContext } from './contexts/ProductIdContextProvider';
import { TourProvider } from './contexts/TourContext';
+import Tickets from './content/dashboards/Tickets';
function App() {
const context = useContext(UserContext);
@@ -236,6 +237,7 @@ function App() {
}
/>
+ } />
} />
= {
+ 1: [
+ { value: 1, label: 'Cerbo' },
+ { value: 2, label: 'Venus' }
+ ],
+ 2: [
+ { value: 3, label: 'Growatt' },
+ { value: 4, label: 'Sinexcel' }
+ ]
+};
+
+const categoryLabels: Record = {
+ [TicketCategory.Hardware]: 'Hardware',
+ [TicketCategory.Software]: 'Software',
+ [TicketCategory.Network]: 'Network',
+ [TicketCategory.UserAccess]: 'User Access',
+ [TicketCategory.Firmware]: 'Firmware'
+};
+
+interface Props {
+ open: boolean;
+ onClose: () => void;
+ onCreated: () => void;
+}
+
+function CreateTicketModal({ open, onClose, onCreated }: Props) {
+ const [subject, setSubject] = useState('');
+ const [selectedProduct, setSelectedProduct] = useState('');
+ const [selectedDevice, setSelectedDevice] = useState('');
+ const [allInstallations, setAllInstallations] = useState([]);
+ const [selectedInstallation, setSelectedInstallation] =
+ useState(null);
+ const [loadingInstallations, setLoadingInstallations] = useState(false);
+ const [priority, setPriority] = useState(TicketPriority.Medium);
+ const [category, setCategory] = useState(TicketCategory.Hardware);
+ const [subCategory, setSubCategory] = useState(
+ TicketSubCategory.General
+ );
+ const [description, setDescription] = useState('');
+ const [error, setError] = useState('');
+ const [submitting, setSubmitting] = useState(false);
+
+ const hasDeviceOptions =
+ selectedProduct !== '' && selectedProduct in deviceOptionsByProduct;
+
+ useEffect(() => {
+ if (selectedProduct === '') {
+ setAllInstallations([]);
+ setSelectedInstallation(null);
+ setSelectedDevice('');
+ return;
+ }
+ setLoadingInstallations(true);
+ setSelectedInstallation(null);
+ setSelectedDevice('');
+ axiosConfig
+ .get('/GetAllInstallationsFromProduct', {
+ params: { product: selectedProduct }
+ })
+ .then((res) => {
+ const data = res.data;
+ if (Array.isArray(data)) {
+ setAllInstallations(
+ data.map((item: any) => ({
+ id: item.id,
+ name: item.name,
+ device: item.device
+ }))
+ );
+ }
+ })
+ .catch(() => setAllInstallations([]))
+ .finally(() => setLoadingInstallations(false));
+ }, [selectedProduct]);
+
+ useEffect(() => {
+ setSelectedInstallation(null);
+ }, [selectedDevice]);
+
+ useEffect(() => {
+ setSubCategory(TicketSubCategory.General);
+ }, [category]);
+
+ const filteredInstallations = useMemo(() => {
+ if (!hasDeviceOptions || selectedDevice === '') return allInstallations;
+ return allInstallations.filter((inst) => inst.device === selectedDevice);
+ }, [allInstallations, selectedDevice, hasDeviceOptions]);
+
+ const installationReady =
+ selectedProduct !== '' && (!hasDeviceOptions || selectedDevice !== '');
+
+ const resetForm = () => {
+ setSubject('');
+ setSelectedProduct('');
+ setSelectedDevice('');
+ setAllInstallations([]);
+ setSelectedInstallation(null);
+ setPriority(TicketPriority.Medium);
+ setCategory(TicketCategory.Hardware);
+ setSubCategory(TicketSubCategory.General);
+ setDescription('');
+ setError('');
+ };
+
+ const handleSubmit = () => {
+ if (!subject.trim() || !selectedInstallation) return;
+ setSubmitting(true);
+ setError('');
+
+ axiosConfig
+ .post('/CreateTicket', {
+ subject,
+ description,
+ installationId: selectedInstallation.id,
+ priority,
+ category,
+ subCategory
+ })
+ .then(() => {
+ resetForm();
+ onCreated();
+ onClose();
+ })
+ .catch(() => setError('Failed to create ticket.'))
+ .finally(() => setSubmitting(false));
+ };
+
+ const availableSubCategories = subCategoriesByCategory[category] ?? [0];
+
+ return (
+
+ );
+}
+
+export default CreateTicketModal;
diff --git a/typescript/frontend-marios2/src/content/dashboards/Tickets/TicketList.tsx b/typescript/frontend-marios2/src/content/dashboards/Tickets/TicketList.tsx
new file mode 100644
index 000000000..1c4a85361
--- /dev/null
+++ b/typescript/frontend-marios2/src/content/dashboards/Tickets/TicketList.tsx
@@ -0,0 +1,241 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Alert,
+ Box,
+ Button,
+ Chip,
+ Container,
+ FormControl,
+ InputLabel,
+ MenuItem,
+ Select,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ TextField,
+ Typography
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import { FormattedMessage } from 'react-intl';
+import axiosConfig from 'src/Resources/axiosConfig';
+import {
+ Ticket,
+ TicketStatus,
+ TicketPriority,
+ TicketCategory,
+ TicketSubCategory,
+ subCategoryLabels
+} from 'src/interfaces/TicketTypes';
+import Footer from 'src/components/Footer';
+import CreateTicketModal from './CreateTicketModal';
+
+const statusLabels: Record = {
+ [TicketStatus.Open]: 'Open',
+ [TicketStatus.InProgress]: 'In Progress',
+ [TicketStatus.Escalated]: 'Escalated',
+ [TicketStatus.Resolved]: 'Resolved',
+ [TicketStatus.Closed]: 'Closed'
+};
+
+const statusColors: Record = {
+ [TicketStatus.Open]: 'error',
+ [TicketStatus.InProgress]: 'warning',
+ [TicketStatus.Escalated]: 'error',
+ [TicketStatus.Resolved]: 'success',
+ [TicketStatus.Closed]: 'default'
+};
+
+const priorityLabels: Record = {
+ [TicketPriority.Critical]: 'Critical',
+ [TicketPriority.High]: 'High',
+ [TicketPriority.Medium]: 'Medium',
+ [TicketPriority.Low]: 'Low'
+};
+
+const categoryLabels: Record = {
+ [TicketCategory.Hardware]: 'Hardware',
+ [TicketCategory.Software]: 'Software',
+ [TicketCategory.Network]: 'Network',
+ [TicketCategory.UserAccess]: 'User Access',
+ [TicketCategory.Firmware]: 'Firmware'
+};
+
+function TicketList() {
+ const [tickets, setTickets] = useState([]);
+ const [search, setSearch] = useState('');
+ const [statusFilter, setStatusFilter] = useState('');
+ const [createOpen, setCreateOpen] = useState(false);
+ const [error, setError] = useState('');
+
+ const fetchTickets = () => {
+ axiosConfig
+ .get('/GetAllTickets')
+ .then((res) => setTickets(res.data))
+ .catch(() => setError('Failed to load tickets'));
+ };
+
+ useEffect(() => {
+ fetchTickets();
+ }, []);
+
+ const filtered = tickets.filter((t) => {
+ const matchesSearch =
+ search === '' ||
+ t.subject.toLowerCase().includes(search.toLowerCase()) ||
+ t.description.toLowerCase().includes(search.toLowerCase());
+ const matchesStatus = statusFilter === '' || t.status === statusFilter;
+ return matchesSearch && matchesStatus;
+ });
+
+ return (
+
+
+
+
+
+
+ }
+ onClick={() => setCreateOpen(true)}
+ >
+
+
+
+
+
+ }
+ value={search}
+ onChange={(e) => setSearch(e.target.value)}
+ sx={{ minWidth: 250 }}
+ />
+
+
+
+
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {filtered.length === 0 && !error ? (
+
+
+
+ ) : (
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {filtered.map((ticket) => (
+
+ {ticket.id}
+ {ticket.subject}
+
+
+
+ {priorityLabels[ticket.priority] ?? '-'}
+
+ {categoryLabels[ticket.category] ?? '-'}
+ {ticket.subCategory !== TicketSubCategory.General &&
+ ` — ${subCategoryLabels[ticket.subCategory] ?? ''}`}
+
+
+ {new Date(ticket.createdAt).toLocaleDateString()}
+
+
+ ))}
+
+
+
+ )}
+
+ setCreateOpen(false)}
+ onCreated={fetchTickets}
+ />
+
+
+
+
+ }
+ >
+
+
+
+
)}