u

.claude/settings.local.json

@@ -0,0 +1,44 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(powershell.exe -Command \"composer --version\")",
+      "Bash(php -l data/menu_converted.php)",
+      "Bash(mv data/menu.php data/menu_backup.php)",
+      "Bash(mv data/menu_converted.php data/menu.php)",
+      "Bash(rm _convert_menu.php)",
+      "mcp__claude_ai_Figma__get_design_context",
+      "mcp__claude_ai_Figma__get_screenshot",
+      "WebFetch(domain:local.agent_test)",
+      "mcp__claude_ai_Figma__get_metadata",
+      "Bash(node -e \":*)",
+      "Bash(node -e \"const fs=require\\(''fs''\\);const c=fs.readFileSync\\(''C:/Users/APC/.claude/projects/c--Users-APC-Downloads-work-agent-test/bf9da1e9-c8e0-4b85-88e6-47358abbfdcc/tool-results/mcp-claude_ai_Figma-get_metadata-1772848492772.txt'',''utf8''\\);const d=JSON.parse\\(c\\);const t=d[0].text;const ls=t.split\\(''\\\\n''\\);ls.forEach\\(\\(l,i\\)=>{if\\(/menu|danh|category|showroom|dropdown|nav|open/i.test\\(l\\)\\){console.log\\(i+'': ''+l.substring\\(0,200\\)\\)}}\\);\")",
+      "Bash(node -e \"const fs=require\\(''fs''\\);const c=fs.readFileSync\\(''C:/Users/APC/.claude/projects/c--Users-APC-Downloads-work-agent-test/bf9da1e9-c8e0-4b85-88e6-47358abbfdcc/tool-results/mcp-claude_ai_Figma-get_metadata-1772848492772.txt'',''utf8''\\);const d=JSON.parse\\(c\\);const t=d[0].text;const ls=t.split\\(''\\\\n''\\);// Print top-level frames \\(page children\\) - lines with frame id at low indent:*)",
+      "Bash(curl -s -o menu_may_lanh.png \"https://www.figma.com/api/mcp/asset/4e4e0480-d097-48a5-9320-5ada2d995706\")",
+      "Bash(curl -s -o menu_tu_lanh.png \"https://www.figma.com/api/mcp/asset/bd563be6-4c28-483e-9509-85e10803ca3d\")",
+      "Bash(curl -s -o menu_tivi.png \"https://www.figma.com/api/mcp/asset/39ada317-6fbf-4b16-975c-8a28c0478840\")",
+      "Bash(curl -s -o menu_may_say.png \"https://www.figma.com/api/mcp/asset/1b571249-0bca-47c5-8cf4-779533548d41\")",
+      "Bash(curl -s -o menu_may_giat.png \"https://www.figma.com/api/mcp/asset/70d4c142-e402-4567-b164-afe22ecb5294\")",
+      "Bash(curl -s -o menu_may_nuoc_nong.png \"https://www.figma.com/api/mcp/asset/7d029f58-802c-47c1-a83f-55469ffe509c\")",
+      "Bash(curl -s -o menu_tu_mat.png \"https://www.figma.com/api/mcp/asset/c649befb-7cbf-4d9c-9aa9-69384a1f2eb9\")",
+      "Bash(curl -s -o menu_tu_dong.png \"https://www.figma.com/api/mcp/asset/50768d63-9f95-476e-bbc7-8c3f51262302\")",
+      "Bash(curl -s -o menu_may_rua_bat.png \"https://www.figma.com/api/mcp/asset/58f0f14d-62b1-4a6f-8b84-67f1465810a9\")",
+      "Bash(curl -s -o brand_samsung.png \"https://www.figma.com/api/mcp/asset/e9059f0c-1e4a-4e10-856e-4320bd765832\")",
+      "Bash(curl -s -o brand_lg.png \"https://www.figma.com/api/mcp/asset/c62f6078-b073-4d3e-aec4-ba8f020dbc22\")",
+      "Bash(curl -s -o brand_sony.png \"https://www.figma.com/api/mcp/asset/fb3e3b33-fc5e-442c-8cd4-2766485f9065\")",
+      "Bash(curl -s -o brand_toshiba.png \"https://www.figma.com/api/mcp/asset/72eb8f5d-5b45-47c8-b0a6-0dcc3ac6442a\")",
+      "Bash(curl -s -o brand_aqua.png \"https://www.figma.com/api/mcp/asset/b3d2dde1-7b8c-4a77-9f64-e2ef9664bfa5\")",
+      "Bash(curl -s -o brand_tcl.png \"https://www.figma.com/api/mcp/asset/b8fb0d87-7e7c-441b-923c-5483afec26cc\")",
+      "Bash(curl -s -o icon_fire.png \"https://www.figma.com/api/mcp/asset/5376c62c-720c-487a-b6b7-e2a6f241b216\")",
+      "Bash(curl -s -o icon_sale_badge.png \"https://www.figma.com/api/mcp/asset/730adacb-889a-4fcf-920e-81adc7dc9387\")",
+      "Bash(curl -s -o icon_chevron_right_menu.svg \"https://www.figma.com/api/mcp/asset/06ec1348-1661-4d1d-9f2b-6df1628f6a89\")",
+      "Bash(curl -s -o icon_map_pin.svg \"https://www.figma.com/api/mcp/asset/3b6002b1-280d-44c9-97f7-752fbbdc748e\")",
+      "Bash(curl -s -o icon_phone.svg \"https://www.figma.com/api/mcp/asset/d01881d5-28c5-49c0-8587-878902b8a532\")",
+      "Bash(curl -s -o icon_support.svg \"https://www.figma.com/api/mcp/asset/da2be7e1-3c3c-4b9e-8fc7-8e7c70208cb8\")",
+      "Bash(curl -s -o icon_map_fill.svg \"https://www.figma.com/api/mcp/asset/6b1b28b3-d6bc-45fe-a2b8-f6d2855f96b9\")",
+      "Bash(curl -L \"https://www.figma.com/api/mcp/asset/f8150959-3677-4d5c-85d9-70310533fb75\" -o \"c:/Users/APC/Downloads/work/agent_test/export_to_html/image/search_promo_banner.png\" --silent)",
+      "WebFetch(domain:www.figma.com)",
+      "Bash(curl -s -H \"X-Figma-Token: figd_uiWTwLaZj6DQBU16r7t9r8Ei9zOhD-fevGWEBPwp\" \"https://api.figma.com/v1/files/JmbJxl6r2KMggCtiJOc0gZ/nodes?ids=7-6456\")",
+      "Bash(python -m json.tool)"
+    ]
+  }
+}

.htaccess

@@ -0,0 +1,7 @@
+RewriteEngine on
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_URI} !^/index.php
+# prevent rewrite non-existent files
+RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|css|js|php|tiff|jpeg|ico)$
+RewriteRule ^(.*)$ /index.php [QSA,L]

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "chat.mcp.discovery.enabled": {
+        "claude-desktop": true
+    },
+    "chat.viewProgressBadge.enabled": true
+}

README.md

@@ -0,0 +1,79 @@
+<h1>Hướng dẫn</h1>
+
+<p>Link thiết kế: <a href="https://www.figma.com/file/5Km584w3tlnwxOltV5KAjh/281123_HURA8?node-id=328%3A1204&mode=dev" target="_blank"> <strong>Giao diện Admin</strong> </a></p>
+
+<p>Repo: <a href="https://repo.hurasoft.com/tieptk/admin_hura_8" target="_blank">https://repo.hurasoft.com/tieptk/admin_hura_8</a></p>
+
+<p>Theo dõi tiến độ: <a href="https://docs.google.com/spreadsheets/d/1Po3ANsG00pm_Y3dnrwuV81cidTCCqepYmR3yPDlIq6c/edit#gid=0" target="_blank">https://docs.google.com/spreadsheets/d/1Po3ANsG00pm_Y3dnrwuV81cidTCCqepYmR3yPDlIq6c/edit#gid=0</a></p>
+
+<h2>Cài đặt hệ thống</h2>
+
+<p>Test và làm việc chính tại web: <a href="http://local.hura8_admin/"> http://local.hura8_admin/</a> </p>
+
+<ul>
+    <li>Tải phần mềm XAMPP tại <a href="https://www.apachefriends.org/download.html" target="_blank">https://www.apachefriends.org/download.html</a> để chạy PHP</li>
+    <li>Chỉnh file hosts trong máy tính C:\Windows\System32\drivers\etc\hosts: 
+<pre><code>
+127.0.0.1 local.hura8_admin
+        </code></pre>
+</li>
+    <li>
+        Cài đặt ../xampp/apache/conf/extra/httpd-vhosts.conf của apache trong XAMPP
+        <pre><code>
+            &lt;VirtualHost *:80&gt;
+                DocumentRoot "/thuc-muc-check-out/admin_hura_8"
+                ServerName local.hura8_admin
+                &lt;Directory "/thuc-muc-check-out/admin_hura_8/"&gt;
+                    Require all granted
+                &lt;/Directory&gt;
+            &lt;/VirtualHost&gt; 
+        </code></pre>
+    </li>
+    <li>
+        Cài đặt ../xampp/apache/conf/httpd.conf của apache trong XAMPP
+        <pre><code> 
+    # AllowOverride controls what directives may be placed in .htaccess files.
+    # It can be "All", "None", or any combination of the keywords:
+    # AllowOverride FileInfo AuthConfig Limit 
+    AllowOverride All
+        </code></pre>
+    </li>
+</ul>
+
+
+
+<h2>Cấu trúc thư mục</h2>
+
+<ul>
+    <li>/template: các file template html chia theo module/view</li>
+    <li>/data: cung cấp dữ liệu cho template và hiển thị dữ liệu trên template qua code Liquid <a href="https://shopify.github.io/liquid/" target="_blank">https://shopify.github.io/liquid/</a></li>
+    <li>/assets: lưu các file ảnh/css/js dùng cho giao diện</li>
+    <li>/package: thư viện code PHP hỗ trợ</li>
+    <li>/inc: các code PHP hỗ trợ</li>
+    <li>index.php: file gốc để truy cập nội dung</li>
+    <li>ajax.php: file gốc để gọi ajax</li>
+</ul>
+
+<h2>Cài đặt Composer (dùng tải package của PHP)</h2>
+
+<p>Xem hướng dẫn: <a href="https://getcomposer.org/doc/00-intro.md#installation-windows" target="_blank">https://getcomposer.org/doc/00-intro.md#installation-windows</a> </p>
+
+<p>Sau khi cài đặt xong. Mở cmd của Windows và thao tác lệnh sau để cài các thư viện code PHP cần cho dự án này.</p>
+
+<pre><code>
+    > cd /thuc-muc-check-out/admin_hura_8/package
+    > composer i 
+</code></pre>
+
+
+
+<h2> Sử dụng <u>Tailwind</u> để style giao diện.</h2>
+
+<ul>
+     <li>[Dùng chính] <a href="https://daisyui.com/components/" target="_blank">https://daisyui.com/components/</a></li>
+    <li><a href="https://tailwindui.com/" target="_blank"> https://tailwindui.com/ </a></li>
+    <li><a href="https://tailblocks.cc/" target="_blank"> https://tailblocks.cc/ </a></li>
+    <li><a href="https://www.hyperui.dev/" target="_blank"> https://www.hyperui.dev/ </a></li>
+    <li><a href="https://flowbite.com/docs/plugins/charts/" target="_blank"> Biểu đồ </a></li>
+</ul>
+ 

_shared.php

@@ -0,0 +1,17 @@
+<?php
+
+const ROOT_DIR = __DIR__;
+const CONFIG_DIR = ROOT_DIR . '/inc/config';
+
+const IMAGE_FILE_SEPARATOR = "-";
+define("CURRENT_TIME", time());
+const STATIC_DOMAIN = "http://hura8.hurasoft.com";
+const ENABLE_DB_DEBUG = true;
+const LANGUAGE = 'vi';
+const IS_DEFAULT_LANGUAGE = true;
+
+include ROOT_DIR."/inc/common.php";
+include ROOT_DIR."/inc/fun.db.php";
+
+// start autoload
+init_autoload();

ajax.php

@@ -0,0 +1,7 @@
+<?php
+
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
+include __DIR__."/_shared.php";

assets/script/hura.global.css

@@ -0,0 +1,252 @@
+/* ===========================
+   FONT IMPORT (Dùng chung)
+   =========================== */
+@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800;900;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700;800;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Inclusive+Sans:wght@400;500;600;700;800;900;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=AR+One+Sans:wght@400;500;600;700;800;1000&display=swap";
+
+@layer properties {
+  :root {
+    --font-sans: "Inclusive Sans", sans-serif;
+    --text-base: 16px;
+    --bg-body: #fafbfd;
+    --color-hura: #0041e8;
+    --color-header: #002bb5;
+    --text-base--line-height: 1.5;
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --layout-topbar-background: #fff;
+    --menu-active: #e9f2ff;
+    --menu-text: #177bff;
+    --menu-sub-bg: #fff;
+  }
+}
+
+@layer base {
+  html,
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}
+
+@layer components {
+  #layout-topbar {
+    background: var(--layout-topbar-background);
+    top: calc(var(--spacing) * 0);
+    z-index: 10;
+    transition-property: top, margin, border-radius;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+    position: sticky;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-color: var(--color-base-300);
+  }
+  #layout-content {
+    padding: calc(var(--spacing) * 6);
+    transition-property: all;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    flex-grow: 1;
+    background: var(--bg-body);
+  }
+  .bg-menu {
+    background-color: var(--color-header);
+  }
+  /*  menu */
+  .menu {
+    & {
+      --menu-active-bg: #e9f2ff;
+    }
+  }
+  .menu-horizontal {
+    display: inline-flex;
+    flex-direction: row;
+  }
+  .menu-horizontal li {
+    position: relative;
+  }
+
+  /* ACTIVE STATE (LEVEL 1) */
+  .menu-horizontal li.active {
+    background: var(--menu-active);
+  }
+
+  .menu-horizontal li.active .grow,
+  .menu-horizontal li.active svg {
+    color: var(--menu-text);
+  }
+
+  /* ACTIVE STATE (LEVEL 2)  */
+  .menu-horizontal li.active ul li.active {
+    background: var(--color-hura);
+  }
+
+  .menu-horizontal li.active ul li.active a {
+    color: #fff;
+  }
+  /*  HOVER LEVEL 1 */
+
+  .menu-horizontal li:hover {
+    background: var(--menu-active);
+  }
+
+  .menu-horizontal li:hover .grow,
+  .menu-horizontal li:hover svg {
+    color: var(--color-hura);
+  }
+
+  /* Dải hover giữ submenu không bị mất */
+  .menu-horizontal li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -18px;
+    width: 100%;
+    height: 30px;
+    display: none;
+  }
+
+  .menu-horizontal li:hover::before {
+    display: block;
+  }
+
+  /* ==========================
+   SUBMENU (UL)
+  ========================== */
+  .menu-horizontal li .submenu {
+    position: absolute !important;
+    top: 125%;
+    left: 0;
+    background: var(--menu-sub-bg);
+    margin-left: 0 !important;
+    padding: 0.5rem;
+    z-index: 999;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: none;
+    margin-top: 0 !important;
+  }
+
+  /* DaisyUI details submenu spacing */
+  .menu-horizontal > li:not(.menu-title) > details > ul {
+    margin-top: 1rem;
+    padding-inline-end: 0.5rem;
+  }
+
+  /* SHOW SUBMENU ON HOVER */
+  .menu-horizontal li:hover .submenu,
+  .menu-horizontal li:hover > details > ul {
+    display: block;
+  }
+
+  /* Remove extra before from DaisyUI */
+  .menu-horizontal > li > details > ul:before {
+    content: none;
+  }
+  /* ==========================
+   SUBMENU HOVER ITEMS
+  ========================== */
+  .menu-horizontal li ul li:hover {
+    background: var(--color-hura);
+  }
+
+  .menu-horizontal li ul li:hover a {
+    color: #fff;
+  }
+
+  .menu-horizontal li ul li:hover::before {
+    display: none;
+  }
+  /* Font weight chung */
+  .menu-horizontal .grow {
+    font-weight: 500;
+  }
+  .menu-icon-color {
+    color: #838383;
+  }
+  .card-body {
+    padding: calc(var(--spacing) * 4);
+  }
+  .choices {
+    margin-top: calc(var(--spacing) * 2);
+    --tw-shadow:
+      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
+      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-radius: var(--radius-sm);
+  }
+  .choices__inner {
+    background: #fff !important;
+    min-height: 38px !important;
+    padding: 5px !important;
+  }
+}
+
+@layer hura {
+  .hura-btn-active {
+    --btn-bg: var(--color-hura);
+    --btn-fg: #ffffff;
+    --btn-border: var(--color-hura);
+    color: var(--color-white);
+  }
+  .hura-btn-active:hover {
+    --btn-bg: #002bb5;
+    --btn-border: #002bb5;
+  }
+  .hura-btn-outline {
+    background: #f5f7ff;
+    color: var(--color-hura);
+    border: 1px solid var(--color-hura);
+  }
+  .hura-btn-outline:hover {
+    background: var(--color-hura);
+    color: #fff;
+  }
+  .hura-checkbox:checked,
+  .hura-checkbox[aria-checked="true"] {
+    background: var(--color-hura);
+    color: #fff;
+  }
+  .hura-radio:checked,
+  .hura-radio[aria-checked="true"] {
+    border-color: var(--color-hura);
+  }
+  .hura-radio:checked::before,
+  .hura-radio[aria-checked="true"]::before {
+    background-color: var(--color-hura);
+  }
+  .hura-text-blue {
+    color: var(--color-hura);
+  }
+  .hura-bg-blue {
+    background: var(--color-hura);
+  }
+  .hura-shadow-blue {
+    box-shadow:
+      0 10px 15px -3px rgb(var(--color-hura) / 0.35),
+      0 4px 6px -4px rgb(var(--color-hura) / 0.25);
+  }
+}

assets/script/tailwind-daisyui.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "daisyui";

assets/typescript/main.ts

@@ -0,0 +1,32 @@
+"use strict";
+
+interface AdminFunctions {
+    addProductToCategory(productId: string): void;
+    markProductAsHot(productId: string): void;
+}
+
+const AdminFunctions: AdminFunctions = (() => {
+
+    function addProductToCategory(productId: string): void {
+        const statusElement = $('#status_' + productId);
+        statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
+        setTimeout(() => {
+            statusElement.html('');
+        }, 1000);
+    }
+
+    function markProductAsHot(productId: string): void {
+        const statusElement = $('#js-status-hottype-' + productId);
+        statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
+        setTimeout(() => {
+            statusElement.html('');
+        }, 1000);
+    }
+
+    return {
+        addProductToCategory,
+        markProductAsHot
+    };
+})();
+
+export default AdminFunctions;