diff --git a/apps/backoffice/src/app/features/certification/api/certification-api.ts b/apps/backoffice/src/app/features/certification/api/certification-api.ts new file mode 100644 index 000000000..878947756 --- /dev/null +++ b/apps/backoffice/src/app/features/certification/api/certification-api.ts @@ -0,0 +1,45 @@ +import { baseApi } from '@ema-platform/api'; +import type { + Certification, + ListResponse, + CreateCertificationPayload, + UpdateCertificationPayload, +} from '../types/certification'; + +const certificationApi = baseApi.injectEndpoints({ + endpoints: (builder) => ({ + getCertifications: builder.query, void>({ + query: () => '/certifications', + providesTags: ['Api'], + }), + getCertification: builder.query({ + query: (id) => `/certifications/${id}`, + providesTags: ['Api'], + }), + createCertification: builder.mutation({ + query: (body) => ({ url: '/certifications', method: 'POST', body }), + invalidatesTags: ['Api'], + }), + updateCertification: builder.mutation({ + query: ({ id, ...body }) => ({ + url: `/certifications/${id}`, + method: 'PUT', + body, + }), + invalidatesTags: ['Api'], + }), + deleteCertification: builder.mutation({ + query: (id) => ({ url: `/certifications/${id}`, method: 'DELETE' }), + invalidatesTags: ['Api'], + }), + }), + overrideExisting: false, +}); + +export const { + useGetCertificationsQuery, + useGetCertificationQuery, + useCreateCertificationMutation, + useUpdateCertificationMutation, + useDeleteCertificationMutation, +} = certificationApi; diff --git a/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx b/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx new file mode 100644 index 000000000..7f18fb7f6 --- /dev/null +++ b/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx @@ -0,0 +1,202 @@ +import { useState } from 'react'; +import { + Stack, + Title, + Group, + Button, + Table, + Badge, + ActionIcon, + Modal, + Text, + TextInput, + Textarea, + Paper, + Loader, + Center, + Alert, +} from '@mantine/core'; +import { useDisclosure } from '@mantine/hooks'; +import { IconEdit, IconTrash, IconPlus, IconInfoCircle, IconCertificate } from '@tabler/icons-react'; +import { notify } from '@ema-platform/ui'; +import { + useGetCertificationsQuery, + useCreateCertificationMutation, + useUpdateCertificationMutation, + useDeleteCertificationMutation, +} from '../api/certification-api'; +import type { Certification } from '../types/certification'; + +function CertificationForm({ + editing, + isSubmitting, + onSubmit, + onCancel, +}: { + editing: Certification | null; + isSubmitting: boolean; + onSubmit: (values: { nameEn: string; nameAm: string; descEn: string; descAm: string }, isEdit: boolean) => void; + onCancel: () => void; +}) { + const [nameEn, setNameEn] = useState(editing?.name?.en ?? ''); + const [nameAm, setNameAm] = useState(editing?.name?.am ?? ''); + const [descEn, setDescEn] = useState(editing?.description?.en ?? ''); + const [descAm, setDescAm] = useState(editing?.description?.am ?? ''); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (!nameEn || !nameAm) { + notify.error('Name fields are required'); + return; + } + onSubmit({ nameEn, nameAm, descEn, descAm }, !!editing); + }; + + return ( + +
+ + setNameEn(e.currentTarget.value)} size="sm" required /> + setNameAm(e.currentTarget.value)} size="sm" required /> +