mengubah foto

.gitea/workflows/deploy.yml

@@ -1,38 +0,0 @@
-name: Deploy SecondTech
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  deploy:
-    runs-on: self-hosted
-
-    steps:
-      - name: Pull latest code
-        run: |
-          cd /var/www/secondtech
-          git fetch origin main
-          git reset --hard origin/main
-
-      - name: Install dependencies
-        run: |
-          cd /var/www/secondtech
-          pnpm install
-
-      - name: Build frontend
-        run: |
-          cd /var/www/secondtech
-          pnpm run build
-
-      - name: Restart backend
-        run: |
-          cd /var/www/secondtech
-          pm2 restart secondtech-api || pm2 start "pnpm run start" --name secondtech-api
-          pm2 save
-
-      - name: Reload nginx
-        run: |
-          nginx -t
-          systemctl reload nginx

add-product-images-table.sql

@@ -1,10 +0,0 @@
-CREATE TABLE IF NOT EXISTS product_images (
-  id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
-  product_id INT UNSIGNED NOT NULL,
-  image VARCHAR(255) NOT NULL,
-  sort_order INT UNSIGNED NOT NULL DEFAULT 0,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  CONSTRAINT fk_product_images_product
-    FOREIGN KEY (product_id) REFERENCES products(id)
-    ON DELETE CASCADE
-);

database.sql

@@ -10,7 +10,6 @@ CREATE TABLE IF NOT EXISTS users (
   email VARCHAR(160) NOT NULL UNIQUE,
   whatsapp VARCHAR(30) NOT NULL,
   password_hash VARCHAR(255) NOT NULL,
-  role ENUM('user', 'superadmin') NOT NULL DEFAULT 'user',
   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 );
 
@@ -56,14 +55,3 @@ ON DUPLICATE KEY UPDATE
   image = VALUES(image),
   description = VALUES(description),
   status = VALUES(status);
-
-CREATE TABLE IF NOT EXISTS product_images (
-  id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
-  product_id INT UNSIGNED NOT NULL,
-  image VARCHAR(255) NOT NULL,
-  sort_order INT UNSIGNED NOT NULL DEFAULT 0,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  CONSTRAINT fk_product_images_product
-    FOREIGN KEY (product_id) REFERENCES products(id)
-    ON DELETE CASCADE
-);

package.json

@@ -7,8 +7,7 @@
     "dev": "vite --host 0.0.0.0",
     "dev:api": "node server/server.js",
     "build": "vite build",
-    "preview": "vite preview --host 0.0.0.0",
+    "preview": "vite preview --host 0.0.0.0"
-    "start": "node server/server.js"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "latest",

server/server.js

@@ -14,8 +14,6 @@ dotenv.config()
 const app = express()
 const port = Number(process.env.PORT || 5000)
 const jwtSecret = process.env.JWT_SECRET || "secondtech_dev_secret"
-const maxImageSizeMb = Number(process.env.MAX_IMAGE_SIZE_MB || 10)
-const maxImageCount = Number(process.env.MAX_IMAGE_COUNT || 6)
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 const uploadsDir = path.join(__dirname, "uploads")
@@ -41,7 +39,7 @@ const storage = multer.diskStorage({
 
 const upload = multer({
   storage,
-  limits: { fileSize: maxImageSizeMb * 1024 * 1024, files: maxImageCount },
+  limits: { fileSize: 3 * 1024 * 1024 },
   fileFilter: (req, file, cb) => {
     if (!file.mimetype.startsWith("image/")) {
       cb(new Error("File harus berupa gambar."))
@@ -51,21 +49,6 @@ const upload = multer({
   }
 })
 
-async function ensureSchema() {
-  await pool.query(`
-    CREATE TABLE IF NOT EXISTS product_images (
-      id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
-      product_id INT UNSIGNED NOT NULL,
-      image VARCHAR(255) NOT NULL,
-      sort_order INT UNSIGNED NOT NULL DEFAULT 0,
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-      CONSTRAINT fk_product_images_product
-        FOREIGN KEY (product_id) REFERENCES products(id)
-        ON DELETE CASCADE
-    )
-  `)
-}
-
 function signUser(user) {
   return jwt.sign({ id: user.id, email: user.email }, jwtSecret, { expiresIn: "7d" })
 }
@@ -75,8 +58,7 @@ function publicUser(user) {
     id: user.id,
     name: user.name,
     email: user.email,
-    whatsapp: user.whatsapp,
+    whatsapp: user.whatsapp
-    role: user.role || "user"
   }
 }
 
@@ -97,81 +79,12 @@ function auth(req, res, next) {
   }
 }
 
-async function superadminOnly(req, res, next) {
-  try {
-    const [rows] = await pool.query("SELECT role FROM users WHERE id = ?", [req.user.id])
-
-    if (!rows[0] || rows[0].role !== "superadmin") {
-      res.status(403).json({ message: "Hanya superadmin yang boleh mengakses fitur ini." })
-      return
-    }
-
-    next()
-  } catch (error) {
-    next(error)
-  }
-}
-
-function uniqueImages(files) {
-  const seen = new Set()
-  return files.filter((file) => {
-    const key = `${file.originalname}-${file.size}-${file.mimetype}`
-    if (seen.has(key)) return false
-    seen.add(key)
-    return true
-  }).slice(0, maxImageCount)
-}
-
-function getUploadedImages(req) {
-  const files = [
-    ...(req.files?.images || []),
-    ...(req.files?.image || []),
-    ...(req.files?.photos || [])
-  ]
-  return uniqueImages(files)
-}
-
-async function getProductImages(productId, fallbackImage) {
-  const [images] = await pool.query(
-    "SELECT image FROM product_images WHERE product_id = ? ORDER BY sort_order ASC, id ASC",
-    [productId]
-  )
-
-  const imagePaths = images.map((item) => item.image).filter(Boolean)
-  if (imagePaths.length) return imagePaths
-  return fallbackImage ? [fallbackImage] : []
-}
-
-async function attachProductImages(products) {
-  return Promise.all(
-    products.map(async (product) => ({
-      ...product,
-      images: await getProductImages(product.id, product.image)
-    }))
-  )
-}
-
 async function findProductById(id) {
   const [rows] = await pool.query(
     "SELECT id, user_id, title, category, price, `condition`, location, seller, whatsapp, image, description, status, created_at FROM products WHERE id = ?",
     [id]
   )
-
+  return rows[0]
-  const product = rows[0]
-  if (!product) return null
-
-  product.images = await getProductImages(product.id, product.image)
-  return product
-}
-
-async function deleteUploadedImages(product) {
-  const images = product.images?.length ? product.images : [product.image]
-
-  images.forEach((image) => {
-    if (image?.startsWith("/uploads/")) {
-      fs.rm(path.join(uploadsDir, path.basename(image)), { force: true }, () => {})
-    }
-  })
 }
 
 app.get("/api/health", async (req, res, next) => {
@@ -183,24 +96,6 @@ app.get("/api/health", async (req, res, next) => {
   }
 })
 
-app.get("/api/debug/products/:id/images", async (req, res, next) => {
-  try {
-    const product = await findProductById(req.params.id)
-    if (!product) {
-      res.status(404).json({ message: "Produk tidak ditemukan." })
-      return
-    }
-    res.json({
-      product_id: Number(req.params.id),
-      main_image: product.image,
-      image_count: product.images.length,
-      images: product.images
-    })
-  } catch (error) {
-    next(error)
-  }
-})
-
 app.post("/api/auth/register", async (req, res, next) => {
   try {
     const { name, email, whatsapp, password } = req.body
@@ -221,7 +116,7 @@ app.post("/api/auth/register", async (req, res, next) => {
       [name, email.toLowerCase(), whatsapp, passwordHash]
     )
 
-    const user = { id: result.insertId, name, email: email.toLowerCase(), whatsapp, role: "user" }
+    const user = { id: result.insertId, name, email: email.toLowerCase(), whatsapp }
     res.status(201).json({ token: signUser(user), user: publicUser(user) })
   } catch (error) {
     if (error.code === "ER_DUP_ENTRY") {
@@ -257,7 +152,7 @@ app.post("/api/auth/login", async (req, res, next) => {
 
 app.get("/api/auth/me", auth, async (req, res, next) => {
   try {
-    const [rows] = await pool.query("SELECT id, name, email, whatsapp, role FROM users WHERE id = ?", [req.user.id])
+    const [rows] = await pool.query("SELECT id, name, email, whatsapp FROM users WHERE id = ?", [req.user.id])
     if (!rows[0]) {
       res.status(404).json({ message: "User tidak ditemukan." })
       return
@@ -273,7 +168,7 @@ app.get("/api/products", async (req, res, next) => {
     const [rows] = await pool.query(
       "SELECT id, user_id, title, category, price, `condition`, location, seller, whatsapp, image, description, status, created_at FROM products ORDER BY created_at DESC, id DESC"
     )
-    res.json({ products: await attachProductImages(rows) })
+    res.json({ products: rows })
   } catch (error) {
     next(error)
   }
@@ -285,7 +180,7 @@ app.get("/api/products/mine", auth, async (req, res, next) => {
       "SELECT id, user_id, title, category, price, `condition`, location, seller, whatsapp, image, description, status, created_at FROM products WHERE user_id = ? ORDER BY created_at DESC, id DESC",
       [req.user.id]
     )
-    res.json({ products: await attachProductImages(rows) })
+    res.json({ products: rows })
   } catch (error) {
     next(error)
   }
@@ -304,46 +199,27 @@ app.get("/api/products/:id", async (req, res, next) => {
   }
 })
 
-app.post(
+app.post("/api/products", auth, upload.single("image"), async (req, res, next) => {
-  "/api/products",
-  auth,
-  upload.fields([
-    { name: "images", maxCount: maxImageCount },
-    { name: "image", maxCount: maxImageCount },
-    { name: "photos", maxCount: maxImageCount }
-  ]),
-  async (req, res, next) => {
   try {
     const { title, category, price, condition, location, seller, whatsapp, description } = req.body
-      const uploadedImages = getUploadedImages(req)
 
-      console.log("Upload produk:", {
+    if (!title || !category || !price || !condition || !location || !seller || !whatsapp || !description || !req.file) {
-        title,
+      res.status(400).json({ message: "Semua field produk dan foto wajib diisi." })
-        imageCount: uploadedImages.length,
-        files: uploadedImages.map((file) => file.originalname)
-      })
-
-      if (!title || !category || !price || !condition || !location || !seller || !whatsapp || !description || !uploadedImages.length) {
-        res.status(400).json({ message: "Semua field produk dan minimal 1 foto wajib diisi." })
       return
     }
 
-      const mainImagePath = `/uploads/${uploadedImages[0].filename}`
+    const imagePath = `/uploads/${req.file.filename}`
     const [result] = await pool.query(
       "INSERT INTO products (user_id, title, category, price, `condition`, location, seller, whatsapp, image, description) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
-        [req.user.id, title, category, Number(price), condition, location, seller, whatsapp, mainImagePath, description]
+      [req.user.id, title, category, Number(price), condition, location, seller, whatsapp, imagePath, description]
     )
 
-      const imageRows = uploadedImages.map((file, index) => [result.insertId, `/uploads/${file.filename}`, index])
-      await pool.query("INSERT INTO product_images (product_id, image, sort_order) VALUES ?", [imageRows])
-
     const product = await findProductById(result.insertId)
     res.status(201).json({ product })
   } catch (error) {
     next(error)
   }
-  }
+})
-)
 
 app.patch("/api/products/:id/status", auth, async (req, res, next) => {
   try {
@@ -374,7 +250,10 @@ app.delete("/api/products/:id", auth, async (req, res, next) => {
     }
 
     await pool.query("DELETE FROM products WHERE id = ? AND user_id = ?", [req.params.id, req.user.id])
-    await deleteUploadedImages(product)
+
+    if (product.image.startsWith("/uploads/")) {
+      fs.rm(path.join(uploadsDir, path.basename(product.image)), { force: true }, () => {})
+    }
 
     res.json({ message: "Produk berhasil dihapus." })
   } catch (error) {
@@ -382,27 +261,9 @@ app.delete("/api/products/:id", auth, async (req, res, next) => {
   }
 })
 
-app.delete("/api/admin/products/:id", auth, superadminOnly, async (req, res, next) => {
-  try {
-    const product = await findProductById(req.params.id)
-
-    if (!product) {
-      res.status(404).json({ message: "Produk tidak ditemukan." })
-      return
-    }
-
-    await pool.query("DELETE FROM products WHERE id = ?", [req.params.id])
-    await deleteUploadedImages(product)
-
-    res.json({ message: "Produk berhasil dihapus oleh superadmin." })
-  } catch (error) {
-    next(error)
-  }
-})
-
 app.use((error, req, res, next) => {
   if (error instanceof multer.MulterError) {
-    res.status(400).json({ message: `Upload gagal. Ukuran setiap foto maksimal ${maxImageSizeMb} MB dan maksimal ${maxImageCount} foto.` })
+    res.status(400).json({ message: "Upload gagal. Ukuran foto maksimal 3MB." })
     return
   }
 
@@ -412,20 +273,9 @@ app.use((error, req, res, next) => {
   }
 
   console.error(error)
-  res.status(500).json({
+  res.status(500).json({ message: "Terjadi kesalahan pada server." })
-    message: "Terjadi kesalahan pada server.",
-    detail: process.env.NODE_ENV === "production" ? undefined : error.message
-  })
 })
 
-ensureSchema()
-  .then(() => {
 app.listen(port, () => {
   console.log(`SecondTech API berjalan di http://localhost:${port}`)
-      console.log(`Upload foto: maksimal ${maxImageSizeMb} MB per foto, maksimal ${maxImageCount} foto.`)
-    })
-  })
-  .catch((error) => {
-    console.error("Gagal menyiapkan database:", error)
-    process.exit(1)
 })

src/assets/main.css

@@ -39,461 +39,3 @@ body {
 .btn-WA {
   @apply inline-flex items-center justify-center gap-2 rounded-xl bg-green-500 px-5 py-3 text-sm font-semibold text-white transition hover:bg-green-600;
 }
-
-/* SecondTech dark mode */
-html.dark body {
-  background: #121212;
-  color: #f8fafc;
-}
-
-html.dark header {
-  background: rgba(18, 18, 18, 0.94);
-  border-color: rgba(37, 99, 235, 0.34);
-}
-
-html.dark main,
-html.dark section {
-  background: #121212;
-}
-
-html.dark .card {
-  background: #181818;
-  border-color: rgba(37, 99, 235, 0.30);
-  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.20);
-}
-
-html.dark .input {
-  background: #181818;
-  border-color: rgba(37, 99, 235, 0.34);
-  color: #f8fafc;
-}
-
-html.dark .input::placeholder {
-  color: #94a3b8;
-}
-
-html.dark .btn-secondary {
-  background: #181818;
-  border-color: rgba(37, 99, 235, 0.38);
-  color: #f8fafc;
-  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
-}
-
-html.dark .btn-primary {
-  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
-}
-
-html.dark .bg-white,
-html.dark .bg-slate-50,
-html.dark .bg-slate-100 {
-  background-color: #181818;
-}
-
-html.dark .text-slate-950,
-html.dark .text-slate-900,
-html.dark .text-slate-800,
-html.dark .text-slate-700 {
-  color: #f8fafc;
-}
-
-html.dark .text-slate-600,
-html.dark .text-slate-500 {
-  color: #cbd5e1;
-}
-
-html.dark .border-slate-200 {
-  border-color: rgba(37, 99, 235, 0.30);
-}
-
-/* SecondTech stronger dark mode repair */
-html.dark,
-html.dark body {
-  background: #121212 !important;
-  color: #f8fafc !important;
-}
-
-html.dark header,
-html.dark footer,
-html.dark main,
-html.dark section {
-  background-color: #121212 !important;
-}
-
-html.dark header {
-  border-color: rgba(37, 99, 235, 0.35) !important;
-}
-
-html.dark .card {
-  background: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.34) !important;
-  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
-}
-
-html.dark .input,
-html.dark input,
-html.dark select,
-html.dark textarea {
-  background-color: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.38) !important;
-  color: #f8fafc !important;
-}
-
-html.dark .input::placeholder,
-html.dark input::placeholder,
-html.dark textarea::placeholder {
-  color: #94a3b8 !important;
-}
-
-html.dark .btn-secondary {
-  background: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.42) !important;
-  color: #f8fafc !important;
-  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
-}
-
-html.dark .btn-primary {
-  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
-}
-
-html.dark .bg-white,
-html.dark .bg-slate-50,
-html.dark .bg-slate-100,
-html.dark .bg-brand-50 {
-  background-color: #181818 !important;
-}
-
-html.dark .text-slate-950,
-html.dark .text-slate-900,
-html.dark .text-slate-800,
-html.dark .text-slate-700,
-html.dark .text-brand-900,
-html.dark .text-brand-800,
-html.dark .text-brand-700 {
-  color: #f8fafc !important;
-}
-
-html.dark .text-slate-600,
-html.dark .text-slate-500,
-html.dark .text-slate-400 {
-  color: #cbd5e1 !important;
-}
-
-html.dark .nav-link,
-html.dark .mobile-link,
-html.dark a:not(.btn-primary) {
-  color: #dbeafe !important;
-}
-
-html.dark .nav-link:hover,
-html.dark .mobile-link:hover,
-html.dark a:not(.btn-primary):hover {
-  color: #ffffff !important;
-}
-
-html.dark .border-slate-200,
-html.dark .border-brand-600 {
-  border-color: rgba(37, 99, 235, 0.42) !important;
-}
-
-html.dark .shadow-sm {
-  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
-}
-
-/* SecondTech final dark mode repair */
-html.dark,
-html.dark body {
-  background: #121212 !important;
-  color: #f8fafc !important;
-}
-
-html.dark header,
-html.dark footer,
-html.dark main,
-html.dark section {
-  background-color: #121212 !important;
-}
-
-html.dark header {
-  border-color: rgba(37, 99, 235, 0.35) !important;
-}
-
-html.dark .card {
-  background: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.34) !important;
-  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
-}
-
-html.dark .input,
-html.dark input,
-html.dark select,
-html.dark textarea {
-  background-color: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.38) !important;
-  color: #f8fafc !important;
-}
-
-html.dark .input::placeholder,
-html.dark input::placeholder,
-html.dark textarea::placeholder {
-  color: #94a3b8 !important;
-}
-
-html.dark .btn-secondary {
-  background: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.42) !important;
-  color: #f8fafc !important;
-  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
-}
-
-html.dark .btn-primary {
-  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
-}
-
-html.dark .bg-white,
-html.dark .bg-slate-50,
-html.dark .bg-slate-100,
-html.dark .bg-brand-50,
-html.dark .bg-emerald-50,
-html.dark .bg-red-50 {
-  background-color: #181818 !important;
-}
-
-html.dark .text-zinc-950,
-html.dark .text-zinc-900,
-html.dark .text-zinc-800,
-html.dark .text-slate-950,
-html.dark .text-slate-900,
-html.dark .text-slate-800,
-html.dark .text-slate-700,
-html.dark .text-brand-900,
-html.dark .text-brand-800,
-html.dark .text-brand-700,
-html.dark .text-emerald-700,
-html.dark .text-red-700 {
-  color: #f8fafc !important;
-}
-
-html.dark .text-slate-600,
-html.dark .text-slate-500,
-html.dark .text-slate-400,
-html.dark .text-zinc-600,
-html.dark .text-zinc-500,
-html.dark .text-zinc-400 {
-  color: #cbd5e1 !important;
-}
-
-html.dark .nav-link,
-html.dark .mobile-link,
-html.dark a:not(.btn-primary) {
-  color: #dbeafe !important;
-}
-
-html.dark .nav-link:hover,
-html.dark .mobile-link:hover,
-html.dark a:not(.btn-primary):hover {
-  color: #ffffff !important;
-}
-
-html.dark .border-slate-200,
-html.dark .border-brand-600 {
-  border-color: rgba(37, 99, 235, 0.42) !important;
-}
-
-html.dark .shadow-sm {
-  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
-}
-
-/* SecondTech final dark mode override */
-:root {
-  --hero-title-color: #0f1729;
-}
-
-html.dark {
-  --hero-title-color: #f8fafc;
-  color-scheme: dark;
-}
-
-html.dark,
-html.dark body {
-  background: #121212 !important;
-  color: #f8fafc !important;
-}
-
-html.dark header,
-html.dark footer,
-html.dark main,
-html.dark section {
-  background-color: #121212 !important;
-}
-
-html.dark header {
-  border-color: rgba(37, 99, 235, 0.36) !important;
-}
-
-html.dark .card {
-  background: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.34) !important;
-  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
-}
-
-html.dark .input,
-html.dark input,
-html.dark select,
-html.dark textarea {
-  background-color: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.38) !important;
-  color: #f8fafc !important;
-}
-
-html.dark .input::placeholder,
-html.dark input::placeholder,
-html.dark textarea::placeholder {
-  color: #94a3b8 !important;
-}
-
-html.dark .btn-secondary {
-  background: #181818 !important;
-  border-color: rgba(37, 99, 235, 0.42) !important;
-  color: #f8fafc !important;
-  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
-}
-
-html.dark .btn-primary {
-  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
-}
-
-html.dark .bg-white,
-html.dark .bg-slate-50,
-html.dark .bg-slate-100,
-html.dark .bg-brand-50,
-html.dark .bg-emerald-50,
-html.dark .bg-red-50 {
-  background-color: #181818 !important;
-}
-
-html.dark .bg-white\/90 {
-  background-color: rgba(24, 24, 24, 0.9) !important;
-  color: #f8fafc !important;
-  border: 1px solid rgba(37, 99, 235, 0.35) !important;
-}
-
-html.dark .text-zinc-950,
-html.dark .text-zinc-900,
-html.dark .text-zinc-800,
-html.dark .text-slate-950,
-html.dark .text-slate-900,
-html.dark .text-slate-800,
-html.dark .text-slate-700,
-html.dark .text-brand-950,
-html.dark .text-brand-900,
-html.dark .text-brand-800,
-html.dark .text-brand-700,
-html.dark .text-emerald-700,
-html.dark .text-red-700 {
-  color: #f8fafc !important;
-}
-
-html.dark .text-slate-600,
-html.dark .text-slate-500,
-html.dark .text-slate-400,
-html.dark .text-zinc-600,
-html.dark .text-zinc-500,
-html.dark .text-zinc-400 {
-  color: #cbd5e1 !important;
-}
-
-html.dark .label,
-html.dark label,
-html.dark h1,
-html.dark h2,
-html.dark h3,
-html.dark h4,
-html.dark p,
-html.dark span {
-  color: inherit;
-}
-
-html.dark .nav-link,
-html.dark .mobile-link,
-html.dark a:not(.btn-primary) {
-  color: #dbeafe !important;
-}
-
-html.dark .nav-link:hover,
-html.dark .mobile-link:hover,
-html.dark a:not(.btn-primary):hover {
-  color: #ffffff !important;
-}
-
-html.dark .border-slate-200,
-html.dark .border-brand-600 {
-  border-color: rgba(37, 99, 235, 0.42) !important;
-}
-
-html.dark .shadow-sm {
-  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
-}
-
-/* Sidebar active links are generated by scoped component CSS, so override directly. */
-html.dark .side-link {
-  color: #e2e8f0 !important;
-}
-
-html.dark .side-link.router-link-active {
-  background: rgba(37, 99, 235, 0.18) !important;
-  border: 1px solid rgba(37, 99, 235, 0.40) !important;
-  color: #ffffff !important;
-  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
-}
-
-html.dark .side-link.router-link-active svg,
-html.dark .side-link svg {
-  color: currentColor !important;
-}
-
-html.dark .side-link.admin-link,
-html.dark .side-link.admin-link.router-link-active {
-  background: rgba(37, 99, 235, 0.18) !important;
-  border: 1px solid rgba(37, 99, 235, 0.40) !important;
-  color: #ffffff !important;
-}
-
-/* Product cards: category badge and save button use bg-white/90. */
-html.dark button.bg-white\/90,
-html.dark span.bg-white\/90 {
-  background-color: rgba(24, 24, 24, 0.90) !important;
-  color: #f8fafc !important;
-  border: 1px solid rgba(37, 99, 235, 0.35) !important;
-}
-
-html.dark button.bg-white\/90:hover {
-  background-color: #2563eb !important;
-  color: #ffffff !important;
-}
-
-html.dark .rounded-full.bg-brand-50,
-html.dark .rounded-full.bg-emerald-50,
-html.dark .rounded-full.bg-red-50 {
-  background-color: rgba(37, 99, 235, 0.16) !important;
-  color: #f8fafc !important;
-  border: 1px solid rgba(37, 99, 235, 0.35) !important;
-}
-
-/* Dark mode sidebar hover fix */
-html.dark .side-link:hover {
-  background: rgba(37, 99, 235, 0.16) !important;
-  border-color: rgba(37, 99, 235, 0.38) !important;
-  color: #ffffff !important;
-}
-
-html.dark .side-link:hover svg {
-  color: #ffffff !important;
-}
-
-html.dark .side-link.router-link-active,
-html.dark .side-link.router-link-active:hover {
-  background: rgba(37, 99, 235, 0.22) !important;
-  border: 1px solid rgba(37, 99, 235, 0.45) !important;
-  color: #ffffff !important;
-  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
-}

src/components/DashboardSidebar.vue

@@ -1,25 +1,8 @@
 <template>
   <aside class="card p-4">
     <div class="mb-6">
-      <p class="text-xs font-bold uppercase tracking-wider text-slate-500">
+      <p class="text-xs font-bold uppercase tracking-wider text-slate-500">Menu User</p>
-        Menu User
-      </p>
       <h2 class="mt-1 text-lg font-extrabold">Dashboard</h2>
-
-      <div v-if="currentUser" class="mt-4 rounded-xl bg-slate-50 p-3">
-        <p class="text-sm font-bold text-slate-800">
-          {{ currentUser.name }}
-        </p>
-        <p class="mt-1 text-xs text-slate-500">
-          {{ currentUser.email }}
-        </p>
-        <p
-          v-if="isSuperadmin"
-          class="mt-2 inline-flex rounded-full bg-red-50 px-3 py-1 text-xs font-bold text-red-700"
-        >
-          Superadmin
-        </p>
-      </div>
     </div>
 
     <nav class="grid gap-2">
@@ -27,31 +10,18 @@
         <LayoutDashboard size="18" />
         Barang Saya
       </RouterLink>
-
       <RouterLink class="side-link" to="/jual">
         <PlusCircle size="18" />
         Jual Barang
       </RouterLink>
-
       <RouterLink class="side-link" to="/marketplace">
         <Store size="18" />
         Marketplace
       </RouterLink>
-
       <RouterLink class="side-link" to="/tersimpan">
         <Heart size="18" />
         Barang Tersimpan
       </RouterLink>
-
-      <RouterLink
-        v-if="isSuperadmin"
-        class="side-link admin-link"
-        to="/admin/products"
-      >
-        <ShieldCheck size="18" />
-        Admin Marketplace
-      </RouterLink>
-
       <button class="side-link text-left" type="button" @click="logout">
         <LogOut size="18" />
         Logout
@@ -61,66 +31,22 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue"
+import { useRouter } from "vue-router"
-import { useRoute, useRouter } from "vue-router"
+import { Heart, LayoutDashboard, LogOut, PlusCircle, Store } from "lucide-vue-next"
-import {
+import { clearAuth } from "../utils"
-  Heart,
-  LayoutDashboard,
-  LogOut,
-  PlusCircle,
-  ShieldCheck,
-  Store
-} from "lucide-vue-next"
-import { clearAuth, fetchCurrentUser, getCurrentUser, getToken, setAuth } from "../utils"
 
 const router = useRouter()
-const route = useRoute()
-const currentUser = ref(getCurrentUser())
-
-const isSuperadmin = computed(() => {
-  return currentUser.value?.role === "superadmin"
-})
-
-watch(
-  () => route.fullPath,
-  () => {
-    currentUser.value = getCurrentUser()
-  }
-)
-
-async function refreshCurrentUser() {
-  if (!getToken()) return
-
-  try {
-    const data = await fetchCurrentUser()
-    setAuth({
-      token: getToken(),
-      user: data.user
-    })
-    currentUser.value = getCurrentUser()
-  } catch {
-    clearAuth()
-    currentUser.value = null
-  }
-}
 
 function logout() {
   clearAuth()
   router.push("/login")
 }
-
-onMounted(refreshCurrentUser)
 </script>
 
 <style scoped>
 .side-link {
   @apply flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-100;
 }
-
-.admin-link {
-  @apply bg-red-50 text-red-700 hover:bg-red-100;
-}
-
 .router-link-active {
   @apply bg-brand-50 text-brand-700;
 }

src/components/Footer.vue

@@ -4,7 +4,9 @@
       <div class="grid gap-8 md:grid-cols-3">
         <div>
           <h2 class="text-xl font-extrabold">SecondTech Market</h2>
-          <p class="mt-3 text-sm leading-6 text-slate-300">Marketplace barang bekas teknologi untuk laptop, PC, monitor, keyboard, perangkat jaringan, dan server.</p>
+          <p class="mt-3 text-sm leading-6 text-slate-300">
+            Marketplace barang bekas teknologi untuk laptop, PC, monitor, keyboard, perangkat jaringan, dan server.
+          </p>
         </div>
         <div>
           <h3 class="font-bold">Navigasi</h3>
@@ -17,12 +19,11 @@
         <div>
           <h3 class="font-bold">Catatan Project</h3>
           <p class="mt-3 text-sm leading-6 text-slate-300">
-            Project ini di buat unutk komunitas jual beli barang bekas teknologi, dengan fokus pada perangkat jaringan dan server. Dibuat menggunakan Vue.js, Tailwind CSS, dan Firebase untuk autentikasi dan database. Fitur utama meliputi
+            Versi ini memakai backend Express, database MySQL, dan upload foto produk dari file perangkat.
-            listing produk, dashboard pengguna, dan admin
           </p>
         </div>
       </div>
-      <p class="mt-10 text-center text-xs text-slate-400">© 2026 SecondTech Market. Dibuat untuk project web.</p>
+      <p class="mt-10 text-xs text-slate-400">© 2026 SecondTech Market. Dibuat untuk project web.</p>
     </div>
   </footer>
 </template>

src/components/Navbar.vue

@@ -2,7 +2,13 @@
   <header class="sticky top-0 z-50 border-b border-slate-200 bg-white/90 backdrop-blur">
     <div class="container-page flex h-16 items-center justify-between">
       <RouterLink to="/" class="flex items-center gap-2">
-        <img src="/round-logo-sija.png" alt="SecondTech logo" class="h-9 w-9 rounded-full object-cover" />
+        <div class="flex items-center justify-center">
+          <img 
+            src="/round-logo-sija.png" 
+            alt="SecondTech Logo" 
+            class="h-10 w-10 object-contain"
+          />
+        </div>
         <span class="text-lg font-extrabold tracking-tight">SecondTech</span>
       </RouterLink>
 
@@ -12,21 +18,13 @@
         <RouterLink class="nav-link" to="/jual">Jual Barang</RouterLink>
         <RouterLink class="nav-link" to="/dashboard">Dashboard</RouterLink>
         <RouterLink class="nav-link" to="/tersimpan">Tersimpan</RouterLink>
-        <RouterLink v-if="isSuperadmin" class="nav-link" to="/admin/products">Admin Marketplace</RouterLink>
       </nav>
 
       <div class="hidden items-center gap-3 md:flex">
-        <button type="button" class="btn-secondary !px-3 !py-2" @click="toggleTheme">
-          <Sun v-if="darkMode" size="18" />
-          <Moon v-else size="18" />
-        </button>
-
         <template v-if="currentUser">
           <span class="text-sm font-bold text-slate-700">{{ currentUser.name }}</span>
-          <span v-if="isSuperadmin" class="rounded-full bg-red-50 px-3 py-1 text-xs font-bold text-red-700">Superadmin</span>
           <button class="btn-secondary !px-4 !py-2" @click="logout">Logout</button>
         </template>
-
         <template v-else>
           <RouterLink to="/login" class="btn-secondary !px-4 !py-2">Login</RouterLink>
           <RouterLink to="/register" class="btn-primary !px-4 !py-2">Register</RouterLink>
@@ -45,23 +43,9 @@
         <RouterLink class="mobile-link" to="/jual" @click="open=false">Jual Barang</RouterLink>
         <RouterLink class="mobile-link" to="/dashboard" @click="open=false">Dashboard</RouterLink>
         <RouterLink class="mobile-link" to="/tersimpan" @click="open=false">Tersimpan</RouterLink>
-        <RouterLink v-if="isSuperadmin" class="mobile-link" to="/admin/products" @click="open = false">Admin Marketplace</RouterLink>
-
-        <button type="button" class="btn-secondary mt-2 !py-2 text-center" @click="toggleTheme">
-          <Sun v-if="darkMode" size="18" />
-          <Moon v-else size="18" />
-          {{ darkMode ? 'Light Mode' : 'Dark Mode' }}
-        </button>
-
         <div v-if="currentUser" class="mt-2 grid gap-2">
-          <div class="rounded-xl bg-slate-50 px-3 py-2">
-            <p class="text-sm font-bold text-slate-800">{{ currentUser.name }}</p>
-            <p class="text-xs text-slate-500">{{ currentUser.email }}</p>
-            <p v-if="isSuperadmin" class="mt-1 text-xs font-bold text-red-700">Superadmin</p>
-          </div>
           <button class="btn-secondary !py-2 text-center" @click="logout">Logout</button>
         </div>
-
         <div v-else class="mt-2 grid grid-cols-2 gap-2">
           <RouterLink to="/login" class="btn-secondary !py-2 text-center" @click="open=false">Login</RouterLink>
           <RouterLink to="/register" class="btn-primary !py-2 text-center" @click="open=false">Register</RouterLink>
@@ -72,71 +56,38 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { ref, watch } from "vue"
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from "vue-router"
-import { Menu, Moon, Sun } from 'lucide-vue-next';
+import { Cpu, Menu } from "lucide-vue-next"
-import { clearAuth, fetchCurrentUser, getCurrentUser, getToken, setAuth } from '../utils';
+import { clearAuth, getCurrentUser } from "../utils"
 
-const open = ref(false);
+const open = ref(false)
-const route = useRoute();
+const route = useRoute()
-const router = useRouter();
+const router = useRouter()
-const currentUser = ref(getCurrentUser());
+const currentUser = ref(getCurrentUser())
-const darkMode = ref(localStorage.getItem('secondtech_theme') === 'dark');
-
-const isSuperadmin = computed(() => currentUser.value?.role === 'superadmin');
 
 watch(
   () => route.fullPath,
   () => {
-    currentUser.value = getCurrentUser();
+    currentUser.value = getCurrentUser()
-  },
-);
-
-function applyTheme() {
-  document.documentElement.classList.toggle('dark', darkMode.value);
-  localStorage.setItem('secondtech_theme', darkMode.value ? 'dark' : 'light');
-}
-
-function toggleTheme() {
-  darkMode.value = !darkMode.value;
-  applyTheme();
-}
-
-async function refreshCurrentUser() {
-  if (!getToken()) return;
-
-  try {
-    const data = await fetchCurrentUser();
-    setAuth({ token: getToken(), user: data.user });
-    currentUser.value = getCurrentUser();
-  } catch {
-    clearAuth();
-    currentUser.value = null;
-  }
   }
+)
 
 function logout() {
-  clearAuth();
+  clearAuth()
-  currentUser.value = null;
+  currentUser.value = null
-  open.value = false;
+  open.value = false
-  router.push('/login');
+  router.push("/login")
 }
-
-onMounted(() => {
-  applyTheme();
-  refreshCurrentUser();
-});
 </script>
 
 <style scoped>
 .nav-link {
   @apply text-sm font-semibold text-slate-600 transition hover:text-brand-700;
 }
-
 .router-link-active {
   @apply text-brand-700;
 }
-
 .mobile-link {
   @apply rounded-xl px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-100;
 }

src/data/products.js

@@ -1,4 +1,101 @@
-export const products = []
+export const products = [
+  {
+    id: 1,
+    title: "Laptop Lenovo ThinkPad T480",
+    category: "Laptop",
+    price: 3200000,
+    condition: "Bekas Normal",
+    location: "Yogyakarta",
+    seller: "Raka SIJA",
+    whatsapp: "6281234567890",
+    image: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?q=80&w=1200&auto=format&fit=crop",
+    description: "Laptop bekas cocok untuk belajar coding, jaringan, virtual machine ringan, dan kebutuhan sekolah. RAM 8GB, SSD 256GB, keyboard normal."
+  },
+  {
+    id: 2,
+    title: "PC Rakitan i5 Gen 8",
+    category: "PC",
+    price: 4100000,
+    condition: "Bekas Normal",
+    location: "Bantul",
+    seller: "Dimas Tech",
+    whatsapp: "628111222333",
+    image: "https://images.unsplash.com/photo-1587202372775-e229f172b9d7?q=80&w=1200&auto=format&fit=crop",
+    description: "PC rakitan untuk lab jaringan, desain ringan, dan multitasking. Intel Core i5, RAM 16GB, SSD 512GB."
+  },
+  {
+    id: 3,
+    title: "Monitor LG 24 Inch IPS",
+    category: "Monitor",
+    price: 1150000,
+    condition: "Bekas Mulus",
+    location: "Sleman",
+    seller: "Adit Hardware",
+    whatsapp: "628555666777",
+    image: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?q=80&w=1200&auto=format&fit=crop",
+    description: "Monitor IPS 24 inch, warna masih bagus, cocok untuk coding dan editing. Include kabel power dan HDMI."
+  },
+  {
+    id: 4,
+    title: "Keyboard Mechanical Keychron K2",
+    category: "Keyboard",
+    price: 850000,
+    condition: "Bekas Normal",
+    location: "Solo",
+    seller: "Naufal Keys",
+    whatsapp: "628333444555",
+    image: "https://images.unsplash.com/photo-1618384887929-16ec33fab9ef?q=80&w=1200&auto=format&fit=crop",
+    description: "Keyboard mechanical wireless, switch brown, cocok untuk coding. Kondisi normal dan keycap lengkap."
+  },
+  {
+    id: 5,
+    title: "MikroTik RB941 hAP Lite",
+    category: "Router",
+    price: 180000,
+    condition: "Bekas Normal",
+    location: "Kulon Progo",
+    seller: "Lab Network",
+    whatsapp: "628777888999",
+    image: "https://images.unsplash.com/photo-1606904825846-647eb07f5be2?q=80&w=1200&auto=format&fit=crop",
+    description: "Router MikroTik untuk belajar routing, firewall, DHCP, hotspot, dan konfigurasi dasar jaringan."
+  },
+  {
+    id: 6,
+    title: "Switch TP-Link 8 Port Gigabit",
+    category: "Switch",
+    price: 250000,
+    condition: "Bekas Normal",
+    location: "Magelang",
+    seller: "Fajar Net",
+    whatsapp: "628999111222",
+    image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=1200&auto=format&fit=crop",
+    description: "Switch 8 port gigabit, cocok untuk lab kecil, warnet mini, dan praktik jaringan lokal."
+  },
+  {
+    id: 7,
+    title: "Server Dell PowerEdge R620",
+    category: "Server",
+    price: 6500000,
+    condition: "Bekas Server Room",
+    location: "Jakarta",
+    seller: "Server Bekas ID",
+    whatsapp: "628222333444",
+    image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=1200&auto=format&fit=crop",
+    description: "Server rackmount bekas data center, cocok untuk belajar virtualization, Proxmox, Docker, dan homelab."
+  },
+  {
+    id: 8,
+    title: "Access Point TP-Link EAP225",
+    category: "Access Point",
+    price: 620000,
+    condition: "Bekas Mulus",
+    location: "Semarang",
+    seller: "WiFi Store",
+    whatsapp: "6281212121212",
+    image: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8?q=80&w=1200&auto=format&fit=crop",
+    description: "Access point ceiling untuk hotspot sekolah, kantor, dan lab jaringan. Kondisi normal."
+  }
+]
 
 export const categories = [
   "Semua",
@@ -11,15 +108,3 @@ export const categories = [
   "Server",
   "Access Point"
 ]
-
-export const categoryOptions = [
-  { name: "Semua", icon: "Boxes" },
-  { name: "Laptop", icon: "Laptop" },
-  { name: "PC", icon: "PcCase" },
-  { name: "Monitor", icon: "Monitor" },
-  { name: "Keyboard", icon: "Keyboard" },
-  { name: "Router", icon: "Router" },
-  { name: "Switch", icon: "Network" },
-  { name: "Server", icon: "Server" },
-  { name: "Access Point", icon: "Wifi" }
-]

src/router/index.js

@@ -8,8 +8,7 @@ import DashboardView from "../views/DashboardView.vue"
 import SavedView from "../views/SavedView.vue"
 import LoginView from "../views/LoginView.vue"
 import RegisterView from "../views/RegisterView.vue"
-import AdminProductsView from "../views/AdminProductsView.vue"
+import { getToken } from "../utils"
-import { getCurrentUser, getToken } from "../utils"
 
 const routes = [
   { path: "/", name: "home", component: HomeView },
@@ -18,12 +17,6 @@ const routes = [
   { path: "/jual", name: "sell-product", component: SellProductView, meta: { requiresAuth: true } },
   { path: "/dashboard", name: "dashboard", component: DashboardView, meta: { requiresAuth: true } },
   { path: "/tersimpan", name: "saved", component: SavedView, meta: { requiresAuth: true } },
-  {
-    path: "/admin/products",
-    name: "admin-products",
-    component: AdminProductsView,
-    meta: { requiresAuth: true, requiresSuperadmin: true }
-  },
   { path: "/login", name: "login", component: LoginView },
   { path: "/register", name: "register", component: RegisterView }
 ]
@@ -37,12 +30,6 @@ router.beforeEach((to) => {
   if (to.meta.requiresAuth && !getToken()) {
     return "/login"
   }
-
-  const user = getCurrentUser()
-
-  if (to.meta.requiresSuperadmin && user?.role !== "superadmin") {
-    return "/dashboard"
-  }
 })
 
 export default router

src/utils.js

@@ -31,14 +31,7 @@ export function getCurrentUser() {
 
 export function setAuth({ token, user }) {
   localStorage.setItem("secondtech_token", token)
-
+  setLocal("secondtech_user", user)
-  setLocal("secondtech_user", {
-    id: user.id,
-    name: user.name,
-    email: user.email,
-    whatsapp: user.whatsapp,
-    role: user.role || "user"
-  })
 }
 
 export function clearAuth() {
@@ -86,10 +79,6 @@ export function loginUser(payload) {
   })
 }
 
-export function fetchCurrentUser() {
-  return requestJson("/api/auth/me")
-}
-
 export function fetchProducts() {
   return requestJson("/api/products")
 }
@@ -122,12 +111,6 @@ export function deleteProductById(id) {
   })
 }
 
-export function deleteProductAsAdmin(id) {
-  return requestJson(`/api/admin/products/${id}`, {
-    method: "DELETE"
-  })
-}
-
 export function getSavedProducts() {
   return getLocal("secondtech_saved", [])
 }

src/views/AdminProductsView.vue

@@ -1,113 +0,0 @@
-<template>
-  <section class="container-page py-10">
-    <div class="mb-8">
-      <h1 class="text-3xl font-extrabold">Admin Marketplace</h1>
-      <p class="mt-2 text-slate-600">Kelola semua produk yang tampil di marketplace.</p>
-    </div>
-
-    <p v-if="errorMessage" class="mb-5 rounded-xl bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
-      {{ errorMessage }}
-    </p>
-
-    <div v-if="loading" class="card p-10 text-center">
-      <h2 class="text-xl font-extrabold">Memuat produk...</h2>
-    </div>
-
-    <div v-else-if="products.length" class="grid gap-4">
-      <div
-        v-for="product in products"
-        :key="product.id"
-        class="card grid gap-4 p-4 md:grid-cols-[140px_1fr_auto] md:items-center"
-      >
-        <img
-          :src="getProductImageUrl(product.image)"
-          :alt="product.title"
-          class="aspect-[4/3] w-full rounded-xl object-cover md:w-36"
-        />
-
-        <div>
-          <div class="flex flex-wrap items-center gap-2">
-            <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-bold text-brand-700">
-              {{ product.category }}
-            </span>
-            <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-700">
-              {{ product.status }}
-            </span>
-          </div>
-
-          <h3 class="mt-3 font-extrabold">{{ product.title }}</h3>
-          <p class="mt-1 text-sm text-slate-500">
-            {{ product.seller }} • {{ product.location }} • {{ product.condition }}
-          </p>
-          <p class="mt-2 font-extrabold text-brand-700">
-            {{ formatRupiah(product.price) }}
-          </p>
-        </div>
-
-        <div class="flex flex-wrap gap-2 md:flex-col">
-          <RouterLink :to="`/produk/${product.id}`" class="btn-secondary !px-3 !py-2">
-            Detail
-          </RouterLink>
-          <button
-            class="rounded-xl bg-red-50 px-3 py-2 text-sm font-bold text-red-700 hover:bg-red-100"
-            @click="deleteAsAdmin(product.id)"
-          >
-            Hapus
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div v-else class="card p-10 text-center">
-      <h2 class="text-xl font-extrabold">Belum ada produk</h2>
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { onMounted, ref } from "vue"
-import { API_BASE_URL, fetchProducts, formatRupiah, getProductImageUrl, getToken } from "../utils"
-
-const products = ref([])
-const loading = ref(true)
-const errorMessage = ref("")
-
-async function loadProducts() {
-  loading.value = true
-  errorMessage.value = ""
-
-  try {
-    const data = await fetchProducts()
-    products.value = data.products
-  } catch (error) {
-    errorMessage.value = error.message
-  } finally {
-    loading.value = false
-  }
-}
-
-async function deleteAsAdmin(id) {
-  if (!confirm("Yakin ingin menghapus produk ini dari marketplace?")) return
-
-  try {
-    const response = await fetch(`${API_BASE_URL}/api/admin/products/${id}`, {
-      method: "DELETE",
-      headers: {
-        Authorization: `Bearer ${getToken()}`
-      }
-    })
-
-    const data = await response.json().catch(() => ({}))
-
-    if (!response.ok) {
-      throw new Error(data.message || "Gagal menghapus produk.")
-    }
-
-    products.value = products.value.filter((product) => product.id !== id)
-  } catch (error) {
-    errorMessage.value = error.message
-  }
-}
-
-onMounted(loadProducts)
-</script>

src/views/HomeView.vue

@@ -14,7 +14,6 @@
           :pauseOnHover="true"
           :yoyo="true"
         />
-
         <div>
         <TextType
           as="h2"
@@ -23,15 +22,12 @@
           :typingSpeed="75"
           :pauseDuration="1500"
           :showCursor="false"
-            :textColors="['var(--hero-title-color)']"
+          :textColors="['#0f1729']"
           cursorCharacter="|"
         />
         </div>
 
-        <p class="mt-6 max-w-xl text-lg leading-8 text-slate-600">
+        <p class="mt-6 max-w-xl text-lg leading-8 text-slate-600">Temukan laptop bekas, PC, monitor, keyboard, router, switch, access point, dan server bekas untuk berbagai kebutuhan.</p>
-          Temukan laptop bekas, PC, monitor, keyboard, router, switch, access point, dan server bekas untuk berbagai kebutuhan.
-        </p>
-
         <div class="mt-8 flex flex-wrap gap-3">
           <RouterLink to="/jual" class="btn-primary">Jual Barang Sekarang</RouterLink>
           <RouterLink to="/marketplace" class="btn-secondary">Lihat Marketplace</RouterLink>
@@ -40,11 +36,7 @@
 
       <div class="relative">
         <div class="absolute -inset-4 rounded-[2rem] bg-brand-100 blur-2xl"></div>
-        <img
+        <img class="relative aspect-[4/3] w-full rounded-[2rem] object-cover shadow-2xl" src="/kolase home.png" alt="Tech marketplace" />
-          class="relative aspect-[4/3] w-full rounded-[2rem] object-cover shadow-2xl"
-          src="/Hero.jpeg"
-          alt="Tech marketplace"
-        />
       </div>
     </div>
   </section>
@@ -55,22 +47,15 @@
         <h2 class="text-2xl font-extrabold">Kategori Populer</h2>
         <p class="mt-2 text-slate-600">Fokus ke perangkat teknologi dan jaringan.</p>
       </div>
-      <RouterLink to="/marketplace" class="text-sm font-bold text-brand-700">
+      <RouterLink to="/marketplace" class="text-sm font-bold text-brand-700">Lihat semua</RouterLink>
-        Lihat semua
-      </RouterLink>
     </div>
 
     <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
-      <div
+      <div v-for="cat in categoryList" :key="cat" class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md">
-        v-for="cat in categoryList"
-        :key="cat.name"
-        class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md"
-      >
         <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-700">
-          <component :is="iconMap[cat.icon]" :size="22" />
+          <Cpu size="22" />
         </div>
-
+        <p class="font-bold">{{ cat }}</p>
-        <p class="font-bold">{{ cat.name }}</p>
       </div>
     </div>
   </section>
@@ -80,86 +65,36 @@
       <div class="mb-8 flex items-end justify-between gap-4">
         <div>
           <h2 class="text-2xl font-extrabold">Produk Terbaru</h2>
-          <p class="mt-2 text-slate-600">Barang terbaru yang tersedia di marketplace.</p>
+          <p class="mt-2 text-slate-600">Contoh barang bekas teknologi yang tersedia.</p>
         </div>
       </div>
 
-      <div v-if="latestProducts.length" class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <ProductCard
+        <ProductCard v-for="product in latestProducts" :key="product.id" :product="product" :saved="saved.includes(product.id)" @toggle-save="toggleSave" />
-          v-for="product in latestProducts"
-          :key="product.id"
-          :product="product"
-          :saved="saved.includes(product.id)"
-          @toggle-save="toggleSave"
-        />
-      </div>
-
-      <div v-else class="card p-10 text-center">
-        <h3 class="text-xl font-extrabold">Belum ada produk</h3>
-        <p class="mt-2 text-slate-600">Produk terbaru akan muncul setelah barang diposting.</p>
       </div>
     </div>
   </section>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue"
+import { computed, ref } from 'vue';
-import { Boxes, Keyboard, Laptop, Monitor, Network, PcCase, Router, Server, Wifi } from "lucide-vue-next"
+import { Cpu } from 'lucide-vue-next';
-import ProductCard from "../components/ProductCard.vue"
+import ProductCard from '../components/ProductCard.vue';
-import { categoryOptions, products as defaultProducts } from "../data/products"
+import { products, categories } from '../data/products';
-import { fetchProducts, getSavedProducts, setSavedProducts } from "../utils"
+import { getSavedProducts, setSavedProducts } from '../utils';
-import ShinyText from "../vuebits/ShinyText/ShinyText.vue"
+import ShinyText from '../vuebits/ShinyText/ShinyText.vue';
-import TextType from "../vuebits/TextType/TextType.vue"
+import TextType from '../vuebits/TextType/TextType.vue';
 
-const saved = ref(getSavedProducts())
+const saved = ref(getSavedProducts());
-const products = ref(defaultProducts)
+const categoryList = categories.filter((c) => c !== 'Semua').slice(0, 6);
-
+const latestProducts = computed(() => products.slice(0, 4));
-const categoryList = categoryOptions
-  .filter((category) => category.name !== "Semua")
-  .slice(0, 6)
-
-const latestProducts = computed(() => {
-  return [...products.value]
-    .sort((a, b) => {
-      const dateA = new Date(a.created_at || 0).getTime()
-      const dateB = new Date(b.created_at || 0).getTime()
-
-      if (dateA !== dateB) return dateB - dateA
-      return Number(b.id) - Number(a.id)
-    })
-    .slice(0, 4)
-})
-
-const iconMap = {
-  Boxes,
-  Laptop,
-  PcCase,
-  Monitor,
-  Keyboard,
-  Router,
-  Network,
-  Server,
-  Wifi
-}
 
 function toggleSave(id) {
   if (saved.value.includes(id)) {
-    saved.value = saved.value.filter((item) => item !== id)
+    saved.value = saved.value.filter((item) => item !== id);
   } else {
-    saved.value.push(id)
+    saved.value.push(id);
   }
-
+  setSavedProducts(saved.value);
-  setSavedProducts(saved.value)
 }
-
-async function loadLatestProducts() {
-  try {
-    const data = await fetchProducts()
-    products.value = data.products?.length ? data.products : defaultProducts
-  } catch {
-    products.value = defaultProducts
-  }
-}
-
-onMounted(loadLatestProducts)
 </script>

src/views/LoginView.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="container-page grid min-h-[70vh] place-items-center py-10">
     <div class="card w-full max-w-md p-6">
-      <h1 class="text-2xl font-extrabold">Selamat Datang Kembali!</h1>
+      <h1 class="text-2xl font-extrabold">Login</h1>
-      <p class="mt-2 text-sm text-slate-600">Masuk dan lanjutkan jualanmu.</p>
+      <p class="mt-2 text-sm text-slate-600">Masuk untuk mengelola barang jualanmu.</p>
 
       <form class="mt-6 grid gap-4" @submit.prevent="login">
         <p v-if="errorMessage" class="rounded-xl bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
@@ -17,10 +17,6 @@
           <input v-model="password" type="password" class="input mt-2" placeholder="••••••••" required />
         </div>
         <button class="btn-primary w-full" :disabled="loading">
-            <svg v-if="loading" class="mr-3 h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
           {{ loading ? "Memproses..." : "Masuk" }}
         </button>
       </form>

src/views/ProductDetailView.vue

@@ -8,63 +8,31 @@
       <h1 class="text-2xl font-extrabold">Memuat produk...</h1>
     </div>
 
-    <div v-else-if="product" class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(380px,520px)]">
+    <div v-else-if="product" class="grid gap-8 lg:grid-cols-2">
-      <div class="grid items-start gap-4 sm:grid-cols-[88px_minmax(0,1fr)]">
+      <div class="card overflow-hidden">
-        <div class="order-2 flex gap-3 overflow-x-auto sm:order-1 sm:grid sm:content-start sm:max-h-[78vh] sm:overflow-y-auto">
+        <img :src="getProductImageUrl(product.image)" :alt="product.title" class="aspect-[4/3] w-full object-cover" />
-          <button
-            v-for="(image, index) in productImages"
-            :key="`${image}-${index}`"
-            type="button"
-            class="h-20 w-20 shrink-0 overflow-hidden rounded-xl border-2 bg-white"
-            :class="selectedImage === image ? 'border-brand-600' : 'border-slate-200'"
-            @click="selectedImage = image"
-          >
-            <img
-              :src="getProductImageUrl(image)"
-              :alt="`${product.title} ${index + 1}`"
-              class="h-full w-full object-cover"
-            />
-          </button>
-        </div>
-
-        <div class="order-1 sm:order-2">
-          <img
-            :src="getProductImageUrl(selectedImage)"
-            :alt="product.title"
-            class="block h-auto max-h-[78vh] w-auto max-w-full rounded-2xl object-contain shadow-sm"
-          />
-        </div>
       </div>
 
       <div>
         <span class="rounded-full bg-brand-50 px-3 py-1 text-sm font-bold text-brand-700">
           {{ product.category }}
         </span>
-
+        <h1 class="mt-4 text-3xl font-extrabold text-slate-950">{{ product.title }}</h1>
-        <h1 class="mt-4 text-3xl font-extrabold text-slate-950">
+        <p class="mt-3 text-3xl font-extrabold text-brand-700">{{ formatRupiah(product.price) }}</p>
-          {{ product.title }}
-        </h1>
-
-        <p class="mt-3 text-3xl font-extrabold text-brand-700">
-          {{ formatRupiah(product.price) }}
-        </p>
 
         <div class="mt-6 grid gap-3 sm:grid-cols-2">
           <div class="card p-4">
             <p class="text-xs font-bold uppercase text-slate-500">Kondisi</p>
             <p class="mt-1 font-bold">{{ product.condition }}</p>
           </div>
-
           <div class="card p-4">
             <p class="text-xs font-bold uppercase text-slate-500">Lokasi</p>
             <p class="mt-1 font-bold">{{ product.location }}</p>
           </div>
-
           <div class="card p-4">
             <p class="text-xs font-bold uppercase text-slate-500">Penjual</p>
             <p class="mt-1 font-bold">{{ product.seller }}</p>
           </div>
-
           <div class="card p-4">
             <p class="text-xs font-bold uppercase text-slate-500">WhatsApp</p>
             <p class="mt-1 font-bold">{{ product.whatsapp }}</p>
@@ -73,16 +41,11 @@
 
         <div class="mt-6">
           <h2 class="text-lg font-extrabold">Deskripsi</h2>
-          <p class="mt-2 leading-7 text-slate-600">
+          <p class="mt-2 leading-7 text-slate-600">{{ product.description }}</p>
-            {{ product.description }}
-          </p>
         </div>
 
         <div class="mt-8 flex flex-wrap gap-3">
-          <a :href="waLink" target="_blank" class="btn-primary">
+          <a :href="waLink" target="_blank" class="btn-WA">Hubungi via WhatsApp</a>
-            Hubungi via WhatsApp
-          </a>
-
           <button class="btn-secondary" @click="toggleSave">
             {{ saved ? "Hapus dari Tersimpan" : "Simpan Barang" }}
           </button>
@@ -92,65 +55,28 @@
 
     <div v-else class="card p-10 text-center">
       <h1 class="text-2xl font-extrabold">Produk tidak ditemukan</h1>
-      <RouterLink to="/marketplace" class="btn-primary mt-5">
+      <RouterLink to="/marketplace" class="btn-primary mt-5">Lihat Marketplace</RouterLink>
-        Lihat Marketplace
-      </RouterLink>
     </div>
   </section>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { useRoute } from "vue-router"
 import { products as defaultProducts } from "../data/products"
-import {
+import { fetchProduct, formatRupiah, getProductImageUrl, getSavedProducts, setSavedProducts } from "../utils"
-  fetchProduct,
-  formatRupiah,
-  getProductImageUrl,
-  getSavedProducts,
-  setSavedProducts
-} from "../utils"
 
 const route = useRoute()
 const id = Number(route.params.id)
-
 const product = ref(null)
 const loading = ref(true)
-const selectedImage = ref("")
-
-const productImages = computed(() => {
-  if (!product.value) return []
-
-  const images = product.value.images?.length
-    ? product.value.images
-    : [product.value.image]
-
-  return [...new Set(images.filter(Boolean))]
-})
-
-watch(
-  productImages,
-  (images) => {
-    if (!images.includes(selectedImage.value)) {
-      selectedImage.value = images[0] || ""
-    }
-  },
-  { immediate: true }
-)
 
 const savedIds = ref(getSavedProducts())
-
+const saved = computed(() => savedIds.value.includes(id))
-const saved = computed(() => {
-  return savedIds.value.includes(id)
-})
 
 const waLink = computed(() => {
   if (!product.value) return "#"
-
+  const text = encodeURIComponent(`Halo, saya tertarik dengan ${product.value.title} di SecondTech Market.`)
-  const text = encodeURIComponent(
-    `Halo, saya tertarik dengan ${product.value.title} di SecondTech Market.`
-  )
-
   return `https://wa.me/${product.value.whatsapp}?text=${text}`
 })
 
@@ -160,22 +86,16 @@ function toggleSave() {
   } else {
     savedIds.value.push(id)
   }
-
   setSavedProducts(savedIds.value)
 }
 
 async function loadProduct() {
   loading.value = true
-
   try {
     const data = await fetchProduct(id)
     product.value = data.product
   } catch {
-    const fallbackProduct = defaultProducts.find((item) => Number(item.id) === id) || null
+    product.value = defaultProducts.find((item) => Number(item.id) === id) || null
-
-    product.value = fallbackProduct
-      ? { ...fallbackProduct, images: [fallbackProduct.image] }
-      : null
   } finally {
     loading.value = false
   }

src/views/RegisterView.vue

@@ -25,10 +25,6 @@
           <input v-model="form.password" type="password" class="input mt-2" placeholder="••••••••" required />
         </div>
         <button class="btn-primary w-full" :disabled="loading">
-            <svg v-if="loading" class="mr-3 h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-             </svg>
           {{ loading ? "Memproses..." : "Daftar" }}
         </button>
       </form>

src/views/SellProductView.vue

@@ -2,7 +2,7 @@
   <section class="container-page py-10">
     <div class="mb-8">
       <h1 class="text-3xl font-extrabold">Jual Barang</h1>
-      <p class="mt-2 text-slate-600">Posting barang ke marketplace dengan beberapa foto asli dari perangkatmu.</p>
+      <p class="mt-2 text-slate-600">Posting barang ke marketplace dengan foto asli dari perangkatmu.</p>
     </div>
 
     <div class="grid gap-8 lg:grid-cols-[1fr_360px]">
@@ -19,7 +19,7 @@
         <div class="grid gap-5 sm:grid-cols-2">
           <div>
             <label class="label">Kategori</label>
-            <select v-model="form.category" class="input mt-2" required>
+            <select v-model="form.category" class="input mt-2">
               <option v-for="cat in realCategories" :key="cat" :value="cat">{{ cat }}</option>
             </select>
           </div>
@@ -58,32 +58,9 @@
 
         <div>
           <label class="label">Foto Barang</label>
-          <input
+          <input type="file" accept="image/*" class="input mt-2" required @change="handleImageChange" />
-            ref="fileInput"
+          <img v-if="previewUrl" :src="previewUrl" alt="Preview foto barang" class="mt-4 aspect-[4/3] w-full max-w-sm rounded-xl object-cover" />
-            type="file"
+          <p class="mt-2 text-xs text-slate-500">Upload JPG, PNG, atau WebP. Maksimal 3MB.</p>
-            accept="image/*"
-            multiple
-            class="input mt-2"
-            @change="handleImageChange"
-          />
-
-          <div v-if="selectedImages.length" class="mt-3 flex items-center justify-between gap-3 rounded-xl bg-brand-50 px-4 py-3 text-sm font-bold text-brand-700">
-            <span>{{ selectedImages.length }} foto dipilih</span>
-            <button type="button" class="text-red-700" @click="clearImages">Hapus semua</button>
-          </div>
-
-          <div v-if="previewUrls.length" class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
-            <div v-for="(preview, index) in previewUrls" :key="preview.url" class="overflow-hidden rounded-xl border border-slate-200">
-              <img :src="preview.url" :alt="`Preview foto barang ${index + 1}`" class="aspect-[4/3] w-full object-cover" />
-              <button type="button" class="w-full bg-red-50 px-3 py-2 text-xs font-bold text-red-700" @click="removeImage(index)">
-                Hapus foto
-              </button>
-            </div>
-          </div>
-
-          <p class="mt-2 text-xs text-slate-500">
-            Maksimal 6 foto, 10 MB per foto. Kamu boleh pilih beberapa sekaligus atau tambah satu per satu.
-          </p>
         </div>
 
         <div>
@@ -99,10 +76,10 @@
       <div class="card h-fit p-6">
         <h2 class="text-lg font-extrabold">Tips Isi Produk</h2>
         <ul class="mt-4 grid gap-3 text-sm leading-6 text-slate-600">
-          <li>- Pakai judul yang jelas, misal "MikroTik RB941 Bekas Normal".</li>
+          <li>• Pakai judul yang jelas, misal “MikroTik RB941 Bekas Normal”.</li>
-          <li>- Jelaskan minus barang kalau ada.</li>
+          <li>• Jelaskan minus barang kalau ada.</li>
-          <li>- Pakai nomor WhatsApp aktif.</li>
+          <li>• Pakai nomor WhatsApp aktif.</li>
-          <li>- Upload beberapa foto dari sisi yang berbeda.</li>
+          <li>• Pakai foto yang terang dan jelas.</li>
         </ul>
       </div>
     </div>
@@ -117,10 +94,6 @@ import { createProduct, getCurrentUser } from "../utils"
 
 const router = useRouter()
 const realCategories = computed(() => categories.filter((cat) => cat !== "Semua"))
-const fileInput = ref(null)
-const MAX_IMAGES = 6
-const MAX_IMAGE_SIZE_MB = 10
-const MAX_IMAGE_SIZE = MAX_IMAGE_SIZE_MB * 1024 * 1024
 
 const form = reactive({
   title: "",
@@ -132,8 +105,8 @@ const form = reactive({
   whatsapp: "",
   description: ""
 })
-const selectedImages = ref([])
+const selectedImage = ref(null)
-const previewUrls = ref([])
+const previewUrl = ref("")
 const loading = ref(false)
 const errorMessage = ref("")
 
@@ -143,55 +116,15 @@ if (currentUser) {
   form.whatsapp = currentUser.whatsapp || ""
 }
 
-function imageKey(file) {
-  return `${file.name}-${file.size}-${file.lastModified}`
-}
-
-function rebuildPreviews() {
-  previewUrls.value.forEach((preview) => URL.revokeObjectURL(preview.url))
-  previewUrls.value = selectedImages.value.map((file) => ({
-    key: imageKey(file),
-    url: URL.createObjectURL(file)
-  }))
-}
-
 function handleImageChange(event) {
-  const incomingFiles = Array.from(event.target.files || [])
+  const file = event.target.files?.[0]
-  const oversizedFile = incomingFiles.find((file) => file.size > MAX_IMAGE_SIZE)
+  selectedImage.value = file || null
-
+  previewUrl.value = file ? URL.createObjectURL(file) : ""
-  if (oversizedFile) {
-    errorMessage.value = `Foto "${oversizedFile.name}" lebih dari ${MAX_IMAGE_SIZE_MB} MB. Pilih foto yang lebih kecil.`
-    event.target.value = ""
-    return
-  }
-
-  const merged = [...selectedImages.value]
-  incomingFiles.forEach((file) => {
-    if (!merged.some((item) => imageKey(item) === imageKey(file)) && merged.length < MAX_IMAGES) {
-      merged.push(file)
-    }
-  })
-
-  selectedImages.value = merged
-  rebuildPreviews()
-  errorMessage.value = ""
-  event.target.value = ""
-}
-
-function removeImage(index) {
-  selectedImages.value = selectedImages.value.filter((_, itemIndex) => itemIndex !== index)
-  rebuildPreviews()
-}
-
-function clearImages() {
-  selectedImages.value = []
-  rebuildPreviews()
-  if (fileInput.value) fileInput.value.value = ""
 }
 
 async function submitProduct() {
-  if (!selectedImages.value.length) {
+  if (!selectedImage.value) {
-    errorMessage.value = "Minimal 1 foto barang wajib diupload."
+    errorMessage.value = "Foto barang wajib diupload."
     return
   }
 
@@ -202,9 +135,7 @@ async function submitProduct() {
   Object.entries(form).forEach(([key, value]) => {
     payload.append(key, value)
   })
-  selectedImages.value.forEach((image) => {
+  payload.append("image", selectedImage.value)
-    payload.append("images", image)
-  })
 
   try {
     await createProduct(payload)

tailwind.config.js

@@ -1,6 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: "class",
   content: [
     "./index.html",
     "./src/**/*.{vue,js}"
@@ -24,4 +23,3 @@ export default {
   },
   plugins: []
 }
-