added importer to organization settings

resources/js/Components/OrganizationSwitcher.vue

@@ -41,23 +41,23 @@ const switchToTeam = (team: Organization) => {
             <div
                 data-testid="organization_switcher"
                 class="flex hover:bg-white/10 cursor-pointer transition px-2 py-1 rounded-lg w-full items-center justify-between font-medium">
-                <div class="flex flex-1 space-x-3 items-center w-4/5">
+                <div
+                    class="flex flex-1 space-x-2 items-center w-[calc(100%-30px)]">
                     <div
-                        class="rounded sm:rounded-lg bg-blue-900 font-semibold text-xs sm:text-base flex-shrink-0 text-white w-5 sm:w-7 h-5 sm:h-7 flex items-center justify-center">
+                        class="rounded sm:rounded-lg bg-blue-900 font-semibold text-xs sm:text-sm flex-shrink-0 text-white w-5 sm:w-6 h-5 sm:h-6 flex items-center justify-center">
                         {{
                             page.props.auth.user.current_team.name
                                 .slice(0, 1)
                                 .toUpperCase()
                         }}
                     </div>
-                    <span
-                        class="text-sm sm:text-lg flex-1 truncate font-semibold">
+                    <span class="text-sm flex-1 truncate font-semibold">
                         {{ page.props.auth.user.current_team.name }}
                     </span>
                 </div>
-                <div class="w-1/5">
+                <div class="w-[30px]">
                     <button
-                        class="p-1 transition hover:bg-white/10 rounded-full flex items-center w-9 h-9">
+                        class="p-1 transition hover:bg-white/10 rounded-full flex items-center w-8 h-8">
                         <ChevronDownIcon
                             class="w-5 sm:w-full mt-[1px]"></ChevronDownIcon>
                     </button>

resources/js/Layouts/AppLayout.vue

@@ -55,10 +55,10 @@ onMounted(async () => {
             <div>
                 <div
                     class="border-b border-default-background-separator pb-2 flex justify-between">
-                    <OrganizationSwitcher></OrganizationSwitcher>
+                    <OrganizationSwitcher class="w-full"></OrganizationSwitcher>
                     <XMarkIcon
                         @click="showSidebarMenu = false"
-                        class="w-8"></XMarkIcon>
+                        class="w-8 sm:hidden"></XMarkIcon>
                 </div>
                 <div class="border-b border-default-background-separator">
                     <CurrentSidebarTimer></CurrentSidebarTimer>

resources/js/Pages/Teams/Partials/ImportData.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import FormSection from '@/Components/FormSection.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import type { Organization } from '@/types/models';
+import { ref } from 'vue';
+import { useNotificationsStore } from '@/utils/notification';
+import { api } from '../../../../../openapi.json.client';
+import InputLabel from '@/Components/InputLabel.vue';
+import { PhotoIcon } from '@heroicons/vue/24/solid';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+
+defineProps<{
+    team: Organization;
+}>();
+
+type ImportType =
+    | 'toggl_time_entries'
+    | 'toggl_data_importer'
+    | 'clockify_time_entries'
+    | 'clockify_projects';
+
+const importTypeOptions: { value: ImportType; label: string }[] = [
+    { value: 'toggl_time_entries', label: 'Toggl Time Entries' },
+    { value: 'toggl_data_importer', label: 'Toggl Data Importer' },
+    { value: 'clockify_time_entries', label: 'Clockify Time Entries' },
+    { value: 'clockify_projects', label: 'Clockify Projects' },
+];
+
+const { addNotification } = useNotificationsStore();
+
+async function importData() {
+    const files = importFile.value?.files ?? [];
+    if (importType.value === null) {
+        addNotification('error', 'Please select the import type');
+        return;
+    }
+    if (files.length !== 1) {
+        addNotification(
+            'error',
+            'Please select the CSV or ZIP file that you want to import'
+        );
+        return;
+    }
+    const base64String = await toBase64(files[0]);
+    const organizationId = getCurrentOrganizationId();
+    if (organizationId !== null) {
+        await api.importData(
+            {
+                type: importType.value,
+                data: base64String.replace('data:text/csv;base64,', ''),
+            },
+            {
+                params: {
+                    organization: organizationId,
+                },
+            }
+        );
+    }
+}
+
+const importFile = ref<HTMLInputElement | null>();
+
+function toBase64(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            if (reader.result instanceof ArrayBuffer) {
+                const decoder = new TextDecoder();
+                const str = decoder.decode(reader.result);
+                return reject(str);
+            } else if (reader.result) {
+                resolve(reader.result);
+            }
+        };
+        reader.onerror = reject;
+    });
+}
+
+const importType = ref<ImportType | null>(null);
+</script>
+
+<template>
+    <FormSection @submitted="importData">
+        <template #title> Import Data</template>
+
+        <template #description>
+            Import existing data from Toggl or Clockify.
+        </template>
+
+        <template #form>
+            <!-- Organization Owner Information -->
+            <div class="col-span-6">
+                <div class="col-span-6 sm:col-span-4">
+                    <InputLabel for="currency" value="Import Type" />
+                    <select
+                        name="currency"
+                        id="currency"
+                        v-model="importType"
+                        class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
+                        <option value="" disabled>Select a currency</option>
+                        <option
+                            v-for="importTypeOption in importTypeOptions"
+                            :key="importTypeOption.value"
+                            :value="importTypeOption.value">
+                            {{ importTypeOption.label }}
+                        </option>
+                    </select>
+                </div>
+
+                <div
+                    class="mt-2 flex justify-center rounded-lg border border-dashed border-white/30 px-6 py-10">
+                    <div class="text-center">
+                        <PhotoIcon
+                            class="mx-auto h-12 w-12 text-gray-500"
+                            aria-hidden="true" />
+
+                        <div class="mt-4 flex text-sm leading-6 text-muted">
+                            <label
+                                for="file-upload"
+                                class="relative cursor-pointer rounded-md bg-gray-900 font-semibold text-white focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 focus-within:ring-offset-gray-900 hover:text-indigo-500">
+                                <span>Upload a Toggl/Clockify Export</span>
+                                <input
+                                    ref="importFile"
+                                    id="file-upload"
+                                    name="file-upload"
+                                    type="file"
+                                    class="sr-only" />
+                            </label>
+                        </div>
+                        <p class="text-xs leading-5 text-muted">
+                            CSV and ZIP are supported
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #actions>
+            <PrimaryButton @click="importData">Import Data</PrimaryButton>
+        </template>
+    </FormSection>
+</template>

resources/js/Pages/Teams/Show.vue

@@ -6,6 +6,7 @@ import TeamMemberManager from '@/Pages/Teams/Partials/TeamMemberManager.vue';
 import UpdateTeamNameForm from '@/Pages/Teams/Partials/UpdateTeamNameForm.vue';
 import type { Organization } from '@/types/models';
 import type { Permissions, Role } from '@/types/jetstream';
+import ImportData from '@/Pages/Teams/Partials/ImportData.vue';
 
 defineProps<{
     team: Organization;
@@ -38,6 +39,10 @@ defineProps<{
 
                     <DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
                 </template>
+
+                <SectionBorder />
+
+                <ImportData :team="team"></ImportData>
             </div>
         </div>
     </AppLayout>