initial commit
This commit is contained in:
@@ -0,0 +1,544 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor CMS — Clinic Management System .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Blazor CMS: Complete Clinic Management System source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor CMS, Clinic Management System, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-cms.html" />
|
||||
<meta property="og:title" content="Blazor CMS — Clinic Management System .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-cms.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/cms-clinic-management-system-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor CMS — .NET 10 Clinic Management System Source Code" />
|
||||
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/cms-clinic-management-system-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<!-- Structured Data: SoftwareApplication + Product -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor CMS",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Clinic Management System system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
|
||||
"url": "https://www.indotalent.com/products/blazor-cms.html",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Indotalent",
|
||||
"url": "https://www.indotalent.com"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "21.00",
|
||||
"priceCurrency": "USD",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"priceValidUntil": "2027-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"reviewCount": "150"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor CMS", "item": "https://www.indotalent.com/products/blazor-cms.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does CMS include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor CMS includes patient management, patient group categorization, medical records, appointment booking and scheduling, sales orders and billing, purchase and inventory management, dashboard with clinical KPIs, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor CMS include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor CMS exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all patient, medical record, appointment, sales, and purchase operations." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize Blazor CMS for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom medical workflows, integrate lab systems, and deploy for clinics. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What database does Blazor CMS use?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor CMS includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 · Blazor Server · VSA · MudBlazor</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">Clinic Management System — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready clinic management application to manage patients, medical records, appointments, and billing. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/03b79781-4174-4390-a852-f5b03b8e60bf?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-cms.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/cms-clinic-management-system-01.png" alt="Blazor CMS Dashboard — Clinic Management System .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUSINESS PROBLEM -->
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Clinics and medical practices struggle with fragmented patient records, manual appointment scheduling, and disconnected billing — leading to errors, delays, and poor patient care.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Scattered Patient Records</h3>
|
||||
<p class="text-sm text-gray-500">Patient information is scattered across paper files, spreadsheets, and disconnected systems. <strong>Blazor CMS centralizes all patient data</strong> — demographics, medical history, prescriptions, and visit records — in one searchable system with complete audit trail.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Appointment & Scheduling</h3>
|
||||
<p class="text-sm text-gray-500">Paper-based appointment booking causes double bookings, no-shows, and administrative chaos. <strong>Blazor CMS includes a booking module</strong> with resource scheduling, availability management, and appointment tracking to keep your clinic running smoothly.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Medical Records & Billing</h3>
|
||||
<p class="text-sm text-gray-500">Medical records, prescriptions, and billing are often managed in separate systems causing data mismatch. <strong>Blazor CMS integrates medical records</strong> with sales orders, invoices, and payments — one system for clinical and financial operations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Clinical Analytics</h3>
|
||||
<p class="text-sm text-gray-500">Without dashboards, clinic owners cannot track patient volume, revenue, commission, or inventory usage. <strong>Blazor CMS includes KPI dashboards</strong> with charts and reports showing key clinical and financial metrics.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor CMS</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Patient Group, Patient Category, Patient, Patient Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Organization</h4><p class="text-xs text-gray-500">Employee, Employee Group, Employee Category</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Medical</h4><p class="text-xs text-gray-500">Medical Record, Medical Record Group, Medical Record Category</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Sales Order, Sales Group, Invoice, Payment, Sales Report, Commission Report, Invoice Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Purchase Order, Bill, Payment, Purchase Report, Bill Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, To-Do List</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-green-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CMS is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHITECTURE -->
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CMS uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Patients/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
|
||||
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorCMS/
|
||||
├── Features/ # Vertical Slices (one folder per feature)
|
||||
│ ├── Patients/
|
||||
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
|
||||
│ │ ├── GetContactById/
|
||||
│ │ ├── GetContactList/
|
||||
│ │ ├── UpdateContact/
|
||||
│ │ └── DeleteContact/
|
||||
│ ├── Doctors/
|
||||
│ ├── Appointments/
|
||||
│ ├── Prescriptions/
|
||||
│ ├── Billing/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
|
||||
├── Migrations/ # EF Core migrations
|
||||
├── SeedData/ # Initial seed data (demo users, sample data)
|
||||
├── Components/ # Shared Blazor components
|
||||
├── wwwroot/ # Static assets
|
||||
└── Program.cs # Single entry point with full configuration</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECURITY -->
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor CMS ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REST API -->
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CMS exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE & DEPLOYMENT -->
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCREENSHOTS -->
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
|
||||
<p class="text-gray-500 mt-2">Explore the Blazor CMS interface — dashboards, data management, workflow management, and more.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/cms-clinic-management-system-01.png" alt="Blazor CMS Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/cms-clinic-management-system-02.png" alt="Blazor CMS Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/cms-clinic-management-system-03.png" alt="Blazor CMS Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/cms-clinic-management-system-04.png" alt="Blazor CMS Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/cms-clinic-management-system-05.png" alt="Blazor CMS Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/cms-clinic-management-system-06.png" alt="Blazor CMS Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIVE DEMO -->
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-cms.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-cms.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY CTA -->
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor CMS Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/03b79781-4174-4390-a852-f5b03b8e60bf?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor CMS?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor CMS application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor CMS use?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor CMS uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,546 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor CRM Multi-Tenant — SaaS CRM with Multi-Tenancy .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Blazor CRM Multi-Tenant: Complete SaaS CRM with Multi-Tenancy source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Tenant isolation, contact management, sales pipeline, lead tracking. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor CRM Multi-Tenant, SaaS CRM, Multi-Tenant CRM, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core SaaS" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-crm-multitenant.html" />
|
||||
<meta property="og:title" content="Blazor CRM Multi-Tenant — SaaS CRM with Multi-Tenancy .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete SaaS CRM source code with multi-tenancy: .NET 10, Blazor Server, MudBlazor, VSA. Tenant isolation, contacts, pipeline, leads. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-crm-multitenant.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/crm-multi-tenant-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor CRM Multi-Tenant — .NET 10 SaaS CRM with Multi-Tenancy Source Code" />
|
||||
<meta name="twitter:description" content="Complete SaaS CRM source code with multi-tenancy. Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/crm-multi-tenant-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<!-- Structured Data: SoftwareApplication + Product -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor CRM Multi-Tenant",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Multi-tenant SaaS CRM application built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with tenant isolation, contact management, sales pipeline, lead tracking, and reporting dashboards.",
|
||||
"url": "https://www.indotalent.com/products/blazor-crm-multitenant.html",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Indotalent",
|
||||
"url": "https://www.indotalent.com"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "21.00",
|
||||
"priceCurrency": "USD",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"priceValidUntil": "2027-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"reviewCount": "150"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor CRM Multi-Tenant", "item": "https://www.indotalent.com/products/blazor-crm-multitenant.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does Blazor CRM Multi-Tenant include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor CRM Multi-Tenant includes tenant management with complete data isolation, contact management, company/organization management, sales pipeline with deal stages, lead tracking and conversion, activity logging, communication history, dashboard with KPIs and charts, reporting, and full audit trail. Multiple tenants share one database with guaranteed data separation. All features are built with .NET 10, Blazor Server, MudBlazor, and VSA." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "How does multi-tenancy work in this CRM?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "The multi-tenant architecture uses a single database with tenant isolation via TenantId on every entity. Each tenant sees only their own contacts, companies, deals, and data. Global query filters in EF Core automatically apply tenant filtering. Administrators can manage tenants, while tenant users have complete isolation — no data leakage between tenants. Perfect for SaaS businesses serving multiple organizations." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor CRM Multi-Tenant include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor CRM Multi-Tenant exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes for all CRUD operations on tenants, contacts, companies, deals, and activities." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize the multi-tenant CRM for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom fields, modify workflows, integrate with third-party services, and deploy as a SaaS platform for multiple clients. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor CRM Multi-Tenant includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Each tenant has its own isolated user management. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-purple-700 text-xs font-medium tracking-wide">SaaS · Multi-Tenant · .NET 10 · Blazor Server · VSA</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM Multi-Tenant</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">SaaS CRM with Multi-Tenancy — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready multi-tenant SaaS CRM application to serve multiple organizations from a single deployment. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture. Complete tenant isolation, shared database with global query filters.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/99e9b1bb-7c1c-4ea0-83e2-e459e88ee756?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-saas-crm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/crm-multi-tenant-01.png" alt="Blazor CRM Multi-Tenant Dashboard — SaaS CRM with Multi-Tenancy .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUSINESS PROBLEM -->
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span> by Blazor CRM Multi-Tenant</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">SaaS businesses need to serve multiple organizations from one deployment — but building secure tenant isolation, managing separate customer data, and scaling multi-tenant infrastructure is complex and expensive.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Serving Multiple Organizations from One Instance</h3>
|
||||
<p class="text-sm text-gray-500">Building separate CRM instances for each client is prohibitively expensive in infrastructure and maintenance. <strong>Blazor CRM Multi-Tenant allows multiple organizations to share one database and one deployment</strong> with complete data isolation via TenantId global query filters. Add new tenants in seconds without provisioning new servers.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Data Leakage Between Tenants</h3>
|
||||
<p class="text-sm text-gray-500">Without proper tenant isolation, customer data can leak between organizations — a catastrophic security and compliance failure. <strong>EF Core global query filters automatically scope every query to the current tenant.</strong> Tenant A's contacts, deals, and activities are completely invisible to Tenant B. Zero data leakage by design.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Scattered Customer Data Across Tenants</h3>
|
||||
<p class="text-sm text-gray-500">Each tenant needs their own contacts, companies, and deals — but managing this separation manually is error-prone. <strong>Blazor CRM Multi-Tenant centralizes all tenant data</strong> with automatic scoping. Every API call, every database query, every UI interaction is tenant-aware.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Tenant-Aware Sales Pipeline</h3>
|
||||
<p class="text-sm text-gray-500">Each tenant needs their own sales pipeline and reporting — but building per-tenant analytics is complex. <strong>Blazor CRM Multi-Tenant provides fully tenant-aware dashboards</strong> with KPI cards, pipeline charts, and win/loss rates scoped to each organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor CRM Multi-Tenant</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features with multi-tenant isolation — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Pipeline</h4><p class="text-xs text-gray-500">Campaign, Budget, Expense, Lead, Lead Contacts, Lead Activities, Sales Team, Sales Representative</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Quotation, Sales Order, Delivery Order, Sales Return, Invoice, Credit Note, Payment, Sales Report, Delivery Report, Return Report, Invoice Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Requisition, Purchase Order, Goods Receive, Purchase Return, Bill, Debit Note, Payment, Purchase Report, Receive Report, Return Report, Bill Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse, Transfer Out, Transfer In, Positive/Negative Adjustment, Scrapping, Stock Count, Transaction Report, Stock Report, Movement Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM Multi-Tenant is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Multi-Tenancy</td><td class="px-4 py-3 text-gray-600">EF Core Global Query Filters with TenantId isolation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHITECTURE -->
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM Multi-Tenant uses Vertical Slice Architecture (VSA) with CQRS via MediatR and EF Core global query filters for complete tenant isolation.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Tenant, Get Contact, Update Deal, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler, FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Every handler automatically applies tenant filtering.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Tenants/CreateTenant/</code> contains endpoint, handler, validator, DTO — everything for that single operation with tenant awareness built in.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Multi-Tenant Isolation</h3>
|
||||
<p class="text-sm text-gray-500">Tenant isolation is implemented at the <strong>EF Core level using global query filters</strong>. Every entity has a <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">TenantId</code> property, and EF Core automatically applies <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.Where(e => e.TenantId == currentTenantId)</code> to all queries. <strong>Zero data leakage by design</strong> — no developer can accidentally query across tenants.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Tenant resolution:</strong> Determined from the authenticated user's claims, applied to DbContext at request scope.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire multi-tenant application — Blazor UI, REST API, tenant management, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for SaaS startups that value velocity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorCRMMultiTenant/
|
||||
├── Features/ # Vertical Slices (one folder per feature)
|
||||
│ ├── Tenants/
|
||||
│ │ ├── CreateTenant/ # Endpoint + Handler + Validator + DTO
|
||||
│ │ ├── GetTenantList/
|
||||
│ │ └── UpdateTenant/
|
||||
│ ├── Contacts/
|
||||
│ ├── Companies/
|
||||
│ ├── Deals/
|
||||
│ ├── Leads/
|
||||
│ ├── Activities/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Cross-cutting: Auth, Audit, Tenant Resolution, EF Core
|
||||
├── Migrations/ # EF Core migrations
|
||||
├── SeedData/ # Initial seed data (demo tenants, users, sample data)
|
||||
├── Components/ # Shared Blazor components
|
||||
├── wwwroot/ # Static assets
|
||||
└── Program.cs # Single entry point with tenant-aware configuration</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECURITY -->
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture — multi-tenant isolation, Identity, JWT, RBAC, and audit trail.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor CRM Multi-Tenant ships with <strong class="text-gray-800">tenant-aware authentication and authorization</strong>. ASP.NET Core Identity manages users per tenant with secure password hashing. JWT authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI. <strong>Both schemes run simultaneously and are tenant-scoped.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) is <strong>fully tenant-scoped</strong>: each tenant has their own Admin, Manager, and User roles. Policy-based authorization provides fine-grained control. <strong>EF Core global query filters</strong> guarantee that Tenant A's data never leaks to Tenant B — enforced at the database level.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code, database credentials, and tenant resolution logic never leave the server</strong>. All data access happens server-side via SignalR.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Tenant Isolation</strong> — EF Core global query filters prevent data leakage between tenants</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset per tenant</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API, both tenant-scoped</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Tenant-scoped Admin, Manager, User roles</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with tenant, user ID, and timestamp</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code, DB credentials, and tenant logic never leave the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REST API -->
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM Multi-Tenant exposes a complete tenant-aware REST Web API — ready for mobile apps, third-party integrations, and external systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints (Tenant-Aware)</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and automatically scoped to the authenticated user's tenant.</p>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/tenants</span><span class="text-gray-400">— List tenants (admin only)</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts (tenant-scoped)</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID (tenant-scoped)</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact (auto-assigned to tenant)</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact (tenant-scoped)</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact (tenant-scoped)</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same tenant-aware pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token with tenant claim</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Automatic Tenant Scoping</strong> — API returns only data belonging to authenticated user's tenant</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE & DEPLOYMENT -->
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data with demo tenants, and flexible deployment options — ready to run in under 60 seconds.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo tenants with full user sets (admin, manager, user), sample contacts, companies, deals</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries with tenant filtering</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy, serve all tenants</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → serving multiple tenants in under 60 seconds</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCREENSHOTS -->
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
|
||||
<p class="text-gray-500 mt-2">Explore the Blazor CRM Multi-Tenant interface — tenant management, dashboards, contact management, sales pipeline, and more.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/crm-multi-tenant-01.png" alt="Blazor CRM Multi-Tenant Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-multi-tenant-02.png" alt="Blazor CRM Multi-Tenant Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-multi-tenant-03.png" alt="Blazor CRM Multi-Tenant Tenant Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-multi-tenant-04.png" alt="Blazor CRM Multi-Tenant Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-multi-tenant-05.png" alt="Blazor CRM Multi-Tenant Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-multi-tenant-06.png" alt="Blazor CRM Multi-Tenant Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-multi-tenant-07.png" alt="Blazor CRM Multi-Tenant Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIVE DEMO -->
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">Test every feature — including multi-tenant isolation — before you buy. No registration required.</p>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-saas-crm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-saas-crm.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY CTA -->
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor CRM Multi-Tenant Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code with full multi-tenant SaaS architecture. Single .NET 10 project. Clone, F5, serve multiple tenants.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/99e9b1bb-7c1c-4ea0-83e2-e459e88ee756?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor CRM Multi-Tenant?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor CRM Multi-Tenant application. A single .NET 10 project with all features, multi-tenant architecture with EF Core global query filters, Vertical Slice Architecture, EF Core migrations, seed data with demo tenants, and full configuration. Clone, set connection string, press F5, and serve multiple tenants immediately.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">How does multi-tenancy work in this application?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Multi-tenancy uses <strong>EF Core global query filters</strong> with a <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">TenantId</code> on every entity. When a user authenticates, their tenant is resolved from claims. EF Core automatically applies <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">.Where(e => e.TenantId == currentTenantId)</code> to all queries. <strong>Zero data leakage between tenants.</strong> Each tenant has isolated users, contacts, deals, and dashboards — all in one database.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for my SaaS business?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! You receive the complete source code. You can rebrand, add custom features, modify the multi-tenant architecture, and deploy as your own SaaS product. Each license covers <strong>one end product per client project</strong>. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real multi-tenant SaaS patterns, EF Core global query filters, authentication flows, VSA feature organization, and REST API design — all in a single project.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo with multi-tenant testing</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,543 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor CRM — Customer Relationship Management .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Blazor CRM: Complete Customer Relationship Management source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, sales pipeline, lead tracking, reporting. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor CRM, Customer Relationship Management, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-crm.html" />
|
||||
<meta property="og:title" content="Blazor CRM — Customer Relationship Management .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-crm.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/crm-customer-relationship-management-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor CRM — .NET 10 Customer Relationship Management Source Code" />
|
||||
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/crm-customer-relationship-management-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<!-- Structured Data: SoftwareApplication + Product -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor CRM",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Customer Relationship Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with contact management, sales pipeline, lead tracking, and reporting dashboards.",
|
||||
"url": "https://www.indotalent.com/products/blazor-crm.html",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Indotalent",
|
||||
"url": "https://www.indotalent.com"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "21.00",
|
||||
"priceCurrency": "USD",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"priceValidUntil": "2027-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"reviewCount": "150"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor CRM", "item": "https://www.indotalent.com/products/blazor-crm.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does Blazor CRM include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor CRM includes contact management, company/organization management, sales pipeline with deal stages, lead tracking and conversion, activity logging, communication history, dashboard with KPIs and charts, reporting, and full audit trail. All features are built with .NET 10, Blazor Server, MudBlazor, and VSA." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor CRM include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor CRM exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes for all CRUD operations on contacts, companies, deals, and activities." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize the CRM for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom fields, modify workflows, integrate with third-party services, and deploy for your clients. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What database does Blazor CRM use?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing the connection string and provider in Program.cs." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor CRM includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 · Blazor Server · VSA · MudBlazor</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">Customer Relationship Management — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready CRM application to manage contacts, companies, sales pipeline, leads, and customer relationships. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/f4b80702-1ba0-422c-b78e-2903c5558441?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-crm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/crm-customer-relationship-management-01.png" alt="Blazor CRM Dashboard — Customer Relationship Management .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUSINESS PROBLEM -->
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span> by Blazor CRM</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Every business needs to manage customer relationships — but fragmented tools, manual tracking, and disconnected data cost time and revenue.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Scattered Customer Data</h3>
|
||||
<p class="text-sm text-gray-500">Sales teams store contacts in spreadsheets, email inboxes, and personal notes. No central source of truth means missed follow-ups, duplicate entries, and lost opportunities. <strong>Blazor CRM centralizes all contact, company, and deal data</strong> in one searchable, organized system with complete history tracking.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Sales Pipeline Visibility</h3>
|
||||
<p class="text-sm text-gray-500">Without a structured pipeline, managers cannot forecast revenue or identify bottlenecks. Deals get stuck without anyone noticing. <strong>Blazor CRM provides a visual sales pipeline with deal stages</strong> (Prospecting, Qualification, Proposal, Negotiation, Closed Won/Lost) so you always know where every deal stands.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Missed Follow-Ups & No Activity Tracking</h3>
|
||||
<p class="text-sm text-gray-500">Critical follow-ups slip through the cracks when there is no logging system. <strong>Blazor CRM tracks every activity</strong> — calls, emails, meetings, notes — and links them to contacts and deals. Complete activity timeline for every customer relationship.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Actionable Insights</h3>
|
||||
<p class="text-sm text-gray-500">Without dashboards and reports, management flies blind. <strong>Blazor CRM includes KPI dashboards</strong> with charts and summary cards showing pipeline value, win rate, conversion metrics, and sales performance — all powered by EF Core aggregation queries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor CRM</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Pipeline</h4><p class="text-xs text-gray-500">Campaign, Budget, Expense, Lead, Lead Contacts, Lead Activities, Sales Team, Sales Representative</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Quotation, Sales Order, Delivery Order, Sales Return, Invoice, Credit Note, Payment, Sales Report, Delivery Report, Return Report, Invoice Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Requisition, Purchase Order, Goods Receive, Purchase Return, Bill, Debit Note, Payment, Purchase Report, Receive Report, Return Report, Bill Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse, Transfer Out, Transfer In, Positive/Negative Adjustment, Scrapping, Stock Count, Transaction Report, Stock Report, Movement Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHITECTURE -->
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Contacts/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
|
||||
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorCRM/
|
||||
├── Features/ # Vertical Slices (one folder per feature)
|
||||
│ ├── Contacts/
|
||||
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
|
||||
│ │ ├── GetContactById/
|
||||
│ │ ├── GetContactList/
|
||||
│ │ ├── UpdateContact/
|
||||
│ │ └── DeleteContact/
|
||||
│ ├── Companies/
|
||||
│ ├── Deals/
|
||||
│ ├── Leads/
|
||||
│ ├── Activities/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
|
||||
├── Migrations/ # EF Core migrations
|
||||
├── SeedData/ # Initial seed data (demo users, sample data)
|
||||
├── Components/ # Shared Blazor components
|
||||
├── wwwroot/ # Static assets
|
||||
└── Program.cs # Single entry point with full configuration</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECURITY -->
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor CRM ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REST API -->
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor CRM exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE & DEPLOYMENT -->
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample contacts, companies, deals</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCREENSHOTS -->
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
|
||||
<p class="text-gray-500 mt-2">Explore the Blazor CRM interface — dashboards, contact management, sales pipeline, and more.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/crm-customer-relationship-management-01.png" alt="Blazor CRM Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-customer-relationship-management-02.png" alt="Blazor CRM Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-customer-relationship-management-03.png" alt="Blazor CRM Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-customer-relationship-management-04.png" alt="Blazor CRM Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-customer-relationship-management-05.png" alt="Blazor CRM Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/crm-customer-relationship-management-06.png" alt="Blazor CRM Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIVE DEMO -->
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-crm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-crm.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY CTA -->
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor CRM Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/f4b80702-1ba0-422c-b78e-2903c5558441?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor CRM?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor CRM application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor CRM use?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor CRM uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,448 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor HRM Multi-Tenant — SaaS HRM with Multi-Tenancy .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Complete SaaS HRM with Multi-Tenancy source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Tenant isolation, employee management, leave tracking, payroll reports. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor HRM Multi-Tenant, SaaS HRM, Multi-Tenant HRM, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, HRM source code, ASP.NET Core SaaS" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-hrm-multitenant.html" />
|
||||
<meta property="og:title" content="Blazor HRM Multi-Tenant — SaaS HRM with Multi-Tenancy .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete SaaS HRM source code with multi-tenancy. .NET 10, Blazor Server, MudBlazor, VSA. Employee, leave, payroll. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-hrm-multitenant.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/hrm-multi-tenant-saas-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor HRM Multi-Tenant — .NET 10 SaaS HRM with Multi-Tenancy Source Code" />
|
||||
<meta name="twitter:description" content="Complete SaaS HRM source code with multi-tenancy. Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/hrm-multi-tenant-saas-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor HRM Multi-Tenant",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Multi-tenant SaaS HRM application built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with tenant isolation, employee management, leave tracking, and payroll reporting.",
|
||||
"url": "https://www.indotalent.com/products/blazor-hrm-multitenant.html"il": "2027-12-31" },
|
||||
"aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "reviewCount": "150" }
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor HRM Multi-Tenant", "item": "https://www.indotalent.com/products/blazor-hrm-multitenant.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does Blazor HRM Multi-Tenant include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor HRM Multi-Tenant includes multi-tenant employee management, department and designation management, leave tracking with approval workflows, attendance tracking, payroll reporting, dashboard with workforce KPIs, tenant isolation via EF Core global query filters, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor HRM Multi-Tenant include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor HRM Multi-Tenant exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes for all tenant-scoped employee, leave, attendance, and payroll operations." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize Blazor HRM Multi-Tenant for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. Rebrand, add custom fields, modify leave policies, integrate payroll, and deploy as your own SaaS HRM platform. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What database does Blazor HRM Multi-Tenant use?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor HRM Multi-Tenant includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-purple-700 text-xs font-medium tracking-wide">SaaS · Multi-Tenant · .NET 10 · Blazor Server · VSA</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">HRM Multi-Tenant</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">SaaS HRM with Multi-Tenancy — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready multi-tenant SaaS HRM application to manage workforce across multiple organizations from a single deployment. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture. Complete tenant isolation with EF Core global query filters.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/5a35e0ec-b88f-4176-a6ac-3e02201a5288?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-saas-hrm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/hrm-multi-tenant-saas-01.png" alt="Blazor HRM Multi-Tenant Dashboard — SaaS HRM .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a><span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a><span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a><span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a><span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a><span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a><span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a><span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a><span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span> by Blazor HRM Multi-Tenant</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">HRM Multitenant: The Next-Gen People Engine: Built for Scale, Engineered for Excellence.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Managing Multiple Client Workforces</h3>
|
||||
<p class="text-sm text-gray-500">Running separate HRM instances for each client is costly. <strong>Blazor HRM Multi-Tenant allows multiple organizations to share one deployment</strong> with complete workforce data isolation via TenantId global query filters. Add new client organizations in seconds.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Confidential Employee Data Leakage</h3>
|
||||
<p class="text-sm text-gray-500">Employee data is highly confidential. Without proper isolation, one client's workforce data could leak to another. <strong>EF Core global query filters automatically scope every query.</strong> Tenant A's employees, salaries, and leave records are invisible to Tenant B.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Leave & Attendance Per Tenant</h3>
|
||||
<p class="text-sm text-gray-500">Each tenant needs their own leave policies and attendance tracking. <strong>Blazor HRM Multi-Tenant provides tenant-scoped leave management</strong> with approval workflows, attendance logging, and calendar views — all isolated per organization.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Tenant-Aware Workforce Analytics</h3>
|
||||
<p class="text-sm text-gray-500">HR service providers need per-tenant dashboards and reports. <strong>Blazor HRM Multi-Tenant includes tenant-aware workforce dashboards</strong> with headcount, department distribution, leave balances, and attendance metrics — all scoped per organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor HRM Multi-Tenant</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features with multi-tenant isolation — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Leave Management</h4><p class="text-xs text-gray-500">Leave Request, Leave Categories, Leave Balance</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Performance</h4><p class="text-xs text-gray-500">Evaluation, Appraisal, Promotion, Transfer</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Organization</h4><p class="text-xs text-gray-500">Branches, Departments, Designations, Employees</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Payroll Process</h4><p class="text-xs text-gray-500">Salary Grades, Income, Deduction</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm"><div class="overflow-x-auto"><table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Multi-Tenancy</td><td class="px-4 py-3 text-gray-600">EF Core Global Query Filters with TenantId isolation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor HRM Multi-Tenant uses Vertical Slice Architecture (VSA) with CQRS via MediatR and EF Core global query filters for complete tenant isolation across all workforce features.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Employee, Approve Leave, etc.) lives in its own folder with endpoint, MediatR handler, validator, and EF Core queries — all in one place. Every handler automatically applies tenant filtering.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Multi-Tenant Isolation</h3>
|
||||
<p class="text-sm text-gray-500">Tenant isolation via <strong>EF Core global query filters</strong>. Every entity has TenantId; EF Core auto-applies <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.Where(e => e.TenantId == currentTenantId)</code> to all queries. Zero data leakage by design.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire multi-tenant HRM application lives in <strong>one .NET 10 project</strong>. No distributed complexity. Single F5 to run. Deploy as one unit. Perfect for SaaS HR service providers.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorHRMMultiTenant/
|
||||
├── Features/
|
||||
│ ├── Tenants/
|
||||
│ ├── Employees/
|
||||
│ ├── Departments/
|
||||
│ ├── Designations/
|
||||
│ ├── LeaveManagement/
|
||||
│ ├── Attendance/
|
||||
│ ├── Payroll/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Auth, Audit, Tenant Resolution, EF Core
|
||||
├── Migrations/
|
||||
├── SeedData/ # Demo tenants, users, employee sample data
|
||||
├── Components/
|
||||
└── Program.cs</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor HRM Multi-Tenant ships with <strong class="text-gray-800">tenant-aware security</strong>. ASP.NET Core Identity manages users per tenant. JWT protects REST API, cookies protect Blazor UI. <strong>Both are tenant-scoped.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control is <strong>fully tenant-scoped</strong> — each tenant has their own Admin, Manager, and User roles. <strong>EF Core global query filters</strong> guarantee employee data never leaks between tenants.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>all employee data, source code, and database credentials never leave the server.</strong></p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Tenant Isolation</strong> — EF Core global query filters prevent data leakage</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — Per-tenant user management</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Tenant-scoped authentication</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">RBAC</strong> — Tenant-scoped Admin, Manager, User roles</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Fine-grained HR access control</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every HR action logged with tenant + user ID</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Employee data never leaves the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints (Tenant-Aware)</h3>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/employees</span><span class="text-gray-400">— List employees (tenant-scoped)</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/employees/{id}</span><span class="text-gray-400">— Get employee (tenant-scoped)</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/employees</span><span class="text-gray-400">— Create employee (auto-assigned to tenant)</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/employees/{id}</span><span class="text-gray-400">— Update employee</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/employees/{id}</span><span class="text-gray-400">— Delete employee</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same pattern for: Departments, Designations, Leave Requests, Attendance, Payroll.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI</strong> — Interactive docs at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — Bearer token with tenant claim</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Auto Tenant Scoping</strong> — Only tenant-owned data returned</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Build mobile HR apps with this API</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded (provider ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo tenants, employees, departments, leave types</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Optimized EF Core queries with tenant filtering</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy from Visual Studio or CI/CD</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS</strong> — Standard ASP.NET Core publish</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize for any platform</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup:</strong> Clone → connection string → F5 → multi-tenant running in 60s</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10"><h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/hrm-multi-tenant-saas-01.png" alt="Blazor HRM Multi-Tenant Dashboard" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-multi-tenant-saas-02.png" alt="Blazor HRM Multi-Tenant Employee Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-multi-tenant-saas-03.png" alt="Blazor HRM Multi-Tenant Tenant Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-multi-tenant-saas-04.png" alt="Blazor HRM Multi-Tenant Leave Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-multi-tenant-saas-05.png" alt="Blazor HRM Multi-Tenant Attendance Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-multi-tenant-saas-06.png" alt="Blazor HRM Multi-Tenant Payroll Reports" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-multi-tenant-saas-07.png" alt="Blazor HRM Multi-Tenant Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-saas-hrm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-saas-hrm.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor HRM Multi-Tenant Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, serve multiple organizations.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/5a35e0ec-b88f-4176-a6ac-3e02201a5288?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">What do I get when I purchase?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">Complete, unrestricted C# source code of the entire multi-tenant HRM application. Single .NET 10 project with VSA, EF Core global query filters, migrations, seed data with demo tenants. Clone, F5, serve multiple organizations immediately.</div></div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">How does multi-tenancy work?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">EF Core global query filters with TenantId on every entity. Each tenant sees only their employees, departments, and leave data. Zero data leakage — enforced at the database level.</div></div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">Can I customize for my HR SaaS business?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! Rebrand, add custom HR features, modify leave policies, integrate payroll systems. Deploy as your own SaaS platform. Each license covers one end product per client project. <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License details</a>.</div></div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">Does it support SQL Server and PostgreSQL?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server fully tested. PostgreSQL scaffolded in codebase (provider + connection string ready, not fully tested).</div></div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">Can beginners learn from this?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Study real multi-tenant SaaS patterns, EF Core global query filters, VSA feature organization, and HRM domain design.</div></div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden"><button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50"><span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span><svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></button><div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">No refund due to digital nature. Test the fully functional live demo before buying. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy</a>.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,541 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor HRM — Human Resource Management .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Blazor HRM: Complete Human Resource Management source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor HRM, Human Resource Management, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-hrm.html" />
|
||||
<meta property="og:title" content="Blazor HRM — Human Resource Management .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-hrm.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/hrm-human-resource-management-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor HRM — .NET 10 Human Resource Management Source Code" />
|
||||
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/hrm-human-resource-management-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<!-- Structured Data: SoftwareApplication + Product -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor HRM",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Human Resource Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
|
||||
"url": "https://www.indotalent.com/products/blazor-hrm.html",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Indotalent",
|
||||
"url": "https://www.indotalent.com"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "21.00",
|
||||
"priceCurrency": "USD",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"priceValidUntil": "2027-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"reviewCount": "150"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor HRM", "item": "https://www.indotalent.com/products/blazor-hrm.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does HRM include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor HRM includes employee management, department and designation management, leave tracking with approval workflows, attendance tracking, payroll reporting, dashboard with workforce KPIs and charts, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor HRM include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor HRM exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication, and proper HTTP status codes for all employee, leave, attendance, and payroll operations." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize Blazor HRM for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom fields, modify leave policies, integrate payroll systems, and deploy for clients. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What database does Blazor HRM use?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor HRM includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 · Blazor Server · VSA · MudBlazor</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">Human Resource Management — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready HRM application to manage employees, departments, leave, attendance, and payroll. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/db765b6a-f864-4275-9017-23e3321761e8?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-hrm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/hrm-human-resource-management-01.png" alt="Blazor HRM Dashboard — Human Resource Management .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUSINESS PROBLEM -->
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Managing workforce data with spreadsheets and disconnected tools leads to errors, compliance issues, and wasted administrative time.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Scattered Employee Records</h3>
|
||||
<p class="text-sm text-gray-500">HR teams manage employees across spreadsheets, paper files, and email — leading to outdated records, duplicate entries, and compliance risks. <strong>Blazor HRM centralizes all employee data</strong> in one searchable, organized system with complete employment history and document storage.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Leave & Attendance Tracking</h3>
|
||||
<p class="text-sm text-gray-500">Paper-based leave requests and manual attendance logs cause delays, lost forms, and payroll errors. <strong>Blazor HRM provides digital leave management</strong> with approval workflows, balance tracking, calendar views, and automated attendance logging — eliminating paperwork.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Performance Management System</h3>
|
||||
<p class="text-sm text-gray-500">Without structured evaluations, appraisals, and promotion workflows, employee growth stalls. <strong>Blazor HRM includes a complete performance module</strong> with evaluation forms, appraisal tracking, promotion requests, and transfer management.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Workforce Analytics</h3>
|
||||
<p class="text-sm text-gray-500">Without dashboards, management cannot track headcount, turnover, leave trends, or department distribution. <strong>Blazor HRM includes KPI dashboards</strong> with charts and summary cards — all powered by EF Core aggregation queries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor HRM</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Leave Management</h4><p class="text-xs text-gray-500">Leave Request, Leave Categories, Leave Balance</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Performance</h4><p class="text-xs text-gray-500">Evaluation, Appraisal, Promotion, Transfer</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Organization</h4><p class="text-xs text-gray-500">Branches, Departments, Designations, Employees</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Payroll Process</h4><p class="text-xs text-gray-500">Salary Grades, Income, Deduction</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor HRM is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHITECTURE -->
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor HRM uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Employees/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
|
||||
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorHRM/
|
||||
├── Features/ # Vertical Slices (one folder per feature)
|
||||
│ ├── Employees/
|
||||
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
|
||||
│ │ ├── GetContactById/
|
||||
│ │ ├── GetContactList/
|
||||
│ │ ├── UpdateContact/
|
||||
│ │ └── DeleteContact/
|
||||
│ ├── Departments/
|
||||
│ ├── LeaveManagement/
|
||||
│ ├── Attendance/
|
||||
│ ├── Payroll/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
|
||||
├── Migrations/ # EF Core migrations
|
||||
├── SeedData/ # Initial seed data (demo users, sample data)
|
||||
├── Components/ # Shared Blazor components
|
||||
├── wwwroot/ # Static assets
|
||||
└── Program.cs # Single entry point with full configuration</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECURITY -->
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor HRM ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REST API -->
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor HRM exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE & DEPLOYMENT -->
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCREENSHOTS -->
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
|
||||
<p class="text-gray-500 mt-2">Explore the Blazor HRM interface — dashboards, data management, workflow management, and more.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/hrm-human-resource-management-01.png" alt="Blazor HRM Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-human-resource-management-02.png" alt="Blazor HRM Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-human-resource-management-03.png" alt="Blazor HRM Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-human-resource-management-04.png" alt="Blazor HRM Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-human-resource-management-05.png" alt="Blazor HRM Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/hrm-human-resource-management-06.png" alt="Blazor HRM Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIVE DEMO -->
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-hrm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-hrm.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY CTA -->
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor HRM Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/db765b6a-f864-4275-9017-23e3321761e8?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor HRM?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor HRM application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor HRM use?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor HRM uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor OMS — Order Management System .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Blazor OMS: Complete Order Management System source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor OMS, Order Management System, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-oms.html" />
|
||||
<meta property="og:title" content="Blazor OMS — Order Management System .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-oms.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/oms-order-management-system-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor OMS — .NET 10 Order Management System Source Code" />
|
||||
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/oms-order-management-system-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<!-- Structured Data: SoftwareApplication + Product -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor OMS",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Order Management System system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
|
||||
"url": "https://www.indotalent.com/products/blazor-oms.html",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Indotalent",
|
||||
"url": "https://www.indotalent.com"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "21.00",
|
||||
"priceCurrency": "USD",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"priceValidUntil": "2027-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"reviewCount": "150"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor OMS", "item": "https://www.indotalent.com/products/blazor-oms.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does OMS include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor OMS includes customer and vendor management, sales order processing, purchase order management, inventory and warehouse tracking, booking and scheduling, dashboard with sales and purchase KPIs, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor OMS include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor OMS exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all order, customer, vendor, inventory, and purchase operations." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize Blazor OMS for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom order workflows, integrate payment gateways, and deploy for clients. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What database does Blazor OMS use?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor OMS includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 · Blazor Server · VSA · MudBlazor</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">Order Management System — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready order management application to manage sales orders, purchase orders, inventory, and customers. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/733cc711-a649-4fef-9d20-a731cabc7e61?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-oms.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/oms-order-management-system-01.png" alt="Blazor OMS Dashboard — Order Management System .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUSINESS PROBLEM -->
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Businesses struggle with fragmented order processing, disconnected sales and purchase cycles, and manual inventory tracking — leading to errors, delays, and lost revenue.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Sales & Purchase Cycles</h3>
|
||||
<p class="text-sm text-gray-500">Sales orders and purchase orders are managed in separate systems, causing stockouts, over-ordering, and cash flow issues. <strong>Blazor OMS unifies the entire order-to-cash and procure-to-pay cycle</strong> in one integrated system.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Inventory Tracking</h3>
|
||||
<p class="text-sm text-gray-500">Without real-time inventory visibility, businesses overstock or run out of critical products. <strong>Blazor OMS provides complete inventory management</strong> with product groups, unit measures, warehouse tracking, and stock reports.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Centralized Customer & Vendor Data</h3>
|
||||
<p class="text-sm text-gray-500">Customer and vendor information is scattered across emails and spreadsheets. <strong>Blazor OMS centralizes all third-party data</strong> — customer groups, vendor categories, contacts — with full search and history.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Order Analytics</h3>
|
||||
<p class="text-sm text-gray-500">Without dashboards, management cannot track sales performance, purchase efficiency, or inventory levels. <strong>Blazor OMS includes KPI dashboards</strong> with sales reports, purchase reports, and payment summaries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor OMS</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Sales Order, Invoice, Payment, Sales Report, Invoice Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Purchase Order, Bill, Payment, Purchase Report, Bill Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor OMS is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHITECTURE -->
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor OMS uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Orders/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
|
||||
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorOMS/
|
||||
├── Features/ # Vertical Slices (one folder per feature)
|
||||
│ ├── Orders/
|
||||
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
|
||||
│ │ ├── GetContactById/
|
||||
│ │ ├── GetContactList/
|
||||
│ │ ├── UpdateContact/
|
||||
│ │ └── DeleteContact/
|
||||
│ ├── Customers/
|
||||
│ ├── Products/
|
||||
│ ├── Inventory/
|
||||
│ ├── Shipments/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
|
||||
├── Migrations/ # EF Core migrations
|
||||
├── SeedData/ # Initial seed data (demo users, sample data)
|
||||
├── Components/ # Shared Blazor components
|
||||
├── wwwroot/ # Static assets
|
||||
└── Program.cs # Single entry point with full configuration</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECURITY -->
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor OMS ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REST API -->
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor OMS exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE & DEPLOYMENT -->
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCREENSHOTS -->
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
|
||||
<p class="text-gray-500 mt-2">Explore the Blazor OMS interface — dashboards, data management, workflow management, and more.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/oms-order-management-system-01.png" alt="Blazor OMS Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/oms-order-management-system-02.png" alt="Blazor OMS Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/oms-order-management-system-03.png" alt="Blazor OMS Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/oms-order-management-system-04.png" alt="Blazor OMS Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/oms-order-management-system-05.png" alt="Blazor OMS Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/oms-order-management-system-06.png" alt="Blazor OMS Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIVE DEMO -->
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-oms.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-oms.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY CTA -->
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor OMS Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/733cc711-a649-4fef-9d20-a731cabc7e61?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor OMS?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor OMS application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor OMS use?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor OMS uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor SCM — Supply Chain Management .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Blazor SCM: Complete Supply Chain Management source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor SCM, Supply Chain Management, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-scm.html" />
|
||||
<meta property="og:title" content="Blazor SCM — Supply Chain Management .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-scm.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/scm-supply-chain-management-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor SCM — .NET 10 Supply Chain Management Source Code" />
|
||||
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/scm-supply-chain-management-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<!-- Structured Data: SoftwareApplication + Product -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor SCM",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Supply Chain Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
|
||||
"url": "https://www.indotalent.com/products/blazor-scm.html",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Indotalent",
|
||||
"url": "https://www.indotalent.com"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "21.00",
|
||||
"priceCurrency": "USD",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"priceValidUntil": "2027-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"reviewCount": "150"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor SCM", "item": "https://www.indotalent.com/products/blazor-scm.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does SCM include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor SCM includes procurement management with requisition, purchase orders, goods receipt; sales management with quotations, delivery orders, returns; inventory tracking with transfers and stock counts; vendor and customer management; dashboard with supply chain KPIs; and full audit trail." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor SCM include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor SCM exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all procurement, sales, inventory, vendor, and customer operations." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize Blazor SCM for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom supply chain workflows, integrate logistics systems, and deploy for clients. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What database does Blazor SCM use?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor SCM includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 · Blazor Server · VSA · MudBlazor</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">Supply Chain Management — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready supply chain management application to manage procurement, sales, inventory, and vendors. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/bc6656cb-183d-4981-8b6c-c8eb626bb00b?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-scm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/scm-supply-chain-management-01.png" alt="Blazor SCM Dashboard — Supply Chain Management .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUSINESS PROBLEM -->
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Supply chain inefficiencies — fragmented procurement, manual inventory tracking, and disconnected logistics — cost businesses time, money, and competitive advantage.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Fragmented Procurement Process</h3>
|
||||
<p class="text-sm text-gray-500">Requisitions, purchase orders, goods receipts, and vendor bills are managed across emails and spreadsheets. <strong>Blazor SCM unifies the entire procure-to-pay cycle</strong> with full traceability from requisition to payment.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Real-Time Inventory Visibility</h3>
|
||||
<p class="text-sm text-gray-500">Without real-time stock tracking across warehouses, businesses face stockouts, overstocking, and write-offs. <strong>Blazor SCM provides complete inventory management</strong> with transfers, adjustments, stock counts, and movement reports.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Sales & Delivery</h3>
|
||||
<p class="text-sm text-gray-500">Sales orders, delivery orders, and returns are tracked in separate systems causing fulfillment delays. <strong>Blazor SCM integrates the full order-to-cash cycle</strong> — quotation to invoice, delivery to return — with complete audit trail.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Supply Chain Analytics</h3>
|
||||
<p class="text-sm text-gray-500">Without dashboards, supply chain managers cannot identify bottlenecks, analyze vendor performance, or optimize inventory. <strong>Blazor SCM includes KPI dashboards</strong> with purchase reports, sales reports, inventory reports, and payment summaries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor SCM</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Quotation, Sales Order, Delivery Order, Sales Return, Invoice, Credit Note, Payment, Sales Report, Delivery Report, Return Report, Invoice Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Requisition, Purchase Order, Goods Receive, Purchase Return, Bill, Debit Note, Payment, Purchase Report, Receive Report, Return Report, Bill Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SCM is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHITECTURE -->
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SCM uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Products/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
|
||||
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorSCM/
|
||||
├── Features/ # Vertical Slices (one folder per feature)
|
||||
│ ├── Products/
|
||||
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
|
||||
│ │ ├── GetContactById/
|
||||
│ │ ├── GetContactList/
|
||||
│ │ ├── UpdateContact/
|
||||
│ │ └── DeleteContact/
|
||||
│ ├── Warehouses/
|
||||
│ ├── StockMovements/
|
||||
│ ├── Inventory/
|
||||
│ ├── Transfers/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
|
||||
├── Migrations/ # EF Core migrations
|
||||
├── SeedData/ # Initial seed data (demo users, sample data)
|
||||
├── Components/ # Shared Blazor components
|
||||
├── wwwroot/ # Static assets
|
||||
└── Program.cs # Single entry point with full configuration</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECURITY -->
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor SCM ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REST API -->
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SCM exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE & DEPLOYMENT -->
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCREENSHOTS -->
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
|
||||
<p class="text-gray-500 mt-2">Explore the Blazor SCM interface — dashboards, data management, workflow management, and more.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/scm-supply-chain-management-01.png" alt="Blazor SCM Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/scm-supply-chain-management-02.png" alt="Blazor SCM Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/scm-supply-chain-management-03.png" alt="Blazor SCM Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/scm-supply-chain-management-04.png" alt="Blazor SCM Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/scm-supply-chain-management-05.png" alt="Blazor SCM Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/scm-supply-chain-management-06.png" alt="Blazor SCM Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIVE DEMO -->
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-scm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-scm.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY CTA -->
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor SCM Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/bc6656cb-183d-4981-8b6c-c8eb626bb00b?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor SCM?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor SCM application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor SCM use?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor SCM uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,543 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor SWM — Spa & Wellness Management .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Blazor SWM: Complete Spa & Wellness Management source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor SWM, Spa & Wellness Management, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-swm.html" />
|
||||
<meta property="og:title" content="Blazor SWM — Spa & Wellness Management .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-swm.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/swm-spa-and-wellness-management-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor SWM — .NET 10 Spa & Wellness Management Source Code" />
|
||||
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/swm-spa-and-wellness-management-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<!-- Structured Data: SoftwareApplication + Product -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor SWM",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Spa & Wellness Management system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
|
||||
"url": "https://www.indotalent.com/products/blazor-swm.html",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Indotalent",
|
||||
"url": "https://www.indotalent.com"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "21.00",
|
||||
"priceCurrency": "USD",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"priceValidUntil": "2027-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"reviewCount": "150"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor SWM", "item": "https://www.indotalent.com/products/blazor-swm.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does SWM include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor SWM includes client and therapist management, appointment booking and scheduling, service sales and invoicing, purchase management, inventory tracking, commission reports, employee management, and full audit trail. All built with .NET 10, Blazor Server, MudBlazor, and VSA." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor SWM include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor SWM exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all client, appointment, sales, purchase, and inventory operations." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize Blazor SWM for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom services, modify booking workflows, integrate payment systems, and deploy for spa and wellness businesses. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What database does Blazor SWM use?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor SWM includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 · Blazor Server · VSA · MudBlazor</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">Spa & Wellness Management — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready spa & wellness management application to manage clients, appointments, services, and billing. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/99ce0078-7185-4a7d-8957-f5b9c0505b87?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-swm.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/swm-spa-and-wellness-management-01.png" alt="Blazor SWM Dashboard — Spa & Wellness Management .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUSINESS PROBLEM -->
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Spa, fitness, and wellness businesses struggle with fragmented appointment booking, manual client management, disconnected billing, and no business analytics — limiting growth and profitability.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Fragmented Client & Appointment Management</h3>
|
||||
<p class="text-sm text-gray-500">Client bookings are managed through phone calls, paper logs, and sticky notes. Double bookings and no-shows hurt revenue. <strong>Blazor SWM provides a complete booking system</strong> with resource scheduling, availability management, and client tracking.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Sales & Billing</h3>
|
||||
<p class="text-sm text-gray-500">Service sales, packages, and invoices are handled manually leading to billing errors and delayed payments. <strong>Blazor SWM integrates the full sales cycle</strong> — from order to invoice to payment — with commission tracking for therapists.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Employee & Commission Tracking</h3>
|
||||
<p class="text-sm text-gray-500">Therapist schedules, service assignments, and commissions are tracked in spreadsheets. <strong>Blazor SWM centralizes employee management</strong> with group categorization, service assignments, and automated commission reports.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Business Analytics</h3>
|
||||
<p class="text-sm text-gray-500">Without dashboards, spa owners cannot see which services sell best, which therapists perform, or track revenue trends. <strong>Blazor SWM includes KPI dashboards</strong> with sales reports, commission reports, and inventory summaries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor SWM</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Organization</h4><p class="text-xs text-gray-500">Employee, Employee Group, Employee Category</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Sales Order, Invoice, Payment, Sales Report, Commission Report, Invoice Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Purchase Order, Bill, Payment, Purchase Report, Bill Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, To-Do List</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SWM is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHITECTURE -->
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SWM uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Products/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
|
||||
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorSWM/
|
||||
├── Features/ # Vertical Slices (one folder per feature)
|
||||
│ ├── Products/
|
||||
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
|
||||
│ │ ├── GetContactById/
|
||||
│ │ ├── GetContactList/
|
||||
│ │ ├── UpdateContact/
|
||||
│ │ └── DeleteContact/
|
||||
│ ├── Warehouses/
|
||||
│ ├── StockMovements/
|
||||
│ ├── Inventory/
|
||||
│ ├── Transfers/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
|
||||
├── Migrations/ # EF Core migrations
|
||||
├── SeedData/ # Initial seed data (demo users, sample data)
|
||||
├── Components/ # Shared Blazor components
|
||||
├── wwwroot/ # Static assets
|
||||
└── Program.cs # Single entry point with full configuration</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECURITY -->
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor SWM ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REST API -->
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor SWM exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE & DEPLOYMENT -->
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCREENSHOTS -->
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
|
||||
<p class="text-gray-500 mt-2">Explore the Blazor SWM interface — dashboards, data management, workflow management, and more.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/swm-spa-and-wellness-management-01.png" alt="Blazor SWM Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/swm-spa-and-wellness-management-02.png" alt="Blazor SWM Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/swm-spa-and-wellness-management-03.png" alt="Blazor SWM Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/swm-spa-and-wellness-management-04.png" alt="Blazor SWM Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/swm-spa-and-wellness-management-05.png" alt="Blazor SWM Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/swm-spa-and-wellness-management-06.png" alt="Blazor SWM Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIVE DEMO -->
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-swm.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-swm.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY CTA -->
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor SWM Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/99ce0078-7185-4a7d-8957-f5b9c0505b87?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor SWM?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor SWM application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor SWM use?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor SWM uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" itemscope itemtype="https://schema.org/Product">
|
||||
<head>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
|
||||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Blazor WMS — Warehouse Management System .NET 10 Source Code | Indotalent</title>
|
||||
<meta name="description" content="Blazor WMS: Complete Warehouse Management System source code built with .NET 10, Blazor Server, MudBlazor, and Vertical Slice Architecture. Contact management, workflow management, lead tracking, reporting. $21 instant download." />
|
||||
<meta name="keywords" content="Blazor WMS, Warehouse Management System, .NET 10, Blazor Server, MudBlazor, Vertical Slice Architecture, CRM source code, ASP.NET Core CRM" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link rel="canonical" href="https://www.indotalent.com/products/blazor-wms.html" />
|
||||
<meta property="og:title" content="Blazor WMS — Warehouse Management System .NET 10 Source Code | Indotalent" />
|
||||
<meta property="og:description" content="Complete CRM source code: .NET 10, Blazor Server, MudBlazor, VSA. Contact, pipeline, lead tracking, reporting. $21." />
|
||||
<meta property="og:type" content="product" />
|
||||
<meta property="og:url" content="https://www.indotalent.com/products/blazor-wms.html" />
|
||||
<meta property="og:image" content="https://www.indotalent.com/img/wms-warehouse-inventory-management-system-01.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Blazor WMS — .NET 10 Warehouse Management System Source Code" />
|
||||
<meta name="twitter:description" content="Complete CRM source code with Blazor Server, MudBlazor, VSA. $21 instant download." />
|
||||
<meta name="twitter:image" content="https://www.indotalent.com/img/wms-warehouse-inventory-management-system-01.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
|
||||
<script>tailwind.config={theme:{extend:{colors:{brand:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"}},fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
|
||||
<!-- Structured Data: SoftwareApplication + Product -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Blazor WMS",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS",
|
||||
"description": "Warehouse Management System system built with .NET 10 Blazor Server, Vertical Slice Architecture, and MudBlazor. Complete source code with data management, workflow management, lead tracking, and reporting dashboards.",
|
||||
"url": "https://www.indotalent.com/products/blazor-wms.html",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Indotalent",
|
||||
"url": "https://www.indotalent.com"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "21.00",
|
||||
"priceCurrency": "USD",
|
||||
"availability": "https://schema.org/InStock",
|
||||
"priceValidUntil": "2027-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"reviewCount": "150"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.indotalent.com/" },
|
||||
{ "@type": "ListItem", "position": 2, "name": "Products", "item": "https://www.indotalent.com/#products" },
|
||||
{ "@type": "ListItem", "position": 3, "name": "Blazor WMS", "item": "https://www.indotalent.com/products/blazor-wms.html" }
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What features does WMS include?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Blazor WMS includes warehouse and inventory management with stock counts and movements, sales order processing with delivery and returns, purchase and procurement management, vendor and customer management, booking and scheduling, dashboard with warehouse KPIs, and full audit trail." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does Blazor WMS include REST API?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes! Blazor WMS exposes a complete REST Web API built with ASP.NET Core Minimal APIs with Swagger/OpenAPI documentation, JWT authentication for all warehouse, inventory, sales, purchase, and vendor operations." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Can I customize Blazor WMS for my clients?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Absolutely. You receive the complete, unrestricted C# source code. You can rebrand, add custom warehouse workflows, integrate shipping systems, and deploy for clients. Each client project requires a separate $21 license." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "What database does Blazor WMS use?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "SQL Server is fully tested and ready with EF Core migrations and seed data. PostgreSQL support is scaffolded in the codebase but not yet fully tested. Switch between databases by changing connection string and provider in Program.cs." }
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Does it include authentication and user roles?",
|
||||
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Blazor WMS includes ASP.NET Core Identity with JWT + cookie dual authentication, role-based access control (Admin, Manager, User), and policy-based authorization. Both the Blazor UI and REST API are protected." }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<style>[x-cloak]{display:none!important}html{scroll-behavior:smooth}.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s;text-decoration:none}.btn-secondary:hover{border-color:#f97316;color:#f97316}.btn-buy{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff!important;font-weight:700;font-size:1.125rem;border-radius:14px;padding:16px 36px;transition:all 0.25s;box-shadow:0 6px 24px -6px rgba(249,115,22,0.45);text-decoration:none;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 6px 24px -6px rgba(249,115,22,0.45)}50%{box-shadow:0 8px 32px -4px rgba(249,115,22,0.65)}}.btn-buy:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(249,115,22,0.55);animation:none}.product-card{transition:all 0.3s ease}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(249,115,22,0.12)}.toc-link{transition:all 0.2s}.toc-link:hover{color:#f97316}.toc-link.active{color:#f97316;font-weight:600}</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 antialiased">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="../index.html" class="flex items-center gap-2.5"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
|
||||
<div class="hidden lg:flex items-center gap-6">
|
||||
<a href="../index.html#products" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Products</a>
|
||||
<a href="../index.html#features" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Features</a>
|
||||
<a href="../index.html#pricing" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
|
||||
<a href="../blog.html" class="text-sm font-medium text-gray-600 hover:text-brand-500 transition-colors">Blog</a>
|
||||
</div>
|
||||
<a href="../index.html#products" class="btn-primary text-sm py-2.5 px-5">All Products</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-10 items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-5">
|
||||
<span class="text-brand-700 text-xs font-medium tracking-wide">.NET 10 · Blazor Server · VSA · MudBlazor</span>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4 tracking-tight">Blazor <span class="gradient-text">CRM</span></h1>
|
||||
<p class="text-lg text-gray-500 mb-3 max-w-xl">Warehouse Management System — Complete Source Code</p>
|
||||
<p class="text-sm text-gray-400 mb-6 max-w-xl">A production-ready warehouse management application to manage inventory, stock movements, sales, and procurement. Built with .NET 10, ASP.NET Core, Blazor Server, MudBlazor, and Vertical Slice Architecture.</p>
|
||||
<div class="flex items-center justify-center lg:justify-start gap-4 mb-8">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<a href="https://code.indotalent.com/checkout/buy/b581ed46-0ba5-4111-873d-959a4e3b6272?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<a href="https://blazor-wms.csharpasp.net/" target="_blank" rel="noopener" class="btn-secondary text-sm py-3 px-6"><svg class="w-4 h-4 mr-1.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>Live Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"><img src="../img/wms-warehouse-inventory-management-system-01.png" alt="Blazor WMS Dashboard — Warehouse Management System .NET 10 Blazor Server" class="rounded-2xl shadow-2xl border border-gray-200 w-full" loading="eager" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABLE OF CONTENTS -->
|
||||
<section class="py-6 bg-gray-50/80 border-y border-gray-100 sticky top-16 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs font-medium">
|
||||
<span class="text-gray-400">On this page:</span>
|
||||
<a href="#problem" class="toc-link text-gray-500">Business Problem</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#features" class="toc-link text-gray-500">Features</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#tech-stack" class="toc-link text-gray-500">Tech Stack</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#architecture" class="toc-link text-gray-500">Architecture</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#security" class="toc-link text-gray-500">Security</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#api" class="toc-link text-gray-500">REST API</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#database" class="toc-link text-gray-500">Database & Deployment</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#screenshots" class="toc-link text-gray-500">Screenshots</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<a href="#faq" class="toc-link text-gray-500">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUSINESS PROBLEM -->
|
||||
<section id="problem" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-red-50 border border-red-200 rounded-full px-3.5 py-1 mb-4"><span class="text-red-700 text-xs font-medium tracking-wide">The Problem</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Business Problems <span class="gradient-text">Solved</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Warehouse operations suffer from manual inventory tracking, disconnected stock movements, fragmented sales-purchase cycles, and no real-time visibility — leading to errors, delays, and lost revenue.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Manual Inventory & Stock Management</h3>
|
||||
<p class="text-sm text-gray-500">Inventory is tracked on paper or spreadsheets, leading to stockouts, overstocking, write-offs, and inaccurate counts. <strong>Blazor WMS provides complete warehouse inventory management</strong> with real-time tracking, stock counts, adjustments, and movement reports.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Disconnected Sales & Delivery Operations</h3>
|
||||
<p class="text-sm text-gray-500">Sales orders, delivery orders, returns, and invoices are managed in separate systems causing fulfillment delays and errors. <strong>Blazor WMS integrates the full order-to-cash cycle</strong> with complete traceability from quotation to payment.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Fragmented Procurement & Receiving</h3>
|
||||
<p class="text-sm text-gray-500">Purchase requisitions, goods receipts, returns, and vendor bills are processed manually. <strong>Blazor WMS unifies the procure-to-pay cycle</strong> with automated receiving, debit notes, and payment tracking.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6 product-card">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">No Warehouse Analytics</h3>
|
||||
<p class="text-sm text-gray-500">Without dashboards, warehouse managers cannot track inventory levels, movement trends, stock turnover, or operational KPIs. <strong>Blazor WMS includes KPI dashboards</strong> with transaction reports, stock reports, inventory reports, and payment summaries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KEY FEATURES -->
|
||||
<section id="features" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 rounded-full px-3.5 py-1 mb-4"><span class="text-emerald-700 text-xs font-medium tracking-wide">Business Features</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">What's <span class="gradient-text">Included</span> in Blazor WMS</h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Complete end-to-end business features — every module is a complete vertical slice with endpoint, handler, validator, and EF Core queries.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Profile</h4><p class="text-xs text-gray-500">Personal Info, Password, Avatar, Session</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3.75 3h12.75c.621 0 1.125.504 1.125 1.125v17.25c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V4.125C2.625 3.504 3.129 3 3.75 3z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Third Party</h4><p class="text-xs text-gray-500">Customer Group, Customer Category, Customer, Customer Contact, Vendor Group, Vendor Category, Vendor, Vendor Contact</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Sales</h4><p class="text-xs text-gray-500">Quotation, Sales Order, Delivery Order, Sales Return, Invoice, Credit Note, Payment, Sales Report, Delivery Report, Return Report, Invoice Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Purchase</h4><p class="text-xs text-gray-500">Requisition, Purchase Order, Goods Receive, Purchase Return, Bill, Debit Note, Payment, Purchase Report, Receive Report, Return Report, Bill Report, Payment Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Inventory</h4><p class="text-xs text-gray-500">Unit Measure, Product Group, Product, Warehouse, Transfer Out, Transfer In, Positive/Negative Adjustment, Scrapping, Stock Count, Transaction Report, Stock Report, Movement Report</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">Utilities</h4><p class="text-xs text-gray-500">Booking Group, Booking Resource, Booking Manager, Scheduler, Program Resource, Program Manager, To-Do List</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-rose-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Logs</h4><p class="text-xs text-gray-500">Database log, File log</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-orange-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">App Settings</h4><p class="text-xs text-gray-500">Users, Currencies, Auto Number</p></div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 product-card"><div class="w-9 h-9 rounded-lg bg-teal-50 flex items-center justify-center mb-3"><svg class="w-4.5 h-4.5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg></div><h4 class="text-sm font-semibold text-gray-900 mb-1">System Settings</h4><p class="text-xs text-gray-500">full inspection mode for appsettings.json</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section id="tech-stack" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-purple-50 border border-purple-200 rounded-full px-3.5 py-1 mb-4"><span class="text-purple-700 text-xs font-medium tracking-wide">Technology</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Technologies <span class="gradient-text">Used</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor WMS is built on the modern .NET ecosystem with production-grade libraries and tools.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-brand-500"></span>.NET 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-blue-500"></span>ASP.NET Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Blazor Server</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-purple-500"></span>MudBlazor</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-cyan-500"></span>ASP.NET Core Minimal APIs</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-amber-500"></span>Entity Framework Core 10</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-rose-500"></span>MediatR + CQRS</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>FluentValidation</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-green-500"></span>Swagger / OpenAPI</span>
|
||||
<span class="inline-flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm"><span class="w-2 h-2 rounded-full bg-orange-500"></span>SignalR</span>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead><tr class="border-b border-gray-200 bg-gray-50/80"><th class="text-left px-4 py-3 font-semibold text-gray-700 w-1/3">Layer</th><th class="text-left px-4 py-3 font-semibold text-gray-700">Technology</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Framework</td><td class="px-4 py-3 text-gray-600">.NET 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Web Framework</td><td class="px-4 py-3 text-gray-600">ASP.NET Core 10</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Rendering</td><td class="px-4 py-3 text-gray-600">Blazor Server (SignalR-based real-time UI)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">UI Component Library</td><td class="px-4 py-3 text-gray-600">MudBlazor (Material Design components for Blazor)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Architecture Pattern</td><td class="px-4 py-3 text-gray-600">Vertical Slice Architecture (VSA) + CQRS via MediatR</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">API Style</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Minimal APIs with Swagger/OpenAPI</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Data Access</td><td class="px-4 py-3 text-gray-600">Entity Framework Core 10 (Code-First, Migrations, Compiled Queries)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Database</td><td class="px-4 py-3 text-gray-600">SQL Server (fully tested) / PostgreSQL (scaffolded)</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Validation</td><td class="px-4 py-3 text-gray-600">FluentValidation</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authentication</td><td class="px-4 py-3 text-gray-600">ASP.NET Core Identity + JWT Bearer Token</td></tr>
|
||||
<tr class="border-b border-gray-100"><td class="px-4 py-3 text-gray-700 font-medium">Authorization</td><td class="px-4 py-3 text-gray-600">Role-Based (RBAC) + Policy-Based Authorization</td></tr>
|
||||
<tr><td class="px-4 py-3 text-gray-700 font-medium">Real-Time</td><td class="px-4 py-3 text-gray-600">SignalR (built into Blazor Server)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHITECTURE -->
|
||||
<section id="architecture" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 rounded-full px-3.5 py-1 mb-4"><span class="text-amber-700 text-xs font-medium tracking-wide">Architecture</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Application <span class="gradient-text">Architecture</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor WMS uses Vertical Slice Architecture (VSA) with CQRS via MediatR — the modern, maintainable approach to building .NET applications.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-10">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-rose-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-rose-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Vertical Slice Architecture</h3>
|
||||
<p class="text-sm text-gray-500">Each feature (Create Contact, Get Deal, Update Lead, etc.) lives in its own folder with its Minimal API endpoint, MediatR handler (Command or Query), FluentValidation validator, and EF Core queries all in one place. <strong>Zero coupling between features.</strong> Add a feature without touching unrelated code.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Folder structure:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">Features/Products/CreateContact/</code> contains endpoint, handler, validator, DTO, and mapping — everything for that single operation.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM8.625 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zM15.375 14.25a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/><path stroke-linecap="round" d="M3.75 4.5h16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75V5.25a.75.75 0 01.75-.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">CQRS via MediatR</h3>
|
||||
<p class="text-sm text-gray-500">Commands (writes) and Queries (reads) are separated into distinct MediatR handlers. <strong>Read queries use EF Core no-tracking</strong> for maximum performance. <strong>Command handlers encapsulate business logic</strong> with full change tracking. Pipeline behaviors handle cross-cutting concerns like validation, logging, and transactions.</p>
|
||||
<p class="text-sm text-gray-500 mt-2"><strong>Example:</strong> <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">GetContactByIdQuery</code> uses <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">.AsNoTracking()</code>. <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">CreateContactCommand</code> uses full change tracking with validation pipeline behavior.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-4"><svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div>
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-2">Single-Project Monolith</h3>
|
||||
<p class="text-sm text-gray-500">The entire application — Blazor UI, REST API, business logic, data access, and authentication — lives in <strong>one .NET 10 project</strong>. No distributed complexity, no microservice overhead. Single <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">F5</code> to run. Deploy as one unit to Azure, IIS, or Docker. Perfect for teams that value simplicity and velocity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Project Structure Overview</h3>
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded-lg p-4 overflow-x-auto"><code>BlazorWMS/
|
||||
├── Features/ # Vertical Slices (one folder per feature)
|
||||
│ ├── Products/
|
||||
│ │ ├── CreateContact/ # Endpoint + Handler + Validator + DTO
|
||||
│ │ ├── GetContactById/
|
||||
│ │ ├── GetContactList/
|
||||
│ │ ├── UpdateContact/
|
||||
│ │ └── DeleteContact/
|
||||
│ ├── Warehouses/
|
||||
│ ├── StockMovements/
|
||||
│ ├── Inventory/
|
||||
│ ├── Transfers/
|
||||
│ └── Dashboard/
|
||||
├── Infrastructure/ # Cross-cutting: Auth, Audit, EF Core
|
||||
├── Migrations/ # EF Core migrations
|
||||
├── SeedData/ # Initial seed data (demo users, sample data)
|
||||
├── Components/ # Shared Blazor components
|
||||
├── wwwroot/ # Static assets
|
||||
└── Program.cs # Single entry point with full configuration</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECURITY -->
|
||||
<section id="security" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 rounded-full px-3.5 py-1 mb-4"><span class="text-green-700 text-xs font-medium tracking-wide">Security</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Security & <span class="gradient-text">Authorization</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Security is baked into the architecture from the ground up — not bolted on as an afterthought.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Blazor WMS ships with a <strong class="text-gray-800">fully configured authentication and authorization system</strong>. ASP.NET Core Identity manages users and roles with secure password hashing. JWT (JSON Web Token) authentication protects all REST API endpoints, while cookie-based authentication handles Blazor Server UI access. <strong>Both schemes run simultaneously.</strong></p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm mb-4">Role-based access control (RBAC) restricts features by user role: <strong>Admin</strong> (full access), <strong>Manager</strong> (team-level access), and <strong>User</strong> (self-service). Policy-based authorization provides fine-grained control for sensitive operations like deal approval or financial reports.</p>
|
||||
<p class="text-gray-600 leading-relaxed text-sm">With Blazor Server, <strong>source code and connection strings never leave the server</strong>. All data access happens server-side via SignalR — zero exposure of database credentials or business logic to the client.</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
||||
<h3 class="font-semibold text-gray-900 mb-3 text-sm">Security Features</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">ASP.NET Core Identity</strong> — User registration, login, password hashing, password reset</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT + Cookie Dual Auth</strong> — Cookies for Blazor UI, JWT for REST API</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Role-Based Access Control</strong> — Admin, Manager, User roles with granular permissions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Policy-Based Authorization</strong> — Declarative policies for fine-grained feature access</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Audit Trail</strong> — Every create/update/delete logged with user ID and timestamp</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SignalR Protection</strong> — Blazor Server connections secured with [Authorize]</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Server-Side Code</strong> — Source code and DB credentials never leave the server</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REST API -->
|
||||
<section id="api" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-cyan-50 border border-cyan-200 rounded-full px-3.5 py-1 mb-4"><span class="text-cyan-700 text-xs font-medium tracking-wide">Integration</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">REST API & <span class="gradient-text">Integration</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">Blazor WMS exposes a complete REST Web API for all entities — ready for mobile apps, third-party integrations, and external systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Endpoints</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">Every feature exposes REST endpoints via ASP.NET Core Minimal APIs. All endpoints are JWT-protected and return proper HTTP status codes.</p>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— List contacts with pagination, search, sort</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-semibold">GET</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Get contact by ID</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-semibold">POST</span><span class="text-gray-600">/api/contacts</span><span class="text-gray-400">— Create new contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-semibold">PUT</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Update contact</span></div>
|
||||
<div class="flex items-center gap-2"><span class="bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-semibold">DELETE</span><span class="text-gray-600">/api/contacts/{id}</span><span class="text-gray-400">— Delete contact</span></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-4">Same pattern applies to all entities: Companies, Deals, Leads, Activities, and Dashboard aggregations.</p>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">API Features</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Swagger/OpenAPI Docs</strong> — Interactive API documentation at <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/swagger</code></span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">JWT Authentication</strong> — All endpoints require Bearer token</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Request/Response DTOs</strong> — Clean separation from domain models</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">FluentValidation</strong> — Input validation on all endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Pagination & Filtering</strong> — Built-in query parameters for list endpoints</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-cyan-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Mobile-Ready</strong> — Use the API to build mobile apps or integrate with external systems</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE & DEPLOYMENT -->
|
||||
<section id="database" class="py-16 lg:py-20">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-200 rounded-full px-3.5 py-1 mb-4"><span class="text-indigo-700 text-xs font-medium tracking-wide">Database & Deployment</span></div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900">Database & <span class="gradient-text">Deployment</span></h2>
|
||||
<p class="text-gray-500 mt-3 max-w-2xl mx-auto">EF Core migrations, seed data, and flexible deployment options — ready to run in under 60 seconds.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Database</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">SQL Server</strong> — Fully tested with EF Core migrations and seed data included</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">PostgreSQL</strong> — Scaffolded in codebase (provider + connection string config ready, not fully tested)</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">EF Core Migrations</strong> — Code-first approach with full migration history</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Seed Data</strong> — Demo users (admin, manager, user), sample business records</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Compiled Queries</strong> — Performance-optimized EF Core queries</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-3">Deployment Options</h3>
|
||||
<ul class="space-y-2.5 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Azure App Service</strong> — Deploy directly from Visual Studio or GitHub Actions</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">IIS (Windows Server)</strong> — Standard ASP.NET Core publish to IIS</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Docker</strong> — Containerize and deploy anywhere Docker runs</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Windows / Linux / macOS</strong> — .NET 10 runs everywhere</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Single Project</strong> — No distributed complexity. One publish, one deploy</span></li>
|
||||
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0Z"/></svg><span><strong class="text-gray-800">Setup Time:</strong> Clone repo → set connection string → F5 → running in under 60 seconds</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SCREENSHOTS -->
|
||||
<section id="screenshots" class="py-16 lg:py-20 bg-gray-50/80">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Application <span class="gradient-text">Screenshots</span></h2>
|
||||
<p class="text-gray-500 mt-2">Explore the Blazor WMS interface — dashboards, data management, workflow management, and more.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<img src="../img/wms-warehouse-inventory-management-system-01.png" alt="Blazor WMS Dashboard Overview" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/wms-warehouse-inventory-management-system-02.png" alt="Blazor WMS Contact Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/wms-warehouse-inventory-management-system-03.png" alt="Blazor WMS Sales Pipeline" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/wms-warehouse-inventory-management-system-04.png" alt="Blazor WMS Deal Tracking" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/wms-warehouse-inventory-management-system-05.png" alt="Blazor WMS Reporting & Analytics" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
<img src="../img/wms-warehouse-inventory-management-system-06.png" alt="Blazor WMS Data Management" class="w-full rounded-xl border border-gray-200 shadow-lg" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIVE DEMO -->
|
||||
<section class="py-10 lg:py-12">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Try the Live Demo</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">Test every feature before you buy. No registration required.</p>
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-5 inline-block text-left shadow-sm">
|
||||
<p class="text-sm text-gray-600"><strong>URL:</strong> <a href="https://blazor-wms.csharpasp.net/" target="_blank" rel="noopener" class="text-brand-600 hover:text-brand-700">https://blazor-wms.csharpasp.net/</a></p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Email:</strong> admin@root.com</p>
|
||||
<p class="text-sm text-gray-600"><strong>Password:</strong> 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY CTA -->
|
||||
<section class="py-8 lg:py-10 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="bg-white border border-orange-200 rounded-2xl p-6 sm:p-8 shadow-lg">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Get Blazor WMS Source Code</h2>
|
||||
<p class="text-gray-500 mb-4">Complete, unrestricted C# source code. Single .NET 10 project. Clone, F5, run.</p>
|
||||
<div class="flex items-center justify-center gap-4 mb-6">
|
||||
<div><span class="text-3xl font-extrabold text-gray-900">$21</span> <span class="text-lg text-gray-400 line-through ml-2">$49</span></div>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full px-3 py-1 font-medium">Instant Download</span>
|
||||
</div>
|
||||
<a href="https://code.indotalent.com/checkout/buy/b581ed46-0ba5-4111-873d-959a4e3b6272?embed=1&logo=0&desc=0" class="lemonsqueezy-button btn-buy text-lg"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>Buy Now — $21 via Lemon Squeezy</a>
|
||||
<p class="text-xs text-gray-400 mt-4">Secure checkout via Lemon Squeezy. Lifetime access. No subscription.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 lg:py-20">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-10">
|
||||
<div class="inline-flex items-center gap-1.5 bg-orange-50 border border-orange-200 rounded-full px-3.5 py-1 mb-4"><span class="text-brand-700 text-xs font-medium tracking-wide">FAQ</span></div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked <span class="gradient-text">Questions</span></h2>
|
||||
</div>
|
||||
<div class="space-y-3" x-data="{open:null}">
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 1 ? null : 1" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What do I get when I purchase Blazor WMS?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 1}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-cloak class="px-4 pb-4 text-sm text-gray-600">You get the <strong>complete, unrestricted C# source code</strong> of the entire Blazor WMS application. A single .NET 10 project with all features, Vertical Slice Architecture implementation, EF Core migrations, seed data, and full configuration. Clone, set your connection string, press F5, and it runs immediately. Includes Blazor Server UI, REST API, authentication, authorization, audit trail, and all CRM features.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 2 ? null : 2" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can I customize and use this for commercial projects?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 2}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-cloak class="px-4 pb-4 text-sm text-gray-600">Yes! Each license covers <strong>one end product per client project</strong>. You can rebrand, customize, add features, and deploy for your clients. Freelancers and agencies save weeks of development. Each new client project requires a separate $21 license. See our <a href="../license.html" class="text-brand-600 hover:text-brand-700 font-medium">License page</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 3 ? null : 3" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Does it support both SQL Server and PostgreSQL?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 3}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-cloak class="px-4 pb-4 text-sm text-gray-600">SQL Server is <strong>fully tested</strong> and ready to use. PostgreSQL support is <strong>scaffolded in the codebase</strong> — the EF Core provider and connection string configuration are set up — but has not been fully tested yet. Switch between databases by changing the connection string and provider in <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">Program.cs</code>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 4 ? null : 4" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">What architecture pattern does Blazor WMS use?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 4}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-cloak class="px-4 pb-4 text-sm text-gray-600">Blazor WMS uses <strong>Vertical Slice Architecture (VSA) with CQRS via MediatR</strong>. Each feature (Create Contact, Get Deal, etc.) lives in its own folder with endpoint, MediatR handler, FluentValidation validator, and EF Core queries. This pattern is AI-friendly, beginner-friendly, and production-proven. Read our <a href="../blog/vsa-introduction.html" class="text-brand-600 hover:text-brand-700 font-medium">VSA Introduction</a>.</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 5 ? null : 5" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Can beginners learn from this source code?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 5}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-cloak class="px-4 pb-4 text-sm text-gray-600">Absolutely! The code is clean, well-structured, and self-documenting. Beginners can study real production patterns — authentication flows, VSA feature organization, REST API endpoints, and database design — all in a single project. You'll need Visual Studio 2022+ and SQL Server (LocalDB or Express, both free).</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button @click="open = open === 6 ? null : 6" class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 text-sm">Is there a refund policy?</span>
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0 ml-4" :class="{'rotate-180': open === 6}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-cloak class="px-4 pb-4 text-sm text-gray-600">Due to the digital nature of source code, we have a strict no-refund policy. That's why we provide a <strong>fully functional live demo</strong> — test every feature before you buy. <a href="../no-refund-policy.html" class="text-brand-600 hover:text-brand-700 font-medium">Full policy here</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-white border-t border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<a href="../index.html" class="flex items-center gap-2"><img src="../img/logo-indotalent-dark.svg" alt="Indotalent" class="h-5 w-auto" /></a>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<a href="../blog.html" class="text-gray-500 hover:text-brand-500">Blog</a>
|
||||
<a href="../privacy-policy.html" class="text-gray-500 hover:text-brand-500">Privacy</a>
|
||||
<a href="../license.html" class="text-gray-500 hover:text-brand-500">License</a>
|
||||
<a href="../support.html" class="text-gray-500 hover:text-brand-500">Support</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">© 2024-2026 Indotalent. <span class="text-brand-500">♥</span> by go2ismail</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user