988 lines
21 KiB
Svelte
988 lines
21 KiB
Svelte
<svelte:head>
|
||
<style>
|
||
body {
|
||
background: #F2F3F7 !important;
|
||
}
|
||
</style>
|
||
</svelte:head>
|
||
|
||
<script>
|
||
import { onMount } from 'svelte';
|
||
import { goto } from '$app/navigation';
|
||
|
||
let user = null;
|
||
let units = [];
|
||
let loading = true;
|
||
let error = '';
|
||
let showAddModal = false;
|
||
let showEditModal = false;
|
||
let selectedUnit = null;
|
||
|
||
// Form değişkenleri
|
||
let formData = {
|
||
name: '',
|
||
address: '',
|
||
stk: '',
|
||
btk: '',
|
||
commander: {
|
||
full_name: '',
|
||
rank: '',
|
||
registration_number: '',
|
||
tc_kimlik: '',
|
||
phone: '',
|
||
username: '',
|
||
password: ''
|
||
}
|
||
};
|
||
|
||
onMount(async () => {
|
||
const userData = localStorage.getItem('user');
|
||
if (!userData || JSON.parse(userData).role !== 'admin') {
|
||
goto('/dashboard');
|
||
return;
|
||
}
|
||
|
||
user = JSON.parse(userData);
|
||
await loadUnits();
|
||
});
|
||
|
||
async function loadUnits() {
|
||
try {
|
||
const response = await fetch('/api/units');
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
units = data.units;
|
||
} else {
|
||
error = 'Birlikler yüklenemedi.';
|
||
}
|
||
} catch (err) {
|
||
error = 'Bağlantı hatası.';
|
||
console.error('Load units error:', err);
|
||
} finally {
|
||
loading = false;
|
||
}
|
||
}
|
||
|
||
function resetForm() {
|
||
formData = {
|
||
name: '',
|
||
address: '',
|
||
stk: '',
|
||
btk: '',
|
||
commander: {
|
||
full_name: '',
|
||
rank: '',
|
||
registration_number: '',
|
||
tc_kimlik: '',
|
||
phone: '',
|
||
username: '',
|
||
password: ''
|
||
}
|
||
};
|
||
selectedUnit = null;
|
||
}
|
||
|
||
function openAddModal() {
|
||
resetForm();
|
||
showAddModal = true;
|
||
}
|
||
|
||
function openEditModal(unit) {
|
||
selectedUnit = unit;
|
||
formData = {
|
||
name: unit.name,
|
||
address: unit.address,
|
||
stk: unit.stk,
|
||
btk: unit.btk,
|
||
commander: {
|
||
full_name: unit.commander.full_name,
|
||
rank: unit.commander.rank,
|
||
registration_number: unit.commander.registration_number,
|
||
tc_kimlik: unit.commander.tc_kimlik,
|
||
phone: unit.commander.phone,
|
||
username: unit.commander.username || '',
|
||
password: unit.commander.password || ''
|
||
}
|
||
};
|
||
showEditModal = true;
|
||
}
|
||
|
||
function closeModal() {
|
||
showAddModal = false;
|
||
showEditModal = false;
|
||
resetForm();
|
||
}
|
||
|
||
async function handleAddUnit() {
|
||
if (!formData.name || !formData.address || !formData.stk || !formData.btk) {
|
||
error = 'Tüm alanlar zorunludur.';
|
||
return;
|
||
}
|
||
|
||
const { commander } = formData;
|
||
if (!commander.full_name || !commander.rank || !commander.registration_number || !commander.tc_kimlik || !commander.phone || !commander.username || !commander.password) {
|
||
error = 'Mal sorumlusunun tüm bilgileri zorunludur.';
|
||
return;
|
||
}
|
||
|
||
if (!/^[0-9]{11}$/.test(commander.tc_kimlik)) {
|
||
error = 'TC Kimlik numarası 11 haneli olmalıdır.';
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/units', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(formData),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
await loadUnits();
|
||
closeModal();
|
||
error = '';
|
||
} else {
|
||
error = data.message || 'Birlik eklenemedi.';
|
||
}
|
||
} catch (err) {
|
||
error = 'Bağlantı hatası.';
|
||
console.error('Add unit error:', err);
|
||
}
|
||
}
|
||
|
||
async function handleUpdateUnit() {
|
||
if (!formData.name || !formData.address || !formData.stk || !formData.btk) {
|
||
error = 'Tüm alanlar zorunludur.';
|
||
return;
|
||
}
|
||
|
||
const { commander } = formData;
|
||
if (!commander.full_name || !commander.rank || !commander.registration_number || !commander.tc_kimlik || !commander.phone || !commander.username || !commander.password) {
|
||
error = 'Mal sorumlusunun tüm bilgileri zorunludur.';
|
||
return;
|
||
}
|
||
|
||
if (!/^[0-9]{11}$/.test(commander.tc_kimlik)) {
|
||
error = 'TC Kimlik numarası 11 haneli olmalıdır.';
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/units', {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
id: selectedUnit.id,
|
||
...formData
|
||
}),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
await loadUnits();
|
||
closeModal();
|
||
error = '';
|
||
} else {
|
||
error = data.message || 'Birlik güncellenemedi.';
|
||
}
|
||
} catch (err) {
|
||
error = 'Bağlantı hatası.';
|
||
console.error('Update unit error:', err);
|
||
}
|
||
}
|
||
|
||
async function handleDeleteUnit(unit) {
|
||
if (!confirm(`${unit.name} birliğini silmek istediğinizden emin misiniz?`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/units', {
|
||
method: 'DELETE',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ id: unit.id }),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
await loadUnits();
|
||
error = '';
|
||
} else {
|
||
error = data.message || 'Birlik silinemedi.';
|
||
}
|
||
} catch (err) {
|
||
error = 'Bağlantı hatası.';
|
||
console.error('Delete unit error:', err);
|
||
}
|
||
}
|
||
|
||
function goBack() {
|
||
goto('/dashboard');
|
||
}
|
||
</script>
|
||
|
||
<div class="units-page">
|
||
<div class="page-header">
|
||
<div class="header-left">
|
||
<button class="btn btn-secondary" on:click={goBack}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M19 12H5"/>
|
||
<path d="M12 19l-7-7 7-7"/>
|
||
</svg>
|
||
Geri
|
||
</button>
|
||
<h1 class="page-title">Birlik Yönetimi</h1>
|
||
</div>
|
||
<button class="btn btn-primary" on:click={openAddModal}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||
</svg>
|
||
Yeni Birlik Ekle
|
||
</button>
|
||
</div>
|
||
|
||
{#if error}
|
||
<div class="error-message">
|
||
{error}
|
||
</div>
|
||
{/if}
|
||
|
||
{#if loading}
|
||
<div class="loading-container">
|
||
<div class="spinner"></div>
|
||
<p>Yükleniyor...</p>
|
||
</div>
|
||
{:else if units.length === 0}
|
||
<div class="empty-state">
|
||
<div class="empty-icon">
|
||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M3 21h18"/>
|
||
<path d="M5 21V7l8-4v18"/>
|
||
<path d="M19 21V11l-6-4"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Henüz Birlik Yok</h3>
|
||
<p>Sisteme birlik eklemek için "Yeni Birlik Ekle" butonuna tıklayın.</p>
|
||
<button class="btn btn-primary" on:click={openAddModal}>
|
||
İlk Birliği Ekle
|
||
</button>
|
||
</div>
|
||
{:else}
|
||
<div class="units-grid">
|
||
{#each units as unit (unit.id)}
|
||
<div class="unit-card card">
|
||
<div class="unit-header">
|
||
<div class="unit-info">
|
||
<h3 class="unit-name">{unit.name}</h3>
|
||
<p class="unit-address">{unit.address}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="unit-details">
|
||
<div class="detail-item">
|
||
<span class="detail-label">STK:</span>
|
||
<span class="detail-value">{unit.stk}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">BTK:</span>
|
||
<span class="detail-value">{unit.btk}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="commander-section">
|
||
<h4 class="commander-title">Mal Sorumlusu</h4>
|
||
<div class="commander-info">
|
||
<div class="commander-details">
|
||
<p class="commander-name">{unit.commander.rank} {unit.commander.full_name}</p>
|
||
<p class="commander-detail">Sicil: {unit.commander.registration_number}</p>
|
||
<p class="commander-detail">TC: {unit.commander.tc_kimlik}</p>
|
||
<p class="commander-detail">İrtibat: {unit.commander.phone}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="unit-actions">
|
||
<button class="btn btn-sm btn-secondary" on:click={() => openEditModal(unit)}>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||
</svg>
|
||
Düzenle
|
||
</button>
|
||
<button class="btn btn-sm btn-danger" on:click={() => handleDeleteUnit(unit)}>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="3 6 5 6 21 6"/>
|
||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
||
</svg>
|
||
Sil
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
|
||
<!-- Birlik Ekle Modal -->
|
||
{#if showAddModal}
|
||
<div class="modal-overlay" on:click={closeModal}>
|
||
<div class="modal modal-large" on:click|stopPropagation>
|
||
<div class="modal-header">
|
||
<h2>Yeni Birlik Ekle</h2>
|
||
<button class="modal-close" on:click={closeModal}>×</button>
|
||
</div>
|
||
<form on:submit|preventDefault={handleAddUnit} class="modal-form">
|
||
<div class="form-section">
|
||
<h3>Birlik Bilgileri</h3>
|
||
<div class="form-group">
|
||
<label for="name">Birlik Adı</label>
|
||
<input
|
||
id="name"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.name}
|
||
placeholder="1. Motorlu Piyade Tugayı"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="address">Adres</label>
|
||
<input
|
||
id="address"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.address}
|
||
placeholder="Mecidiyeköy, Şişli/İstanbul"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="stk">STK</label>
|
||
<input
|
||
id="stk"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.stk}
|
||
placeholder="STK-12345"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="btk">BTK</label>
|
||
<input
|
||
id="btk"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.btk}
|
||
placeholder="BTK-67890"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h3>Mal Sorumlusu</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="commander-name">Adı Soyadı</label>
|
||
<input
|
||
id="commander-name"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.full_name}
|
||
placeholder="Mehmet Yılmaz"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="commander-rank">Rütbesi</label>
|
||
<input
|
||
id="commander-rank"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.rank}
|
||
placeholder="Yüzbaşı"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="commander-registration">Sicil No</label>
|
||
<input
|
||
id="commander-registration"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.registration_number}
|
||
placeholder="123456"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="commander-phone">İrtibat No</label>
|
||
<input
|
||
id="commander-phone"
|
||
type="tel"
|
||
class="form-input"
|
||
bind:value={formData.commander.phone}
|
||
placeholder="05321234567"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="commander-tc">TC Kimlik Numarası</label>
|
||
<input
|
||
id="commander-tc"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.tc_kimlik}
|
||
placeholder="12345678901"
|
||
maxlength="11"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="commander-username">Kullanıcı Adı</label>
|
||
<input
|
||
id="commander-username"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.username}
|
||
placeholder="kullanici_adi"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="commander-password">Şifre</label>
|
||
<input
|
||
id="commander-password"
|
||
type="password"
|
||
class="form-input"
|
||
bind:value={formData.commander.password}
|
||
placeholder="şifre123"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn btn-secondary" on:click={closeModal}>İptal</button>
|
||
<button type="submit" class="btn btn-primary">Kaydet</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
|
||
<!-- Birlik Düzenle Modal -->
|
||
{#if showEditModal}
|
||
<div class="modal-overlay" on:click={closeModal}>
|
||
<div class="modal modal-large" on:click|stopPropagation>
|
||
<div class="modal-header">
|
||
<h2>Birlik Düzenle</h2>
|
||
<button class="modal-close" on:click={closeModal}>×</button>
|
||
</div>
|
||
<form on:submit|preventDefault={handleUpdateUnit} class="modal-form">
|
||
<div class="form-section">
|
||
<h3>Birlik Bilgileri</h3>
|
||
<div class="form-group">
|
||
<label for="edit-name">Birlik Adı</label>
|
||
<input
|
||
id="edit-name"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.name}
|
||
placeholder="1. Motorlu Piyade Tugayı"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-address">Adres</label>
|
||
<input
|
||
id="edit-address"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.address}
|
||
placeholder="Mecidiyeköy, Şişli/İstanbul"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-stk">STK</label>
|
||
<input
|
||
id="edit-stk"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.stk}
|
||
placeholder="STK-12345"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-btk">BTK</label>
|
||
<input
|
||
id="edit-btk"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.btk}
|
||
placeholder="BTK-67890"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h3>Mal Sorumlusu</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-commander-name">Adı Soyadı</label>
|
||
<input
|
||
id="edit-commander-name"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.full_name}
|
||
placeholder="Mehmet Yılmaz"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-commander-rank">Rütbesi</label>
|
||
<input
|
||
id="edit-commander-rank"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.rank}
|
||
placeholder="Yüzbaşı"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-commander-registration">Sicil No</label>
|
||
<input
|
||
id="edit-commander-registration"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.registration_number}
|
||
placeholder="123456"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-commander-phone">İrtibat No</label>
|
||
<input
|
||
id="edit-commander-phone"
|
||
type="tel"
|
||
class="form-input"
|
||
bind:value={formData.commander.phone}
|
||
placeholder="05321234567"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-commander-tc">TC Kimlik Numarası</label>
|
||
<input
|
||
id="edit-commander-tc"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.tc_kimlik}
|
||
placeholder="12345678901"
|
||
maxlength="11"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-commander-username">Kullanıcı Adı</label>
|
||
<input
|
||
id="edit-commander-username"
|
||
type="text"
|
||
class="form-input"
|
||
bind:value={formData.commander.username}
|
||
placeholder="kullanici_adi"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-commander-password">Şifre</label>
|
||
<input
|
||
id="edit-commander-password"
|
||
type="password"
|
||
class="form-input"
|
||
bind:value={formData.commander.password}
|
||
placeholder="şifre123"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn btn-secondary" on:click={closeModal}>İptal</button>
|
||
<button type="submit" class="btn btn-primary">Güncelle</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
|
||
<style>
|
||
.units-page {
|
||
padding: 2rem;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 2rem;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--text-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.error-message {
|
||
background: #FEE2E2;
|
||
color: #DC2626;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
margin-bottom: 1.5rem;
|
||
border: 1px solid #FECACA;
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 3rem;
|
||
}
|
||
|
||
.spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 4px solid #E5E7EB;
|
||
border-top: 4px solid var(--primary-color);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 3rem;
|
||
background: white;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--card-border-color);
|
||
}
|
||
|
||
.empty-icon {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.empty-state h3 {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.empty-state p {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.units-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.unit-card {
|
||
background: white;
|
||
border: 1px solid var(--card-border-color);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.unit-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.unit-header {
|
||
margin-bottom: 1rem;
|
||
padding-bottom: 1rem;
|
||
border-bottom: 1px solid var(--card-border-color);
|
||
}
|
||
|
||
.unit-name {
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.unit-address {
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.unit-details {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.detail-label {
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.detail-value {
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.commander-section {
|
||
background: #F9FAFB;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.commander-title {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
margin: 0 0 0.75rem 0;
|
||
}
|
||
|
||
.commander-name {
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.commander-detail {
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
margin: 0.25rem 0;
|
||
}
|
||
|
||
.unit-actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.btn-sm {
|
||
padding: 0.5rem 1rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.btn-danger {
|
||
background: #DC2626;
|
||
color: white;
|
||
border: 1px solid #B91C1C;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background: #B91C1C;
|
||
}
|
||
|
||
/* Modal Stilleri */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.modal {
|
||
background: white;
|
||
border-radius: 12px;
|
||
max-width: 500px;
|
||
width: 100%;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.modal-large {
|
||
max-width: 700px;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1.5rem;
|
||
border-bottom: 1px solid var(--card-border-color);
|
||
}
|
||
|
||
.modal-header h2 {
|
||
margin: 0;
|
||
font-size: 1.3rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.modal-close {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
padding: 0.25rem;
|
||
}
|
||
|
||
.modal-form {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.form-section {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.form-section h3 {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
margin: 0 0 1rem 0;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 1px solid var(--card-border-color);
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.form-row .form-group {
|
||
flex: 1;
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: flex-end;
|
||
margin-top: 2rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid var(--card-border-color);
|
||
}
|
||
|
||
/* Responsive Tasarım */
|
||
@media (max-width: 768px) {
|
||
.units-page {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.page-header {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.header-left {
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.units-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.unit-actions {
|
||
justify-content: stretch;
|
||
}
|
||
|
||
.modal {
|
||
margin: 0;
|
||
max-height: 100vh;
|
||
}
|
||
|
||
.modal-large {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.form-row {
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.modal-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.detail-item {
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
}
|
||
}
|
||
</style> |