Project Init

apps/backoffice/src/app/features/item/api/item-api.ts

@@ -0,0 +1,39 @@
+import { baseApi } from '@ema-platform/api';
+
+export interface Item {
+  id: string;
+  name: string;
+  description: string | null;
+  status: 'DRAFT' | 'ACTIVE' | 'ARCHIVED';
+  createdAt: string;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+const itemApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getItems: builder.query<PaginatedResponse<Item>, { page?: number; limit?: number }>({
+      query: ({ page = 1, limit = 20 } = {}) => ({
+        url: '/items',
+        params: { page, limit },
+      }),
+      providesTags: ['Api'],
+    }),
+    createItem: builder.mutation<Item, { name: string; description?: string }>({
+      query: (body) => ({ url: '/items', method: 'POST', body }),
+      invalidatesTags: ['Api'],
+    }),
+    deleteItem: builder.mutation<void, string>({
+      query: (id) => ({ url: `/items/${id}`, method: 'DELETE' }),
+      invalidatesTags: ['Api'],
+    }),
+  }),
+  overrideExisting: false,
+});
+
+export const { useGetItemsQuery, useCreateItemMutation, useDeleteItemMutation } = itemApi;

apps/backoffice/src/app/features/item/components/ItemTable.tsx

@@ -0,0 +1,60 @@
+import { Table, Badge, ActionIcon, Text } from '@mantine/core';
+import { IconTrash } from '@tabler/icons-react';
+import { useGetItemsQuery, useDeleteItemMutation, type Item } from '../api/item-api';
+import { notify } from '@ema-platform/ui';
+
+const STATUS_COLORS: Record<Item['status'], string> = {
+  DRAFT: 'gray',
+  ACTIVE: 'green',
+  ARCHIVED: 'orange',
+};
+
+export function ItemTable() {
+  const { data, isLoading } = useGetItemsQuery({});
+  const [deleteItem] = useDeleteItemMutation();
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteItem(id).unwrap();
+      notify.success('Item deleted');
+    } catch {
+      notify.error('Failed to delete item');
+    }
+  };
+
+  if (isLoading) return <Text>Loading...</Text>;
+  if (!data?.data.length) return <Text c="dimmed">No items found.</Text>;
+
+  return (
+    <Table striped highlightOnHover>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Status</Table.Th>
+          <Table.Th>Created</Table.Th>
+          <Table.Th />
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {data.data.map((item) => (
+          <Table.Tr key={item.id}>
+            <Table.Td>{item.name}</Table.Td>
+            <Table.Td>
+              <Badge color={STATUS_COLORS[item.status]}>{item.status}</Badge>
+            </Table.Td>
+            <Table.Td>{new Date(item.createdAt).toLocaleDateString()}</Table.Td>
+            <Table.Td>
+              <ActionIcon
+                color="red"
+                variant="subtle"
+                onClick={() => handleDelete(item.id)}
+              >
+                <IconTrash size={16} />
+              </ActionIcon>
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  );
+}

apps/backoffice/src/app/features/item/pages/ItemPage.tsx

@@ -0,0 +1,13 @@
+import { Stack, Title, Paper } from '@mantine/core';
+import { ItemTable } from '../components/ItemTable';
+
+export function ItemPage() {
+  return (
+    <Stack gap="lg">
+      <Title order={2}>Items</Title>
+      <Paper p="md" shadow="sm" radius="md" withBorder>
+        <ItemTable />
+      </Paper>
+    </Stack>
+  );
+}