---
task: Add "Open POS" button in PosAccessKeys.vue that opens the POS main page in a new tab
cycles: 5
context: true
private: false
started: 2026-05-16T08:38:57Z
finished: 2026-05-16T08:39:10Z
---

## files
- resources/js/Pages/PosAccessKeys.vue [lines 275-289] — contains the action button group (Copy Key, Copy URL, QR Code, Share) per access key row

## steps
1. In `PosAccessKeys.vue` at the button group (line ~283, after the QR code button and before the Share button), add a new `<button>` that calls `openPosInNewTab(key.access_key)`.
2. Add the `openPosInNewTab(accessKey)` method to the `<script setup>` block (after `shareKey`, around line 161). It should call `window.open(getPosUrl(accessKey), '_blank')`.

## context

Existing button group in template (lines 275–289):
```html
<div class="d-flex align-items-center gap-2">
    <code class="bg-light px-2 py-1 rounded small">{{ key.access_key }}</code>
    <button @click="copyToClipboard(key.access_key)" class="btn btn-sm btn-link p-0 text-muted" title="Copy Key">
        <i class="far fa-copy"></i>
    </button>
    <button @click="copyToClipboard(getPosUrl(key.access_key))" class="btn btn-sm btn-link p-0 text-muted" title="Copy POS URL">
        <i class="fas fa-link"></i>
    </button>
    <button @click="showQrCode(key.access_key)" class="btn btn-sm btn-link p-0 text-muted" title="View QR Code">
        <i class="fas fa-qrcode"></i>
    </button>
    <button v-if="canShare" @click="shareKey(key.access_key, key.name)" class="btn btn-sm btn-link p-0 text-muted" title="Share via Protocol">
        <i class="fas fa-share-alt"></i>
    </button>
</div>
```

`getPosUrl` (line 138–141):
```js
const getPosUrl = (accessKey) => {
    const baseUrl = window.location.origin;
    return `${baseUrl}/pos?key=${accessKey}`;
};
```

New method to add after `shareKey` (line ~161):
```js
const openPosInNewTab = (accessKey) => {
    window.open(getPosUrl(accessKey), '_blank');
};
```

New button to insert after the QR code button, before the Share button:
```html
<button @click="openPosInNewTab(key.access_key)" class="btn btn-sm btn-link p-0 text-muted" title="Open POS Terminal">
    <i class="fas fa-external-link-alt"></i>
</button>
```

## notes
- dictionary: ai-docs/dictionary.md
- linters: none detected
- constraints: No backend changes needed — URL is already constructed by existing `getPosUrl` helper. Button must match the existing style (btn-sm btn-link p-0 text-muted). No new permissions required — this is a client-side navigation action.