diff --git a/src/components/Course/components/Ceritficate/Design.svelte b/src/components/Course/components/Ceritficate/Design.svelte
new file mode 100644
index 00000000..ae5b7723
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/Design.svelte
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+
+
+ Certificate settings
+ Choose a theme
+
+ {#each themes as theme}
+
+
+

+
+ {/each}
+
+
+
Brand Logo
+
+
+ To update your brand image, go to Settings > Organisation settings and upload you brand logo
+
+
goto(`org/${$currentOrg.siteName}/settings`)}
+ />
+
+
+ Course Description
+
+
+
+ Locked
+ Unlocked
+
+
+
+
+
+ {#if $course.certificate_theme === 'professional'}
+
+ {:else}
+
+ {/if}
+
+
+
+
+
+
+
diff --git a/src/components/Course/components/Ceritficate/IssueCertificateModal.svelte b/src/components/Course/components/Ceritficate/IssueCertificateModal.svelte
new file mode 100644
index 00000000..4ec996c2
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/IssueCertificateModal.svelte
@@ -0,0 +1,83 @@
+
+
+
+
+
+
onToggle(e)}
+ size="sm"
+ class="mb-4"
+ >
+ Automatic
+ Automatic
+
+
+ If you set this as automatic, certificates will be issued after the
+ learner completes the course.
+
+
+
+ or send a personalised/ custom certificate below:
+
+
+
+
diff --git a/src/components/Course/components/Ceritficate/Reports.svelte b/src/components/Course/components/Ceritficate/Reports.svelte
new file mode 100644
index 00000000..bac981f4
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/Reports.svelte
@@ -0,0 +1,99 @@
+
+
+
+ {#each CertificateReportData as data (data.id)}
+
+
{data.title}
+
{data.value}
+
+ {/each}
+
+
+
+
+
+
+
+
+
+
+
+
+ Name of student
+
+
+
+
+
+
Date issued
+
personalized
+
+
+
+
+
+ {#each students as item (item.id)}
+
+
+
+
+
+
+
{item.issued}
+ {#if item.peronalized == true}
+
+ personalized
+
+ {:else}
+
personalized
+ {/if}
+
+
+
+ {/each}
+
+
+
+
+
+
diff --git a/src/components/Course/components/Ceritficate/certificates/Plain.svelte b/src/components/Course/components/Ceritficate/certificates/Plain.svelte
new file mode 100644
index 00000000..75627219
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/certificates/Plain.svelte
@@ -0,0 +1,58 @@
+
+
+
+
+

+
{$currentOrg.name}
+
+
+
+ Certificate of completion
+
+
+
This is to certify that
+
{studentName}
+
+
+
+ has successfully completed a courses in
+
+
+
+
{$course.description}
+
+
+
+
diff --git a/src/components/Course/components/Ceritficate/certificates/Professional.svelte b/src/components/Course/components/Ceritficate/certificates/Professional.svelte
new file mode 100644
index 00000000..25b7859b
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/certificates/Professional.svelte
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+ Certificate
of completion
+
+
+
This is to certify that
+
{studentName}
+
+
+
+ has successfully completed introductory courses in
+
+
+
+
{$course.description}
+
+

+
{$currentOrg.name}
+
+
+
+
+
+
diff --git a/src/components/Course/components/Ceritficate/mockData.js b/src/components/Course/components/Ceritficate/mockData.js
new file mode 100644
index 00000000..79e7ef54
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/mockData.js
@@ -0,0 +1,85 @@
+export const CertificateReportData = [
+ {
+ id: 1,
+ title: 'Total students taking course',
+ value: 100,
+ },
+ {
+ id: 2,
+ title: 'Number of certificates issued ',
+ value: 45,
+ },
+ {
+ id: 3,
+ title: 'Certificates left to be issued',
+ value: 55,
+ },
+ {
+ id: 4,
+ title: 'Personalised cetificates',
+ value: 15,
+ },
+];
+
+export const students = [
+ {
+ id: 1,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: false,
+ },
+ {
+ id: 2,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: false,
+ },
+ {
+ id: 3,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: true,
+ },
+ {
+ id: 4,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: false,
+ },
+ {
+ id: 5,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: false,
+ },
+ {
+ id: 6,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: false,
+ },
+ {
+ id: 7,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: false,
+ },
+ {
+ id: 8,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: false,
+ },
+ {
+ id: 9,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: false,
+ },
+ {
+ id: 10,
+ name: 'Anyanwu joy victory',
+ issued: '10 Dec 2020',
+ peronalized: true,
+ },
+];
diff --git a/src/components/Course/components/Ceritficate/store.js b/src/components/Course/components/Ceritficate/store.js
new file mode 100644
index 00000000..98651392
--- /dev/null
+++ b/src/components/Course/components/Ceritficate/store.js
@@ -0,0 +1,18 @@
+import { writable } from 'svelte/store';
+
+export const issueCertificateModal = writable({
+ open: false,
+ automatic: false,
+ email: '',
+ date: '',
+ message: '',
+});
+
+export const resetForm = () =>
+ issueCertificateModal.update(() => ({
+ open: false,
+ automatic: false,
+ email: '',
+ date: '',
+ message: '',
+ }));
diff --git a/src/components/Course/components/Navigation/index.svelte b/src/components/Course/components/Navigation/index.svelte
index 63f62e96..4851deb8 100644
--- a/src/components/Course/components/Navigation/index.svelte
+++ b/src/components/Course/components/Navigation/index.svelte
@@ -125,6 +125,11 @@
to: getNavItemRoute($course.id, 'people'),
hideSortIcon: true,
},
+ {
+ label: 'Certificates',
+ to: getNavItemRoute($course.id, 'certificates'),
+ hideSortIcon: true,
+ },
{
label: 'Landing Page',
to: getNavItemRoute($course.id, 'landingpage'),
diff --git a/src/components/Course/store.ts b/src/components/Course/store.ts
index 580cc315..4e4a0510 100644
--- a/src/components/Course/store.ts
+++ b/src/components/Course/store.ts
@@ -10,6 +10,8 @@ export const course: Writable = writable({
description: '',
cost: 0,
currency: '',
+ is_certificate_downloadable: false,
+ certificate_theme: 'professional',
metadata: {
requirements: '',
description: '',
@@ -128,5 +130,9 @@ export async function setCourse(data: Course, setLesson = true) {
},
};
}
+
+ if (!data.certificate_theme) {
+ data.certificate_theme = 'professional';
+ }
course.set(data);
}
diff --git a/src/components/PageBody/index.svelte b/src/components/PageBody/index.svelte
index d3711eb6..25a518d6 100644
--- a/src/components/PageBody/index.svelte
+++ b/src/components/PageBody/index.svelte
@@ -1,7 +1,7 @@
diff --git a/src/routes/courses/[id]/certificates.svelte b/src/routes/courses/[id]/certificates.svelte
new file mode 100644
index 00000000..796366e4
--- /dev/null
+++ b/src/routes/courses/[id]/certificates.svelte
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/utils/types/index.ts b/src/utils/types/index.ts
index d1e10b0c..38a6ebd2 100644
--- a/src/utils/types/index.ts
+++ b/src/utils/types/index.ts
@@ -96,6 +96,8 @@ export interface Course {
currency?: string;
group?: Group;
organization?: Organization;
+ is_certificate_downloadable?: boolean;
+ certificate_theme?: string;
}
export interface Groupmember {
diff --git a/static/plain.svg b/static/plain.svg
new file mode 100644
index 00000000..a104155b
--- /dev/null
+++ b/static/plain.svg
@@ -0,0 +1,28 @@
+
diff --git a/static/professional.svg b/static/professional.svg
new file mode 100644
index 00000000..f2d8cfab
--- /dev/null
+++ b/static/professional.svg
@@ -0,0 +1,29 @@
+