fix(ui): polish it more

pushpak1300 · Dec 9, 2024 · 4d08cc4 · 4d08cc4
1 parent c176b13
commit 4d08cc4
Show file tree

Hide file tree

Showing 9 changed files with 332 additions and 190 deletions.
diff --git a/resources/js/Components/AppTeamManager.vue b/resources/js/Components/AppTeamManager.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { Avatar, AvatarFallback } from '@/Components/shadcn/ui/avatar'
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandSeparator,
+} from '@/Components/shadcn/ui/command'
+import CommandEmpty from '@/Components/shadcn/ui/command/CommandEmpty.vue'
+import CommandList from '@/Components/shadcn/ui/command/CommandList.vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/Components/shadcn/ui/dropdown-menu'
+import SidebarMenuButton from '@/Components/shadcn/ui/sidebar/SidebarMenuButton.vue'
+import { Icon } from '@iconify/vue'
+import { Link, router } from '@inertiajs/vue3'
+import { inject, ref } from 'vue'
+
+const route = inject('route')
+const open = ref(false)
+
+function switchToTeam(team) {
+  router.put(route('current-team.update'), {
+    team_id: team.id,
+  }, {
+    preserveState: false,
+  })
+}
+</script>
+
+<template>
+  <DropdownMenu v-model:open="open">
+    <DropdownMenuTrigger as-child>
+      <SidebarMenuButton
+        size="lg"
+        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+      >
+        <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+          <Icon icon="lucide:rocket" />
+        </div>
+        <div class="grid flex-1 text-left text-sm leading-tight">
+          <span class="truncate font-semibold">{{ $page.props.auth.user.current_team.name }}</span>
+          <span class="truncate text-xs">Manage Team</span>
+        </div>
+        <Icon icon="lucide:chevrons-up-down" class="ml-auto size-4" />
+      </SidebarMenuButton>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg p-0"
+      align="start" side="bottom" :side-offset="4"
+    >
+      <Command :filter-function="(list, term) => list.filter(i => i?.name?.toLowerCase()?.includes(term))">
+        <CommandList>
+          <CommandInput placeholder="Search team..." />
+          <CommandEmpty>No team found.</CommandEmpty>
+          <CommandGroup heading="Switch Teams">
+            <CommandItem
+              v-for="team in $page.props.auth.user.all_teams"
+              :key="team.value" :value="team" @select="() => {
+                switchToTeam(team);
+                open = false;
+              }"
+            >
+              <Avatar class="mr-2 size-5">
+                <AvatarFallback>{{ team.name.charAt(0) }}</AvatarFallback>
+              </Avatar>
+              {{ team.name }}
+              <Icon
+                v-if="team.id === $page.props.auth.user.current_team_id"
+                icon="lucide:check" class="ml-auto size-4"
+              />
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+        <CommandSeparator v-if="$page.props.auth.user.all_teams.length > 1" />
+        <CommandGroup heading="Manage Team">
+          <CommandItem value="team-settings">
+            <Link :href="route('teams.show', $page.props.auth.user.current_team)">
+              Team Settings
+            </Link>
+          </CommandItem>
+          <CommandItem
+            v-if="$page.props.jetstream.canCreateTeams"
+            value="create-new-team"
+          >
+            <Link :href="route('teams.create')">
+              Create New Team
+            </Link>
+          </CommandItem>
+        </CommandGroup>
+      </Command>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/resources/js/Components/AppUserManager.vue b/resources/js/Components/AppUserManager.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { Avatar, AvatarFallback } from '@/Components/shadcn/ui/avatar'
+import AvatarImage from '@/Components/shadcn/ui/avatar/AvatarImage.vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/Components/shadcn/ui/dropdown-menu'
+import DropdownMenuGroup from '@/Components/shadcn/ui/dropdown-menu/DropdownMenuGroup.vue'
+import SidebarMenuButton from '@/Components/shadcn/ui/sidebar/SidebarMenuButton.vue'
+import { Icon } from '@iconify/vue'
+import { Link, router } from '@inertiajs/vue3'
+import { inject } from 'vue'
+
+const route = inject('route')
+
+function logout() {
+  router.post(route('logout'))
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <SidebarMenuButton
+        size="lg"
+        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+      >
+        <Avatar class="h-8 w-8 rounded-lg">
+          <AvatarImage
+            :src="$page.props.auth.user.profile_photo_path ?? ''"
+            :alt="$page.props.auth.user.name"
+          />
+          <AvatarFallback class="rounded-lg">
+            {{ $page.props.auth.user.name.charAt(0) }}
+          </AvatarFallback>
+        </Avatar>
+        <div class="grid flex-1 text-left text-sm leading-tight">
+          <span class="truncate font-semibold">{{ $page.props.auth.user.name }}</span>
+          <span class="truncate text-xs">{{ $page.props.auth.user.email }}</span>
+        </div>
+        <Icon icon="lucide:chevrons-up-down" class="ml-auto size-4" />
+      </SidebarMenuButton>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+      side="bottom" align="end" :side-offset="4"
+    >
+      <DropdownMenuLabel class="p-0 font-normal">
+        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+          <Avatar class="h-8 w-8 rounded-lg">
+            <AvatarImage
+              :src="$page.props.auth.user.profile_photo_path ?? ''"
+              :alt="$page.props.auth.user.name"
+            />
+            <AvatarFallback class="rounded-lg">
+              {{ $page.props.auth.user.name.charAt(0) }}
+            </AvatarFallback>
+          </Avatar>
+          <div class="grid flex-1 text-left text-sm leading-tight">
+            <span class="truncate font-semibold">{{ $page.props.auth.user.name }}</span>
+            <span class="truncate text-xs">{{ $page.props.auth.user.email }}</span>
+          </div>
+        </div>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem :as="Link" :href="route('profile.show')">
+          <Icon icon="lucide:settings" />
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuItem :as="Link" :href="route('api-tokens.index')">
+          <Icon icon="lucide:key" />
+          API Tokens
+        </DropdownMenuItem>
+        <DropdownMenuItem :as="Link" :href="route('subscriptions.create')">
+          <Icon icon="lucide:credit-card" />
+          Billing
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem @click="logout">
+        <Icon icon="lucide:log-out" />
+        Log out
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/resources/js/Components/StatsCard.vue b/resources/js/Components/StatsCard.vue
@@ -0,0 +1,54 @@
+<script setup>
+import Card from '@/Components/shadcn/ui/card/Card.vue'
+import CardContent from '@/Components/shadcn/ui/card/CardContent.vue'
+import CardHeader from '@/Components/shadcn/ui/card/CardHeader.vue'
+import CardTitle from '@/Components/shadcn/ui/card/CardTitle.vue'
+import { Icon } from '@iconify/vue';
+
+defineProps({
+  value: {
+    type: [String, Number],
+    required: true
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  link: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: 'info'
+  }
+})
+
+</script>
+
+<template>
+  <a
+    :href="link"
+    target="_blank"
+    rel="noopener"
+  >
+    <Card class="hover:shadow">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-sm font-medium">
+          <Icon
+            :icon="icon"
+            class="size-8"
+          />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div class="text-xl font-bold text-primary">
+          {{ value }}
+        </div>
+        <p class="text-muted-foreground">
+          {{ description }}
+        </p>
+      </CardContent>
+    </Card>
+  </a>
+</template>