Merge pull request #96 from nirvale/main

multilang frontend i18n

resources/apps/admin/package.json

@@ -40,6 +40,7 @@
 		"axios": "^1.6.8",
 		"lodash": "^4.17.21",
 		"moment": "^2.30.1",
+		"svelte-i18n": "^4.0.0",
 		"svelte-icons": "^2.1.0",
 		"svelte-select": "^5.8.3"
 	}

resources/apps/admin/src/app.d.ts

@@ -9,5 +9,15 @@ declare global {
 		// interface Platform {}
 	}
 }
+import type { Handle } from '@sveltejs/kit'
+import { locale } from 'svelte-i18n'
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const lang = event.request.headers.get('accept-language')?.split(',')[0]
+	if (lang) {
+		locale.set(lang)
+	}
+	return resolve(event)
+}
 
 export {};

resources/apps/admin/src/i18n.js

@@ -0,0 +1,30 @@
+// import { browser } from '$app/environment'
+// import { init, register } from 'svelte-i18n';
+//
+//
+// register('en', () => import('./locales/en.json'));
+// register('es', () => import('./locales/es.json'));
+//
+// const defaultLocale = 'es'
+//
+//
+//
+// init({
+//   fallbackLocale: defaultLocale,
+// 	initialLocale: browser ? window.navigator.language : defaultLocale,
+// });
+
+
+import { browser } from '$app/environment'
+import { locale, init, register } from 'svelte-i18n'
+
+locale.set('en')
+const defaultLocale = 'es'
+
+register('en', () => import('./locales/en.json'))
+register('es', () => import('./locales/es.json'))
+
+init({
+	fallbackLocale: defaultLocale,
+	initialLocale: browser ? window.navigator.language : defaultLocale,
+})

resources/apps/admin/src/lib/components/AppLayout.svelte

@@ -6,6 +6,9 @@
 	import Navigation from '$lib/components/Navigation.svelte';
 
 	import Header from './Header.svelte';
+
+
+	import { _ } from 'svelte-i18n';
 </script>
 
 <Drawer bgDrawer="bg-gray-800" rounded="rounded-none" width="300px">

resources/apps/admin/src/lib/components/LatestActivities.svelte

@@ -1,6 +1,6 @@
 <script>
 	// @ts-nocheck
-
+	import { _ } from 'svelte-i18n';
 	import { getBearerToken, getErrorMessage, useApi } from '$lib/api';
 	import { useToast } from '$lib/toast';
 	import { onMount } from 'svelte';
@@ -49,7 +49,7 @@
 
 <div class="card flex-1 flex-col bg-white shadow-lg lg:flex-row">
 	<div class="card-header border-b p-4">
-		<div class="flex-1 font-bold">Latest Activities</div>
+		<div class="flex-1 font-bold">{$_('laact')}</div>
 	</div>
 	<div class="card-body p-4">
 		<!-- Responsive Container (recommended) -->
@@ -60,8 +60,8 @@
 					<thead>
 						<tr>
 							<th>ID</th>
-							<th>Description</th>
-							<th>Date</th>
+							<th>{$_('desc')}</th>
+							<th>{$_('date')}</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -80,7 +80,7 @@
 				</table>
 			</div>
 		{:else}
-			<div class="w-full border bg-gray-100 p-6 text-center font-bold">No items found</div>
+			<div class="w-full border bg-gray-100 p-6 text-center font-bold">{$_('noitf')}</div>
 		{/if}
 	</div>
 </div>

resources/apps/admin/src/lib/components/LatestAttendance.svelte

@@ -1,6 +1,6 @@
 <script>
 	// @ts-nocheck
-
+	import { _ } from 'svelte-i18n';
 	import { getBearerToken, getErrorMessage, useApi } from '$lib/api';
 	import { useToast } from '$lib/toast';
 	import { onMount } from 'svelte';
@@ -56,7 +56,7 @@
 
 <div class="card flex-1 flex-col bg-white shadow-lg lg:flex-row">
 	<div class="card-header border-b p-4">
-		<div class="flex-1 font-bold">Latest Attendance</div>
+		<div class="flex-1 font-bold">{$_('lastenda')}</div>
 	</div>
 	<div class="card-body p-4">
 		<!-- Responsive Container (recommended) -->
@@ -67,9 +67,9 @@
 					<thead>
 						<tr>
 							<th>ID</th>
-							<th>Member</th>
-							<th>Description</th>
-							<th>Date</th>
+							<th>{$_('member')}</th>
+							<th>{$_('desc')}</th>
+							<th>{$_('date')}</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -108,7 +108,7 @@
 				</table>
 			</div>
 		{:else}
-			<div class="w-full border bg-gray-100 p-6 text-center font-bold">No items found</div>
+			<div class="w-full border bg-gray-100 p-6 text-center font-bold">{$_('noitf')}</div>
 		{/if}
 	</div>
 </div>

resources/apps/admin/src/lib/components/MemberLogin.svelte

@@ -1,5 +1,6 @@
 <script>
 	// @ts-nocheck
+	import { _ } from 'svelte-i18n';
 	import { createEventDispatcher } from 'svelte';
 
 	import UserSelect from './UserSelect.svelte';
@@ -95,10 +96,10 @@
 
 <div class="card flex-1 flex-col bg-white shadow-lg lg:flex-row">
 	<div class="card-header border-b p-4">
-		<div class="flex-1 font-bold">Member Login</div>
+		<div class="flex-1 font-bold">{$_('memberlogin')}</div>
 	</div>
 	<div class="card-body p-4">
-		<p class="mb-2 block">Please search for a member to get started.</p>
+		<p class="mb-2 block">{$_('memsearch')}</p>
 		<UserSelect
 			searchable
 			clearable
@@ -108,7 +109,7 @@
 		/>
 		{#if user}
 			<div class="pt-4">
-				<div class="mb-4 mt-6 flex-1 font-bold">Member Information</div>
+				<div class="mb-4 mt-6 flex-1 font-bold">{$_('meminfo')}</div>
 				<div class="card mb-6 w-full bg-white shadow-lg">
 					<div class="card-body p-4">
 						<div class="flex items-center gap-4">
@@ -130,12 +131,12 @@
 							</div>
 							<div class="flex-1"></div>
 							<a href={`/members/${user.id}`} class="btn btn-sm variant-filled">
-								View Profile
+								{$_('viweprofile')}
 							</a>
 						</div>
 					</div>
 				</div>
-				<div class="mb-4 flex-1 font-bold">Member Subscriptions</div>
+				<div class="mb-4 flex-1 font-bold">{$_('memsus')}</div>
 				<div class="grid grid-cols-1 gap-2">
 					{#if subscriptions.length}
 						<div class="mb-4">
@@ -147,13 +148,13 @@
 						<div class="card mb-4 w-full bg-white shadow-lg">
 							<div class="card-body p-4">
 								<div class="text-center text-xs text-gray-500">
-									This member does not have any subscriptions
+									{$_('nomemsus')}
 								</div>
 							</div>
 						</div>
 					{/if}
 				</div>
-				<div class="mb-4 flex-1 font-bold">Member Branches</div>
+				<div class="mb-4 flex-1 font-bold">{$_('membran')}</div>
 				<div class="card w-full bg-white shadow-lg">
 					<div class="card-body p-4">
 						{#if branches.length}
@@ -164,7 +165,7 @@
 							</ul>
 						{:else}
 							<div class="text-center text-xs text-gray-500">
-								This member does not have any branches
+								{$_('nomembran')}
 							</div>
 						{/if}
 					</div>
@@ -176,10 +177,10 @@
 		<div class="flex items-center border-t p-4">
 			<form class="flex flex-1 items-center gap-4" on:submit={onLogActivity}>
 				<select class="select" bind:value={type} name="type" required>
-					<option value="login">Member Login</option>
-					<option value="logout">Member Logout</option>
+					<option value="login">{$_('memberloginr')}</option>
+					<option value="logout">{$_('memberlogoutr')}</option>
 				</select>
-				<button class="btn variant-filled"> Log Status </button>
+				<button class="btn variant-filled"> {$_('logstat')} </button>
 			</form>
 		</div>
 	{/if}

resources/apps/admin/src/lib/components/Navigation.svelte

@@ -1,6 +1,6 @@
 <script>
 	// @ts-nocheck
-
+	import { _ } from 'svelte-i18n';
 	import Dashboard from 'svelte-icons/fa/FaHome.svelte';
 	import Activities from 'svelte-icons/fa/FaUserClock.svelte';
 	import Attendance from 'svelte-icons/fa/FaCalendar.svelte';
@@ -34,47 +34,47 @@
 	$: items = [
 		{
 			path: '/',
-			name: 'Dashboard',
+			name: $_('ndash'),
 			icon: Dashboard
 		},
 		{
 			path: '/activities',
-			name: 'Activities',
+			name: $_('nact'),
 			icon: Activities
 		},
 		{
 			path: '/attendance',
-			name: 'Attendance',
+			name: $_('natt'),
 			icon: Attendance
 		},
 		{
 			path: '/members',
-			name: 'Members',
+			name: $_('nmem'),
 			icon: Members
 		},
 		{
 			path: '/branches',
-			name: 'Branches',
+			name: $_('nbran'),
 			icon: Branches
 		},
 		{
 			path: '/subscriptions',
-			name: 'Subscriptions',
+			name: $_('nsubs'),
 			icon: Subscriptions
 		},
 		{
 			path: '/packages',
-			name: 'Packages',
+			name: $_('npack'),
 			icon: Packages
 		},
 		{
 			path: '/services',
-			name: 'Services',
+			name: $_('nservs'),
 			icon: Services
 		},
 		{
 			path: '/cycles',
-			name: 'Cycles',
+			name: $_('ncycles'),
 			icon: Cycles
 		},
 		// {
@@ -89,7 +89,7 @@
 		// },
 		{
 			path: '/logout',
-			name: 'Logout',
+			name: $_('nlogout'),
 			icon: Logout
 		}
 	].map((v) => {

resources/apps/admin/src/lib/components/SubscriptionCard.svelte

@@ -1,5 +1,6 @@
 <script>
 	// @ts-nocheck
+	import { _ } from 'svelte-i18n';
 	import { createEventDispatcher } from 'svelte';
 
 	import FaClock from 'svelte-icons/fa/FaClock.svelte';
@@ -25,7 +26,7 @@
 				{#each item.package.services as item}
 					<li>{item.name}</li>
 				{:else}
-					<li>No service attached to this package.</li>
+					<li>{$_('noservsttatchd')}</li>
 				{/each}
 			{/if}
 		</ul>
@@ -34,7 +35,7 @@
 				<FaClock />
 			</span>
 			<div class="flex-1">
-				Valid Until: {moment(item.expires_at).format('LL')}
+				{$_('validuntil')} {moment(item.expires_at).format('LL')}
 			</div>
 		</div>
 		{#if item.status === 'suspended'}
@@ -43,7 +44,7 @@
 					<FaClock />
 				</span>
 				<div class="flex-1">
-					Suspended At: {moment(item.suspended_at).format('LL')}
+					{$_('suspendedat')} {moment(item.suspended_at).format('LL')}
 				</div>
 			</div>
 		{/if}

resources/apps/admin/src/lib/components/UserSubscriptionModal.svelte

@@ -1,6 +1,6 @@
 <script>
 	// @ts-nocheck
-
+	import { _ } from 'svelte-i18n';
 	import { getModalStore } from '@skeletonlabs/skeleton';
 	import ModalClose from './ModalClose.svelte';
 	import ModalHeader from './ModalHeader.svelte';
@@ -41,7 +41,7 @@
 		})
 			.then(() => {
 				toast.trigger({
-					message: 'Successfully created',
+					message: $_('createdmessage'),
 					background: 'variant-filled-success'
 				});
 				window.dispatchEvent(new CustomEvent('user_subscription'));
@@ -61,21 +61,21 @@
 	<!-- Responsive Container (recommended) -->
 	<form action="" on:submit|preventDefault={onSubmit} class="flex flex-1 flex-col">
 		<ModalHeader>
-			<div class="flex-1 font-bold">Member Subscription</div>
+			<div class="flex-1 font-bold">{$_('membesusadd')}</div>
 			<ModalClose on:close={() => modalStore.close()} />
 		</ModalHeader>
 		<ModalBody>
 			<div class="mb-4">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label class="label">
-					<span>Package</span>
+					<span>{$_('package')}</span>
 					<PackageSelect bind:value={fields.package} />
 				</label>
 			</div>
 
 			<div class="mb-4">
 				<label class="label">
-					<span>Interval</span>
+					<span>{$_('interval')}</span>
 					<input
 						class="input"
 						bind:value={fields.interval}
@@ -94,13 +94,13 @@
 					type="button"
 					on:click={() => modalStore.close()}
 					class="btn variant-filled-error text-white"
-					disabled={loading}>Cancel</button
+					disabled={loading}>{$_('canc')}</button
 				>
 				<div class="flex-1"></div>
 				<button
 					type="submit"
 					class="btn variant-filled-primary mr-2 text-white"
-					disabled={loading}>Submit</button
+					disabled={loading}>{$_('sub')}</button
 				>
 			</div>
 		</ModalFooter>