first upload all files

Modules/Translation/Resources/assets/admin/js/TranslationEditor.js

@@ -0,0 +1,29 @@
+import '../../../../node_modules/x-editable/dist/bootstrap3-editable/js/bootstrap-editable';
+
+export default class {
+    constructor() {
+        $('.translation').editable({
+            url: this.update,
+            type: 'text',
+            mode: 'inline',
+            send: 'always',
+        });
+    }
+
+    update(data) {
+        $.ajax({
+            url: route('admin.translations.update', this.dataset.key),
+            type: 'PUT',
+            data: {
+                locale: this.dataset.locale,
+                value: data.value,
+            },
+            success(message) {
+                success(message);
+            },
+            error(xhr) {
+                error(xhr.responseJSON.message);
+            },
+        });
+    }
+}

Modules/Translation/Resources/assets/admin/js/main.js

@@ -0,0 +1,10 @@
+import TranslationEditor from './TranslationEditor';
+
+$('.translations-table').dataTable({
+    pageLength: 20,
+    lengthMenu: [10, 20, 50, 100, 200],
+    drawCallback: () => {
+        new TranslationEditor();
+    },
+});
+

Modules/Translation/Resources/lang/en/permissions.php

@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'index' => 'Index Translations',
+    'edit' => 'Edit Translations',
+];

Modules/Translation/Resources/lang/en/sidebar.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'translations' => 'Translations',
+];

Modules/Translation/Resources/lang/en/translations.php

@@ -0,0 +1,9 @@
+<?php
+
+return [
+    'translation' => 'Translation',
+    'translations' => 'Translations',
+    'table' => [
+        'key' => 'Key',
+    ],
+];

Modules/Translation/Resources/views/admin/translations/index.blade.php

@@ -0,0 +1,44 @@
+@extends('admin::layout')
+
+@section('title', trans('translation::translations.translations'))
+
+@component('admin::components.page.header')
+    @slot('title', trans('translation::translations.translations'))
+
+    <li class="active">{{ trans('translation::translations.translations') }}</li>
+@endcomponent
+
+@section('content')
+    <div class="box box-primary">
+        <div class="box-body index-table">
+            <table class="table table-hover translations-table">
+                <thead>
+                    <tr>
+                        <th>{{ trans('translation::translations.table.key') }}</th>
+
+                        @foreach (supported_locales() as $locale => $language)
+                            <th>{{ $language['name'] }}</th>
+                        @endforeach
+                    </tr>
+                </thead>
+
+                <tbody>
+                    @foreach ($translations as $key => $translation)
+                        <tr>
+                            <td>{{ $key }}</td>
+
+                            @foreach (supported_locales() as $locale => $language)
+                                <td class="translation-td">
+                                    <a href="#" class="translation editable-click {{ array_has($translation, $locale) ? '' : 'editable-empty' }}"
+                                        data-locale="{{ $locale }}"
+                                        data-key="{{ $key }}"
+                                    >{{ array_get($translation, $locale) }}</a>
+                                </td>
+                            @endforeach
+                        </tr>
+                    @endforeach
+                </tbody>
+            </table>
+        </div>
+    </div>
+@endsection