Changes to UI and other stuff

resources/js/Components/PersonInfo/PersonInfoTrrTab.vue

@@ -1,13 +1,21 @@
 <script setup>
 import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
-import Dropdown from "../Dropdown.vue";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+import { Card } from "@/Components/ui/card";
+import { EllipsisVertical } from "lucide-vue-next";
+import { Button } from "../ui/button";
 
 const props = defineProps({
   person: Object,
   edit: { type: Boolean, default: true },
 });
 
-const emit = defineEmits(['add', 'edit', 'delete']);
+const emit = defineEmits(["add", "edit", "delete"]);
 
 const getTRRs = (p) => {
   if (Array.isArray(p?.trrs)) return p.trrs;
@@ -17,20 +25,16 @@ const getTRRs = (p) => {
   return [];
 };
 
-const handleAdd = () => emit('add');
-const handleEdit = (id) => emit('edit', id);
-const handleDelete = (id, label) => emit('delete', id, label);
+const handleAdd = () => emit("add");
+const handleEdit = (id) => emit("edit", id);
+const handleDelete = (id, label) => emit("delete", id, label);
 </script>
 
 <template>
   <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
     <template v-if="getTRRs(person).length">
-      <div
-        class="rounded-lg p-4 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
-        v-for="(acc, idx) in getTRRs(person)"
-        :key="idx"
-      >
-        <div class="flex items-start justify-between mb-2" v-if="edit">
+      <Card class="p-2" v-for="(acc, idx) in getTRRs(person)" :key="idx">
+        <div class="flex items-center justify-between mb-2" v-if="edit">
           <div class="flex flex-wrap gap-2">
             <span
               v-if="acc?.bank_name"
@@ -52,35 +56,26 @@ const handleDelete = (id, label) => emit('delete', id, label);
             </span>
           </div>
           <div v-if="edit">
-            <Dropdown align="right" width="48">
-              <template #trigger>
-                <button
-                  type="button"
-                  class="p-1 rounded hover:bg-gray-100 border border-transparent hover:border-gray-200 transition-colors"
-                  title="Možnosti"
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button variant="ghost" size="icon" title="Možnosti">
+                  <EllipsisVertical />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem @click="handleEdit(acc.id)">
+                  <EditIcon size="sm" />
+                  <span>Uredi</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  @click="handleDelete(acc.id, acc?.iban || acc?.account_number)"
+                  class="text-red-600 focus:bg-red-50 focus:text-red-600"
                 >
-                  <DottedMenu size="sm" css="text-gray-600" />
-                </button>
-              </template>
-              <template #content>
-                <div class="py-1">
-                  <button
-                    @click="handleEdit(acc.id)"
-                    class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
-                  >
-                    <EditIcon size="sm" />
-                    <span>Uredi</span>
-                  </button>
-                  <button
-                    @click="handleDelete(acc.id, acc?.iban || acc?.account_number)"
-                    class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
-                  >
-                    <TrashBinIcon size="sm" />
-                    <span>Izbriši</span>
-                  </button>
-                </div>
-              </template>
-            </Dropdown>
+                  <TrashBinIcon size="sm" class="text-red-600" />
+                  <span>Izbriši</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
         <p class="text-sm font-medium text-gray-900 leading-relaxed font-mono">
@@ -93,22 +88,27 @@ const handleDelete = (id, label) => emit('delete', id, label);
             "-"
           }}
         </p>
-        <p v-if="acc?.notes" class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed">
+        <p
+          v-if="acc?.notes"
+          class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed"
+        >
           {{ acc.notes }}
         </p>
-      </div>
+      </Card>
     </template>
     <button
       v-if="edit"
       @click="handleAdd"
-      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center min-h-[120px]"
+      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
       title="Dodaj TRR"
     >
       <PlusIcon class="h-8 w-8 text-gray-400" />
     </button>
-    <p v-else-if="!edit && !getTRRs(person).length" class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200">
+    <p
+      v-else-if="!edit && !getTRRs(person).length"
+      class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
+    >
       Ni TRR računov.
     </p>
   </div>
 </template>
-