sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

production #1

Merged
sipo merged 45 commits from production into master 2026-01-27 18:02:44 +00:00
Conversation 0 Commits 45 Files Changed 553 +5407 -3740
37 changed files with 5407 additions and 3740 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c4d9ecb39e - Show all commits

2
app/Http/Controllers/Admin/PackageController.php
View File

@ -25,7 +25,7 @@ public function index(Request $request): Response
{ {
$packages = Package::query() $packages = Package::query()
->latest('id') ->latest('id')
->paginate(20); ->paginate(25);
// Minimal lookups for create form (active only) // Minimal lookups for create form (active only)
$profiles = \App\Models\SmsProfile::query() $profiles = \App\Models\SmsProfile::query()
->where('active', true) ->where('active', true)

BIN
app/Http/Controllers/ClientCaseContoller.original
View File

Binary file not shown.

1
app/Http/Controllers/ImportTemplateController.php
View File

@ -657,6 +657,7 @@ public function applyToImport(Request $request, ImportTemplate $template, Import
$import->update([ $import->update([
'import_template_id' => $template->id, 'import_template_id' => $template->id,
'reactivate' => $template->reactivate,
'meta' => $merged, 'meta' => $merged,
]); ]);
}); });

1
app/Models/Contract.php
View File

@ -29,6 +29,7 @@ class Contract extends Model
'end_date', 'end_date',
'client_case_id', 'client_case_id',
'type_id', 'type_id',
'active',
'description', 'description',
'meta', 'meta',
]; ];

103
app/Services/Import/Handlers/ContractHandler.php
View File

@ -46,76 +46,35 @@ public function resolve(array $mapped, array $context = []): mixed
public function process(Import $import, array $mapped, array $raw, array $context = []): array public function process(Import $import, array $mapped, array $raw, array $context = []): array
{ {
// PHASE 4: Check for existing Contract early to prevent duplicate creation // Check for existing contract (using resolve method which handles client scoping)
$reference = $mapped['reference'] ?? null;
if ($reference) {
$existingContract = $this->resolutionService->getExistingContract(
$import->client_id,
$reference
);
if ($existingContract) {
Log::info('ContractHandler: Found existing Contract by reference', [
'contract_id' => $existingContract->id,
'reference' => $reference,
]);
$mode = $this->getOption('update_mode', 'update');
if ($mode === 'skip') {
return [
'action' => 'skipped',
'entity' => $existingContract,
'message' => 'Contract already exists (skip mode)',
];
}
// Update existing contract
$payload = $this->buildPayload($mapped, $existingContract);
$payload = $this->mergeJsonFields($payload, $existingContract);
$appliedFields = $this->trackAppliedFields($existingContract, $payload);
if (empty($appliedFields)) {
return [
'action' => 'skipped',
'entity' => $existingContract,
'message' => 'No changes detected',
];
}
$existingContract->fill($payload);
$existingContract->save();
return [
'action' => 'updated',
'entity' => $existingContract,
'applied_fields' => $appliedFields,
];
}
}
$existing = $this->resolve($mapped, $context); $existing = $this->resolve($mapped, $context);
// Check for reactivation request
$reactivate = $this->shouldReactivate($context);
// Handle reactivation if entity is soft-deleted or inactive
if ($existing && $reactivate && $this->needsReactivation($existing)) {
$reactivated = $this->attemptReactivation($existing, $context);
if ($reactivated) {
return [
'action' => 'reactivated',
'entity' => $existing,
'message' => 'Contract reactivated',
];
}
}
// Determine if we should update or skip based on mode
$mode = $this->getOption('update_mode', 'update');
if ($existing) { if ($existing) {
// Check for reactivation FIRST (before update_mode check)
$reactivate = $this->shouldReactivate($context);
Log::info('ContractHandler: Found existing Contract', [
'contract_id' => $existing->id,
'reference' => $mapped['reference'] ?? null,
'context' => $context['import']
]);
if ($reactivate && $this->needsReactivation($existing)) {
$reactivated = $this->attemptReactivation($existing, $context);
Log::info('ContractHandler: Reactivate', ['reactivated' => $reactivated]);
if ($reactivated) {
return [
'action' => 'reactivated',
'entity' => $existing,
'message' => 'Contract reactivated',
];
}
}
// Check update mode
$mode = $this->getOption('update_mode', 'update');
if ($mode === 'skip') { if ($mode === 'skip') {
return [ return [
'action' => 'skipped', 'action' => 'skipped',
@ -124,12 +83,9 @@ public function process(Import $import, array $mapped, array $raw, array $contex
]; ];
} }
// Update // Update existing contract
$payload = $this->buildPayload($mapped, $existing); $payload = $this->buildPayload($mapped, $existing);
// Merge JSON fields instead of overwriting
$payload = $this->mergeJsonFields($payload, $existing); $payload = $this->mergeJsonFields($payload, $existing);
$appliedFields = $this->trackAppliedFields($existing, $payload); $appliedFields = $this->trackAppliedFields($existing, $payload);
if (empty($appliedFields)) { if (empty($appliedFields)) {
@ -200,7 +156,6 @@ protected function buildPayload(array $mapped, $model): array
// Map fields according to contract schema // Map fields according to contract schema
$fieldMap = [ $fieldMap = [
'reference' => 'reference', 'reference' => 'reference',
'title' => 'title',
'description' => 'description', 'description' => 'description',
'amount' => 'amount', 'amount' => 'amount',
'currency' => 'currency', 'currency' => 'currency',
@ -286,7 +241,9 @@ protected function attemptReactivation(Contract $contract, array $context): bool
$contract->restore(); $contract->restore();
} }
$contract->update(['active' => 1]); $contract->active = 1;
$contract->save();
return true; return true;
} catch (\Throwable $e) { } catch (\Throwable $e) {

2
app/Services/Import/ImportServiceV2.php
View File

@ -100,8 +100,6 @@ public function process(Import $import, ?Authenticatable $user = null): array
$rowNum++; $rowNum++;
} }
$isPg = DB::connection()->getDriverName() === 'pgsql';
// If retry mode, only process failed/invalid rows // If retry mode, only process failed/invalid rows
if ($isRetry) { if ($isRetry) {
$failedRows = ImportRow::where('import_id', $import->id) $failedRows = ImportRow::where('import_id', $import->id)

28
database/seeders/ImportEntitiesV2Seeder.php
View File

@ -17,11 +17,11 @@ public function run(): void
'key' => 'contracts', 'key' => 'contracts',
'canonical_root' => 'contract', 'canonical_root' => 'contract',
'label' => 'Pogodbe', 'label' => 'Pogodbe',
'fields' => ['reference', 'title', 'description', 'amount', 'currency', 'start_date', 'end_date', 'active'], 'fields' => ['reference', 'start_date', 'end_date', 'description', 'type_id', 'client_case_id', 'meta'],
'field_aliases' => [], 'field_aliases' => [],
'aliases' => ['contract', 'contracts'], 'aliases' => ['contract', 'contracts'],
'supports_multiple' => false, 'supports_multiple' => false,
'meta' => false, 'meta' => true,
'rules' => [], 'rules' => [],
'ui' => ['default_field' => 'reference', 'order' => 1], 'ui' => ['default_field' => 'reference', 'order' => 1],
'handler_class' => \App\Services\Import\Handlers\ContractHandler::class, 'handler_class' => \App\Services\Import\Handlers\ContractHandler::class,
@ -45,7 +45,7 @@ public function run(): void
'key' => 'accounts', 'key' => 'accounts',
'canonical_root' => 'account', 'canonical_root' => 'account',
'label' => 'Računi', 'label' => 'Računi',
'fields' => ['contract_id', 'reference', 'title', 'description', 'balance_amount', 'currency'], 'fields' => ['reference', 'initial_amount', 'balance_amount', 'contract_id', 'contract_reference', 'type_id', 'active', 'description'],
'field_aliases' => [], 'field_aliases' => [],
'aliases' => ['account', 'accounts'], 'aliases' => ['account', 'accounts'],
'supports_multiple' => false, 'supports_multiple' => false,
@ -75,8 +75,26 @@ public function run(): void
'key' => 'payments', 'key' => 'payments',
'canonical_root' => 'payment', 'canonical_root' => 'payment',
'label' => 'Plačila', 'label' => 'Plačila',
'fields' => ['account_id', 'reference', 'amount', 'currency', 'paid_at', 'payment_date'], 'fields' => [
'field_aliases' => ['payment_date' => 'paid_at'], 'reference',
'payment_nu',
'payment_date',
'amount',
'type_id',
'active',
// optional helpers for mapping by related records
'debt_id',
'account_id',
'account_reference',
'contract_reference'
],
'field_aliases' => [
'datum' => 'payment_date',
'paid_at' => 'payment_date',
'number' => 'payment_nu',
'znesek' => 'amount',
'value' => 'amount'
],
'aliases' => ['payment', 'payments'], 'aliases' => ['payment', 'payments'],
'supports_multiple' => false, 'supports_multiple' => false,
'meta' => false, 'meta' => false,

109
package-lock.json generated
View File

@ -10,6 +10,7 @@
"@fortawesome/free-regular-svg-icons": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2", "@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/vue-fontawesome": "^3.1.2", "@fortawesome/vue-fontawesome": "^3.1.2",
"@guolao/vue-monaco-editor": "^1.6.0",
"@headlessui/vue": "^1.7.23", "@headlessui/vue": "^1.7.23",
"@heroicons/vue": "^2.2.0", "@heroicons/vue": "^2.2.0",
"@internationalized/date": "^3.10.0", "@internationalized/date": "^3.10.0",
@ -27,9 +28,10 @@
"lodash": "^4.17.21", "lodash": "^4.17.21",
"lucide-vue-next": "^0.552.0", "lucide-vue-next": "^0.552.0",
"material-design-icons-iconfont": "^6.7.0", "material-design-icons-iconfont": "^6.7.0",
"monaco-editor": "^0.55.1",
"preline": "^2.7.0", "preline": "^2.7.0",
"quill": "^1.3.7", "quill": "^1.3.7",
"reka-ui": "^2.6.1", "reka-ui": "^2.7.0",
"tailwind-merge": "^3.4.0", "tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"tailwindcss-inner-border": "^0.2.0", "tailwindcss-inner-border": "^0.2.0",
@ -879,6 +881,52 @@
"vue": ">= 3.0.0 < 4" "vue": ">= 3.0.0 < 4"
} }
}, },
"node_modules/@guolao/vue-monaco-editor": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@guolao/vue-monaco-editor/-/vue-monaco-editor-1.6.0.tgz",
"integrity": "sha512-w2IiJ6eJGGeuIgCK6EKZOAfhHTTUB5aZwslzwGbZ5e89Hb4avx6++GkLTW8p84Sng/arFMjLPPxSBI56cFudyQ==",
"license": "MIT",
"dependencies": {
"@monaco-editor/loader": "^1.6.1",
"vue-demi": "latest"
},
"peerDependencies": {
"@vue/composition-api": "^1.7.2",
"monaco-editor": ">=0.43.0",
"vue": "^2.6.14 || >=3.0.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@guolao/vue-monaco-editor/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@headlessui/vue": { "node_modules/@headlessui/vue": {
"version": "1.7.23", "version": "1.7.23",
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.23.tgz", "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.23.tgz",
@ -1069,6 +1117,15 @@
"dev": true, "dev": true,
"license": "Apache-2.0" "license": "Apache-2.0"
}, },
"node_modules/@monaco-editor/loader": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
"integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
"license": "MIT",
"dependencies": {
"state-local": "^1.0.6"
}
},
"node_modules/@popperjs/core": { "node_modules/@popperjs/core": {
"version": "2.11.8", "version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@ -2309,6 +2366,13 @@
"@types/geojson": "*" "@types/geojson": "*"
} }
}, },
"node_modules/@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
"license": "MIT",
"optional": true
},
"node_modules/@types/web-bluetooth": { "node_modules/@types/web-bluetooth": {
"version": "0.0.21", "version": "0.0.21",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
@ -3616,6 +3680,15 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/dompurify": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
"integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
"license": "(MPL-2.0 OR Apache-2.0)",
"optionalDependencies": {
"@types/trusted-types": "^2.0.7"
}
},
"node_modules/dunder-proto": { "node_modules/dunder-proto": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@ -4664,6 +4737,18 @@
"vt-pbf": "^3.1.3" "vt-pbf": "^3.1.3"
} }
}, },
"node_modules/marked": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
"integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
"license": "MIT",
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 18"
}
},
"node_modules/material-design-icons-iconfont": { "node_modules/material-design-icons-iconfont": {
"version": "6.7.0", "version": "6.7.0",
"resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-6.7.0.tgz", "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-6.7.0.tgz",
@ -4736,6 +4821,16 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/monaco-editor": {
"version": "0.55.1",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
"integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
"license": "MIT",
"dependencies": {
"dompurify": "3.2.7",
"marked": "14.0.0"
}
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -5074,9 +5169,9 @@
} }
}, },
"node_modules/reka-ui": { "node_modules/reka-ui": {
"version": "2.6.1", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.6.1.tgz", "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
"integrity": "sha512-XK7cJDQoNuGXfCNzBBo/81Yg/OgjPwvbabnlzXG2VsdSgNsT6iIkuPBPr+C0Shs+3bb0x0lbPvgQAhMSCKm5Ww==", "integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@floating-ui/dom": "^1.6.13", "@floating-ui/dom": "^1.6.13",
@ -5386,6 +5481,12 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/state-local": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
"license": "MIT"
},
"node_modules/striptags": { "node_modules/striptags": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz", "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",

4
package.json
View File

@ -30,6 +30,7 @@
"@fortawesome/free-regular-svg-icons": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2", "@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/vue-fontawesome": "^3.1.2", "@fortawesome/vue-fontawesome": "^3.1.2",
"@guolao/vue-monaco-editor": "^1.6.0",
"@headlessui/vue": "^1.7.23", "@headlessui/vue": "^1.7.23",
"@heroicons/vue": "^2.2.0", "@heroicons/vue": "^2.2.0",
"@internationalized/date": "^3.10.0", "@internationalized/date": "^3.10.0",
@ -47,9 +48,10 @@
"lodash": "^4.17.21", "lodash": "^4.17.21",
"lucide-vue-next": "^0.552.0", "lucide-vue-next": "^0.552.0",
"material-design-icons-iconfont": "^6.7.0", "material-design-icons-iconfont": "^6.7.0",
"monaco-editor": "^0.55.1",
"preline": "^2.7.0", "preline": "^2.7.0",
"quill": "^1.3.7", "quill": "^1.3.7",
"reka-ui": "^2.6.1", "reka-ui": "^2.7.0",
"tailwind-merge": "^3.4.0", "tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"tailwindcss-inner-border": "^0.2.0", "tailwindcss-inner-border": "^0.2.0",

34
resources/js/Components/ui/progress/Progress.vue Normal file
View File

@ -0,0 +1,34 @@
<script setup>
import { reactiveOmit } from "@vueuse/core";
import { ProgressIndicator, ProgressRoot } from "reka-ui";
import { cn } from "@/lib/utils";
const props = defineProps({
modelValue: { type: [Number, null], required: false, default: 0 },
max: { type: Number, required: false },
getValueLabel: { type: Function, required: false },
getValueText: { type: Function, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false },
});
const delegatedProps = reactiveOmit(props, "class");
</script>
<template>
<ProgressRoot
v-bind="delegatedProps"
:class="
cn(
'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
props.class,
)
"
>
<ProgressIndicator
class="h-full w-full flex-1 bg-primary transition-all"
:style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
/>
</ProgressRoot>
</template>

1
resources/js/Components/ui/progress/index.js Normal file
View File

@ -0,0 +1 @@
export { default as Progress } from "./Progress.vue";

221
resources/js/Layouts/AdminLayout.vue
View File

@ -1,23 +1,23 @@
<script setup> <script setup>
import { ref, computed, onMounted, onUnmounted } from "vue"; import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { Head, Link, router, usePage } from "@inertiajs/vue3"; import { Head, Link, router, usePage } from "@inertiajs/vue3";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { import {
faUserGroup, MenuIcon,
faShieldHalved, ChevronDownIcon,
faArrowLeft, ShieldCheckIcon,
faFileWord, UsersIcon,
faBars, KeyRoundIcon,
faGears, Settings2Icon,
faKey, FileTextIcon,
faEnvelope, MailOpenIcon,
faEnvelopeOpenText, InboxIcon,
faAt, AtSignIcon,
faInbox, BookUserIcon,
faFileLines, MessageSquareIcon,
faMessage, ArrowLeftIcon,
faAddressBook, } from "lucide-vue-next";
} from "@fortawesome/free-solid-svg-icons";
import Dropdown from "@/Components/Dropdown.vue"; import Dropdown from "@/Components/Dropdown.vue";
import DropdownLink from "@/Components/DropdownLink.vue"; import DropdownLink from "@/Components/DropdownLink.vue";
import GlobalSearch from "@/Layouts/Partials/GlobalSearch.vue"; import GlobalSearch from "@/Layouts/Partials/GlobalSearch.vue";
@ -29,25 +29,61 @@ import { Button } from "@/Components/ui/button";
const props = defineProps({ title: { type: String, default: "Administrator" } }); const props = defineProps({ title: { type: String, default: "Administrator" } });
// Basic state reused (simplified vs AppLayout) // Collapsible sidebar state (persisted when user explicitly toggles)
const sidebarCollapsed = ref(false); const sidebarCollapsed = ref(false);
const hasSavedSidebarPref = ref(false);
// Mobile off-canvas state
const isMobile = ref(false); const isMobile = ref(false);
const mobileSidebarOpen = ref(false); const mobileSidebarOpen = ref(false);
function handleResize() {
function applyAutoCollapse() {
if (typeof window === "undefined") return; if (typeof window === "undefined") return;
isMobile.value = window.innerWidth < 1024; isMobile.value = window.innerWidth < 1024; // Tailwind lg breakpoint
if (!isMobile.value) mobileSidebarOpen.value = false; sidebarCollapsed.value = isMobile.value;
sidebarCollapsed.value = isMobile.value; // auto collapse on small
} }
function handleResize() {
if (typeof window !== "undefined") {
isMobile.value = window.innerWidth < 1024;
if (!isMobile.value) mobileSidebarOpen.value = false; // close drawer when switching to desktop
}
if (!hasSavedSidebarPref.value) applyAutoCollapse();
}
onMounted(() => { onMounted(() => {
handleResize(); try {
const saved = localStorage.getItem("sidebarCollapsed");
if (saved !== null) {
hasSavedSidebarPref.value = true;
sidebarCollapsed.value = saved === "1";
} else {
applyAutoCollapse();
}
} catch {}
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
}); });
onUnmounted(() => window.removeEventListener("resize", handleResize)); onUnmounted(() => window.removeEventListener("resize", handleResize));
watch(sidebarCollapsed, (v) => {
if (!hasSavedSidebarPref.value) return; // don't persist auto behavior
try {
localStorage.setItem("sidebarCollapsed", v ? "1" : "0");
} catch {}
});
function toggleSidebar() { function toggleSidebar() {
if (isMobile.value) mobileSidebarOpen.value = !mobileSidebarOpen.value; hasSavedSidebarPref.value = true; // user explicitly chose
else sidebarCollapsed.value = !sidebarCollapsed.value; sidebarCollapsed.value = !sidebarCollapsed.value;
}
function toggleMobileSidebar() {
mobileSidebarOpen.value = !mobileSidebarOpen.value;
}
function handleSidebarToggleClick() {
if (isMobile.value) toggleMobileSidebar();
else toggleSidebar();
} }
const logout = () => router.post(route("logout")); const logout = () => router.post(route("logout"));
@ -63,7 +99,7 @@ const navGroups = computed(() => [
key: "admin.dashboard", key: "admin.dashboard",
label: "Pregled", label: "Pregled",
route: "admin.index", route: "admin.index",
icon: faShieldHalved, icon: ShieldCheckIcon,
active: ["admin.index"], active: ["admin.index"],
}, },
], ],
@ -76,14 +112,14 @@ const navGroups = computed(() => [
key: "admin.users", key: "admin.users",
label: "Uporabniki", label: "Uporabniki",
route: "admin.users.index", route: "admin.users.index",
icon: faUserGroup, icon: UsersIcon,
active: ["admin.users.index"], active: ["admin.users.index"],
}, },
{ {
key: "admin.permissions.index", key: "admin.permissions.index",
label: "Dovoljenja", label: "Dovoljenja",
route: "admin.permissions.index", route: "admin.permissions.index",
icon: faKey, icon: KeyRoundIcon,
active: ["admin.permissions.index", "admin.permissions.create"], active: ["admin.permissions.index", "admin.permissions.create"],
}, },
], ],
@ -96,14 +132,14 @@ const navGroups = computed(() => [
key: "admin.document-settings.index", key: "admin.document-settings.index",
label: "Nastavitve dokumentov", label: "Nastavitve dokumentov",
route: "admin.document-settings.index", route: "admin.document-settings.index",
icon: faGears, icon: Settings2Icon,
active: ["admin.document-settings.index"], active: ["admin.document-settings.index"],
}, },
{ {
key: "admin.document-templates.index", key: "admin.document-templates.index",
label: "Predloge dokumentov", label: "Predloge dokumentov",
route: "admin.document-templates.index", route: "admin.document-templates.index",
icon: faFileWord, icon: FileTextIcon,
active: ["admin.document-templates.index"], active: ["admin.document-templates.index"],
}, },
], ],
@ -116,7 +152,7 @@ const navGroups = computed(() => [
key: "admin.email-templates.index", key: "admin.email-templates.index",
label: "Email predloge", label: "Email predloge",
route: "admin.email-templates.index", route: "admin.email-templates.index",
icon: faEnvelopeOpenText, icon: MailOpenIcon,
active: [ active: [
"admin.email-templates.index", "admin.email-templates.index",
"admin.email-templates.create", "admin.email-templates.create",
@ -127,14 +163,14 @@ const navGroups = computed(() => [
key: "admin.email-logs.index", key: "admin.email-logs.index",
label: "Email dnevniki", label: "Email dnevniki",
route: "admin.email-logs.index", route: "admin.email-logs.index",
icon: faInbox, icon: InboxIcon,
active: ["admin.email-logs.index", "admin.email-logs.show"], active: ["admin.email-logs.index", "admin.email-logs.show"],
}, },
{ {
key: "admin.mail-profiles.index", key: "admin.mail-profiles.index",
label: "Mail profili", label: "Mail profili",
route: "admin.mail-profiles.index", route: "admin.mail-profiles.index",
icon: faAt, icon: AtSignIcon,
active: ["admin.mail-profiles.index"], active: ["admin.mail-profiles.index"],
}, },
], ],
@ -147,7 +183,7 @@ const navGroups = computed(() => [
key: "admin.sms-templates.index", key: "admin.sms-templates.index",
label: "SMS predloge", label: "SMS predloge",
route: "admin.sms-templates.index", route: "admin.sms-templates.index",
icon: faFileLines, icon: FileTextIcon,
active: [ active: [
"admin.sms-templates.index", "admin.sms-templates.index",
"admin.sms-templates.create", "admin.sms-templates.create",
@ -158,28 +194,28 @@ const navGroups = computed(() => [
key: "admin.sms-logs.index", key: "admin.sms-logs.index",
label: "SMS dnevniki", label: "SMS dnevniki",
route: "admin.sms-logs.index", route: "admin.sms-logs.index",
icon: faInbox, icon: InboxIcon,
active: ["admin.sms-logs.index", "admin.sms-logs.show"], active: ["admin.sms-logs.index", "admin.sms-logs.show"],
}, },
{ {
key: "admin.sms-senders.index", key: "admin.sms-senders.index",
label: "SMS pošiljatelji", label: "SMS pošiljatelji",
route: "admin.sms-senders.index", route: "admin.sms-senders.index",
icon: faAddressBook, icon: BookUserIcon,
active: ["admin.sms-senders.index"], active: ["admin.sms-senders.index"],
}, },
{ {
key: "admin.sms-profiles.index", key: "admin.sms-profiles.index",
label: "SMS profili", label: "SMS profili",
route: "admin.sms-profiles.index", route: "admin.sms-profiles.index",
icon: faGears, icon: Settings2Icon,
active: ["admin.sms-profiles.index"], active: ["admin.sms-profiles.index"],
}, },
{ {
key: "admin.packages.index", key: "admin.packages.index",
label: "SMS paketi", label: "SMS paketi",
route: "admin.packages.index", route: "admin.packages.index",
icon: faMessage, icon: MessageSquareIcon,
active: ["admin.packages.index", "admin.packages.show"], active: ["admin.packages.index", "admin.packages.show"],
}, },
], ],
@ -215,7 +251,9 @@ function isActive(patterns) {
: 'sticky top-0 h-screen overflow-y-auto', : 'sticky top-0 h-screen overflow-y-auto',
]" ]"
> >
<div class="h-16 px-4 flex items-center justify-between border-b border-gray-200 bg-white"> <div
class="h-16 px-4 flex items-center justify-between border-b border-gray-200 bg-white"
>
<Link <Link
:href="route('dashboard')" :href="route('dashboard')"
class="flex items-center gap-2 hover:opacity-80 transition-opacity" class="flex items-center gap-2 hover:opacity-80 transition-opacity"
@ -230,49 +268,49 @@ function isActive(patterns) {
</Link> </Link>
</div> </div>
<nav class="py-4 overflow-y-auto"> <nav class="py-4 overflow-y-auto">
<div v-for="group in navGroups" :key="group.key" class="mt-2 first:mt-0 px-2"> <ul class="space-y-4 px-2">
<p <li v-for="group in navGroups" :key="group.label">
v-if="!sidebarCollapsed" <div
class="px-4 py-1.5 mb-1 mt-4 first:mt-0 text-[11px] font-semibold uppercase tracking-wider text-gray-400" v-if="!sidebarCollapsed"
> class="px-4 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-sidebar-foreground/60"
{{ group.label }} >
</p> {{ group.label }}
<ul class="space-y-0.5"> </div>
<li v-for="item in group.items" :key="item.key"> <ul class="space-y-0.5">
<Link <li v-for="item in group.items" :key="item.key">
:href="route(item.route)" <Link
:title="item.label" :href="route(item.route)"
:class="[ :title="item.label"
'flex items-center gap-3 px-3 py-2.5 text-sm rounded-lg transition-all duration-150',
isActive(item.active)
? 'bg-primary-50 text-primary-700 font-medium shadow-sm'
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
]"
>
<FontAwesomeIcon
:icon="item.icon"
:class="[ :class="[
'w-5 h-5 flex-shrink-0 transition-colors', 'flex items-center gap-3 px-3 py-2.5 text-sm rounded-lg transition-all duration-150',
isActive(item.active) ? 'text-primary-600' : 'text-gray-500', isActive(item.active)
? 'bg-sidebar-primary/15 text-sidebar-primary font-medium shadow-sm'
: 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
]" ]"
/>
<span
v-if="!sidebarCollapsed"
class="truncate transition-opacity"
:class="{ 'font-medium': isActive(item.active) }"
> >
{{ item.label }} <component
</span> v-if="item.icon"
</Link> :is="item.icon"
</li> class="w-5 h-5 shrink-0 transition-colors"
</ul> />
</div> <span
v-if="!sidebarCollapsed"
class="truncate transition-opacity"
:class="{ 'font-medium': isActive(item.active) }"
>
{{ item.label }}
</span>
</Link>
</li>
</ul>
</li>
</ul>
<div class="mt-6 border-t border-gray-200 pt-4 space-y-2 px-4"> <div class="mt-6 border-t border-gray-200 pt-4 space-y-2 px-4">
<Link <Link
:href="route('dashboard')" :href="route('dashboard')"
class="text-xs text-gray-500 hover:text-gray-700 hover:underline flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors" class="text-xs hover:underline flex items-center gap-2 px-3 py-2 rounded-lg text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-all duration-150"
> >
<FontAwesomeIcon :icon="faArrowLeft" class="w-3.5 h-3.5" /> <ArrowLeftIcon size="18" />
<span v-if="!sidebarCollapsed">Nazaj na aplikacijo</span> <span v-if="!sidebarCollapsed">Nazaj na aplikacijo</span>
</Link> </Link>
</div> </div>
@ -287,10 +325,11 @@ function isActive(patterns) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@click="toggleSidebar" @click="handleSidebarToggleClick"
:title="sidebarCollapsed ? 'Razširi meni' : 'Skrči meni'"
aria-label="Toggle sidebar" aria-label="Toggle sidebar"
> >
<FontAwesomeIcon :icon="faBars" class="w-5 h-5" /> <MenuIcon />
</Button> </Button>
<h1 class="text-base font-semibold text-gray-900 hidden sm:block"> <h1 class="text-base font-semibold text-gray-900 hidden sm:block">
{{ title }} {{ title }}
@ -314,27 +353,9 @@ function isActive(patterns) {
</button> </button>
<span v-else class="inline-flex"> <span v-else class="inline-flex">
<Button <Button variant="outline" size="default" type="button" class="gap-2">
variant="outline"
size="default"
type="button"
class="gap-2"
>
{{ $page.props.auth.user.name }} {{ $page.props.auth.user.name }}
<svg <ChevronDownIcon />
class="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</Button> </Button>
</span> </span>
</template> </template>
@ -358,10 +379,7 @@ function isActive(patterns) {
</div> </div>
<!-- Page Heading --> <!-- Page Heading -->
<header <header v-if="$slots.header" class="bg-white border-b border-gray-200 shadow-sm">
v-if="$slots.header"
class="bg-white border-b border-gray-200 shadow-sm"
>
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 space-y-2"> <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 space-y-2">
<Breadcrumbs <Breadcrumbs
v-if="$page.props.breadcrumbs && $page.props.breadcrumbs.length" v-if="$page.props.breadcrumbs && $page.props.breadcrumbs.length"
@ -376,10 +394,7 @@ function isActive(patterns) {
</main> </main>
</div> </div>
<GlobalSearch :open="false" />
<!-- Toast Notification Container --> <!-- Toast Notification Container -->
<ToastContainer /> <ToastContainer />
</div> </div>
</template> </template>

251
resources/js/Pages/Admin/DocumentSettings/Edit.vue
View File

@ -2,6 +2,32 @@
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { useForm } from "@inertiajs/vue3"; import { useForm } from "@inertiajs/vue3";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import {
Settings2Icon,
SaveIcon,
CheckCircle2Icon,
AlertCircleIcon,
} from "lucide-vue-next";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { Switch } from "@/Components/ui/switch";
import { Alert, AlertDescription } from "@/Components/ui/alert";
const props = defineProps({ settings: Object, defaults: Object }); const props = defineProps({ settings: Object, defaults: Object });
const form = useForm({ const form = useForm({
@ -70,92 +96,147 @@ function submit() {
<template> <template>
<AdminLayout title="Nastavitve dokumentov"> <AdminLayout title="Nastavitve dokumentov">
<div class="max-w-3xl mx-auto space-y-6"> <div class="max-w-4xl mx-auto">
<h1 class="text-2xl font-semibold">Nastavitve dokumentov</h1> <Card>
<form @submit.prevent="submit" class="space-y-6 bg-white p-6 border rounded"> <CardHeader>
<div class="grid md:grid-cols-2 gap-4"> <div class="flex items-start gap-3">
<label class="flex flex-col gap-1"> <div
<span class="text-sm font-medium">Vzorec imena</span> class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
<input v-model="form.file_name_pattern" class="border rounded px-3 py-2" />
<span class="text-xs text-gray-500"
>Podprti placeholderji: {slug} {version} {generation.date}
{generation.timestamp}</span
> >
<span v-if="form.errors.file_name_pattern" class="text-xs text-rose-600">{{ <Settings2Icon class="h-5 w-5" />
form.errors.file_name_pattern </div>
}}</span> <div>
</label> <CardTitle>Nastavitve dokumentov</CardTitle>
<label class="flex flex-col gap-1"> <CardDescription>
<span class="text-sm font-medium">Privzeti datum format</span> Konfiguracija generiranja dokumentov, vzorcev imen in formatiranja
<input v-model="form.date_format" class="border rounded px-3 py-2" /> </CardDescription>
<span class="text-xs text-gray-500">npr. Y-m-d ali d.m.Y</span> </div>
<span v-if="form.errors.date_format" class="text-xs text-rose-600">{{ </div>
form.errors.date_format </CardHeader>
}}</span> <CardContent>
</label> <form @submit.prevent="submit" class="space-y-6">
<label class="flex flex-col gap-1"> <!-- Basic Settings -->
<span class="text-sm font-medium">Politika nerešenih</span> <div class="space-y-4">
<select v-model="form.unresolved_policy" class="border rounded px-3 py-2"> <h3 class="text-sm font-semibold">Osnovne nastavitve</h3>
<option value="fail">Fail</option> <div class="grid md:grid-cols-2 gap-4">
<option value="blank">Blank</option> <div class="space-y-2">
<option value="keep">Keep</option> <Label for="file_name_pattern">Vzorec imena datoteke</Label>
</select> <Input
<span v-if="form.errors.unresolved_policy" class="text-xs text-rose-600">{{ id="file_name_pattern"
form.errors.unresolved_policy v-model="form.file_name_pattern"
}}</span> class="font-mono text-sm"
</label> />
<label class="flex items-center gap-2 mt-6"> <p class="text-xs text-muted-foreground">
<input Podprti placeholderji: {slug} {version} {generation.date}
type="checkbox" {generation.timestamp}
v-model="form.preview_enabled" </p>
true-value="1" <p
false-value="0" v-if="form.errors.file_name_pattern"
/> class="text-sm text-destructive"
<span class="text-sm font-medium">Omogoči predoglede</span> >
</label> {{ form.errors.file_name_pattern }}
</div> </p>
<div class="grid md:grid-cols-2 gap-6"> </div>
<label class="flex flex-col gap-1">
<span class="text-sm font-medium">Whitelist (JSON)</span> <div class="space-y-2">
<textarea <Label for="date_format">Privzeti datum format</Label>
v-model="form.whitelist" <Input
rows="8" id="date_format"
class="font-mono text-xs border rounded p-2" v-model="form.date_format"
></textarea> placeholder="Y-m-d"
<span v-if="whitelistError" class="text-xs text-rose-600">{{ class="font-mono text-sm"
whitelistError />
}}</span> <p class="text-xs text-muted-foreground">npr. Y-m-d ali d.m.Y</p>
<span v-else-if="form.errors.whitelist" class="text-xs text-rose-600">{{ <p v-if="form.errors.date_format" class="text-sm text-destructive">
form.errors.whitelist {{ form.errors.date_format }}
}}</span> </p>
</label> </div>
<label class="flex flex-col gap-1">
<span class="text-sm font-medium">Date formats override (JSON)</span> <div class="space-y-2">
<textarea <Label for="unresolved_policy">Politika nerešenih spremenljivk</Label>
v-model="form.date_formats" <Select v-model="form.unresolved_policy">
rows="8" <SelectTrigger id="unresolved_policy">
class="font-mono text-xs border rounded p-2" <SelectValue />
></textarea> </SelectTrigger>
<span class="text-xs text-gray-500" <SelectContent>
>Primer: {"contract.start_date":"d.m.Y"}</span <SelectItem value="fail">Fail (napaka)</SelectItem>
> <SelectItem value="blank">Blank (prazno)</SelectItem>
<span v-if="dateFormatsError" class="text-xs text-rose-600">{{ <SelectItem value="keep">Keep (obdrži)</SelectItem>
dateFormatsError </SelectContent>
}}</span> </Select>
</label> <p
</div> v-if="form.errors.unresolved_policy"
<div class="flex items-center gap-3"> class="text-sm text-destructive"
<button >
:disabled="form.processing" {{ form.errors.unresolved_policy }}
class="px-4 py-2 bg-indigo-600 text-white rounded disabled:opacity-50" </p>
> </div>
{{ form.processing ? "Shranjevanje..." : "Shrani" }}
</button> <div class="flex items-center gap-2 pt-8">
<span v-if="form.wasSuccessful" class="text-sm text-emerald-600" <Switch id="preview_enabled" v-model="form.preview_enabled" />
>Shranjeno</span <Label for="preview_enabled" class="cursor-pointer">
> Omogoči predoglede dokumentov
</div> </Label>
</form> </div>
</div>
</div>
<!-- JSON Configuration -->
<div class="space-y-4">
<h3 class="text-sm font-semibold">Napišrana konfiguracija (JSON)</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="space-y-2">
<Label for="whitelist">Whitelist (dovoljeni tokeni)</Label>
<Textarea
id="whitelist"
v-model="form.whitelist"
rows="10"
class="font-mono text-xs"
placeholder='{"entity": ["column1", "column2"]}'
/>
<Alert v-if="whitelistError" variant="destructive" class="py-2">
<AlertCircleIcon class="h-4 w-4" />
<AlertDescription>{{ whitelistError }}</AlertDescription>
</Alert>
<p v-else-if="form.errors.whitelist" class="text-sm text-destructive">
{{ form.errors.whitelist }}
</p>
</div>
<div class="space-y-2">
<Label for="date_formats">Date formats override (JSON)</Label>
<Textarea
id="date_formats"
v-model="form.date_formats"
rows="10"
class="font-mono text-xs"
placeholder='{"contract.start_date": "d.m.Y"}'
/>
<p class="text-xs text-muted-foreground">
Primer: {"contract.start_date":"d.m.Y"}
</p>
<Alert v-if="dateFormatsError" variant="destructive" class="py-2">
<AlertCircleIcon class="h-4 w-4" />
<AlertDescription>{{ dateFormatsError }}</AlertDescription>
</Alert>
</div>
</div>
</div>
<!-- Actions -->
<div class="flex items-center gap-3 pt-4">
<Button :disabled="form.processing" type="submit">
<SaveIcon class="h-4 w-4 mr-2" />
{{ form.processing ? "Shranjevanje..." : "Shrani nastavitve" }}
</Button>
<Alert v-if="form.wasSuccessful" class="py-2 px-3 w-auto">
<CheckCircle2Icon class="h-4 w-4 text-green-600" />
<AlertDescription class="text-green-600">Shranjeno</AlertDescription>
</Alert>
</div>
</form>
</CardContent>
</Card>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>

116
resources/js/Pages/Admin/DocumentSettings/Index.vue
View File

@ -1,5 +1,12 @@
<script setup> <script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue' import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Link } from '@inertiajs/vue3'
import { Settings2Icon, FileTextIcon, CalendarIcon, AlertTriangleIcon, ListIcon, PencilIcon } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'
import { Badge } from '@/Components/ui/badge'
import { Button } from '@/Components/ui/button'
import { Separator } from '@/Components/ui/separator'
const props = defineProps({ const props = defineProps({
config: Object, config: Object,
}) })
@ -7,26 +14,95 @@ const props = defineProps({
<template> <template>
<AdminLayout title="Nastavitve dokumentov"> <AdminLayout title="Nastavitve dokumentov">
<h1 class="text-2xl font-semibold mb-4">Nastavitve dokumentov</h1> <div class="max-w-4xl mx-auto space-y-6">
<div class="space-y-4"> <Card>
<div class="p-4 bg-white rounded border"> <CardHeader>
<h2 class="font-medium mb-2">Privzeti vzorci</h2> <div class="flex items-start justify-between">
<p class="text-sm text-gray-600">Ime datoteke: <code class="px-1 bg-gray-100 rounded">{{ config.file_name_pattern }}</code></p> <div class="flex items-start gap-3">
<p class="text-sm text-gray-600">Format datuma: <code class="px-1 bg-gray-100 rounded">{{ config.date_format }}</code></p> <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
<p class="text-sm text-gray-600">Politika nerešenih: <code class="px-1 bg-gray-100 rounded">{{ config.unresolved_policy }}</code></p> <Settings2Icon class="h-5 w-5" />
</div> </div>
<div class="p-4 bg-white rounded border"> <div>
<h2 class="font-medium mb-2">Dovoljeni tokeni (whitelist)</h2> <CardTitle>Nastavitve dokumentov</CardTitle>
<div v-for="(cols, entity) in config.whitelist" :key="entity" class="mb-3"> <CardDescription>
<div class="text-sm font-semibold">{{ entity }}</div> Sistemska konfiguracija za generiranje in upravljanje dokumentov
<div class="text-xs text-gray-600" v-if="cols.length">{{ cols.join(', ') }}</div> </CardDescription>
<div class="text-xs text-gray-400" v-else>(brez specifičnih stolpcev)</div> </div>
</div> </div>
</div> <Button size="sm" as-child>
<div class="p-4 bg-white rounded border"> <Link :href="route('admin.document-settings.edit')">
<h2 class="font-medium mb-2">Uredi (prihaja)</h2> <PencilIcon class="h-4 w-4 mr-2" />
<p class="text-xs text-gray-500">Za urejanje bo dodan obrazec. Trenutno spremembe izvedite v <code>config/documents.php</code>.</p> Uredi
</div> </Link>
</Button>
</div>
</CardHeader>
<CardContent class="space-y-6">
<!-- Basic Configuration -->
<div class="space-y-4">
<h3 class="text-sm font-semibold flex items-center gap-2">
<FileTextIcon class="h-4 w-4" />
Privzeti vzorci
</h3>
<div class="grid gap-3">
<div class="flex items-start justify-between p-3 rounded-lg border bg-muted/50">
<div>
<p class="text-sm font-medium">Ime datoteke</p>
<p class="text-xs text-muted-foreground mt-0.5">Vzorec za generiranje imen</p>
</div>
<Badge variant="secondary" class="font-mono text-xs">
{{ config.file_name_pattern }}
</Badge>
</div>
<div class="flex items-start justify-between p-3 rounded-lg border bg-muted/50">
<div>
<p class="text-sm font-medium">Format datuma</p>
<p class="text-xs text-muted-foreground mt-0.5">Privzeto formatiranje datumov</p>
</div>
<Badge variant="secondary" class="font-mono text-xs">
{{ config.date_format }}
</Badge>
</div>
<div class="flex items-start justify-between p-3 rounded-lg border bg-muted/50">
<div>
<p class="text-sm font-medium">Politika nerešenih</p>
<p class="text-xs text-muted-foreground mt-0.5">Vedenje pri nerešenih spremenljivkah</p>
</div>
<Badge variant="secondary" class="font-mono text-xs">
{{ config.unresolved_policy }}
</Badge>
</div>
</div>
</div>
<Separator />
<!-- Whitelist Configuration -->
<div class="space-y-4">
<h3 class="text-sm font-semibold flex items-center gap-2">
<ListIcon class="h-4 w-4" />
Dovoljeni tokeni (whitelist)
</h3>
<div class="grid gap-3">
<Card v-for="(cols, entity) in config.whitelist" :key="entity" class="border-muted">
<CardHeader class="pb-3">
<CardTitle class="text-sm font-mono">{{ entity }}</CardTitle>
</CardHeader>
<CardContent>
<div v-if="cols.length" class="flex flex-wrap gap-1.5">
<Badge v-for="col in cols" :key="col" variant="outline" class="text-xs font-mono">
{{ col }}
</Badge>
</div>
<p v-else class="text-xs text-muted-foreground italic">
(brez specifičnih stolpcev)
</p>
</CardContent>
</Card>
</div>
</div>
</CardContent>
</Card>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>

609
resources/js/Pages/Admin/DocumentTemplates/Edit.vue
View File

@ -1,327 +1,352 @@
<template> <template>
<AdminLayout title="Uredi predlogo"> <AdminLayout title="Uredi predlogo">
<div class="mb-6 flex flex-col lg:flex-row lg:items-start gap-6"> <div class="mb-6 flex flex-col lg:flex-row lg:items-start gap-6">
<div class="flex-1 min-w-[320px]"> <div class="flex-1 min-w-[320px] space-y-6">
<div class="flex items-start justify-between gap-4 mb-4"> <Card>
<div> <CardHeader>
<h1 class="text-2xl font-semibold tracking-tight">{{ template.name }}</h1> <div class="flex items-start justify-between gap-4">
<p class="text-xs text-gray-500 mt-1 flex flex-wrap gap-3"> <div class="flex items-start gap-3">
<span class="inline-flex items-center gap-1" <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
><span class="text-gray-400">Slug:</span <FileTextIcon class="h-5 w-5" />
><span class="font-medium">{{ template.slug }}</span></span </div>
> <div>
<span class="inline-flex items-center gap-1" <CardTitle>{{ template.name }}</CardTitle>
><span class="text-gray-400">Verzija:</span <CardDescription class="flex flex-wrap gap-3 mt-1">
><span class="font-medium">v{{ template.version }}</span></span <span class="inline-flex items-center gap-1">
> <span>Slug:</span>
<span <Badge variant="secondary" class="text-xs">{{ template.slug }}</Badge>
class="inline-flex items-center gap-1" </span>
:class="template.active ? 'text-emerald-600' : 'text-gray-400'" <span class="inline-flex items-center gap-1">
><span <span>Verzija:</span>
class="w-1.5 h-1.5 rounded-full" <Badge variant="secondary" class="text-xs">v{{ template.version }}</Badge>
:class="template.active ? 'bg-emerald-500' : 'bg-gray-300'" </span>
/> <Badge :variant="template.active ? 'default' : 'outline'" class="text-xs">
{{ template.active ? "Aktivna" : "Neaktivna" }}</span {{ template.active ? "Aktivna" : "Neaktivna" }}
> </Badge>
</p> </CardDescription>
</div> </div>
<form @submit.prevent="toggleActive" class="flex items-center gap-2"> </div>
<button <div class="flex items-center gap-2">
type="submit" <form @submit.prevent="toggleActive">
:class="[btnBase, template.active ? btnWarn : btnOutline]" <Button
:disabled="toggleForm.processing" type="submit"
> :variant="template.active ? 'destructive' : 'default'"
<span v-if="toggleForm.processing">...</span> size="sm"
<span v-else>{{ template.active ? "Deaktiviraj" : "Aktiviraj" }}</span> :disabled="toggleForm.processing"
</button> >
<Link <PowerOffIcon v-if="template.active" class="h-4 w-4 mr-2" />
:href="route('admin.document-templates.show', template.id)" <Power v-else class="h-4 w-4 mr-2" />
:class="[btnBase, btnOutline]" {{ template.active ? "Deaktiviraj" : "Aktiviraj" }}
>Ogled</Link </Button>
> </form>
</form> <Button size="sm" variant="outline" as-child>
</div> <Link :href="route('admin.document-templates.show', template.id)">
<EyeIcon class="h-4 w-4 mr-2" />
Ogled
</Link>
</Button>
</div>
</div>
</CardHeader>
</Card>
<form @submit.prevent="submit" class="space-y-8"> <form @submit.prevent="submit" class="space-y-6">
<!-- Osnovno --> <!-- Osnovno -->
<div class="bg-white border rounded-lg shadow-sm p-5 space-y-5"> <Card>
<div class="flex items-center justify-between"> <CardHeader>
<h2 class="text-sm font-semibold tracking-wide text-gray-700 uppercase"> <div class="flex items-center gap-2">
Osnovne nastavitve <Settings2Icon class="h-4 w-4" />
</h2> <CardTitle class="text-base">Osnovne nastavitve</CardTitle>
</div> </div>
<div class="grid md:grid-cols-2 gap-6"> </CardHeader>
<label class="space-y-1 block"> <CardContent class="space-y-4">
<span class="text-xs font-medium text-gray-600" <div class="grid md:grid-cols-2 gap-4">
>Izlazna datoteka (pattern)</span <div class="space-y-2">
> <Label for="output_filename_pattern">Izlazna datoteka (pattern)</Label>
<input <Input
v-model="form.output_filename_pattern" id="output_filename_pattern"
type="text" v-model="form.output_filename_pattern"
class="input input-bordered w-full input-sm" placeholder="POVRACILO_{contract.reference}"
placeholder="POVRACILO_{contract.reference}" class="font-mono text-sm"
/>
<p class="text-xs text-muted-foreground">
Tokens npr. {contract.reference}
</p>
</div>
<div class="space-y-2">
<Label for="date_format">Privzeti format datuma</Label>
<Input
id="date_format"
v-model="form.date_format"
placeholder="d.m.Y"
class="font-mono text-sm"
/>
</div>
</div>
<div class="flex items-center gap-2">
<Checkbox
id="fail_on_unresolved"
:default-value="form.fail_on_unresolved"
@update:model-value="(val) => (form.fail_on_unresolved = val)"
/> />
<span class="text-[11px] text-gray-500" <Label for="fail_on_unresolved" class="cursor-pointer font-normal">
>Tokens npr. {contract.reference}</span Prekini če token ni rešen (fail on unresolved)
> </Label>
</label> </div>
<label class="space-y-1 block"> </CardContent>
<span class="text-xs font-medium text-gray-600" </Card>
>Privzeti format datuma</span
>
<input
v-model="form.date_format"
type="text"
class="input input-bordered w-full input-sm"
placeholder="d.m.Y"
/>
</label>
</div>
<label class="flex items-center gap-2 text-xs font-medium text-gray-600">
<input
id="fail_on_unresolved"
type="checkbox"
v-model="form.fail_on_unresolved"
class="checkbox checkbox-xs"
/>
<span>Prekini če token ni rešen (fail on unresolved)</span>
</label>
</div>
<!-- Formatiranje --> <!-- Formatiranje -->
<div class="bg-white border rounded-lg shadow-sm p-5 space-y-5"> <Card>
<h2 class="text-sm font-semibold tracking-wide text-gray-700 uppercase"> <CardHeader>
Formatiranje <div class="flex items-center gap-2">
</h2> <FileTextIcon class="h-4 w-4" />
<div class="grid md:grid-cols-3 gap-5"> <CardTitle class="text-base">Formatiranje</CardTitle>
<label class="space-y-1 block"> </div>
<span class="text-xs font-medium text-gray-600">Decimalna mesta</span> </CardHeader>
<input <CardContent>
v-model.number="form.number_decimals" <div class="grid md:grid-cols-3 gap-4">
type="number" <div class="space-y-2">
min="0" <Label for="number_decimals">Decimalna mesta</Label>
max="6" <Input
class="input input-bordered w-full input-sm" id="number_decimals"
/> v-model.number="form.number_decimals"
</label> type="number"
<label class="space-y-1 block"> min="0"
<span class="text-xs font-medium text-gray-600">Decimalni separator</span> max="6"
<input />
v-model="form.decimal_separator" </div>
type="text" <div class="space-y-2">
maxlength="2" <Label for="decimal_separator">Decimalni separator</Label>
class="input input-bordered w-full input-sm" <Input
/> id="decimal_separator"
</label> v-model="form.decimal_separator"
<label class="space-y-1 block"> maxlength="2"
<span class="text-xs font-medium text-gray-600">Tisocice separator</span> />
<input </div>
v-model="form.thousands_separator" <div class="space-y-2">
type="text" <Label for="thousands_separator">Tisočice separator</Label>
maxlength="2" <Input
class="input input-bordered w-full input-sm" id="thousands_separator"
/> v-model="form.thousands_separator"
</label> maxlength="2"
<label class="space-y-1 block"> />
<span class="text-xs font-medium text-gray-600">Znak valute</span> </div>
<input <div class="space-y-2">
v-model="form.currency_symbol" <Label for="currency_symbol">Znak valute</Label>
type="text" <Input
maxlength="8" id="currency_symbol"
class="input input-bordered w-full input-sm" v-model="form.currency_symbol"
/> maxlength="8"
</label> />
<label class="space-y-1 block"> </div>
<span class="text-xs font-medium text-gray-600">Pozicija valute</span> <div class="space-y-2">
<select <Label for="currency_position">Pozicija valute</Label>
v-model="form.currency_position" <Select v-model="form.currency_position">
class="select select-bordered select-sm w-full" <SelectTrigger id="currency_position">
> <SelectValue />
<option :value="null">(privzeto)</option> </SelectTrigger>
<option value="before">Pred</option> <SelectContent>
<option value="after">Za</option> <SelectItem :value="null">(privzeto)</SelectItem>
</select> <SelectItem value="before">Pred</SelectItem>
</label> <SelectItem value="after">Za</SelectItem>
<label </SelectContent>
class="flex items-center gap-2 space-y-0 pt-6 text-xs font-medium text-gray-600" </Select>
> </div>
<input <div class="flex items-center gap-2 pt-8">
id="currency_space" <Checkbox
type="checkbox" id="currency_space"
v-model="form.currency_space" :default-value="form.currency_space"
class="checkbox checkbox-xs" @update:model-value="(val) => (form.currency_space = val)"
/> />
<span>Presledek pred/za valuto</span> <Label for="currency_space" class="cursor-pointer font-normal">
</label> Presledek pred/za valuto
</div> </Label>
</div> </div>
</div>
</CardContent>
</Card>
<!-- Aktivnost --> <!-- Aktivnost -->
<div class="bg-white border rounded-lg shadow-sm p-5 space-y-5"> <Card>
<h2 class="text-sm font-semibold tracking-wide text-gray-700 uppercase"> <CardHeader>
Aktivnost <div class="flex items-center gap-2">
</h2> <ActivityIcon class="h-4 w-4" />
<div class="grid md:grid-cols-2 gap-6"> <CardTitle class="text-base">Aktivnost</CardTitle>
<label class="space-y-1 block"> </div>
<span class="text-xs font-medium text-gray-600">Akcija</span> </CardHeader>
<select <CardContent class="space-y-4">
v-model="form.action_id" <div class="grid md:grid-cols-2 gap-4">
class="select select-bordered select-sm w-full" <div class="space-y-2">
@change="handleActionChange" <Label for="action_id">Akcija</Label>
> <Select v-model="form.action_id" @update:model-value="handleActionChange">
<option :value="null">(brez)</option> <SelectTrigger id="action_id">
<option v-for="a in actions" :key="a.id" :value="a.id"> <SelectValue placeholder="(brez)" />
{{ a.name }} </SelectTrigger>
</option> <SelectContent>
</select> <SelectItem :value="null">(brez)</SelectItem>
</label> <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
<label class="space-y-1 block"> {{ a.name }}
<span class="text-xs font-medium text-gray-600">Odločitev</span> </SelectItem>
<select </SelectContent>
v-model="form.decision_id" </Select>
class="select select-bordered select-sm w-full" </div>
:disabled="!currentActionDecisions.length" <div class="space-y-2">
> <Label for="decision_id">Odločitev</Label>
<option :value="null">(brez)</option> <Select v-model="form.decision_id" :disabled="!currentActionDecisions.length">
<option v-for="d in currentActionDecisions" :key="d.id" :value="d.id"> <SelectTrigger id="decision_id">
{{ d.name }} <SelectValue placeholder="(brez)" />
</option> </SelectTrigger>
</select> <SelectContent>
</label> <SelectItem :value="null">(brez)</SelectItem>
<label class="space-y-1 md:col-span-2 block"> <SelectItem v-for="d in currentActionDecisions" :key="d.id" :value="d.id">
<span class="text-xs font-medium text-gray-600" {{ d.name }}
>Predloga opombe aktivnosti</span </SelectItem>
> </SelectContent>
<textarea </Select>
v-model="form.activity_note_template" </div>
rows="3" <div class="space-y-2 md:col-span-2">
class="textarea textarea-bordered w-full text-xs" <Label for="activity_note_template">Predloga opombe aktivnosti</Label>
placeholder="Besedilo aktivnosti..." <Textarea
/> id="activity_note_template"
<span class="text-[11px] text-gray-500" v-model="form.activity_note_template"
>Tokeni npr. {contract.reference}</span rows="3"
> placeholder="Besedilo aktivnosti..."
</label> />
</div> <p class="text-xs text-muted-foreground">
</div> Tokeni npr. {contract.reference}
</p>
</div>
</div>
</CardContent>
</Card>
<!-- Custom tokens defaults --> <!-- Custom tokens defaults -->
<div class="bg-white border rounded-lg shadow-sm p-5 space-y-5"> <Card>
<h2 class="text-sm font-semibold tracking-wide text-gray-700 uppercase"> <CardHeader>
Custom tokens (privzete vrednosti)
</h2>
<div class="space-y-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" :class="[btnBase, btnOutline]" @click="addCustomDefault"> <CodeIcon class="h-4 w-4" />
Dodaj vrstico <CardTitle class="text-base">Custom tokens (privzete vrednosti)</CardTitle>
</button>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3"> </CardHeader>
<CardContent class="space-y-4">
<Button type="button" variant="outline" size="sm" @click="addCustomDefault">
Dodaj vrstico
</Button>
<div class="grid grid-cols-1 gap-3">
<div <div
v-for="(row, idx) in customRows" v-for="(row, idx) in customRows"
:key="idx" :key="idx"
class="grid grid-cols-12 items-center gap-2" class="grid grid-cols-12 items-start gap-2"
> >
<input <div class="col-span-4 space-y-1">
v-model="row.key" <Input
type="text" v-model="row.key"
class="input input-bordered input-sm w-full col-span-4" placeholder="custom ključ (npr. order_id)"
placeholder="custom ključ (npr. order_id)" class="font-mono text-sm"
/> />
<template v-if="row.type === 'text'"> </div>
<textarea <div class="col-span-5 space-y-1">
<Textarea
v-if="row.type === 'text'"
v-model="row.value" v-model="row.value"
rows="3" rows="3"
class="textarea textarea-bordered w-full text-xs col-span-5"
placeholder="privzeta vrednost" placeholder="privzeta vrednost"
/> />
</template> <Input
<template v-else> v-else
<input
v-model="row.value" v-model="row.value"
type="text"
class="input input-bordered input-sm w-full col-span-5"
placeholder="privzeta vrednost" placeholder="privzeta vrednost"
/> />
</template> </div>
<select v-model="row.type" class="select select-bordered select-sm w-full col-span-2"> <div class="col-span-2 space-y-1">
<option value="string">string</option> <Select v-model="row.type">
<option value="number">number</option> <SelectTrigger>
<option value="date">date</option> <SelectValue />
<option value="text">text</option> </SelectTrigger>
</select> <SelectContent>
<button type="button" class="btn btn-ghost btn-xs col-span-1" @click="removeCustomDefault(idx)">✕</button> <SelectItem value="string">string</SelectItem>
<SelectItem value="number">number</SelectItem>
<SelectItem value="date">date</SelectItem>
<SelectItem value="text">text</SelectItem>
</SelectContent>
</Select>
</div>
<div class="col-span-1 flex items-center pt-2">
<Button type="button" variant="ghost" size="icon" @click="removeCustomDefault(idx)">
<XIcon class="h-4 w-4" />
</Button>
</div>
</div> </div>
</div> </div>
<p class="text-[11px] text-gray-500"> <p class="text-xs text-muted-foreground">
Uporabite v predlogi kot <code v-pre>{{custom.your_key}}</code>. Manjkajoče vrednosti se privzeto izpraznijo. Uporabite v predlogi kot <code class="px-1 py-0.5 bg-muted rounded text-xs" v-pre>{{custom.your_key}}</code>. Manjkajoče vrednosti se privzeto izpraznijo.
</p> </p>
</div> </CardContent>
</div> </Card>
<div class="flex items-center gap-3 pt-2"> <div class="flex items-center gap-3 pt-2">
<button <Button type="submit" :disabled="form.processing">
type="submit" <SaveIcon class="h-4 w-4 mr-2" />
:class="[btnBase, btnPrimary]" {{ form.processing ? "Shranjevanje…" : "Shrani spremembe" }}
:disabled="form.processing" </Button>
> <Button variant="outline" as-child>
<span v-if="form.processing">Shranjevanje…</span> <Link :href="route('admin.document-templates.show', template.id)">
<span v-else>Shrani spremembe</span> <XIcon class="h-4 w-4 mr-2" />
</button> Prekliči
<Link </Link>
:href="route('admin.document-templates.show', template.id)" </Button>
:class="[btnBase, btnOutline]"
>Prekliči</Link
>
</div> </div>
</form> </form>
</div> </div>
<!-- Side meta panel --> <!-- Side meta panel -->
<aside class="w-full lg:w-72 space-y-6"> <aside class="w-full lg:w-72 space-y-6">
<div class="bg-white border rounded-lg shadow-sm p-4 space-y-3"> <Card>
<h3 class="text-xs font-semibold tracking-wide text-gray-600 uppercase"> <CardHeader>
Meta <CardTitle class="text-sm">Meta podatki</CardTitle>
</h3> </CardHeader>
<ul class="text-xs text-gray-600 space-y-1"> <CardContent class="space-y-4">
<li> <div class="space-y-2 text-sm">
<span class="text-gray-400">Velikost:</span> <div class="flex justify-between">
<span class="font-medium" <span class="text-muted-foreground">Velikost:</span>
>{{ (template.file_size / 1024).toFixed(1) }} KB</span <Badge variant="secondary">{{ (template.file_size / 1024).toFixed(1) }} KB</Badge>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Hash:</span>
<code class="text-xs">{{ template.file_hash?.substring(0, 12) }}…</code>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Engine:</span>
<Badge variant="outline">{{ template.engine }}</Badge>
</div>
</div>
<Separator />
<Button variant="outline" size="sm" class="w-full" as-child>
<a :href="'/storage/' + template.file_path" target="_blank">
Prenesi izvorni DOCX
</a>
</Button>
</CardContent>
</Card>
<Card v-if="template.tokens?.length">
<CardHeader>
<CardTitle class="text-sm">Tokens</CardTitle>
<CardDescription>{{ template.tokens.length }} tokenov</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-wrap gap-1.5 max-h-48 overflow-auto">
<Badge
v-for="t in template.tokens"
:key="t"
variant="secondary"
class="font-mono text-xs"
> >
</li> {{ t }}
<li> </Badge>
<span class="text-gray-400">Hash:</span> </div>
<span class="font-mono">{{ template.file_hash?.substring(0, 12) }}…</span> </CardContent>
</li> </Card>
<li>
<span class="text-gray-400">Engine:</span>
<span class="font-medium">{{ template.engine }}</span>
</li>
</ul>
<a
:href="'/storage/' + template.file_path"
target="_blank"
class="text-[11px] inline-flex items-center gap-1 text-indigo-600 hover:underline"
>Prenesi izvorni DOCX →</a
>
</div>
<div
v-if="template.tokens?.length"
class="bg-white border rounded-lg shadow-sm p-4"
>
<h3 class="text-xs font-semibold tracking-wide text-gray-600 uppercase mb-2">
Tokens ({{ template.tokens.length }})
</h3>
<div class="flex flex-wrap gap-1.5 max-h-48 overflow-auto pr-1">
<span
v-for="t in template.tokens"
:key="t"
class="px-1.5 py-0.5 bg-gray-100 rounded text-[11px] font-mono"
>{{ t }}</span
>
</div>
</div>
</aside> </aside>
</div> </div>
</AdminLayout> </AdminLayout>
@ -331,6 +356,16 @@
import { computed, reactive } from "vue"; import { computed, reactive } from "vue";
import { useForm, Link, router } from "@inertiajs/vue3"; import { useForm, Link, router } from "@inertiajs/vue3";
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Settings2Icon, FileTextIcon, ActivityIcon, CodeIcon, SaveIcon, XIcon, EyeIcon, Power, PowerOffIcon } from "lucide-vue-next";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox";
import { Badge } from "@/Components/ui/badge";
import { Separator } from "@/Components/ui/separator";
// Button style utility classes // Button style utility classes
const btnBase = const btnBase =

316
resources/js/Pages/Admin/DocumentTemplates/Index.vue
View File

@ -2,6 +2,34 @@
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link, useForm } from "@inertiajs/vue3"; import { Link, useForm } from "@inertiajs/vue3";
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import {
UploadIcon,
FileTextIcon,
Power,
PowerOffIcon,
PencilIcon,
CheckIcon,
XIcon,
} from "lucide-vue-next";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { Badge } from "@/Components/ui/badge";
import { Progress } from "@/Components/ui/progress";
const props = defineProps({ const props = defineProps({
templates: { type: Array, default: () => [] }, templates: { type: Array, default: () => [] },
@ -9,7 +37,7 @@ const props = defineProps({
// Upload form state // Upload form state
const uploadForm = useForm({ name: "", slug: "", file: null }); const uploadForm = useForm({ name: "", slug: "", file: null });
const selectedSlug = ref(""); const selectedSlug = ref(null);
const uniqueSlugs = computed(() => { const uniqueSlugs = computed(() => {
const s = new Set(props.templates.map((t) => t.slug)); const s = new Set(props.templates.map((t) => t.slug));
return Array.from(s).sort(); return Array.from(s).sort();
@ -60,186 +88,164 @@ const groups = computed(() => {
<template> <template>
<AdminLayout title="Dokumentne predloge"> <AdminLayout title="Dokumentne predloge">
<div class="mb-8 space-y-6"> <div class="space-y-6">
<!-- Header & Upload --> <!-- Header & Upload -->
<div class="flex flex-col xl:flex-row xl:items-start gap-6"> <div class="flex flex-col xl:flex-row xl:items-start gap-6">
<div class="flex-1 min-w-[280px]"> <div class="flex-1 min-w-[280px]">
<h1 class="text-2xl font-semibold tracking-tight flex items-center gap-2"> <div class="flex items-center gap-2 mb-2">
<span>Dokumentne predloge</span> <h1 class="text-2xl font-semibold tracking-tight">Dokumentne predloge</h1>
<span <Badge variant="secondary">{{ groups.length }} skupin</Badge>
class="text-xs font-medium bg-gray-200 text-gray-600 px-2 py-0.5 rounded" </div>
>{{ groups.length }} skupin</span <p class="text-sm text-muted-foreground max-w-prose">
>
</h1>
<p class="text-sm text-gray-500 mt-1 max-w-prose">
Upravljaj verzije DOCX predlog. Naloži novo verzijo obstoječega sluga ali Upravljaj verzije DOCX predlog. Naloži novo verzijo obstoječega sluga ali
ustvari popolnoma novo predlogo. ustvari popolnoma novo predlogo.
</p> </p>
</div> </div>
<form <Card class="flex-1">
@submit.prevent="submitUpload" <CardHeader>
class="flex-1 bg-white/70 backdrop-blur border rounded-lg shadow-sm p-4 flex flex-col gap-3" <div class="flex items-center justify-between">
> <CardTitle class="text-base flex items-center gap-2">
<div class="flex items-center justify-between"> <UploadIcon class="h-4 w-4" />
<h2 class="text-sm font-semibold text-gray-700 flex items-center gap-2"> Nova / nova verzija
<span class="i-lucide-upload-cloud w-4 h-4" /> Nova / nova verzija </CardTitle>
</h2> <Progress
<div v-if="uploadForm.progress"
v-if="uploadForm.progress" :model-value="uploadForm.progress.percentage"
class="w-40 h-1 bg-gray-200 rounded overflow-hidden" class="w-40 h-2"
>
<div
class="h-full bg-indigo-500 transition-all"
:style="{ width: uploadForm.progress.percentage + '%' }"
/> />
</div> </div>
</div> </CardHeader>
<div class="grid md:grid-cols-5 gap-3 text-xs"> <CardContent>
<div class="md:col-span-1"> <form @submit.prevent="submitUpload" class="space-y-4">
<label class="block font-medium mb-1">Obstoječi slug</label> <div class="grid md:grid-cols-5 gap-4">
<select <div class="space-y-2">
v-model="selectedSlug" <Label for="existing_slug">Obstoječi slug</Label>
class="select select-bordered select-sm w-full" <Select v-model="selectedSlug">
> <SelectTrigger id="existing_slug">
<option value="">(nov)</option> <SelectValue placeholder="(nov)" />
<option v-for="s in uniqueSlugs" :key="s" :value="s">{{ s }}</option> </SelectTrigger>
</select> <SelectContent>
</div> <SelectItem v-for="s in uniqueSlugs" :key="s" :value="s">{{
<div class="md:col-span-1"> s
<label class="block font-medium mb-1">Nov slug</label> }}</SelectItem>
<input </SelectContent>
v-model="uploadForm.slug" </Select>
:disabled="!!selectedSlug" </div>
type="text" <div class="space-y-2">
class="input input-bordered input-sm w-full" <Label for="new_slug">Nov slug</Label>
placeholder="opomin" <Input
/> id="new_slug"
</div> v-model="uploadForm.slug"
<div class="md:col-span-1"> :disabled="!!selectedSlug"
<label class="block font-medium mb-1">Naziv</label> placeholder="opomin"
<input />
v-model="uploadForm.name" </div>
type="text" <div class="space-y-2">
class="input input-bordered input-sm w-full" <Label for="template_name">Naziv</Label>
placeholder="Ime predloge" <Input
/> id="template_name"
</div> v-model="uploadForm.name"
<div class="md:col-span-2 flex items-end"> placeholder="Ime predloge"
<label class="w-full"> />
<input </div>
id="docx-upload-input" <div class="md:col-span-2 space-y-2">
@change="handleFile" <Label for="docx-upload-input">DOCX datoteka</Label>
type="file" <Input
accept=".docx" id="docx-upload-input"
class="file-input file-input-bordered file-input-sm w-full" @change="handleFile"
/> type="file"
</label> accept=".docx"
</div> />
</div> </div>
<div class="flex items-center justify-end gap-3 pt-1"> </div>
<span class="text-[11px] text-gray-500" v-if="!uploadForm.file" <div class="flex items-center justify-end gap-3">
>Izberi DOCX datoteko…</span <span class="text-xs text-muted-foreground" v-if="!uploadForm.file">
> Izberi DOCX datoteko…
<button </span>
type="submit" <Button
class="btn btn-sm btn-primary" type="submit"
:disabled=" size="sm"
uploadForm.processing || :disabled="
!uploadForm.file || uploadForm.processing ||
(!uploadForm.slug && !selectedSlug) !uploadForm.file ||
" (!uploadForm.slug && !selectedSlug)
> "
<span v-if="uploadForm.processing">Nalaganje…</span> >
<span v-else>Shrani verzijo</span> <UploadIcon class="h-4 w-4 mr-2" />
</button> {{ uploadForm.processing ? "Nalaganje…" : "Shrani verzijo" }}
</div> </Button>
<div v-if="uploadForm.errors.file" class="text-rose-600 text-xs"> </div>
{{ uploadForm.errors.file }} <p v-if="uploadForm.errors.file" class="text-sm text-destructive">
</div> {{ uploadForm.errors.file }}
</form> </p>
</form>
</CardContent>
</Card>
</div> </div>
<!-- Groups --> <!-- Groups -->
<div v-if="groups.length" class="grid gap-6 md:grid-cols-2 xl:grid-cols-3"> <div v-if="groups.length" class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
<div <Card v-for="g in groups" :key="g.slug">
v-for="g in groups" <CardHeader>
:key="g.slug" <div class="flex items-start justify-between gap-3">
class="group relative flex flex-col bg-white border rounded-lg shadow-sm overflow-hidden" <div class="min-w-0 flex-1">
> <CardTitle class="text-base truncate">{{ g.name }}</CardTitle>
<div <CardDescription class="flex flex-wrap items-center gap-2 mt-1">
class="px-4 py-3 border-b bg-gradient-to-r from-gray-50 to-white flex items-start justify-between gap-3" <Badge variant="secondary" class="text-xs">{{ g.slug }}</Badge>
> <span class="text-xs">Zadnja: v{{ g.versions[0].version }}</span>
<div class="min-w-0"> <Badge
<h3 class="font-medium text-sm leading-5 truncate">{{ g.name }}</h3> :variant="
<div g.versions.filter((v) => v.active).length ? 'default' : 'outline'
class="flex flex-wrap items-center gap-2 mt-1 text-[11px] text-gray-500"
>
<span class="px-1.5 py-0.5 bg-gray-100 rounded">{{ g.slug }}</span>
<span>Zadnja: v{{ g.versions[0].version }}</span>
<span
class="flex items-center gap-1"
:class="
g.versions.filter((v) => v.active).length
? 'text-emerald-600'
: 'text-gray-400'
"
>
<span
class="w-1.5 h-1.5 rounded-full"
:class="
g.versions.filter((v) => v.active).length
? 'bg-emerald-500'
: 'bg-gray-300'
" "
/> class="text-xs"
{{ g.versions.filter((v) => v.active).length }} aktivnih >
</span> {{ g.versions.filter((v) => v.active).length }} aktivnih
</Badge>
</CardDescription>
</div> </div>
<Button size="sm" variant="ghost" as-child>
<Link :href="route('admin.document-templates.show', g.versions[0].id)">
Detalji
</Link>
</Button>
</div> </div>
<Link </CardHeader>
:href="route('admin.document-templates.show', g.versions[0].id)" <CardContent class="flex flex-col gap-4">
class="text-xs text-indigo-600 hover:underline whitespace-nowrap mt-1"
>Detalji</Link
>
</div>
<div class="p-3 flex-1 flex flex-col gap-2">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<div v-for="v in g.versions" :key="v.id" class="flex items-center gap-1"> <div v-for="v in g.versions" :key="v.id" class="flex items-center gap-1">
<Link <Button
:href="route('admin.document-templates.edit', v.id)" size="sm"
class="px-2 py-0.5 rounded-md border text-[11px] font-medium transition-colors" :variant="v.active ? 'default' : 'outline'"
:class=" class="h-7 px-2 text-xs"
v.active as-child
? 'border-emerald-500/60 bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
: 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50'
"
>v{{ v.version }}</Link
> >
<button <Link :href="route('admin.document-templates.edit', v.id)">
v{{ v.version }}
</Link>
</Button>
<Button
type="button" type="button"
size="icon"
:variant="v.active ? 'destructive' : 'outline'"
class="h-7 w-7"
@click="toggle(v.id)" @click="toggle(v.id)"
class="rounded-md border px-1.5 py-0.5 text-[10px] font-medium transition-colors"
:class="
v.active
? 'bg-amber-500 border-amber-500 text-white hover:bg-amber-600'
: 'bg-gray-100 border-gray-300 text-gray-600 hover:bg-gray-200'
"
> >
{{ v.active ? "✕" : "✓" }} <XIcon v-if="v.active" class="h-3 w-3" />
</button> <CheckIcon v-else class="h-3 w-3" />
</Button>
</div> </div>
</div> </div>
<div class="mt-auto pt-2 border-t flex justify-end"> <div class="pt-2 border-t flex justify-end">
<Link <Button size="sm" variant="link" class="h-auto p-0" as-child>
:href="route('admin.document-templates.edit', g.versions[0].id)" <Link :href="route('admin.document-templates.edit', g.versions[0].id)">
class="text-[11px] text-indigo-600 hover:underline" Uredi zadnjo verziju →
>Uredi zadnjo verzijo →</Link </Link>
> </Button>
</div> </div>
</div> </CardContent>
</div> </Card>
</div> </div>
<p v-else class="text-sm text-gray-500">Ni predlog.</p> <p v-else class="text-sm text-muted-foreground">Ni predlog.</p>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>

467
resources/js/Pages/Admin/DocumentTemplates/Show.vue
View File

@ -2,231 +2,294 @@
<AdminLayout title="Predloga"> <AdminLayout title="Predloga">
<div class="flex flex-col lg:flex-row gap-6 items-start"> <div class="flex flex-col lg:flex-row gap-6 items-start">
<div class="flex-1 min-w-[320px] space-y-6"> <div class="flex-1 min-w-[320px] space-y-6">
<div class="bg-white border rounded-lg shadow-sm p-5 flex flex-col gap-4"> <Card>
<div class="flex items-start justify-between gap-4"> <CardHeader>
<div> <div class="flex items-start justify-between gap-4">
<h1 class="text-2xl font-semibold tracking-tight">{{ template.name }}</h1> <div class="flex items-start gap-3">
<p class="text-xs text-gray-500 mt-1 flex flex-wrap gap-3"> <div
<span class="inline-flex items-center gap-1" class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
><span class="text-gray-400">Slug:</span
><span class="font-medium">{{ template.slug }}</span></span
> >
<span class="inline-flex items-center gap-1" <FileTextIcon class="h-5 w-5" />
><span class="text-gray-400">Verzija:</span </div>
><span class="font-medium">v{{ template.version }}</span></span <div>
> <CardTitle>{{ template.name }}</CardTitle>
<span <CardDescription class="flex flex-wrap gap-3 mt-1">
class="inline-flex items-center gap-1" <span class="inline-flex items-center gap-1">
:class="template.active ? 'text-emerald-600' : 'text-gray-400'" <span>Slug:</span>
> <Badge variant="secondary" class="text-xs">{{
<span template.slug
class="w-1.5 h-1.5 rounded-full" }}</Badge>
:class="template.active ? 'bg-emerald-500' : 'bg-gray-300'" </span>
/> <span class="inline-flex items-center gap-1">
{{ template.active ? "Aktivna" : "Neaktivna" }} <span>Verzija:</span>
</span> <Badge variant="secondary" class="text-xs"
</p> >v{{ template.version }}</Badge
</div> >
<form @submit.prevent="toggleActive" class="flex items-center gap-2"> </span>
<button <Badge
type="submit" :variant="template.active ? 'default' : 'outline'"
:class="[btnBase, template.active ? btnWarn : btnOutline]" class="text-xs"
:disabled="toggleForm.processing" >
> {{ template.active ? "Aktivna" : "Neaktivna" }}
<span v-if="toggleForm.processing">...</span> </Badge>
<span v-else>{{ template.active ? "Deaktiviraj" : "Aktiviraj" }}</span> </CardDescription>
</button> </div>
<Link </div>
:href="route('admin.document-templates.edit', template.id)" <div class="flex items-center gap-2">
:class="[btnBase, btnPrimary]" <form @submit.prevent="toggleActive">
>Uredi</Link <Button
> type="submit"
<Link :variant="template.active ? 'destructive' : 'default'"
:href="route('admin.document-templates.index')" size="sm"
:class="[btnBase, btnOutline]" :disabled="toggleForm.processing"
>Nazaj</Link
>
</form>
</div>
<div class="grid md:grid-cols-3 gap-6 text-xs">
<div class="space-y-2">
<h3 class="uppercase font-semibold tracking-wide text-gray-600">
Datoteka
</h3>
<ul class="space-y-1 text-gray-600">
<li>
<span class="text-gray-400">Velikost:</span>
<span class="font-medium"
>{{ (template.file_size / 1024).toFixed(1) }} KB</span
> >
</li> <PowerOffIcon v-if="template.active" class="h-4 w-4 mr-2" />
<li> <Power v-else class="h-4 w-4 mr-2" />
<span class="text-gray-400">Hash:</span> {{ template.active ? "Deaktiviraj" : "Aktiviraj" }}
<span class="font-mono" </Button>
>{{ template.file_hash?.substring(0, 12) }}…</span </form>
> <Button size="sm" as-child>
</li> <Link :href="route('admin.document-templates.edit', template.id)">
<li> <PencilIcon class="h-4 w-4 mr-2" />
<span class="text-gray-400">Engine:</span> Uredi
<span class="font-medium">{{ template.engine }}</span> </Link>
</li> </Button>
</ul> <Button size="sm" variant="outline" as-child>
<a <Link :href="route('admin.document-templates.index')">
:href="'/storage/' + template.file_path" <ArrowLeftIcon class="h-4 w-4 mr-2" />
target="_blank" Nazaj
class="text-[11px] inline-flex items-center gap-1 text-indigo-600 hover:underline" </Link>
>Prenesi DOCX →</a </Button>
</div>
</div>
</CardHeader>
<CardContent>
<div class="grid md:grid-cols-3 gap-6 text-sm">
<div class="space-y-3">
<h3 class="font-semibold flex items-center gap-2">
<FileTextIcon class="h-4 w-4" />
Datoteka
</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-muted-foreground">Velikost:</span>
<Badge variant="secondary"
>{{ (template.file_size / 1024).toFixed(1) }} KB</Badge
>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Hash:</span>
<code class="text-xs"
>{{ template.file_hash?.substring(0, 12) }}…</code
>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Engine:</span>
<Badge variant="outline">{{ template.engine }}</Badge>
</div>
</div>
<Button size="sm" variant="outline" class="w-full" as-child>
<a :href="'/storage/' + template.file_path" target="_blank">
<DownloadIcon class="h-4 w-4 mr-2" />
Prenesi DOCX
</a>
</Button>
</div>
<div class="space-y-3">
<h3 class="font-semibold flex items-center gap-2">
<HashIcon class="h-4 w-4" />
Formatiranje
</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-muted-foreground">Datum:</span>
<code class="text-xs">{{
template.settings?.date_format || "d.m.Y"
}}</code>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Decimalna mesta:</span>
<span>{{ template.settings?.number_decimals ?? "-" }}</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Separators:</span>
<code class="text-xs">
{{ template.settings?.decimal_separator || "." }} /
{{ template.settings?.thousands_separator || " " }}
</code>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Valuta:</span>
<span class="text-xs">
{{ template.settings?.currency_symbol || "€" }} ({{
template.settings?.currency_position || "before"
}})
</span>
</div>
</div>
</div>
<div class="space-y-3">
<h3 class="font-semibold">Aktivnost</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-muted-foreground">Akcija:</span>
<Badge variant="outline">{{ template.action?.name || "-" }}</Badge>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Odločitev:</span>
<Badge variant="outline">{{ template.decision?.name || "-" }}</Badge>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Fail unresolved:</span>
<Badge
:variant="
template.settings?.fail_on_unresolved
? 'destructive'
: 'secondary'
"
>
{{ template.settings?.fail_on_unresolved ? "DA" : "NE" }}
</Badge>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
<Card v-if="template.settings?.activity_note_template">
<CardHeader>
<CardTitle class="text-base">Predloga opombe aktivnosti</CardTitle>
</CardHeader>
<CardContent>
<pre
class="bg-muted p-3 rounded border text-xs leading-relaxed whitespace-pre-wrap font-mono"
>{{ template.settings.activity_note_template }}</pre
>
</CardContent>
</Card>
<Card v-if="template.tokens?.length">
<CardHeader>
<div class="flex items-center justify-between">
<div>
<CardTitle class="text-base">Tokens</CardTitle>
<CardDescription>{{ template.tokens.length }} tokenov</CardDescription>
</div>
<Button
type="button"
variant="ghost"
size="sm"
@click="expandedTokens = !expandedTokens"
> >
{{ expandedTokens ? "Skrij" : "Prikaži vse" }}
</Button>
</div> </div>
<div class="space-y-2"> </CardHeader>
<h3 class="uppercase font-semibold tracking-wide text-gray-600"> <CardContent>
Formatiranje <div
</h3> class="flex flex-wrap gap-1.5 overflow-auto"
<ul class="space-y-1 text-gray-600"> :class="!expandedTokens && 'max-h-32'"
<li>
<span class="text-gray-400">Datum:</span>
{{ template.settings?.date_format || "d.m.Y" }}
</li>
<li>
<span class="text-gray-400">Decimalna mesta:</span>
{{ template.settings?.number_decimals ?? "-" }}
</li>
<li>
<span class="text-gray-400">Separators:</span>
{{ template.settings?.decimal_separator || "." }} /
{{ template.settings?.thousands_separator || " " }}
</li>
<li>
<span class="text-gray-400">Valuta:</span>
{{ template.settings?.currency_symbol || "€" }} ({{
template.settings?.currency_position || "before"
}})
</li>
</ul>
</div>
<div class="space-y-2">
<h3 class="uppercase font-semibold tracking-wide text-gray-600">
Aktivnost
</h3>
<ul class="space-y-1 text-gray-600">
<li>
<span class="text-gray-400">Akcija:</span>
{{ template.action?.name || "-" }}
</li>
<li>
<span class="text-gray-400">Odločitev:</span>
{{ template.decision?.name || "-" }}
</li>
<li>
<span class="text-gray-400">Fail unresolved:</span>
{{ template.settings?.fail_on_unresolved ? "DA" : "NE" }}
</li>
</ul>
</div>
</div>
</div>
<div
v-if="template.settings?.activity_note_template"
class="bg-white border rounded-lg shadow-sm p-5 space-y-2 text-xs"
>
<h2 class="uppercase font-semibold tracking-wide text-gray-600">
Predloga opombe aktivnosti
</h2>
<pre
class="bg-gray-50 p-3 rounded border text-[11px] leading-relaxed whitespace-pre-wrap"
>{{ template.settings.activity_note_template }}</pre
>
</div>
<div
v-if="template.tokens?.length"
class="bg-white border rounded-lg shadow-sm p-5"
>
<div class="flex items-center justify-between mb-2">
<h2 class="uppercase font-semibold tracking-wide text-gray-600 text-xs">
Tokens ({{ template.tokens.length }})
</h2>
<button
type="button"
@click="expandedTokens = !expandedTokens"
class="text-[11px] text-indigo-600 hover:underline"
> >
{{ expandedTokens ? "Skrij" : "Prikaži vse" }} <Badge
</button> v-for="t in template.tokens"
</div> :key="t"
<div variant="secondary"
class="flex flex-wrap gap-1.5 max-h-56 overflow-auto pr-1" class="font-mono text-xs"
:class="!expandedTokens && 'max-h-32'" >
> {{ t }}
<span </Badge>
v-for="t in template.tokens" </div>
:key="t" </CardContent>
class="px-1.5 py-0.5 bg-gray-100 rounded text-[11px] font-mono" </Card>
>{{ t }}</span
>
</div>
</div>
</div> </div>
<aside class="w-full lg:w-72 space-y-6"> <aside class="w-full lg:w-72 space-y-6">
<div class="bg-white border rounded-lg shadow-sm p-4 space-y-3 text-xs"> <Card>
<h3 class="uppercase font-semibold tracking-wide text-gray-600"> <CardHeader>
Hitra dejanja <CardTitle class="text-sm">Hitra dejanja</CardTitle>
</h3> </CardHeader>
<div class="flex flex-col gap-2"> <CardContent class="flex flex-col gap-2">
<Link <Button size="sm" as-child>
:href="route('admin.document-templates.edit', template.id)" <Link :href="route('admin.document-templates.edit', template.id)">
:class="[btnBase, btnPrimary]" <PencilIcon class="h-4 w-4 mr-2" />
>Uredi nastavitve</Link Uredi nastavitve
> </Link>
</Button>
<form @submit.prevent="toggleActive"> <form @submit.prevent="toggleActive">
<button <Button
type="submit" type="submit"
:class="[btnBase, template.active ? btnWarn : btnOutline]" size="sm"
:variant="template.active ? 'destructive' : 'default'"
:disabled="toggleForm.processing" :disabled="toggleForm.processing"
class="w-full"
> >
<PowerOffIcon v-if="template.active" class="h-4 w-4 mr-2" />
<Power v-else class="h-4 w-4 mr-2" />
{{ template.active ? "Deaktiviraj" : "Aktiviraj" }} {{ template.active ? "Deaktiviraj" : "Aktiviraj" }}
</button> </Button>
</form> </form>
<form @submit.prevent="rescan"> <form @submit.prevent="rescan">
<button type="submit" :class="[btnBase, btnOutline]" :disabled="rescanForm.processing"> <Button
<span v-if="rescanForm.processing">Pregledujem…</span> type="submit"
<span v-else>Ponovno preglej tokene</span> size="sm"
</button> variant="outline"
</form> :disabled="rescanForm.processing"
<Link class="w-full"
:href="route('admin.document-templates.index')" >
:class="[btnBase, btnOutline]" <RefreshCwIcon class="h-4 w-4 mr-2" />
>Vse predloge</Link {{ rescanForm.processing ? "Pregledujem…" : "Ponovno preglej tokene" }}
> </Button>
</div> </form>
</div> <Button size="sm" variant="outline" as-child>
<div <Link :href="route('admin.document-templates.index')">
class="bg-white border rounded-lg shadow-sm p-4 space-y-2 text-[11px] text-gray-600" <ArrowLeftIcon class="h-4 w-4 mr-2" />
> Vse predloge
<h3 class="uppercase font-semibold tracking-wide text-gray-600 text-xs"> </Link>
Opombe </Button>
</h3> </CardContent>
<p> </Card>
Uporabi to stran za hiter pregled meta podatkov predloge ter njenih tokenov. <Card>
</p> <CardHeader>
</div> <CardTitle class="text-sm">Opombe</CardTitle>
</CardHeader>
<CardContent class="text-sm text-muted-foreground">
<p>
Uporabi to stran za hiter pregled meta podatkov predloge ter njenih tokenov.
</p>
</CardContent>
</Card>
</aside> </aside>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
import { Link, useForm } from "@inertiajs/vue3"; import { Link, useForm } from "@inertiajs/vue3";
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import {
FileTextIcon,
Power,
PowerOffIcon,
PencilIcon,
ArrowLeftIcon,
RefreshCwIcon,
DownloadIcon,
HashIcon,
} from "lucide-vue-next";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Separator } from "@/Components/ui/separator";
// Button style utility classes const expandedTokens = ref(false);
const btnBase =
"inline-flex items-center justify-center gap-1 rounded-md border text-xs font-medium px-3 py-1.5 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed";
const btnPrimary = "bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500";
const btnOutline = "bg-white text-gray-700 border-gray-300 hover:bg-gray-50";
const btnWarn = "bg-amber-500 border-amber-500 text-white hover:bg-amber-400";
const props = defineProps({ const props = defineProps({
template: Object, template: Object,

321
resources/js/Pages/Admin/EmailLogs/Index.vue
View File

@ -1,104 +1,259 @@
<script setup> <script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue' import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link, router } from '@inertiajs/vue3' import { Head, Link, router } from "@inertiajs/vue3";
import { ref } from 'vue' import { ref } from "vue";
import { MailIcon, FilterIcon, ExternalLinkIcon } from "lucide-vue-next";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { Badge } from "@/Components/ui/badge";
import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
const props = defineProps({ const props = defineProps({
logs: Object, logs: Object,
templates: Array, templates: Array,
filters: Object, filters: Object,
}) });
const form = ref({ const form = ref({
status: props.filters?.status || '', status: props.filters?.status || "",
to: props.filters?.to || '', to: props.filters?.to || "",
subject: props.filters?.subject || '', subject: props.filters?.subject || "",
template_id: props.filters?.template_id || '', template_id: props.filters?.template_id || "",
date_from: props.filters?.date_from || '', date_from: props.filters?.date_from || "",
date_to: props.filters?.date_to || '', date_to: props.filters?.date_to || "",
}) });
function applyFilters() { function applyFilters() {
router.get(route('admin.email-logs.index'), { router.get(
...form.value, route("admin.email-logs.index"),
}, { preserveState: true, preserveScroll: true }) {
...form.value,
},
{ preserveState: true, preserveScroll: true }
);
} }
function getStatusVariant(status) {
if (status === "sent") return "default";
if (status === "queued" || status === "sending") return "secondary";
if (status === "failed") return "destructive";
return "outline";
}
const columns = [
{
key: "created_at",
label: "Datum",
sortable: false,
},
{
key: "status",
label: "Status",
sortable: false,
},
{
key: "to_email",
label: "Prejemnik",
sortable: false,
},
{
key: "subject",
label: "Zadeva",
sortable: false,
},
{
key: "template",
label: "Predloga",
sortable: false,
},
{
key: "duration_ms",
label: "Trajanje",
sortable: false,
},
{
key: "actions",
label: "Dejanja",
sortable: false,
align: "right",
},
];
</script> </script>
<template> <template>
<AdminLayout title="Email Logs"> <AdminLayout title="Email Logs">
<Head title="Email Logs" /> <Head title="Email Logs" />
<div class="mb-4"> <div class="space-y-6">
<h1 class="text-xl font-semibold text-gray-800">Email Logs</h1> <Card>
<div class="mt-3 grid grid-cols-1 md:grid-cols-6 gap-2"> <CardHeader>
<select v-model="form.status" class="input"> <div class="flex items-start justify-between">
<option value="">All statuses</option> <div class="flex items-start gap-3">
<option value="queued">Queued</option> <div
<option value="sending">Sending</option> class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
<option value="sent">Sent</option> >
<option value="failed">Failed</option> <MailIcon class="h-5 w-5" />
<option value="bounced">Bounced</option> </div>
<option value="deferred">Deferred</option> <div>
</select> <CardTitle>Email Logs</CardTitle>
<input v-model="form.to" placeholder="To email" class="input" /> <CardDescription>
<input v-model="form.subject" placeholder="Subject" class="input" /> Pregled vseh poslanih in čakajočih e-poštnih sporočil
<select v-model="form.template_id" class="input"> </CardDescription>
<option value="">All templates</option> </div>
<option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option> </div>
</select> </div>
<input v-model="form.date_from" type="date" class="input" /> </CardHeader>
<input v-model="form.date_to" type="date" class="input" /> <CardContent>
</div> <form @submit.prevent="applyFilters" class="space-y-4">
<div class="mt-2"> <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
<button @click="applyFilters" class="px-3 py-1.5 text-xs rounded border bg-gray-50 hover:bg-gray-100">Filter</button> <div class="space-y-2">
</div> <Label for="status">Status</Label>
</div> <Select v-model="form.status">
<SelectTrigger id="status">
<SelectValue placeholder="All statuses" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">All statuses</SelectItem>
<SelectItem value="queued">Queued</SelectItem>
<SelectItem value="sending">Sending</SelectItem>
<SelectItem value="sent">Sent</SelectItem>
<SelectItem value="failed">Failed</SelectItem>
<SelectItem value="bounced">Bounced</SelectItem>
<SelectItem value="deferred">Deferred</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="to">To email</Label>
<Input id="to" v-model="form.to" placeholder="prejemnik@email.com" />
</div>
<div class="space-y-2">
<Label for="subject">Subject</Label>
<Input
id="subject"
v-model="form.subject"
placeholder="Iskanje po zadevi"
/>
</div>
<div class="space-y-2">
<Label for="template">Template</Label>
<Select v-model="form.template_id">
<SelectTrigger id="template">
<SelectValue placeholder="All templates" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">All templates</SelectItem>
<SelectItem v-for="t in templates" :key="t.id" :value="t.id">{{
t.name
}}</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="date_from">Od datuma</Label>
<Input id="date_from" v-model="form.date_from" type="date" />
</div>
<div class="space-y-2">
<Label for="date_to">Do datuma</Label>
<Input id="date_to" v-model="form.date_to" type="date" />
</div>
</div>
<Button type="submit" size="sm">
<FilterIcon class="h-4 w-4 mr-2" />
Filtriraj
</Button>
</form>
</CardContent>
</Card>
<div class="rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm"> <AppCard
<div class="overflow-auto"> title=""
<table class="min-w-full text-sm"> padding="none"
<thead class="bg-gray-50 text-gray-600"> class="p-0! gap-0"
<tr> header-class="py-3! px-4 gap-0 text-muted-foreground"
<th class="text-left p-2">Date</th> body-class=""
<th class="text-left p-2">Status</th> >
<th class="text-left p-2">To</th> <template #header>
<th class="text-left p-2">Subject</th> <div class="flex items-center gap-2">
<th class="text-left p-2">Template</th> <MailIcon size="18" />
<th class="text-left p-2">Duration</th> <CardTitle class="uppercase">Uvozi</CardTitle>
<th class="text-left p-2">\#</th> </div>
</tr> </template>
</thead> <DataTableNew2
<tbody> :columns="columns"
<tr v-for="log in logs.data" :key="log.id" class="border-t"> :data="logs.data"
<td class="p-2 whitespace-nowrap">{{ new Date(log.created_at).toLocaleString() }}</td> :meta="logs"
<td class="p-2"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs border" :class="{ :show-toolbar="false"
'bg-green-50 text-green-700 border-green-200': log.status === 'sent', :show-pagination="true"
'bg-amber-50 text-amber-700 border-amber-200': log.status === 'queued' || log.status === 'sending', route-name="admin.email-logs.index"
'bg-red-50 text-red-700 border-red-200': log.status === 'failed', :preserve-state="true"
}">{{ log.status }}</span></td> :preserve-scroll="true"
<td class="p-2 truncate max-w-[220px]"> empty-text="Ni e-poštnih dnevnikov"
{{ log.to_email || (Array.isArray(log.to_recipients) && log.to_recipients.length ? log.to_recipients.join(', ') : '-') }} empty-description="Začnite z ustvarjanjem e-poštnih sporočil"
</td> >
<td class="p-2 truncate max-w-[320px]">{{ log.subject }}</td> <template #cell-created_at="{ value }">
<td class="p-2 truncate max-w-[220px]">{{ log.template?.name || '-' }}</td> <div class="whitespace-nowrap text-sm">
<td class="p-2">{{ log.duration_ms ? log.duration_ms + ' ms' : '-' }}</td> {{ new Date(value).toLocaleString() }}
<td class="p-2"><Link :href="route('admin.email-logs.show', log.id)" class="text-indigo-600 hover:underline">Open</Link></td> </div>
</tr> </template>
</tbody>
</table> <template #cell-status="{ value }">
</div> <Badge :variant="getStatusVariant(value)">
<div class="p-2 border-t text-xs text-gray-600 flex items-center justify-between"> {{ value }}
<div>Showing {{ logs.from }}-{{ logs.to }} of {{ logs.total }}</div> </Badge>
<div class="flex gap-2"> </template>
<Link v-for="link in logs.links" :key="link.url || link.label" :href="link.url || '#'" :class="['px-2 py-1 rounded border text-xs', { 'bg-indigo-600 text-white border-indigo-600': link.active, 'pointer-events-none opacity-50': !link.url } ]" v-html="link.label" />
</div> <template #cell-to_email="{ row }">
</div> <div class="max-w-55 truncate">
{{
row.to_email ||
(Array.isArray(row.to_recipients) && row.to_recipients.length
? row.to_recipients.join(", ")
: "-")
}}
</div>
</template>
<template #cell-subject="{ value }">
<div class="max-w-[320px] truncate">{{ value }}</div>
</template>
<template #cell-template="{ row }">
<div class="max-w-55 truncate">{{ row.template?.name || "-" }}</div>
</template>
<template #cell-duration_ms="{ value }">
<span v-if="value" class="text-xs text-muted-foreground">
{{ value }} ms
</span>
<span v-else class="text-muted-foreground">-</span>
</template>
<template #cell-actions="{ row }">
<Button size="sm" variant="ghost" as-child>
<Link :href="route('admin.email-logs.show', row.id)">
<ExternalLinkIcon class="h-4 w-4" />
</Link>
</Button>
</template>
</DataTableNew2>
</AppCard>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped>
.input { width: 100%; border-radius: 0.375rem; border: 1px solid #d1d5db; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1; }
</style>

161
resources/js/Pages/Admin/EmailLogs/Show.vue
View File

@ -1,6 +1,11 @@
<script setup> <script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue' import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Head, Link } from '@inertiajs/vue3' import { Head, Link } from '@inertiajs/vue3'
import { MailIcon, ArrowLeftIcon, ClockIcon, UserIcon, AlertCircleIcon, FileTextIcon, CodeIcon } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'
import { Button } from '@/Components/ui/button'
import { Badge } from '@/Components/ui/badge'
import { Separator } from '@/Components/ui/separator'
const props = defineProps({ const props = defineProps({
log: Object, log: Object,
@ -11,50 +16,124 @@ const props = defineProps({
<AdminLayout title="Email Log"> <AdminLayout title="Email Log">
<Head title="Email Log" /> <Head title="Email Log" />
<div class="mb-3 flex items-center justify-between"> <div class="space-y-6">
<div class="flex items-center gap-2"> <Card>
<Link :href="route('admin.email-logs.index')" class="text-sm text-gray-600 hover:text-gray-800">Back</Link> <CardHeader>
<h1 class="text-xl font-semibold text-gray-800">Email Log #{{ props.log.id }}</h1> <div class="flex items-start justify-between">
</div> <div class="flex items-start gap-3">
<div class="text-xs text-gray-600">Created: {{ new Date(props.log.created_at).toLocaleString() }}</div> <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
</div> <MailIcon class="h-5 w-5" />
</div>
<div>
<CardTitle>Email Log #{{ props.log.id }}</CardTitle>
<CardDescription>
Ustvarjeno: {{ new Date(props.log.created_at).toLocaleString() }}
</CardDescription>
</div>
</div>
<Button variant="outline" size="sm" as-child>
<Link :href="route('admin.email-logs.index')">
<ArrowLeftIcon class="h-4 w-4 mr-2" />
Nazaj
</Link>
</Button>
</div>
</CardHeader>
</Card>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm p-4 space-y-2"> <Card>
<div class="text-sm"><span class="font-semibold">Status:</span> {{ props.log.status }}</div> <CardHeader>
<div class="text-sm"> <CardTitle class="text-base">Podrobnosti</CardTitle>
<span class="font-semibold">To:</span> </CardHeader>
<template v-if="props.log.to_email"> <CardContent class="space-y-3">
{{ props.log.to_email }} {{ props.log.to_name ? '(' + props.log.to_name + ')' : '' }} <div class="flex justify-between items-center">
</template> <span class="text-sm text-muted-foreground">Status:</span>
<template v-else> <Badge
<span v-if="Array.isArray(props.log.to_recipients) && props.log.to_recipients.length"> :variant="
{{ props.log.to_recipients.join(', ') }} props.log.status === 'sent' ? 'default' :
</span> props.log.status === 'queued' || props.log.status === 'sending' ? 'secondary' :
<span v-else>-</span> props.log.status === 'failed' ? 'destructive' : 'outline'
</template> "
</div> >
<div class="text-sm"><span class="font-semibold">Subject:</span> {{ props.log.subject }}</div> {{ props.log.status }}
<div class="text-sm"><span class="font-semibold">Template:</span> {{ props.log.template?.name || '-' }}</div> </Badge>
<!-- Message ID removed per request --> </div>
<div class="text-sm"><span class="font-semibold">Attempts:</span> {{ props.log.attempt }}</div> <Separator />
<div class="text-sm"><span class="font-semibold">Duration:</span> {{ props.log.duration_ms ? props.log.duration_ms + ' ms' : '-' }}</div> <div class="space-y-1">
<div v-if="props.log.error_message" class="text-sm text-red-700"><span class="font-semibold">Error:</span> {{ props.log.error_message }}</div> <div class="text-sm font-medium flex items-center gap-2">
<UserIcon class="h-4 w-4" />
Prejemnik
</div>
<div class="text-sm text-muted-foreground">
<template v-if="props.log.to_email">
{{ props.log.to_email }} {{ props.log.to_name ? '(' + props.log.to_name + ')' : '' }}
</template>
<template v-else>
<span v-if="Array.isArray(props.log.to_recipients) && props.log.to_recipients.length">
{{ props.log.to_recipients.join(', ') }}
</span>
<span v-else>-</span>
</template>
</div>
</div>
<Separator />
<div class="space-y-1">
<div class="text-sm font-medium">Zadeva</div>
<div class="text-sm text-muted-foreground">{{ props.log.subject }}</div>
</div>
<Separator />
<div class="flex justify-between items-center">
<span class="text-sm text-muted-foreground">Predloga:</span>
<Badge variant="outline">{{ props.log.template?.name || '-' }}</Badge>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-muted-foreground">Poskusi:</span>
<Badge variant="secondary">{{ props.log.attempt }}</Badge>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-muted-foreground flex items-center gap-1">
<ClockIcon class="h-4 w-4" />
Trajanje:
</span>
<span class="text-sm">{{ props.log.duration_ms ? props.log.duration_ms + ' ms' : '-' }}</span>
</div>
<div v-if="props.log.error_message" class="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
<div class="flex items-start gap-2">
<AlertCircleIcon class="h-4 w-4 text-destructive mt-0.5" />
<div>
<div class="text-sm font-medium text-destructive">Napaka</div>
<div class="text-xs text-destructive/80 mt-1">{{ props.log.error_message }}</div>
</div>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle class="text-base flex items-center gap-2">
<FileTextIcon class="h-4 w-4" />
Besedilo
</CardTitle>
</CardHeader>
<CardContent>
<pre class="text-xs whitespace-pre-wrap break-words bg-muted p-3 rounded-md">{{ props.log.body?.body_text || '' }}</pre>
</CardContent>
</Card>
</div> </div>
<div class="rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm p-4"> <Card>
<div class="label">Text</div> <CardHeader>
<pre class="text-xs whitespace-pre-wrap break-words">{{ props.log.body?.body_text || '' }}</pre> <CardTitle class="text-base flex items-center gap-2">
</div> <CodeIcon class="h-4 w-4" />
HTML vsebina
<div class="md:col-span-2 rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm p-4"> </CardTitle>
<div class="label">HTML</div> </CardHeader>
<iframe :srcdoc="props.log.body?.body_html || ''" class="w-full h-[480px] border rounded bg-white"></iframe> <CardContent>
</div> <iframe :srcdoc="props.log.body?.body_html || ''" class="w-full h-[480px] border rounded-md bg-white"></iframe>
</CardContent>
</Card>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped>
.label { display:block; font-size: 0.7rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:#6b7280; margin-bottom:0.25rem; }
</style>

1117
resources/js/Pages/Admin/EmailTemplates/Edit.vue
View File

File diff suppressed because it is too large Load Diff

131
resources/js/Pages/Admin/EmailTemplates/Index.vue
View File

@ -1,8 +1,11 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link } from "@inertiajs/vue3"; import { Head, Link } from "@inertiajs/vue3";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { PlusIcon, PencilIcon, Trash2Icon, MailIcon } from 'lucide-vue-next';
import { faPlus, faPenToSquare, faTrash } from "@fortawesome/free-solid-svg-icons"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { Button } from '@/Components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
import { Badge } from '@/Components/ui/badge';
const props = defineProps({ const props = defineProps({
templates: { type: Array, default: () => [] }, templates: { type: Array, default: () => [] },
@ -19,50 +22,84 @@ function destroyTemplate(tpl) {
<template> <template>
<AdminLayout title="Email predloge"> <AdminLayout title="Email predloge">
<Head title="Email predloge" /> <Head title="Email predloge" />
<div class="flex items-center justify-between mb-6">
<h1 class="text-xl font-semibold text-gray-800">Email predloge</h1>
<Link
:href="route('admin.email-templates.create')"
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow"
>
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nova predloga
</Link>
</div>
<div class="rounded-lg border bg-white overflow-hidden shadow-sm"> <Card>
<table class="w-full text-sm"> <CardHeader>
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider"> <div class="flex items-start justify-between">
<tr> <div class="flex items-start gap-3">
<th class="px-3 py-2 text-left">Ime</th> <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
<th class="px-3 py-2 text-left">Ključ</th> <MailIcon class="h-5 w-5" />
<th class="px-3 py-2 text-left">Entities</th> </div>
<th class="px-3 py-2 text-left">Aktivno</th> <div>
<th class="px-3 py-2 text-left">Akcije</th> <CardTitle>Email predloge</CardTitle>
</tr> <CardDescription>
</thead> Upravljanje predlog za e-poštna sporočila
<tbody> </CardDescription>
<tr v-for="t in templates" :key="t.id" class="border-t last:border-b hover:bg-gray-50"> </div>
<td class="px-3 py-2 font-medium text-gray-800">{{ t.name }}</td> </div>
<td class="px-3 py-2 text-gray-600">{{ t.key }}</td> <Button as-child>
<td class="px-3 py-2 text-gray-600">{{ (t.entity_types || []).join(', ') }}</td> <Link :href="route('admin.email-templates.create')">
<td class="px-3 py-2">{{ t.active ? 'da' : 'ne' }}</td> <PlusIcon class="h-4 w-4 mr-2" />
<td class="px-3 py-2 flex items-center gap-2"> Nova predloga
<Link </Link>
:href="route('admin.email-templates.edit', t.id)" </Button>
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-600 border-indigo-300 bg-indigo-50 hover:bg-indigo-100" </div>
> </CardHeader>
<FontAwesomeIcon :icon="faPenToSquare" class="w-3.5 h-3.5" /> Uredi <CardContent class="p-0">
</Link> <Table>
<button <TableHeader>
@click="destroyTemplate(t)" <TableRow>
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-rose-700 border-rose-300 bg-rose-50 hover:bg-rose-100" <TableHead>Ime</TableHead>
> <TableHead>Ključ</TableHead>
<FontAwesomeIcon :icon="faTrash" class="w-3.5 h-3.5" /> Izbriši <TableHead>Entitete</TableHead>
</button> <TableHead>Status</TableHead>
</td> <TableHead class="text-right">Akcije</TableHead>
</tr> </TableRow>
</tbody> </TableHeader>
</table> <TableBody>
</div> <TableRow v-for="t in templates" :key="t.id">
<TableCell class="font-medium">{{ t.name }}</TableCell>
<TableCell>
<code class="text-xs bg-muted px-1.5 py-0.5 rounded">{{ t.key }}</code>
</TableCell>
<TableCell>
<div class="flex flex-wrap gap-1">
<Badge v-for="entity in (t.entity_types || [])"
:key="entity"
variant="outline"
class="text-xs"
>
{{ entity }}
</Badge>
</div>
</TableCell>
<TableCell>
<Badge :variant="t.active ? 'default' : 'secondary'">
{{ t.active ? 'Aktivno' : 'Neaktivno' }}
</Badge>
</TableCell>
<TableCell class="text-right">
<div class="flex items-center justify-end gap-2">
<Button size="sm" variant="outline" as-child>
<Link :href="route('admin.email-templates.edit', t.id)">
<PencilIcon class="h-4 w-4 mr-1" />
Uredi
</Link>
</Button>
<Button
size="sm"
variant="destructive"
@click="destroyTemplate(t)"
>
<Trash2Icon class="h-4 w-4 mr-1" />
Izbriši
</Button>
</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
</AdminLayout> </AdminLayout>
</template> </template>

118
resources/js/Pages/Admin/Index.vue
View File

@ -1,18 +1,26 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link } from "@inertiajs/vue3"; import { Link } from "@inertiajs/vue3";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { import {
faUserGroup, UsersIcon,
faKey, KeyRoundIcon,
faGears, Settings2Icon,
faFileWord, FileTextIcon,
faEnvelopeOpenText, MailOpenIcon,
faInbox, InboxIcon,
faAt, AtSignIcon,
faAddressBook, BookUserIcon,
faFileLines, MessageSquareIcon,
} from "@fortawesome/free-solid-svg-icons"; ArrowRightIcon,
} from "lucide-vue-next";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Separator } from "@/Components/ui/separator";
const cards = [ const cards = [
{ {
@ -22,13 +30,13 @@ const cards = [
title: "Uporabniki", title: "Uporabniki",
description: "Upravljanje uporabnikov in njihovih vlog", description: "Upravljanje uporabnikov in njihovih vlog",
route: "admin.users.index", route: "admin.users.index",
icon: faUserGroup, icon: UsersIcon,
}, },
{ {
title: "Novo dovoljenje", title: "Novo dovoljenje",
description: "Dodaj in konfiguriraj novo dovoljenje", description: "Dodaj in konfiguriraj novo dovoljenje",
route: "admin.permissions.create", route: "admin.permissions.create",
icon: faKey, icon: KeyRoundIcon,
}, },
], ],
}, },
@ -39,13 +47,13 @@ const cards = [
title: "Nastavitve dokumentov", title: "Nastavitve dokumentov",
description: "Privzete sistemske nastavitve za dokumente", description: "Privzete sistemske nastavitve za dokumente",
route: "admin.document-settings.index", route: "admin.document-settings.index",
icon: faGears, icon: Settings2Icon,
}, },
{ {
title: "Predloge dokumentov", title: "Predloge dokumentov",
description: "Upravljanje in verzioniranje DOCX predlog", description: "Upravljanje in verzioniranje DOCX predlog",
route: "admin.document-templates.index", route: "admin.document-templates.index",
icon: faFileWord, icon: FileTextIcon,
}, },
], ],
}, },
@ -56,19 +64,19 @@ const cards = [
title: "Email predloge", title: "Email predloge",
description: "Upravljanje HTML / tekst email predlog", description: "Upravljanje HTML / tekst email predlog",
route: "admin.email-templates.index", route: "admin.email-templates.index",
icon: faEnvelopeOpenText, icon: MailOpenIcon,
}, },
{ {
title: "Email dnevniki", title: "Email dnevniki",
description: "Pregled poslanih emailov in statusov", description: "Pregled poslanih emailov in statusov",
route: "admin.email-logs.index", route: "admin.email-logs.index",
icon: faInbox, icon: InboxIcon,
}, },
{ {
title: "Mail profili", title: "Mail profili",
description: "SMTP profili, nastavitve in testiranje povezave", description: "SMTP profili, nastavitve in testiranje povezave",
route: "admin.mail-profiles.index", route: "admin.mail-profiles.index",
icon: faAt, icon: AtSignIcon,
}, },
], ],
}, },
@ -79,31 +87,31 @@ const cards = [
title: "SMS profili", title: "SMS profili",
description: "Nastavitve SMS profilov, testno pošiljanje in stanje kreditov", description: "Nastavitve SMS profilov, testno pošiljanje in stanje kreditov",
route: "admin.sms-profiles.index", route: "admin.sms-profiles.index",
icon: faGears, icon: Settings2Icon,
}, },
{ {
title: "SMS pošiljatelji", title: "SMS pošiljatelji",
description: "Upravljanje nazivov pošiljateljev (Sender ID) za SMS profile", description: "Upravljanje nazivov pošiljateljev (Sender ID) za SMS profile",
route: "admin.sms-senders.index", route: "admin.sms-senders.index",
icon: faAddressBook, icon: BookUserIcon,
}, },
{ {
title: "SMS predloge", title: "SMS predloge",
description: "Tekstovne predloge za SMS obvestila in opomnike", description: "Tekstovne predloge za SMS obvestila in opomnike",
route: "admin.sms-templates.index", route: "admin.sms-templates.index",
icon: faFileLines, icon: FileTextIcon,
}, },
{ {
title: "SMS dnevniki", title: "SMS dnevniki",
description: "Pregled poslanih SMSov in statusov", description: "Pregled poslanih SMSov in statusov",
route: "admin.sms-logs.index", route: "admin.sms-logs.index",
icon: faInbox, icon: InboxIcon,
}, },
{ {
title: "SMS paketi", title: "SMS paketi",
description: "Kreiranje in pošiljanje serijskih SMS paketov", description: "Kreiranje in pošiljanje serijskih SMS paketov",
route: "admin.packages.index", route: "admin.packages.index",
icon: faInbox, icon: MessageSquareIcon,
}, },
], ],
}, },
@ -112,44 +120,50 @@ const cards = [
<template> <template>
<AdminLayout title="Administrator"> <AdminLayout title="Administrator">
<div class="space-y-14"> <div class="space-y-8">
<section <div v-for="(group, i) in cards" :key="group.category">
v-for="(group, i) in cards" <Separator v-if="i > 0" class="my-8" />
:key="group.category" <div class="mb-6">
:class="[i > 0 ? 'pt-6 border-t border-gray-200/70' : '']" <h2
> class="text-xs font-semibold tracking-wider uppercase text-muted-foreground"
<h2 class="text-xs font-semibold tracking-wider uppercase text-gray-500 mb-4"> >
{{ group.category }} {{ group.category }}
</h2> </h2>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> </div>
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<Link <Link
v-for="item in group.items" v-for="item in group.items"
:key="item.title" :key="item.title"
:href="route(item.route)" :href="route(item.route)"
class="group relative overflow-hidden p-5 rounded-lg border bg-white hover:border-indigo-300 hover:shadow transition focus:outline-none focus:ring-2 focus:ring-indigo-500" class="group"
> >
<div class="flex items-start gap-4"> <Card class="h-full transition-all hover:border-primary hover:shadow-md">
<span <CardHeader class="pb-3">
class="inline-flex items-center justify-center w-10 h-10 rounded-md bg-indigo-50 text-indigo-600 group-hover:bg-indigo-100" <div class="flex items-start gap-4">
> <div
<FontAwesomeIcon :icon="item.icon" class="w-5 h-5" /> class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary group-hover:bg-primary/20 transition-colors shrink-0"
</span>
<div class="flex-1 min-w-0">
<h3 class="font-semibold text-sm mb-1 flex items-center gap-2">
{{ item.title }}
<span
class="opacity-0 group-hover:opacity-100 transition text-indigo-500 text-[10px] font-medium"
>→</span
> >
</h3> <component :is="item.icon" class="w-5 h-5" />
<p class="text-xs text-gray-500 leading-relaxed line-clamp-3"> </div>
<div class="flex-1 min-w-0">
<CardTitle class="text-base flex items-center gap-2 group">
{{ item.title }}
<ArrowRightIcon
class="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity text-primary"
/>
</CardTitle>
</div>
</div>
</CardHeader>
<CardContent>
<CardDescription class="text-sm leading-relaxed line-clamp-2">
{{ item.description }} {{ item.description }}
</p> </CardDescription>
</div> </CardContent>
</div> </Card>
</Link> </Link>
</div> </div>
</section> </div>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>

528
resources/js/Pages/Admin/MailProfiles/Index.vue
View File

@ -1,19 +1,58 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
import { Head, Link, useForm } from "@inertiajs/vue3"; import { Head, Link, useForm } from "@inertiajs/vue3";
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { import {
faPlus, PlusIcon,
faFlask, FlaskConicalIcon,
faBolt, MailIcon,
faArrowsRotate, PencilIcon,
faToggleOn, SendIcon,
faToggleOff, MoreVerticalIcon,
faPaperPlane, } from "lucide-vue-next";
} from "@fortawesome/free-solid-svg-icons"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Badge } from "@/Components/ui/badge";
import { Switch } from "@/Components/ui/switch";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/Components/ui/table";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/Components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
const props = defineProps({ const props = defineProps({
profiles: { type: Array, default: () => [] }, profiles: { type: Array, default: () => [] },
@ -93,13 +132,15 @@ function submitEdit() {
if (form.password && form.password.trim() !== "") { if (form.password && form.password.trim() !== "") {
payload.password = form.password.trim(); payload.password = form.password.trim();
} }
form.transform(() => payload).put(route("admin.mail-profiles.update", editTarget.value.id), { form
preserveScroll: true, .transform(() => payload)
onSuccess: () => { .put(route("admin.mail-profiles.update", editTarget.value.id), {
editOpen.value = false; preserveScroll: true,
editTarget.value = null; onSuccess: () => {
}, editOpen.value = false;
}); editTarget.value = null;
},
});
} }
function toggleActive(p) { function toggleActive(p) {
@ -131,251 +172,266 @@ const statusClass = (p) => {
<template> <template>
<AdminLayout title="Mail profili"> <AdminLayout title="Mail profili">
<Head title="Mail profili" /> <Head title="Mail profili" />
<div class="flex items-center justify-between mb-6">
<h1 class="text-xl font-semibold text-gray-800 flex items-center gap-3">
Mail profili
<span class="text-xs font-medium text-gray-400">({{ profiles.length }})</span>
</h1>
<button
@click="openCreate"
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow"
>
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nov profil
</button>
</div>
<div class="rounded-lg border bg-white overflow-hidden shadow-sm">
<table class="w-full text-sm">
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
<tr>
<th class="px-3 py-2 text-left">Ime</th>
<th class="px-3 py-2 text-left">Host</th>
<th class="px-3 py-2">Port</th>
<th class="px-3 py-2">Enc</th>
<th class="px-3 py-2">Aktivno</th>
<th class="px-3 py-2">Test</th>
<th class="px-3 py-2">Zadnji uspeh</th>
<th class="px-3 py-2">Napaka</th>
<th class="px-3 py-2">Akcije</th>
</tr>
</thead>
<tbody>
<tr
v-for="p in profiles"
:key="p.id"
class="border-t last:border-b hover:bg-gray-50"
>
<td class="px-3 py-2 font-medium text-gray-800">{{ p.name }}</td>
<td class="px-3 py-2">{{ p.host }}</td>
<td class="px-3 py-2 text-center">{{ p.port }}</td>
<td class="px-3 py-2 text-center">{{ p.encryption || "—" }}</td>
<td class="px-3 py-2 text-center">
<button
@click="toggleActive(p)"
class="text-indigo-600 hover:text-indigo-800"
:title="p.active ? 'Onemogoči' : 'Omogoči'"
>
<FontAwesomeIcon
:icon="p.active ? faToggleOn : faToggleOff"
class="w-5 h-5"
/>
</button>
</td>
<td class="px-3 py-2 text-center">
<span :class="['font-medium', statusClass(p)]">{{
p.test_status || "—"
}}</span>
</td>
<td class="px-3 py-2 text-xs text-gray-500">
{{ p.last_success_at ? new Date(p.last_success_at).toLocaleString() : "—" }}
</td>
<td
class="px-3 py-2 text-xs text-rose-600 max-w-[160px] truncate"
:title="p.last_error_message"
>
{{ p.last_error_message || "—" }}
</td>
<td class="px-3 py-2 flex items-center gap-2">
<button
@click="testConnection(p)"
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-amber-600 border-amber-300 bg-amber-50 hover:bg-amber-100"
>
<FontAwesomeIcon :icon="faFlask" class="w-3.5 h-3.5" /> Test
</button>
<button
@click="sendTestEmail(p)"
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-emerald-700 border-emerald-300 bg-emerald-50 hover:bg-emerald-100"
title="Pošlji testni email"
>
<FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5" /> Pošlji test
</button>
<button
@click="openEdit(p)"
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-600 border-indigo-300 bg-indigo-50 hover:bg-indigo-100"
title="Uredi profil"
>
<FontAwesomeIcon :icon="faArrowsRotate" class="w-3.5 h-3.5" /> Uredi
</button>
</td>
</tr>
</tbody>
</table>
</div>
<CreateDialog <Card>
:show="createOpen" <CardHeader>
title="Nov Mail profil" <div class="flex items-start justify-between">
max-width="2xl" <div class="flex items-start gap-3">
confirm-text="Shrani" <div
:processing="form.processing" class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
@close="closeCreate" >
@confirm="submitCreate" <MailIcon class="h-5 w-5" />
> </div>
<form @submit.prevent="submitCreate" id="create-mail-profile" class="space-y-5"> <div>
<CardTitle>Mail profili</CardTitle>
<CardDescription
>Upravljajte SMTP profile za pošiljanje e-pošte ({{
profiles.length
}})</CardDescription
>
</div>
</div>
<Button @click="openCreate">
<PlusIcon class="h-4 w-4 mr-2" />
Nov profil
</Button>
</div>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Ime</TableHead>
<TableHead>Host</TableHead>
<TableHead class="text-center">Port</TableHead>
<TableHead class="text-center">Enc</TableHead>
<TableHead class="text-center">Aktivno</TableHead>
<TableHead class="text-center">Status</TableHead>
<TableHead>Zadnji uspeh</TableHead>
<TableHead>Napaka</TableHead>
<TableHead class="text-right">Akcije</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="p in profiles" :key="p.id">
<TableCell class="font-medium">{{ p.name }}</TableCell>
<TableCell>{{ p.host }}</TableCell>
<TableCell class="text-center">{{ p.port }}</TableCell>
<TableCell class="text-center">
<Badge v-if="p.encryption" variant="outline">{{
p.encryption.toUpperCase()
}}</Badge>
<span v-else class="text-muted-foreground">—</span>
</TableCell>
<TableCell class="text-center">
<Switch
:default-value="p.active"
@update:model-value="() => toggleActive(p)"
/>
</TableCell>
<TableCell class="text-center">
<Badge
v-if="p.test_status === 'success'"
variant="default"
class="bg-green-100 text-green-800 hover:bg-green-100"
>{{ p.test_status }}</Badge
>
<Badge v-else-if="p.test_status === 'failed'" variant="destructive">{{
p.test_status
}}</Badge>
<Badge
v-else-if="p.test_status === 'queued'"
variant="secondary"
class="bg-amber-100 text-amber-800 hover:bg-amber-100"
>{{ p.test_status }}</Badge
>
<span v-else class="text-muted-foreground">—</span>
</TableCell>
<TableCell class="text-sm text-muted-foreground">
{{
p.last_success_at ? new Date(p.last_success_at).toLocaleString() : "—"
}}
</TableCell>
<TableCell
class="text-sm text-destructive max-w-[200px] truncate"
:title="p.last_error_message"
>
{{ p.last_error_message || "—" }}
</TableCell>
<TableCell class="text-right">
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="sm">
<MoreVerticalIcon class="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Akcije</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem @click="testConnection(p)">
<FlaskConicalIcon class="h-4 w-4 mr-2" />
Test povezavo
</DropdownMenuItem>
<DropdownMenuItem @click="sendTestEmail(p)">
<SendIcon class="h-4 w-4 mr-2" />
Pošlji testni email
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem @click="openEdit(p)">
<PencilIcon class="h-4 w-4 mr-2" />
Uredi profil
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
<Dialog :open="createOpen" @update:open="(val) => (createOpen = val)">
<DialogContent class="max-w-2xl">
<DialogHeader>
<DialogTitle>Nov Mail profil</DialogTitle>
<DialogDescription
>Ustvarite nov SMTP profil za pošiljanje e-pošte</DialogDescription
>
</DialogHeader>
<form @submit.prevent="submitCreate" class="space-y-4">
<div class="grid gap-4 grid-cols-2"> <div class="grid gap-4 grid-cols-2">
<div class="col-span-1"> <div class="space-y-2">
<label class="label">Ime</label> <Label for="create-name">Ime</Label>
<input v-model="form.name" type="text" class="input" /> <Input id="create-name" v-model="form.name" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Host</label> <Label for="create-host">Host</Label>
<input v-model="form.host" type="text" class="input" /> <Input id="create-host" v-model="form.host" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Port</label> <Label for="create-port">Port</Label>
<input v-model="form.port" type="number" class="input" /> <Input id="create-port" v-model.number="form.port" type="number" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Encryption</label> <Label for="create-encryption">Encryption</Label>
<select v-model="form.encryption" class="input"> <Select v-model="form.encryption">
<option value="">(None)</option> <SelectTrigger id="create-encryption">
<option value="tls">TLS</option> <SelectValue placeholder="Izberi..." />
<option value="ssl">SSL</option> </SelectTrigger>
</select> <SelectContent>
<SelectItem :value="null">None</SelectItem>
<SelectItem value="tls">TLS</SelectItem>
<SelectItem value="ssl">SSL</SelectItem>
</SelectContent>
</Select>
</div> </div>
<div> <div class="space-y-2">
<label class="label">Username</label> <Label for="create-username">Username</Label>
<input v-model="form.username" type="text" class="input" /> <Input id="create-username" v-model="form.username" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Password</label> <Label for="create-password">Password</Label>
<input <Input
id="create-password"
v-model="form.password" v-model="form.password"
type="password" type="password"
class="input"
autocomplete="new-password" autocomplete="new-password"
/> />
</div> </div>
<div> <div class="space-y-2">
<label class="label">From naslov</label> <Label for="create-from-address">From naslov</Label>
<input v-model="form.from_address" type="email" class="input" /> <Input id="create-from-address" v-model="form.from_address" type="email" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">From ime</label> <Label for="create-from-name">From ime</Label>
<input v-model="form.from_name" type="text" class="input" /> <Input id="create-from-name" v-model="form.from_name" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Prioriteta</label> <Label for="create-priority">Prioriteta</Label>
<input v-model="form.priority" type="number" class="input" /> <Input id="create-priority" v-model.number="form.priority" type="number" />
</div> </div>
</div> </div>
</form> </form>
</CreateDialog> <DialogFooter>
<!-- Edit Modal --> <Button variant="outline" @click="closeCreate" :disabled="form.processing"
<UpdateDialog >Prekliči</Button
:show="editOpen" >
title="Uredi Mail profil" <Button @click="submitCreate" :disabled="form.processing">Shrani</Button>
max-width="2xl" </DialogFooter>
confirm-text="Shrani" </DialogContent>
:processing="form.processing" </Dialog>
@close="closeEdit" <Dialog :open="editOpen" @update:open="(val) => (editOpen = val)">
@confirm="submitEdit" <DialogContent class="max-w-2xl">
> <DialogHeader>
<form @submit.prevent="submitEdit" id="edit-mail-profile" class="space-y-5"> <DialogTitle>Uredi Mail profil</DialogTitle>
<DialogDescription>Posodobite nastavitve SMTP profila</DialogDescription>
</DialogHeader>
<form @submit.prevent="submitEdit" class="space-y-4">
<div class="grid gap-4 grid-cols-2"> <div class="grid gap-4 grid-cols-2">
<div> <div class="space-y-2">
<label class="label">Ime</label> <Label for="edit-name">Ime</Label>
<input v-model="form.name" type="text" class="input" /> <Input id="edit-name" v-model="form.name" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Host</label> <Label for="edit-host">Host</Label>
<input v-model="form.host" type="text" class="input" /> <Input id="edit-host" v-model="form.host" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Port</label> <Label for="edit-port">Port</Label>
<input v-model="form.port" type="number" class="input" /> <Input id="edit-port" v-model.number="form.port" type="number" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Encryption</label> <Label for="edit-encryption">Encryption</Label>
<select v-model="form.encryption" class="input"> <Select v-model="form.encryption">
<option value="">(None)</option> <SelectTrigger id="edit-encryption">
<option value="tls">TLS</option> <SelectValue placeholder="Izberi..." />
<option value="ssl">SSL</option> </SelectTrigger>
</select> <SelectContent>
<SelectItem :value="null">None</SelectItem>
<SelectItem value="tls">TLS</SelectItem>
<SelectItem value="ssl">SSL</SelectItem>
</SelectContent>
</Select>
</div> </div>
<div> <div class="space-y-2">
<label class="label">Username</label> <Label for="edit-username">Username</Label>
<input v-model="form.username" type="text" class="input" /> <Input id="edit-username" v-model="form.username" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Password (nova, če spreminjaš)</label> <Label for="edit-password">Password (nova, če spreminjaš)</Label>
<input v-model="form.password" type="password" class="input" autocomplete="new-password" /> <Input
id="edit-password"
v-model="form.password"
type="password"
autocomplete="new-password"
/>
</div> </div>
<div> <div class="space-y-2">
<label class="label">From naslov</label> <Label for="edit-from-address">From naslov</Label>
<input v-model="form.from_address" type="email" class="input" /> <Input id="edit-from-address" v-model="form.from_address" type="email" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">From ime</label> <Label for="edit-from-name">From ime</Label>
<input v-model="form.from_name" type="text" class="input" /> <Input id="edit-from-name" v-model="form.from_name" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Prioriteta</label> <Label for="edit-priority">Prioriteta</Label>
<input v-model="form.priority" type="number" class="input" /> <Input id="edit-priority" v-model.number="form.priority" type="number" />
</div> </div>
</div> </div>
<p class="text-xs text-gray-500">Pusti geslo prazno, če želiš obdržati obstoječe.</p> <p class="text-sm text-muted-foreground">
</form> Pusti geslo prazno, če želiš obdržati obstoječe.
</UpdateDialog> </p>
</form>
<DialogFooter>
<Button variant="outline" @click="closeEdit" :disabled="form.processing"
>Prekliči</Button
>
<Button @click="submitEdit" :disabled="form.processing">Shrani</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped> <style scoped></style>
/* Utility replacements for @apply not processed in SFC scope build pipeline */
.input {
width: 100%;
border-radius: 0.375rem;
border: 1px solid var(--tw-color-gray-300, #d1d5db);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-color: #6366f1;
border-color: #6366f1;
box-shadow: 0 0 0 1px #6366f1;
}
.label {
display: block;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 0.25rem;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
.animate-fade-in {
animation: fade-in 0.25s ease;
}
</style>

902
resources/js/Pages/Admin/Packages/Index.vue
View File

File diff suppressed because it is too large Load Diff

427
resources/js/Pages/Admin/Packages/Show.vue
View File

@ -2,6 +2,27 @@
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link, router } from "@inertiajs/vue3"; import { Link, router } from "@inertiajs/vue3";
import { onMounted, onUnmounted, ref, computed } from "vue"; import { onMounted, onUnmounted, ref, computed } from "vue";
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Separator } from "@/Components/ui/separator";
import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
import Pagination from "@/Components/Pagination.vue";
import {
PackageIcon,
ArrowLeftIcon,
PlayIcon,
XCircleIcon,
RefreshCwIcon,
CopyIcon,
} from "lucide-vue-next";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
const props = defineProps({ const props = defineProps({
package: { type: Object, required: true }, package: { type: Object, required: true },
@ -9,6 +30,24 @@ const props = defineProps({
preview: { type: [Object, null], default: null }, preview: { type: [Object, null], default: null },
}); });
const columns = [
{ accessorKey: "id", header: "ID" },
{ accessorKey: "target", header: "Prejemnik" },
{ accessorKey: "message", header: "Sporočilo" },
{ accessorKey: "status", header: "Status" },
{ accessorKey: "last_error", header: "Napaka" },
{ accessorKey: "provider_message_id", header: "Provider ID" },
{ accessorKey: "cost", header: "Cena" },
{ accessorKey: "currency", header: "Valuta" },
];
function getStatusVariant(status) {
if (["queued", "processing"].includes(status)) return "secondary";
if (status === "sent") return "default";
if (status === "failed") return "destructive";
return "outline";
}
const refreshing = ref(false); const refreshing = ref(false);
let timer = null; let timer = null;
@ -16,11 +55,15 @@ const isRunning = computed(() => ["queued", "running"].includes(props.package.st
// Derive a summary of payload/template/body from the first item on the page. // Derive a summary of payload/template/body from the first item on the page.
// Assumption: payload is the same across items in a package (both flows use a common payload). // Assumption: payload is the same across items in a package (both flows use a common payload).
const firstItem = computed(() => (props.items?.data && props.items.data.length ? props.items.data[0] : null)); const firstItem = computed(() =>
const firstPayload = computed(() => (firstItem.value ? firstItem.value.payload_json || {} : {})); props.items?.data && props.items.data.length ? props.items.data[0] : null
);
const firstPayload = computed(() =>
firstItem.value ? firstItem.value.payload_json || {} : {}
);
const messageBody = computed(() => { const messageBody = computed(() => {
const b = firstPayload.value?.body; const b = firstPayload.value?.body;
if (typeof b === 'string') { if (typeof b === "string") {
const t = b.trim(); const t = b.trim();
return t.length ? t : null; return t.length ? t : null;
} }
@ -73,14 +116,16 @@ async function copyText(text) {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
} catch (e) { } catch (e) {
// Fallback for older browsers // Fallback for older browsers
const ta = document.createElement('textarea'); const ta = document.createElement("textarea");
ta.value = text; ta.value = text;
ta.style.position = 'fixed'; ta.style.position = "fixed";
ta.style.opacity = '0'; ta.style.opacity = "0";
document.body.appendChild(ta); document.body.appendChild(ta);
ta.focus(); ta.focus();
ta.select(); ta.select();
try { document.execCommand('copy'); } catch (_) {} try {
document.execCommand("copy");
} catch (_) {}
document.body.removeChild(ta); document.body.removeChild(ta);
} }
} }
@ -88,195 +133,205 @@ async function copyText(text) {
<template> <template>
<AdminLayout :title="`Paket #${package.id}`"> <AdminLayout :title="`Paket #${package.id}`">
<div class="flex items-center justify-between mb-4"> <Card class="mb-4">
<div> <CardHeader>
<h2 class="text-base font-semibold text-gray-800">Paket #{{ package.id }}</h2> <div class="flex items-center justify-between">
<p class="text-xs text-gray-500"> <div class="flex items-center gap-3">
UUID: <span class="font-mono">{{ package.uuid }}</span> <PackageIcon class="h-5 w-5 text-muted-foreground" />
</p> <div>
</div> <CardTitle>Paket #{{ package.id }}</CardTitle>
<div class="flex items-center gap-2"> <CardDescription class="font-mono"
<Link >UUID: {{ package.uuid }}</CardDescription
:href="route('admin.packages.index')" >
class="text-sm text-gray-600 hover:underline" </div>
>← Nazaj</Link </div>
> <div class="flex items-center gap-2">
<button <Button variant="ghost" size="sm" as-child>
v-if="['draft', 'failed'].includes(package.status)" <Link :href="route('admin.packages.index')">
@click="dispatchPkg" <ArrowLeftIcon class="h-4 w-4 mr-2" />
class="px-3 py-1.5 rounded bg-indigo-600 text-white text-sm" Nazaj
> </Link>
Zaženi </Button>
</button> <Button
<button v-if="['draft', 'failed'].includes(package.status)"
v-if="isRunning" @click="dispatchPkg"
@click="cancelPkg" size="sm"
class="px-3 py-1.5 rounded bg-rose-600 text-white text-sm" >
> <PlayIcon class="h-4 w-4 mr-2" />
Prekliči Zaženi
</button> </Button>
<button <Button v-if="isRunning" @click="cancelPkg" variant="destructive" size="sm">
v-if="!isRunning" <XCircleIcon class="h-4 w-4 mr-2" />
@click="reload" Prekliči
class="px-3 py-1.5 rounded border text-sm" </Button>
> <Button v-if="!isRunning" @click="reload" variant="outline" size="sm">
Osveži <RefreshCwIcon class="h-4 w-4" />
</button> </Button>
</div> </div>
</div> </div>
</CardHeader>
</Card>
<div class="grid sm:grid-cols-4 gap-3 mb-4"> <div class="grid sm:grid-cols-4 gap-3 mb-4">
<div class="rounded border bg-white p-3"> <Card>
<p class="text-xs text-gray-500">Status</p> <CardHeader class="pb-2">
<p class="text-sm font-semibold mt-1 uppercase">{{ package.status }}</p> <CardDescription>Status</CardDescription>
</div> <CardTitle class="text-xl uppercase">{{ package.status }}</CardTitle>
<div class="rounded border bg-white p-3"> </CardHeader>
<p class="text-xs text-gray-500">Skupaj</p> </Card>
<p class="text-sm font-semibold mt-1">{{ package.total_items }}</p> <Card>
</div> <CardHeader class="pb-2">
<div class="rounded border bg-white p-3"> <CardDescription>Skupaj</CardDescription>
<p class="text-xs text-gray-500">Poslano</p> <CardTitle class="text-xl">{{ package.total_items }}</CardTitle>
<p class="text-sm font-semibold mt-1 text-emerald-700"> </CardHeader>
{{ package.sent_count }} </Card>
</p> <Card>
</div> <CardHeader class="pb-2">
<div class="rounded border bg-white p-3"> <CardDescription>Poslano</CardDescription>
<p class="text-xs text-gray-500">Neuspešno</p> <CardTitle class="text-xl text-emerald-700">{{ package.sent_count }}</CardTitle>
<p class="text-sm font-semibold mt-1 text-rose-700">{{ package.failed_count }}</p> </CardHeader>
</div> </Card>
<Card>
<CardHeader class="pb-2">
<CardDescription>Neuspešno</CardDescription>
<CardTitle class="text-xl text-rose-700">{{ package.failed_count }}</CardTitle>
</CardHeader>
</Card>
</div> </div>
<!-- Payload / Message preview --> <!-- Payload / Message preview -->
<div class="mb-4 grid gap-3 sm:grid-cols-2"> <div class="mb-4 grid gap-3 sm:grid-cols-2">
<div class="rounded border bg-white p-3"> <Card>
<p class="text-xs text-gray-500 mb-2">Sporočilo</p> <CardHeader>
<template v-if="preview && preview.content"> <CardTitle class="text-base">Sporočilo</CardTitle>
<div class="text-sm whitespace-pre-wrap text-gray-800">{{ preview.content }}</div> </CardHeader>
<div class="mt-2"> <CardContent>
<button @click="copyText(preview.content)" class="px-2 py-1 rounded border text-xs">Kopiraj</button> <template v-if="preview && preview.content">
<div class="text-sm whitespace-pre-wrap mb-3">{{ preview.content }}</div>
<Button @click="copyText(preview.content)" size="sm" variant="outline">
<CopyIcon class="h-3.5 w-3.5 mr-2" />
Kopiraj
</Button>
<p
v-if="preview.source === 'template' && preview.template"
class="mt-3 text-xs text-muted-foreground"
>
Predloga: {{ preview.template.name }} (#{{ preview.template.id }})
</p>
</template>
<template v-else>
<div v-if="messageBody" class="text-sm whitespace-pre-wrap">
{{ messageBody }}
</div>
<div v-else class="text-sm text-muted-foreground">
<template v-if="payloadSummary.template_id">
Uporabljena bo predloga #{{ payloadSummary.template_id }}.
</template>
<template v-else> Vsebina sporočila ni določena. </template>
</div>
</template>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle class="text-base">Meta / Nastavitve pošiljanja</CardTitle>
</CardHeader>
<CardContent>
<dl class="text-sm grid grid-cols-3 gap-y-2">
<dt class="col-span-1 text-muted-foreground">Profil</dt>
<dd class="col-span-2">{{ payloadSummary.profile_id ?? "—" }}</dd>
<dt class="col-span-1 text-muted-foreground">Pošiljatelj</dt>
<dd class="col-span-2">{{ payloadSummary.sender_id ?? "—" }}</dd>
<dt class="col-span-1 text-muted-foreground">Predloga</dt>
<dd class="col-span-2">{{ payloadSummary.template_id ?? "—" }}</dd>
<dt class="col-span-1 text-muted-foreground">Delivery report</dt>
<dd class="col-span-2">{{ payloadSummary.delivery_report ? "da" : "ne" }}</dd>
</dl>
<div
v-if="
package.meta && (package.meta.source || package.meta.skipped !== undefined)
"
class="mt-3 pt-3 border-t text-xs text-muted-foreground"
>
<span v-if="package.meta.source" class="mr-3"
>Vir: {{ package.meta.source }}</span
>
<span v-if="package.meta.skipped !== undefined"
>Preskočeno: {{ package.meta.skipped }}</span
>
</div> </div>
<div v-if="preview.source === 'template' && preview.template" class="mt-2 text-xs text-gray-500"> </CardContent>
Predloga: {{ preview.template.name }} (#{{ preview.template.id }}) </Card>
</div> </div>
</template>
<template v-else> <AppCard
<div v-if="messageBody" class="text-sm whitespace-pre-wrap text-gray-800"> title=""
{{ messageBody }} padding="none"
</div> class="p-0! gap-0"
<div v-else class="text-sm text-gray-600"> header-class="py-3! px-4 gap-0 text-muted-foreground"
<template v-if="payloadSummary.template_id"> body-class=""
Uporabljena bo predloga #{{ payloadSummary.template_id }}. >
</template> <template #header>
<template v-else> <div class="flex items-center gap-2">
Vsebina sporočila ni določena. <PackageIcon size="18" />
</template> <CardTitle class="uppercase">Uvozi</CardTitle>
</div>
</template>
</div>
<div class="rounded border bg-white p-3">
<p class="text-xs text-gray-500 mb-2">Meta / Nastavitve pošiljanja</p>
<dl class="text-sm text-gray-700 grid grid-cols-3 gap-y-1">
<dt class="col-span-1 text-gray-500">Profil</dt>
<dd class="col-span-2">{{ payloadSummary.profile_id ?? '—' }}</dd>
<dt class="col-span-1 text-gray-500">Pošiljatelj</dt>
<dd class="col-span-2">{{ payloadSummary.sender_id ?? '—' }}</dd>
<dt class="col-span-1 text-gray-500">Predloga</dt>
<dd class="col-span-2">{{ payloadSummary.template_id ?? '—' }}</dd>
<dt class="col-span-1 text-gray-500">Delivery report</dt>
<dd class="col-span-2">{{ payloadSummary.delivery_report ? 'da' : 'ne' }}</dd>
</dl>
<div v-if="package.meta && (package.meta.source || package.meta.skipped !== undefined)" class="mt-2 text-xs text-gray-500">
<span v-if="package.meta.source" class="mr-3">Vir: {{ package.meta.source }}</span>
<span v-if="package.meta.skipped !== undefined">Preskočeno: {{ package.meta.skipped }}</span>
</div> </div>
</div> </template>
</div> <DataTableNew2
:columns="columns"
:data="items.data"
:meta="items"
route-name="admin.packages.show"
:route-params="{ id: package.id }"
>
<template #cell-target="{ row }">
<span class="text-sm">{{
(row.target_json && row.target_json.number) || "—"
}}</span>
</template>
<div class="overflow-hidden rounded-md border bg-white"> <template #cell-message="{ row }">
<table class="min-w-full divide-y divide-gray-200"> <div class="flex items-start gap-2">
<thead class="bg-gray-50"> <div class="text-xs max-w-[420px] line-clamp-2 whitespace-pre-wrap">
<tr class="text-xs text-gray-500"> {{ row.rendered_preview || "—" }}
<th class="px-3 py-2 text-left font-medium">ID</th> </div>
<th class="px-3 py-2 text-left font-medium">Prejemnik</th> <Button
<th class="px-3 py-2 text-left font-medium">Sporočilo</th> v-if="row.rendered_preview"
<th class="px-3 py-2 text-left font-medium">Status</th> @click="copyText(row.rendered_preview)"
<th class="px-3 py-2 text-left font-medium">Napaka</th> size="sm"
<th class="px-3 py-2 text-left font-medium">Provider ID</th> variant="ghost"
<th class="px-3 py-2 text-left font-medium">Cena</th> >
<th class="px-3 py-2 text-left font-medium">Valuta</th> <CopyIcon class="h-3.5 w-3.5" />
</tr> </Button>
</thead> </div>
<tbody class="divide-y divide-gray-200 text-sm"> </template>
<tr v-for="it in items.data" :key="it.id">
<td class="px-3 py-2">{{ it.id }}</td>
<td class="px-3 py-2">
{{ (it.target_json && it.target_json.number) || "—" }}
</td>
<td class="px-3 py-2">
<div class="flex items-start gap-2">
<div class="text-xs text-gray-800 max-w-[420px] line-clamp-2 whitespace-pre-wrap">{{ it.rendered_preview || '—' }}</div>
<button v-if="it.rendered_preview" @click="copyText(it.rendered_preview)" class="px-2 py-0.5 rounded border text-xs">Kopiraj</button>
</div>
</td>
<td class="px-3 py-2">
<span
class="inline-flex items-center px-2 py-0.5 rounded text-xs"
:class="{
'bg-yellow-50 text-yellow-700': ['queued', 'processing'].includes(
it.status
),
'bg-emerald-50 text-emerald-700': it.status === 'sent',
'bg-rose-50 text-rose-700': it.status === 'failed',
'bg-gray-100 text-gray-600':
it.status === 'canceled' || it.status === 'skipped',
}"
>{{ it.status }}</span
>
</td>
<td class="px-3 py-2 text-xs text-rose-700">{{ it.last_error ?? "—" }}</td>
<td class="px-3 py-2 text-xs text-gray-500 font-mono">
{{ it.provider_message_id ?? "—" }}
</td>
<td class="px-3 py-2">{{ it.cost ?? "—" }}</td>
<td class="px-3 py-2">{{ it.currency ?? "—" }}</td>
</tr>
<tr v-if="!items.data?.length">
<td colspan="8" class="px-3 py-8 text-center text-sm text-gray-500">
Ni elementov za prikaz.
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 flex items-center justify-between text-sm"> <template #cell-status="{ row }">
<div class="text-gray-600"> <Badge :variant="getStatusVariant(row.status)">{{ row.status }}</Badge>
Prikazano {{ items.from || 0 }}–{{ items.to || 0 }} od {{ items.total || 0 }} </template>
</div>
<div class="space-x-2">
<Link
:href="items.prev_page_url || '#'"
:class="[
'px-3 py-1.5 rounded border',
items.prev_page_url
? 'text-gray-700 hover:bg-gray-50'
: 'text-gray-400 cursor-not-allowed',
]"
>Nazaj</Link
>
<Link
:href="items.next_page_url || '#'"
:class="[
'px-3 py-1.5 rounded border',
items.next_page_url
? 'text-gray-700 hover:bg-gray-50'
: 'text-gray-400 cursor-not-allowed',
]"
>Naprej</Link
>
</div>
</div>
<div v-if="refreshing" class="mt-2 text-xs text-gray-500">Osveževanje ...</div> <template #cell-last_error="{ row }">
<span class="text-xs text-rose-700">{{ row.last_error ?? "—" }}</span>
</template>
<template #cell-provider_message_id="{ row }">
<span class="font-mono text-xs text-muted-foreground">{{
row.provider_message_id ?? "—"
}}</span>
</template>
<template #cell-cost="{ row }">
<span class="text-sm">{{ row.cost ?? "—" }}</span>
</template>
<template #cell-currency="{ row }">
<span class="text-sm">{{ row.currency ?? "—" }}</span>
</template>
</DataTableNew2>
</AppCard>
<div v-if="refreshing" class="mt-2 text-xs text-muted-foreground">
Osveževanje ...
</div>
</AdminLayout> </AdminLayout>
</template> </template>

172
resources/js/Pages/Admin/Permissions/Create.vue
View File

@ -1,80 +1,134 @@
<script setup> <script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue' import AdminLayout from "@/Layouts/AdminLayout.vue";
import { useForm, Link } from '@inertiajs/vue3' import { useForm, Link } from "@inertiajs/vue3";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { KeyRoundIcon, ArrowLeftIcon, SaveIcon } from "lucide-vue-next";
import { faKey, faArrowLeft, faPlus } from '@fortawesome/free-solid-svg-icons' import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import { Checkbox } from "@/Components/ui/checkbox";
const props = defineProps({ const props = defineProps({
roles: Array, roles: Array,
}) });
const form = useForm({ const form = useForm({
name: '', name: "",
slug: '', slug: "",
description: '', description: "",
roles: [], roles: [],
}) });
function submit() { function submit() {
form.post(route('admin.permissions.store'), { form.post(route("admin.permissions.store"), {
preserveScroll: true, preserveScroll: true,
onSuccess: () => form.reset('name','slug','description','roles') onSuccess: () => form.reset("name", "slug", "description", "roles"),
}) });
} }
</script> </script>
<template> <template>
<AdminLayout title="Novo dovoljenje"> <AdminLayout title="Novo dovoljenje">
<div class="max-w-2xl mx-auto bg-white border rounded-xl shadow-sm p-6 space-y-8"> <div class="max-w-2xl mx-auto">
<header class="flex items-start justify-between gap-6"> <Card>
<div class="space-y-1"> <CardHeader>
<h1 class="text-xl font-semibold tracking-tight flex items-center gap-2"> <div class="flex items-start justify-between">
<span class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-indigo-50 text-indigo-600"><FontAwesomeIcon :icon="faKey" /></span> <div class="flex items-start gap-3">
Novo dovoljenje <div
</h1> class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
<p class="text-sm text-gray-500">Ustvari sistemsko dovoljenje za uporabo pri vlogah.</p> >
</div> <KeyRoundIcon class="h-5 w-5" />
<Link :href="route('admin.permissions.index')" class="inline-flex items-center gap-1 text-xs font-medium text-gray-500 hover:text-gray-700"> </div>
<FontAwesomeIcon :icon="faArrowLeft" class="w-4 h-4" /> Nazaj <div>
</Link> <CardTitle>Novo dovoljenje</CardTitle>
</header> <CardDescription
>Ustvari sistemsko dovoljenje za uporabo pri vlogah.</CardDescription
<form @submit.prevent="submit" class="space-y-6"> >
<div class="grid sm:grid-cols-2 gap-6"> </div>
<div class="space-y-1">
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Ime</label>
<input v-model="form.name" type="text" class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500" />
<p v-if="form.errors.name" class="text-xs text-red-600 mt-1">{{ form.errors.name }}</p>
</div>
<div class="space-y-1">
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Slug</label>
<input v-model="form.slug" type="text" class="w-full border rounded-md px-3 py-2 text-sm font-mono focus:ring-indigo-500 focus:border-indigo-500" />
<p v-if="form.errors.slug" class="text-xs text-red-600 mt-1">{{ form.errors.slug }}</p>
</div>
<div class="sm:col-span-2 space-y-1">
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Opis</label>
<textarea v-model="form.description" rows="3" class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500" />
<p v-if="form.errors.description" class="text-xs text-red-600 mt-1">{{ form.errors.description }}</p>
</div>
<div class="sm:col-span-2 space-y-1">
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600">Veži na vloge</label>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
<label v-for="r in props.roles" :key="r.id" class="inline-flex items-center gap-2 text-sm">
<input type="checkbox" :value="r.id" v-model="form.roles" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"/>
<span><span class="font-medium">{{ r.name }}</span> <span class="text-xs text-gray-500">({{ r.slug }})</span></span>
</label>
</div> </div>
<p v-if="form.errors.roles" class="text-xs text-red-600 mt-1">{{ form.errors.roles }}</p> <Button variant="ghost" size="sm" as-child>
<Link :href="route('admin.permissions.index')">
<ArrowLeftIcon class="h-4 w-4 mr-2" />
Nazaj
</Link>
</Button>
</div> </div>
</div> </CardHeader>
<CardContent>
<form @submit.prevent="submit" class="space-y-6">
<div class="grid sm:grid-cols-2 gap-6">
<div class="space-y-2">
<Label for="name">Ime</Label>
<Input id="name" v-model="form.name" type="text" />
<p v-if="form.errors.name" class="text-sm text-destructive">
{{ form.errors.name }}
</p>
</div>
<div class="space-y-2">
<Label for="slug">Slug</Label>
<Input id="slug" v-model="form.slug" type="text" class="font-mono" />
<p v-if="form.errors.slug" class="text-sm text-destructive">
{{ form.errors.slug }}
</p>
</div>
<div class="sm:col-span-2 space-y-2">
<Label for="description">Opis</Label>
<Textarea id="description" v-model="form.description" rows="3" />
<p v-if="form.errors.description" class="text-sm text-destructive">
{{ form.errors.description }}
</p>
</div>
<div class="sm:col-span-2 space-y-2">
<Label>Veži na vloge</Label>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
<label
v-for="r in props.roles"
:key="r.id"
class="flex items-center gap-2 text-sm cursor-pointer"
>
<Checkbox
:value="r.id"
:checked="form.roles.includes(r.id)"
@update:checked="
(checked) => {
if (checked) form.roles.push(r.id);
else form.roles = form.roles.filter((id) => id !== r.id);
}
"
/>
<span
><span class="font-medium">{{ r.name }}</span>
<span class="text-xs text-muted-foreground"
>({{ r.slug }})</span
></span
>
</label>
</div>
<p v-if="form.errors.roles" class="text-sm text-destructive">
{{ form.errors.roles }}
</p>
</div>
</div>
<div class="flex items-center gap-3 pt-2"> <div class="flex items-center gap-3 pt-2">
<button :disabled="form.processing" type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"> <Button :disabled="form.processing" type="submit">
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Shrani <SaveIcon class="h-4 w-4 mr-2" />
</button> Shrani
<Link :href="route('admin.permissions.index')" class="text-sm text-gray-500 hover:text-gray-700">Prekliči</Link> </Button>
</div> <Button variant="ghost" as-child>
</form> <Link :href="route('admin.permissions.index')">Prekliči</Link>
</Button>
</div>
</form>
</CardContent>
</Card>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>

195
resources/js/Pages/Admin/Permissions/Edit.vue
View File

@ -1,8 +1,13 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { useForm, Link } from "@inertiajs/vue3"; import { useForm, Link } from "@inertiajs/vue3";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { KeyRoundIcon, ArrowLeftIcon, SaveIcon } from "lucide-vue-next";
import { faKey, faArrowLeft, faSave } from "@fortawesome/free-solid-svg-icons"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import { Checkbox } from "@/Components/ui/checkbox";
const props = defineProps({ const props = defineProps({
permission: Object, permission: Object,
@ -26,112 +31,92 @@ function submit() {
<template> <template>
<AdminLayout :title="`Uredi dovoljenje — ${props.permission.name}`"> <AdminLayout :title="`Uredi dovoljenje — ${props.permission.name}`">
<div class="max-w-2xl mx-auto bg-white border rounded-xl shadow-sm p-6 space-y-8"> <div class="max-w-2xl mx-auto">
<header class="flex items-start justify-between gap-6"> <Card>
<div class="space-y-1"> <CardHeader>
<h1 class="text-xl font-semibold tracking-tight flex items-center gap-2"> <div class="flex items-start justify-between">
<span <div class="flex items-start gap-3">
class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-indigo-50 text-indigo-600" <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
><FontAwesomeIcon :icon="faKey" <KeyRoundIcon class="h-5 w-5" />
/></span> </div>
Uredi dovoljenje <div>
</h1> <CardTitle>Uredi dovoljenje</CardTitle>
<p class="text-sm text-gray-500"> <CardDescription>Posodobi sistemsko dovoljenje in pripete vloge.</CardDescription>
Posodobi sistemsko dovoljenje in pripete vloge. </div>
</p>
</div>
<Link
:href="route('admin.permissions.index')"
class="inline-flex items-center gap-1 text-xs font-medium text-gray-500 hover:text-gray-700"
>
<FontAwesomeIcon :icon="faArrowLeft" class="w-4 h-4" /> Nazaj
</Link>
</header>
<form @submit.prevent="submit" class="space-y-6">
<div class="grid sm:grid-cols-2 gap-6">
<div class="space-y-1">
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600"
>Ime</label
>
<input
v-model="form.name"
type="text"
class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500"
/>
<p v-if="form.errors.name" class="text-xs text-red-600 mt-1">
{{ form.errors.name }}
</p>
</div>
<div class="space-y-1">
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600"
>Slug</label
>
<input
v-model="form.slug"
type="text"
class="w-full border rounded-md px-3 py-2 text-sm font-mono focus:ring-indigo-500 focus:border-indigo-500"
/>
<p v-if="form.errors.slug" class="text-xs text-red-600 mt-1">
{{ form.errors.slug }}
</p>
</div>
<div class="sm:col-span-2 space-y-1">
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600"
>Opis</label
>
<textarea
v-model="form.description"
rows="3"
class="w-full border rounded-md px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500"
/>
<p v-if="form.errors.description" class="text-xs text-red-600 mt-1">
{{ form.errors.description }}
</p>
</div>
<div class="sm:col-span-2 space-y-1">
<label class="block text-xs font-medium uppercase tracking-wide text-gray-600"
>Veži na vloge</label
>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
<label
v-for="r in props.roles"
:key="r.id"
class="inline-flex items-center gap-2 text-sm"
>
<input
type="checkbox"
:value="r.id"
v-model="form.roles"
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
<span
><span class="font-medium">{{ r.name }}</span>
<span class="text-xs text-gray-500">({{ r.slug }})</span></span
>
</label>
</div> </div>
<p v-if="form.errors.roles" class="text-xs text-red-600 mt-1"> <Button variant="ghost" size="sm" as-child>
{{ form.errors.roles }} <Link :href="route('admin.permissions.index')">
</p> <ArrowLeftIcon class="h-4 w-4 mr-2" />
Nazaj
</Link>
</Button>
</div> </div>
</div> </CardHeader>
<CardContent>
<div class="flex items-center gap-3 pt-2"> <form @submit.prevent="submit" class="space-y-6">
<button <div class="grid sm:grid-cols-2 gap-6">
:disabled="form.processing" <div class="space-y-2">
type="submit" <Label for="name">Ime</Label>
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50" <Input id="name" v-model="form.name" type="text" />
> <p v-if="form.errors.name" class="text-sm text-destructive">
<FontAwesomeIcon :icon="faSave" class="w-4 h-4" /> Shrani {{ form.errors.name }}
</button> </p>
<Link </div>
:href="route('admin.permissions.index')" <div class="space-y-2">
class="text-sm text-gray-500 hover:text-gray-700" <Label for="slug">Slug</Label>
>Prekliči</Link <Input id="slug" v-model="form.slug" type="text" class="font-mono" />
> <p v-if="form.errors.slug" class="text-sm text-destructive">
</div> {{ form.errors.slug }}
</form> </p>
</div>
<div class="sm:col-span-2 space-y-2">
<Label for="description">Opis</Label>
<Textarea id="description" v-model="form.description" rows="3" />
<p v-if="form.errors.description" class="text-sm text-destructive">
{{ form.errors.description }}
</p>
</div>
<div class="sm:col-span-2 space-y-2">
<Label>Veži na vloge</Label>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
<label
v-for="r in props.roles"
:key="r.id"
class="flex items-center gap-2 text-sm cursor-pointer"
>
<Checkbox
:value="r.id"
:checked="form.roles.includes(r.id)"
@update:checked="(checked) => {
if (checked) form.roles.push(r.id)
else form.roles = form.roles.filter(id => id !== r.id)
}"
/>
<span
><span class="font-medium">{{ r.name }}</span>
<span class="text-xs text-muted-foreground">({{ r.slug }})</span></span
>
</label>
</div>
<p v-if="form.errors.roles" class="text-sm text-destructive">
{{ form.errors.roles }}
</p>
</div>
</div>
<div class="flex items-center gap-3 pt-2">
<Button :disabled="form.processing" type="submit">
<SaveIcon class="h-4 w-4 mr-2" />
Shrani
</Button>
<Button variant="ghost" as-child>
<Link :href="route('admin.permissions.index')">Prekliči</Link>
</Button>
</div>
</form>
</CardContent>
</Card>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>

190
resources/js/Pages/Admin/Permissions/Index.vue
View File

@ -2,13 +2,12 @@
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link, usePage } from "@inertiajs/vue3"; import { Link, usePage } from "@inertiajs/vue3";
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { SearchIcon, PlusIcon, KeyRoundIcon, PencilIcon } from "lucide-vue-next";
import { import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
faMagnifyingGlass, import { Button } from "@/Components/ui/button";
faPlus, import { Input } from "@/Components/ui/input";
faKey, import { Badge } from "@/Components/ui/badge";
faPen, import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
} from "@fortawesome/free-solid-svg-icons";
const props = defineProps({ const props = defineProps({
permissions: Array, permissions: Array,
@ -29,103 +28,92 @@ const filtered = computed(() => {
<template> <template>
<AdminLayout title="Dovoljenja"> <AdminLayout title="Dovoljenja">
<div class="max-w-5xl mx-auto space-y-8"> <div class="max-w-5xl mx-auto">
<div class="bg-white border rounded-xl shadow-sm p-6 space-y-6"> <Card>
<header class="flex flex-col sm:flex-row sm:items-center gap-4 justify-between"> <CardHeader>
<div> <div class="flex flex-col sm:flex-row sm:items-center gap-4 justify-between">
<h1 class="text-xl font-semibold tracking-tight">Dovoljenja</h1> <div>
<p class="text-sm text-gray-500">Pregled vseh sistemskih dovoljenj.</p> <CardTitle>Dovoljenja</CardTitle>
<CardDescription>Pregled vseh sistemskih dovoljenj.</CardDescription>
</div>
<Button as-child>
<Link :href="route('admin.permissions.create')">
<PlusIcon class="h-4 w-4 mr-2" />
Novo
</Link>
</Button>
</div>
</CardHeader>
<CardContent class="space-y-4">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div class="relative w-full sm:max-w-xs">
<SearchIcon class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
v-model="q"
type="text"
placeholder="Išči..."
class="pl-9"
/>
</div>
<div class="text-sm text-muted-foreground">
{{ filtered.length }} / {{ props.permissions.length }} rezultatov
</div>
</div> </div>
<Link
:href="route('admin.permissions.create')"
class="inline-flex items-center gap-2 px-3 py-2 rounded-md text-xs font-medium bg-indigo-600 text-white hover:bg-indigo-500"
>
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Novo
</Link>
</header>
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div class="rounded-lg border">
<div class="relative w-full sm:max-w-xs"> <Table>
<span class="absolute left-2 top-2 text-gray-400"> <TableHeader>
<FontAwesomeIcon :icon="faMagnifyingGlass" class="w-4 h-4" /> <TableRow>
</span> <TableHead class="text-left">Ime</TableHead>
<input <TableHead class="text-left">Slug</TableHead>
v-model="q" <TableHead class="text-left">Opis</TableHead>
type="text" <TableHead class="text-left">Ustvarjeno</TableHead>
placeholder="Išči..." <TableHead class="text-left">Akcije</TableHead>
class="pl-8 pr-3 py-1.5 text-sm rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 w-full" </TableRow>
/> </TableHeader>
<TableBody>
<TableRow v-for="p in filtered" :key="p.id">
<TableCell class="font-medium">
<div class="flex items-center gap-2">
<div class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 text-primary">
<KeyRoundIcon class="h-4 w-4" />
</div>
<Link
:href="route('admin.permissions.edit', p.id)"
class="hover:underline"
>
{{ p.name }}
</Link>
</div>
</TableCell>
<TableCell class="font-mono text-xs">
<Badge variant="secondary">{{ p.slug }}</Badge>
</TableCell>
<TableCell class="text-sm max-w-md">
{{ p.description || "—" }}
</TableCell>
<TableCell class="text-sm text-muted-foreground">
{{ new Date(p.created_at).toLocaleDateString() }}
</TableCell>
<TableCell>
<Button variant="outline" size="sm" as-child>
<Link :href="route('admin.permissions.edit', p.id)">
<PencilIcon class="h-3.5 w-3.5 mr-2" />
Uredi
</Link>
</Button>
</TableCell>
</TableRow>
<TableRow v-if="!filtered.length">
<TableCell colspan="5" class="text-center text-sm text-muted-foreground py-8">
Ni rezultatov
</TableCell>
</TableRow>
</TableBody>
</Table>
</div> </div>
<div class="text-xs text-gray-500"> </CardContent>
{{ filtered.length }} / {{ props.permissions.length }} rezultatov </Card>
</div>
</div>
<div class="overflow-x-auto rounded-lg border border-slate-200">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 text-slate-600">
<tr>
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
Ime
</th>
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
Slug
</th>
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
Opis
</th>
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
Ustvarjeno
</th>
<th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
Akcije
</th>
</tr>
</thead>
<tbody>
<tr
v-for="p in filtered"
:key="p.id"
class="border-t border-slate-100 hover:bg-slate-50/60"
>
<td class="p-2 whitespace-nowrap font-medium flex items-center gap-2">
<span
class="inline-flex items-center justify-center h-7 w-7 rounded-md bg-indigo-50 text-indigo-600"
><FontAwesomeIcon :icon="faKey"
/></span>
<Link
:href="route('admin.permissions.edit', p.id)"
class="hover:underline"
>{{ p.name }}</Link
>
</td>
<td class="p-2 whitespace-nowrap font-mono text-xs text-gray-600">
{{ p.slug }}
</td>
<td class="p-2 text-xs text-gray-600 max-w-md">
{{ p.description || "—" }}
</td>
<td class="p-2 whitespace-nowrap text-xs text-gray-500">
{{ new Date(p.created_at).toLocaleDateString() }}
</td>
<td class="p-2 whitespace-nowrap text-xs">
<Link
:href="route('admin.permissions.edit', p.id)"
class="inline-flex items-center gap-1 px-2 py-1 rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50"
>
<FontAwesomeIcon :icon="faPen" class="w-3.5 h-3.5" /> Uredi
</Link>
</td>
</tr>
<tr v-if="!filtered.length">
<td colspan="5" class="p-6 text-center text-sm text-gray-500">
Ni rezultatov
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>

363
resources/js/Pages/Admin/SmsLogs/Index.vue
View File

@ -1,7 +1,35 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link, router } from "@inertiajs/vue3"; import { Head, Link, router } from "@inertiajs/vue3";
import { ref, watch } from "vue"; import { ref, watch, computed } from "vue";
import {
MessageSquareIcon,
FilterIcon,
XIcon,
EyeIcon,
MessageSquareTextIcon,
} from "lucide-vue-next";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Badge } from "@/Components/ui/badge";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
import Pagination from "@/Components/Pagination.vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
const props = defineProps({ const props = defineProps({
logs: { type: Object, required: true }, logs: { type: Object, required: true },
@ -23,11 +51,20 @@ function reload() {
const query = Object.fromEntries( const query = Object.fromEntries(
Object.entries(f.value).filter(([_, v]) => v !== null && v !== undefined && v !== "") Object.entries(f.value).filter(([_, v]) => v !== null && v !== undefined && v !== "")
); );
router.get(route("admin.sms-logs.index"), query, { preserveScroll: true, preserveState: true }); router.get(route("admin.sms-logs.index"), query, {
preserveScroll: true,
preserveState: true,
});
} }
watch( watch(
() => [f.value.status, f.value.profile_id, f.value.template_id, f.value.from, f.value.to], () => [
f.value.status,
f.value.profile_id,
f.value.template_id,
f.value.from,
f.value.to,
],
() => reload() () => reload()
); );
@ -35,130 +72,222 @@ function clearFilters() {
f.value = { status: "", profile_id: "", template_id: "", search: "", from: "", to: "" }; f.value = { status: "", profile_id: "", template_id: "", search: "", from: "", to: "" };
reload(); reload();
} }
const columns = [
{ key: "created_at", label: "Čas", sortable: false },
{ key: "to_number", label: "Prejemnik", sortable: false },
{ key: "sender", label: "Sender", sortable: false },
{ key: "profile", label: "Profil", sortable: false },
{ key: "template", label: "Predloga", sortable: false },
{ key: "status", label: "Status", sortable: false },
{ key: "cost", label: "Cena", sortable: false },
{ key: "provider_message_id", label: "Provider ID", sortable: false },
{ key: "actions", label: "", sortable: false },
];
function getStatusVariant(status) {
if (status === "queued") return "secondary";
if (status === "sent") return "default";
if (status === "delivered") return "default";
if (status === "failed") return "destructive";
return "outline";
}
function getStatusClass(status) {
if (status === "queued") return "bg-amber-100 text-amber-800 hover:bg-amber-100";
if (status === "sent") return "bg-sky-100 text-sky-800 hover:bg-sky-100";
if (status === "delivered") return "bg-green-100 text-green-800 hover:bg-green-100";
if (status === "failed") return "bg-red-100 text-red-800 hover:bg-red-100";
return "";
}
</script> </script>
<template> <template>
<AdminLayout title="SMS dnevniki"> <AdminLayout title="SMS dnevniki">
<Head title="SMS dnevniki" /> <Head title="SMS dnevniki" />
<div class="flex items-center justify-between mb-6">
<h1 class="text-xl font-semibold text-gray-800">SMS dnevniki</h1>
</div>
<div class="rounded-lg border bg-white p-4 shadow-sm mb-4"> <Card class="mb-6">
<div class="grid grid-cols-1 md:grid-cols-6 gap-3"> <CardHeader>
<div> <div class="flex items-start gap-3">
<label class="label">Status</label> <div
<select v-model="f.status" class="input"> class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
<option value="">Vsi</option> >
<option value="queued">queued</option> <MessageSquareIcon class="h-5 w-5" />
<option value="sent">sent</option> </div>
<option value="delivered">delivered</option> <div>
<option value="failed">failed</option> <CardTitle>SMS dnevniki</CardTitle>
</select> <CardDescription>Pregled poslanih SMS sporočil</CardDescription>
</div>
</div> </div>
<div> </CardHeader>
<label class="label">Profil</label> </Card>
<select v-model="f.profile_id" class="input">
<option value="">Vsi</option>
<option v-for="p in profiles" :key="p.id" :value="p.id">{{ p.name }}</option>
</select>
</div>
<div>
<label class="label">Predloga</label>
<select v-model="f.template_id" class="input">
<option value="">Vse</option>
<option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option>
</select>
</div>
<div>
<label class="label">Od</label>
<input type="date" v-model="f.from" class="input" />
</div>
<div>
<label class="label">Do</label>
<input type="date" v-model="f.to" class="input" />
</div>
<div>
<label class="label">Iskanje</label>
<input
type="text"
v-model="f.search"
class="input"
placeholder="to, sender, provider id, message"
@keyup.enter="reload"
/>
</div>
</div>
<div class="mt-3 flex items-center gap-2">
<button type="button" class="px-3 py-1.5 rounded border text-sm bg-gray-50 hover:bg-gray-100" @click="reload">Filtriraj</button>
<button type="button" class="px-3 py-1.5 rounded border text-sm bg-white hover:bg-gray-50" @click="clearFilters">Počisti</button>
</div>
</div>
<div class="rounded-lg border bg-white overflow-hidden shadow-sm"> <Card class="mb-6">
<table class="w-full text-sm"> <CardHeader>
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider"> <div class="flex items-center gap-2">
<tr> <FilterIcon class="h-4 w-4" />
<th class="px-3 py-2 text-left">Čas</th> <CardTitle class="text-base">Filtri</CardTitle>
<th class="px-3 py-2 text-left">Prejemnik</th>
<th class="px-3 py-2 text-left">Sender</th>
<th class="px-3 py-2 text-left">Profil</th>
<th class="px-3 py-2 text-left">Predloga</th>
<th class="px-3 py-2 text-left">Status</th>
<th class="px-3 py-2 text-left">Cena</th>
<th class="px-3 py-2 text-left">Provider ID</th>
<th class="px-3 py-2">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr v-for="log in logs.data" :key="log.id" class="border-t last:border-b hover:bg-gray-50">
<td class="px-3 py-2">{{ new Date(log.created_at).toLocaleString() }}</td>
<td class="px-3 py-2">{{ log.to_number }}</td>
<td class="px-3 py-2">{{ log.sender || '—' }}</td>
<td class="px-3 py-2">{{ log.profile?.name || '—' }}</td>
<td class="px-3 py-2">{{ log.template?.slug || log.template?.name || '—' }}</td>
<td class="px-3 py-2">
<span :class="{
'text-amber-600': log.status === 'queued',
'text-sky-700': log.status === 'sent',
'text-emerald-700': log.status === 'delivered',
'text-rose-700': log.status === 'failed',
}">{{ log.status }}</span>
</td>
<td class="px-3 py-2">{{ log.cost != null ? (Number(log.cost).toFixed(2) + ' ' + (log.currency || '')) : '—' }}</td>
<td class="px-3 py-2">{{ log.provider_message_id || '—' }}</td>
<td class="px-3 py-2 text-right">
<Link :href="route('admin.sms-logs.show', log.id)" class="text-xs px-2 py-1 rounded border text-gray-700 bg-gray-50 hover:bg-gray-100">Ogled</Link>
</td>
</tr>
<tr v-if="!logs.data || logs.data.length === 0">
<td colspan="9" class="px-3 py-6 text-center text-sm text-gray-500">Ni vnosov.</td>
</tr>
</tbody>
</table>
<div class="px-3 py-2 border-t flex items-center justify-between text-xs text-gray-600">
<div>
Prikaz {{ logs.from || 0 }}–{{ logs.to || 0 }} od {{ logs.total || 0 }}
</div> </div>
<div class="flex items-center gap-1"> </CardHeader>
<Link <CardContent>
v-for="l in logs.links" <div class="grid grid-cols-1 md:grid-cols-6 gap-4">
:key="l.label + l.url" <div class="space-y-2">
:href="l.url || '#'" <Label for="filter-status">Status</Label>
v-html="l.label" <Select v-model="f.status">
class="px-2 py-1 rounded border" <SelectTrigger id="filter-status">
:class="[l.active ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white hover:bg-gray-50']" <SelectValue placeholder="Vsi" />
preserve-scroll </SelectTrigger>
preserve-state <SelectContent>
/> <SelectItem :value="null">Vsi</SelectItem>
<SelectItem value="queued">queued</SelectItem>
<SelectItem value="sent">sent</SelectItem>
<SelectItem value="delivered">delivered</SelectItem>
<SelectItem value="failed">failed</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="filter-profile">Profil</Label>
<Select v-model="f.profile_id">
<SelectTrigger id="filter-profile">
<SelectValue placeholder="Vsi" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">Vsi</SelectItem>
<SelectItem v-for="p in profiles" :key="p.id" :value="p.id">{{
p.name
}}</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="filter-template">Predloga</Label>
<Select v-model="f.template_id">
<SelectTrigger id="filter-template">
<SelectValue placeholder="Vse" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">Vse</SelectItem>
<SelectItem v-for="t in templates" :key="t.id" :value="t.id">{{
t.name
}}</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="filter-from">Od</Label>
<Input id="filter-from" type="date" v-model="f.from" />
</div>
<div class="space-y-2">
<Label for="filter-to">Do</Label>
<Input id="filter-to" type="date" v-model="f.to" />
</div>
<div class="space-y-2">
<Label for="filter-search">Iskanje</Label>
<Input
id="filter-search"
type="text"
v-model="f.search"
placeholder="to, sender, provider id"
@keyup.enter="reload"
/>
</div>
</div> </div>
</div> <div class="mt-4 flex items-center gap-2">
</div> <Button size="sm" @click="reload">
<FilterIcon class="h-4 w-4" />
Filtriraj
</Button>
<Button size="sm" variant="outline" @click="clearFilters">
<XIcon class="h-4 w-4" />
Počisti
</Button>
</div>
</CardContent>
</Card>
<AppCard
title=""
padding="none"
class="p-0! gap-0"
header-class="py-3! px-4 gap-0 text-muted-foreground"
body-class=""
>
<template #header>
<div class="flex items-center gap-2">
<MessageSquareTextIcon size="18" />
<CardTitle class="uppercase">Poslani</CardTitle>
</div>
</template>
<DataTableNew2
:columns="columns"
:data="logs.data"
:meta="logs"
:page-size="25"
:page-size-options="[10, 15, 25, 50, 100]"
route-name="admin.sms-logs.index"
>
<template #cell-created_at="{ row }">
<span class="text-sm">{{ new Date(row.created_at).toLocaleString() }}</span>
</template>
<template #cell-to_number="{ row }">
<span class="text-sm">{{ row.to_number }}</span>
</template>
<template #cell-sender="{ row }">
<span class="text-sm text-muted-foreground">{{ row.sender || "—" }}</span>
</template>
<template #cell-profile="{ row }">
<span class="text-sm">{{ row.profile?.name || "—" }}</span>
</template>
<template #cell-template="{ row }">
<Badge v-if="row.template" variant="outline">{{
row.template.slug || row.template.name
}}</Badge>
<span v-else class="text-sm text-muted-foreground">—</span>
</template>
<template #cell-status="{ row }">
<Badge
:variant="getStatusVariant(row.status)"
:class="getStatusClass(row.status)"
>
{{ row.status }}
</Badge>
</template>
<template #cell-cost="{ row }">
<span class="text-sm">
{{
row.cost != null
? Number(row.cost).toFixed(2) + " " + (row.currency || "")
: "—"
}}
</span>
</template>
<template #cell-provider_message_id="{ row }">
<span class="text-sm text-muted-foreground truncate max-w-[150px] block">{{
row.provider_message_id || "—"
}}</span>
</template>
<template #cell-actions="{ row }">
<div class="flex justify-end">
<Button variant="ghost" size="sm" as-child>
<Link :href="route('admin.sms-logs.show', row.id)">
<EyeIcon class="h-4 w-4" />
</Link>
</Button>
</div>
</template>
</DataTableNew2>
</AppCard>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped> <style scoped></style>
.input { width: 100%; border-radius: 0.375rem; border: 1px solid #d1d5db; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1; }
.label { display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.25rem; }
</style>

262
resources/js/Pages/Admin/SmsLogs/Show.vue
View File

@ -1,80 +1,222 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link } from "@inertiajs/vue3"; import { Head, Link } from "@inertiajs/vue3";
import { ArrowLeftIcon, MessageSquareIcon, InfoIcon } from "lucide-vue-next";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Separator } from "@/Components/ui/separator";
const props = defineProps({ log: { type: Object, required: true } }); const props = defineProps({ log: { type: Object, required: true } });
function getStatusVariant(status) {
if (status === "queued") return "secondary";
if (status === "sent") return "default";
if (status === "delivered") return "default";
if (status === "failed") return "destructive";
return "outline";
}
function getStatusClass(status) {
if (status === "queued") return "bg-amber-100 text-amber-800 hover:bg-amber-100";
if (status === "sent") return "bg-sky-100 text-sky-800 hover:bg-sky-100";
if (status === "delivered") return "bg-green-100 text-green-800 hover:bg-green-100";
if (status === "failed") return "bg-red-100 text-red-800 hover:bg-red-100";
return "";
}
</script> </script>
<template> <template>
<AdminLayout title="SMS log"> <AdminLayout title="SMS log">
<Head title="SMS log" /> <Head title="SMS log" />
<div class="mb-4 flex items-center justify-between"> <Card class="mb-6">
<div class="flex items-center gap-3"> <CardHeader>
<Link :href="route('admin.sms-logs.index')" class="text-sm text-indigo-600 hover:underline">← Nazaj na dnevnike</Link> <div class="flex items-start justify-between">
<div class="text-gray-700 text-sm">#{{ log.id }}</div> <div class="flex items-start gap-3">
</div> <div
</div> class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
>
<MessageSquareIcon class="h-5 w-5" />
</div>
<div>
<CardTitle>SMS log</CardTitle>
<CardDescription>#{{ log.id }}</CardDescription>
</div>
</div>
<Button variant="outline" size="sm" as-child>
<Link :href="route('admin.sms-logs.index')">
<ArrowLeftIcon class="h-4 w-4 mr-2" />
Nazaj
</Link>
</Button>
</div>
</CardHeader>
</Card>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-4"> <div class="lg:col-span-2 space-y-6">
<div class="rounded-lg border bg-white p-4 shadow-sm"> <Card>
<div class="font-semibold text-gray-800 mb-2">Sporočilo</div> <CardHeader>
<pre class="text-sm whitespace-pre-wrap">{{ log.message }}</pre> <CardTitle class="text-base">Sporočilo</CardTitle>
</div> </CardHeader>
<div class="rounded-lg border bg-white p-4 shadow-sm"> <CardContent>
<div class="font-semibold text-gray-800 mb-2">Meta</div> <pre class="text-sm whitespace-pre-wrap bg-muted p-4 rounded-md">{{
<pre class="text-xs whitespace-pre-wrap">{{ JSON.stringify(log.meta || {}, null, 2) }}</pre> log.message
</div> }}</pre>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle class="text-base">Meta podatki</CardTitle>
</CardHeader>
<CardContent>
<pre class="text-xs whitespace-pre-wrap bg-muted p-4 rounded-md font-mono">{{
JSON.stringify(log.meta || {}, null, 2)
}}</pre>
</CardContent>
</Card>
</div> </div>
<div class="space-y-4">
<div class="rounded-lg border bg-white p-4 shadow-sm">
<div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
<div class="text-gray-500">Prejemnik</div>
<div class="text-gray-800">{{ log.to_number }}</div>
<div class="text-gray-500">Sender</div> <Card>
<div class="text-gray-800">{{ log.sender || '—' }}</div> <CardHeader>
<div class="flex items-center gap-2">
<div class="text-gray-500">Profil</div> <InfoIcon class="h-4 w-4" />
<div class="text-gray-800">{{ log.profile?.name || '—' }}</div> <CardTitle class="text-base">Informacije</CardTitle>
<div class="text-gray-500">Predloga</div>
<div class="text-gray-800">{{ log.template?.slug || log.template?.name || '—' }}</div>
<div class="text-gray-500">Status</div>
<div class="text-gray-800">{{ log.status }}</div>
<div class="text-gray-500">Cena</div>
<div class="text-gray-800">{{ log.cost != null ? (Number(log.cost).toFixed(2) + ' ' + (log.currency || '')) : '—' }}</div>
<div class="text-gray-500">Provider ID</div>
<div class="text-gray-800">{{ log.provider_message_id || '—' }}</div>
<div class="text-gray-500">Čas</div>
<div class="text-gray-800">{{ new Date(log.created_at).toLocaleString() }}</div>
<div class="text-gray-500">Sent</div>
<div class="text-gray-800">{{ log.sent_at ? new Date(log.sent_at).toLocaleString() : '—' }}</div>
<div class="text-gray-500">Delivered</div>
<div class="text-gray-800">{{ log.delivered_at ? new Date(log.delivered_at).toLocaleString() : '—' }}</div>
<div class="text-gray-500">Failed</div>
<div class="text-gray-800">{{ log.failed_at ? new Date(log.failed_at).toLocaleString() : '—' }}</div>
<div class="text-gray-500">Napaka (koda)</div>
<div class="text-gray-800">{{ log.error_code || '—' }}</div>
<div class="text-gray-500">Napaka (opis)</div>
<div class="text-gray-800">{{ log.error_message || '—' }}</div>
</div> </div>
</div> </CardHeader>
</div> <CardContent class="space-y-4">
<div class="space-y-3">
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Prejemnik</div>
<div class="text-sm font-medium">{{ log.to_number }}</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Sender</div>
<div class="text-sm">{{ log.sender || "—" }}</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Profil</div>
<div class="text-sm">{{ log.profile?.name || "—" }}</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Predloga</div>
<Badge v-if="log.template" variant="outline">{{
log.template.slug || log.template.name
}}</Badge>
<span v-else class="text-sm text-muted-foreground">—</span>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Status</div>
<Badge
:variant="getStatusVariant(log.status)"
:class="getStatusClass(log.status)"
>
{{ log.status }}
</Badge>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Cena</div>
<div class="text-sm">
{{
log.cost != null
? Number(log.cost).toFixed(2) + " " + (log.currency || "")
: "—"
}}
</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">
Provider ID
</div>
<div class="text-sm font-mono text-xs break-all">
{{ log.provider_message_id || "—" }}
</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Čas</div>
<div class="text-sm">{{ new Date(log.created_at).toLocaleString() }}</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Poslano</div>
<div class="text-sm">
{{ log.sent_at ? new Date(log.sent_at).toLocaleString() : "—" }}
</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">
Dostavljeno
</div>
<div class="text-sm">
{{ log.delivered_at ? new Date(log.delivered_at).toLocaleString() : "—" }}
</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">Neuspešno</div>
<div class="text-sm">
{{ log.failed_at ? new Date(log.failed_at).toLocaleString() : "—" }}
</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">
Napaka (koda)
</div>
<div class="text-sm">{{ log.error_code || "—" }}</div>
</div>
<Separator />
<div>
<div class="text-xs font-medium text-muted-foreground mb-1">
Napaka (opis)
</div>
<div class="text-sm text-destructive">{{ log.error_message || "—" }}</div>
</div>
</div>
</CardContent>
</Card>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped> <style scoped></style>
.label { display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.25rem; }
</style>

371
resources/js/Pages/Admin/SmsProfiles/Index.vue
View File

@ -1,10 +1,42 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import { Head, useForm, router } from "@inertiajs/vue3"; import { Head, useForm, router } from "@inertiajs/vue3";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import { faPlus, faPaperPlane, faCoins, faTags, faFlask } from "@fortawesome/free-solid-svg-icons"; import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/Components/ui/table";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/Components/ui/dialog";
import { Textarea } from "@/Components/ui/textarea";
import { Badge } from "@/Components/ui/badge";
import {
MessageSquareIcon,
PlusIcon,
SendIcon,
CoinsIcon,
TagIcon,
} from "lucide-vue-next";
const props = defineProps({ const props = defineProps({
initialProfiles: { type: Array, default: () => [] }, initialProfiles: { type: Array, default: () => [] },
@ -85,13 +117,17 @@ async function submitTest() {
delivery_report: !!testForm.delivery_report, delivery_report: !!testForm.delivery_report,
country_code: testForm.country_code, country_code: testForm.country_code,
}; };
await router.post(route("admin.sms-profiles.test-send", testTarget.value.id), payload, { await router.post(
preserveScroll: true, route("admin.sms-profiles.test-send", testTarget.value.id),
onSuccess: () => { payload,
testResult.value = null; {
testOpen.value = false; preserveScroll: true,
}, onSuccess: () => {
}); testResult.value = null;
testOpen.value = false;
},
}
);
} finally { } finally {
testForm.processing = false; testForm.processing = false;
} }
@ -119,175 +155,188 @@ const formatDateTime = (s) => (s ? new Date(s).toLocaleString() : "—");
<template> <template>
<AdminLayout title="SMS profili"> <AdminLayout title="SMS profili">
<Head title="SMS profili" /> <Head title="SMS profili" />
<div class="flex items-center justify-between mb-6"> <Card>
<h1 class="text-xl font-semibold text-gray-800 flex items-center gap-3"> <CardHeader>
SMS profili <div class="flex items-center justify-between">
<span class="text-xs font-medium text-gray-400">({{ profiles.length }})</span> <div class="flex items-center gap-2">
</h1> <MessageSquareIcon class="h-5 w-5 text-muted-foreground" />
<button <CardTitle>
@click="openCreate" SMS profili
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow" <Badge variant="secondary" class="ml-2">{{ profiles.length }}</Badge>
> </CardTitle>
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nov profil </div>
</button> <Button @click="openCreate">
</div> <PlusIcon class="h-4 w-4 mr-2" />
Nov profil
<div class="rounded-lg border bg-white overflow-hidden shadow-sm"> </Button>
<table class="w-full text-sm"> </div>
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider"> </CardHeader>
<tr> <CardContent>
<th class="px-3 py-2 text-left">Ime</th> <Table>
<th class="px-3 py-2 text-left">Uporabnik</th> <TableHeader>
<th class="px-3 py-2">Aktiven</th> <TableRow>
<th class="px-3 py-2">Pošiljatelji</th> <TableHead>Ime</TableHead>
<th class="px-3 py-2">Bilanca</th> <TableHead>Uporabnik</TableHead>
<th class="px-3 py-2">Cena</th> <TableHead>Aktiven</TableHead>
<th class="px-3 py-2">Akcije</th> <TableHead>Pošiljatelji</TableHead>
</tr> <TableHead>Bilanca</TableHead>
</thead> <TableHead>Cena</TableHead>
<tbody> <TableHead class="text-right">Akcije</TableHead>
<tr v-for="p in profiles" :key="p.id" class="border-t last:border-b hover:bg-gray-50"> </TableRow>
<td class="px-3 py-2 font-medium text-gray-800">{{ p.name }}</td> </TableHeader>
<td class="px-3 py-2">{{ p.api_username }}</td> <TableBody>
<td class="px-3 py-2 text-center"> <TableRow v-for="p in profiles" :key="p.id">
<span :class="p.active ? 'text-emerald-600' : 'text-rose-600'">{{ p.active ? 'Da' : 'Ne' }}</span> <TableCell class="font-medium">{{ p.name }}</TableCell>
</td> <TableCell>{{ p.api_username }}</TableCell>
<td class="px-3 py-2 text-xs text-gray-600"> <TableCell>
<span v-if="(p.senders||[]).length === 0">—</span> <Badge :variant="p.active ? 'default' : 'secondary'">
<span v-else> {{ p.active ? "Da" : "Ne" }}
{{ p.senders.map(s => s.sname).join(', ') }} </Badge>
</span> </TableCell>
</td> <TableCell class="text-muted-foreground text-xs">
<td class="px-3 py-2"> <span v-if="(p.senders || []).length === 0">—</span>
<div class="flex items-center gap-2"> <span v-else>
<button @click="fetchBalance(p)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-amber-700 border-amber-300 bg-amber-50 hover:bg-amber-100"> {{ p.senders.map((s) => s.sname).join(", ") }}
<FontAwesomeIcon :icon="faCoins" class="w-3.5 h-3.5" /> Pridobi
</button>
<span class="text-xs text-gray-600">{{ balances[p.id] ?? '—' }}</span>
</div>
</td>
<td class="px-3 py-2">
<div class="flex items-center gap-2">
<button @click="fetchPrice(p)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-700 border-indigo-300 bg-indigo-50 hover:bg-indigo-100">
<FontAwesomeIcon :icon="faTags" class="w-3.5 h-3.5" /> Cene
</button>
<span class="text-xs text-gray-600 truncate max-w-[200px]" :title="(quotes[p.id]||[]).join(', ')">
{{ (quotes[p.id] || []).join(', ') || '—' }}
</span> </span>
</div> </TableCell>
</td> <TableCell>
<td class="px-3 py-2 flex items-center gap-2"> <div class="flex items-center gap-2">
<button <Button @click="fetchBalance(p)" variant="outline" size="sm">
@click="openTest(p)" <CoinsIcon class="h-3.5 w-3.5 mr-1" /> Pridobi
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-emerald-700 border-emerald-300 bg-emerald-50 hover:bg-emerald-100" </Button>
title="Pošlji test SMS" <span class="text-xs text-muted-foreground">{{
> balances[p.id] ?? "—"
<FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5" /> Test SMS }}</span>
</button> </div>
</td> </TableCell>
</tr> <TableCell>
</tbody> <div class="flex items-center gap-2">
</table> <Button @click="fetchPrice(p)" variant="outline" size="sm">
</div> <TagIcon class="h-3.5 w-3.5 mr-1" /> Cene
</Button>
<span
class="text-xs text-muted-foreground truncate max-w-[200px]"
:title="(quotes[p.id] || []).join(', ')"
>
{{ (quotes[p.id] || []).join(", ") || "—" }}
</span>
</div>
</TableCell>
<TableCell class="text-right">
<Button
@click="openTest(p)"
variant="default"
size="sm"
title="Pošlji test SMS"
>
<SendIcon class="h-3.5 w-3.5 mr-1" /> Test SMS
</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
<!-- Create Profile Modal --> <!-- Create Profile Modal -->
<CreateDialog <Dialog :open="createOpen" @update:open="(val) => (createOpen = val)">
:show="createOpen" <DialogContent class="max-w-2xl">
title="Nov SMS profil" <DialogHeader>
max-width="2xl" <DialogTitle>Nov SMS profil</DialogTitle>
confirm-text="Shrani" </DialogHeader>
:processing="createForm.processing" <form @submit.prevent="submitCreate" id="create-sms-profile" class="space-y-4">
@close="() => (createOpen = false)"
@confirm="submitCreate"
>
<form @submit.prevent="submitCreate" id="create-sms-profile" class="space-y-5">
<div class="grid gap-4 grid-cols-2"> <div class="grid gap-4 grid-cols-2">
<div> <div class="space-y-2">
<label class="label">Ime</label> <Label>Ime</Label>
<input v-model="createForm.name" type="text" class="input" /> <Input v-model="createForm.name" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Aktivno</label> <Label>Aktivno</Label>
<select v-model="createForm.active" class="input"> <Select v-model="createForm.active">
<option :value="true">Da</option> <SelectTrigger>
<option :value="false">Ne</option> <SelectValue />
</select> </SelectTrigger>
<SelectContent>
<SelectItem :value="true">Da</SelectItem>
<SelectItem :value="false">Ne</SelectItem>
</SelectContent>
</Select>
</div> </div>
<div> <div class="space-y-2">
<label class="label">API uporabnik</label> <Label>API uporabnik</Label>
<input v-model="createForm.api_username" type="text" class="input" /> <Input v-model="createForm.api_username" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">API geslo</label> <Label>API geslo</Label>
<input v-model="createForm.api_password" type="password" class="input" autocomplete="new-password" /> <Input
v-model="createForm.api_password"
type="password"
autocomplete="new-password"
/>
</div> </div>
</div> </div>
</form> </form>
</CreateDialog> <DialogFooter>
<Button type="button" variant="outline" @click="() => (createOpen = false)"
>Prekliči</Button
>
<Button
form="create-sms-profile"
type="submit"
:disabled="createForm.processing"
>Shrani</Button
>
</DialogFooter>
</DialogContent>
</Dialog>
<!-- Test Send Modal --> <!-- Test Send Modal -->
<DialogModal :show="testOpen" max-width="2xl" @close="() => (testOpen = false)"> <Dialog :open="testOpen" @update:open="(val) => (testOpen = val)">
<template #title> Testni SMS </template> <DialogContent class="max-w-2xl">
<template #content> <DialogHeader>
<DialogTitle>Testni SMS</DialogTitle>
</DialogHeader>
<div class="space-y-4"> <div class="space-y-4">
<div class="grid gap-4 grid-cols-2"> <div class="grid gap-4 grid-cols-2">
<div> <div class="space-y-2">
<label class="label">Prejemnik (E.164)</label> <Label>Prejemnik (E.164)</Label>
<input v-model="testForm.to" type="text" class="input" placeholder="+386..." /> <Input v-model="testForm.to" type="text" placeholder="+386..." />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Državna koda (opcijsko)</label> <Label>Državna koda (opcijsko)</Label>
<input v-model="testForm.country_code" type="text" class="input" placeholder="SI" /> <Input v-model="testForm.country_code" type="text" placeholder="SI" />
</div> </div>
<div class="col-span-2"> <div class="space-y-2 col-span-2">
<label class="label">Sporočilo</label> <Label>Sporočilo</Label>
<textarea v-model="testForm.message" class="input" rows="4"></textarea> <Textarea v-model="testForm.message" rows="4" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Dostavna poročila</label> <Label>Dostavna poročila</Label>
<select v-model="testForm.delivery_report" class="input"> <Select v-model="testForm.delivery_report">
<option :value="true">Da</option> <SelectTrigger>
<option :value="false">Ne</option> <SelectValue />
</select> </SelectTrigger>
<SelectContent>
<SelectItem :value="true">Da</SelectItem>
<SelectItem :value="false">Ne</SelectItem>
</SelectContent>
</Select>
</div> </div>
</div> </div>
<!-- Result details removed; rely on flash message after redirect -->
</div> </div>
</template> <DialogFooter>
<template #footer> <Button type="button" variant="outline" @click="() => (testOpen = false)"
<button type="button" @click="() => (testOpen = false)" class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50">Zapri</button> >Zapri</Button
<button type="button" @click="submitTest" :disabled="testForm.processing || !testTarget" class="px-4 py-2 text-sm rounded-md bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"> >
<FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5 mr-1" /> Pošlji test <Button
</button> type="button"
</template> @click="submitTest"
</DialogModal> :disabled="testForm.processing || !testTarget"
>
<SendIcon class="h-3.5 w-3.5 mr-2" /> Pošlji test
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped>
.input {
width: 100%;
border-radius: 0.375rem;
border: 1px solid var(--tw-color-gray-300, #d1d5db);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-color: #6366f1;
border-color: #6366f1;
box-shadow: 0 0 0 1px #6366f1;
}
.label {
display: block;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 0.25rem;
}
</style>

274
resources/js/Pages/Admin/SmsSenders/Index.vue
View File

@ -1,10 +1,47 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import DialogModal from "@/Components/DialogModal.vue";
import { Head, useForm, router } from "@inertiajs/vue3"; import { Head, useForm, router } from "@inertiajs/vue3";
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import { faPlus, faPen, faTrash, faToggleOn, faToggleOff } from "@fortawesome/free-solid-svg-icons"; import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/Components/ui/table";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/Components/ui/dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Switch } from "@/Components/ui/switch";
import {
PhoneIcon,
PlusIcon,
PencilIcon,
Trash2Icon,
MoreVerticalIcon,
} from "lucide-vue-next";
const props = defineProps({ const props = defineProps({
initialSenders: { type: Array, default: () => [] }, initialSenders: { type: Array, default: () => [] },
@ -13,8 +50,9 @@ const props = defineProps({
// Use props directly so Inertia navigations refresh the list automatically // Use props directly so Inertia navigations refresh the list automatically
const senders = computed(() => props.initialSenders || []); const senders = computed(() => props.initialSenders || []);
const profileById = computed(() => Object.fromEntries((props.profiles || []).map(p => [p.id, p]))); const profileById = computed(() =>
Object.fromEntries((props.profiles || []).map((p) => [p.id, p]))
);
// Create/Edit modal // Create/Edit modal
const editOpen = ref(false); const editOpen = ref(false);
@ -71,7 +109,11 @@ async function submitEdit() {
} }
async function toggleActive(s) { async function toggleActive(s) {
await router.post(route("admin.sms-senders.toggle", s.id), {}, { preserveScroll: true }); await router.post(
route("admin.sms-senders.toggle", s.id),
{},
{ preserveScroll: true }
);
} }
async function destroySender(s) { async function destroySender(s) {
@ -83,117 +125,131 @@ async function destroySender(s) {
<template> <template>
<AdminLayout title="SMS pošiljatelji"> <AdminLayout title="SMS pošiljatelji">
<Head title="SMS pošiljatelji" /> <Head title="SMS pošiljatelji" />
<div class="flex items-center justify-between mb-6"> <Card>
<h1 class="text-xl font-semibold text-gray-800">SMS pošiljatelji</h1> <CardHeader>
<button @click="openCreate" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow"> <div class="flex items-center justify-between">
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nov pošiljatelj <div class="flex items-center gap-2">
</button> <PhoneIcon class="h-5 w-5 text-muted-foreground" />
</div> <CardTitle>SMS pošiljatelji</CardTitle>
</div>
<Button @click="openCreate">
<PlusIcon class="h-4 w-4 mr-2" />
Nov pošiljatelj
</Button>
</div>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Pošiljatelj</TableHead>
<TableHead>Številka</TableHead>
<TableHead>Profil</TableHead>
<TableHead>Aktiven</TableHead>
<TableHead>Opis</TableHead>
<TableHead class="text-right">Akcije</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="s in senders" :key="s.id">
<TableCell class="font-medium">{{ s.sname }}</TableCell>
<TableCell>{{ s.phone_number || "—" }}</TableCell>
<TableCell>{{ profileById[s.profile_id]?.name || "—" }}</TableCell>
<TableCell>
<Switch
:default-value="s.active"
@update:model-value="() => toggleActive(s)"
/>
</TableCell>
<TableCell class="text-muted-foreground">{{
s.description || "—"
}}</TableCell>
<TableCell class="text-right">
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon">
<MoreVerticalIcon class="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem @click="openEdit(s)">
<PencilIcon class="h-4 w-4 mr-2" />
Uredi
</DropdownMenuItem>
<DropdownMenuItem @click="destroySender(s)" class="text-destructive">
<Trash2Icon class="h-4 w-4 mr-2" />
Izbriši
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
<div class="rounded-lg border bg-white overflow-hidden shadow-sm"> <Dialog :open="editOpen" @update:open="(val) => (editOpen = val)">
<table class="w-full text-sm"> <DialogContent class="max-w-2xl">
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider"> <DialogHeader>
<tr> <DialogTitle>{{
<th class="px-3 py-2 text-left">Pošiljatelj</th> editing ? "Uredi pošiljatelja" : "Nov pošiljatelj"
<th class="px-3 py-2 text-left">Številka</th> }}</DialogTitle>
<th class="px-3 py-2 text-left">Profil</th> </DialogHeader>
<th class="px-3 py-2">Aktiven</th> <form @submit.prevent="submitEdit" id="edit-sms-sender" class="space-y-4">
<th class="px-3 py-2 text-left">Opis</th>
<th class="px-3 py-2">Akcije</th>
</tr>
</thead>
<tbody>
<tr v-for="s in senders" :key="s.id" class="border-t last:border-b hover:bg-gray-50">
<td class="px-3 py-2 font-medium text-gray-800">{{ s.sname }}</td>
<td class="px-3 py-2 text-gray-700">{{ s.phone_number || '—' }}</td>
<td class="px-3 py-2">{{ profileById[s.profile_id]?.name || '—' }}</td>
<td class="px-3 py-2 text-center">
<span :class="s.active ? 'text-emerald-600' : 'text-rose-600'">{{ s.active ? 'Da' : 'Ne' }}</span>
</td>
<td class="px-3 py-2 text-gray-600">{{ s.description || '—' }}</td>
<td class="px-3 py-2">
<div class="flex items-center gap-2">
<button @click="openEdit(s)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-700 border-indigo-300 bg-indigo-50 hover:bg-indigo-100">
<FontAwesomeIcon :icon="faPen" class="w-3.5 h-3.5" /> Uredi
</button>
<button @click="toggleActive(s)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-amber-700 border-amber-300 bg-amber-50 hover:bg-amber-100">
<FontAwesomeIcon :icon="s.active ? faToggleOn : faToggleOff" class="w-3.5 h-3.5" />
</button>
<button @click="destroySender(s)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-rose-700 border-rose-300 bg-rose-50 hover:bg-rose-100">
<FontAwesomeIcon :icon="faTrash" class="w-3.5 h-3.5" /> Izbriši
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<DialogModal :show="editOpen" max-width="2xl" @close="() => (editOpen = false)">
<template #title> {{ editing ? 'Uredi pošiljatelja' : 'Nov pošiljatelj' }} </template>
<template #content>
<form @submit.prevent="submitEdit" id="edit-sms-sender" class="space-y-5">
<div class="grid gap-4 grid-cols-2"> <div class="grid gap-4 grid-cols-2">
<div> <div class="space-y-2">
<label class="label">Profil</label> <Label>Profil</Label>
<select v-model="form.profile_id" class="input"> <Select v-model="form.profile_id">
<option :value="null" disabled>Izberi profil…</option> <SelectTrigger>
<option v-for="p in profiles" :key="p.id" :value="p.id">{{ p.name }}</option> <SelectValue placeholder="Izberi profil…" />
</select> </SelectTrigger>
<SelectContent>
<SelectItem v-for="p in profiles" :key="p.id" :value="p.id">
{{ p.name }}
</SelectItem>
</SelectContent>
</Select>
</div> </div>
<div> <div class="space-y-2">
<label class="label">Pošiljatelj (Sender ID) — opcijsko</label> <Label>Pošiljatelj (Sender ID) — opcijsko</Label>
<input v-model="form.sname" type="text" class="input" placeholder="npr. TEREN" /> <Input v-model="form.sname" type="text" placeholder="npr. TEREN" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Številka pošiljatelja (opcijsko)</label> <Label>Številka pošiljatelja (opcijsko)</Label>
<input v-model="form.phone_number" type="text" class="input" placeholder="npr. +38640123456" /> <Input
v-model="form.phone_number"
type="text"
placeholder="npr. +38640123456"
/>
</div> </div>
<div class="col-span-2"> <div class="space-y-2 col-span-2">
<label class="label">Opis (opcijsko)</label> <Label>Opis (opcijsko)</Label>
<input v-model="form.description" type="text" class="input" /> <Input v-model="form.description" type="text" />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Aktivno</label> <Label>Aktivno</Label>
<select v-model="form.active" class="input"> <Select v-model="form.active">
<option :value="true">Da</option> <SelectTrigger>
<option :value="false">Ne</option> <SelectValue />
</select> </SelectTrigger>
<SelectContent>
<SelectItem :value="true">Da</SelectItem>
<SelectItem :value="false">Ne</SelectItem>
</SelectContent>
</Select>
</div> </div>
</div> </div>
</form> </form>
</template> <DialogFooter>
<template #footer> <Button type="button" variant="outline" @click="() => (editOpen = false)"
<button type="button" @click="() => (editOpen = false)" class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50">Prekliči</button> >Prekliči</Button
<button form="edit-sms-sender" type="submit" :disabled="form.processing" class="px-4 py-2 text-sm rounded-md bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-50">Shrani</button> >
</template> <Button form="edit-sms-sender" type="submit" :disabled="form.processing"
</DialogModal> >Shrani</Button
>
</DialogFooter>
</DialogContent>
</Dialog>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped>
.input {
width: 100%;
border-radius: 0.375rem;
border: 1px solid var(--tw-color-gray-300, #d1d5db);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-color: #6366f1;
border-color: #6366f1;
box-shadow: 0 0 0 1px #6366f1;
}
.label {
display: block;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 0.25rem;
}
</style>

421
resources/js/Pages/Admin/SmsTemplates/Edit.vue
View File

@ -2,6 +2,27 @@
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link, useForm, router } from "@inertiajs/vue3"; import { Head, Link, useForm, router } from "@inertiajs/vue3";
import { ref, computed, watch } from "vue"; import { ref, computed, watch } from "vue";
import { ArrowLeftIcon, SaveIcon, MessageSquareIcon, SendIcon } from "lucide-vue-next";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import { Switch } from "@/Components/ui/switch";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { Separator } from "@/Components/ui/separator";
const props = defineProps({ const props = defineProps({
template: { type: Object, default: null }, template: { type: Object, default: null },
@ -104,160 +125,270 @@ async function submitTest() {
<AdminLayout :title="props.template ? 'Uredi SMS predlogo' : 'Nova SMS predloga'"> <AdminLayout :title="props.template ? 'Uredi SMS predlogo' : 'Nova SMS predloga'">
<Head :title="props.template ? 'Uredi SMS predlogo' : 'Nova SMS predloga'" /> <Head :title="props.template ? 'Uredi SMS predlogo' : 'Nova SMS predloga'" />
<div class="mb-4 flex items-center justify-between"> <Card class="mb-6">
<div class="flex items-center gap-3"> <CardHeader>
<Link :href="route('admin.sms-templates.index')" class="text-sm text-indigo-600 hover:underline">← Nazaj na seznam</Link> <div class="flex items-start justify-between">
<div class="text-gray-700 text-sm" v-if="props.template">#{{ props.template.id }}</div> <div class="flex items-start gap-3">
</div> <div
<button class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
type="button" >
@click="submit" <MessageSquareIcon class="h-5 w-5" />
:disabled="form.processing" </div>
class="px-4 py-2 text-sm rounded-md bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-50" <div>
> <CardTitle>{{
Shrani props.template ? "Uredi SMS predlogo" : "Nova SMS predloga"
</button> }}</CardTitle>
</div> <CardDescription v-if="props.template"
>#{{ props.template.id }}</CardDescription
>
</div>
</div>
<div class="flex items-center gap-2">
<Button variant="outline" size="sm" as-child>
<Link :href="route('admin.sms-templates.index')">
<ArrowLeftIcon class="h-4 w-4 mr-2" />
Nazaj
</Link>
</Button>
<Button size="sm" @click="submit" :disabled="form.processing">
<SaveIcon class="h-4 w-4 mr-2" />
Shrani
</Button>
</div>
</div>
</CardHeader>
</Card>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Form --> <Card class="lg:col-span-2">
<div class="lg:col-span-2 rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm p-5 space-y-4"> <CardHeader>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <CardTitle class="text-base">Nastavitve predloge</CardTitle>
<div> </CardHeader>
<label class="label">Ime</label> <CardContent class="space-y-4">
<input v-model="form.name" type="text" class="input" /> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
</div> <div class="space-y-2">
<div> <Label for="name">Ime</Label>
<label class="label">Slug</label> <Input id="name" v-model="form.name" type="text" />
<input v-model="form.slug" type="text" class="input" placeholder="npr. payment_reminder" /> </div>
</div> <div class="space-y-2">
<div class="md:col-span-2"> <Label for="slug">Slug</Label>
<label class="label">Vsebina</label> <Input
<textarea v-model="form.content" rows="8" class="input" placeholder="Pozdravljen {{ person.first_name }}, ..."></textarea> id="slug"
<div class="text-[11px] text-gray-500 mt-1"> v-model="form.slug"
Uporabite placeholderje npr. <code>{first_name}</code> ali type="text"
<code v-pre>{{ person.first_name }}</code> – ob pošiljanju se vrednosti nadomestijo. placeholder="npr. payment_reminder"
/>
</div>
<div class="md:col-span-2 space-y-2">
<Label for="content">Vsebina</Label>
<Textarea
id="content"
v-model="form.content"
rows="8"
placeholder="Pozdravljen {{ person.first_name }}, ..."
/>
<p class="text-xs text-muted-foreground">
Uporabite placeholderje npr.
<code class="bg-muted px-1 py-0.5 rounded">{first_name}</code> ali
<code class="bg-muted px-1 py-0.5 rounded" v-pre>{{
person.first_name
}}</code>
– ob pošiljanju se vrednosti nadomestijo.
</p>
</div>
<div class="md:col-span-2 space-y-2">
<div class="flex items-center gap-2">
<Switch
id="allow-custom"
:default-value="form.allow_custom_body"
@update:model-value="(val) => (form.allow_custom_body = val)"
/>
<Label for="allow-custom" class="font-normal cursor-pointer"
>Dovoli lastno besedilo</Label
>
</div>
<p class="text-xs text-muted-foreground">
Če je omogočeno, lahko pošiljatelj namesto vsebine predloge napiše
poljubno besedilo.
</p>
</div>
<div class="space-y-2">
<Label for="profile">Privzet profil</Label>
<Select v-model="form.default_profile_id">
<SelectTrigger id="profile">
<SelectValue placeholder="Izberi profil" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">—</SelectItem>
<SelectItem v-for="p in props.profiles" :key="p.id" :value="p.id">{{
p.name
}}</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="sender">Privzet sender</Label>
<Select
v-model="form.default_sender_id"
:disabled="!form.default_profile_id"
>
<SelectTrigger id="sender">
<SelectValue placeholder="Izberi sender" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">—</SelectItem>
<SelectItem
v-for="s in currentSendersForProfile(form.default_profile_id)"
:key="s.id"
:value="s.id"
>
{{ s.sname }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<div class="flex items-center gap-2">
<Switch
id="active"
:default-value="form.is_active"
@update:model-value="(val) => (form.is_active = val)"
/>
<Label for="active" class="font-normal cursor-pointer">Aktivno</Label>
</div>
</div> </div>
</div> </div>
<div class="md:col-span-2">
<label class="label">Dovoli lastno besedilo</label>
<select v-model="form.allow_custom_body" class="input">
<option :value="true">Da</option>
<option :value="false">Ne</option>
</select>
<div class="text-[11px] text-gray-500 mt-1">Če je omogočeno, lahko pošiljatelj namesto vsebine predloge napiše poljubno besedilo.</div>
</div>
<div>
<label class="label">Privzet profil</label>
<select v-model="form.default_profile_id" class="input">
<option :value="null">—</option>
<option v-for="p in props.profiles" :key="p.id" :value="p.id">{{ p.name }}</option>
</select>
</div>
<div>
<label class="label">Privzet sender</label>
<select v-model="form.default_sender_id" class="input" :disabled="!form.default_profile_id">
<option :value="null">—</option>
<option v-for="s in currentSendersForProfile(form.default_profile_id)" :key="s.id" :value="s.id">
{{ s.sname }}
</option>
</select>
</div>
<div>
<label class="label">Aktivno</label>
<select v-model="form.is_active" class="input">
<option :value="true">Da</option>
<option :value="false">Ne</option>
</select>
</div>
<div class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="label">Akcija po pošiljanju</label>
<select v-model="form.action_id" class="input">
<option :value="null">(brez)</option>
<option v-for="a in props.actions" :key="a.id" :value="a.id">{{ a.name }}</option>
</select>
</div>
<div>
<label class="label">Odločitev</label>
<select v-model="form.decision_id" class="input" :disabled="!form.action_id">
<option :value="null">(brez)</option>
<option v-for="d in (props.actions.find(x => x.id === form.action_id)?.decisions || [])" :key="d.id" :value="d.id">{{ d.name }}</option>
</select>
</div>
</div>
</div>
</div>
<!-- Test send --> <Separator />
<div class="rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm p-5 space-y-4">
<div class="font-semibold text-gray-800">Testno pošiljanje</div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="space-y-2">
<div> <Label for="action">Akcija po pošiljanju</Label>
<label class="label">Prejemnik (E.164)</label> <Select v-model="form.action_id">
<input v-model="testForm.to" type="text" class="input" placeholder="+386..." /> <SelectTrigger id="action">
<SelectValue placeholder="Brez" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">Brez</SelectItem>
<SelectItem v-for="a in props.actions" :key="a.id" :value="a.id">{{
a.name
}}</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="decision">Odločitev</Label>
<Select v-model="form.decision_id" :disabled="!form.action_id">
<SelectTrigger id="decision">
<SelectValue placeholder="Brez" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">Brez</SelectItem>
<SelectItem
v-for="d in props.actions.find((x) => x.id === form.action_id)
?.decisions || []"
:key="d.id"
:value="d.id"
>{{ d.name }}</SelectItem
>
</SelectContent>
</Select>
</div>
</div> </div>
<div> </CardContent>
<label class="label">Državna koda</label> </Card>
<input v-model="testForm.country_code" type="text" class="input" placeholder="SI" />
<Card>
<CardHeader>
<CardTitle class="text-base">Testno pošiljanje</CardTitle>
<CardDescription>Pošljite testno SMS sporočilo</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<div class="space-y-4">
<div class="space-y-2">
<Label for="test-to">Prejemnik (E.164)</Label>
<Input
id="test-to"
v-model="testForm.to"
type="text"
placeholder="+386..."
/>
</div>
<div class="space-y-2">
<Label for="test-country">Državna koda</Label>
<Input
id="test-country"
v-model="testForm.country_code"
type="text"
placeholder="SI"
/>
</div>
<div class="space-y-2">
<Label for="test-profile">Profil</Label>
<Select v-model="testForm.profile_id">
<SelectTrigger id="test-profile">
<SelectValue placeholder="Privzeti" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">Privzeti</SelectItem>
<SelectItem v-for="p in props.profiles" :key="p.id" :value="p.id">{{
p.name
}}</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="test-sender">Sender</Label>
<Select v-model="testForm.sender_id" :disabled="!testForm.profile_id">
<SelectTrigger id="test-sender">
<SelectValue placeholder="Privzeti" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">Privzeti</SelectItem>
<SelectItem
v-for="s in currentSendersForProfile(testForm.profile_id)"
:key="s.id"
:value="s.id"
>{{ s.sname }}</SelectItem
>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
<Label for="test-delivery">Dostavna poročila</Label>
<Select v-model="testForm.delivery_report">
<SelectTrigger id="test-delivery">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem :value="true">Da</SelectItem>
<SelectItem :value="false">Ne</SelectItem>
</SelectContent>
</Select>
</div>
<div v-if="form.allow_custom_body" class="space-y-2">
<Label for="test-custom">Lastno besedilo (opcijsko)</Label>
<Textarea
id="test-custom"
v-model="testForm.custom_content"
rows="4"
placeholder="Če je izpolnjeno, bo namesto predloge poslano to besedilo."
/>
</div>
</div> </div>
<div> <div class="flex items-center justify-end">
<label class="label">Profil</label> <Button
<select v-model="testForm.profile_id" class="input"> @click="submitTest"
<option :value="null">(privzeti)</option> :disabled="testForm.processing || !props.template"
<option v-for="p in props.profiles" :key="p.id" :value="p.id">{{ p.name }}</option> >
</select> <SendIcon class="h-4 w-4 mr-2" />
Pošlji test
</Button>
</div> </div>
<div> </CardContent>
<label class="label">Sender</label> </Card>
<select v-model="testForm.sender_id" class="input" :disabled="!testForm.profile_id">
<option :value="null">(privzeti)</option>
<option v-for="s in currentSendersForProfile(testForm.profile_id)" :key="s.id" :value="s.id">{{ s.sname }}</option>
</select>
</div>
<div>
<label class="label">Dostavna poročila</label>
<select v-model="testForm.delivery_report" class="input">
<option :value="true">Da</option>
<option :value="false">Ne</option>
</select>
</div>
<div v-if="form.allow_custom_body" class="md:col-span-2">
<label class="label">Lastno besedilo (opcijsko)</label>
<textarea v-model="testForm.custom_content" rows="4" class="input" placeholder="Če je izpolnjeno, bo namesto predloge poslano to besedilo."></textarea>
</div>
</div>
<div class="flex items-center justify-end gap-2">
<button type="button" @click="submitTest" :disabled="testForm.processing || !props.template" class="px-3 py-2 text-sm rounded-md bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50">Pošlji test</button>
</div>
<!-- Result details removed in favor of flash messages after redirect -->
</div>
</div> </div>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped> <style scoped></style>
.input {
width: 100%;
border-radius: 0.375rem;
border: 1px solid #d1d5db;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
border-color: #6366f1;
box-shadow: 0 0 0 1px #6366f1;
}
.label {
display: block;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 0.25rem;
}
</style>

312
resources/js/Pages/Admin/SmsTemplates/Index.vue
View File

@ -1,10 +1,25 @@
<script setup> <script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import DialogModal from "@/Components/DialogModal.vue";
import { Head, useForm, Link, router } from "@inertiajs/vue3"; import { Head, useForm, Link, router } from "@inertiajs/vue3";
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { PlusIcon, PencilIcon, Trash2Icon, SendIcon, MessageSquareIcon, MoreVerticalIcon } from 'lucide-vue-next';
import { faPlus, faPen, faTrash, faPaperPlane } from "@fortawesome/free-solid-svg-icons"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { Badge } from '@/Components/ui/badge';
import { Switch } from '@/Components/ui/switch';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/Components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/Components/ui/dropdown-menu';
const props = defineProps({ const props = defineProps({
initialTemplates: { type: Array, default: () => [] }, initialTemplates: { type: Array, default: () => [] },
@ -159,174 +174,173 @@ function currentSendersForTest() {
<template> <template>
<AdminLayout title="SMS predloge"> <AdminLayout title="SMS predloge">
<Head title="SMS predloge" /> <Head title="SMS predloge" />
<div class="flex items-center justify-between mb-6">
<h1 class="text-xl font-semibold text-gray-800">SMS predloge</h1>
<Link
:href="route('admin.sms-templates.create')"
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow"
>
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nova predloga
</Link>
</div>
<div class="rounded-lg border bg-white overflow-hidden shadow-sm"> <Card>
<table class="w-full text-sm"> <CardHeader>
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider"> <div class="flex items-start justify-between">
<tr> <div class="flex items-start gap-3">
<th class="px-3 py-2 text-left">Ime</th> <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
<th class="px-3 py-2 text-left">Slug</th> <MessageSquareIcon class="h-5 w-5" />
<th class="px-3 py-2 text-left">Privzet profil/sender</th> </div>
<th class="px-3 py-2">Aktivno</th> <div>
<th class="px-3 py-2">Akcije</th> <CardTitle>SMS predloge</CardTitle>
</tr> <CardDescription>Upravljajte predloge za SMS sporočila</CardDescription>
</thead> </div>
<tbody> </div>
<tr <Button as-child>
v-for="t in templates" <Link :href="route('admin.sms-templates.create')">
:key="t.id" <PlusIcon class="h-4 w-4 mr-2" />
class="border-t last:border-b hover:bg-gray-50" Nova predloga
> </Link>
<td class="px-3 py-2 font-medium text-gray-800">{{ t.name }}</td> </Button>
<td class="px-3 py-2 text-gray-600">{{ t.slug }}</td> </div>
<td class="px-3 py-2 text-gray-600"> </CardHeader>
<span>{{ profilesById[t.default_profile_id]?.name || "—" }}</span> <CardContent>
<span v-if="t.default_sender_id">
/ {{ sendersById[t.default_sender_id]?.sname }}</span
>
</td>
<td class="px-3 py-2 text-center">
<span :class="t.is_active ? 'text-emerald-600' : 'text-rose-600'">{{
t.is_active ? "Da" : "Ne"
}}</span>
</td>
<td class="px-3 py-2 flex items-center gap-2">
<Link
:href="route('admin.sms-templates.edit', t.id)"
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-700 border-indigo-300 bg-indigo-50 hover:bg-indigo-100"
>
<FontAwesomeIcon :icon="faPen" class="w-3.5 h-3.5" /> Uredi
</Link>
<button
@click="openTest(t)"
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-emerald-700 border-emerald-300 bg-emerald-50 hover:bg-emerald-100"
>
<FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5" /> Test
</button>
<button
@click="destroyTemplate(t)"
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-rose-700 border-rose-300 bg-rose-50 hover:bg-rose-100"
>
<FontAwesomeIcon :icon="faTrash" class="w-3.5 h-3.5" /> Izbriši
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Edit/Create now handled on dedicated page --> <Table>
<TableHeader>
<TableRow>
<TableHead>Ime</TableHead>
<TableHead>Slug</TableHead>
<TableHead>Privzet profil/sender</TableHead>
<TableHead class="text-center">Aktivno</TableHead>
<TableHead class="text-right">Akcije</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="t in templates" :key="t.id">
<TableCell class="font-medium">{{ t.name }}</TableCell>
<TableCell>
<Badge variant="outline">{{ t.slug }}</Badge>
</TableCell>
<TableCell>
<div class="text-sm">
<span>{{ profilesById[t.default_profile_id]?.name || "—" }}</span>
<span v-if="t.default_sender_id" class="text-muted-foreground">
/ {{ sendersById[t.default_sender_id]?.sname }}
</span>
</div>
</TableCell>
<TableCell class="text-center">
<Badge v-if="t.is_active" variant="default" class="bg-green-100 text-green-800 hover:bg-green-100">Da</Badge>
<Badge v-else variant="secondary">Ne</Badge>
</TableCell>
<TableCell class="text-right">
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="sm">
<MoreVerticalIcon class="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Akcije</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem as-child>
<Link :href="route('admin.sms-templates.edit', t.id)">
<PencilIcon class="h-4 w-4 mr-2" />
Uredi
</Link>
</DropdownMenuItem>
<DropdownMenuItem @click="openTest(t)">
<SendIcon class="h-4 w-4 mr-2" />
Testno pošiljanje
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem @click="destroyTemplate(t)" class="text-destructive">
<Trash2Icon class="h-4 w-4 mr-2" />
Izbriši
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
<!-- Test Send Modal --> <Dialog :open="testOpen" @update:open="(val) => testOpen = val">
<DialogModal :show="testOpen" max-width="2xl" @close="() => (testOpen = false)"> <DialogContent class="max-w-2xl">
<template #title> Testno pošiljanje </template> <DialogHeader>
<template #content> <DialogTitle>Testno pošiljanje</DialogTitle>
<DialogDescription>Pošljite testno SMS sporočilo</DialogDescription>
</DialogHeader>
<div class="space-y-4"> <div class="space-y-4">
<div class="grid gap-4 grid-cols-2"> <div class="grid gap-4 grid-cols-2">
<div> <div class="space-y-2">
<label class="label">Prejemnik (E.164)</label> <Label for="test-to">Prejemnik (E.164)</Label>
<input <Input
id="test-to"
v-model="testForm.to" v-model="testForm.to"
type="text" type="text"
class="input"
placeholder="+386..." placeholder="+386..."
/> />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Državna koda</label> <Label for="test-country">Državna koda</Label>
<input <Input
id="test-country"
v-model="testForm.country_code" v-model="testForm.country_code"
type="text" type="text"
class="input"
placeholder="SI" placeholder="SI"
/> />
</div> </div>
<div> <div class="space-y-2">
<label class="label">Profil</label> <Label for="test-profile">Profil</Label>
<select v-model="testForm.profile_id" class="input"> <Select v-model="testForm.profile_id">
<option :value="null">(privzeti)</option> <SelectTrigger id="test-profile">
<option v-for="p in props.profiles" :key="p.id" :value="p.id"> <SelectValue placeholder="Privzeti" />
{{ p.name }} </SelectTrigger>
</option> <SelectContent>
</select> <SelectItem :value="null">Privzeti</SelectItem>
<SelectItem v-for="p in props.profiles" :key="p.id" :value="p.id">
{{ p.name }}
</SelectItem>
</SelectContent>
</Select>
</div> </div>
<div> <div class="space-y-2">
<label class="label">Sender</label> <Label for="test-sender">Sender</Label>
<select <Select v-model="testForm.sender_id" :disabled="!testForm.profile_id">
v-model="testForm.sender_id" <SelectTrigger id="test-sender">
class="input" <SelectValue placeholder="Privzeti" />
:disabled="!testForm.profile_id" </SelectTrigger>
> <SelectContent>
<option :value="null">(privzeti)</option> <SelectItem :value="null">Privzeti</SelectItem>
<option v-for="s in currentSendersForTest()" :key="s.id" :value="s.id"> <SelectItem v-for="s in currentSendersForTest()" :key="s.id" :value="s.id">
{{ s.sname }} {{ s.sname }}
</option> </SelectItem>
</select> </SelectContent>
</Select>
</div> </div>
<div> <div class="space-y-2">
<label class="label">Dostavna poročila</label> <Label for="test-delivery">Dostavna poročila</Label>
<select v-model="testForm.delivery_report" class="input"> <Select v-model="testForm.delivery_report">
<option :value="true">Da</option> <SelectTrigger id="test-delivery">
<option :value="false">Ne</option> <SelectValue />
</select> </SelectTrigger>
<SelectContent>
<SelectItem :value="true">Da</SelectItem>
<SelectItem :value="false">Ne</SelectItem>
</SelectContent>
</Select>
</div> </div>
</div> </div>
<!-- Result details removed in favor of flash messages after redirect -->
</div> </div>
</template> <DialogFooter>
<template #footer> <Button variant="outline" @click="() => testOpen = false">Zapri</Button>
<button <Button
type="button" @click="submitTest"
@click="() => (testOpen = false)" :disabled="testForm.processing || !testTarget"
class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50" >
> <SendIcon class="h-4 w-4 mr-2" />
Zapri Pošlji test
</button> </Button>
<button </DialogFooter>
type="button" </DialogContent>
@click="submitTest" </Dialog>
:disabled="testForm.processing || !testTarget"
class="px-4 py-2 text-sm rounded-md bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"
>
<FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5 mr-1" /> Pošlji test
</button>
</template>
</DialogModal>
</AdminLayout> </AdminLayout>
</template> </template>
<style scoped> <style scoped>
.input {
width: 100%;
border-radius: 0.375rem;
border: 1px solid var(--tw-color-gray-300, #d1d5db);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-color: #6366f1;
border-color: #6366f1;
box-shadow: 0 0 0 1px #6366f1;
}
.label {
display: block;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 0.25rem;
}
</style> </style>

558
resources/js/Pages/Admin/Users/Index.vue
View File

@ -2,9 +2,35 @@
import AdminLayout from "@/Layouts/AdminLayout.vue"; import AdminLayout from "@/Layouts/AdminLayout.vue";
import { useForm, Link, router } from "@inertiajs/vue3"; import { useForm, Link, router } from "@inertiajs/vue3";
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { SearchIcon, SaveIcon, UserPlusIcon } from "lucide-vue-next";
import { faMagnifyingGlass, faFloppyDisk, faPlus } from "@fortawesome/free-solid-svg-icons"; import {
import DialogModal from "@/Components/DialogModal.vue"; Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Badge } from "@/Components/ui/badge";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/Components/ui/table";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/Components/ui/dialog";
import { Checkbox } from "@/Components/ui/checkbox";
const props = defineProps({ const props = defineProps({
users: Array, users: Array,
@ -29,6 +55,7 @@ function toggle(userId, roleId) {
? form.roles.filter((id) => id !== roleId) ? form.roles.filter((id) => id !== roleId)
: [...form.roles, roleId]; : [...form.roles, roleId];
form.dirty = true; form.dirty = true;
console.log("Toggle checkbox");
} }
function submit(userId) { function submit(userId) {
@ -105,336 +132,313 @@ function toggleCreateRole(roleId) {
} }
function toggleUserActive(userId) { function toggleUserActive(userId) {
router.patch(route("admin.users.toggle-active", { user: userId }), {}, { router.patch(
preserveScroll: true, route("admin.users.toggle-active", { user: userId }),
}); {},
{
preserveScroll: true,
}
);
} }
</script> </script>
<template> <template>
<AdminLayout title="Upravljanje vlog uporabnikov"> <AdminLayout title="Upravljanje vlog uporabnikov">
<div class="max-w-7xl mx-auto space-y-8"> <div class="max-w-7xl mx-auto space-y-6">
<div class="bg-white border rounded-xl shadow-sm p-6 space-y-7"> <Card>
<header class="space-y-1"> <CardHeader>
<h1 class="text-xl font-semibold leading-tight tracking-tight"> <CardTitle>Uporabniki & Vloge</CardTitle>
Uporabniki & Vloge <CardDescription>
</h1>
<p class="text-sm text-gray-500">
Dodeli ali odstrani vloge. Uporabi iskanje ali filter po vlogah za hitrejše Dodeli ali odstrani vloge. Uporabi iskanje ali filter po vlogah za hitrejše
upravljanje. upravljanje.
</p> </CardDescription>
</header> </CardHeader>
<CardContent class="space-y-6">
<!-- Toolbar --> <!-- Toolbar -->
<div <div
class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between" class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between"
>
<div class="flex flex-wrap gap-3 items-center">
<div class="relative">
<span class="absolute left-2 top-1.5 text-gray-400">
<FontAwesomeIcon :icon="faMagnifyingGlass" class="w-4 h-4" />
</span>
<input
v-model="query"
type="text"
placeholder="Išči uporabnika..."
class="pl-8 pr-3 py-1.5 text-sm rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500"
/>
</div>
<div class="flex flex-wrap gap-2">
<button
type="button"
@click="roleFilter = null"
:class="[
'px-2.5 py-1 rounded-full text-xs border transition',
roleFilter === null
? 'bg-indigo-600 text-white border-indigo-600'
: 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50',
]"
>
Vse
</button>
<button
v-for="r in props.roles"
:key="'rf-' + r.id"
type="button"
@click="roleFilter = r.id"
:class="[
'px-2.5 py-1 rounded-full text-xs border transition',
roleFilter === r.id
? 'bg-indigo-600 text-white border-indigo-600'
: 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50',
]"
>
{{ r.name }}
</button>
</div>
</div>
<div class="flex items-center gap-3">
<button
type="button"
@click="openCreateModal"
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500"
>
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" />
Ustvari uporabnika
</button>
<button
type="button"
@click="submitAll"
:disabled="!anyDirty"
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium border disabled:opacity-40 disabled:cursor-not-allowed"
:class="
anyDirty
? 'bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500'
: 'bg-white border-gray-300 text-gray-400'
"
>
<FontAwesomeIcon :icon="faFloppyDisk" class="w-4 h-4" />
Shrani vse
</button>
</div>
</div>
<div class="overflow-x-auto rounded-lg border border-slate-200">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 text-slate-600 sticky top-0 z-10">
<tr>
<th class="p-2 text-left font-medium text-[11px] uppercase tracking-wide">
Uporabnik
</th>
<th class="p-2 text-center font-medium text-[11px] uppercase tracking-wide">
Status
</th>
<th
v-for="role in props.roles"
:key="role.id"
class="p-2 font-medium text-[11px] uppercase tracking-wide text-center"
>
{{ role.name }}
</th>
<th
class="p-2 font-medium text-[11px] uppercase tracking-wide text-center"
>
Akcije
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(user, idx) in filteredUsers"
:key="user.id"
:class="[
'border-t border-slate-100',
idx % 2 === 1 ? 'bg-slate-50/40' : 'bg-white',
!user.active && 'opacity-60',
]"
>
<td class="p-2 whitespace-nowrap align-top">
<div class="font-medium text-sm flex items-center gap-2">
<span
class="inline-flex items-center justify-center h-7 w-7 rounded-full bg-indigo-50 text-indigo-600 text-xs font-semibold"
>{{ user.name.substring(0, 2).toUpperCase() }}</span
>
<span>{{ user.name }}</span>
<span
v-if="forms[user.id].dirty"
class="ml-1 inline-block px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 text-[10px] font-medium"
>Spremembe</span
>
</div>
<div class="text-[11px] text-slate-500 mt-0.5 font-mono">
{{ user.email }}
</div>
</td>
<td class="p-2 text-center align-top">
<button
@click="toggleUserActive(user.id)"
class="inline-flex items-center px-2 py-1 rounded text-xs font-medium transition"
:class="
user.active
? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
"
>
{{ user.active ? 'Aktiven' : 'Neaktiven' }}
</button>
</td>
<td
v-for="role in props.roles"
:key="role.id"
class="p-2 text-center align-top"
>
<label class="inline-flex items-center gap-1 cursor-pointer">
<input
type="checkbox"
class="h-4 w-4 rounded-md border-2 border-slate-400 bg-white text-indigo-600 accent-indigo-600 hover:border-slate-500 focus:ring-indigo-500 focus:ring-offset-0 focus:outline-none transition"
:checked="forms[user.id].roles.includes(role.id)"
@change="toggle(user.id, role.id)"
/>
</label>
</td>
<td class="p-2 text-center align-top">
<button
@click="submit(user.id)"
:disabled="forms[user.id].processing || !forms[user.id].dirty"
class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed"
:class="
forms[user.id].dirty
? 'bg-indigo-600 text-white hover:bg-indigo-500'
: 'bg-gray-100 text-gray-400'
"
>
<span v-if="forms[user.id].processing">...</span>
<span v-else>Shrani</span>
</button>
</td>
</tr>
<tr v-if="!filteredUsers.length">
<td
:colspan="props.roles.length + 3"
class="p-6 text-center text-sm text-gray-500"
>
Ni rezultatov
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2
class="text-[11px] font-semibold tracking-wide uppercase text-slate-500 mb-3"
> >
Referenca vlog in dovoljenj <div class="flex flex-wrap gap-3 items-center">
</h2> <div class="relative">
<SearchIcon
class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"
/>
<Input
v-model="query"
type="text"
placeholder="Išči uporabnika..."
class="pl-9 w-64"
/>
</div>
<div class="flex flex-wrap gap-2">
<Button
type="button"
@click="roleFilter = null"
:variant="roleFilter === null ? 'default' : 'outline'"
size="sm"
class="rounded-full"
>
Vse
</Button>
<Button
v-for="r in props.roles"
:key="'rf-' + r.id"
type="button"
@click="roleFilter = r.id"
:variant="roleFilter === r.id ? 'default' : 'outline'"
size="sm"
class="rounded-full"
>
{{ r.name }}
</Button>
</div>
</div>
<div class="flex items-center gap-2">
<Button type="button" @click="openCreateModal" size="sm">
<UserPlusIcon class="h-4 w-4 mr-2" />
Ustvari uporabnika
</Button>
<Button
type="button"
@click="submitAll"
:disabled="!anyDirty"
size="sm"
:variant="anyDirty ? 'default' : 'outline'"
>
<SaveIcon class="h-4 w-4 mr-2" />
Shrani vse
</Button>
</div>
</div>
<div class="rounded-lg border">
<Table>
<TableHeader>
<TableRow>
<TableHead class="text-left">Uporabnik</TableHead>
<TableHead class="text-center">Status</TableHead>
<TableHead
v-for="role in props.roles"
:key="role.id"
class="text-center"
>
{{ role.name }}
</TableHead>
<TableHead class="text-center">Akcije</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow
v-for="user in filteredUsers"
:key="user.id"
:class="!user.active && 'opacity-60'"
>
<TableCell class="whitespace-nowrap">
<div class="flex items-center gap-2">
<div
class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-primary/10 text-primary text-xs font-semibold"
>
{{ user.name.substring(0, 2).toUpperCase() }}
</div>
<div>
<div class="font-medium text-sm flex items-center gap-2">
{{ user.name }}
<Badge
v-if="forms[user.id].dirty"
variant="secondary"
class="text-xs"
>
Spremembe
</Badge>
</div>
<div class="text-xs text-muted-foreground font-mono">
{{ user.email }}
</div>
</div>
</div>
</TableCell>
<TableCell class="text-center">
<Badge
@click="toggleUserActive(user.id)"
:variant="user.active ? 'default' : 'secondary'"
class="cursor-pointer"
>
{{ user.active ? "Aktiven" : "Neaktiven" }}
</Badge>
</TableCell>
<TableCell
v-for="role in props.roles"
:key="role.id"
class="text-center"
>
<div class="flex items-center justify-center">
<Checkbox
:default-value="forms[user.id].roles.includes(role.id)"
@update:model-value="toggle(user.id, role.id)"
/>
</div>
</TableCell>
<TableCell class="text-center">
<Button
@click="submit(user.id)"
:disabled="forms[user.id].processing || !forms[user.id].dirty"
size="sm"
:variant="forms[user.id].dirty ? 'default' : 'ghost'"
>
<span v-if="forms[user.id].processing">...</span>
<span v-else>Shrani</span>
</Button>
</TableCell>
</TableRow>
<TableRow v-if="!filteredUsers.length">
<TableCell
:colspan="props.roles.length + 3"
class="text-center text-sm text-muted-foreground py-8"
>
Ni rezultatov
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle class="text-base">Referenca vlog in dovoljenj</CardTitle>
</CardHeader>
<CardContent>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
<div <Card
v-for="role in props.roles" v-for="role in props.roles"
:key="'ref-' + role.id" :key="'ref-' + role.id"
class="px-3 py-2 rounded-lg border border-slate-200 bg-white shadow-sm" class="border-muted"
> >
<div class="font-medium text-sm flex items-center gap-2"> <CardHeader class="pb-3">
<span <CardTitle class="text-sm flex items-center gap-2">
class="inline-flex items-center justify-center h-6 w-6 rounded-md bg-indigo-50 text-indigo-600 text-[11px] font-semibold" <div
>{{ role.name.substring(0, 1).toUpperCase() }}</span class="inline-flex items-center justify-center h-6 w-6 rounded-md bg-primary/10 text-primary text-xs font-semibold"
> >
{{ role.name }} {{ role.name.substring(0, 1).toUpperCase() }}
</div> </div>
<div class="flex flex-wrap gap-1 mt-2"> {{ role.name }}
<span </CardTitle>
v-for="perm in role.permissions" </CardHeader>
:key="perm.id" <CardContent>
class="text-[10px] uppercase tracking-wide bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded" <div class="flex flex-wrap gap-1.5">
>{{ perm.slug }}</span <Badge
> v-for="perm in role.permissions"
</div> :key="perm.id"
</div> variant="secondary"
class="text-xs"
>
{{ perm.slug }}
</Badge>
</div>
</CardContent>
</Card>
</div> </div>
</div> </CardContent>
</div> </Card>
</div> </div>
<!-- Create User Modal --> <!-- Create User Modal -->
<DialogModal :show="showCreateModal" @close="closeCreateModal" max-width="2xl"> <Dialog :open="showCreateModal" @update:open="(val) => (showCreateModal = val)">
<template #title>Ustvari novega uporabnika</template> <DialogContent class="sm:max-w-2xl">
<template #content> <DialogHeader>
<div class="space-y-4"> <DialogTitle>Ustvari novega uporabnika</DialogTitle>
<div> <DialogDescription>
<label class="block text-sm font-medium text-gray-700 mb-1">Ime</label> Dodaj novega uporabnika s privzetimi vlogami
<input </DialogDescription>
</DialogHeader>
<div class="space-y-4 py-4">
<div class="space-y-2">
<Label for="name">Ime</Label>
<Input
id="name"
v-model="createForm.name" v-model="createForm.name"
type="text" type="text"
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
placeholder="Ime uporabnika" placeholder="Ime uporabnika"
/> />
<div v-if="createForm.errors.name" class="text-red-600 text-xs mt-1"> <p v-if="createForm.errors.name" class="text-sm text-destructive">
{{ createForm.errors.name }} {{ createForm.errors.name }}
</div> </p>
</div> </div>
<div> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">E-pošta</label> <Label for="email">E-pošta</Label>
<input <Input
id="email"
v-model="createForm.email" v-model="createForm.email"
type="email" type="email"
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
placeholder="uporabnik@example.com" placeholder="uporabnik@example.com"
/> />
<div v-if="createForm.errors.email" class="text-red-600 text-xs mt-1"> <p v-if="createForm.errors.email" class="text-sm text-destructive">
{{ createForm.errors.email }} {{ createForm.errors.email }}
</div> </p>
</div> </div>
<div> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Geslo</label> <Label for="password">Geslo</Label>
<input <Input
id="password"
v-model="createForm.password" v-model="createForm.password"
type="password" type="password"
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
placeholder="********" placeholder="********"
/> />
<div v-if="createForm.errors.password" class="text-red-600 text-xs mt-1"> <p v-if="createForm.errors.password" class="text-sm text-destructive">
{{ createForm.errors.password }} {{ createForm.errors.password }}
</div> </p>
</div> </div>
<div> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Potrdi geslo</label> <Label for="password_confirmation">Potrdi geslo</Label>
<input <Input
id="password_confirmation"
v-model="createForm.password_confirmation" v-model="createForm.password_confirmation"
type="password" type="password"
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
placeholder="********" placeholder="********"
/> />
</div> </div>
<div> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-2">Vloge</label> <Label>Vloge</Label>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<label <label
v-for="role in props.roles" v-for="role in props.roles"
:key="'create-role-' + role.id" :key="'create-role-' + role.id"
class="inline-flex items-center gap-2 px-3 py-2 rounded-md border cursor-pointer transition" class="flex items-center gap-2 px-3 py-2 rounded-md border cursor-pointer transition hover:bg-accent"
:class=" :class="
createForm.roles.includes(role.id) createForm.roles.includes(role.id) && 'bg-primary/10 border-primary'
? 'bg-indigo-50 border-indigo-600 text-indigo-700'
: 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
" "
> >
<input <Checkbox
type="checkbox" :default-value="createForm.roles.includes(role.id)"
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" @update:model-value="toggleCreateRole(role.id)"
:checked="createForm.roles.includes(role.id)"
@change="toggleCreateRole(role.id)"
/> />
<span class="text-sm font-medium">{{ role.name }}</span> <span class="text-sm font-medium">{{ role.name }}</span>
</label> </label>
</div> </div>
<div v-if="createForm.errors.roles" class="text-red-600 text-xs mt-1"> <p v-if="createForm.errors.roles" class="text-sm text-destructive">
{{ createForm.errors.roles }} {{ createForm.errors.roles }}
</div> </p>
</div> </div>
</div> </div>
</template> <DialogFooter>
<template #footer> <Button type="button" variant="outline" @click="closeCreateModal">
<button Prekliči
type="button" </Button>
@click="closeCreateModal" <Button
class="px-4 py-2 rounded-md text-sm font-medium bg-white border border-gray-300 text-gray-700 hover:bg-gray-50" type="button"
> @click="submitCreateUser"
Prekliči :disabled="createForm.processing"
</button> >
<button <span v-if="createForm.processing">Ustvarjanje...</span>
type="button" <span v-else>Ustvari</span>
@click="submitCreateUser" </Button>
:disabled="createForm.processing" </DialogFooter>
class="ml-3 px-4 py-2 rounded-md text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed" </DialogContent>
> </Dialog>
<span v-if="createForm.processing">Ustvarjanje...</span>
<span v-else>Ustvari</span>
</button>
</template>
</DialogModal>
</AdminLayout> </AdminLayout>
</template> </template>

10
resources/js/Pages/Imports/Import.vue
View File

@ -753,9 +753,11 @@ async function applyTemplateToImport() {
if (!importId.value || !form.value.import_template_id) return; if (!importId.value || !form.value.import_template_id) return;
// Find the selected template to get its UUID // Find the selected template to get its UUID
const template = (props.templates || []).find((t) => t.id === form.value.import_template_id); const template = (props.templates || []).find(
(t) => t.id === form.value.import_template_id
);
if (!template?.uuid) { if (!template?.uuid) {
console.error('Template UUID not found'); console.error("Template UUID not found");
return; return;
} }
@ -1141,8 +1143,8 @@ async function fetchSimulation() {
// Extract unique entity types from rows for SimulationModal // Extract unique entity types from rows for SimulationModal
const entitySet = new Set(); const entitySet = new Set();
for (const row of data?.rows || []) { for (const row of data?.rows || []) {
if (row.entities && typeof row.entities === 'object') { if (row.entities && typeof row.entities === "object") {
Object.keys(row.entities).forEach(key => entitySet.add(key)); Object.keys(row.entities).forEach((key) => entitySet.add(key));
} }
} }
paymentSimEntities.value = Array.from(entitySet); paymentSimEntities.value = Array.from(entitySet);

21
resources/js/Pages/Imports/Templates/Partials/BasicTemplateInfo.vue
View File

@ -2,7 +2,13 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import { Label } from "@/Components/ui/label"; import { Label } from "@/Components/ui/label";
import { Input } from "@/Components/ui/input"; import { Input } from "@/Components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select"; import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox"; import { Checkbox } from "@/Components/ui/checkbox";
import { Button } from "@/Components/ui/button"; import { Button } from "@/Components/ui/button";
import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue"; import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue";
@ -82,7 +88,6 @@ const emit = defineEmits(["save"]);
<SelectValue placeholder="(Auto-detect)" /> <SelectValue placeholder="(Auto-detect)" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value=",">Vejica ,</SelectItem> <SelectItem value=",">Vejica ,</SelectItem>
<SelectItem value=";">Podpičje ;</SelectItem> <SelectItem value=";">Podpičje ;</SelectItem>
<SelectItem value="\t">Tab \t</SelectItem> <SelectItem value="\t">Tab \t</SelectItem>
@ -146,19 +151,11 @@ const emit = defineEmits(["save"]);
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Checkbox <Checkbox id="is_active" v-model="form.is_active" />
id="is_active"
:checked="form.is_active"
@update:checked="form.is_active = $event"
/>
<Label for="is_active" class="cursor-pointer">Aktivna</Label> <Label for="is_active" class="cursor-pointer">Aktivna</Label>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Checkbox <Checkbox id="reactivate" v-model="form.reactivate" />
id="reactivate"
:checked="form.reactivate"
@update:checked="form.reactivate = $event"
/>
<Label for="reactivate" class="cursor-pointer">Reaktivacija</Label> <Label for="reactivate" class="cursor-pointer">Reaktivacija</Label>
</div> </div>
<Button @click="emit('save')" class="ml-auto">Shrani</Button> <Button @click="emit('save')" class="ml-auto">Shrani</Button>