OCR Template mapping done Now lets work on user and permission modules

frontend/src/app/templates/templates.component.scss

@@ -225,3 +225,74 @@
 .cdk-drag-animating {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
+
+/* Scanning Overlay Animation */
+.scanning-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.scanner-container {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f8f9fa;
+  box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
+  border: 1px solid #e9ecef;
+}
+
+.scanner-doc {
+  z-index: 1;
+}
+
+.laser-beam {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--primary-color, #3b82f6);
+  box-shadow: 0 0 10px 2px var(--primary-color, #3b82f6);
+  z-index: 2;
+  animation: scan-laser 2s ease-in-out infinite alternate;
+}
+
+.scanner-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(var(--primary-100, #dbeafe) 1px, transparent 1px),
+                    linear-gradient(90deg, var(--primary-100, #dbeafe) 1px, transparent 1px);
+  background-size: 10px 10px;
+  z-index: 0;
+  opacity: 0.5;
+  animation: scan-grid 4s linear infinite;
+}
+
+@keyframes scan-laser {
+  0% { top: -5%; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { top: 105%; opacity: 0; }
+}
+
+@keyframes scan-grid {
+  0% { background-position: 0 0; }
+  100% { background-position: 20px 20px; }
+}