docs: how to translate dashboard (#292)

* add cloud translation api package

* feat: Script that auto generates translations for other languages

* add comments

* fix: broken translation

* improve translation

* update locck file

* clean up

* all round trasnlations check

* checkpoint

* finish up

* move to dev dependencies

* fix vercel build error

* translations fix

* - add documentation
- translation bug fix

* quick adjust

* PR Fixes

* add new line

* update docs

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte

@@ -63,27 +63,27 @@
   let openExercise = false;
 
   const submissionStatus: { [key: number]: string } = {
-    1: $t('course.navItem.submissions.submission_status.1'),
-    2: $t('course.navItem.submissions.submission_status.2'),
-    3: $t('course.navItem.submissions.submission_status.3')
+    1: $t('course.navItem.submissions.submission_status.submitted'),
+    2: $t('course.navItem.submissions.submission_status.in_progress'),
+    3: $t('course.navItem.submissions.submission_status.graded')
   };
 
   let sections: sectionType[] = [
     {
       id: 1,
-      title: $t('course.navItem.submissions.submission_status.1'),
+      title: $t('course.navItem.submissions.submission_status.submitted'),
       value: 0,
       items: []
     },
     {
       id: 2,
-      title: $t('course.navItem.submissions.submission_status.2'),
+      title: $t('course.navItem.submissions.submission_status.in_progress'),
       value: 0,
       items: []
     },
     {
       id: 3,
-      title: $t('course.navItem.submissions.submission_status.3'),
+      title: $t('course.navItem.submissions.submission_status.graded'),
       value: 10,
       items: []
     }

apps/dashboard/src/routes/lms/settings/+page.svelte

@@ -10,13 +10,13 @@
   $: tabs = [
     {
       key: 0,
-      label: $t('settings.tabs.1'),
+      label: $t('settings.tabs.profile_tab'),
       tabKey: '',
       href: $page.url.pathname
     },
     {
       key: 1,
-      label: $t('settings.tabs.5'),
+      label: $t('settings.tabs.integrations_tab'),
       tabKey: 'integrations',
       href: `${$page.url.pathname}?tab=integrations`,
       disabled: false

apps/dashboard/src/routes/org/[slug]/audience/+page.svelte

@@ -39,7 +39,7 @@
     </div>
 
     {#if $orgAudience.length >= $currentOrgMaxAudience}
-      <UpgradeBanner>Upgrade your plan to invite more students</UpgradeBanner>
+      <UpgradeBanner>{$t('audience.upgrade')}</UpgradeBanner>
     {/if}
     <Audience />
   </div>

apps/dashboard/src/routes/org/[slug]/settings/teams/+page.svelte

@@ -2,6 +2,7 @@
   import TeamMembers from '$lib/components/Org/Settings/TeamMembers.svelte';
   import { currentOrgPath } from '$lib/utils/store/org';
   import UpgradeBanner from '$lib/components/Upgrade/Banner.svelte';
+  import { t } from '$lib/utils/functions/translations';
 </script>
 
 <svelte:head>
@@ -11,13 +12,13 @@
 <section class="w-full md:max-w-4xl mx-auto">
   <div class="py-10 px-3 md:px-5">
     <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
-      >Back to Settings</a
+      >{$t('upgrade.back')}</a
     >
     <div class="flex items-center justify-between mb-10">
-      <h1 class="dark:text-white text-3xl font-bold">Team members</h1>
+      <h1 class="dark:text-white text-3xl font-bold">{$t('upgrade.team_members')}</h1>
     </div>
 
-    <UpgradeBanner>Upgrade your plan to add team members</UpgradeBanner>
+    <UpgradeBanner>{$t('upgrade.team')}</UpgradeBanner>
     <TeamMembers />
   </div>
 </section>

apps/dashboard/src/routes/org/[slug]/setup/+page.ts

@@ -95,45 +95,45 @@ export const load = async ({ params = { slug: '' } }) => {
   const data = [
     {
       id: 'profile',
-      title: 'setup.1.title',
-      desc: 'setup.1.desc',
+      title: 'setup.personal_profile.title',
+      desc: 'setup.personal_profile.desc',
       is_completed: false,
-      button_label: 'setup.1.button_label'
+      button_label: 'setup.personal_profile.button_label'
     },
     {
       id: 'organization',
-      title: 'setup.2.title',
-      desc: 'setup.2.desc',
+      title: 'setup.organization_profile.title',
+      desc: 'setup.organization_profile.desc',
       is_completed: orgHasAvatarUrl,
-      button_label: 'setup.2.button_label'
+      button_label: 'setup.organization_profile.button_label'
     },
     {
       id: 'course',
-      title: 'setup.3.title',
-      desc: 'setup.4.desc',
+      title: 'setup.course.title',
+      desc: 'setup.course.desc',
       is_completed: isCourseCreated,
-      button_label: 'setup.3.button_label'
+      button_label: 'setup.course.button_label'
     },
     {
       id: 'lesson',
-      title: 'setup.4.title',
-      desc: 'setup.4.desc',
+      title: 'setup.lesson.title',
+      desc: 'setup.lesson.desc',
       is_completed: isLessonCreated,
-      button_label: 'setup.4.button_label'
+      button_label: 'setup.lesson.button_label'
     },
     {
       id: 'exercise',
-      title: 'setup.5.title',
-      desc: 'setup.5.desc',
+      title: 'setup.exercise.title',
+      desc: 'setup.exercise.desc',
       is_completed: isExerciseCreated,
-      button_label: 'setup.5.button_label'
+      button_label: 'setup.exercise.button_label'
     },
     {
       id: 'publish',
-      title: 'setup.6.title',
-      desc: 'setup.6.desc',
+      title: 'setup.publish_course.title',
+      desc: 'setup.publish_course.desc',
       is_completed: isCoursePublished,
-      button_label: 'setup.6.button_label'
+      button_label: 'setup.publish_course.button_label'
     }
   ];