Promt-AI-“ARIZA TESPİT VE ONARIM FORMU"

Helpdesk / Kullanıcı Destek biriminde görev alıyorsanız, hizmet sunduğunuz departmanlardaki kullanıcıların kullandığı ürün ve sistemlerde yaşanan sorunlara ilk müdahaleyi sağlayan ekip sizsiniz. Üründe meydana gelen fiziksel hasar, arıza, servis süreci, parça değişimi veya cihaz değişimi gibi durumlarda ise sürecin kayıt altına alınabilmesi için resmi bir rapor hazırlanması gereklidir.

Rapor hazırlama süreçlerinde Word veya Excel üzerinde manuel veri akışıyla çalışmak artık eski yöntemler arasında kaldı. Bu sürecin modern, dinamik ve tek bir uygulama üzerinden yönetilebilmesi ise; yazılım bilgisi yada yapay zekâyı etkili kullanabilme becerisiyle mümkün hale geliyor.

Buradaki en önemli konu, yapay zekâ ile aynı dili konuşabilmek ve doğru promptlar (komutları) verebilmek. Mevcut Excel tablo yapımı ekleyerek bunu HTML tabanlı bir sayfaya dönüştürmesini istedim. Ardından ihtiyaçlara göre yeni talepler oluşturarak, her aşamada testler yapıp geliştirilmiş bir kod yapısı elde ettim.

Daha sonra bu süreci tekrar kullanılabilir hale getirmek için, oluşturulan yapının promptlara dönüştürülmesini talep ettim. Sonuç olarak aşağıda yer alan komutlar, kodlar, görseller ve ek özellikler ortaya çıktı.


Çıktı üzerinde, Neler yapabiliyoruz?
  • Hızlı veri girişi ve  Modern arayüz
  • Kod içinde; "HELPDESK", "MYO" bu kelimeleri "Ctrt + F ile araştırıp, kalıcı olarak değiştirebilirsiniz. Birim ve veya Bağlı bulunduğunuz Müdürlüğün ismini girebilirsiniz.
  • Önizleme, İçeri aktar, CSV olarak dışarı aktarma, Yazdırma ve Kaydetme yer alır.
  • Logo üzerinde peş peşe 5 defa bastığınızda, logo değişimi yapabiliyorsunuz.
  • Logo görünümü için, logo isminin "logo.jpg" olması ve resmin html dosyası ile aynı klasörde yer alması yeterli.
  • Kodu kopyala (Aşağıda, Mavi metin) not defterine yapıştır, uzantıyı ".html" yap. Yapılması gereken tek işlem, çift tıklayarak çalıştırmak.

Form veri giriş ekranı:



Veri Girişi:
İşlem yaptığınız tarihi seçip, Form numarası manuel giriniz. Kullanıcı ve Ürüne ait bilgileri doldurunuz.


Bildirilen arıza, Arıza sebebi ihtiyaca göre (Birden çok seçebilirsiniz), yapılan işlem, Sonuç, İşlemi yapan teknik Personel ve Onaylayan alanlarını doldurunuz.


"Önizleme Oluştur" butonuna basarak, tüm girilen veriyi tablo halinde görebilirsiniz.


"Yazdır/PDF" butonuna basarak, Kaydedebilir, yazdırabilirsiniz.


"İçeri Aktar" butonuna basarak, öncesi CSV Export ile dışarı alıp arşivlediğiniz veriyi içeri alabilirsiniz.


"Önizleme Oluştur" butonuna basarak, Form üzerinde düzenleme yapabilir, Önizleme yapabilir, yeniden Export edebilir veya Yazdırabilirsiniz.


HTML Kod:
Kodun son hali aşağıdadır. 

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>ARIZA TESPİT VE ONARIM FORMU</title>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

:root{
    --primary:#2563eb;
    --success:#16a34a;
    --danger:#dc2626;
    --warning:#ea580c;
    --bg:#f3f4f6;
    --card:#ffffff;
    --border:#dbe4ee;
    --text:#111827;
}

body{
    background:var(--bg);
    color:var(--text);
    padding:18px;
}

.container{
    max-width:1800px;
    margin:auto;
}

/* =========================================================
HEADER
========================================================= */

.main-header{
    background:#ffffff;
    border-radius:22px;
    padding:16px 20px;
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
    color:#111827;

    border:1px solid #dbe4ee;

    box-shadow:
    0 4px 12px rgba(15,23,42,.05);
}

.header-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
    width:100%;
}

/* =========================================================
LOGO
========================================================= */

.logo-wrapper{
    width:82px;
    height:82px;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px;
    cursor:pointer;
    border:1px solid #dbe4ee;
    flex-shrink:0;
}

.logo-wrapper img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* =========================================================
TITLE AREA
========================================================= */

.header-title-group{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    flex:1;
    min-width:0;
}

.title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    width:100%;
}

.main-title{
    font-size:30px;
    font-weight:800;
    line-height:1;
    outline:none;
    color:#111827;
}

.main-subtitle{
    font-size:15px;
    color:#475569;
    font-weight:700;
    margin-top:2px;
}

/* =========================================================
HEADER RIGHT
========================================================= */

.header-mini-wrapper{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    flex-shrink:0;
}

.header-mini-info{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:nowrap;
}

.mini-box{
    background:#f8fafc;
    padding:6px 8px;
    border-radius:12px;
    border:1px solid #dbe4ee;
}

.mini-box span{
    display:block;
    font-size:11px;
    margin-bottom:4px;
    color:#475569;
    font-weight:700;
    text-align:center;
}

.mini-box input{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:8px;
    padding:6px 8px;
    font-weight:700;
    background:#fff;
    color:#111827;
    font-size:14px;
    text-align:center;
}

.mini-box.date-box{
    min-width:135px;
}

.mini-box.formno-box{
    min-width:88px;
    width:88px;
}

.mini-box.formno-box input{
    padding:6px 4px;
}

.header-right-department{
    font-size:13px;
    font-weight:900;
    color:#111827;
    white-space:nowrap;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    text-align:right;
    letter-spacing:.4px;
}

/* =========================================================
FORM GRID
========================================================= */

.form-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(700px,1fr));
    gap:18px;
}

.panel{
    background:#fff;
    border-radius:20px;
    padding:18px;

    box-shadow:
    0 4px 12px rgba(15,23,42,.05);
}

.panel h3{
    margin-bottom:16px;

    padding:12px 16px;

    border-radius:14px;

    background:
    linear-gradient(
    135deg,
    #eff6ff,
    #dbeafe
    );

    color:#1e3a8a;
    font-size:16px;
    font-weight:800;
}

.form-row{
    display:grid;
    grid-template-columns:210px 1fr;
    gap:12px;
    align-items:center;
    margin-bottom:12px;
}

label{
    font-weight:700;
    font-size:15px;
}

input,
textarea{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:10px 12px;
    font-size:15px;
    background:#fff;
    color:#111827;
}

textarea{
    min-height:90px;
    resize:vertical;
}

.checkbox-group{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.checkbox-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:600;
    font-size:15px;
}

.checkbox-item input{
    width:auto;
}

/* =========================================================
BUTTONS
========================================================= */

.actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}

.btn{
    border:none;
    border-radius:14px;
    padding:12px 20px;
    font-weight:700;
    cursor:pointer;
    color:#fff;
    transition:.2s;
    font-size:14px;
}

.btn:hover{
    opacity:.92;
    transform:translateY(-1px);
}

.btn-primary{
    background:var(--primary);
}

.btn-success{
    background:var(--success);
}

.btn-import{
    background:var(--danger);
}

.btn-print{
    background:var(--warning);
}

/* =========================================================
PREVIEW
========================================================= */

.preview{
    margin-top:22px;
    background:#fff;
    border-radius:22px;
    padding:18px;

    box-shadow:
    0 4px 12px rgba(15,23,42,.05);
}

.preview-header{
    background:#ffffff;
    border:1px solid #dbe4ee;
    border-radius:18px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.preview-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
}

.preview-logo{
    width:72px;
    height:72px;
    background:#fff;
    border-radius:14px;
    border:1px solid #dbe4ee;
    padding:6px;
    overflow:hidden;
    flex-shrink:0;
}

.preview-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.preview-title{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
}

.preview-title h1{
    font-size:30px;
    font-weight:800;
    line-height:1;
    color:#111827;
}

.preview-title h2{
    font-size:15px;
    color:#475569;
    font-weight:700;
}

.preview-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.preview-meta-top{
    display:flex;
    gap:8px;
    align-items:center;
}

.preview-meta-card{
    background:#f8fafc;
    border:1px solid #dbe4ee;
    border-radius:12px;
    padding:8px;
    min-width:110px;
}

.preview-meta-card.formno-preview{
    min-width:88px;
    width:88px;
}

.preview-meta-card h4{
    font-size:11px;
    margin-bottom:4px;
    color:#64748b;
    text-align:center;
}

.preview-meta-card div{
    text-align:center;
    font-weight:800;
    color:#111827;
    font-size:14px;
}

/* =========================================================
TABLE
========================================================= */

.preview-table{
    width:100%;
    border-collapse:collapse;
}

.preview-table td{
    border:1px solid #dbe4ee;
    padding:8px 10px;
    font-size:12px;
    vertical-align:top;
    word-break:break-word;
}

.preview-label{
    width:220px;
    font-weight:800;
    background:#f8fafc;
}

/* =========================================================
SIGNATURE
========================================================= */

.signature-grid{
    margin-top:26px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.signature-box{
    border:1px solid #dbe4ee;
    border-radius:14px;
    padding:14px;
    text-align:center;
    background:#fafcff;
}

.signature-box h4{
    margin-bottom:12px;
    font-size:13px;
}

.signature-line{
    margin-top:28px;
    color:#94a3b8;
    font-size:12px;
}

/* =========================================================
FOOTER
========================================================= */

.preview-footer{
    margin-top:18px;
}

.footer-credit{
    color:#cbd5e1;
    font-size:13px;
    font-weight:600;
}

/* =========================================================
PRINT
========================================================= */

@page{
    size:A4 portrait;
    margin:.5cm;
}

@media print{

    body{
        background:#fff;
        padding:0;
    }

    .main-header,
    .form-grid,
    .actions,
    .preview-footer{
        display:none !important;
    }

    .preview{
        margin:0;
        padding:0;
        border:none;
        box-shadow:none;
        width:100%;
    }

    .preview-header{
        padding:8px;
        gap:8px;
        margin-bottom:8px;
    }

    .preview-logo{
        width:52px;
        height:52px;
    }

    .preview-title h1{
        font-size:17px !important;
        white-space:nowrap;
    }

    .preview-title h2{
        font-size:10px !important;
    }

    .preview-meta-card{
        min-width:72px !important;
        padding:4px;
    }

    .preview-meta-card.formno-preview{
        min-width:58px !important;
        width:58px !important;
    }

    .preview-meta-card h4{
        font-size:8px !important;
    }

    .preview-meta-card div{
        font-size:8px !important;
    }

    .header-right-department{
        font-size:8px !important;
    }

    .preview-table td{
        font-size:11pt !important;
        padding:4px 6px !important;
        line-height:1.15 !important;
    }

    .preview-label{
        width:170px !important;
        white-space:nowrap !important;
    }

    .signature-grid{
        margin-top:18px !important;
        gap:8px !important;
    }

    .signature-box{
        padding:4px;
    }

    .signature-box h4{
        font-size:6pt;
        margin-bottom:4px;
    }

    .signature-box div{
        font-size:10pt;
    }

    .signature-line{
        margin-top:10px;
        font-size:5pt;
    }

    table,
    tr,
    td,
    .signature-grid,
    .preview-header{
        page-break-inside:avoid !important;
        break-inside:avoid !important;
    }

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:900px){

    body{
        padding:12px;
    }

    .main-header{
        flex-wrap:wrap;
    }

    .header-left{
        flex-direction:column;
        align-items:flex-start;
    }

    .title-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .header-mini-wrapper{
        align-items:flex-start;
    }

    .header-right-department{
        white-space:normal;
        text-align:left;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .preview-header{
        flex-wrap:wrap;
    }

}

</style>
</head>

<body>

<div class="container">

<div class="main-header">

<div class="header-left">

<div class="logo-wrapper"
id="logoWrapper">

<img
id="logoImage"
src="logo.jpg"
alt="Logo"
onerror="this.style.display='none'">

</div>

<input type="file"
id="logoInput"
hidden
accept="image/*">

<div class="header-title-group">

<div class="title-row">

<div>

<div class="main-title"
id="editableTitle"
contenteditable="true">

ARIZA TESPİT VE ONARIM FORMU

</div>

<div class="main-subtitle">
KULLANICI DESTEK KOORDİNATÖRLÜĞÜ
</div>

</div>

<div class="header-mini-wrapper">

<div class="header-mini-info">

<div class="mini-box date-box">
<span>Tarih</span>
<input type="date" id="tarih">
</div>

<div class="mini-box formno-box">

<span>Form No</span>

<input
type="text"
id="formNo"
maxlength="5"
inputmode="numeric"
pattern="[0-9]*"
placeholder=""
>

</div>

</div>

<div class="header-right-department">
TEKNİK İŞLETME DAİRE BAŞKANLIĞI
</div>

</div>

</div>

</div>

</div>

</div>

<div class="form-grid">

<div class="panel">

<h3>KULLANICI BİLGİLERİ</h3>

<div class="form-row">
<label>Ad Soyad</label>
<input type="text" id="adsoyad">
</div>

<div class="form-row">
<label>Departman</label>
<input type="text" id="departman2">
</div>

</div>

<div class="panel">

<h3>ÜRÜN BİLGİLERİ</h3>

<div class="form-row">
<label>Cihaz Türü</label>
<input type="text" id="cihaz">
</div>

<div class="form-row">
<label>Marka</label>
<input type="text" id="marka">
</div>

<div class="form-row">
<label>Model</label>
<input type="text" id="model">
</div>

<div class="form-row">
<label>Seri No</label>
<input type="text" id="seri">
</div>

<div class="form-row">
<label>Servis Etiketi</label>
<input type="text" id="etiket">
</div>

<div class="form-row">
<label>Garanti Tarihi</label>

<input
type="text"
id="garantiTarihi"
placeholder="GG.AA.YYYY">
</div>

<div class="form-row">

<label>Garanti</label>

<div class="checkbox-group">

<label class="checkbox-item">
<input type="radio"
name="garanti"
value="Var"
id="garantiVar">
Var
</label>

<label class="checkbox-item">
<input type="radio"
name="garanti"
value="Yok"
id="garantiYok">
Yok
</label>

</div>

</div>

</div>

<div class="panel">
<h3>BİLDİRİLEN ARIZA</h3>
<textarea id="bildirilen"></textarea>
</div>

<div class="panel">

<h3>ARIZA SEBEPLERİ</h3>

<div class="checkbox-group">

<label class="checkbox-item">
<input type="checkbox" id="sebep1">
Kullanıcı Hatası
</label>

<label class="checkbox-item">
<input type="checkbox" id="sebep2">
Ürün Hatası
</label>

<label class="checkbox-item">
<input type="checkbox" id="sebep3">
Teknolojik Ömrünü Tamamlaması
</label>

</div>

</div>

<div class="panel">
<h3>TESPİT EDİLEN ARIZA</h3>
<textarea id="tespit"></textarea>
</div>

<div class="panel">
<h3>YAPILAN İŞLEM</h3>
<textarea id="islem"></textarea>
</div>

<div class="panel">
<h3>SONUÇ</h3>
<textarea id="sonuc"></textarea>
</div>

<div class="panel">

<h3>PERSONEL BİLGİLERİ</h3>

<div class="form-row">
<label>Teknik Personel</label>
<input type="text" id="personel">
</div>

<div class="form-row">
<label>Onaylayan</label>
<input type="text"
id="onaylayan"
value="Muhammed Yusuf OLGUN">
</div>

</div>

</div>

<div class="actions">

<button class="btn btn-primary"
onclick="previewForm()">
Önizleme Oluştur
</button>

<button class="btn btn-success"
onclick="exportCSV()">
CSV Export
</button>

<button class="btn btn-warning btn-print"
onclick="printPreviewOnly()">
Yazdır / PDF
</button>

<button class="btn btn-import"
onclick="csvInput.click()">
İçeri Aktar
</button>

<input type="file"
id="csvInput"
accept=".csv"
hidden>

</div>

<div class="preview">

<div id="previewContent"></div>

<div class="preview-footer">

<div class="footer-credit">
AI Web Designer: Muhammed Yusuf OLGUN
</div>

</div>

</div>

</div>

<script>

/* =========================================================
DEFAULT DATE
========================================================= */

tarih.value =
new Date().toISOString().split('T')[0];

/* =========================================================
FORM NO LIMIT
========================================================= */

formNo.addEventListener('input',function(){

this.value =
this.value
.replace(/\D/g,'')
.slice(0,5);

});

/* =========================================================
GARANTİ TARİHİ FORMAT
========================================================= */

garantiTarihi.addEventListener('input',function(){

let value =
this.value
.replace(/\D/g,'');

if(value.length > 8)
value = value.slice(0,8);

if(value.length > 4){

value =
value.replace(
/(\d{2})(\d{2})(\d+)/,
'$1.$2.$3'
);

}
else if(value.length > 2){

value =
value.replace(
/(\d{2})(\d+)/,
'$1.$2'
);

}

this.value = value;

});

/* =========================================================
LOGO CHANGE
========================================================= */

let clickCount=0;

logoWrapper.addEventListener('click',()=>{

clickCount++;

if(clickCount===5){

logoInput.click();

clickCount=0;

}

setTimeout(()=>{
clickCount=0;
},1500);

});

logoInput.addEventListener('change',function(e){

const file=e.target.files[0];

if(!file) return;

const reader=
new FileReader();

reader.onload=function(ev){

logoImage.src=
ev.target.result;

};

reader.readAsDataURL(file);

});

/* =========================================================
HELPERS
========================================================= */

function getGaranti(){

const checked =
document.querySelector(
'input[name="garanti"]:checked'
);

return checked
? checked.value
: '';

}

function getSebepler(){

let arr=[];

if(sebep1.checked)
arr.push('Kullanıcı Hatası');

if(sebep2.checked)
arr.push('Ürün Hatası');

if(sebep3.checked)
arr.push('Teknolojik Ömrünü Tamamlaması');

return arr.join(', ');

}

function escapeHTML(text){

if(!text) return '';

return text
.replace(/&/g,'&amp;')
.replace(/</g,'&lt;')
.replace(/>/g,'&gt;')
.replace(/\r?\n/g,'<br>');

}

function formatDateTR(dateString){

if(!dateString) return '';

if(dateString.includes('.'))
return dateString;

const parts = dateString.split('-');

if(parts.length !== 3) return dateString;

return `${parts[2]}.${parts[1]}.${parts[0]}`;

}

/* =========================================================
PREVIEW
========================================================= */

function previewForm(){

const rows = [

['Ad Soyad',adsoyad.value],
['Departman',departman2.value],
['Cihaz Türü',cihaz.value],
['Marka',marka.value],
['Model',model.value],
['Seri No',seri.value],
['Servis Etiketi',etiket.value],
['Garanti Tarihi',garantiTarihi.value],
['Garanti',getGaranti()],
['Arıza Sebepleri',getSebepler()],
['Bildirilen Arıza',bildirilen.value],
['Tespit Edilen Arıza',tespit.value],
['Yapılan İşlem',islem.value],
['Sonuç',sonuc.value]

];

let html=`

<div class="preview-header">

<div class="preview-left">

<div class="preview-logo">
<img src="${logoImage.src}">
</div>

<div class="preview-title">

<h1>
${editableTitle.innerText}
</h1>

<h2>
${document.querySelector('.main-subtitle').innerText}
</h2>

</div>

</div>

<div class="preview-meta">

<div class="preview-meta-top">

<div class="preview-meta-card">
<h4>Tarih</h4>
<div>${formatDateTR(tarih.value)}</div>
</div>

<div class="preview-meta-card formno-preview">
<h4>Form No</h4>
<div>${formNo.value}</div>
</div>

</div>

<div class="header-right-department"
style="
font-size:12px;
padding-right:2px;
">
TEKNİK İŞLETME DAİRESİ BAŞKANLIĞI
</div>

</div>

</div>

<table class="preview-table">

`;

rows.forEach(row=>{

if(row[1]){

html += `

<tr>

<td class="preview-label">
${row[0]}
</td>

<td>
${escapeHTML(row[1])}
</td>

</tr>

`;

}

});

html += `
</table>

<div class="signature-grid">

<div class="signature-box">

<h4>TEKNİK PERSONEL</h4>

<div>
${personel.value}
</div>

<div class="signature-line">
İmza
</div>

</div>

<div class="signature-box">

<h4>ONAYLAYAN</h4>

<div>
${onaylayan.value}
</div>

<div class="signature-line">
İmza
</div>

</div>

</div>
`;

previewContent.innerHTML=html;

}

/* =========================================================
PRINT
========================================================= */

function printPreviewOnly(){

if(
previewContent.innerHTML.includes(
'Önizleme oluşturmak için'
)
){

alert(
'Önce önizleme oluşturunuz.'
);

return;

}

window.print();

}

/* =========================================================
CSV EXPORT UTF-8
========================================================= */

function exportCSV(){

const rows = [

['Tarih',formatDateTR(tarih.value)],
['Form No',formNo.value],
['Ad Soyad',adsoyad.value],
['Departman',departman2.value],
['Cihaz Türü',cihaz.value],
['Marka',marka.value],
['Model',model.value],
['Seri No',seri.value],
['Servis Etiketi',etiket.value],
['Garanti Tarihi',garantiTarihi.value],
['Garanti',getGaranti()],
['Arıza Sebepleri',getSebepler()],
['Bildirilen Arıza',bildirilen.value],
['Tespit Edilen Arıza',tespit.value],
['Yapılan İşlem',islem.value],
['Sonuç',sonuc.value],
['Teknik Personel',personel.value],
['Onaylayan',onaylayan.value]

];

let csvContent='';

rows.forEach(r=>{

csvContent +=
`"${String(r[0]).replace(/"/g,'""')}","${String(r[1]).replace(/"/g,'""')}"\r\n`;

});

const BOM = "\uFEFF";

const blob =
new Blob(
[BOM + csvContent],
{
type:'text/csv;charset=utf-8;'
}
);

const link =
document.createElement('a');

link.href =
URL.createObjectURL(blob);

link.download =
'ARIZA_TESPIT_VE_ONARIM_FORMU.csv';

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

}

/* =========================================================
CSV IMPORT
========================================================= */

csvInput.addEventListener(
'change',
function(e){

const file=e.target.files[0];

if(!file) return;

const reader=
new FileReader();

reader.onload=function(ev){

const text=
ev.target.result;

const lines=
text
.replace(/\r/g,'')
.split('\n')
.filter(x=>x.trim());

const data={};

lines.forEach(line=>{

const match=
line.match(/"([^"]*)","([^"]*)"/);

if(match){

data[match[1]]=
match[2];

}

});

adsoyad.value=data['Ad Soyad'] || '';
departman2.value=data['Departman'] || '';
cihaz.value=data['Cihaz Türü'] || '';
marka.value=data['Marka'] || '';
model.value=data['Model'] || '';
seri.value=data['Seri No'] || '';
etiket.value=data['Servis Etiketi'] || '';
garantiTarihi.value=data['Garanti Tarihi'] || '';
bildirilen.value=data['Bildirilen Arıza'] || '';
tespit.value=data['Tespit Edilen Arıza'] || '';
islem.value=data['Yapılan İşlem'] || '';
sonuc.value=data['Sonuç'] || '';
personel.value=data['Teknik Personel'] || '';
onaylayan.value=data['Onaylayan'] || '';
formNo.value=data['Form No'] || '';

garantiVar.checked =
data['Garanti']==='Var';

garantiYok.checked =
data['Garanti']==='Yok';

const sebep =
data['Arıza Sebepleri'] || '';

sebep1.checked =
sebep.includes('Kullanıcı Hatası');

sebep2.checked =
sebep.includes('Ürün Hatası');

sebep3.checked =
sebep.includes('Teknolojik Ömrünü Tamamlaması');

alert(
'CSV başarıyla içeri aktarıldı.'
);

};

reader.readAsText(file,'utf-8');

});

/* =========================================================
INIT
========================================================= */

window.addEventListener(
'load',
function(){

previewContent.innerHTML = `
<div style="
padding:50px 20px;
text-align:center;
color:#94a3b8;
font-size:14px;
font-weight:600;
">
Önizleme oluşturmak için yukarıdaki butonu kullanınız.
</div>
`;

}
);

</script>

</body>
</html>


Kaynaklar:
* ChatGPT