{"id":29202561,"url":"https://github.com/ifwhy/mitra-service-front-end-web","last_synced_at":"2025-07-02T13:30:24.683Z","repository":{"id":300143972,"uuid":"948232560","full_name":"ifwhy/mitra-service-front-end-web","owner":"ifwhy","description":"Repositori ini berisi bagian front end untuk web Mitra Service Elektronik","archived":false,"fork":false,"pushed_at":"2025-06-20T03:48:15.000Z","size":4578,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-20T04:33:55.216Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mitra-service-nine.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ifwhy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-14T01:08:39.000Z","updated_at":"2025-06-20T03:48:18.000Z","dependencies_parsed_at":"2025-06-20T04:44:09.098Z","dependency_job_id":null,"html_url":"https://github.com/ifwhy/mitra-service-front-end-web","commit_stats":null,"previous_names":["ifwhy/mitra-service-front-end-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ifwhy/mitra-service-front-end-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifwhy%2Fmitra-service-front-end-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifwhy%2Fmitra-service-front-end-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifwhy%2Fmitra-service-front-end-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifwhy%2Fmitra-service-front-end-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ifwhy","download_url":"https://codeload.github.com/ifwhy/mitra-service-front-end-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifwhy%2Fmitra-service-front-end-web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263148106,"owners_count":23421112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-02T13:30:22.271Z","updated_at":"2025-07-02T13:30:24.661Z","avatar_url":"https://github.com/ifwhy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🔧 Mitra Servis - Platform Servis Elektronika\n\n### _Platform digital modern untuk layanan perbaikan elektronik dengan sistem manajemen pesanan terintegrasi_\n\n\u003cbr\u003e\n\n\u003c!-- Large Professional Illustration --\u003e\n\u003cimg src=\"./public/images/presentation.png\" alt=\"Electronic Repair Service\" width=\"100%\" style=\"border-radius: 15px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);\"\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n### 🛠️ **Tech Stack**\n\n\u003c!-- Core Technologies --\u003e\n\n![Next.js](https://img.shields.io/badge/Next.js_15-000000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![React](https://img.shields.io/badge/React_19-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\n\u003c!-- Backend \u0026 Auth --\u003e\n\n![Sanity](https://img.shields.io/badge/Sanity_CMS-F03E2F?style=for-the-badge\u0026logo=sanity\u0026logoColor=white)\n![Clerk](https://img.shields.io/badge/Clerk_Auth-6C47FF?style=for-the-badge\u0026logo=clerk\u0026logoColor=white)\n![GROQ](https://img.shields.io/badge/GROQ_Query-F03E2F?style=for-the-badge\u0026logo=sanity\u0026logoColor=white)\n\n\u003c!-- Tools \u0026 Deployment --\u003e\n\n![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)\n![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\n![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge\u0026logo=eslint\u0026logoColor=white)\n![Lucide](https://img.shields.io/badge/Lucide_Icons-000000?style=for-the-badge\u0026logo=lucide\u0026logoColor=white)\n\n\u003cbr\u003e\n\n\u003c!-- Action Buttons with Gradient Colors --\u003e\n\n[![🚀 Live Demo](https://img.shields.io/badge/🚀_Live_Demo-667eea?style=for-the-badge\u0026logoColor=white)](https://mitra-servis.vercel.app)\n[![📖 Documentation](https://img.shields.io/badge/📖_Documentation-f093fb?style=for-the-badge\u0026logoColor=white)](#-cara-menjalankan)\n[![⭐ GitHub Stars](https://img.shields.io/github/stars/ifwhy/mitra-service-front-end-web?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/ifwhy/mitra-service-front-end-web)\n\n\u003c/div\u003e\n\n---\n\n## 📋 **Daftar Isi**\n\n- [🎯 Tentang Proyek](#-tentang-proyek)\n- [✨ Fitur Utama](#-fitur-utama)\n- [👥 Tim Pengembang](#-tim-pengembang)\n- [🏗️ Arsitektur](#️-arsitektur)\n- [📁 Struktur Proyek](#-struktur-proyek)\n- [🚀 Cara Menjalankan](#-cara-menjalankan)\n- [🔧 Konfigurasi Environment](#-konfigurasi-environment)\n- [🔗 Repository Links](#-repository-links)\n- [📝 Catatan Pengembangan](#-catatan-pengembangan)\n- [🤝 Kontribusi](#-kontribusi)\n- [📄 License](#-license)\n\n---\n\n## 🎯 **Tentang Proyek**\n\n**Mitra Service** adalah platform digital modern untuk layanan perbaikan elektronik yang memungkinkan pelanggan untuk:\n\n- 🛠️ Memesan layanan perbaikan secara online\n- 📊 Melacak status perbaikan real-time\n- 💬 Berkomunikasi dengan teknisi\n- 📸 Upload foto kondisi perangkat\n- 🚚 Memilih opsi pickup atau delivery\n- 💳 Manajemen pembayaran yang transparan\n\n---\n\n## ✨ **Fitur Utama**\n\n\u003cdiv align=\"center\"\u003e\n\n|     🔐 **Autentikasi**      | 📋 **Manajemen Pesanan**  |     🔍 **Tracking**     |\n| :-------------------------: | :-----------------------: | :---------------------: |\n| Login/Register dengan Clerk | Dashboard pesanan lengkap | Real-time status update |\n|     Profile management      | Form pemesanan interaktif |   Timeline perbaikan    |\n|      Role-based access      |    Upload foto kondisi    |   Notifikasi progress   |\n\n|   📱 **Responsive**   |     🎨 **UI/UX**     | ⚡ **Performance** |\n| :-------------------: | :------------------: | :----------------: |\n|  Mobile-first design  | Modern glassmorphism |  Optimized images  |\n| Cross-browser support |   Dark/Light mode    |  Fast page loads   |\n|    Touch-friendly     |  Smooth animations   |   SEO optimized    |\n\n\u003c/div\u003e\n\n---\n\n## 👥 **Tim Pengembang**\n\n\u003cdiv align=\"center\"\u003e\n\n|   ![Dunhill](https://github.com/williamu04.png?size=80)    |  ![Fathoni](https://github.com/Fathoni1509.png?size=80)  |   ![Ivan](https://github.com/ifwhy.png?size=80)    |\n| :--------------------------------------------------------: | :------------------------------------------------------: | :------------------------------------------------: |\n| **[Dunhill William Putra](https://github.com/williamu04)** | **[Fathoni Nur Habibi](https://github.com/Fathoni1509)** | **[Ivan Wahyu Nugroho](https://github.com/ifwhy)** |\n|                       Backend \u0026 CMS                        |                     Frontend \u0026 UI/UX                     |               Frontend \u0026 Integration               |\n|                   _Sanity Schema Design_                   |                 _Component Development_                  |                 _API Integration_                  |\n\n\u003c/div\u003e\n\n---\n\n## 🏗️ **Arsitektur**\n\n\u003cdiv align=\"center\"\u003e\n\n```mermaid\ngraph TB\n    A[👤 User] --\u003e B[🌐 Next.js Frontend]\n    B --\u003e C[🔐 Clerk Auth]\n    B --\u003e D[📊 Sanity CMS]\n    D --\u003e E[📝 Content Management]\n    D --\u003e F[🗄️ Database]\n    B --\u003e G[🎨 Tailwind CSS]\n    B --\u003e H[📱 Responsive UI]\n```\n\n\u003c/div\u003e\n\n---\n\n## 📁 **Struktur Proyek**\n\n\u003cdiv align=\"center\"\u003e\n\n### 🎨 Frontend (Next.js)\n\n\u003c/div\u003e\n\n```\n📦 frontend/\n├── 🎯 app/\n│   ├── 🏠 (root)/\n│   │   ├── 📄 page.tsx              # Landing page\n│   │   └── 🎨 layout.tsx            # Root layout\n│   │\n│   ├── 📊 dashboard/\n│   │   ├── 📋 orders/[id]/\n│   │   │   └── 📄 page.tsx          # Order detail page\n│   │   ├── 📄 page.tsx              # Dashboard home\n│   │   ├── ⏳ loading.tsx           # Loading state\n│   │   └── 🎨 layout.tsx            # Dashboard layout\n│   │\n│   ├── 🎨 layout.tsx                # App layout\n│   ├── ❌ not-found.tsx             # 404 page\n│   └── ⏳ loading.tsx               # Global loading\n│\n├── 🧩 components/\n│   ├── 📊 dashboard/\n│   │   ├── 📋 OrdersTab.tsx         # Orders management\n│   │   ├── ➕ NewOrderTab.tsx       # Create new order\n│   │   ├── 🔔 NotificationsTab.tsx  # Notifications\n│   │   └── 👤 ProfileTab.tsx        # User profile\n│   │\n│   ├── 🎨 ui/                       # Reusable UI components\n│   └── 🏠 home/                     # Landing page components\n│\n├── 🔧 lib/\n│   ├── 🗃️ sanity-utils.ts          # Sanity utilities\n│   ├── 🔍 queries.ts               # GROQ queries\n│   └── ⚙️ utils.ts                 # Helper functions\n│\n├── 📱 sanity/\n│   └── 🔗 client.ts                # Sanity client config\n│\n├── 🖼️ public/\n│   └── 📸 images/                   # Static assets\n│\n└── 🔐 .env                         # Environment variables\n```\n\n\u003cdiv align=\"center\"\u003e\n\n### 🗄️ Backend (Sanity CMS)\n\n\u003c/div\u003e\n\n```\n📦 backend/\n├── 📋 schemaTypes/\n│   ├── 🧩 objects/\n│   │   ├── 📝 note.ts               # Repair notes\n│   │   ├── 🖼️ repairImage.ts        # Image uploads\n│   │   ├── 🔧 repairService.ts      # Service details\n│   │   ├── ⏰ timelineEvent.ts      # Progress timeline\n│   │   ├── 🛡️ warranty.ts          # Warranty info\n│   │   └── 💰 pricing.ts           # Pricing structure\n│   │\n│   ├── 👤 customer.ts               # Customer schema\n│   ├── 🔧 repair.ts                 # Repair order schema\n│   ├── ⭐ review.ts                 # Review schema\n│   ├── 🛠️ technician.ts            # Technician schema\n│   ├── 🚚 pickup.ts                 # Pickup service schema\n│   ├── 💳 payment.ts               # Payment schema\n│   └── 📄 index.ts                 # Schema exports\n│\n├── ⚙️ sanity.config.ts              # Sanity configuration\n├── 🔐 sanity.cli.ts                # CLI configuration\n└── 🔒 .env                         # Environment variables\n```\n\n---\n\n## 🚀 **Cara Menjalankan**\n\n### 📋 Prerequisites\n\n- **Node.js** 18.0 atau lebih tinggi\n- **npm** atau **yarn** package manager\n- **Git** version control\n\n### 🎨 Frontend Setup\n\n```bash\n# 1️⃣ Clone repository\ngit clone https://github.com/ifwhy/mitra-service-front-end-web.git\ncd mitra-service-front-end-web\n\n# 2️⃣ Install dependencies\nnpm install\n# atau\nyarn install\n\n# 3️⃣ Setup environment variables\ncp .env.example .env.local\n# Edit .env.local dengan konfigurasi Anda\n\n# 4️⃣ Jalankan development server\nnpm run dev\n# atau\nyarn dev\n\n# 🌐 Buka browser: http://localhost:3000\n```\n\n### 🗄️ Backend Setup (Sanity CMS)\n\n```bash\n# 1️⃣ Clone repository\ngit clone https://github.com/williamu04/mitra-service-backend.git\ncd mitra-service-backend\n\n# 2️⃣ Install Sanity CLI (global)\nnpm install -g @sanity/cli\n\n# 3️⃣ Install dependencies\nnpm install\n\n# 4️⃣ Login ke Sanity\nsanity login\n\n# 5️⃣ Deploy schema\nsanity deploy\n\n# 6️⃣ Jalankan Sanity Studio (opsional)\nsanity dev\n\n# 🌐 Studio tersedia di: http://localhost:3333\n```\n\n---\n\n## 🔧 **Konfigurasi Environment**\n\n### Frontend (.env.local)\n\n```bash\n# 🔐 Clerk Authentication\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxx\nCLERK_SECRET_KEY=sk_test_xxxxx\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up\nNEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/\nNEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/\n\n# 🗄️ Sanity Configuration\nNEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id\nNEXT_PUBLIC_SANITY_DATASET=production\nSANITY_API_TOKEN=your_api_token_with_write_permissions\n```\n\n### Backend (.env)\n\n```bash\n# 🗄️ Sanity Project Configuration\nSANITY_STUDIO_PROJECT_ID=your_project_id\nSANITY_STUDIO_DATASET=production\nSANITY_STUDIO_API_VERSION=2024-01-01\n```\n\n---\n\n## 🔗 **Repository Links**\n\n\u003cdiv align=\"center\"\u003e\n\n|    Repository    |                                                                             Link                                                                              |     Description     |\n| :--------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------: |\n| 🎨 **Frontend**  | [![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/ifwhy/mitra-service-front-end-web) | Next.js Application |\n|  🗄️ **Backend**  | [![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/williamu04/mitra-service-backend)  |     Sanity CMS      |\n| 🚀 **Live Demo** |           [![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)](https://mitra-servis.vercel.app)            |   Production App    |\n\n\u003c/div\u003e\n\n---\n\n## 📝 **Catatan Pengembangan**\n\n### 🏗️ Keputusan Arsitektur\n\n- **Next.js 14**: Menggunakan App Router untuk better performance dan SEO\n- **Sanity CMS**: Headless CMS untuk fleksibilitas content management\n- **Clerk**: Authentication service untuk security \u0026 user management\n- **Tailwind CSS**: Utility-first CSS untuk rapid development\n- **TypeScript**: Type safety dan better developer experience\n\n### 🔍 GROQ Queries\n\n```javascript\n// Contoh query untuk mengambil pesanan berdasarkan customer\n*[_type == \"repair\" \u0026\u0026 customer == $customerId] | order(dateCreated desc) {\n  _id,\n  orderId,\n  device,\n  brand,\n  model,\n  issue,\n  status,\n  technician-\u003e{\n    name,\n    specialization\n  },\n  images[]{\n    asset-\u003e{\n      _id,\n      url\n    },\n    alt\n  }\n}\n```\n\n### 🎨 Component Structure\n\n- **Atomic Design**: Components dibagi menjadi atoms, molecules, organisms\n- **Server Components**: Menggunakan React Server Components untuk better performance\n- **Client Components**: Hanya untuk interaktivity yang diperlukan\n- **Custom Hooks**: Reusable logic dengan hooks seperti `use-mobile`\n\n### 🛠️ Development Workflow\n\n1. **Schema Design**: Desain schema di Sanity Studio\n2. **Component Development**: Buat komponen UI yang reusable\n3. **API Integration**: Integrasikan dengan Sanity menggunakan GROQ\n4. **Authentication**: Implementasi auth flow dengan Clerk\n5. **Testing**: Manual testing untuk semua user flows\n\n---\n\n## 🤝 **Kontribusi**\n\nKami welcome kontribusi! Silakan ikuti langkah berikut:\n\n1. 🍴 **Fork** repository ini\n2. 🌿 Buat **feature branch** (`git checkout -b feature/amazing-feature`)\n3. 💾 **Commit** perubahan Anda (`git commit -m 'Add some amazing feature'`)\n4. 📤 **Push** ke branch (`git push origin feature/amazing-feature`)\n5. 🔀 Buat **Pull Request**\n\n### 📋 Guidelines\n\n- Gunakan conventional commits untuk pesan commit\n- Pastikan code mengikuti ESLint rules\n- Tambahkan tests untuk fitur baru\n- Update dokumentasi jika diperlukan\n\n---\n\n## 📄 **License**\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n### **🌟 Dibuat dengan ❤️ oleh Tim Mitra Service**\n\n[![GitHub stars](https://img.shields.io/github/stars/ifwhy/mitra-service-front-end-web?style=social)](https://github.com/ifwhy/mitra-service-front-end-web)\n[![GitHub forks](https://img.shields.io/github/forks/ifwhy/mitra-service-front-end-web?style=social)](https://github.com/ifwhy/mitra-service-front-end-web)\n[![GitHub watchers](https://img.shields.io/github/watchers/ifwhy/mitra-service-front-end-web?style=social)](https://github.com/ifwhy/mitra-service-front-end-web)\n\n---\n\n_\"Solusi perbaikan elektronik terpercaya di era digital\"_\n\n[⬆️ **Kembali ke atas**](#-mitra-service---electronic-repair-platform)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fifwhy%2Fmitra-service-front-end-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fifwhy%2Fmitra-service-front-end-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fifwhy%2Fmitra-service-front-end-web/lists"}