Add Prettier for TypeScript formatting

- Install prettier
- Configure .prettierrc.json and .prettierignore
- Add npm scripts: format, format:check
- Add Makefile target: format-frontend
- Format all frontend files
This commit is contained in:
counterweight 2025-12-21 21:59:26 +01:00
parent 4b394b0698
commit 37de6f70e0
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
44 changed files with 906 additions and 856 deletions

View file

@ -17,12 +17,10 @@ let mockUser: { id: number; email: string; roles: string[]; permissions: string[
};
let mockIsLoading = false;
const mockLogout = vi.fn();
const mockHasPermission = vi.fn((permission: string) =>
mockUser?.permissions.includes(permission) ?? false
);
const mockHasRole = vi.fn((role: string) =>
mockUser?.roles.includes(role) ?? false
const mockHasPermission = vi.fn(
(permission: string) => mockUser?.permissions.includes(permission) ?? false
);
const mockHasRole = vi.fn((role: string) => mockUser?.roles.includes(role) ?? false);
vi.mock("../auth-context", () => ({
useAuth: () => ({
@ -53,12 +51,10 @@ beforeEach(() => {
permissions: ["view_audit"],
};
mockIsLoading = false;
mockHasPermission.mockImplementation((permission: string) =>
mockUser?.permissions.includes(permission) ?? false
);
mockHasRole.mockImplementation((role: string) =>
mockUser?.roles.includes(role) ?? false
mockHasPermission.mockImplementation(
(permission: string) => mockUser?.permissions.includes(permission) ?? false
);
mockHasRole.mockImplementation((role: string) => mockUser?.roles.includes(role) ?? false);
// Default: successful empty response
mockFetch.mockResolvedValue({
ok: true,
@ -142,7 +138,7 @@ describe("AuditPage", () => {
per_page: 10,
total_pages: 1,
};
const sumResponse = {
records: [],
total: 0,

View file

@ -42,9 +42,7 @@ export default function AuditPage() {
const fetchSumRecords = useCallback(async (page: number) => {
setSumError(null);
try {
const data = await api.get<PaginatedSumRecords>(
`/api/audit/sum?page=${page}&per_page=10`
);
const data = await api.get<PaginatedSumRecords>(`/api/audit/sum?page=${page}&per_page=10`);
setSumData(data);
} catch (err) {
setSumData(null);
@ -90,9 +88,7 @@ export default function AuditPage() {
<div style={styles.tableCard}>
<div style={styles.tableHeader}>
<h2 style={styles.tableTitle}>Counter Activity</h2>
<span style={styles.totalCount}>
{counterData?.total ?? 0} records
</span>
<span style={styles.totalCount}>{counterData?.total ?? 0} records</span>
</div>
<div style={styles.tableWrapper}>
<table style={styles.table}>
@ -107,20 +103,25 @@ export default function AuditPage() {
<tbody>
{counterError && (
<tr>
<td colSpan={4} style={styles.errorRow}>{counterError}</td>
<td colSpan={4} style={styles.errorRow}>
{counterError}
</td>
</tr>
)}
{!counterError && counterData?.records.map((record) => (
<tr key={record.id} style={styles.tr}>
<td style={styles.td}>{record.user_email}</td>
<td style={styles.tdNum}>{record.value_before}</td>
<td style={styles.tdNum}>{record.value_after}</td>
<td style={styles.tdDate}>{formatDate(record.created_at)}</td>
</tr>
))}
{!counterError &&
counterData?.records.map((record) => (
<tr key={record.id} style={styles.tr}>
<td style={styles.td}>{record.user_email}</td>
<td style={styles.tdNum}>{record.value_before}</td>
<td style={styles.tdNum}>{record.value_after}</td>
<td style={styles.tdDate}>{formatDate(record.created_at)}</td>
</tr>
))}
{!counterError && (!counterData || counterData.records.length === 0) && (
<tr>
<td colSpan={4} style={styles.emptyRow}>No records yet</td>
<td colSpan={4} style={styles.emptyRow}>
No records yet
</td>
</tr>
)}
</tbody>
@ -153,9 +154,7 @@ export default function AuditPage() {
<div style={styles.tableCard}>
<div style={styles.tableHeader}>
<h2 style={styles.tableTitle}>Sum Activity</h2>
<span style={styles.totalCount}>
{sumData?.total ?? 0} records
</span>
<span style={styles.totalCount}>{sumData?.total ?? 0} records</span>
</div>
<div style={styles.tableWrapper}>
<table style={styles.table}>
@ -171,21 +170,26 @@ export default function AuditPage() {
<tbody>
{sumError && (
<tr>
<td colSpan={5} style={styles.errorRow}>{sumError}</td>
<td colSpan={5} style={styles.errorRow}>
{sumError}
</td>
</tr>
)}
{!sumError && sumData?.records.map((record) => (
<tr key={record.id} style={styles.tr}>
<td style={styles.td}>{record.user_email}</td>
<td style={styles.tdNum}>{record.a}</td>
<td style={styles.tdNum}>{record.b}</td>
<td style={styles.tdResult}>{record.result}</td>
<td style={styles.tdDate}>{formatDate(record.created_at)}</td>
</tr>
))}
{!sumError &&
sumData?.records.map((record) => (
<tr key={record.id} style={styles.tr}>
<td style={styles.td}>{record.user_email}</td>
<td style={styles.tdNum}>{record.a}</td>
<td style={styles.tdNum}>{record.b}</td>
<td style={styles.tdResult}>{record.result}</td>
<td style={styles.tdDate}>{formatDate(record.created_at)}</td>
</tr>
))}
{!sumError && (!sumData || sumData.records.length === 0) && (
<tr>
<td colSpan={5} style={styles.emptyRow}>No records yet</td>
<td colSpan={5} style={styles.emptyRow}>
No records yet
</td>
</tr>
)}
</tbody>