coding-challenges/index.html at main · Messyginger0804/coding-challenges · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Overview</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
    <div class="max-w-6xl mx-auto bg-white p-8 shadow-xl rounded-lg border border-gray-200">
        <nav class="bg-white shadow-lg w-full mb-8">
            <div class="max-w-6xl mx-auto px-4">
                <div class="flex justify-between items-center h-16">
                    <div class="flex items-center space-x-8">
                        <a href="/" class="flex items-center space-x-2 text-gray-800 hover:text-blue-600 transition">
                            <span class="font-medium">Home</span>
                        </a>

                        <a href="/staging" class="flex items-center space-x-2 text-gray-800 hover:text-blue-600 transition">
                            <span class="font-medium">Staging</span>
                        </a>
                        <a href="/admin/create-account" class="flex items-center space-x-2 text-gray-800 hover:text-blue-600 transition">
                            <span class="font-medium">Create Account</span>
                        </a>

                        <a href="/legends" class="flex items-center space-x-2 text-gray-800 hover:text-blue-600 transition">
                            <span class="font-medium">Guide</span>
                        </a>

                    </div>
                </div>
            </div>
        </nav>

        <h1 class="text-3xl font-bold mb-8 text-gray-700">System Routes Overview</h1>

        <!-- Important Note: Manager and QC are the same role -->
        <div class="mb-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
            <h2 class="text-xl font-semibold text-yellow-700 mb-2">Important Note</h2>
            <p class="text-gray-700">
                The terms "Manager" and "QC" refer to the same role in the system.
                Any tasks related to Quality Control (QC) are performed by users with the Manager role.
                Throughout the system, assume Manager = QC.
            </p>
        </div>

        <!-- Operator Section -->
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4 text-blue-600">Operator Portal</h2>
            <div class="pl-4 border-l-4 border-blue-200">
                <p class="mb-4 text-gray-600">The main page for production operators to create and manage batch records before QC/Manager approval.</p>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="font-semibold mb-2">Features:</p>
                    <ul class="list-disc pl-6 text-gray-600">
                        <li>Create new batch production records</li>
                        <li>Record components, packaging, and ingredients</li>
                        <li>Document start and end times</li>
                        <li>Submit records for Manager (QC) verification</li>
                    </ul>
                    <p class="mt-4 text-sm text-gray-500">📍 Route: /operator</p>
                </div>
            </div>
        </div>

        <!-- Staging Section -->
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4 text-purple-600">Staging Area (Manager/QC)</h2>
            <div class="pl-4 border-l-4 border-purple-200">
                <p class="mb-4 text-gray-600">A central location for Managers (QC) to review, approve, and manage all batch records.</p>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="font-semibold mb-2">Features:</p>
                    <ul class="list-disc pl-6 text-gray-600">
                        <li>View and search all batch records</li>
                        <li>Perform QC reviews (Manager acts as QC)</li>
                        <li>Verify components, packaging, and documentation</li>
                        <li>Approve or reject batches based on quality standards</li>
                        <li>Add QA notes and ensure compliance</li>
                        <li>Monitor and track approval status</li>
                    </ul>
                    <p class="mt-4 text-sm text-gray-500">📍 Routes:
                        <br>- Main listing: /staging
                        <br>- Detailed review & approval: /staging/{record_id}</p>
                </div>
            </div>
        </div>

        <!-- Admin Section -->
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4 text-red-600">Administration</h2>
            <div class="pl-4 border-l-4 border-red-200">
                <p class="mb-4 text-gray-600">System administration and user management functions.</p>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="font-semibold mb-2">Features:</p>
                    <ul class="list-disc pl-6 text-gray-600">
                        <li>Create new user accounts</li>
                        <li>Manage user roles (operator, manager/QC, admin)</li>
                        <li>Handle system maintenance tasks</li>
                        <li>Manage and maintain data integrity</li>
                    </ul>
                    <p class="mt-4 text-sm text-gray-500">📍 Route: /admin/create-account</p>
                </div>
            </div>
        </div>

        <!-- Quick Links -->
        <div class="mt-8 p-4 bg-gray-50 rounded-lg">
            <h3 class="font-semibold mb-2">Quick Links:</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <a href="/operator" class="text-blue-600 hover:text-blue-800">→ Operator Portal</a>
                <a href="/staging" class="text-purple-600 hover:text-purple-800">→ Staging (Manager/QC)</a>
                <a href="/admin/create-account" class="text-red-600 hover:text-red-800">→ Administration</a>
            </div>
        </div>
    </div>
</body>
</html>